생각정리

[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는 코드 포맷을 바꾸는데 효과적이다. 프로젝트에서 일관된 코드 포맷을 가지게 하고 싶을때 쓰면 좋다. 예를 들어..

MSW로 실제 네트워크 환경에서 Mocking하기

개요 프로젝트를 벡엔드 개발자와 같이 하다 보면 API가 완성되지 않아 프론트 코드 구현에 어려움을 겪을 때가 있다. 왜냐하면 dummy data를 이용해 개발을 한다 하더라도 네트워크를 통한 실제 API 호출 환경과는 차이가 있기 때문이다. 이에 마감기한이 거의 다가와서야 개발을 시작할 수 있는 부분도 있는데 이를 위해 네트워크 환경에서 mocking을 할 수 있는 라이브러리인 msw.js에 대해 소개하고자 한다. Service Worker에 대해 MSW는 Mock Service Worker의 약자이다. 이 라이브러리를 이용해 실제 서버를 만들지 않고 네트워크 요청을 통한 테스트가 가능하다. 따라서 MSW는 service worker를 이용한 mocking 라이브러리이고 service worker에 대..

싱커톤 시즌3를 마무리하며(feat: 우수상 수상)

개요 싱커톤 시즌3가 종료되고 결과물을 제출한지 일주일정도 지났다. 개발은 이주정도 진행되었으며 다른 해커톤에 비해 긴 기간이였지만 4-1학기에 재학중이고 시험기간이 겹쳐서 상당히 바쁜 이주였다. 처음 진행해보는 해커톤이였기에 간단한 소회와 나의 부족했던 점 그리고 새롭게 배웠던 점들에 대해 복기하며 더 나아지기 위해 글을 작성한다. 부족했던 점- 협업에 대한 기술 부족 우선 우리팀은 백엔드 2명, AI 1명, 프론트엔드 2명으로 구성되었다. 나 포함 프론트엔드 2명이였고 이전에 같이 프로젝트를 진행해본 멤버였으나 그때와는 많이 달라진 것을 느꼈다.표1. 좌: 이전 프로젝트 커밋내역 우: 이번 싱커톤 커밋내역  제일 먼저 부족함을 느꼈던 부분은 커밋부분이다. 그 전까지 커밋은 영어로 작성했으며 엄청 간단..

동적 라우팅을 이용한 게시글 별로 달라지는 URL 구현

서론 게시판이나 프로필 페이지 등을 개발하다보면 URL이 엄청 많이 필요한 경우가 있다. 물론 일일이 route를 이용해서 작성할 수도 있겠지만 페이지 수가 사용자들의 활동에 따라 더 늘어날 수도 있기에 근본적인 문제 해결 방법은 아니다. 이럴땐 URL의 특정 부분에 변수를 사용하여 컴포넌트를 동적으로 렌더링하는 동적 라우팅을 이용하면 쉽게 해결할 수 있다. 동적 라우팅 사용법 먼저 우리의 희망 react-router-dom을 설치하자. 이 글은 v6를 기준으로 작성하였다.npm install react-router-dom 그 다음으로 동적 라우팅을 사용할 페이지에 변수를 전달하는 과정이 필요하다. import React, {useEffect, useState} from "react";import { L..

Useeffect hook의 리턴구문 실행 조건

useeffect hook은 의존성 배열을 이용하여 리렌더링을 제어할 수 있어 컴포넌트의 불필요한 렌더링을 막을 수 있고 콜백함수를 리액트의 라이프사이클과 동기화 시킬수 있어 널리 사용되는 hook이다. 또한 리턴구문이 컴포넌트가 언마운되거나 리렌더링 직전에 실행되는 것을 이용하여 리소스를 정리할때도 편리하게 사용할 수 있다. 이때 useeffect hook의 의존성배열 유무에 따라 리턴구문 실행여부가 달라지는데 먼저 의존성 배열이 존재하는 경우 , 빈 배열이 아닌 경우, useeffect hook의 콜백함수는 컴포넌트가 마운트 되고 의존성 배열의 값이 바뀔때마다 실행된다. 리턴 함수는 컴포넌트가 언마운트될때, 페이지에서 사라지거나 페이지가 이동할 때, 실행되고 의존성 배열의 값들이 바뀔때 실행된다. 의..