Toy Projects
1.🎁 Gift MBTI - 1. Next.js 프로젝트 세팅, ESLint(airbnb), Prettier 설정
오늘부터 약 3주간 웹 디자이너와 협업으로 작은 토이 프로젝트를 진행하게 되었다프로젝트 규모가 작아서 그 동안 사용해보고 싶던 next.js와 redux-toolkit을 연습해보는 좋은 기회가 될 것 같다 👍: Next.js, Typescript, redux-tool
2.🎁 Gift MBTI - 2. Result 페이지 시작(Emotion theme 적용, SEO 최적화 )
이번 프로젝트에선 emotion으로 스타일링을 하기로 했는데 특별한 이유가 있던 것은 아니고 그냥 다들 많이 쓰길래 사용해봤다.한 번도 사용해본적 없는 라이브러리라 걱정했는데 웬걸 그냥 문법이 styled-components랑 똑같았다!찾아보니 둘 다 CSS-in-JS
3.React Query를 이용해 ToDo List를 만들기 1
출처 React Query Tutorial for Beginners https://www.youtube.com/playlist?list=PLC3y8-rFHvwjTELCrPrcZlo6blLBUspd2 리액트 쿼리? 리액트에서 데이터를 fetching할 때 사용하는 라이
4.🎁 Gift MBTI - 3. Result 페이지 아토믹 디자인 패턴 적용하기
출처 https://fe-developers.kakaoent.com/2022/220505-how-page-part-use-atomic-design-system/ 문제점 result 페이지는 mbti 카드, mbti 유형 설명, 추천 선물, 궁합이 잘 맞는, 안 맞는
5. 🎁 Gift MBTI - 4. 토이 프로젝트 에러 모음zip
사실 더 많았는데 기록하는걸 까먹어서ㅠ 아쉽지만 생각나는것만 적어봤다 1. Do not use Array index in keys 🤔 에러가 일어나는 이유 근본적으로 array에 key는 왜 지정하는걸까? ➡️ 렌더링을 최적화하기 위해서 > Key는 React가
6.React Query를 이용해 ToDo List를 만들기 2
React Query를 이용해 ToDo List를 만들기 1이번엔 추가, 수정, 삭제를 구현하는 법을 포스팅해보려고 한다.빨리 올렸어야했는데 요즘 정신이 없어서 포스팅이 밀렸다ㅠ코드는 React Query를 이용해 ToDo List를 만들기 1과 동일한 Todos.ts