당연한 개발자가 되자

프로세스 React Context에 로그인 정보를 담아서 전역적으로 사용할 수 있도록 한다. 상태를 관리하는 store가 따로 없다. React Context란 https://www.notion.so/shin96bc/React-da0323bb125049a7a544bf2715d99906?p=47b34a0f354649fc8459dea47be0b684&pm=s 코드 작성법 폴더 구조 AuthContextProvider import {createContext, useContext} from "react"; // AuthContext는 Hook을 사용해서 제공한다. const AuthContext = createContext(null); export const useAuthContext = () => { retu..

프로세스 Redux에 로그인 정보를 담아서 전역적으로 사용할 수 있도록 합니다. 상태를 관리하는 Store가 따로 존재합니다. 코드 작성법 폴더 구조 store LoginDataSlice.js import { createSlice } from "@reduxjs/toolkit"; const initialState = { token: '', name: '', isValidToken: false }; const LoginDataSlice = createSlice({ name: 'loginData', initialState, reducers: { login(state, action) { return {...initialState, ...action.payload, isValidToken: true}; }, lo..

Atomic Design(아토믹 디자인)이란? 아토믹 디자인은 디자인 패턴중에 하나입니다. 가장 작은 원자단위부터 원자가 모여서 분자를 이루고 분자들을 모아서 유기체를 형성하고, 유기체를 모아 하나의 템플릿으로 만들 수 있으며, 템플릿에 데이터를 주입해서 최종적으로 페이지를 생성하는 구조입니다. 아토믹 디자인은 총 5단계를 거쳐서 컴포넌트를 생성하고, 최종적으로 완성된 페이지를 유저에게 제공합니다. 그 과정에서 생성한 원자, 분자, 유기체 등은 재사용이 가능하기 때문에 유지보수가 용이해집니다. Atomic Design의 5단계 atoms(원자) Button, Input 등과 같은 범용적이고 가장 기본적인 Component들이 여기에 해당합니다. 원자에는 컬러, 폰트, 애니메이션 같이 추상적인 요소가 포함..

setInterval 기능 사용법 주의점 초기값이 유지되는 문제 // # 문제 발생 코드const [productDataIndex, setProductDataIndex] = useState(0); useEffect(() => { const slideInterval = setInterval(() => { if (productDataIndex >= productDataList.length - 1) { setProductDataIndex(0); } else { setProductDataIndex(productDataIndex + 1); } }, 3000); return () => { clearInterval(slideInterval); }; }, []); // 이렇게 useEffect 에 2번째 인자값으로 [..

설치하기 https://ckeditor.com/docs/ckeditor5/latest/index.html 에 접속합니다. 검색창에 React Component 를 검색합니다. 또는 아래의 사진과 같이 찾아갑니다. 사이트에 나와있는 방법으로 설치를 진행합니다. 기본설정 상단에 import 를 해줍니다. 원하는곳에 CKEditor Component 를 아래와 같이 작성해줍니다. { // You can store the "editor" and use when it is needed.console.log( 'Editor is ready to use!', editor ); } } onChange={ ( event, editor ) => { const data = editor.getData(); console.lo..

실행할 때 명령어로 변경( 일회성 ) // npm PORT=3002 npm run start // yarn PORT=3002 yarn run start package.json 으로 변경( 영구적 ) Mac, Linux # ... 이전 내용 생략 "scripts": { "start": "export PORT=3002 && react-scripts start", # ... 이후 내용 생략 Window # ... 이전 내용 생략 "scripts": { "start": "set PORT=3002 && react-scripts start", # ... 이후 내용 생략

React Context란 무엇인가 Context는 props를 전달하지 않고 어디서든 상태값에 접근할 수 있는 방법을 제공한다. Context는 단순히 값을 전달하는 파이프와 같다. 개념적으로는 종속성 주입을 한 형태이다. Context는 상태관리가 아니다. 상태관리란 시간이 지남에 따라 상태가 변경되는 방식을 말한다. redux와 state가 상태관리에 해당한다. 사용법 & 장단점 Context는 단순히 prop-drilling을 피하기 위한 목적으로 사용한다. 특정 구성 요소만 re-render 시키거나, 사이드 이펙트를 줄이기 위해 더 강력한 기능이 필요하다면 Redux를 사용하는게 좋다. 간단하게 사용할 수 있다는 장점이 있다. 초기에는 간편하게 사용할 수 있어서 좋지만 애플리케이션이 커질수록 ..

tsconfig.json 파일을 수정하는 방법 tsconfig.json 파일을 열어서 아래의 옵션들을 추가해줍니다. baseUrl 은 root( 최상위 폴더 ) 를 지정할 수 있는 옵션입니다. include 는 import 시에 해당 경로를 포함할 것인지 포함하지 않을 것인지를 설정할 수 있습니다. ( include 에 src 포함하지 않을 시 src/폴더 경로/파일이름 이고 포함했을 때는 폴더 경로/파일이름 입니다. ) 그러나 보통 절대 경로는 외부 파일을 불러올 때 사용하고, 내부 파일을 연결할 때는 상대경로를 많이 사용합니다. 상대 경로를 사용하는 것이 나중에 파일의 위치가 이동했을 때 유연하게 대처할 수 있고, 속도가 좀 더 빠릅니다.

기본적으로 서버와의 연동이란 서버에 react 로 만든 페이지의 요청이 들어오면 react 로 만든 index.html 을 전송해주는 것을 연동이라고 합니다. 먼저 간단한 express 프로젝트를 만듭니다. 그 다음에 react 프로젝트를 서버 프로젝트 안으로 넣습니다. ( 그전에 반드시 react 프로젝트를 빌드 해야합니다. ) 그 다음에 server.js 라는 파일을 만들어서 아래의 코드들을 작성해줍니다. 그리고 터미널에 아래의 명령어를 입력하면 서버를 실행할 수 있습니다. // nodemon 이 설치된 경우 nodemon server.js // nodemon 이 설치되지 않은 경우 node server.js 근데 여기서 유저가 http://localhost:8080/detail/0 로 접속을 하면 ..

async 함수 async 함수는 기본적으로 실행이 완료되는 것을 기다리지 않고 바로 다음 코드를 실행합니다. ajax, 이벤트 리스너, setTimeout, state 변경함수 들이 기본적으로 asynchronous ( 비동기적 ) 하게 동작합니다. 이런 비동기 함수들은 실행이 완료되는 것을 기다려주지 않기 때문에 무결성이 깨지거나 의도하지 않은 방식으로 동작할 수 있습니다. ( 위에 적은 state 변경 함수보다 아래 적은 state 변경 함수가 먼저 완료되어서 의도와는 다르게 작동하는 현상 등 ) 이런 상황을 동기적으로 순서에 맡게 처리하고 싶을 때는 useEffect 같은 훅을 사용해서 state 변동이 일어나면 실행하도록 세팅하는 방법으로 해결할 수 있습니다.