코드캠프_FE09
1.코드 캠프 01일차) 14시간 동안 박살나버린 날😇
나도 이럴 줄은 몰랐지..
2.코드 캠프 02일차) 리액트한테 얻어 맞은 날
영혼 빼고 작성하기 스킬 습득..
3.코드 캠프 03일차) API? REST? 그게 대체 뭔데?
응애 아직 나도 잘 몰라
4.코드 캠프 04일차) Async-Await? 동기? 비동기? -> 동시? 비동시?
아직도 헷갈리는 동기 비동기
5.코드 캠프 08일차) 폴더 구조를 잡아보자!
유지보수를 위해 폴더를 늘려보자!
6.코드 캠프 09일차) props, state, refetchQueries
잠 와요 vs 졸려요
7.코드 캠프 10일차) 많은 걸 배운 날
TIL 매일 쓴다고 좋은 것만은 아니구나..
8.코드 캠프 05일차) Next.js 동적 라우팅
동적 라우팅을 파헤쳐보자.
9.코드 캠프 17일차) CORS? Database? 😇
사실상 CORS 위주의 글
10.코드 캠프 10일차) JS vs TS
Js vs Ts
11.코드 캠프 11일차) 쟤를 불렀는데 왜 네가 나와
Event Bubbling
12.코드 캠프 10일차) TS로 갈아엎기 전에 이것부터 알자
이번 주 목차 >1. Event-Bubbling / Event-Delegation Library Layout Pagination / Infinite-Scroll Lifting-State-Up 추석 연휴로 아직 한 과정이 남았다.. 타입스크립트..!! 오늘의 목차 >
13.코드 캠프 12일차) Prev State
prev state
14.코드 캠프 16일차) class component, functional component
Class Component 클래스 컴포넌트를 알아보기 전에 클래스의 개념에 대해 먼저 알아보자. 클래스란? 클래스를 예시로 들 수 있는 것들이 주변에 많이 있는데, 물건 만드는 설명서나 붕어빵 틀 등이 있다. 이들의 공통점은 무언가를 만들 때 반복적인 작업을 최소화해준다라는 것이다. 간단한 사용법으로 new연산자를 보니, 이전에 어떻게 작동되는지...
15.코드 캠프 14일차) 페이지네이션과 무한스크롤
오늘은 Pagination에 대해 알아보자.
16.코드 캠프 20일차) 검색어로 필터링해보기
Database Search / Pagination Debouncing / Throttling 1. Database 데이터 검색은 어디서 하면 될까? 프론트? 백? 검색 기능은 백엔드에서 한다. DB에 테이블이 있으면 어떤 Column에서 검색을 할 지 검색하는 기능이 있다. DB를 개발하는 사람들이 DB를 만들면서 주로 만드는 기능 중에 하나가 DB...
17.코드 캠프 19일차) 이미지와 클라우드
오늘의 목표 Image Process Cloud Storage Image Validation 파이어베이스를 적용해봤는데, 파이어베이스 자체가 조금 느려서 첫 페이지 렌더링이 버벅대는 것을 알 수 있다. 이럴 땐, _app.tsx에 선언된 파이어베이스를 빼서 따로 폴더를 만들어서 빼놓고 파이어베이스를 사용하는 페이지(index.tsx)에서만 import 시...
18.코드 캠프 21일차) UnderFetching과 OverFetching | Recoil
Under-Fetching / Over-Fetching Recoil
19.코드 캠프 30일차) RefreshToken 으로 만료된 JWT 바꿔치기!
그리고 반응형 프로그래밍
20.코드 캠프 22일차) 로그인과 JWT, Web Storage
Login JWT 1. Login 로그인과 그 후의 흐름 브라우저에서 이메일과 비밀번호를 입력하고 로그인 버튼 클릭 백엔드로 데이터 전달 벡엔드에서 DB로 전달 후 검증 검증 결과를 백엔드에서 확인 후 메모리 세션에 로그인 상태와 함께 저장하면서 세션 ID 생성 ( 인증, Authentication ) 백엔드에서 세션 ID를 브라우저로 전달 브라우저에서는...
21.코드 캠프 31일차) 성능 최적화를 해보자
Memorization Preload / Prefetch Promise All 가비지 컬렉션.. 게임을 하다 보면 가끔 끊기거나 중간에 멈추는 현상이 발생하는데, 메모리가 차서 발생하는 현상으로 메모리가 꽉 찰 때 마다 비워서 빈 공간이 생기는 시간 동안 멈추게 된다. useMemo useCallback React.memo() HOC로 컴포넌트에 적...
22.코드 캠프 35일차) 배포 시작
Cloud SSG / LB DNS 클라우드의 탄생 배경 옛날에는 사용자가 어느 순간에 갑자기 폭발적으로 증가하는 스타트업이란 개념이 없었다. 사용자가 폭발적으로 증가하는 이 순간을 감당해내느냐 못해내느냐로 성공과 실패가 나뉘어진다. 이 고비에서 가장 많이 다뤄볼 수 있는 것이 바로 배포 이다. 서버용 컴퓨터를 3 대를 뒀을 때, 사용자를 각각의 컴퓨터...
23.코드 캠프 27일차) 웹 에디터와 XSS
Web-Editor Cross-Site-Script (XSS) Hydration-Issue 1. Web Editor 웹 에디터 라이브러리 React Draft Wysiwyg(What You See Is What You Get) React Quill TOAST UI Editor 오늘은 React Quill 을 한 번 가볍게 사용해볼까 한다. 먼저 np...
24.코드 캠프 24일차) 리액트 훅 폼
React-Hook-Form Yup Common-Component type 과 interface 차이 type은 같은 이름으로 작성 불가, interface는 가능(선언 병합) 긴 이름의 타입은 코드 흐름에 필수적이지 않다면 따로 빼놓자..! 1. React-Hook-Form input태그들이 모여있는 입력 양식에는 form 태그를 사용해서 묶어주면 ...
25.코드 캠프 36일차) HTTP와 HTTPS
HTTPS / SSL / TLS EC2 Load Balancer HTTPS HTTPS는 무엇이며, 왜 필요한가? WireShark 네트워크 패킷 네트워크 Source는 출발지를 의미함. 약자로 src 도착지는 Destination 약자로 dst Port Number ( 0 ~ 65535 중 랜덤으로 배정받는다. ) localhost -> 3000...
26.코드 캠프 37일차) Docker 입문
CDN - LB 두가지 배포 분기 Docker >프로세스와 쓰레드 > 프로세스가 하나의 컴퓨터로 생각한다면, 쓰레드는 그 컴퓨터에서 돌아가는 하나의 프로그램이다. > 리눅스 command pipe (|) > 이 파이프는 명령어를 연결하는 역할을 하는데, 파이프의 왼쪽에 있는 명령어의 결과를 바탕으로 오른쪽 명령어를 실행할 수 있는 특징을 가지고 있다. >...
27.4주 동안의 팀 프로젝트 회고
코드캠프 팀 프로젝트 회고
28.더럽게 느린 팀 프로젝트 결과물
앓던 이가 빠진 후련한 느낌