이번에는 React 프로젝트를 만드는 과정에서 필요한 개념들을 알아보도록 하겠다.예전부터 나는 이 부분에 대한 지식이 부족했기 때문에 한 번 자세히 알아보려고 한다. 1. npm / npx 프로그램 알아보기 npx, npm 프로그램 : Node.js 환경에서 패키지 관리를 위해서 사용하는 도구이다. npm (Node Package Manager)npm은 Node.js의 패키지 관리자이다.이를 통하여 개발자는 다양한 오픈 소스 라이브러리를 설치하고 관리할 수 있다.npm은 패키지를 로컬 프로젝트나 전역으로 설치할 수 있다.예시)1. 로컬 설치 : 특정 프로젝트에만 패키지를 설치한다.npm install lodash=> 이 명령어는 lodash 패키지를 현재 디렉토리에 있는 node_modules 폴더에 설..

내가 기존에 잘 몰랐던, 개발을 하는데 도움이 많이 될만한 것들만 작성을 하도록 하겠다.  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 응답 데이터를 사용자가 볼 수 있도록 웹 페이지 화면에 보여준다.이를 렌더링이라고 한다. 어떤 웹 페이지가 있다고 가정을 하자.이 웹 페이지가 처음 응답 받은 자원을 렌더링한 뒤 다시 다른 자원을 요청하면 과거에 렌더링한 내용을 모두 지운다.그리고 새로 수신한 자원을 렌더링하는데, 이 과정에서 약간의 깜빡임(새로 고침)이 발생한다.: 웹 브라..

그러니까 아까의 경우에는 최상위 부모 컴포넌트가 서버 컴포넌트이고 여기서 데이터 패칭을 한 후 그걸 자식 컴포넌트로 보내고 있으니 프리랜더링이 되는 셈이다. 단지 받아온 데이터가 보이지 않았던 이유는 recoil 값을 사용하여 datas 배열을 잘라 새 배열로 만든 후, 그 값을 가져다 사용했기 때문이다. recoil은 클라이언트 컴포넌트에서만 사용할 수 있고, 그 결과 자바스크립트를 꺼둔 상태에서는 클라이언트 요소는 가져올 수 없으므로 받아온 데이터가 보이지 않았던 것. recoil 값이 없을시(렌더링이 완전히 끝나기 전에는 recoil 값을 받아올 수 없으니) default 값을 처리해주면 다시 받아온 데이터가 화면에 뜨는 것을 볼 수 있다. 자바스크립트 기능을 끄고 데이터가 한참 동안이나 화면에 보..

난 웬만해서 next.js에서 서버 컴포넌트를 사용하여 데이터 패칭하는 것을 선호한다. 데이터 패칭 외에도 웬만해서 서버 컴포넌트를 유지하려고 하는 편이다. 그 이유는 당연히 프리렌더링 때문이다. 물론 계산 용량이 너무 크다면 서버에서 계산해도 프리렌더링이랑 상관없이 빈 화면이 보이게 되겠지만 웬만해선 프리렌더링이 데이터를 빠르게 가져와 보여주는데 유리하다는 생각이 들었다. 그런데 이런 상황에도 불가피하게 클라이언트 컴포넌트에서 데이터 패칭을 하는 경우가 생기지 않겠는가? (나는 생기더라... 다른 사람들은 모르겠다) 나는 이런 경우에 클라이언트 컴포넌트에서 데이터 패칭이 되면 프리렌더링은 안 되겠지만 해당하는 부분만 Suspense 기능을 사용하여 로딩 화면이라도 보여주고자 하였다. 그래서 가장 최상위..

일단 "http://localhost:3000/album/272a8c26-96f7-489b-86b4-537189bfc654" 라는 주소가 있다고 가정을 해보겠다. 사실 내가 지금 프로젝트에서 생성해둔 주소이다. 클라이언트 컴포넌트에서 url 받는 방법 : 1. 동적(id)으로 생성된 세그먼트 값 얻기. 보다시피 /272a8c26-96f7-489b-86b4-537189bfc654 이 부분은 [id]라는 동적 세그먼트를 통하여 생성된 것이다. 이 값을 얻기 위해서는 useParams()를 사용하면 된다. useParams() : 현재 URL로 채워진 경로의 동적 매개변수를 읽을 수 있게 해주는 클라이언트 구성 요소 후크. const params = useParams(); console.log(params);..