'React' 카테고리의 글 목록

# 관계형 db 항목이 정해져 있음 데이터를 엑셀처럼 표에 저장 데이터 입출력시 SQL이라는 언어를 사용하고 미리 스키마 정의(표만들기)도 해야하고 데이터 중복저장을 피하기 위해 정규화해야함 안정적인 데이터저장과 운영이 필요한 곳에서 사용 # 비관계형 db 오브젝트 형태로 저장함(array처럼) 분산처리를 잘해줌(대용량 트래픽 분산처리 : SNS 서비스처럼 많은 데이터 입출력이 필요할때 강점) 몽고디비에서 무료 호스팅 사용하기 SQL 언어, 스키마 정의(표 만들기), 정규화 이런게 대부분 필요없음 MongoDB (비관계형 db) 데이터를 자바스크립트 object자료형과 똑같은 모양으로 저장 # 몽고디비 free 500mb 정도 용량의 무료 호스팅 , free로 선택후 aws로 선택, 국가는 서울로 선택한..

React

vercel로 next13 배포

2024.01.03

1. .github/workflows root 폴더에 .github/workflows 폴더 생성 후 preview.yaml 파일을 생성한다. //preview.yaml name: GitHub Actions Vercel Preview Deployment env: VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }} VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }} on: push: branches-ignore: - main jobs: Deploy-Preview: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - name: Install Vercel CLI run: npm instal..

React

next13 (feat. 애플코딩)

2023.09.15

# nextjs 13버전 - 폴더기반 자동라우팅 - 새로디자인한 서버API 기능 - 쉬운 DB연결 - 직관적인 rendering 전략 선택기능 - hydration없는 server-side rendering - 파워풀한 캐싱 - 이미지와 폰트 최적화 # 개발 환경 셋팅 - nodejs 설치(lts버전 - node 18버전이상) - vscode 에디터 설치 - nextjs 설치 (npx create-next-app@latest) # 폴더 설명 - app 폴더 : 코드짤 폴더 - page.js : 메인페이지 (typescript를 쓰고 싶다면 tsx로 확장자를 바꾸면 된다.) - layout.js : 메인페이지 감싸는 용도의 페이지 - public 폴더 : 이미지나 static 파일 보관용 - api 폴더 ..

React

react를 공부하고 있는 중급자(?)를 위한 tip

2023.08.24

# snippets 1. 컴포넌트 단축키 = rcc 2. 함수형 컴포넌트 - rfc : 컴포넌트 작성과 동시에 export - rfce : export 코드 분리 - rsf : props를 가진 컴포넌트 생성 3. 화살표 함수형 - rsc : 빈 div를 가진 화살표 함수 컴포넌트 생성 - rafc : 화살표 함수 컴포넌트를 생성과 함께 export하고, 컴포넌트가 있는 js파일명이 div안에 작성됨 - rafce : export코드가 분리된 화살표 함수 컴포넌트를 생성하고, 컴포넌트가 있는 js파일명이 div안에 작성됨 🙄초보때는 자동완성보다는 익히기 위해서 일일히 따라치는 것을 선호합니다. (모든 언어 공통) # 코드 깔끔하게 짜기 -함수형 컴포넌트 사용하기 (arrow-function 같은) -인라..

React

리액트 아코디언 메뉴(feat.Gnb)

2023.05.15

# 기능소개 1) 대메뉴 클릭시 소메뉴가 보이게 하기(대메뉴는 토글기능) 2) 대메뉴에서 현재 메뉴가 아닌 다른 대메뉴를 클릭할 경우 현재메뉴는 닫히게 하기 3) 윈도우 창이 1024이하로 갈경우 모바일 메뉴로 변경 4) 모바일 메뉴 Open 클릭시 사이드바가 보이면서 백그라운드 어둡게 변경 5) 어두운 백그라운드 클릭시 사이드바가 닫히게 하기 😉최종코드는 하단에 첨부 1. 메뉴 토글 기능을 위해서 useState이용하여 open 변수 제어 setOpen(!open); 간단하게 온클릭시 보통 이렇게 많이 한다. 하지만 이렇게만 하면 내가 클릭하지 않은 다른 대메뉴도 모두 열리는 재밌는일(?)이 일어난다. 이럴때 가장 쉽게 처리 할 수 있는 방법은 바로 index를 부여하여 제어하는 것이다. 1> inde..

React

react + tailwind

2023.05.12

1. 설치하기 npm install -D tailwindcss npx tailwindcss init 2. tailwind.config.js /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./src/**/*.{js,jsx,ts,tsx}", ], theme: { extend: {}, }, plugins: [], } 3. index.css @tailwind base; @tailwind components; @tailwind utilities; /*최상단에 추가*/ 4. npm run start 5.예시 export default function App() { return ( Hello world! ) } 👀테일윈드 더 알아..

React

리액트 라우터 v6

2023.05.11

1. npx create-react-app . --template typescript 2. npm install react-router-dom @types/react-router-dom ★타입스크립트 사용시 @types/moduleName 을 추가로 설치 해야한다. 3. index.js BrowserRouter로 app 감싸기 - BrowserRouter: History 객체를 생성하고, 초기 위치를 상태로 만들고, URL을 참조한다. 4. 라우트를 사용할 부분에 import { Routes, Route } from "react-router-dom"; 1) Routes : 여러 Route를 감싸서 그 중 규칙이 일치하는 라우트 하나만을 렌더링 시켜주는 역할 - Route Config라는 경로 객체 트리를..

React

react + typescript

2023.05.10

1. 설치하기 npx create-react-app . npm i @types/react 통합적으로 npx create-react-app . --template typescript 설치가능 2. .ts 와 .tsx .ts파일은 pure typescript 파일 .tsx 파일은 typescript의 react문법을 담아내기 위한 확장자(jsx+ typescript) 3. src 디렉토리 1) index.tsx 1: 메인 엔트리 파일 2: React.Dom.render 수행 3: pwa(프로그레시브 웹 앱 = HTML, CSS, JavaScript와 같은 웹 기술로 만드는 앱)를 위한 서비스 워커 등록 작업 2) index.css 글로벌 스타일 작성(프로그래밍적으로 제한되지 않음) 3) App.tsx App..

React

useEffect

2023.04.25

useEffect 1. 컴포넌트가 마운트 됐을 때 (처음 나타났을 때 = 컴포넌트가 랜더링 됬을 때) - 화면이 처음 떴을때 실행 하며 의존성배열deps에 [] 빈배열 사용 2. 컴포넌트가 언마운트 됐을 때 (사라질 때 = 컴포넌트가 사라질 때) - 라이프싸이클중 componentDidmount처럼 실행 - 라이프싸이클중 componentWillUnmount처럼 실행 - unmount이전 / update직전에 어떠한 작업을 수행하고 싶을 때 - useEffect 에 rerutn문 사용( = clean up함수) 3. 컴포넌트가 업데이트 될 때 (특정 props나 state 가 바뀔 때 ) - componentDidUpdate처럼 실행 - 의존성배열deps에 넣은 파라미터값이 업데이트 됬을때 실행 😉 리액..

React

Context

2023.02.17

# 리덕스를 쓰다가 굳이 데이터변화가 없는대 리덕스를 써야하는가 라는 의구심이 들었는대 역시나 데이터변화가 필요없을땐 단순하게 다크모드를 한다거나 레이아웃만 변경된다거나 등등 - 저서에서도 단순하게 쓸때만 사용하라고 한다. 지난번 코드를 Context로 바꿔보았음 1.세팅하기 - 리액트안에 내장된 기능이라 설치할것없음 import React, { useState, createContext} from 'react' // createContext추가 const pageInfo = createContext(); //1.생성하기 - Context api를 사용하겠다고 정의한것 export { pageInfo }; //2.다른파일에서 할경우는 export를 해줘야함 const App = () => { const ..

React

next13 (feat. 애플코딩,MongoDB)

vercel로 next13 배포

next13 (feat. 애플코딩)

react를 공부하고 있는 중급자(?)를 위한 tip

리액트 아코디언 메뉴(feat.Gnb)

react + tailwind

리액트 라우터 v6

react + typescript

useEffect

Context

티스토리툴바