지금부터가 반전

이번 개인 프로젝트를 진행하면서 headless CMS 인 strapi를 사용하고 있다. 백엔드 서버와 데이터베이스를 손쉽게 구축하고 관리할 수 있기 때문이다. strapi는 endpoint를 이용하여 자동으로 API를 만들어 제공하지만, 사용하다보면 API를 직접 커스텀해야하는 경우도 생기기 마련이다. 나같은 경우는 회원가입 진행 시, username과 email 의 중복 검사를 진행하기 위해 API를 커스텀하여 만들었다. 기존의 register API 에서도 중복되는 email이나 username으로 회원가입 시도 시, 다음과 같은 응답을 보내며 회원가입을 막고있다. 하지만 이렇게 되면 사용자는 회원가입 버튼을 누른 후에야 중복여부를 알 수 있어 매우 불편한 상황이 생긴다. 이 방법이 아니라면 모든 ..

🔮 1. React-DOM React는 UI를 구축하기 위한 자바스크립트 라이브러리로, React의 핵심은 바로 컴포넌트이다. UI를 구축하기 위해서 바로 이 컴포넌트를 이용하기 때문이다. 컴포넌트를 통해 사용자 인터페이스를 구성하고, 업데이트 역시 컴포넌트를 통해서 한다. React는 컴포넌트와 상태 객체를 관리하고 업데이트가 일어나면 변경 전후의 상태를 확인한다. 그리고 React는 화면에 표시되어야할 모든 정보를 React-DOM 에게 전달하고, React-DOM이 DOM을 업데이트(렌더링 및 리렌더링) 한다. //index.js import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; const r..

리액트의 내장 hook 중에 하나인 useEffect는 useState만큼이나 중요하고 또 자주 쓰이는데, useEffect의 실행 시점에 대해서 모호하게 알고있어 정확하게 짚고 넘어가야겠다 생각했다. useEffect에 전달된 콜백은 컴포넌트가 mount, update, unmount될 때 실행될 수 있는데, 각각의 경우 컴포넌트 내에서 어떤 순서로 실행되는지 확인해보기로 했다. 1️⃣ mount 될 때 useEffect 실행 시점 useEffect는 컴포넌트가 mount, update, unmount '될 때' 실행된다. 그런데 이 말이 조금 모호하다. 컴포넌트가 렌더링 되면서 함께 실행된다는 것일까, 렌더링 된 후에 실행된다는 것일까?🤔 결론부터 말하자면 useEffect의 실행은 컴포넌트의 렌더링..

React 프로젝트와 firebase를 연결할 때 환경변수를 설정할 필요가 생겼다. 각종 key와 url을 숨기기 위함이다. 그래서 dotenv 라이브러리를 사용하기로 했다. dotenv는 환경 변수를 설정할 수 있도록 도와주는데, .env 파일을 만들고 그 안에 변수를 만들기만 하면 환경변수로 설정해주어 process.env 경로로 쉽게 꺼내어 사용할 수 있다. 예) .env 파일에 이렇게 설정해둔 후에 1 2 3 4 5 6 REACT_APP_API_KEY = value REACT_APP_AUTH_DOMAIN = value REACT_APP_PROJECT_ID = value REACT_APP_STORAGE_BUCKET = value REACT_APP_MESSAGING_SENDER_ID = value R..

List 컴포넌트에서 dummyList를 받아 화면에 표시하기 위해서, App 컴포넌트에서 list라는 이름으로 dummyList를 props로 넘겨주었다. const dummyList = [ { id: 1, content: 'test1', }, { id: 2, content: 'test2', }, { id: 3, content: 'test3', }, ]; function App() { return ( ); } export default App; const List = (list) => { return ( {list.map((i) => { return {i.content}; })} ); }; export default List; 그런데 이렇게 했을 때, TypeError: list.map is not a..

1. 동기와 비동기 자바스크립트는 '단일 스레드' 기반의 언어이다. 이는 한 번에 하나의 작업 흐름만 가질 수 있다는 뜻이다. 그래서 자바스크립트는 기본적으로 '동기적' 방식으로 작업을 처리한다. function Hello() { console.log("Hello"); } Hello(); console.log("Bye"); 위의 예제를 실행하면, Hello가 먼저 출력된 후 Bye가 출력될 것이다. 이와같이 순차적으로 코드를 수행하며 하나의 작업이 끝난 뒤에 다음 작업을 수행하는 방식이 동기적 방식이다. 동기적 방식은 코드가 적힌 순서대로 실행되기때문에 실행 순서와 결과를 예측하기 쉽다는 장점이 있지만, 하나의 작업이 끝날 때까지 다른 작업을 수행할 수 없으므로, 하나의 작업 시간이 길어지게 될 때 전체..