서론 실행 컨텍스트 글을 작성하며 제대로 설명하지 못하였던 개념인 Environment Record 내부에서 수행되는 호이스팅, 스코프 그리고 클로저에 대해 알아보도록 하겠습니다. 호이스팅 (hoisting) 호이스팅이란 변수와 함수의 메모리 공간을 선언 전에 미리

면접 준비 겸 자바스크립트의 기초 내용인 실행 컨텍스트, 호이스팅에대해 알아보도록 하겠습니다.실행 컨텍스트는 코드가 실행되기 위해 필요한 환경(조건이나 상태) 정보들을 모아놓은 객체입니다.실행 컨텍스트가 생성되는 시점은 일반적으로 매 함수 호출시에 생성됩니다. 그리고

서론 이 전에 작성 된 글을 이어서 이번엔 Redux Toolkit을 사용하여 코드를 다듬어보려고 합니다. 먼저 RTK라고도 불리는 Redux Toolkit에 대해 간략하게 알아보고 바로 코드를 수정해보겠습니다! > 이 글은 노마드코더의 Redux 강의로 학습하고

이 전 글에서 Redux에 대해 전반적으로 알아보았으니 이번 글에서는 한 번 직접 코드를 작성해보면서 알아보겠습니다.이 글의 코드는 노마드코더의 Redux 강의를 보고 학습하며 정리하였습니다.React환경에서 ToDo 기능을 만들면서 리덕스를 어떤식으로 활용할 수 있는

이전 회사에서 상태 관리 라이브러리로Recoil을 사용했었습니다. 깊게 사용하기보단 주로 전역 변수의 상태 관리를 위해 사용하였었는데 그 때 Redux가 아닌 Recoil을 사용했던 이유는 좀 더 사용방법이 간단하고, 단기간에 학습하여 적용하기가 쉽다는 점 때문이었죠.

객체 지향 프로그래밍 개발 공부를 하다보면 기초적인 개념으로 나오는 객체 지향 프로그래밍이라는 개념이 있다. 데이터에 대한 생각, 데이터 구조, 코드를 어떻게 정리하는지의 방법들이 제시되어있다고 보면 되는데 이번에 한 번 제대로 알아보고자 글을 쓰게됐다.우리는 실생

이전 글에서 테스트 코드가 무엇인지 왜 작성해야 하는지 알아보면서 Javascript에서 테스트 코드의 맛보기를 해보았다. 이번에는 React에서 컴포넌트를 테스팅하는 것을 알아보려고 한다.React에서 많이 알려진 테스팅 프레임워크, 라이브러리가 있는데 바로 Enzy

지금까지 사이드 프로젝트, 회사 프로젝트를 진행하면서 테스트 코드에 대해서는 작성해본적이 없다. 오로지 직접 동작해보거나 console.log를 통해 버그가 없는지 하나씩 확인하면서 작업했다. 그런데 이 방법은 시간적인 소요가 매우 컸고, 불편하였다. 그래서 이번 기회

React useEffect 와 생명주기 이번에 알아 볼 hook은 useEffect에 대해 알아보려고 한다. 하지만 그 전에 함수 컴포넌트에서 useEffect hook의 역할은 생명주기를 대체하는 hook이기에 먼저 생명 주기란 무엇인지 대해 알아보고, useEff

작년에 진행하였던 사이드 프로젝트인 Which Beach Search를 마무리하고 스타트업에 입사를 했었다.지금은 이직을 위한 포트폴리오를 작성중에 있는데 포트폴리오를 작성하다보니 이 프로젝트를 할 때 고민했던 부분과 해결 한 부분 그리고 느낀 점에 대해 정리를 하다보

React hook 알아보기 세 번째 hook은 useRef이다.많이 사용해보진 않았지만 내가 알고 있던 이 hook의 특징은 DOM요소에 접근해야할 때 사용하는 것으로만 알고 있지만 이번에 한 번 제대로 알아보고 가보자!먼저 DOM 노드에 접근하려면 구성 요소 내부에

리액트 사용하면서 가상돔에 대한 기초적인 부분을 들었던 것 같은데.. 생각해보려고 하면 잘 떠오르지 않아 글을 적으면서 이해를 해야겠다는 생각을 했다. 가상 돔(Virtual DOM)에 대해 한번 알아보즈아!먼저 가상 돔을 알아보기 전에 DOM에 대해 알아보고 가보자.

두 번째로 알아 볼 React hook은 바로 useMemo이다. useCallback과 같이 사용되기도 하는 이 hook에 대해서 알아보도록 하자! useMemo useMemo 리렌더링

리액트를 사용하면서 useState, useEffect, useRef등은 써보았지만 아직 제대로 사용해보지 못한 훅들이 많았다...그래서 이 참에 한 번 궁금했던 리액트의 hook몇 가지에 대해 알아보고자 한다.그 첫번째는 바로 useCallback이 되시겠다!컴포넌가

HTTP Method에는 클라이언트가 서버로 요청을 보내는 방법인 GET과 POST 두 가지 방식이 있다.나의 경우에는 보통 GET 만 주로 사용하였었는데 문득 POST는 언제 쓰는거지??라는 생각이 들었다.그래서 GET과 POST 마치 패트와 매트같은 두 녀석을 알아

REST란 무엇인가? Representational State Transfer(REST)는 API 작동 방식에 대한 조건을 부과하는 소프트웨어 아키텍처이다. REST 기반 아키텍처를 사용하여 대규모 고성능 통신을 안정적으로 지원할 수 있다. API 설계 시 REST 아

DOM 저장소라고도 불리며 웹 브라우저에서 제공하는 표준 Javascript API 이다.쿠키와 유사하지만 이보다 더 큰 용량으로 HTTP 헤더로 정보를 전송하지 않고 브라우저에 데이터를 저장할 수 있다.HTTP 요청은 상태를 가지고 있지 않기 때문에 브라우저에서 서버

브라우저 렌더링 원리 1. 브라우저(browser) 웹 브라우저는 현재 가장 많이 알려져 있는 구글의 크롬, 애플의 사파리, 모질라의 파이어폭스, 오페라 그리고 우리에겐 아주 친숙한 마이크로소프트의 익스플로러에서 엣지 등을 생각하면 된다. 2. 브라우저 주요 기능

포트폴리오를 만들면서 화면 스크롤을 구현하다가 useRef에 대한 에러를 만났고, 이를 해결하기 위해 열심히 구글링해서 찾은 해결 방법을 정리해보기로 한다.환경Next JS (v13.2.3)React (v18.2.0)Typescript (v4.9.5)styled-com

ES6 이전에는 배열의 요소를 변수에 할당하는 직접적인 방법이 없었다.ES6는 객체의 속성이나 배열의 요소를 개별 변수로 분해 할 수 있는 구조 분해 할당이라는 새로운 기능을 제공한다.React 사용자라면 useState사용 시 익숙한 구문일 것이다.할당 받는 변수의