프론트엔드

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같이 특정 시간만큼만 어떤 컴포넌트를 화면에 보여주는 식으로 하는 식..

useMemo

https://youtu.be/e-CnI8Q5RY4 (상기 영상과 코드스테이츠 유어클래스 내용을 참고하여 공부 내용을 정리합니다.) 1. useMemo 개념 설명 리액트 컴포넌트의 성능 최적화를 위해 사용되는 대표적인 hook들인 useMemo와 useCallback에 대해 알아보자. (useCallback은 별도 문서에 정리) Memoization useMemo의 memo는 memoization을 뜻한다. 메모이제이션이란 어떠한 커다란 문제를 풀 경우에 문제를 중복되는 하위 문제가 있고, 이 하위 문제의 결과를 저장해서 상위의 문제를 해결할 수 있는 경우에 하위 문제의 결괏값을 저장해두어 상위문제를 풀 때 연산횟수를 줄일 수 있는 방법을 말한다. 자세한 내용은 이전에 작성한 동적 프로그래밍 정리 내용을..

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

리액트 포트폴리오 사이트 제작기 1편 1. 기획 1.1 디자인 https://www.figma.com/file/hOatdjWjsX78MH6HzD7dQT/my-portfolio-app?node-id=0%3A1 1.2 기능 최초 렌더링시 로고 애니메이션 반응형 Home 컴포넌트에 three.js 이쁜거 넣기 단일 페이지에서의 스크롤 시 페이지네이션 구현하기 parallax animation firebase 사용해서 깃허브 로그인으로 추천사 crud 동적으로 받기 메일링 api( nodemailer ) 사용하여 contact 기능 구현 1.3 파일 구조 client public src components common : 모든 페이지에서 공통으로 사용할 컴포넌트들 그 외 페이지별로 사용할 컴포넌트 폴더들 pag..

13주차 - 반응형 웹 제출 과제

https://youtu.be/x7_BgPSltuM 배포 링크 : https://master--heartfelt-halva-3acfea.netlify.app/ isInteractive ? master--heartfelt-halva-3acfea.netlify.app canvas태그를 사용하고 css 애니메이션, 반응형 레이아웃을 구현만 하면 되고 창의력 좀 발휘해보라고 해서, 분명 시작은 개발자 포트폴리오 앱이었는데 도저히 라우터 해시링크 먹통난게 해결이 안되서 이래저래 바꾸다 보니 결국 문자 그대로 안드로메다로 가버렸네...?! 처음엔 데이터 시각화도 프론트엔드에게 중요한 업무기 때문에 chart.js를 써보려고 했는데 이리 저리 구글링하며 해봐도 안되어서 레퍼런스로 이해하기로 넘기고 하고싶었던것만 다 ..