코드캠프

시작~!

저는 아무것도 몰라요

통신 / API

동기? 비동기? 데이터를 처리하는 방식 > ## 동기(synchronous) 순서에 따라 진행하는 방식(A작업이 끝나야 B작업 수행 가능) > ## 비동기(Asynchronous) 요청을 보냈을 때 응답 상태와 상관없이 다음 동작 수행 가능 동시에 작업을 수행 할

라우터, 라우팅 개념 / 정적라우팅과 동적라우팅 / 조건부 연산자의 사용(삼항연산자, 논리연산자) / grpahql vsCode시행 시 필요한 코드

폴더 구조화(container/presenter 중심)

setState 작동원리 / props emotion에 주기 / map / refetch

컴포넌트의 재사용

TypeScript(타입스크립트) / default value(기본값)

타입스크립트는 항상 받는쪽이 중심!!!!!!!!!!!!!!!!!!!!!!!!주는쪽 컴포넌트에서 Props를 넘길 때 객체가 만들어짐.

모달/prev State

이벤트 버블링 라이브러리(다양한 라이브러리를 쓰는 이유)

레이아웃 / 글로벌스타일 / 캐러셀

✍페이지네이션 >💡페이지 번호를 클릭해서 이동하는 방식의 페이지 처리방법 (게시판 형태에서 가장 많이 쓰임) 📌`페이지네이션 구성단계` >1. fetchBoardsAPI 활용하여 게시글 목록 불러오기 > 2. 페이지 클릭시 게시글 목록 데이터 다시 불러오기(r

React의 데이터 흐름 : ☑️ 상위컴포넌트 ➡ 하위컴포넌트 하향식/단방향 데이터 흐름 자식컴포넌트1에서 자식컴포넌트2로 전달하려면?➡ 자식컴포넌트1에서 자식컴포넌트2로 props 불가💡자식컴포넌트1에서 부모컴포넌트로 state와 setState를 넘긴후 다시 pr

얕은 복사(Shallow Copy)깊은 복사(Deep Copy)복사면 복사지 무슨 차이일까? 😡😡보통 이런 식으로 데이터가 복사되고, 복사본을 바꿀 경우 원본의 값은 변화없음.그런데 만약에 객체를 이런 식으로 복사한다면?💡객체와 배열의 경우는 값 자체가 바뀌는 것

댓글 수정 > 1. graphql에서 게시글 목록을 query 한다. >2. 배열이 전부 false인 변수를 state에 담는다. >3. 수정하기 버튼을 눌렀을 때(event.target.id)의 state값이 true로 바뀌도록 한다. >4. map으로 뿌려준

class는 객체이자 물건 만드는 설명서class에서는 함수와 변수를 사용할 때 function / let / const 등을 사용하지 않음ex)💡 또한, class에서는 상속기능이라는 것이 있다(extends)extends는 기능을 활용할 수 있도록 적는 것(imp

오픈 API = Public API누구든지 사용할 수 있도록 공개된 API사이트 주소: https://github.com/public-apis/public-apis1) Auth ApiKey : 키가 필요함No : 바로 사용 가능2) HTTPSYES: 보안이 강

백엔드 서버 구축 >우리가 부여받은 데이터베이스에 table도 넣고 데이터도 넣기 위한 백엔드 서버가 구축되어야함. > 백엔드 서버를 구축하기 위해서는 먼저 데이터와 테이블을 넣는 작업을 도와주는 typeORM을 설치 백엔드 서버 구축을 위한 새 폴더 만들기 `

방식은 똑같지만 return이 되냐 안되냐의 차이💡 return 안하고 state에 저장만 할꺼면 foreach의 성능이 낫다.교차된 상태에서 데이터를 쉐어링 해줄 수 있는가?YES or Noaaa.com에서 mystic.com 백엔드 API를 받아오려면 백엔드에서

프론트엔드 개발자가 백엔드 없이 데이터를 Firebase에 직접 넣을 수 있도록 하는 것https://firebase.google.comyarn add firebase 를 한 뒤에 위와 같이 Config를 넣고 export하여 필요한 곳에서 import 할 수

이 그림은 이미지를 업로드하기 위해, 브라우저와 프론트엔드서버, 백엔드서버, DB, 그리고 스토리지라는 공간에서의 데이터가 이동하는 그림이다.프론트엔드 백엔드(API) 요청 ➡ 백엔드 ➡ 파일전송 ➡ Storage ➡ 이미지 주소 ➡ 백엔드➡ 프론트엔드 ➡ 이미지 주

테이블 풀스캔Browser에서 검색을 요청하면 Back-end에서 DB 내부의 수 많은 Data 들 속에서 요청받은 keyword를 가지고 full-scan 한다. ➡ 너무 느림토크나이징(Tokenizing)문장을 단어 단위로 쪼개는 것 (단어 = 토큰) 역 인덱스 방

글로벌스테이트(Global state) > 하나의 state가 여러 페이지에서 필요한 경우, 매번 props로 나눠주기 번거롭기 때문에 여러 컴포넌트에 사용되는 Global State가 필요함 store에 name이라는 state를 저장해두고 필요한 컴포넌트에

☑️ 로그인에 대해 알기 위해서는 우선 `인증과 인가`에 대한 개념을 알아야 한다. 💡Authentication(인증) >로그인을 해서 저장소로부터 토큰을 받아오는 과정 > 💡Authorization(인가) > 세션 아이디를 보내서 정보를 받아오는 과정 ✍JW

프로그래머스 문제를 풀면서 이상한 외계어 한줄로 알고리즘이 풀리면 댓글에 사람들이 정규식, 정규표현식 이런말을 썼었는데, 이게 대체 뭔 소리인가 했다. 배워보니 이제야 알겠다.(아직 활용은 어렵다)/ 조건 /.test("검사하고 싶은 것")보통 검증할 때 include

기본적으로 새로고침을 하거나 재접속을 하게 되면 리렌더링이 된다. 그 말은 브라우저에서 html, css, javascript를 새롭게 다운로드 받아서 그려지기 때문에 기존 데이터는 전부 초기화되게 된다.그럼 저번에 배웠던 accessToken이 초기화가 안되게 하려면

권한분기 > 당연한 말이지만 모든 사이트에는 각자의 권한이 있다. 로그인/비로그인, 관리자, 판매자 등등 다양한 사람들이 사용할 수 있는 권한이 부여되어 있음. 권한분기를 진행하기 위해선 필요한 사전지식이 있는 데 그것이 바로 스택큐 이다 스택 > 출입구가 하나이기

24일차 배운 내용들(HoF,useApolloClient / react-hook-from,yup)을 나눠서 작성HoF(Higher order Function)useApolloClient react-hook-formyupHOC와 거의 비슷하지만 리턴 컴포넌트를 하면 Ho

react-hook-form > 우리는 이전까지 state를 직접 만들고 onchange함수도 일일이 만들어서 바인딩해주었음. 그러나, 폼 라이브러리를 이용하면 더이상 이러한 코딩을 하지 않아도 된다. 폼 라이브러리에는 react-form, redux-from, re

이런 경우에는 const name = child.nameconst age = child.ageconst school = child.school 로 name, age, school 이라는 변수를 생성할 수 있음.그러나, 변수가 많다면 이런 일은 너무 어렵기 때문에💡비구

📙 generic을 사용하면, 인자에 들어오는 타입을 그대로 사용해야한다.arg가 boolean타입으로 들어갈 땐 boolean.arg가 string 타입으로 들어갈 땐 stringarg가 number 타입으로 들어갈 땐 number로 나오는 것을 확인할 수 있다.

📌 장바구니 담기📌 장바구니 담기취소❗useEffect를 안쓰면 새로고침을 하면 다시 눌렀던것이 원상복귀되니 사용하도록하자❗(isCancel로 삼항연산자 사용중)

웹에디터(React-quill) > textarea의 단점을 보완해서 나온 라이브러리 docs: https://www.npmjs.com/package/react-quill 사용방법

다른 사이트의 취약점을 노려 Javascript와 HTML로 악의적 코드를 웹 브라우저에 심고 사용자 접속 시 그 악성 코드가 실행되도록 하는 것을 크로스 사이트 스크립트(XSS)라고 한다.예시onerror는 img태그를 정상적으로 불러오지 못했을 때 실행되는 요소이를

포인트를 충전하는 전체적인 과정사용자가 브라우저에서 충전하기 버튼 클릭충전하기 창에서 원하는 금액을 선택하고 결제 진행개인 결제수단(신용카드 / 카카오페이 등)에서 빠져나간 금액만큼 사용자의 포인트 증가카드사각각의 카드사마다 결제 시스템이 다르고 지원하는 방법이 다름그

AccessToken의 만료 기한을 대체하여 새롭게 받는 AccessToken을 RefreshToken이라 한다.RefreshToken의 기한은 2주~ 1개월 정도의 긴 만료기한보안이 강한 Cookie에 담는다.httpOnly , secure와 같은 옵션을 설정하여 보

new FileReader()new FileReader() 기능은 파일 객체를 이용해 내용을 읽고 사용자 컴퓨터에 저장하는 것을 가능하게 해주는 브라우저에서 지원해주는 기능. new FileReader() 를 사용하면 new FileReader() 에 있는 기능 사용

최적화를 위해 사용하는 것으로 이전에 계산한 값을 메모리에 저장하여 중복적인 계산을 제거함. = 불필요한 렌더링 제거사용법부모 컴포넌트에서 자식컴포넌트를 불러올 때 memo 라는 기능을 사용한다.\-> 이렇게 자식컴포넌트 이름에 memo로 감싸면 불필요한 렌더링이 제거

속이기즉, 거의 성공 확률이 99%인 Query, Mutation와 같은 요청에 마치 완료된 것 처럼 미리 보여줌성공확률이 높거나, 큰 영향이 없는 요청에 적용 ex) 좋아요코드 예시(좋아요)오픈그래프는 어떤 HTML 문서를 쉽게 표시하기 위해서메타정보에 해당하는 제목

배포 기초 > SSG & SSR Build 터미널에서 yarn build 실행 -> 빌드 된 프로덕션 코드가 .next 폴더에 저장 빌드 방식 1) SSG 방식(정적 라우팅) `build:ssg` 빌드를 할 때 페이지별로 HTML을 생성하고 요청 받을 때마다 미

무제한 용량을 제공하는 온라인 스토리지 서비스보통 SSG방식(정적라우팅) 데이터를 받을 때 사용아마존 서버 내 일부 영역을 가상 컴퓨터 형태로 임대하는 서비스클라이언트 동적 배포시 사용EC2가 트래픽을 안정적으로 처리할 수 있도록 하는 부하 분산 서비스아마존에서 제공하

1) Next.js 프로젝트 빌드 \-build 입력하면 SSR 빌드, build:ssg를 입력하면 SSG 빌드build:ssg 를 하면 아래와 같이 out 폴더 생성, 해당 폴더 에서 SSG 배포 시 사용되는 폴더와 파일 확인 가능이 때 next.config.j

Single Page Application한 개의 Page로 구성된 어플리케이션웹 애플리케이션에 필요한 모든 정적 리소스를 최초 한번에 다운로드이후, 새로운 페이지 요청이 있을 경우, 페이지 갱신에 필요한 데이터만 전달받아 페이지를 갱신한다.SPA를 CSR(Client

부팅 등 운영체제의 핵심 기능을 공유하는 가상머신(배포와 개발을 편하게, 협업을 편하게 하기위해 사용)개발 환경 요소들이 설치된 모습을 이미지로 저장, 저장한 이미지를 클라우드에 올립니다. 이미지들이 서로 연결되서 동작하는 설정을 문서로 저장WSL(Window Serv