etc./TIL

[TIL] 2022년 02월 18일 - 쿠키와 로컬 세션 스토리지 , 장바구니 Basket

이번시간에서는 중고마켓에 적용될 장바구니를 구현하는 법과 쿠키 로컬 세션 스토리지의 상세한 강의를 들었다. 커리큘럼 아하! 이제 const {}, const [] 원리를 알겠어! 우와 무시무시한 타입이다! => generic 그냥 텍스트 말고, 웹 에디터로 꾸며줘 => Web-Editor 결제 API를 테스트할 신용 / 체크카드 준비됐지?! => lamport 지도를 연동해준다! 너무 쉰운걸?! => Map 목표 우와! 무시무시한 타입이 등장했다!! => Generic 변수 말고, 브라우저에 저장해봐 => Cookie / LocalStorage / SessionStorage 비회원 / 회원 전용 장방구니가 있다?! => Basket 브라우저 저장소 브라우저에는 3가지를 저장해주는 저장소가 존재하는데 Co..

[TIL] 2022년 02월 17일 - refecth 보다 더 좋은 것

React 25강 - Day5 이번 시간에는 지금까지 배워온 것 중에서 궁금한 것들을 알아보는 시간을 가졌다. 기존의 graphql에서 refetch를 사용했는데 사실 refetch는 좋은 방식이 아니다. refetch는 굉장히 쉬운 방식이었는데 성능적으로는 좋지 않기 때문에 이러한 문제점을 개선하는 방법을 알아보자. 목표 아하! 이제 const {} , const []의 원리와 차이를 알겠어!! => Destructing 객체에서 데이터를 삭제해보자!! => Rest-Parameter 뭐?! HOC는 원래 클래스 용이라구?! => custom-hooks refech는 사실 쉽지만 사용하기 불편해!!!~~ => writeQuery / readQuery 구조 분해 할당 이란? const child = { ..

[TIL] 2022년 02월 16일 - 로그인 Validataion

이번 시간에도 인증 토큰에 내용의 연속으로 인증 부분을 배웠다. 커리큘럼 useQuery를 axios 처럼 사용할 수 있다! => useApolloClient 헉?! 폼을 자동으로 만들어준다고?! => React-Hook-Form Validataion 라이브러리가 따로 있다 => Yup 재사용을 위한 공통컴포넌트를 만들어보자! => Common-Component 우리가 그동안 useQuery를 단독으로 사용해서 학습하였는데 이것을 useQuery보다 한단계 더 높은 최적화 방식의 useApolloClient를 사용할 것이다. useQuery와 useLazyQuery useApollo의 차이점을 알아보면 useQuery는 내가 실행하고 싶을때 실행할 수 있다. useLazyQuery는 내가 실행하고 싶을때..

[TIL] 2022년 02월 15일 - withAuth와 SessionStorage / Cookie

이번시간에는 로그인을 구현할떄 기록하는 Stoarge / Cokie의 관해서 배웠다. 쿠키란? 인터넷에 사용자가 어떤한 웹사이트를 방문한다면 그 사이트가 사용하는 서버를 통해 인터넷 사용자의 컴퓨터에 설치되는 작은 기록 정보 파일을 말한다. 이전에 배운 refeshToken도 쿠키쪽에 저장해주는 방식이다. localStorage는 영구 저장 브라우저를 종료해도 살아있다. sessionStorage는 브라우저가 종료되는 즉시 사라진다. 프론트엔드는 화면을 미리 그려보고 브라우저로 보내주는데 그냥 그대로 보내주는 것이 아닌 프론트와 브라우저에서 그려준 것을 비교 diffing을 한 다음 최종적으로 반영해주는 하이드레이션이라 부른다. 그래서 localStorage에서 정의되지 않았다고 나온다. HOC HOC란..

[TIL] 2022년 02월 14일 - 로그인의 역사

커리큘럼 로그인을 이해하려면 역사를 알아야해!!! => Login JWT 토큰?? 이건 또 뭐시여?? => JWT 암호화 방식은 2가지가 있다?? 알고 있었나?? => Encrypt / Hash 로그인 인증 토큰은 어디에 저장해?? => Context-API 우리가 로그인에 대해 알아보기전 어떠한 방식으로 로그인이 이뤄지는지에 대해 알아보아야 한다. 먼저 우리는 브라우저라는 하나의 웹에서 백엔드가 요청을 보내게 된다. 프론트엔드에서 백엔드에게 로그인에 대한 정보를 넘기고 백엔드에서는 그에 대한 정보를 DB에 저장해준다. 저장해 준뒤에는 각각의 상태가 존재하는데 먼저 statful상태와 stateless 상태가 있는데 현재 백엔드에서 상태가 없는 상태로써 여러개의 테이블로 수평 확장이 가능하였다. 하지만 ..

[TIL] 2022년 02월 11 - Global-State

커리큘럼 글로벌 스테이트 ? props가 필요없다! => Context-API / Apollo-Client 로그인에도 역사가 있다? => AcessToken / RefreshToken 잠깐?! 이것 먼저 실행시켜줘 => Clousre / HOC / HOF Next.js 렌더링에 이런 원리가 있다 ? => Diffing / Hydration 헉?! 폼을 자동으로 만들어준다!? => React-Hook-Form 배울 내용 함수형 컴포넌트는 진짜 함수다 => Functional-Component el,prev,props에는 공통점이 있다 ? => Parameter 뭐? Rest와 Grapql에 차이가 또 있다고 ? => Under-Fetchting / Over-Fetching 이건 데이터 검사할때 사용하면 좋..

[TIL] 2022년 02월 09일 - 검색기능 추가, 쓰트롤링 디바운싱

이번시간에는 전반적인 Freeboard의 검색기능을 추가하는 방법과 쓰트롤링과 디바운싱에 대해 배웠다. 커리큘럼 검색을 이해하려면 다양한 DB를 알아야 한다 => Database 검색 결과를 페이지 네이션과 연결해야 한다 => Search / Pagenation 검색하기 버튼 없이 검색하는 법 => Debouncing / Trotthring 검색에 대해서 알기위해 프론트엔드 백엔드 브라우저가 어떤 방식으로 검색을 이루는지 알아야 한다. 브라우저에서 프론트에드에게 search를 보내주는데, 그리고 브라우저는 백엔드에서 만든 DB에게 요청된 검색단어를 보내주고 그 DB에서는 표형태로 되어있는 검색 내역의 표를 브라우저에게 보내준다. 검색 내역의 표안에는 각각의 토큰이 존재하는데 그것을 Redis라는 비관계형..

[TIL] 2022년 02월 07일 - firebase

이번시간에는 백엔드에 조금더 가까워질 데이터베이스에 대해 배웠다. 데이터베이스는 컴퓨터에 34.64.187.2 라는 ip 형태로 그려져있다. 이 컴퓨터안에는 약 300개 정도의 프로그램이 생성되어있고 그것을 port 번호로 나눠서 사용하고 있다. 백엔드에서 연결을 통해 연결되어있는 것을 볼 수 있다. HTTP의 개념과는 다르다. HTTP와 다른 점은 백엔드는 한번 연결해놓으면 계속해서 연결 상태를 유지한다. 백엔드에서는 내컴퓨터가 localhost환경일때 브라우저에서 백엔드로 요청할 수 있게 접속문을 열어서 24시간 동안 대기해야한다. 이런것들을 추가해주기 위해서는 대부분 사용하는 것들이 express 혹은 koa등등이 있는데 graphql로 연결하고 싶다면 프론트엔드에서는 apollo-client 백엔..

[TIL] 2022년 02월 04일

이번시간에는 백엔드를 조금 더 맛볼 수 있는 postgres 세팅에 대해 배워보았다. 커리큘럼 API를 무료로 제공한다!! => Open-API / public API 프론트엔드와 백엔드 전체 숲 구경 => Architecture 같이 데이터 베이스를 구경해 보자 => Database Node.js를 활용해 백엔드 서버를 제작해 보자 => Node.js / Apollo-server 프론트엔드와 백엔드 구조 부여받은 DB를 BackEnd에서 DB로 연결해주는 TypeORM역할 일반 Javascript에서는 nodejs를 사용해서 백엔드 구조를 잡는 반면 Typescript에는 ts-node를 사용해서 백엔드 구조를 짠다. ts-node는 개발중일때 사용하는 것 두개의 차이점을 설명하면 ts-node 는 개..

[TIL] 2022년 02월 03일 TIL - 클래스 컴포넌트

이번시간에는 기존의 function 함수를 써왔던 것을 class형 컴포넌트로 변환해서 사용하는 방법을 배웠다. 커리큘럼 클래스 컴포넌트?? 그런데 클래스가 무슨 뜻이야?? => Class-Component 프론트엔드와 백엔드에 전체 숲을 구경해보자 => Architecture 백엔드 API 만들기 체험 => Apollo-Server / graphql 이미지 업로드하기 => Cloud-Storage 검색하는 버튼없어도 검색이 가능하다! => Debouncing / Throttling 오늘 배운 내용 클래스 컴포넌트?? 그런데 클래스가 무슨 뜻이야?? => Class-Component this란 무엇이고 왜 자꾸 말썽을 부리는 것인가 => this 컴포넌트가 살아숨셔 / 생명주기 => Component-L..

[TIL] 2022년 01월 26일 TIL - LAYOUT

이번시간에는 전체적인 스타일을 꾸며주는 레이아웃을 제작하는 방식에대해 배워보았다. 커리큘럼 동일한 CSS를 사용하고 싶어요!! => Global Styles 폰트도 다양한것을 사용하고 싶어!! => WOFF2 슬라이더를 적용하고 싶다 -> Carousel 레이아웃 이란? 레이아웃은 UI에 전체적인 페이지를 구성하는 방식이라 할 수 있다. 기본적인 레이아웃 설정은 위 이미지와 같이 메뉴의 배치를 단계적으로 수행하는 작업이다. function MyApp({ Component, pageProps }) { return ( ); } React에서 레이아웃을 구성하는 방식은 대부분 _app.tsx에 가면 설정할수 있는 파일에 가보면 된다. 이 파일에서 Component는 모든 페이지를 실행하기 전 먼저 실행하는 설..

[TIL] 2022년 01월-25일 TIL - Ant Disgin Modal, Husky

이번 시간에는 내가 만들 사이트에 조금 더 디자인화된 라이브러리를 사용할 수 있는 Ant Design을 배웠다. 이 분에서는 우리가 버튼을 누를때 뜨는 상태창을 디자인 할 수있는 모달을 사용할 수 있었다. 목표 알림창이 이전보다 예뻐졌어요 => Modal 주소 우편번호를 검색해보자 => React-Daum-Postcode setState에 이런 기능이? => prevState 코드를 깔끔하게! 중복은 사라지게!! => refectoring 규칙을 지키지 않는다면 Github를 푸쉬할 수 없다 => Husky 우리가 간단히 모달을 직접 구현하는 것 보다 라이브러리를 사용해 간편하게 모달을 띄워줄 수 있는 라이브러리들이 존재한다. 그 중에서 Ant Design을 살펴보자. Ant Design으로 적용할 수 ..