Study

React의 핵심이라 불리는 컴포넌트(Component)는 UI를 부품화하여 재사용이 가능하게 할 수 있다. React 공식사이트에서는 나와있는 자료를 참고하자면 React가 사용자 정의 컴포넌트로 작성한 엘리먼트를 발견하면 JSX 어트리뷰트와 자식을 해당 컴포넌트에

React는 페이스북에서 만든 사용자 인터페이스를 구축하기 위해 효율적으로 유연하도록 만든 자바스크립트 기반의 라이브러리이며, "컴포넌트"라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI 구성을 돕는다.기존 전체 파일을 가져오는 방법 대신 React는 원하는

HTTP란 Hyper Text Transfer Protocol의 약자이며, 인터넷에서 데이터를 주고받을 수 있는 프로토콜이다. 예를들어 클라이언트(사용자)가 카카오톡으로 상대방에 이미지를 보내주는 것을 한다고 했을 때 이미지를 보내달라는 요청(Request)를 하면

"API(Application Programming Interface)는 컴퓨터나 컴퓨터 프로그램 사이의 연결이다. 일종의 소프트웨어 인터페이스이며 다른 종류의 소프트웨어에 서비스를 제공한다. 이러한 연결이나 인터페이스를 빌드하거나 사용하는 방법을 기술하는 문서나 표준

서버 컴퓨터의 작업이 끝날 때까지 기다린 후 다음 작업을 실행하는 통신이다.동기 실행 방식은 등록 요청을 하게 되면 등록 과정이 모두 완료될 때까지 기다려준 후 게시글 불러오기 과정이 실행되기 때문에 문제 없이 작업이 가능하다위에 이미지처럼 함수 기본식으로 선언할 시

React에서 리렌더링(Rerendering)을 하는 방식에 대해 공부해봤다. 먼저 setState는 비동기로 작동하는데 setState 동기로 작동하게 되면 값이 변경될 때 바로바로 렌더링을 하기 때문이고 마지막 값이 나오기 전까지는 선언되어있는 코드를 다 실행하고

Map은 반복문처럼 함수를 각각의 요소에 대해 한번씩 순서대로 불러 그 함수의 반환값으로 새로운 배열을 만든다.key: value 의 객체 형식으로 저장된다.배열의 원소를 일괄적으로 변형시킬 때 사용하기 좋다.Map의 기본 문법은 이미지와 같으며 subway라는 임의의

라우팅(Routing)이란 페이지간의 이동을 뜻하며, 라우팅에서도 정적 라우팅(static), 동적 라우팅(dynamic)이 있다.import Router from 'next/router'Next.js 에서 지원하는 기능이며, Router라는 기능을 import하여 사

Container와 Presenter 패턴은 하나의 컴포넌트를 유지보수 하기 쉽고 간편하게 하기 위한 분리한 폴더 패턴이다.Container: 컴포넌트의 Javascript 부분을 분리한 폴더Presenter: 컴포넌트의 UI 부분을 분리한 폴더각각 분류된 파일들이지만

이전 setState 포스팅setState는 함수가 실행될 때 코드마다 한줄 씩 바로 실행하지않고 임시저장공간에 저장했다가 마지막에 선언된 코드까지 실행된 후 함수가 끝나면 마지막 값을 실행하는 것이었는데 이를 해결하는 것이 prevState 이다.첫번째의 prev를

페이지네이션은 사용자가 과도한 스크롤 발생으로 인해 생기는 불편함을 방지하기 위해 콘텐츠를 여러 페이지로 나누어 이전 페이지와 다음 페이지 또는 특정 페이지로 이동할 수 있는 요소이다.가장 흔히 쓰이는 곳은 게시판같은 테이블 형태의 페이지등이 있다.한 페이지에 보여주고

오늘 React로 이미지 업로드를 하기 위해 React 훅 기능중 하나인 useRef를 배웠다.useRef를 사용하기 전엔 간단하게 Input type을 file로 선언하고 불러오면 되는 줄 알았지만 생각보다 복잡하고 이해하는데 좀 어려웠고 다른 데이터와는 다르게 이미

디바운싱과 쓰로틀링은 성능을 목적으로 자바스크립트의 이벤트를 제어하기 위해 사용되는 기법이다.마지막 호출이 발생한 후 일정 시간이 지날때까지 추가적 입력이 없을때 실행이 되며 이를 정리하자면 특정시간 이내, 추가 입력 없을시, 마지막 1회만 실행된다.디바운싱은 검색 기