본문 바로가기
리액트 심화 커리큘럼 2주차 : React 비동기 처리와 데이터 패칭 라이브러리 2주 차 : React 비동기 처리와 데이터 패칭 라이브러리목표비동기 처리의 기본 개념인 Promise, async/await, fetch 사용법을 이해하고 설명할 수 있다.React 컴포넌트에서 비동기 요청을 어떻게 다뤄야 하는지 (useEffect, 상태관리 등)을 구현해 볼 수 있다.데이터 패칭 라이브러리(SWR, TanStack Query 등)의 기본 사용법과 장점을 예제와 함께 설명할 수 있다.직접 fetch와 라이브러리 방식의 차이를 비교하여, 실무에서 적절한 선택 기준을 말할 수 있다.loading, error, retry, cache, revalidate 등 실전 대응 키워드를 개념과 함께 체감할 수 있다.참고 키워드fetch(), async/await, useEffect()SWR: use.. 2025. 6. 20.
NotebookLM이란? 자료를 정리하고 관리하는 것은 생각보다 귀찮고 어렵다.. 그러나 자료를 정리하면서 관리한다면 생산성은 엄청나게 오를 것이다! 그것을 편하게 해주는 것이 바로 NotebookLM이다. 이것도 AI인데, 정말 유용하다. (근데 많이 모르는 것 같다;)공식 사이트 >사이트 링크는 다음과 같다.https://notebooklm.google.com/구글에서 만들었고, 정보의 홍수에서 우리가 제대로 나아가도록 도와줄 것이다.사용하는 방법은 심플하긴 하다. 디테일한 것은 다음 영상들을 참고해 주자. (이렇게 안 써두면 까먹을 거 같음)https://www.youtube.com/watch?v=J_Zkj4pu3R4https://youtu.be/BAcV-5QnFbE?si=PkeV7jopbfv3F30m여럿 방법이 있지만, .. 2025. 6. 17.
깃허브 오가니제이션 만들기 깃허브를 이용해서 "회사"나 대규모 팀프로젝트를 위한 "오가니제이션"을 만들 수 있다.혹은 여러 프로덕트를 관리하는 용으로도 쓸 수 있기에 되게 좋은 기능이다.이를 어떻게 만들고 사용하는지에 대한 글을 심플하게 여기 기록으로 남겨본다.(관련 글)https://oliviakim.tistory.com/155 [GitHub] 협업을 위한 Organization 만들기깃허브에서는 팀 작업용 조직 계정을 사용해 협업을 진행할 수 있다. 개인 계정으로 조직 계정에 참여해 공유 프로젝트에 대해 공동 작업을 할 수 있는데, 바로 Organization이다. Organization 생성oliviakim.tistory.com+ (오가니제이션은 추후 글을 수정하거나 추가할 수도 있음) 2025. 6. 13.
커서 ai로 코딩하기. 바야흐로 대 "AI" 시대. 코딩에 특화된 AI도 정말 많이 나왔다. 그중에서 유명한 "커서"가 있다. 뭐 물론 커서 말고도 다른 AI들이 많다. 챗GPT나 클로드... 코파일럿 등등.. 그러나 이 글에서는 커서 AI에 대해서만 이야기하겠다.공식 홈페이지https://www.cursor.com/ Cursor - The AI Code EditorBuilt to make you extraordinarily productive, Cursor is the best way to code with AI.www.cursor.com공식 홈페이지 링크는 다음과 같다. 참고하길 바란다.https://velog.io/@eunbinn/cursor-ai-tips-react-nextjs?utm_source=substack&utm.. 2025. 6. 12.
리액트 심화 커리큘럼 1주차 : Next.js App Router에서의 렌더링 전략 이해 목표Server Component와 Client Component의 차이를 구분할 수 있다.Next.js의 fetch() 사용 위치와 옵션에 따라 어떤 렌더링 전략이 적용되는지 설명할 수 있다.SSR, SSG, ISR, CSR의 개념과 차이를 실제 코드 예제를 통해 체감할 수 있다.어떤 상황에서 어떤 렌더링 전략이 적절한지 판단할 수 있다.참고 키워드cache: 'force-cache' / 'no-store'next: { revalidate: N }'use client'와 fetchServer Component의 async 동작HTML에 포함되는 시점, 클라이언트 JS 필요 여부공유 방식발표 or 코드 예제 (5분 내외)예제 페이지 1개 이상 (/ssr, /csr, /isr 등)Server Compone.. 2025. 6. 6.
context7에 대하여 우리가 AI를 이용해서 개발을 할 때에 가장 불편한 것이 무엇일까? 바로 ..할루시네이션그렇다. 할루시네이션이다. 특히 "버전"의 차이로 인한 할루시네이션이 존재한다. 이는 라이브러리의 업데이트 혹은 언어나 프레임워크의 업데이트에 의해서도 생긴다.이런 것을 "매 번" AI를 쓸 때마다 세팅을 해야 한다면 엄청나게 불편할 것이다. 이를 방지하기 위한 것이 바로 context7이다.공식 문서 링크 >https://context7.com/ Context7 - Up-to-date documentation for LLMs and AI code editorsGenerate context with up-to-date documentation for LLMs and AI code editorscontext7.com공식.. 2025. 6. 5.
깃 명령어 모음집 깃을 사용하다 보니, 내가 한 번 깃 명령어를 정리해야겠다는 생각이 들었다. 이 글에 깃에 관한 여러 명령어를 작성할 것이다. (앞으로 수정하면서 추가될 수 있음.)git 하위 디렉토리를 생성 (저장소 생성)만일 당신의 프로젝트에 git을 할당해서 디렉토리를 추적하고 싶다면? 다음의 명령어를 기입하자.git init소스 코드를 클론하기당신이 팀원으로 팀프로젝트를 진행하거나 혹은 어떤 코드를 그대로 가져와서 작업을 해야 한다면? 깃 클론을 이용해 보자.git clone https: ~~URL예시를 보이자면, 위와 같은 레포지토리가 있다고 가정하자. 그럼 위에 code 부분을 클릭하면..https에 해당되는 URL이 있다. copy 버튼을 누르고 본인 에디터로 가서 git clone을 해주면 된다.예시 클론.. 2025. 5. 23.
TypeScript와 TypeScript+SWC의 차이 우리가 리액트를 vite로 프로젝트 빌드를 할 때에 조건을 선택하게 되는데, 이 중 그냥 타입스크립트랑 타입스크립트 + SWC인 부분이 있다. (자바스크립트도 똑같이 나옴)그 차이가 무엇인지에 대한 좋은 글이 있어서 공유해 본다.https://velog.io/@castillou/TypeScript%EC%99%80-TypeScriptSWC%EC%9D%98-%EC%B0%A8%EC%9D%B4 TypeScript와 TypeScript+SWC의 차이Vite를 사용해 React 프로젝트를 설정할 때마다 보이는 두 가지 선택지가 있다. 바로 TypeScript와 TypeScript+SWC. 이 두 옵션은 어떤 차이가 있기에 나뉘어 있을까? 단순히 옵션을 선택하는 것보다 그 차velog.io 2025. 5. 22.
4기 카카오 프론트 전체 스터디 - 리액트 4주차 (SPA 구조 + Next.js & TS 프리뷰) 아마 마지막의 카카오 프론트 전체 스터디 글이 될 거 같다. (4기 한정)이번에는 리액트의 SPA 구조 및 Next.js에 대한 이야기를 할 것이다. (next.js에서는 타입스크립트로 진행함.)목표는 다음과 같다.1. SPA의 구조와 "가짜 페이지 전환" 흐름 이해 2. Next.js 구조(app/, page.tsx)와 타입스크립트 적용 맛보기시작하자.1. SPA의 구조와 "가짜 페이지 전환" 흐름 이해1. 싱글 페이지 애플리케이션(SPA) 구조와 “가짜 페이지 전환” 동작 원리1-1. 전통적 MPA와 SPA의 차이는 다음과 같다.항목 전통적 MPA(멀티 페이지) / SPA(싱글 페이지)페이지 전환서버가 새로운 HTML 전체를 응답 → 브라우저가 문서 완전 교체첫 요청에 단일 HTML + JS 번들을 .. 2025. 5. 17.
리액트 훅에 취하다. 리액트에서 빠지면 섭한 "리액트 hook"이에 대한 설명을 모아둔 유튜브 재생목록이 있어서 내가 복습할 겸... 여기 티스토리에 공유하겠다.https://www.youtube.com/playlist?list=PLZ5oZ2KmQEYjwhSxjB_74PoU6pmFzgVMO React Hooks에 취한다 - 리액트 훅스 쉽게 마스터하기 www.youtube.com(개인적으로 깔끔하게 잘 알려주셨음.) 2025. 5. 12.
4기 카카오 프론트 전체 스터디 - 리액트 3주차 (HTTP 요청 + 주요 Hooks 정리) 시작하기 전에, hook에 대한 공식 문서 링크는 다음과 같다. 참고하자.https://ko.react.dev/reference/react/hooks 내장 React Hook – ReactThe library for web and native user interfacesko.react.dev오늘은 hook에 대한 글을 쓰겠다. 목표이번 글의 목표는 다음과 같다.fetch + useEffect 조합으로 API 요청 흐름 익히기주요 Hook (useState, useEffect, useRef) 실습성능 최적화용 Hook (useMemo, useCallback) 개념 잡기커스텀 Hook 구조 맛보기 (useInput)+ 여기에 커스텀 훅을 만드는 기준은 뭘까? (공통 로직 분리 기준) 에 대한 이야기도 진행해.. 2025. 5. 11.
보일러 플레이트 코드란? 보일러 플레이트 코드가 무엇인가? 컴퓨터 프로그래밍에서 보일러플레이트 코드 ( boilerplate code)는 거의 또는 전혀 변형 없이 여러 군데에서 반복되는 코드 섹션을 뜻한다.쓰면 좋은 점.가장 좋은 건 "개발 속도를 빠르게 만드는" 속도에 있다.어차피 계속 재사용될 코드이기 때문이고, 변형도 거의 없이 쓰기 때문이다.(참고한 글)https://aws.amazon.com/ko/what-is/boilerplate-code/ 상용구 코드란? - 상용구 코드 설명 - AWS보일러플레이트 코드는 여러 가지 상황에서 거의 또는 전혀 변경하지 않고 재사용할 수 있는 컴퓨터 언어 텍스트입니다. 이 용어는 상황에 따라 변경을 최소화하면서 문서 템플릿이나 보일러플aws.amazon.comhttps://brunch.. 2025. 5. 8.
코드 스플리팅에 대해.. 코드 스플리팅에 대한 좋은 글이 있어서 나의 티스토리에 기록으로 남기면서 동시에 공유할 겸 이 글을 작성해 본다.코드 스플리팅이 무엇인가? 우리가 자바스크립트로 애플리케이션을 개발하게 되면, 기본적으로는 하나의 파일에 모든 로직들이 들어가게 된다. 그럼, 프로젝트의 규모가 커질수록 자바스크립트 파일 용량도 커지게 된다. 용량이 커지면, 인터넷이 느린 환경에서는 페이지 로딩속도도 느려질 것.코드 스플리팅을 하게 되면, 지금 당장 필요한 코드가 아니라면 따로 분리시켜서, 나중에 필요할 때 불러와서 사용할 수 있다. 이를 통하여, 페이지의 로딩 속도를 개선할 수 있다.하는 방법> 관련 링크https://velog.io/@velopert/react-code-splitting 리액트 프로젝트 코드 스플리팅 정복하.. 2025. 5. 6.
깃허브 레포지토리의 Public / Private 전환 레포지토리의 전체 공개랑 프라이빗을 전환할 수 있다. (보통 시작은 퍼블릿으로 열어두긴 한다.)이 부분에 대한 좋은 글이 있어서 공유해 본다.https://vipdeveloper.tistory.com/147 GitHub 리포지토리 접근 권한 변경하기: Public에서 Private으로GitHub에서 리포지토리의 접근 권한을 변경하는 것은 협업과 프로젝트 관리에 중요한 요소입니다. 특히 Public과 Private 설정을 적절히 활용하면 코드의 공개 범위와 보안을 효과적으로 관리할 수vipdeveloper.tistory.com이 글을 참고하면 변환하는 방법을 알 수 있다.(프라이빗은 보통 무언가 정보를 보호할 때에 사용한다. 2025. 5. 4.
4기 카카오 프론트 전체 스터디 - 리액트 2주차 (조건부 렌더링, 리스트, 스타일링, 폼 다루기) 이번에는 리액트를 스타일링하는 것 그리고 양식 및 사용자 입력에 대한 폼 다루는 방법을 이야기해 보겠다.목표이를 통해 이룰 목표는 다음과 같다.조건부 렌더링리스트 렌더링 / keyStyled-components / Tailwind CSS폼 다루기하나식 해결해 보자.조건부 렌더링우리는 조건부에 따라서 렌더링을 부분적으로 일으킬 수 있다. 코드를 살펴보자.예시 1 (if문 작성)let content;if (isLoggedIn) { content = ;} else { content = ;}return ( {content} );심플하게 보면, if문을 이용해서 조건부로 렌더링을 할 수 있다.이보다 더 코드를 축약하고 싶다면 삼항연산자를 사용하면 된다.예시 2 (삼항연산자) {isLoggedIn .. 2025. 5. 1.
타입스크립트에서 타입은 집합이다. 타입스크립트에서 타입은 여러 개의 값을 포함하는 집합이다.집합은 동일한 속성을 갖는 여러 개의 요소들을 하나의 그룹으로 묶은 단위를 뜻한다.예를 들어..위 값을 모아둔 집합을 타입스크립트에서는 number타입이라고 부르는 것이다.이에 반해 리터널 타입은 "아주 작은 집합"이라고 볼 수 있다.즉, 숫자형 리터널 타입은 "숫자 타입" 안으로 들어간다.위 숫자 타입이 슈퍼타입(부모타입)으로 부를 수 있고, 밑의 리터널 타입이 서브타입(자식타입)으로 부를 수 있다.타입 호환성 2025. 4. 28.
4기 카카오 프론트 전체 스터디 - 리액트 1주차 (JSX, Props, 컴포넌트 구조) 1주차: JSX, Props, 컴포넌트 구조목표JSX 문법과 HTML과의 차이 이해Props를 통한 데이터 흐름 익히기컴포넌트 분리 및 재사용 기본토론 주제JSX와 HTML의 차이는 무엇인가?JSX 문법과 HTML과의 차이 이해function AboutPage() { return ( About Hello there.How do you do? );}위 문법이 jsx 문법이다. jsx는 javascript + xml을 합친 말이다.AboutHello there.How do you do?위 문법은 HTML이다.리액트는 무조건 "상위 태그"의 부모태그로 감싸있어야 한다. HTML은 뭐 그딴 거 없다.또한, jsx는 자바스크립트 기능도 지원하기 때문에 HTML보다 더 상위의 문.. 2025. 4. 26.
타입스크립트의 void와 never 타입 let a: void;a = undefined;이번에는 타입스크립트의 void와 never 타입을 다룰 것이다. 이번까지의 글로 기초적인 타입은 끝난다. (야호!)void 타입void이란 "공허" 즉, 아무것도 없다는 뜻이다. void는 아무것도 없음을 뜻한다. 예시 코드 >function func2(): void { console.log("hello");}물론 다음과 같이 변수의 타입으로도 void 타입을 지정할 수 있다. 그러나 void 타입의 변수에는 undefiend 이외의 다른 타입의 값은 담을 수 없다.let a: void;a = undefined;이때 tsconfig.json에 엄격한 null 검사 옵션을 해제하면 특별하게 void에도 null을 담을 수 있다.// "strictNullCh.. 2025. 4. 25.
Next.js에서 'use client'를 사용하는 경우 최신 버전인 Next.js 15 기준으로 이야기하겠다.시작하기 전에..기본적으로 Next.js 는 "서버 사이드 렌더링" 으로 렌더링이 된다.리액트에서는 클라이언트 사이드 렌더링을 하는데, 이 부분에서 가장 큰 차이가 난다.SSR / CSR 이 개념은 다음 글을 참고하자.https://codingworld2002.tistory.com/216 SSR 과 CSR (서버 사이드 렌더링/클라이언트 사이드 렌더링)Next.js나 리액트를 배울 때, 서버 사이드 렌더링이랑 클라이언트 사이드 렌더링 이야기가 나온다. 간단하게 말하면 렌더링에서 차이가 나는 것인데,서버 사이드 렌더링은 "서버"에서 미리 렌더링codingworld2002.tistory.com근데, 이때 "여러 가지" 경우로 인해 클라이언트 사이드 렌더링.. 2025. 4. 24.
마이크로 서비스 아키텍처이란? 마이크로서비스란?마이크로서비스란 독립적인 서비스들의 모음이 경량화 API를 통해 통신하는 애플리케이션 아키텍처의 한 유형을 말한다.가장 최근 온라인 구매 사이트에 방문했던 때를 떠올려 보자. 제품을 검색하기 위해 사이트에 있는 검색창을 사용했을 것입니다. 이러한 검색이 하나의 서비스가 된다. 또는 관련 제품 추천을 봤거나 장바구니에 상품을 추가함 > 이러한 것들 역시 서비스. 이러한 마이크로서비스들이 합쳐질 때 완벽하게 작동하는 하나의 애플리케이션이 성립된다.더욱 효율적인 애플리케이션 개발 방식마이크로서비스 아키텍처는 하나의 애플리케이션 내에 있는 각 핵심 기능이 독립적으로 존재할 수 있도록 소프트웨어를 구축하는 클라우드 네이티브 접근 방식이다.애플리케이션의 요소들이 이러한 방식으로 분리되면 개발 팀과 .. 2025. 4. 23.