코드캠프 TIL

드디어 velog 포스팅 1일차! TIL도 1일차! 앞으로 잘부탁해 velog야 오늘 배운 것들을 정리해보고자 한다! 오늘의 알고리즘 풀이 배열의 선언과 할당 배열의 기능 객체의 선언과 할당 JSX JSX란 자바스크립트의 확장 문법으로 react로 개발 시 사

드디어 2일차 :) 오늘은 react의 핵심 Component, State에 대해서 배웠다! React 란 javascript를 기반으로 한 라이브러리이다. 최근에는 사용자가 급속도로 증가하고 그 규모가 커지면서 프레임워크라고 인정되는 추세이다. react는 컴포넌

모든 상태 코드(Status Code)는 각각 그에 대응되는 상태 메시지(Status Message)를 갖고 있습니다.예를 들어, 200번은 OK, 404번은 Not Found라는 상태 메시지를 갖고 있습니다. 각 상태 코드의 의미를 모두 외우기는 힘들기 때문에 이러한

비동기 실행 fetch 함수와 비동기 실행 (1) (response) ⇒ response.text() (2) (result) ⇒ { console.log(result); } fetch 함수가 리퀘스트를 보내고, 서버의 리스폰스를 받게 되이 콜백들이 순서대로 실행되는

라우팅이랑 서버에서 클라이언트에 내가 불러오고자 하는 URL을 불러오는 것이다.reloae(), replace(), pathname: 현재 나의 주소를 알려준다게시글의 수가 많아지면 폴더의 수가 많아지므로 비효율적인 방법이다.기존에는 서버로부터 해당 URL에 대한 데이

0''falsenullundefineddata 값이 false일 경우 리턴하도록 사용data의 값이 null 혹은 undefined 일 때 리턴하도록 할 때 사용React의 가장 기본적인 디자인 패턴으로 기존의 싱글파일 컴포넌트 형태로 사용 시 컴포넌트내부에 ui와 로

forEach와 비슷하게 배열의 요소를 하나씩 살펴보면서 반복 작업을 하는 메소드. 단, 첫 번째 아규먼트로 전달하는 콜백 함수가 매번 리턴하는 값들을 모아서 새로운 배열을 만들어 리턴하는 특징이 있다.filter 메소드는 배열의 요소를 하나씩 살펴보면서 콜백함수가 리

컴포넌트 재사용성 자주 쓰는 function 들은 src의 common/libraries 에 넣어준다. 하나의 컴포넌트를 만들어서 재사용하게되면 기능이 다른 페이지에서는 사용할 수 없게 된다. 이럴 때 props로 넘겨주면 오류를 피할 수 있다. /boards/n

updateBoard defaultValue자바스크립트의 타입을 강제시키는 언어기존에 자바스크립트는 변수에 타입에 관계 없이 선언, 할당이 가능하였는데타입스크립트에서는 변수 type이 다를 경우 재할당할 수 없다.typescript를 해야하는 경우 yarn add ty

early exit pattern API 타입스크립트 API를 받아올 때도 interface로 타입 지정이 필요하고 실제로 Rest API를 사용하면 하나하나 만들어줘야하지만 GraphQL을 사용하면 GRAPHQL-CODEGEN으로 API 응답 데이터를 불러올 수 있

부모 컴포넌트에서 자식 컴포넌트로 state를 넘겨준 후 자식 컴포넌트에서 바뀐 state를 다시 부모컴포넌트에서 바꿔주고 싶을 경우 setState를 자식에게 넘겨주어 자식 컴포넌트에서 setState를 해주면 부모 컴포넌트의 state를 변경해 줄 수 있다.prop

일반적으로 우리가 알고있는 library 속성과 다르기때문에 잘 찾아서 해야한다. props 참고해서 사용하기!이 방법은 모달창 안의 내용을 그저 숨김처리 해주는 것이기 때문에 내부컨텐츠에는 변경이 없다.때문에 수정 중인 내용이 그대로 보여지고 입력이 완료된 후 다시

레이아웃 구조 글로벌 스타일 캐러셀 이미지

페이지네이션 이벤트 버블링

우리가 javascript로 스크롤 애니메이션을 구현할 경우 getBoundingClientRect() 메서드를 많이 사용하게된다.getBoundingClientRect() 메서드는 실제 element의 offset을 측정해주는데 이 메서드를 사용할 경우 메인스레드에서

객체/배열 복사(...Spread연산자) 한 객체를 다른 객체에 할당해주었을 때 기존의 객체 값을 변경할 경우 할당된 다른 객체의 값도 변하게 된다. 할당된 다른 객체의 값이 변경되지 않도록 하려면 어떻게 해야할까? 이렇게 만들어주면 된다. 하지만 객체의 키가 늘어

컴포넌트 생명주기 클래스란? 컴포넌트를 만드는 설명서 클래스 안에 있는 함수들은 메서드라고 부른다. 객체지향프로그래밍(OOP) this 클래스나 객체에 포함되지 않으면 기본적으로 window를 지칭한다. 클래스 연산자에서 함수(메서드)를 연결해줄 경우 이런 식으

User가 Brower를 열면 front에서 html, css, js를 불러와 화면을 그려와주고 back의 해당하는 API에 useQuery하여 data를 요청하면 DB에서 data를 가져와 불러와준다.Oracle, MySQL, PostGresFirebase, Mong

성능 최적화를 위해서 데이터를 불러올 때 병렬처리 해주는 것이 좋다.foreach나 map을 사용하며 기존 el이 필요하지않다면 foreach문을 사용해준다.사진은 주소로 접근하며 브라우저에서 파일을 백엔드에 전송하면 스토리지에서 주소를 파일형식으로 백엔드에 전달하며

검색을 시도할 때 데이터베이스를 모두 검증하는 full scan 방식은 로딩이 느려질 수 있는 단점이 있다.규모가 커진다면 이러한 단점을 보완하기 위하여Elastic Search -> 역인덱스하여 키워드 저장, 키워드 검색!자주 쓰는 것들은 Redis에서 검색로그를

graphQL은 restAPI의 오버페칭,언더페칭 문제를 해결했다./\\w+@\\w+.\\w+/ .test('bbb@bbb.com')\\ escapew 문자열w+ 한 개 이상의 문자열/^\\d{3}-\\d{3,4}-\\d{4}$/.test('010-1234-5678')

로그인 이미지업로드 배포는 내용의 흐름이 있기 때문에 정말 중요하다!!! 로그인 프로세스 프론트엔드에서 html,css,js를 가져와 브라우저에 그려준 후 사용자가 데이터를 입력하면 백엔드로 데이터가 이동하고 데이터베이스에 데이터가 저장되며 저장된 데이터는 이후에 사용

graphQL useQuery를 사용하면 화면이 그려지면 화면 안에 자동으로 요청하여 가져온다.axios는 요청하면 결과값을 result에 넣어서 받아와서 화면이 그려지면 데이터를 그려준다.graphQL방식이 편리할 수 있으나 상황에 따라서 axios 방식이 필요한 경

객체의 구조분해할당배열에 구조분해할당을 해주고 싶을 때에는 순서로 해주면된다!

브라우저 저장소에 임시저장하는 공간(오늘 본 상품) 웹 에디터 결제 프로세스 지도(카카오맵, 구글맵, 네이버맵) 우리는 카카오맵 사용! REST 파라미터 money와 hobby를 지우고 싶을 때? 그러나 원본이 변경되기 때문에 좋은 방법이 아니다! 브라우저 저장

(카드결제, 계좌이체, 무통장입금(가상계좌))가상 계좌에 입금 / 환불 시 데이터베이스에 계좌를 입력받아 환불결제 업체/API도 있어서 계약하면 자동화 가능결제 솔루션(아임포트, 부트페이)payment gateway(NHN, 나이스페이, KG이니시스)결제가 완료되면 해

SPA, Single Page Application -> react, next ...router로 같은 페이지 안에서 영역 이동하여 보여준다app.tsx에서 지도 불러오기(지도 미리 다운받아서 그려준 후 영역 이동시 보이도록) -> 지도가 안 들어간 페이지에서도 지도를

stateful / statelessscaleup / scaleoutRoundRobin) 백엔드에 나누어진 데이터를 나누어진 백엔드를 돌면서 확인최소연결(least connection)) 데이터가 제일 적은 백엔드에 데이터를 보내준다.Partisioning,,, 데이터

https://domain.gabia.com/regist/today_domainhttps://cloud.google.com/freegraphql vs REST-API기존 REST-APIREADaxios.get(api주소)put, post, delete

IDCDevOps 개발자가 배포운영까지!하지만 서비스가 커질수록 DevOps팀이 분리되어진다.HTTP(HTML, HyperTextMarkupLanguage)JSX, Javascript XML, Extensible MarkupLanuageSMTPFTP scrapping

프로젝트를 하다 보면 상태에 대한 부분들이 전부 URL 값 파라미터에 반영되어야하는 경우가 있다.이렇게 해야하는 이유는 1\. 모든 사용자의 동작들이 URL로 반영이 되어야지만 내가 보고 있는 페이지 그대로 누군가에게 URL을 공유할때 받는사람도 똑같은 페이지의 똑같은

이미지 미리보기 업로드 성능 렌더링 성능

dynamic import