react (6) 썸네일형 리스트형 [전공자들 14] 리스트 가져오기(with pagination) 게시글 리스트를 가져오기 위해서 페이지네이션 기능을 구현해야 했다. 다양한 라이브러리가 있지만, 디자인이 마음에 안들기도 하고 공부도 할 겸 직접 만들었다. 버튼 구상 먼저 페이지네이션의 기본 버튼과 기능을 구상했다. - 페이지네이션의 범위는 기본 8페이지씩, 한 페이지당 게시글 10개씩 출력. - 각 범위별 시작 페이지와 끝 페이지(시작페이지+7)를 지정 (startPage :1, endPage: 8), (startPage:9, endPage:16) - 게시글 전체가 몇 페이지인지 받아와서 만약 끝페이지로 지정한 번호보다 전체페이지가 작으면 끝페이지를 전체페이지로 지정. (예를 들어, 총 19페이지가 나온다면, 가장 마지막 페이지네이션 범위는 17~19 가 될 것임) 1. 숫자버튼 : 누른 버튼의 번호.. [전공자들 11] 로그인 상태관리(useContext) 아이디와 비밀번호를 받아 서버에서 사용자 검증을 한 후 토큰을 발급받는 기능은 완성을 했다. 이제 프론트에서 어디에 저장할 지, 어떻게 로그인 상태를 관리할 지 고민을 해야 했다. 발급받은 토큰을 프론트에 저장하는 방법으로는 로컬 스토리지와 쿠키 중에서 고민을 하다가 로컬 스토리지에 저장을 했다. 하지만 생각을 해보면 쿠키는 데이터가 영구저장되지 않기 때문에 만료일을 설정하거나, 설정하지 않는다면 세션처럼 브라우저가 종료되면 데이터가 지워진다. 반면 로컬스토리지는 직접 지우지 않는 한 영구적으로 저장되므로, 로그아웃 버튼을 누르지 않고 그냥 브라우저를 종료시킨다면 계속해서 로그인 상태가 남아있지 않을까 하는 생각이 들었다. 그래서 먼저 프로젝트를 완성을 시킨 후, 리팩토링하는 시점에서 토큰을 쿠키에 저장.. [전공자들 8] 7일차 - 로그인 /회원가입/비밀번호 재설정 화면 메인 페이지들을 끝내고 드디어 비중낮은 로그인/회원가입/비밀번호 재설정 페이지만 남아서 쉽게 생각했는데 막상 시작해보니 절대 쉽지않았다.. UI 구성은 심플하게 빨리 끝냈는데 여러 조건설정때문에 애를 먹었다. 특히 회원가입 화면에서는 이메일과 비밀번호에는 각각 형식 검증을, 이메일형식이 맞았을 때 인증번호 화면 출력과 인증번호가 맞았는지 검증, 그리고 비밀번호도 사용자 경험을 위해 비밀번호 재입력하는 과정을 거쳐야 하다보니 코드가 복잡해지고 많은 변수가 필요해졌다. 단계별 진행이 아니라 한 화면에 모든 입력을 받고 뭔가 실시간으로 즉시 체크되는 것처럼 화면을 만들고 싶어서 더 복잡해졌던 것 같다. 게다가 혹시나 인증을 받고 이메일을 수정하면 어떻게 되는거지? 비밀번호 재입력을 통과한 다음 원래 비밀번호를.. [전공자들 7] 6일차 - 댓글 숨기기, 답글 닉네임 @태그 붙이기 화면작업은 거의 막바지에 접어들었다. 이제 로그인/회원가입 등등만 하면 끝나는데 오늘은 드디어 야심차게 기획했지만 미뤄뒀던 피드 페이지를 만들 차례.. 프론트적으로 가장 중요한 작업은 두가지정도 있었다. 댓글 숨기기 리스트 형식의 게시판은 어차피 글제목 클릭을 통해 세부화면으로 넘어가기 때문에 댓글 숨기기 기능이 필요하진 않았지만 피드형식의 게시판엔 댓글을 모두 노출시키기엔 너무 스크롤이 많이 생겨서 불편할 것 같았다. 그래서 이렇게 처음엔 댓글이 숨겨져 있다가 댓글버튼을 클릭하면 이런식으로 아래에 댓글창과 댓글작성칸을 띄우기로 했다. 늘 그렇듯이 useState를 사용해 onCilck()이벤트가 발생할 때마다 토글을 만들면 되지 않을까 했지만 곧 한가지 문제점을 떠올렸다. 게시글은 각각 독립적이어야 하.. [전공자들 6] 개발 5일차 - modal 하나로 가성비를 챙겨보자 글 쓰기 버튼을 누르자마자 글이 써지는 페이지는 거의 없다. 마찬가지로 그 중요성과 영향력이 큰 활동일수록, 모달을 통해 재확인하는 작업을 필연적으로 거치게 된다. 앞선 프로젝트에서는 리액트를 처음해봐서 일단 적응하는게 우선이었다. 그래서 여러페이지에서 필요한 모달을 한 번만 구현할 수 있지 않을까 생각은 했었는데 실력 부족으로 실패했다.. (일일이 모든 페이지의 모달을 다 만들었음..) 하지만 이번엔 다름! 효율성은 아직 알 수 없지만 별다른 gpt의 도움 없이 스스로 해냈다는 것에 뿌듯! 일단 내가 필요한 모달의 종류는 글쓰기/회원탈퇴/각종 활동 삭제기능 해서 일단 7개정도이다. 먼저, 모달의 내용을 제외한 나머지 틀을 만들어 주고 props를 사용해 모달을 불러주는 곳에서 type이라는 변수에 어떤.. npm install 할 때 --save의 의미는? ex) npm install react-router-dom --save → package.json의 dependency에 모듈을 추가한다는 의미 보통 프로젝트 폴더를 공유하거나다른 컴퓨터에서 작업을 하려고 옮길 때 node_modules 폴더는 용량이 매우 매우 크기 때문에 함께 옮길 수 없다. (시간이 많이 들기 때문에 굉장히 비효율적임) 그래서 --save를 통해 모듈을 설치할 때 package.json 이라는 폴더의 dependency 항목에 모듈의 이름과 버전을 기록해놓고 나중에 옮긴 프로젝트 폴더에서 이 dependency를 보고 npm이 모듈들을 다시 다운로드 해줌 (--save로 설치하지 않은 모듈은 다시 추가되지 않음) 하지만 npm5 버전 이후부터는 자동으로 package.json에 기록.. 이전 1 다음
