분류 전체보기 썸네일형 리스트형 웹 서비스 기획 본격적으로 FOTD 프로젝트를 시작하려고 한다. 이번 프로젝트에서 PM을 맡게되었으며 백엔드와 프론트엔드 풀스택으로 개발을 할것이다. . . 우선 아래의 기획 프로세스의 7단계를 가지며 기획을 해보고자 한다. 1. 프로젝트 계획 수립 2. 분석 3. 콘텐츠 구성 4. 인포메이션 아키텍처 5. 디자인 6. 개발/제작 7. 테스트 런칭 . . 기획이 필요한 이유 1. 프로젝트 계획 수립 PM의 주요 업무 2. 분석 − 새로구축하려는웹사이트의목적을명확히한후수집된정보를분석함 − 정보수집방법 로그분석을통한정보수집방법 경쟁사리서치를통한정보수집방법 신문이나통계청등이미공표된정보수집방법 사용성 테스트 (Usability Test)를 통한 정보 수집 방법 − 위와같은방법으로수집한정보를통하여환경요구분석,사용자요구분석, 콘텐.. 더보기 Next13 redux-persist 및 인증되었는지 체크 로그인을 완료하여 홈 화면으로 라우팅을 시켰다. 라우팅 혹은 브라우저 새로고침시 이상하게 자꾸 isAuth가 다시 false로 돌아온것이었다. 처음에는 redux 사용에 미숙해 코딩적인 실수 인줄 알고 삽질을 꽤나 했지만 알고보니 redux의 상태는 브라우저가 새로고침도면 초기화 되는 사실을 알게 되었다. 그래서 새로고침시에도 redux의 상태를 유지하게 해주는 redux-persist를 사용하게 되었다. . . . 우선 전면적으로 redux의 store를 뜯어 고쳤다. npm i --save-dev @types/redux-persist store를 뜯어 고치는 김에 reduce도 combinedreducer를 사용해서 차후 여러가지 reducer로 쪼깨게 될 경우를 대비하였다. 그리고 미들웨어를 추가해.. 더보기 모든 요청의 header에 토큰 넣기 위와 같이 axios 인스턴스에 인터셉터를 붙여 모든 요청이전에 header에 토큰을 실어서 가게 된다. 오른쪽 사진과 같이 모든 요청에 Authorizaion이라는 키값에 토큰이 잘 실려 요청이 가는것을 확인할 수 있다. 더보기 로그인 기능구현 어우 오늘도 하루 개갈아 넣었따... 이번 Next13에서 redux 를 도입하면서 삽질을 정말 많이 하게 되었다.. 좋은 양분으로 자라길.. 우선 로그인 기능 구현 이전에 각각의 입력에 유효성 체크와 에러 알림 세팅을 하였다. 그리고 redux를 붙였다. 이미 구성해 놓은 백엔드단 api에 맞혀 작성 했으며 요청후 응답으로 토큰이 오는걸 받아 로컬스토리지에 저장하였다. 그리고 로그인에 성공하여 토큰을 받아오면 isAuth를 true로 바꾸어 준다. 위와 같이 로그인 이전에는 로컬스토리지에 아무것도 없지만 로그인을 하면 로컬스토리지에 잘 저장됨을 확인 또한 redux로 관리중인 상태에서도 초기에는 isAuth가 false이지만 로그인을 하여 토큰을 발급 받으면 isAuth가 true로 바뀐다. 더보기 axios 인스턴스 생성 이제 왼쪽과 같은 fullname이 아닌 오른쪽과 같이 짧게 백엔드 api를 호출할 수 있다. 물론 위와같은 짧은 코드 뿐만 아니라 차후 모든 요청에 jwt 토큰을 헤더에 넣기 위해서 만들었따..! 더보기 성공이나 실패를 알리는 알람 react-toastify 적용 npm install react-toastify Next13 이후 app directpry로 변경된이후 이전 토이 프로젝트에서 사용했던 라이러브리를 적용에 어려움이 많다. 평소 새로운 라이브러리와 에러 사항을 gpt나 bard를 사용했지만 최근 기술에 대해서는 답변이 엉망으로 나왔다. 그래서 구글링을 하던중 react-toastify를 만든 팀에서 운영중인 github 이슈 란에서 이번 라이브러리 도입에 대한 문제를 해결할 수 있었다. https://github.com/fkhadra/react-toastify/issues/963 더보기 유효성 체크를 위한 react-hook-form react-Hook-Form npm install react-hook-form 각 속성마다 register 함수를 붙여 유효성 체크를 해준다. 또한 유효성 체크에서 걸린 경우 하단에 빨간 관련 에러 문구가 나온다. 더보기 Next13 및redux-toolkit 세팅으로 인한 변경사항 우선 간단하게 Next13에 Redux-toolkit을 붙이기 위해 RegisterPage 컴포넌트의 로직을 꽤나 바꾸었었다. . 우선 첫번째로 커스텀 Hook인 InputGrop를 사용하지 않고 개발을 진행할 것이다. 그 이유로 아직 한 컴포넌트당 200줄이 넘어가는 파일이 없기도 하고 프론트 개발이 미숙해 새로운 기술을 금방 금방 커스텀하는것에서 시간상의 문제를 느꼈다. . . . 그로인해 InputGroup을 대신 기본 html 태그인 input의 속성들을 최대한 활용해서 코딩을 진행..! + 아래와 같이 section 태그로 입력한 값도 제출되도록 추가 우선 현재의 UI 이다. 학교 이름을 포함한 회원가입 로직도 잘 작동하여 데이터베이스에 저장됨을 확인 더보기 이전 1 ··· 8 9 10 11 12 13 14 ··· 45 다음
