전체 글

22.10.26 TIL

1. Done 1.1 포폴앱 성능최적화 계획잡기 별도 문서로 정리: https://handsome-parcel-51e.notion.site/1-1044e2798c5f49838dd87e39eb2640cc 2. 타입스크립트 - ref로 사용자 입력 받기 (state 양방향 바인딩 안 쓰는 경우) const todoOnSubmit = (e: React.FormEvent) => { e.preventDefault(); }; event 객체의 타입은 react.FormEvent 이다. useRef useRef 호출 ref 타입 할당 (HTMLInputElement) 초기값 null 할당 (useRef()가 jsx 리턴문보다 위에 있어 최초 렌더링 시 아직 jsx가 렌더링 되지 않았으므로) reference 값을 D..

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

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

일기 - 22.10.26

부트캠프 안에서 열심히 했다. 다수의 스터디를 운영하기도, 구성원으로도 참여했고 페어 프로그래밍과 과제에 최선을 다했고 페어리뷰로 증명했다. 생전 처음 해보는 웹 개발 팀 프로젝트에 생전 처음 해보는 팀장을 맡아 내 파트의 내 작업분량만이 아닌 팀 전체 작업의 방향성을 제시하고 작업상황을 체크해야 했으며 PM역할도 해야 했지만 나름의 최선을 다했고 일정 내에 어찌 되었든 완성했다. 시켜서 공부하기보다 내가 모자람을 느끼거나 스스로 하고싶어서 공부를 했고, 부트캠프 기간동안 내 블로그에 약 3천명의 누적 방문자가 다녀갔고 부트캠프 기간동안 약 1천개의 커밋을 남겼다. 하지만 취업시장에 나와서 현재 나라는 구직자의 객관적인 상품성을 확인하는 순간마다 나는 우물안에 있었고 나보다 더 오래 더 열심히 공부한 사..

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

1. github 소셜로그인 연동 1.1 Github 에서 세팅할 것 Settings → Developer settings → Oath Apps → New OAuth App → Register a new OAuth appication Authorization callback URL은 파이어베이스에서 로그인 제공업체에 깃허브를 추가할 때 받은 하단의 링크를 기입한다. Enable Device Flow 체크하기. 1.2 Firebase console 에서 세팅할 것 Authentication → Sign-in method → 새 제공업체 추가 → 사용 설정 토글 on 클라이언트 ID : 깃허브에서 확인 클라이언트 보안 비밀번호: 깃허브에서 확인 2. 메인 페이지 뷰 작업 2.1 Service Layout 코..

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..

22.10.21 TIL

Task 기술면접 질문 공부하고 답변 정리, 문서화 1. Done 1.1 기술면접 답변 정리 질문: 스코프에 대해 설명해주세요. 스코프란 식별자의 유효범위를 말합니다. 모든 식별자는 자신이 선언된 위치에 의해 자신을 참조할 수 있는 유효범위가 결정됩니다. 예를들어, 함수의 매개변수는 함수 몸체 내부에서만 참조가 가능하며 함수 몸체 외부에서는 참조가 불가능합니다. 이 경우 매개변수의 스코프, 즉 유효범위는 함수 몸체 내부가 됩니다. 스코프는 크게 전역 스코프(Global Scope), 지역 스코프(Local Scope) 두 종류로 나뉩니다. 변수를 기준으로 설명하자면 전역에서 선언된 변수는 전역이 유효범위인 전역 변수이며, 지역에서 선언된 변수는 지역 스코프의 지역 변수가 됩니다. 지역 스코프의 경우 세부..