브라우저 API 통신방법중 자주 사용하는 비동기 처리 방식에 대해서 알아보자! 동기와 비동기 1) 동기(Synchronous)란? 작업이 순차적으로 실행되는 방식이다. (순서 보장) 현재 작업이 끝나야 다음 작업을 실행할 수 있다. 결과를 즉시 확인할 수 있다. 2

immer란 리액트 상태관리 중 불변성을 유지하도록 하기위한 라이브러리이다. 리액트의 불변성이란 리액트가 컴포넌트를 정상적으로 렌더링시키기 위해 기존 상태 값을 유지시키면서, 새로운 상태 값을 추가하는 것을 의미한다. 아래와 같은 예제를 보자.상태를 변경하는 Butto

프론트엔드 개발자라면 많은 양의 데이터를 렌더링할때 브라우저가 멈춰버리는 현상을 종종 경험할 수 있다. 개인적으로 페이지네이션없이 많은 양의 데이터를 렌더링해서 편집하는 페이지는 좋지 않은 UI/UX 라고 생각하지만, 그래도 종종 다뤄야할 때가 있다. 이때 최적화를 어

리액트, Next를 처음 시작하면 알아야 할 중요한 개념이다. 개발을 하면서도 하이드레이션이 뭔가 느낌이 와닿지 않았다. 그래서 공부해보려고 한다! Hydration이란 사전적 의미로 수분공급이라고 한다. 처음에 수분공급이라는 말이 너무 문학적인 표현의 용어 같아서

데이터의 라이프사이클은 메모리 관리 및 성능에 영향을 끼치기 때문에 모든 언어에서 중요한 지식이다.개발자가 데이터의 라이프사이클 이해를 바탕으로 설계를 진행하고 개발해야 좋은 어플리케이션이 탄생한다. 컴포넌트의 라이프사이클이란 컴포넌트가 생성되고 초기화되며 사용된 뒤

개발자로서 Map을 활용한 렌더링 기법은 정말 자주 사용하는 기술이다. 사용법은 그리 어렵지 않으나, 주의해야할 점이 있고 이것에 대해서 자세히 알아보자! Javascript Map 배열의 요소를 순차적으로 돌며 콜백함수를 실행후 새로운 배열을 생성하는 자바스크립트 내장 함수이다. 함수 인자로는 콜백함수를 받는다. 사용예시 주의사항 참조형 타입 불변...

리액트를 개발하다 보면 종종 DOM에 직접 접근해야하는 경우가 발생한다. 이런 경우에 사용하는 Ref에 대해서 알아보자!리액트에서 ref는 DOM요소나 리액트 컴포넌트를 직접적으로 참조하기 위해 사용하는 속성이다. DOM의 속성과 내장 함수를 직접 사용하기위해 사용된다

웹브라우저에서 이벤트 요소는 유저와의 상호작용에서 뺄래야 뺼 수 없는 중요한 요소이다. 정말 정말 자주 사용하는 마우스, 키보드 이벤트 외에도 다양한 이벤트가 있고 적재 적소에 활용한다면 좋은 UI/UX 를 만들 수 있을것이다. 😎 이벤트란? 유저가 웹 브라우저에서

프론트엔드 개발자는 서비스의 특성에 따라 요구되는 렌더링을 잘 이해하고 구현할 수 있어야한다.

자바스크립트 엔진의 대한 이해로 SSE를 활용하여 브라우저 알림 서비스를 개발한 내용을 작성해보겠다!우선 SSE란 뭘까?쉽게 말하면 TCP 기반의 HTTP 프로토콜을 사용하여 Streaming API 통신을 통해 일정 시간동안 서버와의 연결을 유지하여 실시간으로 서버에

자바스크립트 엔진에 두번째 파트인 메모리힙에 대해서 알아보자!

자바스크립트 엔진를 내장한 브라우저는 개발자가 작성한 코드를 읽어 컴퓨터 언어로 해석하여 실행할 수 있는 환경을 가지고 있다. 대표적으로는 구글 크롬에 V8이 있다.본격적으로 시작하기 앞서,하나의 스레드 당 하나의 스택 메모리를 사용하는데 자바스크립트는 싱글 스레드 언

사용자가 브라우저를 통해 특정 사이트를 방문했을때 브라우저는 서버에서 필요한 데이터를 (정적파일 등) 서버에서 받아 화면에 보여준다. 이러한 정보의 통로인 브라우저의 구성요소와 구조에 대해서 공부해보자!주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등 유저가 사용하는 브

리액트는 컴포넌트들의 집합이다. 개인적으로 컴포넌트를 잘 설계하여 랜더링을 최소화 시키고 재사용 하는것이 🌸리액트 기술의 꽃🌸이라고 생각한다! 컴포넌트를 만드는 두 가지 방법 리액트에서 컴포넌트를 생성하는 방법에는 두가지가 있다. 하나는 클래스를 통해, 하나는

DDD

리액트와 노드는 직접적인 연관은 없지만, 프로젝트를 개발하는 데 필요한 주요 도구들이 Node.js를 사용하기에 개발에 있어 꼭 필수적인 요소가 되었다.주로 사용하는 개발 도구에는 1) 구 브라우저에서 지원하지 않는 자바스크립트 문법을 호환시켜주는 바벨2) 모듈화된 코

리액트를 다루는 기술의 책 1장에서는 리액트의 대표 컨셉과 중요한 특징을 다루고 있다. 여기서 제일 중요한 가상돔, Virtual Dom을 사용한 화면(Interface) 표현에 대해서 집중적으로 공부해보도록 하겠다! 🤗리액트 컨셉은 굉장히 단순하면서 터프하다. (완

넓게 탐색최단거리/ 땅따먹기/ 경로 탐색 등방문여부 필수재귀 X선입선출 큐 사용큐를 이용한 반복적인 형태로 구현깊게 탐색특정 조건을 만족하는 경로 탐색/ 백트래킹자기 자신을 호출하는 재귀 사용방문여부 필수후입선출 스택 사용

언젠가 자바 개발자로 이직 면접 중에 "제네릭 개념에 대해 설명해보세요." 라는 질문을 받았었다. 그때 당시 면접기출 문제를 달달 외워갔던터라, 개념도 모르고 대충 얼버무리며 대답했던 경험이 생각이 난다. 현재 타입스크립트를 작성하는 개발자로 또 다시 마주한 T....

신규 리액트 프로젝트를 시작하며 zero base에서부터 개발, 패키지매니저, 빌드, 배포라인까지 수많은 라이브러리중에 어떤 것을 적재적소로 사용할지 고민하며 팀원끼리 논의하는 시간을 갖기로 했다. 프로젝트의 특성마다 필요로하는 언어, 라이브러리의 스펙이 달라지며 이