dailyStudy
1.Day 01) React 프론트엔드 시작
React는 javascript를 쉽고, 효율적으로 사용할 수 있도록 Facebook에서 만든 도구입니다.React를 사용하기 위해 OS에 Node.js 와 Yarn을 추가적으로 설치 했습니다.터미널을 이용해 폴더에 수업에 필요한 프로젝트를 설치했습니다.codecamp
2.Day 02) 1. 왜 하필 React 야? => NPM-Trends 2. 컴포넌트? 그거 복사 붙여넣기 아니야? => Component 3. 아직도 let, const 쓰니? 난 State 쓴다! => State
readonly = 읽기 전용 수정 불가disabled = 비활성화컴포넌트: 다른 곳에서 import해 재사용 (margin 보다 padding사용)리액트 쓰는 이유1\. 쓰는 사용자가 많다2\. 리액트 React.js, React-Native 앱(크로스플랫폼), Re
3.Day 03) 1. 데이터 전송 방법에 대해 알아보자! => HTTP / API / Graphql / Rest 2. 데이터 전송 실습을 직접 해보자! => Postman / Playground
HTTP란 두 컴퓨터간에 텍스트 데이터를 주고 받는 길 입니다.HTTP 라는 길로 요청과 응답 2가지를 서로 주고 받을 수 있습니다.서로 통신할때 두 곳 인터넷이 연결 되있어야 합니다.프론트에서 데이터를 HTTP를 통해서 백엔드 컴퓨터로 보내고 데이터를 DB에 저장 해
4.Day 04) 1. 동기와 비동기 방식 => Async-Await 2. VSCODE에서 데이터 전송해보자! => Apollo-Client / Mutation
비동기 실행: 서버 컴푸터의 작업이 끝날 때까지 기다리지 않는 통신으로 여러 가지 요청을 동시에 처리해 줄 때 사용합니다.동기 실행: 서버 컴퓨터의 작업이 끝날 때까지 기다린 후 다음 작업을 실행하는 통신입니다.자바스크립트는 default로 동기적 방식입니다. ( 위에
5.Day 05) 1. 페이지를 이동하자 => Routing 2. 게시물을 가져오자 => Apollo-Client / Query 3. API 요청시 에러가 났어요 => try - catch
브라우저는 모두 다르지만 하나의 백앤드와 DB는 하나로 공유 하고 있다.등록해줘 요청$가 두개가 있는 이유 다른 API를 묶음 배송을 할 수 있기 때문에한 줄 씩 코드 실행뒤에 writer = state writer키와 value 가 같으면 생략가능 (shorthand
6.Day 10) 1. API로 받는 데이터 타입은? => garaphql-codegen 2. 유틸리티 타입도 배워보자! => Utility-Type 3. 협업하는데 규칙이 있어야지! => Eslint / Prettier / Husky
비밀번호는 보안상 불러오지 않고 보내기만 하면 알아서 틀렸을 시 백엔드에서 에러 처리 해줌return = 함수의 종료early exit 틀린거 먼저 종료하기리팩토링 패턴alert("asdfconfirm("입력")prompt("비밀번호 입력해주세요")const mypas
7.Day 11) 1. 클릭이 이상해... => Event-Bubbling / Event-Delegation 2. 이미 만들어 놨다고? 땡큐! => Library
이번주 핵심: 라이브러리3주차 커리큘럼오늘 목표:리뷰는 정답이 아니다.( 다양한 방법이 있다. )외워서 할 수는 없다. ( 안보고 할려면 5년 정도 걸림. )댓글 목록을 불러올 때는 댓글 게시글의 ID가 필요하다. 떄문에 variables로 아이디를 가져옴.BoardL
8.Day 12) 1. 알림창이 예뻐졌어요=> Modal 2. 주고, 우편번호를 검색해보자 => React-Daum-Postcode 3. setState에 이런 기능이??! => prevState
유튜브좋아요/싫어요댓글(별)유튜브 스타일 주기!! 이중 부정연산자있으면 true, 없으면 false{props.data?.fetchBOard.writer}const writer = "철수" 를 boolean 타입으로 변경하고 싶으면{!!writer} 을 쓰면 true가
9.Day 13) 1. UI의 전체적인 구조를 잡아놓자! => Layout 2. 모든 페이지에 동일한 CSS를 주자! => Global-Styles
인풋 창에는 벨류값이 존재한다.value 는 창에 나타나는 글내가 안된것: 우편번호 검색을 한후 수정할 때 zipcocde,address 디폴트값 가져오기해결 방법:defaultValue 는 value가 없을 때 작동한다. 그래서 value가 빈문자열로 있으니 디폴트가
10.Day 14) 1. 다른 페이지도 보여줘! => Pagination 2. State좀 나눠줘! => Lifting-State-Up
14일 차 수업스프레드 연산자 주석치리 한 것을 흩뿌려준다는 의미import Slider from "react-slick"; 타입 오류가 난다.타입 스크립트 쓸 때 추가해서 오류 없애기id를 이용해 onClick 을 똑같이 준다.refetch 를 onClick에 넣어주
11.Day 15)1. 객체와 배열이 복사가 이상해.. => Shallow-Copy 2. 스크롤 형태의 페이지네이션 만들자! => Infinite-Scroll
오늘 목표 다음 페이지 클릭했을 때 2교시 댓글 수정  1. setState가 이런 원리였다고?! => SetState 2. 최신 데이터 다시 가져와줘! => refetch 3. 왜 목록에서 삭제가 안되지??! => key / index
깃 다시props drilling: props를 부모가 자식에게 물려주고 자식이 그 자식에게 물려주는 방식 많다고 좋은것은 아니다파일을 나누면서 container : 자바스크립트 영역 presenter : HTML ( JSX ) 영역기능을 연결시켜 주기 위해
13.DAY 16) 1. 클래스컴포넌트?? 근데, 클래스는 또 뭐야?? => Class-Component 2. This ?! 뭔데 이게 자꾸 말썽인거야! => this 3. 컴포넌트가 살아 숨쉬나? 생명주기가 있대! => Component-Lifecycle
백엔드를 만들어 본다.fireBase를 이용하면 백엔드 개발자 없이 프로젝트 만들 수 있다.hasMore가 true일 때 마우스 스크롤이 내려갈 때 loadMore이 실행된다.마우스를 내리면 (1~20) (21~30) 까지의 데이터를 불러와 10개씩 계속 추가 된다.데
14.Day 17) 1. API를 무료로 제공해 준다고?!=> Open-API / Public-API 2. 같이 데티어베이스 구경해볼래?=> Database / ORM 3. Node.js를 활용해서 백엔드 서버 만들자! => Node.js
구글 public api 검색open api를 이용해 백앤드 개발자 없이 만들어 볼 수 있다.HTTP / HTTPS 배포할 때 배우지만 HTPP는 주의요함이라 뜸AUTH 무료이지만 회원가입이나, 절차를 진행해야지 쓸 수 있음CORS NO: 브라우져에서 사용 불가능 (모
15.Day 18) 1. CORS? 이것 때문에 짜증나 죽겠네 => CORS 2. Graphql-API가 이렇게 쉽게 만들어지다니! => Grapthql/ Apollo-Server 3. 백엔드 개발자가 없을땐 이걸 써봐! => Firebase/ BAAS
BAAS : Backend as a service 1교시 포트폴리오 리뷰 맵을 이용하면 onClick이벤트도 하나만 주면 되고 새로 추가 할때도 한줄만 추가 하면 페이지 이동까지 할 수 있다. useState 타입 주는 방법  1. 이미지 저장 과정을 알려주세요! => image-Process 2. 이미지? 데이터베이스에 저장하면 안돼?!=> Clound-Storage 3. 그 이미지는 문제가 있어요!
파이어베이스 페이지uuidv4 는 키값이 없을 때 사용하는 값uuid를 import 해줘야한다.타입스크립트도 설치이미지, 동영상 저장을 시키기 위해다른 회사에서 제공해주는 컴퓨터( 구글을 사용 )<input type = "file /> 을 사용하면 선택 버튼이 나
17.Day20) 1. 검색을 이해하려면 다양한 DB를 알아야돼!-> Database 2. 검색 결과를 페이지네이션과 연결해야해!=> Search / pagination ,3. 검색하기 버튼 없이 검색을 한다고?! => Debouncing/ Throttling
업로드를 컴포넌트로 나눠준다.fileUrls 배열 안에 3개의 빈 문자열을 만들어준다.인풋타입 file은 display: none으로 숨김처리하고,fireRef로 uploadButton이 클릭됐을 때 ref로 클릭 시켜줘onChangeFile: checkValidati
18.Day 21) 1.뭐?! Rest와 Graphql 차이가 또 있다고? 2. 글로벌 스테이트?! props가 필요 없대!
1교시 포트폴리오 리뷰 검색부분도 컴포넌트로 나눠준다. 페이지도 리페치 해줘서 없는 페이지는 안보이게 한다. 2교시 props  1.로그인을 이해하려면 역사를 알아야돼! - Login 2. JWT토큰?? 이건 또 뭐야?! - JWT 3. 로그인 인증 토큰은 어디에 저장해?! - Recoil
백엔드에 로그인 기능이 있고 브라우저에서 email/pw 를 넘긴다.백엔드에서 DB에서 일치하는 이메일과 비밀번호가 있는지 확인하고있으면 그 유저가 로그인 했다 기록을 한다.( 백엔드 메모리 세션에 저장 )메모리: 램에 저장( 컴터 껐다 키면 사라짐 )디스크: 영구저장
20.Day 08) 1. 컴포넌트를 재사용 해보자! 2. 등록 컴포넌트를 수정에 재사용하자
git stash 수정했을때 다시 풀포트폴리오 리뷰 / 컴포넌트 재사용 / 등록하기,수정하기인덱스 활용key는 중복되는 키가 들어가면 안된다.index는 들어가기 적절하지 않다.삭제하면 아래있는 인덱스가 올라오게 된다.버튼 클릭했을 때 페이지 이동id={el.\_id}
21.Day 09) 1. 이걸 쓰면 더 안전하다고? => typescript 2. 기존의 javascript 를 typescript 로 바꾸자!
디폴트값 보여주기수정하값 보여주기defaultValue 초기값수정할 때 입력을 안하면 빈칸으로 받을 때 방법.1\. mutation에서 제외하기2\. state 디폴트값에 props 넣기1번을 쓰는 방법이 좋음2번을 쓰게 되면 수정할 때 바꾸지 않아도 모두 들어가서 네
22.Day 23) 1. Next.js 렌더링에 이런 원리가 있다니!=> Deiffing / Hydration 2. 자바스크립트에 이런것이?! => Closure 3. 잠깐! 이것 먼저 실행해줘! => HOC / HOF
Token 은 변수에 담아줬기 때문에 새로고침을 하면 사라지는 것이다refreshToken을 배우면 그걸 이용하지만 배우기 전까지 임시로 localStorage를 이용해 Token을 담아주겠다.localStorage 는 보안상의 문제가 있어 권장하지 않는 방법이다.새로
23.Day 24)
지금 까지는 온클릭하여 페이지를 이동할 때 그 id값으로 이동하도록 router를 걸어 주었다.하지만 좋은 방법은 아니다. 중복이 될 수도 있기 떄문에.그래서 이제 id를 빼주고 옮기는 법을 알아보겠다.눈에는 보이지 않지만 onClick 함수는 onClickMove(
24.Day 25)
3개의 변수를 만들려면 3줄이 필요하다.이렇게 하면 한줄로 해결할 수 있다.중괄호로 감싸준 이유는 단지 객체이기 때문에지금 까지 써왔던 useQuery라는 함수를 실행 시킬 때 사용해왔다.즉 return 값이 data, loading을 가지고 있는 객체이다.useSta
25.Day 26)
any: 어떤 타입이든 다 넣어도 된다.any를 사용하면 js랑 다를것이 없다.unknown: any보다 좀 더 안전성을 중요시한다.unknown도 어떤 타입이든 넣을 수 있는데, 함수 안에 사용할 때 각각 타입을 써줘야한다.any를 사용하는 것 보다 unknown을
26.Day 27) 1. 그냥 텍스트 말고, 웹에디터로 꾸며줘! => Web-Editor 2. 로컬스토리지는 위험해 => Cross-Site-Script(XSS) 3. 하이드레이션에서 CSS 문제 발생 => Hydration-Issue
웹에디터: wysiwyg 라고 불린다.많이 쓰이는 wysiwygtoast-ui-editor 가 좋은듯.React-Quill 을 사용하겠다.React-Quill onChange는 html onChange가 아닌 만든 사람의 onChange여서 event가 들어가지 않는다
27.Day 28) 1. 결제 API 테스트할 신용/체크카드 준비 됐지?!=> Iamport 2. 결제 시간? new Date() 하는거 아니었어?! => Advanced-Date-Issue 3.setTimeout()...! 이거 사기당했네! => EventLoop/ TaskQueue
PG사 = patment Gateway( NHN, Nicepay, KG이니시스 )PG사 랑 계약을 해야한다.만약 NHN이랑 계약을 한뒤 바꿀려 하면 굉장히 복잡한 과정을 다시 따라야한다.그래서 결제솔루션 회사가 나왔다.결제솔루션은 각 결제회사에 대한 api를 만들어놔서
28.Day 29)
카카오 지도를 이용해 보겠다카카오 뿐 아니라 나머지도 다 있다.키값 받고 map 그리기router.push 로 버튼을 클릭했을 때 페이지 이동을 하면 애러가 발생한다.하지만 a 태그로 페이지 이동을 하면 이상없이 동작한다.이것은 single-page applicatio
29.Day 30)
만료가 될 때마다 다시 로그인 해줘야하는 귀찮음이 생긴다.이때 referesh Tokken을 사용한다.로그인 할 때 accessToken 과 refreshToken을 두개 만든다.대신 만료시간이 다르다accessToken ( 30 ~ 120분 )refreshToken
30.Day 32 )
container 나 presenter로 페이지를 이동하고 싶으면이런식으로 쓰면 페이지 이동이 가능하다.render 시, 변수가 새로 만들어지는 상황함수가 새로 만들어지는 상황부모 리렌더시, 자식도 리렌더되는 상황을 막기위해 어떻게 해야하는지 알아보겠다.state는
31.Day 31)
기존 이미지 등록을 할 때 이미지를 담아뒀다가 뒤로가기를 하면,storage에는 이미지가 남아있지만, 게시글은 생기지 않는다.데이터가 낭비된다.해결스토리지에 저장하기 전에 파일을 볼수있는 Url을 만든다.그리고 등록하기 버튼을 클릭 할 때 연달아서 스토리지가서 Url가
32.Day 33 )
가비아, 고대디 도메인 가입하기수업때는 가비아AWSoptimistic-UI 는 낙관적 UI라고 불린다.예를 들어 좋아요 버튼을 누를때원래 요청을 보내면 백엔드에서 DB로 가서 데이터를 받아와야하지만요청보내고 성공 하겠다 가정하고 바로 cashState를 바꿔서 업데이트
33.Day 35) 스토리지에 정적파일을 배포해보자! => SSG / LB 2. 구입한 주소를 입력하면 접속되게 연결해줘! => DNS
터미널에 npx create-next-app class_build 쳐서 class_build 폴더 생성 react 17버전으로 다운그레이드 배포를 할 때는 y
34.Day 36) 1. 아니! HTTP 이건 못쓰겠다! => HTTPS / SSL / TLS 2. 악수를 3번 한다니? => 3-WAY-Handshake 3. 서버사이드 렌더링을 드디어 하는구나 => SSR
http 는 와이어샤크를 이용해 패킷을 보게되면 정보가 그대로 나오게 된다.hhtps 를 사용하면 데이터가 암호화되어 정보를 볼수가 없다.SYN => SYN + ACK => ACKip 흐름: 브라우저 => 백엔드서버 SYN백엔드서버 => 브라우저 SYN, ACK브라우저
35.Day 38) 마지막
큰서비스웹, 안드로이드, ios 따로 개발을 한다.웹: 앱이 있어도 반응형 웹을 만든다. (모바일, 태블릿)오프라인기능, 주소클릭하면 바탕화면에 아이콘 설치프로그레시브 웹앱을 사용하면, 핸드폰으로 쓰는 기능을 작동시킬 수 있다.웹중심의 회사다!웹 버전, 태블릿 버전,