당신의 이야기에 주목할께요

useEffect는 React의 함수형 컴포넌트에서 side Effect를 수행하기 위해 사용되는 훅이다. 기본적으로 컴포넌트의 첫 번째 렌더링 이후에 실행되며, 그 이후의 모든 업데이트에서 수행된다. 두번째 인수인 의존성 배열에 값을 넣으면 이 값이 변경될 때만 재실행된다.  의존성 배열에 객체를 넣으면 객체의 값이 똑같더라도 계속 재실행된다. 객체의 참조값을 추적하기 때문이다. 따라서 매번 새로운 객체를 생성하므로 useEffect는 매번 실행된다. 이를 해결하기 위해서는 객체의 특정 속성을 의존성 배열을 넣는다. import React, { useState, useEffect } from 'react';function ExampleComponent() { const [data, setData] =..

React는 컴포넌트로 이루어져 있기 때문에, 개인적으로는 파일 구조도 중요하다고 생각을 했다. 정리를 해놓고 만들지 않으면 프로젝트 중반 이후로 엄청 꼬일 수도 있다. 그래서 나는 기본적인 파일 구조를 컴포넌트/페이지로 분리하였다.  그리고 그 외 자주 쓰는 함수 들은 utils에 그리고 페이지 스타일은 styles 폴더를 따로 만들어주었다. 이렇게 만들어줌으로써, 페이지 단위로 이슈 확인이나 개발 진척도를 확인하기가 좋은 것 같다.

- Axios와 Fetch, 나의 선택은? 데이터를 API 요청으로 받을 시간이 왔다.  Axios를 사용한 기억이 있는데, fetch가 있다고 한다. 둘 중에 뭐를 사용하면 좋을까? 아무래도 API 요청은 핵심적인 기능이고 자주 사용하다보니 잘 선택하고 싶다. 일단 둘을 비교해보자.기능/특성fetchaxios설치 필요 여부브라우저 내장별도 설치 필요기본 기능네트워크 요청 기능만 제공JSON 파싱, 상태 코드 처리, 요청 취소 등 다양한 기능 포함에러 핸들링 네트워크 에러만 캐치, 상태 코드 에러 직접처리 필요모든 에러 자동 처리요청 취소AbortController 사용기본 제공응답 데이터 변화수동으로 변환(ex. response.json())자동변환(JSON 데이터) fetch는 브라우저 내장이 가장 ..

프로젝트를 진행할 때, CSR을 할 지 SSR을 할 지 고민을 한 적이 있다. CSR은 클라이언트 사이드 렌더링으로서 서버로부터 빈 html 파일, css, 자바스크립트를 받은 후 클라이언트에서 렌더링을 하는 것을 말한다. 첫 로딩 시간이 느릴 수가 있고, 검색 엔진이 자바스크립트를 실행하지 못하는 경우 SEO를 하기가 힘든 단점이 있다.  SSR은 서버 사이드 렌더링으로 서버에서 렌더링을 하여 페이지를 완성하여 최소한 자바스크립트 파일과 함께 전달하는 방식이다. 브라우저는 이 HTML을 즉시 실행할 수 있다. SSR은 첫 로딩 시간이 빠른 장점이 있다. 그리고 완성된 HTML 파일이 있으므로 SEO에도 강점을 가지고 있다. 하지만 요청이 있을 때마다 서버로부터 HTML 페이지를 받아야 하므로 서버의 부..

목표 : 브라우저의 동작 원리를 이해한다. 내가 작성한 html, css, javascript 코드는 어떻게 사용되어 지는 것일까?  내용 : 사용자가 주소를 입력하여 페이지를 요청하고, 서버로 받은 응답을 브라우저에 렌더링 한다.  브라우저는 여러 단계의 레이어로 구성되어 있다. 사용자 인터페이스, 브라우저 엔진, 렌더링 엔진, 네트워킹, 자바스크립트 인터프리터, UI 벡엔드가 있다. 순서는 다음과 같다. 1. 주소창과 같은 사용자 인터페이스2. 사용자 인터페이스와 렌더링 엔진을 연결하는 브라우저 엔징3. 렌더링 엔진4. 통신/자바스크립트 해석기/ UI 벡엔드를 통해 자바스크립트를 해석하고 렌더링 트리를 그려준다.  렌더링 엔진은 우리 어플리케이션이 직접 동작하는 레이어인 만큼 자세히 보도록 한다.  ..

프로토타입은 많이 들었던 개념이지만, 두루뭉술한 느낌으로 알고있었다. 프로토타입을 많이 본 곳은 MDN 사이트이다. 배열에 원하는 기능을 수행하는 메서드를 찾기 위해 아래 사진에서 보여지는 것을 많이 보았던 것 같다.  자바스크립트의 프로토타입은 객체의 상속을 구현할 때 사용되어진다.자바스크립트의 모든 객체는 다른 객체로부터 상속을 받을 수 있고, 프로토타입 체인 이라는 것을 통해 상위 프로토타입 객체로 올라가면서 원하는 프로퍼티나 메서드를 찾는다.   function Person(name, age) { this.name = name; this.age = age;}Person.prototype.greet = function() { console.log(`Hello, my name is ${this...

Callback 함수 한 줄 정의 : 다른 함수에 인자로 전달되어 특정 작업이 완료된 후 호출되는 함수 ■ 콜백함수의 작동 원리 1. 함수 호출 : 비동기 작업을 수행하는 함수가 호출됨, 이 함수는 콜백 함수를 인자로 받음.2. 비동기 작업 수행 : 함수는 비동기 작업(예: 타이머 설정, 네트워크 요청 등)을 시작함. 3. 태스크 큐에 콜백 함수 추가 : 비동기 작업이 완료되면 콜백 함수가 태스크 큐에 추가됨.4. 이벤트 루프 : 호출 스택이 비어 있으면 이벤트 루프가 태스크 큐에서 콜백 함수를 꺼내 호출 스택에 추가하고 실행함.  예제 : let button = document.getElementById("button");button.addEventListener("click", function () ..

▒ 클로저란. 자바스크립트의 함수가 자신이 선언된 환경에서의 변수들을 기억하고, 그 환겨에 접근할 수 있는 기능을 말한다. 쉽게 말해, 내부 함수가 외부 함수의 변수에 접근할 수 있는 것. ▒ 클로저를 사용 하는 이유.▷ 데이터 캡슐한 → 외부에서 의도치 않게 변경할 수 없도록 보호 ▷ 상태 유지 → 함수 호출간에 상태를 유지 할 수 있다.  let l0 = 'l0';function fn2(){ let l2 = 'l2'; console.log(l0, l1, l2);}function fn1(){ let l1 = 'l1'; console.log(l0, l1); fn2(); // 어디에서 호출했냐에 따라 접근할 수 있는 유효 범위가 달라진다면 동적 스코프 // 자바스크립트는 ..

const는 상수를 선얼할 때 사용하는 한정사이다. 그렇다면 const [number, setNumber ] = useState(0); 같은 형태로 useState를 사용하는데, 이 때, number은 어떻게 변경이 되는걸까?  setNumber로 number 값이 변경이 되는 것이 궁금해졌다. const [number, setNumber] = useState(0); 에서 'const'는 변수 'const'와 'setCount'가 재 할당될 수 없음을 보장한다. 하지만 setCount 함수는 상태 값을 변경하는 역할을 하며 count 변수의 참조는 변하지 않지만, count의 값을 변경이 된다.  왜 변수가 아니라 useState를 쓰는가? React 상태가 변경되었을 때, 컴포넌트를 다시 렌더링하여 U..

JS에는 호이스팅이라는 개념이 있다. 호이스트가 끌어올리다라는 뜻인데, 뜻처럼 변수나 함수를 맨위로 끌어올리는 것을 말한다.이 때, 할당까지 끌어오리는 것은 아니고 선언만 끌어 올린다. 그래서 아래 코드가 있으면 결과가 에러가 나는 것이 아니라, a는 undefined가 되어 보여진다.  var를 사용할 경우 호이스팅으로 많은 혼란을 초래할 수 있다. 이 뿐만 아니라 var는 같은 함수로 중복 선언이 가능하다. 아래와 같은 코드로 사용되어지면 개발에 혼란을 초래할 여지가 상당히 높다.  이러한 문제를 보완하기 위해 es6부터 나온것이 let이다. let은 호이스팅이 되어지지만 TDZ(Temporal Death Zone)에 할당되어 선언되기 전에 사용하려고 해도 사용할 수 없다. 위와 같은 맥락이지만 에러..