차근차근

기업 과제 중 redux를 사용해 상태 관리를 해야하고 API 호출을 통해 데이터를 받아와야 했다. 하지만 역시나 에러를 만났다! 검색 API 호출을 하기 위해 액션에서 비동기 작업을 하니 만난 에러였다. 에러는 'redux-thunk'를 사용하라고 했지만 처음엔 다른 방식으로 문제해결을 시도했다. 문제해결 시도 1 search 액션을 실행하기 전에 컴포넌트 단에서 미리 API 호출을 하고 호출 받은 데이터를 액션 함수에 전달하는 방식으로 Action에서 비동기 동작을 하지 않도록 유도했다. 이 방식으로 원하는 바를 구현했지만, 이것이 '리덕스 디자인 패턴에 맞는 방식인가?'에 대한 의문이 있었고 말 그대로 검색이라는 액션을 하는 것은 action 함수에서 정의해야 리덕스 디..

번들러(Bundler)란 무엇이며 왜 필요한가? 다이나믹한 상호 작용이 많은 대규모 웹 서비스들이 생겨나면서 수백 개의 JS 파일을 관리하기 어려워 다음과 같은 문제가 있다. 전역 범위를 갖는 수백 개의 자바스크립트 파일의 중복 선언 많은 자바스크립트 파일로 인한 로딩 수동적인 웹 개발 루틴 작업 (파일, 이미지 압축 / CSS 전처리기 변환 등) 이러한 문제를 해결하기 위해 번들러(Bundler)가 등장했다. 번들러(Bundler)란, 웹 애플리케이션을 구성하는 모든 자원을 하나의 파일로 묶는(버들) 도구를 의미한다. 번들러를 사용하면 모듈 단위의 코드 작성 네트워크 병목 완화(최적화) 웹 개발 작업 자동화 번들러는 웹팩(Webpack), Rollup, Parcel, Browserify 등이 있다. 웹..

로그인 API를 구현하기 위해 어떤 HTTP 메서드를 사용해야 하는가? 사용자가 아이디와 비밀번호를 입력 후 로그인 요청을 한다면 아이디와 비밀번호는 서버에 전달되고 서버는 Database를 확인해 사용자를 식별할 뿐이기 때문에 GET 메서드가 적절해 보이지만 GET 메서드 사용시 아이디와 비밀번호는 쿼리로 전달되야 한다.(GET 메서드는 데이터를 바디에 담을 수 없다) 하지만 GET 요청은 서버 데이터의 상태를 변경하지 않기 때문에 쿼리를 적극적으로 캐싱할 수 있어 아이디와 비밀번호와 같은 정보를 쿼리에 담아 보내게 되면 보안에 취약하다. 따라서, 보안상의 이유로 아이디와 비밀번호를 바디에 담아 보내고(바디에 담긴 데이터는 HTTS 통신에 의해 암호화 된다) 서버 데이터의 상태를 변경해 캐싱될 수 없는..

사용자가 브라우저 주소창에 URL을 입력한다. 브라우저는 해당 URL의 도메인 부분을 DNS 서버에서 검색하고, DNS 서버에서 해당 도메인과 매칭되는 IP 주소를 찾아 URL 정보와 함께 전달한다. URL 정보와 IP 주소는 HTTP 프로토콜을 사용해 HTTP 요청 메시지 생성한다. 생성된 HTTP 요청 메시지는 TCP 프로토콜을 사용해 인터넷을 거쳐 해당 IP 주소의 컴퓨터로 전송 도착한 HTTP 요청 메시지는 HTTP 프로토콜을 사용하여 URL 정보로 변환되고 웹서버는 URL 정보에 해당하는 웹 데이터를 검색한다. 검색된 웹 데이터는 또 HTTP 프로토콜을 사용하여 HTTP 응답 메시지를 생성하고 TCP 프로토콜을 사용하여 인터넷을 거쳐 원래 컴퓨터로 전송된다. 도착한 HTTP 응답 메시지는 HTT..

1. 자바스크립트 엔진은 변수 선언을 2단계에 거쳐 수행한다. 선언 단계: 변수 이름을 실행 컨텍스트에 등록해서 자바스크립트 엔진에 변수의 존재를 알린다. 초기화 단계: 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화 한다. 초기화 단계를 거치지 않으면, 확보된 메모리 공간에는 이전에 사용했던 쓰레기 값이 남아있을 수 있다. 자바스크립트 엔진은 암묵적으로 초기화를 수행하기 때문에 이러한 위험으로부터 안전하다. 2. 변수 선언은 소스코드 평가 과정에서 완료된다. 자바스크립트 코드는 인터프리터에 의해 한 줄씩 순차적으로 실행되는데, 소스코드가 한 줄씩 순차적으로 실행되는 시점을 런타임이라고 한다. 변수 선언은 런타임 이전 단계에서 먼저 실행된다. console.log(..

var, let, const의 차이점은 중복 선언, 재할당, 스코프, 전역 객체 프로퍼티, 호이스팅으로 크게 5가지로 나눌 수 있습니다. 1. 중복 선언 가능 여부 var : 변수의 중복 선언이 가능 var로 선언한 변수는 중복 선언이 가능합니다. 중복 선언 시 가장 나중에 할당된 값이 변수에 저장됩니다. var name = 'kevin'; console.log(name); // name var name = 'matt'; console.log(name); // matt => var를 사용할 경우 이미 사용하는 변수를 중복 선언하여 기존 값을 변경하게 되는 실수가 발생할 수 있습니다. let, const : 변수의 중복 선언이 불가능 let과 const로 선언한 변수는 중복 선..

코드스테이츠 과정에서 배운 React Router는 v5이라 프로젝트 진행 당시 v6에 많은 변경사항이 있는 것을 확인하지 못해 퍼스트 프로젝트 당시 가독성도 엉망이고 라우팅 처리를 제대로 하지 못했다. 하지만 파이널 프로젝트는 v6의 많은 변경 사항을 확인하고 다시 학습해 나름대로 만족한 라우팅을 했다고 생각한다. 라이브러리 설치 npm install react-router-dom 라우터 적용 react-router-dom 에 내장되어 있는 BrowserRouter 컴포넌트를 사용해 프로젝트를 감싸면 App 컴포넌트는 페이지를 라우팅할 수 있게 됩니다. index.js import React from 'react'; import ReactDOM from 'react-dom'; import App fro..

왜 Youtube Player API를 사용했는가? 파이널 프로젝트인 뽀모도로 서비스에는 타이머 기능과 뮤직 플레이어 기능을 결합한 서비스를 기획했습니다. 뮤직 플레이어 기능을 사용하기 위해 많은 양의 음악이 필요했는데, 많은 양의 음악을 직접 데이터베이스에 저장할 수 없는 한계점, 저작권 관련 문제 등의 이슈로 유튜브 API를 사용하기로 판단했습니다. 패키지 vs 공식 문서 유튜브 플레이어 API를 사용하기 위해서 선택할 수 있는 방법은 두 가지가 있었습니다. 이미 만들어진 패키지를 이용하는 방법 공식 문서를 참고해 직접 코드를 작성하는 방법 저희 프로젝트는 리액트를 사용하기 때문에 패키지를 사용할 경우 아주 편하고 빠른 시간 안에 기능 구현을 완성할 수 있었고 공식 문서 참고할 경우 공식 문서가 순수..

greensock을 사용하는 이유? 스크롤 기반 애니메이션은 기본적인 CSS와 JS로 수행 가능해 애니메이션 라이브러리를 사용하는 것이 낭비라고 생각될 수 있습니다. 하지만 greensock을 사용하면 브라우저 버그나 불일치 등의 호환성 문제를 해결하고 애니메이션이 모듈화되어 코드의 가독성, 재사용성을 높일 수 있습니다. 또한, 스크롤 위치에 기반한 애니메이션은 성능상의 이슈가 있기 때문에 스크롤 이벤트가 너무 자주 발생하지 않도록 방지해야 하는데 매번 스크롤 리스너를 조절하는 것은 상당히 번거롭습니다. 그렇기 때문에 호환성, 사용성이 좋고 가볍게 최적화가 되어 있는 greensock 라이브러리를 사용했습니다. 라이브러리 설치 npm install gsapimport gsap와 ScrollTrigger를..

SVG 란? 벡터 그래픽을 표한하기 위한 XML 기반의 파일 형식, 쉽게 말해 이미지를 코드로 표현한 벡터 이미지 파일로 생각할 수 있습니다. SVG 파일은 웹 브라우저 상에서 열람할 수 있고 문서 편집기에서 편집할 수 있습니다. Raster vs Vector React에서 SVG 파일 사용하기 1. img 태그로 사용하기 기존의 png, jpg 등의 이미지를 사용하는 방식과 동일하다. import Mute from '../../images/mute.svg'; 2. 컴포넌트화 시키기 SVG 파일을 컴포넌트화 시켜 유동적으로 바꾸고자 하는 속성에 "current"로 값을 바꿔줍니다. 다음과 같이 사용하고자 하는 컴포넌트에서 원하는 속성 값을 props로 전달할 수 있습니다. // tomato..