리액트

인프런 회사 견학 후기

Table of contents 후기 질문과 답변 1. 후기 소중한 분께서 만들어주신 소중한 기회로 인프런 회사 견학을 해볼 수 있는 기회가 생겼고, 함께 열심히 부트캠프를 진행했던 인원들과 인프랩 사무실을 견학하였습니다. 인프랩 사무실 소개, 인프런과 랠릿 프론트엔드 파트 업무와 서비스에 대한 소개, 신입 개발자의 온보딩 과정, 사전에 준비해간 취업준비를 갓 시작하는 신입 프론트엔드 개발자가 가장 궁금해할 만한 여러 질문들에 대해 인프런과 랠릿 프론트엔드 파트의 여러 팀원분들, 그리고 CTO이신 향로님께서 긴 시간 자세하게 답변을 해주셨습니다. 다소 많은 인원이 한꺼번에 방문드려 업무에 너무 차질을 드리진 않았을까 죄송스러웠지만, ”우리는 성장 기회의 평등함을 추구합니다.” 라는 인프런의 모토에 걸맞게..

포트폴리오 앱 성능최적화 작업기 1편

0. Intro 기존에는 Three.js를 사용해서 외부 소스의 gltf 모델링 파일을 컴포넌트로 변환하여 웹에서 3d를 구현했었다. 하지만 이번에 꼭 사용해보고 싶은 게 있어 3d 모델링 툴인 Spline을 사용해서 구현한 3d 모델링 파일을 코드로 export 하여 포트폴리오 앱에서 받아와 사용했다. 이 과정에서 모델링 파일을 받아오는 방식이 빌드 파일 내에 저장된 걸 사용하는 게 아니라 네트워크를 사용해서 받아오게끔 되어있어, 모바일에서는 정상적인 열람이 힘들 정도의 심각한 성능 저하가 발생하였다. 구글 라이트하우스를 돌려보면 데스크탑 환경에서 해당 3d 파일을 불러오는 코드만 삭제해도 퍼포먼스 점수가 28점에서 64점이 될 정도이다. 이를 해결하려면 모델링 파일 자체를 더 적은 폴리곤을 사용하거나..

22.10.25 TIL

1. Done 1.1 타입스크립트 타입스크립트는 코드에 에러가 있더라도 컴파일은 진행된다. function add(n1: number, n2: number) { return n1 + n2; } const num1 = '5'; // Argument of type 'string' is not assignable to parameter of type 'number' const num2 = 2.2; const result = add(num1, num2); console.log(result); // 매개변수에 지정한 타입과 전달인자의 타입이 일치하지 않음. // 하지만 에러가 나도 컴파일은 진행됨. 타입스크립트의 주요 원시 타입은 모두 소문자로 시작한다 number, string ,boolean, ….etc Re..

22.10.24 TIL

1. Done 1.1 복습 - 개인프로젝트 firebase admin 코드 분석 1. 인터페이스 /** 인터페이스: 기본 명세를 정의한다. */ interface Config { credential: { privateKey: string; clientEmail: string; projectId: string; }; } 2. 싱글톤 패턴 /** 싱글톤 패턴으로 FirebaseAdmin 인스턴스를 어디서든 불러올 수 있도록 export default. */ export default class FirebaseAdmin { public static instance: FirebaseAdmin; private init = false; public static getInstance(): FirebaseAdmin {..

개인프로젝트 - 22.10.23 작업일지

참고 강의: 만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript) 0. 기획의도 부트캠프 수료 후 기술면접을 준비하면서 직접 공부하고 정리한 답변을 깃허브에 아카이빙하고자 md파일로 작성하던 중, 원하는데로 질문 항목, 또는 꼬리질문 항목으로 이동하는 것이 불편하고 readme 파일이 지저분해 보이며 파일들이 과도하게 많아져, 아예 기술면접 대비와 새로운 기술스택 연습을 겸하고자 웹앱으로 제작하기로 하였다. 1. 환경설정 vscode 익스텐션 추가 설치항목 Thunder Client yarn 사용하기 npm i yarn npx yarn dev // npm run dev 2. Next.js 프로젝트 폴더 구조 2.1 pages 폴더 - 라우팅 규칙 설명 공식문서 링크 Index..

9.25 월 - 메인프로젝트 데일리 회고(멘토 미팅)

카카오맵 api 사용 참고: [React] 카카오 맵 API로 지도 검색 앱 구현하기 with TypeScript 멘토 미팅 질의응답 Q1) 로그인 상태에 따른 조건부 렌더링 상태 실시간 반영 x 로그인 요청 성공 시 로컬스토리지에 loginStatus 란 임의의 값을 true로 저장해둔 상태 로그인 요청은 components > Form > user > LoginForm.jsx 컴포넌트에서 실행 navbar 조건부 렌더링은 components > Nav > Nav.jsx > NavTop.jsx 컴포넌트에서 실행 Nav 컴포넌트는 App.jsx에서 라우팅 경로 상단에 위치하므로 state를 내려주고 올려받아야 의도대로 렌더링 될 것으로 예상됨 function App() { return ( **** ***..

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

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

리액트 포트폴리오 사이트 제작기 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..