전체 글87 React에서 map 쓰는 패턴 정리 React에서 map 쓰는 패턴 정리React로 개발하다 보면 제일 많이 쓰는 게 진짜 진짜 map이다.리스트만 있다 하면 무조건 map으로 돌리고,API 데이터 받아오면 또 map,컴포넌트 반복 렌더링도 map,필터링해서 다시 그린 다음에도 결국 map… 거의 리액트 개발 = map을 얼마나 예쁘게 쓰느냐 싸움이라고 해도 될 정도. 근데 매번 사용할 때마다“여기 return 써야 했나?”“이건 ()로 감싸는 거였지?”“객체 반환할 때 왜 에러 나지?”이런 헷갈림들이 한 번씩은 꼭 온다. 그래서 이번에 내가 자주 쓰는 패턴 기준으로 map을 정리해봤다.1) map + {} + return 패턴로직이 좀 있는 경우에 내가 자주 쓰는 방식 {}(중괄호)이 나오면 JS는 “아 함수 몸체구나?”라고 인식한다.그.. 2025. 12. 2. Next.js App Router에서 React Query 쓰면서 metadata 쓰기 Next.js App Router에서 React Query 쓰면서 metadata 쓰기🚨 문제 상황QueryClientProvider는 클라이언트 컴포넌트에서만 사용할 수 있다. 그런데 layout.tsx는 기본적으로 서버 컴포넌트임! 그래서 layout 최상단에 use client를 붙이면… 서버 전용 기능인 metadata가 에러 나면서 작동 안 함 😅🧐 왜 metadata는 서버에서만 되냐?Next.js에서 metadata는 서버 컴포넌트에서만 평가되는 정적 정보다.HTML 에 들어가는 title, description, og:image 같은 정보!! 서버에서 미리 렌더링되어 SEO, SSR, SSG 등에 활용된다. 즉, 클라이언트에서 평가하면 안 되는 값이기 때문에use client를 붙이면.. 2025. 9. 6. NestJS 회원가입/로그인 구현하기(feat. MySQL) NestJS 회원가입/로그인 구현하기(feat. MySQL)DB 설계 → Entity → Module/Service → Controller → Auth/JWT 적용 0. DB 연동https://docs.nestjs.com/techniques/configuration Documentation | NestJS - A progressive Node.js frameworkNest is a framework for building efficient, scalable Node.js server-side applications. It uses progressive JavaScript, is built with TypeScript and combines elements of OOP (Object Oriented Pro.. 2025. 8. 30. NestJS 인증 기능 구현하기 NestJS 인증 기능 구현하기본 포스팅은 인프런 강의에서 배운 내용을 개인적으로 정리한 글입니다.nest g resource auth📍회원가입@Entity()export class User extends BaseEntity { @PrimaryGeneratedColumn() id: number @Column() username: string @Column() password: string}@Module({ imports: [TypeOrmModule.forFeature([User])], controllers: [AuthController], providers: [AuthService]})export class AuthModule {}// auth.service.ts@Injectable().. 2025. 8. 10. NestJS 게시판 CRUD 구현하기 NestJS 게시판 CRUD 구현하기본 포스팅은 인프런 강의에서 배운 내용을 개인적으로 정리한 기록입니다.지난 글에서는 NestJS의 기본 개념에 대해 정리해봤다. 그 내용을 바탕으로 실제 게시판 CRUD 기능을 구현해보자![✨BACKEND/📍NestJS] - NestJS 개념 NestJS 개념🐱NestJS 개념본 포스팅은 인프런 강의에서 배운 내용을 개인적으로 정리한 기록입니다.📍 NestJS란https://docs.nestjs.com/ Documentation | NestJS - A progressive Node.js frameworkNest is a framework for building efficient, sbori-note.tistory.com 📍 게시판 만들기Board Module 만.. 2025. 7. 27. NestJS 개념 🐱NestJS 개념본 포스팅은 인프런 강의에서 배운 내용을 개인적으로 정리한 기록입니다.📍 NestJS란https://docs.nestjs.com/ Documentation | NestJS - A progressive Node.js frameworkNest is a framework for building efficient, scalable Node.js server-side applications. It uses progressive JavaScript, is built with TypeScript and combines elements of OOP (Object Oriented Programming), FP (Functional Programming), and FRP (Functional Read.. 2025. 7. 20. 스택/큐 알고리즘 스택/큐 알고리즘📍스택LIFO (Last In First Out): 가장 마지막에 들어온 데이터가 가장 먼저 나가는 구조: 후입선출"쌓는다 → 꺼낸다"의 흐름책 더미, 웹 브라우저의 뒤로가기 버튼처럼, 가장 마지막에 넣은 것이 가장 먼저 처리됨push() – 데이터 삽입pop() – 데이터 꺼내기peek() – 맨 위의 값 확인 (제거는 안 함)JS 코드function createStack() { const items = []; return { push(element) { items.push(element); }, pop() { return items.length === 0 ? null : items.pop(); }, peek() { return.. 2025. 7. 4. 정렬 알고리즘 📍정렬💡정렬(Sorting)이란? 주어진 데이터를 일정한 기준에 따라 순서대로 나열하는 알고리즘📍선택 정렬배열에서 아직 정렬하지 않은 부분 중 가장 작은 값을 찾아서, 그 값을 현재 탐색 위치로 옮기는 것을 반복하는 정렬 방식→ 매번 남은 배열 중 최소값을 찾아 앞으로 보냄JS 코드function selectionSort(arr) { const n = arr.length; for (let i = 0; i 시간복잡도)외부 반복문: n-1내부 반복문: n - i번👉 1 + 2 + 3 + ... + (n - 1) = n(n - 1)/2 = O(n²)📍버블 정렬인접한 두 요소를 비교해 순서가 잘못되었으면 서로 교환하는 정렬 방식JS 코드function bubbleSor.. 2025. 6. 22. UI 컴포넌트 라이브러리 비교(feat. Ant Design, HeadlessUI) UI 컴포넌트 라이브러리 비교[🔥React 뽀개기] - 컴파운드 컴포넌트 + Headless UI 톺아보기 컴파운드 컴포넌트 + Headless UI 톺아보기컴파운드 컴포넌트 + Headless UI 톺아보기Ant Design을 사용하면서 문득 이런 생각이 들었다.“이 구조… 혹시 컴파운드 컴포넌트 패턴인가?”꼬꼬무로 컴파운드 컴포넌트에 대해 알다보니 자연스럽bori-note.tistory.com 지난글에서 컴파운드 컴포넌트 패턴에 대해 정리했었는데, 이번에는 그와 자주 비교되는 방식인 Headless UI 스타일 컴포넌트를 직접 구현해보며 차이를 느껴봤다. 두 패턴 모두 재사용성과 유연성 측면에서 장점이 있지만, 실제로 써보니 구현 방식이나 사용하는 입장에서 느껴지는 차이가 꽤 뚜렷했다. 이번 글에서.. 2025. 6. 1. 이전 1 2 3 4 ··· 10 다음
