- 리뷰 데이터를 filteredDatas state에 담아주는 과정에서 무한 렌더링 루프 발생. const reviewDatas = [ { reviewId: "2f239a47-2fec-465c-b02f-b499707a6236", userEmail: "tjttjr@naver.com", profileImg: "https://images.unsplash.com/photo-1425082661705-1834bfd09dca?q=80&w=1776&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", name: "이한울", ..

3. 가짜 데이터 만들기 개발을 하다보면 실제 데이터가 필요할 때가 있다.하지만, 실제 데이터를 얻기 어려울 때는 그럴 듯한 가짜 데이터를 임시로 사용해야 한다.이번에는 외부 패키지 설치를 통하여 가짜 데이터를 만들어볼 것이다. npm i 또는 npm install을 통하여 프로젝트에 필요한 다양한 오픈소스 패키지를 설치할 수 있다.원래는 npx를 사용하려고 했으나, npx를 사용하니 에러가 떴다.여기서는 npx를 사용할 수 없는 이유가 무엇인지 궁금하여 검색을 해보았다. npx는 주로 CLI(Command-Line Interface) 기반의 패키지를 실행하기 위하여 사용된다고 한다.CLI 패키지는 명령줄에서 실행할 수 있는 명령어를 제공하는데, npx는 이러한 명령어를 실행할 수 있게 해준다.반면에 l..

2. React 프로젝트 만들기 드디어 React 프로젝트를 하나 생성했다.기존의 rcp - ch01 폴더 내에 ch01_5라는 프로젝트명으로 프로젝트를 생성했다.앞서 설명했듯이 npm보다 npx가 낫다고 판단을 하여 npx를 사용하여 프로젝트를 생성했다. npx create-react-app ch01_5 --template typescript React 프로젝트는 기본적으로 Node.js 프로젝트이다.모든 Node.js 프로젝트는 '루트 디렉토리(ch01_5)'에 항상 package.json 파일이 있다. 이제 프로젝트를 실행해야 하는데, 실행시키기 위해서는 터미널에 명령어를 입력해야 한다.package.json 폴더 내에 "script" 항목에서 이와 관련된 명령어들을 확인할 수 있다. npm run..

내가 기존에 잘 몰랐던, 개발을 하는데 도움이 많이 될만한 것들만 작성을 하도록 하겠다.  1. 편집기 설정 파일 이해하기 일단 VSCode의 파일 → 기본 설정 → 설정에서 폰트 사이즈, 탭 사이즈 등을 설정할 수 있다.난 여기서 탭 사이즈를 4에서 2로 변경한 후, 저장을 하였다.VSCode는 설정 화면에서 바꾼 내용을 settings.json 파일에 저장해둔다. 단축키 Ctrl + Shift + P를 누르고 "User Settings"를 입력한 후, "기본 설정 : 사용자 설정 열기(JSON)"를 클릭한다.여기서 settings.json의 내용을 확인할 수 있다.원래도 많은 설정들이 되어 있었지만, 방금 추가로 설정해준 "editor.tabSize" : 2를 확인할 수 있다.   2. 프리티어 설치..

1. 웹 브라우저에서 웹 서버가 제공하는 자원을 얻으려면URL 문자열(ex : http://웹_서버/자원1)을 HTTP 프로토콜을 사용하여 웹 서버에 요청해야 하는데,이를 HTTP 요청이라고 한다. 2. 그러면 HTTP 요청을 받은 웹 서버가 해당 자원을 브라우저에 보내주게 된다.이를 HTTP 응답이라고 한다. 3. 그리고 웹 브라우저는 웹 서버에서 보내온 HTTP 응답 데이터를 사용자가 볼 수 있도록 웹 페이지 화면에 보여준다.이를 렌더링이라고 한다. 어떤 웹 페이지가 있다고 가정을 하자.이 웹 페이지가 처음 응답 받은 자원을 렌더링한 뒤 다시 다른 자원을 요청하면 과거에 렌더링한 내용을 모두 지운다.그리고 새로 수신한 자원을 렌더링하는데, 이 과정에서 약간의 깜빡임(새로 고침)이 발생한다.: 웹 브라..

개인 쇼핑몰을 개발하던 중, 랜더링시 스크롤의 위치가 중간이나 밑에서 어중간하게 시작하는 경우가 빈번하다는 것을 알게 되었다. 그래서 랜더링시 무조건 맨 위에서 시작하게 하려면 어떻게 해야 할까 고민을 하다가, React router v5부터는 ScrollRestoration을 지원한다는 것을 알게 되었다. 이 구성 기능은 페이지 전환 시 스크롤 위치를 자동으로 관리해주어 맨 위에서 렌더링되도록 할 수 있다. 복잡하게 상태 관리를 해줄 필요 없이 아래의 코드만 있으면 페이지를 전환해도 항상 맨 위에서 랜더링된다는 얘기다! import { ScrollRestoration } from "react-router-dom"; 더 자세한 내용이 궁금한 사람들도 있을 수 있으니, 링크를 첨부하고 간다. https:/..