부트캠프
리액트 포트폴리오 사이트 제작기 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를 써보려고 했는데 이리 저리 구글링하며 해봐도 안되어서 레퍼런스로 이해하기로 넘기고 하고싶었던것만 다 ..
[코드스테이츠]SEB FE 39 Section 3 회고
섹션 회고 - SEB FE 39 section 3 회고 1. 배운 것 1.1 커리큘럼 재귀함수 UI/UX Storybook Redux 상태관리 웹 표준 & 웹 접근성 네트워크 인증/보안 1.2 개인 공부 알고리즘 three.js axios 2. 느낀점 2.1 좋았던 점 슬럼프 탈출 개인프로젝트 시작 2.2 아쉬웠던 점 백엔드 코드 네트워크 지식 알고리즘 섹션2를 마치면서 회고를 작성할 땐 슬럼프가 심했었는데, 섹션 3때는 약간 해탈한 느낌이 되어버려서 과제가 아무리 어렵고 내용이 이해가 안되더라도 이전처럼 스트레스 받지는 않았다. 이해를 해서가 아니라 그냥 그러려니 하는 마음이랄까? 페어프로그래밍 전에 완벽하게 준비를 해야된다라는 강박을 내려놨다. 그냥 내 프로젝트에 커리큘럼에서 배운 걸 복습해보며 내 ..
12주 4일차 - Auth Basic
12주 4일차 - Auth Basic 1. 배운 것 2. 내용 정리 프록시란, 클라이언트와 서버 사이에 대리로 통신을 수행하는 것을 가리켜 ‘프록시(Proxy)’, 그 중계 기능을 하는 서버를 프록시 서버라고 합니다. 클라이언트, 혹은 반대로는 서버가 다른 네트워크에 간접적으로 접속할 수 있기 때문에, 보안, 캐싱을 통한 성능, 트래픽 분산 등의 장점을 가집니다. HTTPS 왜 HTTPS가 HTTP보다 안전한 지 이해한다. HTTPS의 암호화 방식에 대해 이해한다. HTTPS에서 사용하는 대칭키, 비대칭키 방식에 대해 이해한다. 직접 로컬에서 HTTPS 인증서를 발급할 수 있다. Hashing이 필요한 이유에 대해 이해한다. 데이터베이스에 유저의 비밀번호와 같이 민감한 정보를 평문으로 저장하지 않는 이유..
12주 3일차 - 네트워크, CRUD, Authentication
12주 3일차 - 네트워크, CRUD, Authentication 1. 배운 것 useEffect의 종속성 배열 복습 서버 api 구현방법 복습 2. 내용 정리 네트워크 체크리스트 Chapter1. TCP/IP 패킷교환 방식의 이점에 대해 이해한다. IP의 비순서성, 비신뢰성에 대해 이해한다. TCP의 3 way handshake 및 그와 비교되는 UDP에 대해 이해한다. Chapter2. 네트워크 계층 모델 네트워크 통신을 계층별로 나눈 이유에 대해 이해한다. 통신 과정에서 일어나는 데이터 캡슐화에 대해 이해한다. Chapter3. HTTP HTTP 메세지 구조를 이해한다. HTTP의 무상태성과 비연결성에 대해 이해한다. HTTP 헤더 중 바디를 설명하는 헤더인 표현헤더에 대해 이해한다. HTTP 헤더..
12주 2일차 - 웹 접근성, 서버 복습
12주 2일차 - 웹 접근성, 서버 복습 1. 배운 것 jsx 내에서 label태그의 for 속성은 htmlFor 로 써야 한다. for는 반복문이라서. 몽고디비 콜렉션, 모델, 스키마 클라이언트의 수정내용을 서버에도 반영하려면 build 다시 해준다. drop database가 안되는 경우 권한 설정 문제이다. 몽고디비 아틀라스 홈페이지에서 security 탭으로 가서 권한 변경하기. 2. 내용 정리 useEffect 복습 어떠한 상태(state)의 값이 바뀌었을때 동작할 함수를 작성할 수 있다. 첫번째 인자 콜백함수: 가장 처음에 앱이 실행될 때의 첫 렌더링 또는 state변경 후 재렌더링 종료시 실행됨. 두번째 인자 Dependency Array: 의존성 배열이다. 첫번째 매개변수인 함수가 두번째 ..