ChatGPT 선생님과 성장하는 독학 개발자의 기록

RSC A to ZRCC'use client'interface Props { number: number;}export function RCC({ number }: Props) { const [json, setJson] = useState(null); const fetchHandler = async () => { const data = await fetchJson(number); setJson(data); } useEffect(() => { fetchHandler(); }, []); if (json === null) return No Data return ( ... )} RSC..

RCC와 RSC'React Client Component'는 'React Server Component'를 Import 할 수 없다. 그 이유는 'RCC'는 브라우저에서 실행되기 때문에 서버 전용 코드를 실행할 수 없다. 'RSC'는 서버에서 실행되기 때문에 클라이언트의 실행 환경을 필요로 하지 않는다. 즉, 클라이언트에서 실행되는 'RCC'는 서버에서만 실행 가능한 'RSC'를 Import 하는 것이 불가능하다. React Component 종류Clinet Component Server Component Shared Component Shared Component상황에 따라 'RSC' 또는 'RCC'로 사용이 가능한 컴포넌트를 말한다.RSC ←(RSC)--- Shaerd ---(RCC)→ RCC  /..

React 18의 동시성React의 18 버전부터 '동시성(Concurrency)'을 제공하기 위해 노력했다.여기서 동시성이란, 동시에 보이는 것처럼 보이는 것을 말한다. 예로 들면, A 대리가 B 사원에게 C, D, E 업무를 4시까지 처리하라는 업무를 주었고, B 사원은 4시까지 C, D, E 업무를 수행하며 동시에 진행한 것처럼 보이는 것이다. * 병렬성: 실제로 동시에 진행하는 것이다. 예로 들면, A 대리가 B, C, D 사원에게 각각 E, F, G 업무를 주어 동시에 진행되는 것처럼 말이다. 갑자기 왜 18 버전 이야기가 나왔냐면, React의 18 버전부터 'React Server Component'를 제공하기 때문이다. (Next.js 에서는 13 버전부터 React Server Compo..

'Next.js'는 프론트엔드 개발에 필수일까? 아니다.프론트엔드 개발자를 포함해 웹 개발자는 백엔드에서 대용량 데이터를 잘 처리해서 프론트엔드에서 클라이언트를 동적으로 잘 활용하는 것이 우선이다. 그렇다면, 이직 준비에는 필수일까? 그럴 수도 있다. 많은 IT 기업에서 'React'와 함께 'Next.js'를 자격요건이나 우대사항에 기록해두고 있다. 'Next.js'는 개발에 필수는 아니지만, 이직에는 필수일 수 있다. Next.js그렇다면, 'Next.js'는 무엇일까?'Next.js'는 React 기반의 프레임워크로, 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 쉽게 구현할 수 있도록 설계된 도구이다. Vercel에서 개발하였으며, 성능 최적화와 개발자 경험에 중점을 둔 기능을 제공하..

2025년 1월, 원티드 프리온보딩 챌린지의 프론트엔드 2주차 강의를 간략하게 정리한 내용입니다. 유지보수에 쓰이는 시간을 줄이기내용에 들어가기 전, '리팩토링 원칙'에 대해 알고 있습니까?리팩토링을 하는 이유는 '성능' 또는 '품질'이다. 에릭 에반스는 네 가지의 코드 품질 규칙을 생성했다.인터페이스는 단순하게 구현하고, 함수와 모듈을 추출하기테스트 코드를 짜고 코드 동작을 확인하기가능하면 이름을 명확하게 짓기가능하면 기능은 애매하지 않게 명확한 하나의 기능으로 구현하기 최소한의 리팩토링 규칙을 만드는 것이 좋다. 처음부터 빽빽하게 코드를 작성하면 영원히 끝나지 않게 될 것이다.코드 중복 피하기하나의 함수는 하나의 일만 하는 단일 책임 지키기비슷한 기능을 가졌다면 한 곳에 모아두기간단하게 짜기 아마 실..

2025년 1월, 올 해의 첫 번째 원티드 프리온보딩 프론트엔드 1주차 강의를 간략하게 정리하는 글이다.자세한 내용은 작성할 수 없어 최대한 간략하게 작성하려고 한다. 프론트엔드가 하는 일`프론트엔드`는 화면을 그리고 서비스와 사용자 간 일어나는 모든 상호작용을 만든다. 그리고 수반된 많은 일을 한다. 앱/웹 관리각 플랫폼에 맞춰 배포버전 관리플랫폼 이슈 대응개발화면 제작인터렉션앱 내 데이터 관리권한 처리환경 대응디바이스 사양언어 스펙 변화법적 규제정책 변화(환경 변화) 레거시를 다루는 방법업무에 필요한 시간이 많이 부족하기 때문에 시간을 아끼기 위해 유지보수에 쓰이는 시간을 줄이는 것은 중요하다.이  때, 레거시를 어디까지 고쳐야 할 지에 대한 고민이 필요할 것이다. `레거시`는 무엇일까? 그리고 왜 ..

2024년 09월 원티드 프론트엔드 프리온보딩 간단 요약 - 이벤트 루프 이벤트 루프란?인터넷에서 `이벤트 루프`에 대해 검색해보면 다음과 같은 내용이 나온다. `비동기`적으로 실행되는 작업들을 관리하고, `콜 스택`에 함수가 쌓이고, `비동기` 함수는 `큐`에 쌓는다. 자바스크립트의 `비동기 처리`를 관리하는 매커니즘이고, `싱글스레드` 언어 자바스크립트가 `멀티 스레드`로 작업을 동시에 할 수 있게 도와주는 것이다. `이벤트 루프`를 정의하자면, 싱글 스레드로 동작하는 자바스크립트를 브라우저에서 동시성을 제공하기 위한 동작 방식을 의미한다. 여기서 자바스크립트는 동기적으로 작동하는 언어이다. 여기서! 자바스크립트가 싱글 스레드인 것과 자바스크립트 런타임이 싱글스레드인 것이 같다고 생각하면 안 된다. ..

2024년 08월 백엔드 챌린지 간단 요약 백엔드 포지션의 업무는 무엇일까?단순하게 말해, '프로그래밍'으로 '문제를 해결'해야 하는 직무입니다. 그렇다면, 개발 시장에서 신입보다 경력직이 경쟁력을 갖춘 이유가 무엇일까요?프로그래밍은 문제를 해결하는 것이라고 말했습니다. 그렇기 때문에 기술에 대한 이해도, 개발 환경에 이해도, 도메인 이해도 등 회사에서 개발 환경을 경험하고, 실제로 기능을 만들어 본 개발자가 유리한 것 입니다. 즉, 경력직의 경험은 '회사의 비즈니스 문제를 해결'하는 것에 있습니다. 객체 지향 설계 원칙 준수각 도메인 객체를 명확히 분리하여 책임을 부여해야 합니다.예를 들어, Order 클래스는 주문 자체를, OrderLine 클래스는 개별 주문 항목을, ShippingInfo 클래스는..