리액트 버츄얼돔 라이프사이클 상태관리 Redux Mobx Recoil React-query 프레임워크 Next 환경세팅 pritter babel eslint

먼저 들어간 데이터가 나중에 나오는 것이 규칙이다.일상 생활에서 예를 들어보자면, 엘레베이터나 지하철 버스를 타고 내릴 때 늦게 들어간 사람이 먼저 나오게 되는 경우를 이 스택이라는 개념에 비유해볼 수 있다. 먼저 들어간 데이터가 먼저 나오는 것이 규칙이다.스택과의 반

자료구조와 알고리즘 > 기업 코테 대비를 위해 자료구조와 알고리즘에 대한 기본기를 알아보자 개요 프로그램은 자료구조와 알고리즘으로 이루어져있다. 자료구조는 데이터가 어떤 구조로 저장되고 어떻게 사용되는지를 나타낸다. 우리는 자료구조를 배우지 않았어도 프로그래밍을

자바스크립트가 동작되게 하려면 브라우저 자체에서 내장되어있는 JS 엔진이 필요하다. 이것이 동작하는 시간을 런타임이라고 하는데 런타임 하는 과정에서 코드를 한 줄 한 줄 읽고 번역해서 실행을 해주는 것이 인터프리터 라고 한다.자바스크립트는 가볍고 인터프리터를 이용해서

오류문구 : Document is not DefinedNext.js 프레임워크 기반으로 작업도중 위와 같은 오류문구가 계속 날 괴롭힌다😩 그래서 여러 방법 끝에 해결 해본 최선의 방법으로는이렇게 하니 해당 오류를 해결할 수 있었다.이런 이슈가 왜 Nextjs에서만 나

회고록을 쓰는 이유는 번아웃이 올 경우 정신 차리기 위함과 먼훗날 봤을 때 이 때의 나를 상기시키고 내가 얼마나 성장했는 지 체크하기 위한 목적으로 월마다 작성하려고 합니다.💭 1~2주차 : 프로젝트 개발 완료 시점이 얼마 안남은 상태에서, 새로운 Repo로 페이지를

배열 메서드 배열의 고차함수란 ? 함수를 반환하는 함수이다. 전달받은 인자를 통해서 함수의 특정한 연산이나 일을 수행한 다음 새로운 값을 리턴해준다. 이것을 함수 내부에서 사이드 이펙트를 없게 만들어 낸다는 뜻이다. 함수 내부에서는 외부에 상태를 변경하지 않으며,

Top 버튼을 클릭하면 맨 위로 올라가게 되는 UI를 구현해봤다. 먼저, 버튼 만들어주기 react-cions 라이브러리를 설치해서 위를 가리키는 화살표 그림을 가져왔다. https://react-icons.github.io/react-icons/ 검색바에 ar

🤔 왜 NextJS를 사용할까 ? 개발환경 / 코드분할 / 파일 기반 구조 등 다양한 기능들을 제공해준다. SEO 검색 엔진 최적화 (사용자들이 훨씬 더 쉽게 웹 서비스를 찾아갈 수 있도록 제공) 프론트엔드에 필요한 간단한 API 구성이 가능하다. 손쉬운 배포 시스템

취준 이후로는 처음 작성해보는 사이드 프로젝트 회고록 입니다. 사내에서 던져준 주제로 작업한 스터디용 프로젝트로 깃헙에 모든 코드를 오픈하기에는 조심스럽고 제가 작업한 코드의 일부만 공개하여 트레이드 오프(Trade-Off)와 기술 공유의 목적으로 포스팅 해볼까 합

가장 먼저 React를 실행하기 위해서는 아래 항목들이 필요합니다.node 설치 // package manage를 사용 하기 위해서 설치해줘야 합니다.TypeScript 사용하려면 Create TypeScript project 체크하고 생성하면 됩니다.WebpackPr

클라이언트 쪽에서 n초 간격으로 주기적으로 HTTP 요청을 보내는 것을 의미합니다.구현이 쉽습니다.HTTP는 단반향 통신이라 이 프로토콜이 계속해서 요청을 날리면 서버의 부담이 증가하게 됩니다.Polling을 작업을 위해 setInterval을 사용하여 데이터 요청을

업로드중..

DOMContentLoaded브라우저가 HTML을 전부 읽고 DOM 트리를 완성하는 즉시 발생.이미지 파일이나 스타일시트 등의 기타 자원은 기다리지 않는다 !load이미지, 스타일시트 등의 자원들이 모두 불러오는 것이 끝났을 때 발생.beforeunload/unload

이번에 스터디 하면서 Recoil이라는 상태관리를 도입하여 작업해봤다.처음 사용해본 상태관리인데 '이게 맞나?' 갸우뚱 하면서 작업하다보니 어느새 프로젝트도 완성도 있게 마무리 지을 수 있었다.TypescriptReactRecoilSCSS리코일은 그냥 yarn add

목표 : DOM 탐색 프로퍼티를 사용하여 DOM에 쉽게 접근하여 조작할 수 있습니다. 해당 elem라는 변수에 담긴 ID 형태의 요소에 접근할 수 있습니다.❗️❗️주의 : ID 는 고유의 값이어야 합니다.부모 타겟의 모든 자식 요소들을 반환해줍니다.더불어 가상클래스도

a라는 사람의 메시지를 받으려면 리프레시를 해줘야 그때 보인다.a라는 사람의 메시지를 리프레시를 해주지 않아도 즉시 보인다.ex) 카카오나 우버로 예를 들면, 만약 rest로 만들어진다면 손님은 드라이버가 어딨는지 궁굼하다. 그러면 rest 통신은 한방향 통신이기 때문

객체 프로퍼티중에 getter와 setter를 설정하는 구간이 있다.객체의 프로퍼티를 setter 로 설정하고 getter로 불러온다.프로토타입이란?부모에 정의되어있는 것을 자식이 가져다 쓴다.부모의 속성도 가져다 쓸 수 있는 것을 프로토타입의 의미라고 볼 수 있다.필

https://ko.javascript.info/ 4단원 객체에 대한 내용을 다룹니다.js에서는 총 7가지 자료형이 있다. 이 중 일곱 개는 오직 하나의 데이터만 담을 수 있어 '원시형' 이라고 한다.하지만 객체형은 원시형과 달리 다양한 데이터를 담을 수 있

이렇게 긴 문장의 if문을이렇게 삼항연산자를 사용해서 작성해볼 수 있다.이 코드는 (??) nullish 방법을 사용해서 단축시킬 수 있다.이 연산자는 👉 null이나 undefined인 경우 👈를 표현한다.여기서 default 파라미터값은 undefined 일 때