무엇을 했나 글 목록, 글 작성, 글 내용 페이지 스타일링 글 작성, 글 수정 페이지에서 폼 컴포넌트 분리 시행착오/새로 알게 된 것 delete 후에 refresh 안되는 현상 글 delete 하고 나서 리다이렉트는 되는데 지운 게 반영이 안되고 새로고침해야 반영이 됐다. window.location으로 강제로 페이지 이동해서 임시 해결.. 근데 이게 맞나? 깃허브 문의란에 보면 이것이 정상이라고 함.. https://github.com/vercel/next.js/issues/26270 폰트어썸 크기 조절 원래 하던 대로 size 속성만 주니까 크기가 안 바뀌었다. 검색해 보니 css를 수동(?)으로 임포트해와야 한다고 한다. import "@fortawesome/fontawesome-svg-core/..
무엇을 했나 글 수정 기능 구현 프로필 사진에 마이페이지 연결 글 작성, 마이페이지에 로그인되지 않은 유저는 접근하지 못하도록 처리 시행착오/알게된 것 ajax 요청은 자동 redirect가 안된다!
무엇을 했나 글 내용 페이지 완성 글 추가 기능 완성 시행착오/알게된 것 하나의 폴더 안에서는 하나의 다이나믹 라우팅만 가능하다. app 폴더 안에 카테고리 폴더와 글 내용 폴더를 둘 다 다이나믹 라우팅 폴더로 설정하려 하니 오류가 났다. 생각해 보면 어떤 주소가 들어왔을 때 이것을 어느 쪽으로 다이나믹 라우팅 시켜야 할지 판단할 수 없으니 당연한 일이다. 글 내용 페이지는 별도의 하위 폴더를 생성해 다이나믹 라우팅을 시켜주는 것으로 해결. Next.js에서의 request, response type 글 새로 작성하면 데이터베이스에 업데이트하는 서버를 짜는데 handler 함수에 파라미터로 받는 request, response의 타입을 정하라는 에러가 떴다. fetch api 서버일 경우에는 Reques..
무엇을 했나 몽고DB 더미 데이터 작성 글 목록 아이템 카드 만들기(완성은 했으나 제대로 작동 안함) 아이템 리스트 컴포넌트 만들기(미완) 헤더 버튼에 호버/액티브 효과 추가 시행착오 'Promise' is not a valid JSX element 헤더 컴포넌트에 유저 로그인 정보 확인을 위해서 비동기 작업인 useServerSession()을 하고 헤더 컴포넌트를 async함수로 만들었는데 임포트해서 적용하는 루트 레이아웃 부분에서 타입 오류가 발생함. 검색해 보니 known issue라고 하고 나중에 해결될 예정이라 한다. 임시방편으로 해결하는 법이 공식문서에 나와있다. 바디가 전체 뷰포인트를 차지하지 않는 현상 globals.css에서 body에 100vw, 100vh를 주고 루트 레이아웃에서 m..
무엇을 했나 테일윈드 익히기 헤더 기본 레이아웃 잡기 OAuth 로그인 구현 로그인/로그아웃 버튼 조건부 렌더링 타입스크립트 강의 듣기 계획 변경사항 메인 페이지를 글 목록이 바로 나오게 하도록 계획을 세웠는데 글 목록/글 작성/글 수정 페이지에 공통된 레이아웃을 줘야 해서 이 페이지들이 따로 하나의 폴더 안에 있는 것이 좋겠다고 생각했다. 그래서 루트 경로를 따로 만들어서 메인페이지를 간단하게 따로 만들어야 할 것 같다. 시행착오 default formatter를 확인하자 아침부터 테일윈드 공부하느라 정신이 혼미했는데 vscode에서 프리티어가 작동을 안 해서 너무 심각하게 화가 났다. 모든 코드가 한줄로 나와버리는.. 근데 그냥 default formatter를 설정 안 한 문제였다ㅠ_ㅠ 최소 30분..
무엇을 했나 타입스크립트 기본 공부 프로젝트 기본 세팅, 폴더 구조 잡기 어려움 Next.js를 RTK와 함께 쓰기 위해서는 별도의 라이브러리가 필요한 듯하다. Next.js는 서버사이드 렌더링을 하므로 모든 페이지를 서버에서 만든 상태로 클라이언트에 보내주게 되는데, 그렇기 때문에 클라이언트측에서 이뤄지는 상태 변화에 대해서는 서버에서 알 방법이 없기 때문에 서버사이드에서 렌더링 된 페이지를 받아서 클라이언트가 최소한의 자바스크립트 작업들을 할 때(즉 hydration 과정을 거칠 때) 상태 공급을 해 줘야 한다. 이를 위해서 next-redux-wrapper를 쓰면 된다고 하는데, 공식 깃허브에 아직 Next.js 버전 13 이전의 사용법만 명시되어 있어 버전 13에서 바뀐 app 디렉토리에서의 사용..
프로젝트 소개 코드스테이츠 교육과정 중 솔로 프로젝트로 진행한 COZ Shopping 웹페이지로, 메인 페이지/상품리스트 페이지/북마크 페이지로 이뤄져 있어 상품 목록과 사용자가 지정한 북마크 목록들을 볼 수 있다. 배포 링크 https://jeannelee57.github.io/fe-sprint-coz-shopping/ 링크 가신 후 흰 화면이 뜬다면 상단 왼쪽 로고를 한번 눌러주세요(다음 재배포 때 수정 예정) 깃허브 링크 https://github.com/JeanneLee57/fe-sprint-coz-shopping 구현한 기능 북마크 추가/제거(로컬스토리지 사용) 상품 이미지 클릭 시 모달창을 띄우고 모달창에서 북마크 추가/제거 가능 저장된 북마크가 없을 때 오류 컴포넌트 띄우기 햄버거 버튼을 눌..
