[Next.js+TS] TO-DO 리스트

프로젝트 생성 및 eslint 설정 타입스크립트 eslint 설정하기 eslint를 설치해준 다음, npx를 통해 eslint를 실행시켜 주면 된다 다음과 같이 여러 옵션들을 자신의 프로젝트에 맞게 설정을 해주면 다음처럼 eslinttrc.js가 생성된 것을 볼

를 \_document.tsx에 입력한 후에 바벨을 설정할 수 있는 .babelrc를 만들고 수정실제 적용이 되었는지를 확인하기 위해 index.tsx를 변경해줌잘 적용된 것을 확인스타일드 컴포넌트는 템플릿 리터럴을 사용하기 때문에 \`\`안에 css 및 scss코드를

svg 컴포넌트 사용하기 svg 아이콘을 사용하려면 설정이 필요함 npm i babel-plugin-inline-react-svg -D 바벨 플러그인에 추가를 설정 하지만 이렇게 하더라도 public에 존재하는 이미지에 접근하면 에러가 등장함 그렇기 때문에 t

data/todos.json을 만들고 전에 사용하던 임시 리스트를 그대로 넣어줌fs 모듈을 활용하여 데이터를 불러올 것 readFile은 비동기 함수기에 promise를 이용하여 파일을 불러옴또한 둘 모두 try, catch문을 활용readFileSync은 동기적으로

리덕스는 상태관리 라이브러리 중 하나로 여러가지 상태관리 라이브러리 중 가장 많이 활용Store 라는 변수를 이용하여 전역 상태관리스토어를 사용하면 상태를 조회하기 간편하고 관리하는 것 또한 간편React에서 불필요한 props를 전달하고 자식 컴포넌트가 다시 자식 컴

기존에 getServerSideProps에서 api로 투두리스트 데이터를 받아 페이지에 props로 전달하던 것을이제 리덕스를 사용하여 서버 사이드에서 api로 받아온 데이터를 리덕스스토어에 저장리턴하는 props를 비우고 스토어의 todos의 값을 투두리스트로 업데이

pages 디렉토리 속 api : 백엔드 역할 그 밖 \_app.tsx, \_document.tsx, index.tsx : 프론트 엔드 역할Nested 라우팅을 구현해놓은 것이고 pages/todo/add 를 통해 자동 라우팅이 됨재사용성과 확장성이 중요한 코드를 짜야