공부 기록일지📚

[ 상황 설명 ] next 13으로 404 페이지를 설정하고 있던 중 개발자도구의 콘솔에 404 error 가 지속적으로 찍히는 것을 확인했다. 개발 환경의 hot reload 기능 때문인 거 같았는데 설마 서버의 요청도 계속해서 가고있는지 확인해보니 404페이지가 UI에 표시된 상태라면 api 요청이 계속적으로 되고 있었다. [ 원인 분석 ] 즉, 없는 경로를 서버에 요청보내면 not found 에러가 발생하는데 개발환경에서 해당 요청을 클라이언트에서 hot reload 를 통해 계속해서 보내고 있는 것이다. 핫리로드 문제는 개발환경에서만 발생하기 때문에 큰 이슈는 아니라고 생각했지만 혹시라도 문제가 될까봐 관련 이슈에 대해서 찾아봤다. [ 결론 ] next 공식 repo를 확인하니 나와 같은 next..

gitHub의 메인페이지를 장식하는데 유용한 wakatime의 README가 업데이트되지 않은 지, 3주가 흘렀다. 첫번째로 github action이 잘 돌아가고 있는 지 확인해봤는데, 아니나 다를까 action 들이 3주전부터 fail상태였다. fail한 원인에 대해서 알고싶은데 내역이 아무것도 뜨지않아서 가장 빠르게 체크할 수 있는 action에 등록해놓은 token의 유효기간을 체크하였다.[ action jobs log 확인하기 ]+ 다시 보니 action error 내역을 확인할 수 있다^^ Jobs의 name(아래 이미지에서 “Update Readme with Metrics”)을 클릭하면 어디서 action의 에러가 났는지 확인해볼 수 있으니 github action을 활용할 때 이 점을 기억..

기존 local 폴더의 프로젝트를 원격 repo와 연결하는 법 우선 새로운 repo를 생성한다. 로컬에 연결하고싶은 폴더 경로로 가서 git init 명령어를 터미널에 입력해준다. (git 초기화) 그 다음 git remote add origin *내repo주소URL* 명령어로 원격 저장소와 로컬 저장소를 연결해준다. git remote -v 를 통해서 주소가 내가 지정한 repo 주소로 보인다면 제대로 연결된 것이다. 프로젝트를 현재 경로에 만들어서(create-next-app을 통해 프로젝트를 만들었다 가정) 모든 파일을 커밋해준다. git add . #모든 파일 온스테이징 git commit -m “커밋메세지” (optional) 커밋 내역을 확인하고 싶다면 git log —oneline 을 통해 ..

넥스트 13은 Node 16.14 이상의 버전을 요구한다. 지원 운영체제로는 맥, 윈도우즈, 리눅스가 있다. 프로젝트 자동 설치(수동 설치도 있음) npx create-next-app@latest 위의 명령어를 통해서 자동 셋업해주는 prompts 내역을 확인할 수 있다. 현재경로에 하위 폴더로 새로운 이름이 아닌 그냥 현재경로 폴더를 root로 사용하고싶다면 질문 prompt에서 프로젝트 명을 . 로 root를 의미하는 dot을 찍어주면 된다. 필요 종속성들을 설치할 수 있는데, 2023-08-22 기준 Typescript, ESLint , Tailwind CSS 가 기본값으로 내장되어 있다. src 폴더에 내 코드들을 root의 config 폴더들과 구분하여 사용할 수 있다. ⇒ 리액트랑 같은 듯 🤠..

vscode 내에서 nvm use 18.17.1을 했을 때, 아래와 같은 에러 메세지가 뜨며 동작하지 않았다. nvm에 18.17.1 버전의 node는 이미 설치된 상태이다. $ nvm use 18.17.1 exit status 5: �׼����� �źεǾ����ϴ�. exit status 1: ������ �̹� �����Ƿ� ���� �� �����ϴ�. 해결방법: 버전을 바꾸고 싶다면 `명령 프롬프트`를 관리자권한으로 열어서 같은 명령어를 입력해주면 된다. Q. 명령 프롬프트(CMD)를 그냥 열었을 때와 관리자 권한으로 열었을 때 차이점? 그냥 터미널을 열었을 때는 내 이름으로된 사용자 경로가 커맨드라인에 표시되지만 관리자 권한으로 열었을 때는 `C:\Windows\System32` 경로로 뜬다. ..

개인 프로젝트가 아닌 협업 프로젝트를 진행할 때, 코딩 스타일을 일치시키지 않는다면 코드를 합치거나 비교할 때 매우 불편할 것이다. 코딩 스타일은 팀의 자율에 따라 결정되지만 강제성이 없기 때문에 취약하다. 코드 리뷰나 작성을 할 때에도 의식하지 않으면 많은 에너지가 소모되므로 자동화될 수 없는 컨벤션은 최소화하고 필요한 경우에는 반드시 문서화시켜야 한다. 자동화 툴들이 아무것도 없이 시작하는 것보다 시간을 들여서라도 초기세팅에 공을 들여놓으면 지속적인 개발 생산성 향상에 도움을 주기 때문에 꼭 알아둬야 한다. ESLint & Prettier ESLint는 일관되고 버그를 피할 수 있는 코드를 짜기 위해서 만들어진 코드 분석 툴이다. 작성된 코드의 구문을 분석하여 버그가 발생할 여지가 있거나, 불필요한 ..

CRA로 프로젝트를 만들면 .svg 파일을 마치 리액트 컴포넌트처럼 import 하여 사용할 수 있다. import {ReactComponent as MySvg } from "../assets/mysvg.svg; const MyComponent = () => { return } 하지만, Vite로 리액트 프로젝트를 구성하고 있다면 추가 세팅이 필요하다. 세팅 방법은 간단한데, svg관련 라이브러리를 추가로 설치해준다. 1. vite-plugin-svgr yarn add vite-plugin-svgr #npm 대신 yarn을 애용하고 있다. 2. vite.config.ts 에 플러그인을 추가해주기 vite.config.ts import { defineConfig } from 'vite'; import re..

리액트에서 컴포넌트는 JSX를 리턴하는 함수이다. function Component(props) { // jsx를 계산하는 과정 return JSX; } render 란 간단히 말해서 `브라우저에 UI를 페인트하는 것`이다. Q. 그렇다면 리액트에서 render는 무엇일까? 컴포넌트를 호출하는 것 JSX를 리턴하는 것 JSX를 브라우저에 페인트하는 것이다. Q. 리액트에서 re-render는 무엇일까? 컴포넌트 렌더링처럼 컴포넌트를 호출(call)하는 것 => 다시 함수 호출 JSX를 리턴하는 것 이전 JSX와 현재 JSX를 비교해서 다른 점(difference)을 페인트하는 것 Q. re-render 발생 시점 state가 변했을 때 => state가 setState()로 값이 변경되면 이후에 컴포넌트..