윤시의 블로그

문제주어진 문자열에서 각 문자가 마지막으로 등장한 위치와 현재 위치 사이의 거리를 리스트로 반환하는 문제이다.만약 해당 문자가 처음 등장한다면 -1을 반환한다.https://school.programmers.co.kr/learn/courses/30/lessons/142086 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 풀이def solution(s): answer = [] # 결과를 저장할 리스트 letter2idx = {} # 각 문자가 마지막으로 등장한 위치를 저장할 딕셔너리 for idx, letter in enumerate(s): if letter in letter2idx: ..

React에서 Axios 사용하기Axios는 HTTP 요청을 간편하게 처리해주는 JavaScript 라이브러리이다. 주로 서버와 데이터를 주고받을 때 사용된다. Axios는 Promise 기반으로 동작하여 비동기 요청을 쉽게 처리할 수 있다. 이를 통해 React와 같은 프론트엔드에서 서버와의 상호작용을 원활하게 구현할 수 있다. 1. Axios 설치하기Axios는 기본적으로 별도의 설치가 필요하다. 다음 명령어로 설치할 수 있다.npm install axios설치 후, React 컴포넌트에서 Axios를 불러와 사용할 수 있다.import axios from 'axios';2. Axios와 Fetch의 차이점 AxiosFetch설치 여부별도 설치 필요 (npm install axios)브라우저 내장 A..

Next.js란?Next.js는 React 기반의 프레임워크로, 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원한다. React의 단점을 보완하기 위해 만들어졌으며, SEO(검색 엔진 최적화)와 성능 최적화에 강점을 가진다. Next.js의 특징파일 기반 라우팅파일 이름에 따라 라우팅이 자동으로 설정된다.서버 사이드 렌더링(SSR)요청 시 서버에서 HTML을 생성하여 브라우저에 전달한다.정적 사이트 생성(SSG)빌드 시 HTML을 생성하여 배포 후에는 CDN에서 제공한다.클라이언트 사이드 렌더링(CSR)React의 기본 렌더링 방식으로, 브라우저에서 모든 렌더링이 이루어진다.API 라우트별도의 서버를 구축하지 않고도 API 엔드포인트를 생성할 수 있다.주요 개념서버 사이드 렌더링(SSR)..

React Router란?React Router는 React 애플리케이션에서 클라이언트 측 라우팅을 구현하기 위해 사용되는 라이브러리이다.클라이언트 측 라우팅은 URL이 변경될 때 전체 페이지를 다시 로드하지 않고도 동적으로 컴포넌트를 렌더링할 수 있도록 해준다. 이를 통해 React로 제작된 SPA(Single Page Application)에서도 다양한 페이지를 탐색하는 것처럼 보이게 할 수 있다. React Router의 주요 특징페이지 새로고침 없이 URL 기반 탐색 가능동적 라우팅 지원 (예: /user/:id와 같은 URL)중첩된 라우트와 글로벌 레이아웃 관리 가능사용자 경험 향상을 위한 SPA 구성 지원  React Router 설치 및 기본 설정React 애플리케이션에 React Route..

1. React 스타일링 방식 개요React에서 주로 사용되는 스타일링 방법 일반 CSS가장 간단한 방식으로, HTML에서 사용하던 CSS 파일을 React 컴포넌트에 적용 CSS ModulesCSS 클래스 이름을 컴포넌트 범위로 제한하여 스타일 충돌을 방지하는 방식 Styled-ComponentsCSS-in-JS 방식으로, 컴포넌트 내부에서 CSS를 작성하며 동적 스타일링과 컴포넌트 기반의 스타일 관리를 지원 CSS FrameworksBootstrap, TailwindCSS, MUI(Material-UI)와 같은 프레임워크를 사용2. 일반 CSS특징HTML과 동일하게 CSS 파일을 작성 후 import하여 사용한다.가장 기본적이고 직관적인 방법이다.코드 예제// App.css.container { b..

React Hooks란?React Hooks는 함수형 컴포넌트에서도 React의 상태 관리 및 생명주기(lifecycle) 기능을 사용할 수 있게 해주는 기능이다. 이전에는 클래스 컴포넌트에서만 가능했던 이러한 기능들을 함수형 컴포넌트에서도 활용할 수 있도록 만들어졌다. React 16.8에서 처음 도입되었다. [주요 장점]코드 재사용성: 반복적인 로직을 간결하게 처리 가능.가독성 향상: 함수형 컴포넌트에서의 간단한 구문 덕분에 코드가 더 명확함.복잡한 로직 처리 가능: 상태 관리와 비동기 작업 등을 간단하게 구현할 수 있음. 주요 Hooks와 활용법1. useState - 상태 관리useState는 컴포넌트의 상태를 관리하는 데 사용된다. 상태는 컴포넌트에서 데이터의 현재 값을 의미하며, 변경되면 컴포..

Zustand란?Zustand는 독일어로 "상태"라는 뜻으로, 리액트 상태 관리를 간단하고 효율적으로 할 수 있게 도와주는 라이브러리이다. 상태(state)를 더 직관적이고 깔끔하게 관리할 수 있도록 설계되었다.왜 Zustand를 사용할까?리액트에서 기본적으로 제공하는 useState와 useReducer를 사용해도 상태 관리는 충분히 가능하다. 하지만 다음과 같은 경우, Zustand가 더 좋은 대안이 될 수 있다.1. 상태가 복잡해질 때프로젝트가 커질수록 상태가 여기저기 분산되어 관리하기 어려워진다.여러 컴포넌트에서 동일한 상태를 공유하거나, 상호작용해야 할 때는 props를 계속 전달해야 해서 코드가 복잡해진다.Zustand는 중앙 저장소(store)를 만들어 상태를 한 곳에서 관리하고, 필요한 컴..

📌 useEffect란?useEffect는 React에서 side effects를 처리하기 위한 훅(Hook)입니다. 컴포넌트가 렌더링될 때 또는 특정 상태(state)가 변경될 때 실행되는 코드(예: 데이터 가져오기, DOM 업데이트 등)를 관리하는 데 사용됩니다.React가 무언가를 할 때 실행해야 하는 코드가 있다면 useEffect를 사용한다.📌 useEffect의 기본 문법useEffect(() => { // 실행할 코드}, [dependency]);첫 번째 인수: 효과 함수입니다. 여기에서 실행할 코드를 작성합니다.두 번째 인수: 의존성 배열입니다. 이 배열에 지정한 값이 변경될 때만 효과 함수가 실행됩니다.의존성 배열이 없다면: 컴포넌트가 매번 렌더링될 때 실행됩니다.빈 배열([]): ..

열거형(Enum)열거형(enum)은 타입스크립트에서 특정 값들의 집합에 이름을 부여해 가독성과 유지보수성을 높이는 데 사용한다. 일반적으로 상수들의 묶음을 정의할 때 유용하다.왜 열거형을 사용할까?숫자나 문자열 값들에 의미있는 이름을 붙여 가독성을 높임상수값들을 일관되게 관리하기 위해서1. 숫자 열거형숫자 열거형은 기본적으로 값이 0부터 시작하며, 값이 자동으로 1씩 증가한다.enum Direction { Up, // 0 Down, // 1 Left, // 2 Right // 3}console.log(Direction.Up); // 출력: 0console.log(Direction.Right); // 출력: 3→ 값을 명시하지 않으면, 0부터 시작해 1씩 자동 ..

제네릭(Generics)이란?제네릭이란 타입을 일반화하여 여러 타입에서 재사용 가능한 코드를 작성할 수 있도록 하는 TypeScript의 기능이다. 제네릭은 코드를 작성하는 시점에 타입을 미리 정하지 않고, 사용하는 시점에 타입을 지정할 수 있게 한다. 제네릭의 기본 구조function getValue(value: T): T { return value;}T는 타입 매개변수(Type Parameter)로, 함수가 호출될 때 구체적인 타입으로 대체된다.getValue 함수는 호출하는 시점에 전달된 값의 타입을 기반으로 동작한다. 제네릭의 특징1. 다양한 타입에 대응 가능const result1 = getValue(100); // T가 number로 대체됨const result2 = getValue("tes..