전체 글

[JS] Javascript에서의 this

서론  다른 객체지향 언어들과는 달리, 자바스크립트에서 this는 클래스 외에도 다양한 상황에서 사용된다. 이는 때로는 혼란을 야기할 수 있다. this는 기본적으로 실행 컨텍스트가 만들어질 때 결정되며, 함수 호출 시에 결정된다. 실행 중에는 이를 할당으로 변경할 수 없다.다양한 상황에서의 this전역 문맥  전역 공간에서 this는 전역 객체를 가르킨다. 예를 들어, 브라우저에서는 window, Node.js에서는 global이 전역 객체가 된다. 전역 공간에서 변수 a에 1을 할당하면 window.a와 this.a 모두 1이 출력된다. 이는 전역 변수가 사실 전역 객체의 프로퍼티로 동작하기 때문이다.var a = 1;console.log(a); // 1console.log(window.a); // ..

Recoil 사용이유와 사용방법

서론 비즈니스 모델의 복잡성이 증가함에 따라 프론트엔드 개발에서 처리하는 데이터의 양과 복잡도도 더욱 커지고 있다. 사용자와 상호작용하는 뷰는 점차 더 많은 액션을 포함하게 되고, 데이터베이스에서 데이터를 가져오는 횟수와 데이터의 크기도 증가하고 있다. 이러한 환경에서 데이터를 효율적으로 관리하는 것은 필수적이다. 실제로 프론트엔드 개발자라는 직군이 등장한 배경도 이러한 필요성에서 비롯된 것이라고 본다. 이 글에서는 프론트엔드 개발에서 데이터를 효율적으로 관리하는 데 도움을 주는 상태 관리 라이브러리 중 하나인 Recoil의 사용 이유와 기본적인 사용 방법에 대해 살펴보겠다. 왜 Recoil인가 상태 관리 라이브러리를 사용해야 하는 이유는 앞에서 간략하게 설명하였다. 상태 관리 라이브러리에는 redux,..

상태 관리 라이브러리 비교: Redux vs Justand vs Recoil

서론 요즘 프론트엔드 개발은 비즈니스 로직이 복잡해짐에 따라 상태 관리가 점점 어려워지고 있다. 코드에서 사용하는 상태들이 많아지면서, 상태 관리는 더욱 중요해졌다. 상태들을 관리하고 어떤 상태 변화가 다른 상태 변화를 일으키는지 예측하는 게 어려워지고 있어, 이 글에서는 개인 프로젝트를 진행하며 상태 관리 라이브러리들을 선택할 때 영향을 미쳤던 요인들을 비교하고 정리해보겟다.Flux vs Atom 상태 관리 라이브러리들은 프론트엔드 개발에서 필수적인 부분이 되었다. 이들 중 대부분은 Flux 패턴이나 Atomic 방식으로 구현되어 있다. Proxy 기반의 발티오도 있지만, 대체로 개발자들은 Flux와 Atomic 중 하나를 선택한다. Flux 패턴은 top-down 방식을 따른다. 이는 데이터의 흐름이..

[JS] 반복문 대신 고차함수를 쓰는 이유

서론 처음 자바스크립트에 입문할 때는 파이썬에서 했던 것처럼 반복문을 주로 썼었다. 그러다 다른 사람들의 코드를 보며 반복문이 거의 존재하지 않고 대신 map, filter, reduce같은 고차함수를 주로 사용함을 알 수 있었다. 이 글에서는 자바스크립트에서 반복문 대신 고차함수를 써야하는 이유에 대해 알아보고자 한다.고차함수란 고차 함수는 다른 함수를 매개변수로 받거나 함수를 결과로 반환하는 함수이다. 고차 함수는 수학에서 쓰이는 개념이며 자바스크립트에서 고차함수에는 map, reduce, filter같은 함수가 있다. 자바스크립트에서 함수는 일급 객체로 변수에 할당되고 인수에 전달될 수 있고 다른 함수들의 return값으로 쓰일 수 있다. 고차함수는 외부 상태의 변경이나 가변 데이터를 피하고, 불변..

[JS] 클린코드를 위해 반복문과 조건문 줄이기(feat: 들여쓰기)

서론 JavaScript에서 클린 코드를 작성하는 것은 코드의 가독성과 유지 보수성을 높이는 데 중요한 역할을 한다. 특히 반복문과 조건문을 줄이고, 들여쓰기를 최소화하는 것은 코드의 복잡성을 줄이는 데 매우 중요하다. 반복문과 조건문을 무조건 쓰지 말아야하는 것은 아니지만 적절하게 대체하면 코드의 가독성과 유지 보수성을 높일수 있기에 이 글에서는 해당 목적을 달성하는 방법에 대해 알아보고자 한다. 조건문 간소화하기객체 Mapping 사용하기 조건이 한 두개일 때는 괜찮으나 조건이 여러개로 분기하게 되면 코드의 길이가 상당히 길어지는 것을 느낄 수 있다. 이럴때 조건문을 줄이는 한 가지 방법은 객체 mapping을 사용하는 것이다. 예를 들어, 여러 조건에 따라 다른 행동을 해야 할 때, 각 조건을 객체..

API 응답과 빈 값: HTTP 상태 코드 200과 204 그리고 404 간의 선택

Introduction 개인 프로젝트 진행 중 db를 사용하고 rest api를 만들어 사용할 일이 있었다. 그러던 중 api가 빈 값을 반환할 때가 있는데 이때 상태 코드를 200, 204 그리고 400중에 무엇을 반환해야 할지 고민이 있었다. 왜냐하면 빈 값을 반환한다는 건 통신은 올바르게 이루어졌지만, 원하던 값을 받아오지는 못했기 때문이다.  http 상태 코드를 올바르게 작성하는 것은 중요하다고 생각하는데 왜냐하면 서버의 응답에 따라 클라이언트는 통신이 어떻게 이루어졌는지 판단하기 때문이다. 이 글에선 서버가 빈 리스트나 존재하지 않는 리소스를 반환할 때, 어떤 상태 코드가 가장 적절한지에 대해 알아보겠다.Preliminarieshttp status code HTTP 상태 코드는 서버 응답의 성..

React와 JWT로 자동 로그인 구현하기

Introduction  개인 프로젝트로 X(구 트위터) 클론코딩을 진행 중 로그인을 구현하기 위해 찾아본 내용들을 정리해보고자 한다. 로그인을 구현하기 위해서는 쿠키, 세션, 헤더, JWT에 대한 선수 지식이 있으면 좋다. 일반적으로 로그인은 세션 혹은 JWT를 이용하여 구현하는데 나는 JWT와 aws lambda를 이용하여 자동 로그인을 구현하였다. 이 글에서 간략한 배경 지식과 JWT와 세션의 차이에 대해 설명해 보고자 한다.Preliminaries쿠키 쿠키는 사용자 정보를 저장하는 데 사용되는 작은 데이터 조각이다. 쿠키는 서버에서 브라우저에 정보를 저장하기 위해 쓴다. 쿠키는 토큰이나 세션과 대비되는 개념이 아니며 매번 반복되는 요청을 줄이기 위해 브라우저에 정보를 저장하여 서버에 통신할 때 쿠..

ESLint와 Prettier로 컨벤션 준수하기 with Webstorm

서론코드 컨벤션을 준수하는건 협업뿐만 아니라 클린코드를 지향하는데에도 필수적이다. 이를 도와주기 위한 툴로 여러가지가 있는데 그중에 가장 많이 쓰이는 eslint와 prettier를 webstorm에서 쓰는 방법에 대해 알아보고자한다. ESLint와 Prettier에 대하여 ESLint는 코드 스타일을 바꾸는데 효과적이다. 사용자가 규칙을 설정할 수 있기에 많이 쓰는 airbnb-style로 설정할 경우 스타일을 위반하면 경고문구가 출력된다. 예를 들어 airbnb-style의 경우 상수에 대문자 snakecase를 쓰는것을 권하기에 이를 준수하지 않은 경우 경고문구가 출력된다. Prettier는 코드 포맷을 바꾸는데 효과적이다. 프로젝트에서 일관된 코드 포맷을 가지게 하고 싶을때 쓰면 좋다. 예를 들어..