Frontend

저장소와 버전 만들기 pwd /Users/inguk pwd는 현재 위치하고있는 디렉토리를 확인할 수 있다. ls ls -a ls는 현재 위치하고있는 디렉토리파일구조를 보여준다. 두번째 명령어는 숨김폴더, 파일까지 같이 보여준다. cd desktop/git-test cd는 뒤에 위치하는 주소로 이동하는 명령어이다. clear clear는 터미널을 깨끗하게 만들고 새롭게 작업하고싶을때 사용하는 명령어이다. touch a.txt mkdir React git init 작업디렉토리 만들기 git status 작업디렉토리의 상태확인하기 git add b.txt 스테이지에 변경사항 올리기 git add a.txt b.txt c.txt // 여러개의 변경사항중 일부만을 스테이지에 올리고 싶을 때 git add . //..

새로운 프로젝트가 시작되었다. 처음 팀원분들과 프로젝트를 기획할 때 기술스텍에 zustand, supabase와 같은 새로울 기술스텍을 추가하자는 의견에 혼자만 회의적이었다. 그동안 이해를 돕기위해 정성껏 포장된 코드와 강의를 바탕으로 새로운 라이브러리를 배워왔기때문에 공식문서 혹은 블로그를 통해 기술을 배워서 짧은기간내에 결과물을 만들어낼 수 있을지 스스로 견적이 나오지 않았기때문이다. 하지만 막상 새로운 기술을 공식홈페이지에 들어가 정독해보고, 실험해보고, 코드를 작성하는 과정이 너무 뜻깊게 느껴졌다. 무엇보다 강의에 의존하지않고 스스로 새로운 기술을 배울 수 있다는 자신감이 생겨 좋았다. 프론트엔드는 기술의 발전과 기술의 차용과정이 너무 급변하는 면이 있어서 내심 어떻게 헤쳐나가야하나 고민이 있던 ..

Why zustand over redux? Simple and un-opinionated Makes hooks the primary means of consuming state Doesn't wrap your app in context providers Can inform components transiently (without causing render) Why zustand over context? Less boilerplate Renders components only on changes Centralized, action-based state management zustand 설치 yarn add zustand zustand 사용하기 First create a store import { creat..

type.d.ts와 같이 declare의 약자인 d를 확장자명에 붙이면 모듈의 export, import작없업이 전역적으로 사용가능하다 위와같이 export대신 declare를 선언해주면 어디서든 저 지정해준 타입을 사용할 수 있다. supabase useQuery 데이터를 get 하기 위한 api이다. (post, update는 useMutation을 사용한다.) 첫번째 파라미터로 unique Key(===query keys)가 들어가고, 두번째 파라미터로 비동기 함수(api호출 함수)가 들어간다. (당연한 말이지만 두번째 파라미터는 promise가 들어가야한다.) 첫번째 파라미터로 설정한 unique Key는 다른 컴포넌트에서도 해당 키를 사용하면 호출 가능하다. unique Key는 string과 ..

기본 타입 추론 정적타입언어를 사용할때의 단점은 타입을 정할때의 시간과 노력이 소비된다는 점이다. 하지만, 타입스크립트는 타입을 추론할 수 있도록 도와주므로 개발자가 필요한 경우에만 타입을 정의할 수 있다. let a = 123; let b = 'abc'; a = 'abc'; // Error b = 123; // Error a에는 number타입이, b에는 string타입이 할당되었다. 그러므로 다음부터의 할당에서 a에서는 number타입만, b에서는 string타입만 선언되도록 해주는 것이 바로 타입 추론이다. const c1 = 123; const c2 = 'abc'; const는 let보다 더욱 타입이 엄격하게 적용된다. let에서는 a에서는 number타입만, b에서는 string타입만 선언되도록..

기본 타입 추론 정적타입언어를 사용할때의 단점은 타입을 정할때의 시간과 노력이 소비된다는 점이다. 하지만, 타입스크립트는 타입을 추론할 수 있도록 도와주므로 개발자가 필요한 경우에만 타입을 정의할 수 있다. let a = 123; let b = 'abc'; a = 'abc'; // Error b = 123; // Error a에는 number타입이, b에는 string타입이 할당되었다. 그러므로 다음부터의 할당에서 a에서는 number타입만, b에서는 string타입만 선언되도록 해주는 것이 바로 타입 추론이다. const c1 = 123; const c2 = 'abc'; const는 let보다 더욱 타입이 엄격하게 적용된다. let에서는 a에서는 number타입만, b에서는 string타입만 선언되도록..

제네릭이란 타입을 마치 함수의 파라미터처럼 사용하는 것이다. 위의 사진이 제네릭을 사용하는 이유이다. 저렇게 기존의 함수를 재사용하기위해 유니온타입을 계속 지정해주기 귀찮으니 제네릭을 사용하는 것이다. → 제네릭을 사용한다면 다음과 같이 바꿔줄 수 있다. function getSize(arr: T[]): number { return arr.length; } const arr1 = [1, 2, 3]; getSize(arr1); const arr2 = ["a", "b", "c"]; getSize(arr2); //위와 같이 제네릭은 생략 가능하다. const arr3 = [false, true, false]; getSize(arr3); const arr4 = [{}, {}, { name: "tim" }]; g..

오늘은 후발대수업에서 면접과 관련한 수업을 진행했다. 운이좋게 알고있는 것을 많이 물어보셔서 적극적으로 참여했던 것 같다. 면접수업 질문목록 1. SPA와 MPA의 각각의 특징과 개념에 대해 설명해주시오. SPA를 CSR(Client Side Rendering) 방식으로 렌더링 MPA를 SSR(Server Side Rendering) 방식으로 렌더 MPA 장점 SEO 관점에서 유리하다. MPA 단점 새로운 페이지를 이동하면 ‘깜빡’인다. (UX) 매 페이지 요청마다 리로딩(새로고침) SPA 장점 자연스러운 사용자 경험 (UX) 전체 페이지를 업데이트 할 필요가 없기 때문에 빠르고 ‘깜빡’ 거림이 없다. 컴포넌트별 개발 용이 (생산성) SPA 단점 JavaScript 파일을 번들링해서 한 번에 받기 때문에..