티스토리

왓누씨의 개발일기

검색하기

블로그 홈

왓누씨의 개발일기

dev-watnu.tistory.com/m

프론트엔드 공부중입니다

구독자: 3

방명록 방문하기

주요 글 목록

🔥 Firebase 튜토리얼 1탄 | React 프로젝트에 적용하는 법 01🔥 파이어베이스 (Firebase)란?Firebase는 2011년에 개발된 모바일 및 웹 애플리케이션용 백엔드 서비스로, 현재는 구글이 인수하여 운영하고 있습니다. 기존에는 웹 애플리케이션을 개발하려면 백엔드 서버를 직접 구축하고, 데이터베이스를 설정하며, 사용자 인증 시스템까지 따로 개발해야 했습니다. 하지만 Firebase를 사용하면 백엔드 개발 없이도 강력한 기능을 제공받을 수 있으며, 별도의 서버 운영 없이 애플리케이션을 만들고 배포할 수 있습니다. 특히, Firebase는 무료로 사용 가능한 서비스 범위가 넉넉하게 제공되기 때문에, 일정 수준까지는 별도의 비용 없이도 충분히 활용할 수 있습니다.02Firebase 프로젝트 생성하기Firebase를 사용하려면 가장 먼저 프로젝트를 생성해야 합.. 공감수 2 댓글수 1 2025. 3. 8.
[Review] 한입 Typescript 강의 후기 01강의소개이 강의는 타입스크립트를 처음 배우거나, 기존에 배웠지만 제대로 이해하지 못한 분들을 위한 강의입니다! 타입스크립트는 이제 선택이 아닌 필수로 자리 잡았지만, 문법만 어설프게 익히고 넘어가면 그 강력한 기능들을 제대로 활용하기 어렵죠. 이 강의에서는 단순한 문법 암기가 아니라, 타입스크립트가 어떻게 동작하는지, 왜 그렇게 설계되었는지까지 쉽게 배울 수 있어요. 특히, 강사님이 개념을 쉽고 재미있게 설명해 주시고, 다양한 시각 자료와 예제를 활용해서 어려운 내용도 부담 없이 따라갈 수 있어요. 그리고 강의와 함께 제공되는 핸드북을 통해 복습도 편하게 할 수 있죠!이 강의가 끝나면, 이제 여러분도 타입스크립트 마법사가 되어 있을 거예요! 🧙‍♂️✨ 👉인프런 강의 바로가기 한 입 크기로 잘라먹.. 공감수 1 댓글수 1 2025. 3. 7.
[TS] 유틸리티 타입 (Utility Types) 01유틸리티 타입 이란?타입스크립트에는 반복적으로 사용되는 패턴을 쉽게 적용할 수 있는 유틸리티 타입(Utility Types) 이 제공됩니다. 이 유틸리티 타입을 활용하면 코드를 더 간결하고 안전하게 작성할 수 있어요! 유틸리티 타입은 맵드 타입(Mapped Types) 기반과 조건부 타입(Conditional Types) 기반으로 나눌 수 있습니다.📌 맵드 타입 기반 → 객체의 속성을 변형하는 유틸리티 입 예: Partial, Required, Readonly, Pick, Omit 등객체의 특정 속성을 선택적으로 만들거나(Readonly, Partial), 필수로 변경(Required) 하는 등의 변형을 쉽게 수행할 수 있습니다.📌 조건부 타입 기반 → 특정 타입을 제거하거나 추출하는 유틸리티 .. 공감수 0 댓글수 0 2025. 3. 6.
[TS] 조건부 타입 (Conditional Types) 01조건부 타입 이란?조건부 타입은 어떤 조건이 참인지 거짓인지에 따라 다른 타입을 반환하는 기능입니다.type A = number extends string ? number : string; 여기서 number extends string은 거짓이니까, A의 타입은 string이 됩니다 💡 예제: 객체 타입 비교객체 타입에서도 동일한 원리가 적용됩니다.type ObjA = { a: number };type ObjB = { a: number; b: number };type B = ObjB extends ObjA ? number : string;ObjB는 ObjA를 포함하는 상위 타입이므로, B의 타입은 number가 됩니다.02제네릭 조건부 타입제네릭을 활용하면 타입을 유동적으로 설정할 수 있습니다!ty.. 공감수 0 댓글수 0 2025. 3. 5.
[TS] 타입 조작하기 01타입 조작 (Type Manipulation)이란?타입 조작(Type Manipulation)은 기존에 정의된 타입을 변형하거나 조합하여 더 유연하게 활용하는 기술입니다. 예를 들어:특정 객체 타입에서 일부 속성만 추출하기기존 타입을 선택적(optional) 속성으로 변환하기문자열 조합을 활용한 새로운 타입 만들기타입스크립트에서 지원하는 주요 타입 조작 기능은 다음과 같습니다.인덱스드 액세스 타입 – 객체, 배열, 튜플에서 특정 요소의 타입만 추출하기Keyof 타입 – 객체의 키 값을 유니온 타입으로 변환하기맵드 타입 – 기존 타입을 기반으로 새로운 타입 생성하기템플릿 리터럴 타입 – 문자열 리터럴을 조합하여 새로운 타입 생성하기02인덱스드 액세스 타입 (Indexed Access Type)인덱스드 .. 공감수 0 댓글수 0 2025. 3. 4.
[TS] 제네릭 (Generics) 01제네릭이란?제네릭은 간단하게 "함수나 클래스, 객체 등이 다양한 타입을 처리할 수 있도록 도와주는 도구"라고 할 수 있습니다. 예를 들어, 우리가 숫자나 문자를 다루는 함수가 필요할 때, 각기 다른 타입을 처리하려면, 그때마다 함수를 따로 만들어야 할 수도 있죠. 그런데 제네릭을 사용하면, 한 번만 작성한 함수로 다양한 타입을 처리할 수 있게 됩니다. 1. 제네릭이 필요한 이유예를 들어, 우리가 받은 값에 대해 그 값을 그대로 반환하는 함수가 있다고 생각해 볼게요.처음에는 이런 방식으로 작성할 수 있죠:function func(value) { return value;}이 함수는 어떤 타입이든 받을 수 있지만, 타입스크립트에서 any나 unknown을 사용하게 되면 그 타입이 추론되지 않아서 문제가 .. 공감수 1 댓글수 1 2025. 3. 3.
[TS] 클래스 (class) 01자바스크립트의 클래스자바스크립트에서 클래스는 객체를 쉽게 만들 수 있도록 도와주는 템플릿 같은 것이죠. 예를 들어, 여러 명의 학생을 관리한다고 할 때, 학생들의 이름, 나이, 성적 등을 매번 하나씩 쓰는 대신에 클래스를 사용하면 학생을 만드는 틀(템플릿)을 만들고, 그 틀을 바탕으로 여러 명의 학생 객체를 만들 수 있어요.1. 클래스 선언클래스는 객체의 틀을 정의하는 것입니다. 클래스 선언은 class 키워드로 시작합니다.class Student { // 클래스의 내용} 2. 필드 (프로퍼티) 선언클래스 안에서 객체가 가질 속성들을 정의할 수 있습니다.class Student { name; age; grade;} 3. 생성자생성자는 객체를 만들 때 사용되는 특수한 메서드입니다. 객체의 프로퍼.. 공감수 1 댓글수 1 2025. 3. 1.
[TS] 인터페이스 (Interface) 01인터페이스 (Interface)인터페이스는 타입을 정의할 때 사용하는 문법 중 하나이며, 타입 별칭과 비슷한 기능을 합니다.하지만 인터페이스는 상속이나 합침 같은 특수한 기능을 제공합니다.1. 선택적 프로퍼티인터페이스에서는 ?를 사용하여 선택적 프로퍼티,즉 해당 프로퍼티가 있어도 되고, 없어도 되는 경우를 정의할 수 있습니다.interface Person { name: string; age?: number; // age는 선택적 프로퍼티}const person1: Person = { name: "John" }; // age가 없어도 됨const person2: Person = { name: "Jane", age: 25 }; // age가 있어도 됨 2. 읽기 전용 프로퍼티readonly 키워드를.. 공감수 0 댓글수 0 2025. 2. 28.
[TS] 함수와 타입 01함수 타입 정의타입스크립트에서 함수 타입을 정의하려면 함수가 받는 매개변수의 타입과 반환값의 타입을 정의해 주면 돼요. 예를 들어, 두 개의 숫자를 더하는 함수는 다음처럼 정의할 수 있어요.여기서 반환값의 타입은 명시적으로 직접 지정해주거나 타입스크립트가 자동으로 추론해서 number로 지정해 줍니다.function add(a: number, b: number) { return a + b;}const add = (a: number, b: number): number => a + b; ✅ 기본값함수의 매개변수에 기본값을 설정할 수 있어요. 기본값을 설정하면, 인자가 주어지지 않았을 때 기본값이 사용돼요.function greet(name: string = "Guest") { console.log.. 공감수 1 댓글수 1 2025. 2. 27.
[TS] 타입 시스템 01객체 타입 호환성 (Object Type Compatibility)객체 타입 호환성은 간단히 말해서, 두 객체가 비슷한 구조일 때 서로 바꿔 사용할 수 있다는 개념입니다.객체의 속성 이름과 타입이 같으면, 두 객체를 서로 호환된다고 보는 거죠. 예를 들어, name과 price 속성이 있는 객체가 있다면, 이 두 객체는 서로 호환된다고 판단합니다.객체의 구조가 맞다면 타입이 맞다고 간주되기 때문에, 쉽게 값을 교환할 수 있게 되죠.type Book { name: string; price: number;}let myBook: Book = { name: "Learning TypeScript", price: 30000, author: "John Doe" // Error: 타입에 정의되지 않은 속.. 공감수 0 댓글수 0 2025. 2. 26.
[TS] 타입 계층과 변환 개념 (업캐스팅, 다운캐스팅, unknown, never) 01타입스크립트에서 타입이란?타입스크립트에서 타입(Type)이란 값이 가질 수 있는 형태나 범위를 제한하는 것입니다.예를 들어, 숫자만 들어갈 수 있는 변수를 만들 수도 있고, 글자(문자열)만 들어갈 수 있는 변수를 만들 수도 있어요. 이를 통해 코드의 안정성을 높이고, 버그를 줄일 수 있습니다. 1. 타입의 기본 개념✅ 타입은 비슷한 성질을 가진 여러 개의 값(데이터)을 묶어둔 개념(집합)✅ 비슷한 속성을 가진 값들을 하나로 묶어 타입을 형성✅ 예를 들어, 숫자들은 number 타입, 글자들은 string 타입let num: number = 10; // 숫자 타입 (10, 20, -5 같은 숫자만 가능)let str: string = "hello"; // 문자열 타입 ("hello", "world.. 공감수 0 댓글수 0 2025. 2. 25.
[TS] 타입스크립트 모든 타입 한 번에 정리 타입스크립트에는 다양한 타입들이 존재합니다.이번 글에서는 타입스크립트에서 지원하는 주요 타입을 정리해 볼게요. 🙂01원시 타입 (Primitive Type)동시에 하나의 값만 저장하는 타입입니다.📌 타입 주석 (Type Annotation): 변수명 뒤에 :을 붙여 타입을 지정하는 문법입니다.1. 숫자 타입 (number)타입스크립트에서 숫자를 다루는 모든 값은 number 타입으로 정의됩니다.let num1: number = 123;let num2: number = -123;let num3: number = 0.123;let num4: number = -0.123;let num5: number = Infinity;let num6: number = -Infinity;let num7: number = .. 공감수 0 댓글수 0 2025. 2. 25.
[TS] "Hello TypeScript World!" 01TypeScript 란 프로그래밍을 하다 보면, 변수에 어떤 타입이 들어가야 하는지 헷갈릴 때가 많지요? 예를 들어, 숫자를 넣어야 하는데 실수로 문자열을 넣으면 에러가 날 수도 있고, 함수가 예상치 못한 값을 반환하면 디버깅하느라 시간 낭비하게 되죠. 이런 문제를 미리 잡아주는 게 바로 타입스크립트(TypeScript)입니다!1. 타입스크립트는 무엇인가요?타입스크립트는 마이크로소프트에서 만든 자바스크립트의 상위 확장 언어입니다. 쉽게 말하면, 자바스크립트에 "타입" 개념을 추가해서 코드 작성할 때 더 안전하게 만들 수 있도록 도와주는 언어죠. 자바스크립트처럼 동작하지만, 변수나 함수에 타입을 미리 정해두면 잘못된 타입을 사용할 경우 컴파일 시점에서 오류를 잡아줍니다.그리고 타입스크립트 코드는 바로.. 공감수 1 댓글수 1 2025. 2. 25.
[React] Axios 01AxiosAxios는 HTTP 클라이언트 라이브러리로, JavaScript에서 API 호출을 쉽게 할 수 있도록 도와주는 라이브러리입니다. Promise 기반으로 작동하며, 브라우저와 Node.js에서 모두 사용할 수 있습니다. 특히, React에서 자주 사용됩니다. 📌 Axios 설치//npm을 사용하는 경우npm install axios//yarn을 사용하는 경우yarn add axios02기본 사용법Axios는 GET, POST, PUT, DELETE와 같은 HTTP 메서드를 사용하여 API 요청을 보낼 수 있습니다.다음은 가장 기본적인 예시입니다.✅ GET 요청 예시서버에서 데이터를 가져오는 예시입니다.import axios from "axios";axios.get("https://jsonp.. 공감수 1 댓글수 1 2025. 2. 21.
[JS] fetch와 REST API 01fetch 란1. fetch의 배경fetch가 나오기 전에는 AJAX를 사용하여 자바스크립트에서 데이터를 서버로 요청하고 받는 것이 어려웠습니다.AJAX(Asynchronous JavaScript And XML) : 전체 페이지를 새로 고침 하지 않고 필요한 데이터만 서버에서 비동기적으로 가져오는 기법입니다.XMLHttpRequest : 데이터를 요청하고 받아오는 객체인데, 복잡하고 불편한 점이 있었습니다.예를 들어, 콜백 함수를 사용해야 하고 코드가 길어지는 단점이 있었습니다. 2. fetch란?fetch는 AJAX의 대체로, 네트워크 요청을 보내고 정보를 받아오는 더 간편하고 효율적인 방법입니다.fetch는 Promise 기반이기 때문에, AJAX보다 간편하고 효율적으로 사용할 수 있습니다. ✅ .. 공감수 0 댓글수 0 2025. 2. 21.
[JS] async와 await 01async와 await 이란?Promise를 더 쉽게 사용할 수 있게 해주는 자바스크립트의 기능입니다.async는 함수 앞에 붙여서 비동기 함수로 만들고, await는 Promise가 처리될 때까지 기다리게 만듭니다.1. 비동기란?왜 비동기가 필요한지 비동기(Asynchronous)는 동시에 여러 작업을 처리할 수 있는 방식입니다.예를 들어, 우리가 어떤 작업을 시작했을 때 그 작업이 끝날 때까지 기다리지 않고 다른 일을 할 수 있게 해주는 방식이죠. ✅ 왜 비동기가 필요한가요?응답성 유지: 비동기를 사용하면, 네트워크 요청 중에도 웹 페이지나 앱을 계속 사용할 수 있습니다.리소스 효율성: 기다리는 동안 다른 일을 처리할 수 있어 자원을 더 잘 활용할 수 있습니다.시간 절약: 긴 작업을 기다리는 .. 공감수 0 댓글수 0 2025. 2. 20.
[JS] 프로미스 (Promise) 01Promise자바스크립트에서 비동기 작업이 끝날 때, 그 결과를 알려주는 "약속"과 같은 역할의 오브젝트입니다.예를 들어, 어떤 일이 잘 처리되면 결과를 알려주고, 문제가 생기면 에러를 알려주는 방식이죠. 1. Promise의 흐름: 생성, 사용, 결과 처리 ✅ Producing Code (프로듀서 코드): Promise를 생성하는 코드입니다.즉, 우리가 약속을 만들고 그 약속이 끝날 때까지 기다리는 코드라고 할 수 있습니다.이 코드는 어떤 일이 완료되기를 기다리고, 완료되면 결과를 알려줄 resolve 또는 에러를 알려줄 reject를 호출합니다. ✅ Consuming Code (컨슘 코드) : Consuming Code는 Promise를 사용하는 코드입니다.즉, Promise가 완료될 때까지 기.. 공감수 1 댓글수 1 2025. 2. 20.
[JS] 콜백 (Callback) 01콜백 (Callback) 이란?자바스크립트는 비동기적으로 작동하며, 싱글 스레드에서 한 번에 하나의 작업만 처리할 수 있습니다.이때 콜백은 다른 함수가 실행을 마친 후 실행되는 함수입니다.콜백을 사용하면 비동기 작업이나 특정 작업이 끝난 후 결과를 받아서 다음 작업을 실행할 수 있습니다. return과 Callback 은 다른 건가요?: 네 return과 콜백함수는 다른 개념입니다. ✅ return- 함수에서 값을 반환하는 데 사용되는 키워드입니다.- 함수에서 값을 반환하는 키워드로, 함수 실행을 종료하고 값을 반환하여 다른 곳에서 사용할 수 있게 합니다. ✅ 콜백 함수 (Callback)- 다른 함수에 인자로 전달되어 나중에 호출되는 함수입니다.- 콜백 함수는 다른 함수에 전달되어, 해당 함수.. 공감수 0 댓글수 0 2025. 2. 20.
API와의 첫 데이트, 너무 떨지 마! ✅❌📌👉01API (Application Programming Interface) 란API는 Application Programming Interface(애플리케이션 프로그램 인터페이스)의 줄임말로, API는 애플리케이션 간에 데이터를 주고받을 수 있도록 돕는 "언어"라고 할 수 있습니다. 예를 들어, 날씨 앱을 켤 때, 앱은 날씨 정보를 제공하는 API에 "오늘 날씨가 어때요?"라고 묻고, API는 날씨 정보를 반환합니다. 이렇게 서버와 클라이언트 간에 데이터를 교환할 때 API가 중요한 역할을 하죠. 1. API 역할API는 클라이언트와 서버 간에 데이터를 주고받는 중요한 역할을 합니다.예를 들어, 우리가 웹사이트에서 정보를 요청할 때, 서버에서 데이터를 받아오는 방식을 API가 처리한다고 생각하.. 공감수 1 댓글수 1 2025. 2. 19.
[Review] 한입 React.js 강의 후기 01강의소개이 강의는 리액트를 처음 배우는 사람들을 위한 강의입니다! 이 강의를 들으면 리액트가 무엇인지, 어떻게 사용하는지 기본 개념을 배울 수 있어요.처음에 자바스크립트 기초개념을 먼저 복습느낌으로 배우고 리액트를 시작해서 더 강의가 잘 들어옵니다.강사님이 설명을 굉장히 깔끔하고 쉽게 해 주셔서 어려운 부분도 쉽게 이해할 수 있고 질문에 대한 답도 빨라서 좋습니다! 특히 강사님께서 챌린지를 같이 운영해주셔서, 하루하루 강의를 듣고 과제를 하면서 개념을 반복적으로 익힐 수 있었습니다. 이 과정을 통해 리액트에 대한 자신감도 생기고, 실제로 리액트를 활용한 웹 애플리케이션을 만드는 데 필요한 기술을 배울 수 있었습니다. 👉인프런 강의 바로가기 한 입 크기로 잘라 먹는 리액트(React.js) : 기초.. 공감수 2 댓글수 2 2025. 2. 18.
[React] Redux와 Redux Toolkit 01Redux 란Redux는 애플리케이션에서 여러 컴포넌트들이 공통으로 사용하는 데이터를 전역 상태라고 부르는데,이 상태를 효율적으로 관리하는 도구입니다. React 같은 라이브러리에서는 컴포넌트들이 서로 독립적으로 동작하는데,여러 컴포넌트들이 같은 데이터를 필요로 할 때 Redux를 사용해서 상태를 한 곳에서 관리할 수 있습니다. ✅ 필요한 모듈: redux와 react-redux 모듈을 사용합니다. 📌 왜 Redux를 배워야 할까? Redux는 많은 개발자들이 사용하는 인기 있는 라이브러리입니다.예를 들어, npm trends에서 Redux의 다운로드 수를 보면 얼마나 많은 사람들이 이 도구를 사용하고 있는지 알 수 있습니다. 📌 FLUX 패턴?FLUX 패턴은 상태를 효율적이고 예측 가능한 방식.. 공감수 0 댓글수 0 2025. 2. 18.
[React] 최적화 전략 2탄 (lazy, Suspense와 코드 스플리팅, Debounce, Throttle) 01lazy와 Suspense1. lazy lazy는 컴포넌트를 필요할 때만 로딩하는 기능으로, 초기 로딩을 최적화할 수 있습니다.이는 대개 큰 애플리케이션에서 유용하게 쓰입니다. ✅ 사용법import React, { Suspense, lazy } from 'react';const MyComponent = lazy(() => import('./MyComponent'));function App() { return ( Hello, world! Loading...}> );}export default App;React.lazy는 동적으로 컴포넌트를 불러오는 함수입니다.import() 구문을 사용하여 컴포넌트를 동적으로 불러옵니다.2. Suspense .. 공감수 0 댓글수 0 2025. 2. 17.
[React] React 스타일링 (SCSS, Styled-Components, Tailwind CSS) 01SCSS (SASS의 최신 버전!)SCSS는 CSS의 확장방식으로, 더 편리하게 적용할 수 있고 강력한 기능을 제공합니다. 가능성 증가, 재용성 강화, 중차구조 가능, 반복문 및 단어를 사용하여 간단하게 작성할 수 있습니다. ✅ 파일 확장자:. scss: .scss1. SCSS 설치 방법npm install sass그리고 확장자가. scss인 파일을 생성해서 사용하면 됩니다!예를 들어 App.scss 파일을 만들고 이렇게 작성할 수 있어요. 3. 기본 문법 1) 변수 사용하기한 번 설정한 변수는 여러 곳에서 재사용할 수 있어서 편합니다!$main-color: #FF6F3C;button { background-color: $main-color; color: white;} 2) 중첩(Nesting.. 공감수 1 댓글수 1 2025. 2. 17.
[Project] 감정 일기장 01프로젝트 소개이 프로젝트는 "한입 크기로 잘라먹는 리액트" 강의의 마지막 실습 프로젝트입니다.React와 JavaScript를 활용하여 감정 일기장을 제작하였으며, 단순한 일기가 아니라 감정을 함께 기록할 수 있는 특별한 일기장입니다. 이번 프로젝트에서는 외부 폰트 적용법, 이미지 최적화 방법, 다양한 페이지 구성, 자주 사용하는 요소의 컴포넌트화, 그리고 실제 웹 배포 과정까지 실습했습니다. 1. 폴더 구조컴포넌트를 분리하여 구조를 깔끔하게 유지하였고, 스타일(CSS) 파일은 styles 폴더에서 관리한 후 global.css에서 한 번에 export하여 사용했습니다.\---src | App.jsx | index.css | main.jsx +---assets |.. 공감수 1 댓글수 1 2025. 2. 17.
Vercel 배포, 누르기 전에 딱 5분만 확인! React 프로젝트를 배포하기 전에 반드시 체크해야 할 사항들이 있습니다.이 과정을 건너뛰면 배포 후에 제목이 이상하게 나오거나, 썸네일이 안 뜨거나, 파비콘이 적용되지 않는 문제가 생길 수 있습니다.이 글에서는 배포 전 사전 작업부터 Vercel을 이용한 배포 과정까지 한 번에 정리해 보겠습니다!01배포 전 작업1. 페이지 타이틀 설정하기브라우저 탭에 표시되는 제목은 기본적으로 index.html의 태그에서 설정됩니다. 하지만 React는 SPA(Single Page Application)이므로,각 페이지마다 다른 타이틀을 설정하려면 추가 작업이 필요합니다.이를 위해 커스텀 훅을 사용하여 페이지별로 동적으로 타이틀을 변경할 수 있습니다.import { useEffect } from "react";.. 공감수 0 댓글수 0 2025. 2. 17.
[React] 웹 스토리지 (Web Storage) React의 상태(state)는 기본적으로 자바스크립트 변수에 저장되기 때문에 페이지를 새로고침하거나 브라우저를 닫으면 초기화됩니다.하지만 웹 스토리지(Web Storage)를 활용하면 데이터를 브라우저에 저장하여 새 로고침해도 유지할 수 있습니다.데이터를 영구적으로 보관하려면 외부 데이터베이스를 사용해야 하지만,간단하게 데이터를 저장하고 관리하는 방법으로 웹 스토리지를 활용하는 것이 좋습니다.01웹 스토리지 란?웹 스토리지는 웹 브라우저에 기본적으로 내장된 데이터 저장소입니다.따로 라이브러리를 설치하지 않고, 자바스크립트 내장 함수만으로 쉽게 데이터를 저장하고 불러올 수 있습니다.주요특징으로는브라우저가 기본적으로 제공하는 데이터 저장소별도 설치 없이 자바스크립트 내장 함수로 접근 가능새 로고침해도 데이.. 공감수 1 댓글수 1 2025. 2. 16.
[React] 페이지 라우팅 (Routing) 웹 개발을 하다 보면 페이지 이동이 필요할 때가 많습니다. React에서도 이런 페이지 이동을 구현할 수 있는데요, 이를 "라우팅(Routing)"이라고 합니다. 이번 글에서는 라우팅이 무엇인지, 그리고 React에서 어떻게 라우팅을 설정하는지 쉽게 설명해 드릴게요!01페이지 라우팅이란?라우팅은 사용자가 특정 URL(경로)로 이동하면, 해당하는 페이지를 화면에 보여주는 것을 의미합니다. 예를 들어, /home 경로를 입력하면 홈페이지가, /about 경로를 입력하면 소개 페이지가 보이는 식이죠.1. MPA (Multi Page Application) 방식전통적인 웹사이트는 MPA 방식으로 동작합니다. 즉, 서버가 여러 개의 HTML 파일을 미리 가지고 있으며, 사용자가 특정 페이지를 요청하면 서버가 해당.. 공감수 1 댓글수 1 2025. 2. 13.
[Node] Node.js & NPM 기초 개념 프론트엔드 개발을 하다 보면 자연스럽게 Node.js와 NPM을 접하게 됩니다.하지만 처음 배우는 개발자들에게는 "이게 뭔데?" 하는 의문이 들 수 있습니다.이번 글에서는 Node.js, NPM, 패키지 관리, Babel 등 꼭 알아야 할 개념을 쉽고 간단하게 정리해보았습니다!01Node.js란?Node.js는 브라우저 밖에서도 JavaScript를 실행할 수 있도록 만들어진 런타임 환경입니다.기존에는 JavaScript가 웹 브라우저에서만 실행되었지만, Node.js 덕분에 백엔드 개발도 가능해졌습니다. ✅ Node.js 등장 전: JavaScript는 프론트엔드(클라이언트 측)에서만 실행 가능✅ Node.js 등장 후: JavaScript를 백엔드(서버 측)에서도 실행 가능 즉, Node.js 덕분.. 공감수 1 댓글수 1 2025. 2. 10.
[React] 컨텍스트 (Context) React에서 props만으로 데이터를 전달할 때 불편한 점이 많습니다.부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하려면,중간 단계에 있는 모든 컴포넌트가 불필요하게 props를 받아야 하는 문제가 발생합니다. 이 문제를 해결하기 위해 React는 Context API라는 기능을 제공합니다.이 글에서는 Context의 개념부터 사용법, 최적화 방법까지 하나씩 알아보겠습니다.01Context가 필요한 이유1. Props의 단점: Props DrillingReact에서 컴포넌트 간 데이터를 전달할 때 보통 props를 사용합니다.하지만 부모 → 자식 → 손자로 props를 계속 전달해야 하는 경우,중간 단계의 컴포넌트들이 불필요한 props를 받아야 하는 문제가 발생합니다.이러한 현상을 Props Dri.. 공감수 0 댓글수 0 2025. 2. 10.
[React] 최적화 함수 1탄 (useMemo, React.memo, useCallback) 01최적화(Optimization)React는 상태(state)나 props가 변경될 때마다 컴포넌트를 다시 렌더링 합니다.이 과정이 반복되면 성능이 저하될 수 있기 때문에 최적화(Optimization)가 필요합니다. React에서 사용할 수 있는 최적화 기법에는 크게 3가지가 있습니다.불필요한 연산 방지 → useMemo불필요한 렌더링 방지 → React.memo불필요한 함수 재생성 방지 → useCallback이제 각각의 개념을 하나씩 살펴보겠습니다.02useMemo - 불필요한 연산 방지useMemo는 메모이제이션(Memoization) 기법을 활용하여 불필요한 연산을 방지하는 React 훅입니다. ✅ 메모이제이션(Memoization)이란?이전에 계산한 값을 저장해 두고, 필요할 때 다시 꺼내 .. 공감수 0 댓글수 0 2025. 2. 10.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.