잔소리는 많지만 유익한 친구들 ESLint와 Prettier

프론트엔드 개발을 하다 보면 코드가 엉켜 보이고, 팀원 간 스타일이 달라져서 혼란스러울 때가 많습니다. 이럴 때 필요한 게 바로 ESLint와 Prettier입니다. 이 글에서는 두 도구의 역할과 설정 방법을 간단하고 명확하게 소개합니다.01ESLintESLint는 자바스크립트 코드의 오류를 빠르게 찾아주는 도구입니다. 코드에서 발생할 수 있는 버그나 잘못된 문법을 자동으로 감지하고 알려줍니다.1. ESLint의 장점사소한 실수나 버그를 사전에 예방합니다.코드 품질을 일정하게 유지할 수 있습니다.협업 시 코드 리뷰 시간을 줄여줍니다.2. 설치 및 기본 설정npx eslint --init을 입력하면 몇 가지 질문에 답하면 됩니다(단 package.json 파일이 미리 생성되어 있어야 합니다.)npm ins..

• format_list_bulleted DEVELOPMENT/PROJECT NOTES
• · 2025. 2. 3.
• textsms

[JS] 동기와 비동기, 둘이 싸우면 누가 이길까?

01동기란동기란 여러 작업이 있을 때 이 작업들을 순서대로 한 번에 하나씩 처리하는 방식을 말합니다. 쉽게 말해, 앞에 있는 작업이 끝나야만 다음 작업을 시작할 수 있는 구조입니다.예를 들어, A작업, B작업, C작업이 있다고 가정해 보겠습니다. 동기 방식에서는 다음과 같은 순서로 작업이 진행됩니다:'' A작업 시작 -> A작업 종료 -> B작업 시작 -> B작업 종료 -> C작업 시작 -> C작업 종료 ''이 작업들을 실제로 실행하고 처리하는 역할을 하는 것이 바로 쓰레드(Thread)입니다.장점코드의 가독성이 높습니다. 순서대로 실행되기 때문에 로직의 흐름을 이해하기 쉽습니다. 단점작업 중 하나라도 오래 걸리면, 전체 프로그램이 멈춘 것처럼 보일 수 있습니다. 예를 들어, A작업이 5초 걸린다면, 그..

• format_list_bulleted DEVELOPMENT/JavaScript
• · 2025. 1. 23.
• textsms

[JS] 나를 위한 배열과 Date 메서드 컨닝페이퍼

01배열 조작 메서드1. push배열의 맨 뒤에 요소를 추가합니다.const arr = [1, 2, 3];arr.push(4);console.log(arr);// 출력결과: [1, 2, 3, 4] 2. pop배열의 마지막 요소를 제거하고 반환합니다.const arr = [1, 2, 3];const removed = arr.pop();console.log(arr);console.log(removed);// 출력결과: [1, 2]// 출력결과: 3 3. shift배열의 첫 번째 요소를 제거하고 반환합니다.shift는 원본 배열을 변경하므로, 성능이 중요한 경우 빈번히 사용하지 않는 것을 권장합니다.const arr = [1, 2, 3];const removed = arr.shift();console.log(..

• format_list_bulleted DEVELOPMENT/JavaScript
• · 2025. 1. 22.
• textsms

[Next.js] Page Router? Next.js에서 클릭 몇 번이면 끝난다고! 1탄

Next.js를 쓰다 보면 "어? 이건 어떻게 하지?" 싶은 순간들이 있습니다. 이번에는 네비게이션, 프리패칭, 그리고 레이아웃 설정을 쉽게 이해할 수 있도록 정리해볼게요. 어렵게 생각하지 말고 가볍게 읽어주세요!01네비게이션페이지를 쉽게 이동하는 방법, 한번 알아볼까요?Next.js에서 페이지 이동은 정말 간단합니다. Link 컴포넌트와 useRouter 훅만 기억하면 됩니다.import "@/styles/globals.css";import type { AppProps } from "next/app";import Link from "next/link";import { useRouter } from "next/router";export default function App({ Component, page..

• format_list_bulleted DEVELOPMENT/Next.js
• · 2025. 1. 22.
• textsms

[Next.js] React의 찐친 확장판?

01Next.js 란 무엇인가?Next.js는 React.js의 확장판 느낌이 물씬 나는 프레임워크입니다.“라이브러리가 아니라고?” 맞아요, 프레임워크예요. 이게 왜 중요하냐면, 개발자와 코드의 관계가 완전히 달라집니다.라이브러리 vs 프레임워크: 누가 더 자유로울까?프레임워크는 이렇게 말하죠:“내가 틀을 다 정해놨으니 너는 그 안에서 놀아. 내가 다 해줄게!”덕분에 모든 기능이 기본 제공되지만, 대신 자유도는 낮아집니다.반면 라이브러리는:“자, 이거 쓰고 싶은 대로 써. 네 마음대로 만들어봐!”자유도는 최고지만, 대신 직접 만들어야 할 게 많습니다.Next.js는 이 프레임워크의 특성을 활용해 사전 렌더링 같은 고급 기술을 쉽게 사용할 수 있도록 만들어졌습니다.02사전 렌더링: CSR의 단점을 극복한 ..

• format_list_bulleted DEVELOPMENT/Next.js
• · 2025. 1. 17.
• textsms

Context API로 충분한 줄 알았는데... Zustand 써보니 달랐다!

지난 포스팅에서는 Context API의 기초 사용법을 다뤘습니다.이번에는 Context API와 비슷하지만 더 간단하고 효율적인 상태 관리 도구, Zustand를 소개하려고 합니다.01Context API를 사용해 본 사람이라면...Context API는 React에서 글로벌 상태를 관리할 때 기본적으로 많이 사용됩니다.간단하고 익숙한 도구지만, 실제 프로젝트에서 사용하다 보면 몇 가지 불편함을 느낄 때가 있습니다.Provider 중첩: 여러 컴포넌트가 상태를 공유하면 Provider를 계속 추가해야 해 코드가 복잡해집니다.리렌더링 문제: 상태가 변경되면 관련된 모든 컴포넌트가 리렌더링 되어 성능이 저하될 수 있습니다.기능 한계 : 실시간 데이터 동기화나 대규모 상태 관리를 구현하려면 번거로울 때가 많..

• format_list_bulleted DEVELOPMENT/PROJECT NOTES
• · 2024. 12. 31.
• textsms

유저 상태를 Provider로 비비고, Context로 비비자!

React의 Context API를 활용하면 전역 상태를 간단하고 효율적으로 관리할 수 있습니다.이 글에서는 Context와 Provider의 기본 개념부터, 로그인 상태를 관리하는 방법까지 하나씩 정리해 보겠습니다! 01Context와 ProviderReact의 Context API에는 전역 상태를 관리하기 위한 두 가지 주요 도구가 있습니다: Context와 Provider입니다.1. Context 란?Context는 데이터를 저장하는 "저장소" 역할을 합니다.React에서 전역 상태를 관리할 때 데이터를 담는 "그릇"처럼 사용됩니다.import { createContext, useContext } from "react";// Context 생성export const AuthContext = crea..

• format_list_bulleted DEVELOPMENT/PROJECT NOTES
• · 2024. 12. 26.
• textsms

GitHub 로그인 구현? 생각보다 너무 쉽다! (진짜 쉽다…)

GitHub OAuth를 이용하면 소셜 로그인을 쉽게 구현할 수 있습니다.이 글에서는 GitHub OAuth App을 등록하는 방법부터 로그인 흐름, 구현까지 간단히 정리해 보겠습니다.01Github OAuth App 등록하기1. 설정 메뉴로 이동하기먼저 GitHub에 로그인한 후, Settings > Developer settings > OAuth Apps로 이동합니다. 2. 앱 정보 입력하기필요한 정보를 입력해 앱을 등록합니다.Application name: 웹사이트 이름HomePage URL: 내 웹사이트 주소Application description: 사이트 설명 (선택 사항)Authorization callback URL: 인증 완료 후 GitHub 인증 서버가 코드를 보낼 URL모든 정보를 입..

• format_list_bulleted DEVELOPMENT/PROJECT NOTES
• · 2024. 12. 19.
• textsms