프론트엔드

Atomic 디자인은 UI 컴포넌트를 설계할 때 작은 단위부터 큰 단위까지 점진적으로 조합해나가는 방법론입니다. 이 방법론은 Brad Frost가 제안한 디자인 시스템으로, 생물학의 원자론에서 착안해 UI 컴포넌트를 마치 원자(atom), 분자(molecule), 유기체(organism)와 같이 작은 구성 요소들로 나누어 관리하는 구조입니다.이 디자인 방법론의 핵심은 재사용성과 확장성을 고려한 컴포넌트 설계를 가능하게 한다는 점입니다. 프로젝트가 커지고 복잡해질수록 단일 컴포넌트가 여러 곳에서 사용될 수 있는데, 이때 Atomic 디자인을 적용하면 코드 중복을 줄이고 유지보수를 쉽게 할 수 있습니다.Atomic 디자인의 5가지 구성 요소Atoms (원자)원자는 더 이상 나눌 수 없는 가장 작은 단위입니다..

처음에는 카드 컴포넌트를 간단하게 만들 생각이었습니다. 사용자가 입력한 내용을 카드 안에 문자열로만 출력하는 방식이었습니다. 예를 들어, 카드에 들어갈 내용을 "description"이라는 Prop으로 받아서 출력하면 충분하다고 생각했습니다.const CardBasic = ({ title, description }: { title: string, description: string }) => { return ( {title} {description} );};이처럼 문자열만 받는 방식은 굉장히 간단하고 빠르게 구현할 수 있었습니다. 단순 텍스트를 출력하는 상황이라면 충분한 방법이었습니다.하지만, 확장성 문제프로젝트가 진행되면서 사용자가 입력할 내용이 단순한 텍스트가 아닐..

리액트(React)를 이용해서 웹 개발을 개발하다 보면, 상태 관리가 굉장히 중요하다는 걸 느끼게 됩니다.오늘은 상태 관리 라이브러리인 Redux를 소개하고, 왜 리액트에서 필수적인지 설명해 드리겠습니다. 1. Redux란 무엇인가요? Redux는 상태 관리 라이브러리입니다. 상태 관리는 애플리케이션의 데이터나 상태를 일관되게 관리하는 방법을 제공해 주죠. 리액트 컴포넌트가 많아질수록 상태 관리가 어려워지는데, Redux가 이 문제를 해결해 줍니다.여기서 중요한 포인트는, Redux는 처음에는 문법이 어렵고 복잡하게 느껴질 수 있습니다. 하지만 걱정하지 마세요!저도 처음엔 어렵게 느껴졌어요. 그래서 무엇부터 시작해야 할지, 왜 Redux를 사용해야 하는지 먼저 알아보겠습니다.  2. 리액트에서 상태 관리..

리액트에서 상태 관리는 필수적인 부분이죠. 다양한 상태 관리 라이브러리 중에서 Redux, Recoil, 그리고 Zustand가 가장 많이 사용되고 있어요. 이 글에서는 이 세 가지 라이브러리를 차례로 소개하고, 최신 트렌드인 Zustand가 왜 주목받고 있는지 알아보겠습니다.recoil vs redux vs zustand | npm trends recoil vs redux vs zustand | npm trendsComparing trends for .npmtrends.comRedux: 전통적인 강자 🏆Redux는 리액트 애플리케이션에서 상태 관리를 위한 가장 오래된 라이브러리 중 하나예요. Redux는 전역 상태를 관리하기 위해 설계되었으며, 다음과 같은 특징이 있어요:단일 스토어: 모든 상태가 하..

웹 개발을 하다 보면 한 번쯤 들어봤을 리액트(React)와 넥스트.js(Next.js)!이 둘의 차이점 중 하나는 바로 렌더링 방식이야. 그럼 이 두 강력한 툴의 렌더링에 대해 알아볼까? 🔥리액트: 클라이언트 사이드 렌더링(CSR)의 대표주자! 🌐리액트는 클라이언트 사이드 렌더링(CSR)을 사용해. 여기서 "렌더링의 주체가 클라이언트"라는 말이 무슨 뜻이냐고? 쉽게 말해, 웹 브라우저에서 모든 걸 처리한다는 뜻이지.리액트 렌더링 방식웹 브라우저에서 렌더링이 이루어짐페이지 소스를 보면 자바스크립트로 가득 찬 파일들만 보임검색엔진 최적화(SEO)에 불리할 수 있음 🤔리액트 공식 홈페이지에 가서 페이지 소스를 보면, 실제 화면에 보이는 텍스트나 버튼 등이 HTML 소스에는 없고, 자바스크립트 파일로만 ..

라우팅(Routing)라우팅은 사용자가 요청한 URL에 따라서 어떤 페이지를 보여줄지 결정하는 과정을 말해요.Next.js에서는 앱 라우팅과 페이지 라우팅을 통해 URL 경로와 페이지 파일을 직접 연결합니다.사용자가 /about 경로를 입력하면, Next.js는 해당 경로와 맞는 페이지를 표시합니다. 일종의 웹 네비게이션이라고 생각하면 됩니다. 라우터(Router)라우터는 이러한 라우팅을 관리하고 처리하는 기능을 제공하는 도구입니다. Next.js에서 페이지 라우터는 next/router, 앱 라우터는 next/navigation이 라우터 관리 도구입니다. 저희는 해당 도구에서 제공하는 여러가지 훅과 컴포넌트를 사용하여 페이지를 탐색합니다. 간단히 말해서 라우터는 사용자의 URL을 해석하고 해당 URL에..

안녕하세요, 웹 개발자 여러분!오늘은 Next.js설치 방법을 알려드리려고 합니다.여러분도 아시다시피, Next.js는 요즘 대세죠? 저도 처음에는 살짝 어려워 보였지만, 실제로 해보니 너무 간단하고 강력하더라구요!Next.js 설치 방법먼저, 다음 명령어를 실행해 Next.js 프로젝트를 만듭니다:$ npx create-next-app@latest .령어를 입력하면 다음과 같은 질문들이 나옵니다. 하나씩 답해볼게요!Would you like to use TypeScript?: 원하시면 Yes, 아니면 No.Would you like to use ESLint?: 코드 품질을 위해 Yes 추천!Would you like to use Tailwind CSS?: 당연히 Yes! Would you like to..

자바스크립트의 Math 내장 객체안녕하세요, 친구들! 오늘은 자바스크립트의 강력한 내장 객체 중 하나인 Math 객체에 대해 알아볼 거예요. 숫자와 관련된 다양한 작업을 쉽게 할 수 있게 도와주는 이 객체를 통해 코딩을 더욱 재미있게 만들어봐요! 🚀1. Math.min(val1, val2, val3, val4)Math.min 메서드는 주어진 숫자 중 가장 작은 값을 반환해요.let result = Math.min(10, -10, 20, 50, -30);console.log(result); // -30 2. Math.max()Math.max 메서드는 주어진 숫자 중 가장 큰 값을 반환해요.let result = Math.max(10, -10, 20, 50, -30);console.log(result); ..