TIL

precamp에서는 HTML, CSS, JS를 배웠고 첫날에 비해 마지막날에 확실히 성장한 것을 느껴 스스로 만족하기도 했고 조금이지만 자신감이 붙기도 했다. Figma에서 만들어야할 페이지를 보면 어떻게 div를 분할하고 어떤 설정을 넣어야할지 알게 됐으니까!근데 이

컴포넌트(Component)란?react의 핵심. UI 또는 기능을 부품화해서 재사용 가능하게 하는 것큰 페이지 자체도 컴포넌트라 부를 수 있다즉, 컴포넌트에서는 import된 원본 컴포넌트만 수정하면 해당 컴포넌트를 적용중인 모든 사항이 수정되지만 태그를 복사하여 붙

터미널에서 pit pull origin master 로 사용이 가능하며 이전에 다운 받았던 디렉토리로 터미널의 현재 위치가 이동해있어야 한다.git stash >> 파일에 변경사항이 있을때 git commit(git에 파일 저장)을 수행하기 전에 임시저장하는 명령어gi

비동기: 서버에 요청을 보내고 바로 다음 일을 수행하는 방식으로 요청한 작업이 끝날때까지 기다리지 않음.즉, 동시에 여러 일을 할 때 사용한다Javascript는 기본적으로 동기방식을 사용하지만 JS의 라이브러리들은 대체적으로 비동기 방식으로 동작한다.ex) PC에서

router.push 명령어를 통해 이동할 페이지를 등록할 수 있고 상대주소를 적어 사용한다.정적라우팅은 하드코딩 느낌으로 이동할 페이지의 수만큼 페이지(폴더)를 만들어줘야하기에 페이지 수가 많아지면 문제가 발생한다동적라우팅은 폴더 이름을 대괄호 ' ' 로 감싸주는

Optional-Chaining= 조건부 랜더링을 좀 더 편하게 사용하기 위함 (data &&data.fetchProfile => data?.fetchProfile) 앞의 데이터가 참일때, 즉 조회될 때 뒤의 데이터를 랜더링data || data.fetchProfil

router.push 등 useRouter를 import해서 사용하는 메소드의 경우 연결된 모든 페이지에서 사용은 가능하지만 사용한 페이지의 위치에 따라 불러오는 정보가 달라지는 등 에러가 날 수도 있기 때문에 주의해서 사용해야 한다.반복문 (for 등)을 대체 가능한

복잡하게 연결하고 임포트(import)할 필요없이 한 페이지에 코드를 적으면 되는데 왜 container-presenter 패턴으로 나누어 사용할까 ?기본적으로는 가시성과 효율성의 증대가 목적이 되겠지만 효율성의 다른 측면에서 본다면 이렇게 나누어 만들어놓은 컴포넌트들

기존의 JS에서는 위와 같은 형태로 코드를 작성해도 문제가 없었다.그러나 이런식으로 코드를 짜게 되면 코드의 양이 방대해졌을 경우 예기치 못한 에러가 발생하게 되고 상황에 따라 여러 문제를 불러올 수 있다.TS는 이런 문제들을 방지하고 보완하기 위해 사용하는 것으로 J

타입 스크립트의 엄격한 적용.예를들어 props로 전달하는 인자에 interface를 통해 어떤 타입인지를 설정해줘야 하는 것을 말한다.이전 TIL에 적었던 '타입추론'이 적용되게 두지 않고 직접 적어줌으로써 혹여나 잘못될 수 있는 타입추론을 막고 협업시에도 혼선이 일

자식에서 부모 태그로 이벤트를 전파하는 것.\*\*전파: 이벤트를 클릭했을 때 다른 함수까지 이벤트가 전달 되는 것을 말한다.의도치 않은 결과를 가진 전파의 경우 currentTarget으로 이벤트 버블링 문제를 해결할 수 있다.currentTarget을 이용하면 이벤

ismodalvisibel state를 &&을 사용해주면 false일 때는 아예 && 뒤의 내용을 삭제하고 true일 때 다시 랜더링하기에 유저가 보기에는 값이 초기화 된 걸로 보인다.typescript 에서는 state에 초기값을 정하지 않으면 타입추론에 의해 설정되

input tag의 속성으로 value를 주게 되면 onChange 등의 이벤트로 별도의 속성을 주지 않는 이상 value의 값이 고정으로 보여진다. defaultValue도 해당 태그의 위치에 값을 보여주는 점은 value와 같지만 태그에 들어있는 값이 가변적이라는게

lifting state up div1의 state를 div2에 넘겨주기 위해서 div1의 state를 아예 부모 노드인 div로 끌어올려서 자식 노드(div1, div2)에게 props로 내려주는 것을 말한다. 이때 state뿐 아니라 값을 변하게 하는 setSt

객체/ 배열 복사시 원본 데이터도 바뀌는 이유는 객체나 배열을 할당 혹은 저장하는 경우 데이터를 배열의 주소에 저장하므로 배열 a에서 복사해온 배열 b의 데이터는 a의 '주소'만을 복사해온다.따라서 데이터 aaa가 아니라 주소(인덱스) 값을 공유하므로 주소 내부의 데이

쉽게 말해 '물건을 만들기 위한 설명서'생성한 class는 객체이며 따라서 메소드(함수)를 사용할 수 있고 JS에 내장된 객체는 내장 객체라고 한다.이런 객체들을 사용한 프로그래밍을 객체지향프로그래밍(OOP)라고 한다.비슷한 객체를 만드는 경우 공통으로 가지는 기능을

엑셀처럼 표(table)로 정리된 DB를 SQL DB라고 하며 만들어진 표의 행(row)에 데이터를 저장하는 방식이다. 또한 SQL DB에서는 여러 표를 만들어 놓고 표 간의 데이터를 이어서 관계를 맺어줄 수 있다.그렇기 때문에 관계형 데이터베이스(RDB)라고도 부르고

Cross Origin Resource Sharing Error교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는

겹치지 않는(겹칠 확률이 매우 적은) 개별 id를 생성해주는 라이브러리..map method 등의 반복문 형태로 뿌려지는 데이터에서 개별적으로 key값을 설정해야할 때 유용하다.홈페이지에서 파일을 업로드한다고 하면 해당 홈페이지 서버DB에 파일 자체를 저장한다고 생각하

검색 자체는 BE에서 실행되는 부분으로 FE에서는 데이터를 요청할 때 키워드만 추가해서 요청하면 검색이 가능하다.예를들어 홈페이지 게시물 목록에서 제목을 검색한다고 해보자.'오늘' 이라는 키워드로 검색하는 경우 별다른 설정을 하지 않으면 검색을 위한 API는 멍청하게도

함수형 컴포넌트 -> JSX 포함함수 -> JSX 미포함셋 모두 매개변수(parameter)로 이름에 상관없이 동작하기 때문에 작성자 임의로 선언해도 상관은 없지만 협업, 의사소통 등을 위해 관례로 굳어진 이름을 그대로 사용한다.gql은 위의 그림처럼 하나의 쿼리내에서

로그인시 BE Memory에 로그인 정보가 저장되며 이를 session라고 한다.Br에서 BE로 요청이 많아지면 HW의 성능 업그레이드(scale-up: 수직 확장)만으로는 처리 속도에 한계가 있다.많은 유저를 감당하기 위해서 스케일업뿐 아니라 BE 컴퓨터 자체를 복사

Cookie -> 영구저장(만료시간 있음)localStorage -> 영구저장sessionStorage -> 브라우저 종료시 데이터 삭제.함수 내부ClosureGlobalBr에서 서버에 요청을 하면 FE에서 pre-rendering을 통해 미리 내용을 그려본 후 Br에

useQuery: 컴포넌트가 열리면 바로 실행useApolloClient: 쿼리문을 원하는 시점에 실행하게끔 하고 받아온 결과를 내가 원하는 곳에 담을 수 있다. (axios와 비슷) 즉 다른 스테이트에 불러온 결과값을 담아서 사용할 수 있다.useLazyQuery:

브라우저 저장소인 cookie에 저장된 값이 BE에 API 요청할 때 자동으로 전송한다. 즉, 서버와 연결이 될 때마다 쿠키 데이터를 주고 받는다.물론 BE에서도 cookie로 전달이 가능하고보통 보안이 중요한 데이터를 전송할 때 사용하는 저장소이다.document.c

react-quillreact-draft-wysiwvg웹 에디터의 대표적 라이브러리들이고, 여기서는 react-quill을 다룬다.로 설치해주고를 통해 임포트해주어 사용한다.ReferenceError: document is not defined라는 에러는 html do

모든 카드사 등의 결제 방법을 하나하나 코딩할 수는 없으니 PG(Payment Gateway)사에서 만든 API를 사용한다그러나 PG사 또한 서로의 API가 다르기 때문에 이용하는 PG를 옮기려면 다시 코드를 짜고 적용시켜야 하는 문제가 발생했기 때문에 나온게 결제 솔

API를 사용하기 위한 appkey는 홈페이지 관리자 콘솔에서 소스 탭을 통해 확인할 수 있다따라서 API를 제공하는 업체에서는 애초에 처음 설정할 때 웹 도메인을 적으라 하는데 그 이유가 앱키를 탈취당할 위험을 방지하기 위험이다.API를 제공하는 업체에 등록된 도메인

Br에서 BE로 API를 요청할 때 부하를 분산하기 위해 LB(부하 분산기)를 통해 이용자가 제일 적게 scale-out된 BE서버에 요청하고 BE 에서는 샤딩을 통해 데이터를 분산 저장하는 DB에 데이터 등록 혹은 요청을 하는데 이때 요청한 API(데이터)에 따라 샤

Br의 FIleReader로 파일을 읽어내 가짜 URL을 부여한다. 상품 미리보기 등에 유용.즉, 스토리지에 올라가지 않게 하는것인데, 그 이유는 게시글 등록시 이미지를 등록하고 ‘등록’버튼으로 submit을 하지않은 경우외부 스토리지에는 파일이 올라가기에 성능, 비용

state 등의 변경으로 페이지 리랜더링 시 모든 자식 컴포넌트까지 전부 리랜더링을 하는데 이게 비효율적데이터가 변경되지않는 컴포넌트가 다시 랜더링되어 리소스 낭비를 막기 위해 사용하는 메모 기능위의 코드처럼 리액트로부터 임포트를 해온 다음 페이지를 메모로 감싸주기메모

낙관적 UI데이터 전송이 느린 경우, 실제 데이터가 서버에 도착하지 않았지만 먼저 출력되는 결과를 바꾼 후 데이터를 보낸다.다만 성공이 어느정도 보장된 데이터 전송에 관해 발생하는 이벤트ex) 게시글의 좋아요 클릭 -> UI를 먼저 1만큼 올려서 보여줌 -> 서버에 데

컴퓨터를 직접(물리적)으로 구매해서 서버 시스템을 복사 혹은 구축해 서버를 늘리는 방법을 말함서버실에서 서버컴퓨터를 비치해놓고 서버를 빌려주는 서비스Br-> LB -> (SSR의 여부에 따라) -> cloud storage 혹은 FE server 테스트코드(테스트 자동

FE server 구동을 위한 컴퓨터 한대를 빌리고 해당 컴퓨터에서 구동(yarn dev)을 24시간 유지.GCP -> computer engine -> VM 인스턴스 생성생성 후 해당 VM에서 yarn 구동을 위해 nodejs 부터 설치 (설치 시 참고 https&#

123