전체 글

9.17 토 - 메인프로젝트 데일리 회고

1. 체크리스트 오늘 [x] redux toolkit 토이프로젝트로 실습 및 메인프로젝트 코드에 반영 [x] redux toolkit 가이드 문서 보완 [ ] fe ↔ be 통신 연결 확인 [ ] jwt 토큰 인가 테스트, 개념정리 이번주 fe 멘토 미팅 조언 내용 반영 - 칸반보드, 화면정의, 회고, 파일구조 redux toolkit 활용안 노션 문서 작성 완료 칸반보드 활용안 문서 작성 완료 및 레포지토리 반영 navbar 검색창 디자인 수정 2. 오늘 한 일 redux toolkit, thunk 메인프로젝트 적용 토이프로젝트로 실습 문서화 메인프로젝트에 적용 Redux Toolkit(작성중) 3. 공부할 것 jwt 생각했던 것보다 더 알아야 할 내용이 많다. https 통신 클라이언트와 서버가 별개..

9.16 금 - 메인프로젝트 데일리 회고

1. 할 일 오늘 [x] [구현] 로그인, 회원가입 폼 제작 이번주 fe 멘토 미팅 조언 내용 반영 - 칸반보드, 화면정의, 회고, 파일구조 redux toolkit 활용안 노션 문서 작성 완료 칸반보드 활용안 문서 작성 완료 및 레포지토리 반영 fe ↔ be 통신 연결 확인 dev-fe 브랜치 개발환경 초기세팅, 파일구조, 주석 작성 2. 오늘 한 일 eslint 설정파일 에러 해결 airbnb 방식 린트 설정에 필요한 추가 패키지들이 package.json에 없어서 발생한 에러였고 누락된 패키지들을 package.json에 추가하여 npm i 해서 해결함. 회원가입, 로그인 폼 제작 기존에는 styled-component 작성과 로직을 따로 분리하지 않고 하나의 파일에서 전부 작성하여 스타일과 로직을..

9.15 목 - 메인프로젝트 데일리 회고

1. 체크리스트 오늘 [x] 피그마 파일 화면별 세부 동작 정의 [ ] styled-components 활용안 노션 문서 작성 완료 [x] 세부 기능 재조정 전체 팀원 회의 [x] 로그인 방식, 로그인 상태 유지 인가 방식 확정 이번주 fe 멘토 미팅 조언 내용 반영 - 칸반보드, 화면정의, 회고, 파일구조 redux toolkit 활용안 노션 문서 작성 완료 칸반보드 활용안 문서 작성 완료 및 레포지토리 반영 fe ↔ be 통신 연결 확인 dev-fe 브랜치 개발환경 초기세팅, 파일구조, 주석 작성 2. 오늘 한 일 2.1 화면 정의서 로그인, 회원가입 부분은 전체 팀원들과 세부사항을 정의하였다. 하지만 SNS기능의 세부사항과 지도 API를 활용하는 부분들에 대해선 모든 팀원들이 이번 프로젝트에서 처음..

[코드스테이츠]SEB FE 39 Section 4 회고

Start where you are. 4개월 전의 나는 자바스크립트로 별찍기도 헉헉대고 css는 백그라운드 색상 바꾸는 정도만 할 줄 알았다. 4개월 후 지금의 나는 그래도 리액트로 클라이언트 짤 수 있고 더듬 더듬 서버도 짤 수 있게 되었다. 클라이언트와 서버가 둘 다 있는 앱도 배포 할 수 있다. 개인프로젝트에서 네트워크와 서버쪽 지식이 부족해서 일주일째 nodemailer와 씨름하면서 과연 이래서 팀 프로젝트는 어떻게 할 까 걱정과 조급함도 들지만 당장 내일부터 바로 달리기 시작이 아니라 약간의 숨고르기의 시간이 포함되어 있어 조금은 안도하며 이번 주말간 모자랐던 부분들을 보충하려고 한다. 물론 이전 과정들도 주어진 시간 내에 이해하고 적용하며 커리큘럼을 따라가는게 힘들었지만 섹션 4 같은 경우는 ..

리액트 포트폴리오 사이트 제작기 5편

로컬 스토리지 - 테마 변경시 로컬스토리지로 값 저장해두어 새로고침 시에도 유지하기 조건부 렌더링 - 모바일과 데스크톱 환경에 따라 다른 홈 화면 렌더링하기 Framer-motion - 스크롤 시 컴포넌트에 애니메이션 추가 코드 성능 개선 - 함수 중복실행되는 것들 확인하고 줄이기, 컴포넌트 성능 최적화 CRUD - Firebase Cloud FireStore 연동 CRUD - 게시글 수정, 삭제는 작성되어 화면에 반영된 개별 게시글에서 호버 시 수정, 삭제 아이콘이 나오고 클릭시 동작하도록 하기 → 본인이 작성한 글만 수정/삭제가 가능하도록 하려면 로그인시 받은 정보로 비교해서 필터링. uid로 비교해야 할까? nodemailer 붙이기 1. 추천사 CRUD 고칠 부분 [x] 데이터 추가 시 정렬의 어..

리액트 포트폴리오 사이트 제작기 4편

1. 기능구현 - 추천사 컴포넌트 firebase 소셜로그인, crud 1.1 배포 버젼의 주소를 firebase에 인증 제공업체 도메인 추가하기 - 해결 로컬에선 깃허브 소셜 로그인이 잘 동작하다가 임시 배포 버젼에서 로그인을 시도할 경우 배포된 내 앱의 주소가 firebase에 인증 제공 업체의 도메인으로 추가되어 있지 않아 이를 추가해주어야만 로그인 관련 작성한 코드를 실행시킬 수 있다. 파이어베이스 콘솔 → 내 앱 → 인증 → Settings → 승인된 도메인 (이 곳에 내 앱의 주소를 추가해주면 된다.) 1.2 새로고침 시 로그인 유지하기 - 임시 해결 참고자료: https://prohannah.tistory.com/139 (해결)현재 로그인 여부의 state 값의 변경되는 경우의 로직 보완 필..

리액트 포트폴리오 사이트 제작기 3편

1. 할 일 [x] 반응형 레이아웃 전면 수정 - 현재 모바일 화면에서 body가 왼쪽으로 밀리고 있다. PC/타블렛/모바일 미디어쿼리 px 기준점 명확히 정의하고 css 수정 GlobalStyle 파일 안쓰는 css 코드 제거 또는 참고할 코드 주석처리 공통적으로 쓰이고 있는 Container 컴포넌트를 지금처럼 GlobalStyle 파일에서 export 할 지 common 폴더에서 export 할지 각 컴포넌트에서 새로 정의할지 컨벤션 정하기 모바일 레이아웃에서 화면이 위아래로 늘려져서 나오는 부분 수정하기 모바일 레이아웃에서 사라지거나 형태가 바뀔 부분 생각하고 반영하기 navbar: 햄버거 메뉴로 모양 변경. 클릭 시 전체화면으로 nav item들이 중앙정렬되어 보여지게 수정 [ ] testimo..

리액트 포트폴리오 사이트 제작기 2편

1. 디자인 수정 [x] 레이아웃 배치 구상 및 반영 [ ] 스크롤 시 레이아웃에 애니메이션 적용 (framer-motion 라이브러리 사용) [x] 라이트/다크 모드 구현 [x] 반응형 구현 1.1 처음 접속시 로딩화면에서 로고 및 애니메이션 구현하기 모든 컴포넌트를 최상위에서 Suspense로 감싸고 fallback으로 Loading 컴포넌트가 보여지도록 작성하였는데 로딩 화면이 보이지 않는다. 로딩이 너무 빨라서 안보이는 걸까? → 그렇다. 로딩이 너무 빨라서 나오긴 나왔는데 너무 빨리 지나간 것이었다. 로딩시에 보여줄 화면에서 임팩트를 주기 보다 useEffect를 의존성 배열을 빈배열로 줘서 최초 렌더링시에만 setTimeout같이 특정 시간만큼만 어떤 컴포넌트를 화면에 보여주는 식으로 하는 식..