👩🏻‍💻 프로그래밍 언어

이번 장에서는State와 Props의 개념과 차이점을 자세히 다뤄볼 예정입니다.여러분은 React의 state에 얼만큼 알고 계신가요 ? 둘의 차이는 뭘까요 ? 결론부터 보자면,state 컴포넌트의 상태를 나타내는 데이터컴포넌트 내부에서 관리되는 동적인 데이터로, 변경이 가능하며 주로 UI의 동작을 제어합니다.props 외부로부터 주어진 데이터부모 컴포넌트에서 자식 컴포넌트로 전달되는 읽기 전용 데이터로, 주로 컴포넌트 간 데이터 전달에 사용됩니다. 우리가 데이터 변경이 있는 웹 페이지를 만들고 싶다고 가정했을 때 state가 없었다면.이를 위해서 페이지에 있는 데이터 부분이 변경되었을 때마다 DOM에 접근하여 직접 수정해 주었을 것입니다.데이터가 변경된 만큼 당연히 화면도 변경되어야 하니까요 여기서 잠..

기초 프로젝트에서 처음으로 Jotai를 사용해보았고, 그 경험을 바탕으로 Jotai의 장점과 단점을 Context와 Zutand를 비교해보려 합니다. Jotai 사용 후 Context와 Zustand와의 비교 💫 📌 Jotai 사용 예제import React from 'react';import { atom, useAtom } from 'jotai';// atom 정의const countAtom = atom(0);function Counter() { const [count, setCount] = useAtom(countAtom); return ( 카운트: {count} setCount(count + 1)}>증가 );}export default function ..

var와 let의 주요 차이점에 대해서 알아봅시다 ! 😊스코프(Scope)var: 함수 스코프를 가집니다. 즉, 함수 내에서만 유효하며, 함수 외부에서는 접근할 수 없습니다. 그러나 함수 내부에서 선언된 경우, 블록({}) 내에서 선언된 것과 상관없이 함수 전체에서 접근 가능합니다.let: 블록 스코프를 가집니다. 즉, 중괄호({})로 묶인 블록 내에서만 유효하며, 블록 외부에서는 접근할 수 없습니다.변수 호이스팅(Variable Hoisting)var: 선언이 호이스팅(변수 선언이 코드의 최상단으로 끌어올려지는 현상)됩니다. 그러나 초기화는 호이스팅되지 않아 undefined 값을 반환할 수 있습니다.let: 선언은 호이스팅되지만, 초기화가 호이스팅되지 않아서 초기화 전 접근하면 ReferenceEr..

🚪 들어가며Next.js에서는 서버사이드 렌더링(SSR)을 통해 사용자가 페이지에 접근하기 전에 서버에서 데이터를 미리 가져와 페이지를 렌더링할 수 있습니다. 이 과정에는 두 가지 중요한 요소가 작동합니다API 핸들러 (@api/article.ts)페이지 컴포넌트 (@pages/community/index.tsx)이 두 요소가 어떻게 상호작용하여 동적 콘텐츠를 효율적으로 제공하는지 살펴보자 ⭐️1. @api/article.ts역할: API 핸들러기능: 클라이언트의 GET, POST, DELETE 요청을 처리하고, 외부 API나 데이터베이스와 상호작용하여 필요한 데이터를 가져오거나 수정합니다.이는 백엔드에서 데이터 처리를 담당합니다.예시: getArticles() 함수는 게시글 목록을 가져와 JSON 형..

Tailwind CSS에서 유틸리티 클래스에 대괄호 []를 사용하면 맞춤 또는 동적 값을 적용할 수 있는 반면,대괄호를 사용하지 않으면 사전 정의된 표준 유틸리티 값을 사용할 수 있습니다. 대괄호 []를 사용하지 않는 예시 (사전 정의된 클래스 사용)이 경우, Tailwind의 사전 정의된 값을 사용하여 너비, 배경색, 패딩 등을 설정합니다. 사전 정의된 유틸리티 클래스 w-32: 너비를 8rem(128px)으로 설정합니다.bg-blue-500: 사전 정의된 파란색을 배경색으로 적용합니다.p-4: 1rem(16px)의 패딩을 추가합니다. 대괄호 []를 사용하는 예시 (맞춤 값 사용)여기서는 []를 사용하여 Tailwind가 기본적으로 정의하지 않은 맞춤 값을 적용합니다. 맞춤 유틸리티 클래스 w-[200..

Tailwind CSS 사용해보기Tailwind CSS(opens in a new tab) 란 ?Next.js와 매우 잘 어울리는 유틸리티 우선 CSS 프레임워크입니다.장점유틸리티 우선 프레임워크: Tailwind CSS는 유틸리티 클래스를 사용하여 빠르고 효율적인 스타일링을 가능하게 하며, 프로젝트 전반에 걸쳐 일관된 스타일을 유지하면서도 쉽게 디자인할 수 있습니다.맞춤화 가능: Tailwind CSS는 모든 디자인 시스템에 맞게 확장 및 맞춤설정이 가능해, 다양한 프로젝트에 유연하게 적용할 수 있습니다.다양한 프레임워크와 통합: Next.js, Nuxt.js, Vue.js 등과 잘 통합되며, PostCSS를 지원하여 자동 접두어 지정과 같은 기능을 활성화할 수 있습니다.자바스크립트 코드와 분리: Ta..