code.camp 프론트엔드 07기

React는 JSX 사용이 필수가 아니지만, 대부분의 사람은 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 생각합니다. 또한 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해줍니다.출처 https:

📔 학습목표 React 컴포넌트 >> Class형 / 함수형 함수형 컴포넌트에서도 클래스형과 동일한 기능을? >> React-Hook 컴포넌트에서 사용하는 변수 >> State 왜 리액트를 사용해야 하는가? 프론트엔드 개발자가 사용하는 라이브러리 중에서도 가장

📔 학습목표데이터 전송방법 >> HTTP / API / Graphql / Rest데이터 전송실습 >> Postman / PlayGround지난 시간 포트폴리오 리뷰input 각각의 stateerror를 담는 stateinput창의 변경하는 변경함수들등록하기 버튼 함수

📔 학습목표 동기와 비동기방식 >> Asnyc - Await vscode에서 데이터전송 >> Apollo-Client/mutation 동기와 비동기방식 동기 : 서버 컴퓨터의 작업이 끝날 때까지 기다린 후 다음 작업을 실행하는 통신. 말 그대로 동시에 일어난

라우팅

6일차📔 학습목표실무적인 폴더구조     >>    container / Presenter컴포넌트 분리 및 데이터 전달    >>    props지난 시간 수업 코드리뷰freeboard_frontend 의 게시물을 등록하면,내가 등록한 게시물의 보드 페이지로 이동하는

📔 학습목표state의 동작원리    >>    SetState최신 데이터 다시 가져오기    >>    refetch목록에서 삭제하기    >>    key/index지난 시간 수업 코드리뷰container / presenter 부모 자식 관계 게시판 등록해서 버

📔 학습목표컴포넌트 재사용등록 컴포넌트를 수정에 재사용지난 시간 수업 코드리뷰백엔드에선 작성자 비밀번호 제목 내용이 다 포함되어야 요청이 된다.프론트에서 더 추가로 하고 싶으면 더 추가해도 됌!마지막에 내용이 입력이 되니까 onChangeContents 함수에서 위에

📔 학습목표안전한 Typescript기존의 javascript에 typescript 추가하자\-> 아예 바꾸는 게 아니라 중간중간 추가하는 거임지난 시간 수업 코드리뷰boardId를 넣으면 고유의 값이 들어감container에서 presenter까지 props dri

📔 학습목표API로 받는 데이터 타입은 ? >> graphql-codegen유틸리티 타입 >> Utility type협업하는데 규칙이 있어야지 >> Eslint / Prettier / Husky지난 시간 수업 코드리뷰게시글 수정할 때 비밀번호를 입력해야 수정이 된다

📔 3주차 학습목표 클릭 문제 >> Event-bubbling / Event - Delegation 이미 만들어졌다고? >> Library UI의 전체적인 구조를 잡아놓자 >> Layout 다른 페이지도 보여줘 >> Pagination / Infinite-Scrol

📔 학습목표알림창 >> Modal주소, 우편번호 >> React-Daum-PostcodesetState 기능 >> prevState지난 시간 수업 코드리뷰유튜브좋아요/ 싫어요댓글 (별)queries 에서 YoutubeUrl을 추가로 받고 싶다면?위처럼 추가해야 함!

📔 학습목표UI의 전체적인 구조 >> Layout모든 페이지에 동일한 CSS >> Global- style지난 시간 수업 코드리뷰주소 입력, 모달 위에 주소 입력등록하기 - 상세보기 - 수정하기구조 먼저 보기등록하기 부분(우편번호 검색)온클릭어드레스 서치는 모달창을

📔 학습목표다른 페이지도 보여줘 >> Paginationstate 나눠줘 >> Lifting-state-up지난 시간 수업 코드리뷰배너 영역, 레이아웃 잡기리액트 슬릭 깔아져있는지 패키지점 제이슨에서 확인!레이아웃 나눈거 참고리턴이 없으면 보이드스프레드 연산자{..

📔 학습목표객체와 배열이 복사가 이상해 >> Shallow-Copy /Deep-Copy스크롤 형태의 페이지네이션 만들자 >> infinite-Scroll지난 시간 수업 코드리뷰페이지네이션ㄱ\\프롭스점 리패치로 바꿔야한다.페이지네이션 나중에 다른 용도로 골라써야 되니

4주차 목표클래스 컴포넌트? >> class component프론트엔드와 백엔드의 전체 숲 >> achitecture백엔드 api 만들기 >> apollo-server / GRAPHQL이미지 업로드 >> Cloud-storage📔 학습목표클래스 컴포넌트 >> Cla

📔 학습목표 API >> Open-API / Public-API 데이터베이스? >> Database / ORM Node.js 활용해서 백엔드 서버 >> Node.js 오늘은 코드리뷰 없음! https (자물쇠) 보안적으로 안전하게 되있다 이런 뜻 http '주

📔 학습목표 CORS란? >> CORS Graphql-API이 이렇게 쉽게 만들어지다니 >> Graphql / Apollo-sever 백엔드 개발자가 없을 땐 >> Firebase / BASS (PASS,DASS,SASS, Backend as a servic

📔 학습목표 이미지 저장과정 >> Image- Process 이미지? 데이터베이스에 저장하면 안돼? >> Cloud-Storage 이미지 문제 >> Validation >지난 시간 포트폴리오 리뷰 레이아웃의 네비게이션 presenter 부분에 두 줄을 추가해

📔 학습목표검색을 이해하려면 다양한 DB를 알아야돼 >> Database검색결과를 페이지네이션과 연결 >> Search/pagination검색하기 버튼 없이 검색을 한다고? >> Debouncing/Throttiling지난 시간 포트폴리오 리뷰사진 등록하기 등록페

📔 학습목표REST와 Graphql 차이 >> Under-Fetching/Over-Fetching글로벌 스테이트? >> Recoil지난 시간 포트폴리오 리뷰게시판에 search 기능디바운싱리패치를 디바운스 안에서 처리카운트도 리패치를 해줘야 함 왜? 마지막페이지와

로그인의 역사 >> LoginJWT토큰 >> JWT로그린 인증토큰 어디에 저장? >> Recoil브라우저에 접속하게 되면 프론트에는 html,css,js,를 브라우저를 통해 보여줌 브라우저는 id/pw 태그값을 넣으면 메모리/ 디스크로 메모리세션 안에 로그인 만료시

next.js 렌더링? >> Diffing/ Hydration자바스크립트에도 이런것이? >> Closure먼저 실행해줘! >> HOC/HOF로그인 토큰 유지시키기권한분기를 어떻게 전환시키는지브라우저의 로컬 스토리지에 넣어놓을거임\\로컬스토리지에 넣으면 새로고침 해도 사

학습목표UseQuery를 axios처럼 사용할 수 있대 >> useApolloClient폼을 자동으로 >> React-Hook-FormValidation 라이브러리 >> Yup재사용을 위한 공통컴포넌트 >> Common-Componentjsx가 있으면 하이오더 컴포넌트

📔 6주차 학습목표const {}, const \[]원리 >> Destructuring타입 >> Generic웹 에디터 >> Web-Editor결제 API >> Iamport지도 >> Map📔 학습목표const {}, const \[]원리 (구조분해할당의 원리) >

📔 학습목표1.타입 >> Generic2\. 브라우저에 저장 >> cookie/localstorage/sessionstorage3\. 비회원 전용 장바구니 >> basketany 어떤 타입이든 다 됌.unknown 도 any처럼 다 되는 any보다 안정성을 더 중요

📔 학습목표웹 에디터 >> Web-Editor로컬스토리지 보안 >> Cross-Site-Script(XSS)하이드레이션 CSS >> Hydration-Issue웹 에디터를 wysiwyg (위즈위그) 라고 부른다대표적으로 많이 쓰이는 라이브러리들 (+toast-ui-e

📔 학습목표 결제 API >> Iamport 결제 시간? >> Advanced-Date-Issue setTimeout() >> EventLoop/TaskQueue Iamport pg사(payment gateway) NHN Nicepay KG이니시스 . . . 결

📔 학습목표지도 연동 >> Map싱글 페이지 어플리케이션? >> SPA-CSR /MPA-SSR콜백함수? >> callback/callback-Hell프로미스? >> Promise / Promise-Chain태스크큐의 종류 >> MacroTask/MicroTask구글

📔 7_week 학습목표 refreshToken?? >> RefreshToken graphql이 REST-API >> Graphql Async-await for문에서 쓰면 안 돼? ?? Promise.all 메모 >> Memoization 모바일 >> @Media

📔 학습목표 기존 업로드 방식은 비효율적이야 >> FileReader Async-await for문에서 쓰면 안된다고? >> Promise.all 내가 원할 때 이미지 불러오기 >> LazyLoad/PreLoad 업로드파일 프로세스 브라우저에서 플러스 이미지를

📔 학습목표 메모 >> Memoization 반응형 >> @Media 접속방법 Memoization : 따로 기록해두고 기록해둔거 가져다 쓸거야~ render시 , 변수가 새로 만들어지는 상황 함수가 새로 만들어지는 상황 부모가 리렌더시, 자식도 리렌더되는

📔 학습목표Optimistic-UI미리보기 서버사이드 렌더링 >> Open-Graph / SSR검색엔진최적화 서버사이드렌더링과의 관계 >> SEO요청보내고 (어차피 성공할거니까) 안 기다리고 바로 캐시 스테이트를 업데이트\-> 딜레이가 없다 (효과를 많이 볼수 있는

📔 8주차 학습목표배포를 위한 숲 >> cloud-provider테스트 코드 >> Jest/Cypress/TDD구입한 주소를 연결 >> DNSHTTP >> HTTPS/ SSL / TLS서버사이드렌더링 >> SSR📔 학습목표배포를 위한 숲 >> cloud-provid

📔 학습목표스토리지에 정적파일 배포해보자 > SSG/LB구입한 주소를 연결 >> DNSyarn start배포를 위한 명령\-> 쓰려면 최적화 과정을 거쳐야 함(얀 빌드를 먼저!)안빌드가 하고나면 얀 스타트,,아무튼 얀스타트랑 얀 빌드랑 같이 있으므로(뭔소리지)SSG

📔 학습목표HTTP 이건 못 쓰겠다 >> HTTPS/SSL/TLS악수를 3번 한다니? >> 3-WAY_Handshake서버사이드 렌더링을 드디어 하는구나 >> SSR클릭하면 날라가는 거를 패키지라고 함어디서 출발해서 어디로 도착하는지 주소임얼마만큼의 데이터 사이즈인

📔 학습목표1.도커 >> Docker클라우드 프론트만 글로벌시디엔 서비스여서 컨텐츠를 전송해주는 네크워크다전세계적으로 흩뿌려준다 내위치에서 제일 가까운데서 뿌려주는거라서 SSL인증서 설치해서 검증을 해줘야함썰티피케이트의 디폴트가 버지니아 북부간단히 말하면, 클라우드