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

나는 새로운 기술을 학습하는 것에 관심이 많다. 그래서 'React' 다음에 'Next.js'에 대한 궁금함이 생겼고, 공부를 시작했다. 나만의 공부 방법은 다음과 같다. 동영상 강의, 공식 홈페이지 등 이론을 간단하게 학습한다. (1~2회 이론 내용 읽기)간단한 이론 학습을 마친 뒤, 실습을 진행하여 직접적으로 배운다. 위의 학습 방법을 기반으로 학습 진행 과정에서 오늘 하루의 주요 뉴스, 종합을 포함한 다양한 카테고리 뉴스들을 쉽게 볼 수 있는 프로젝트 'Quick-News' 서비스를 개발하기 시작했다. 간단하게 학습한 이론을 기반으로 진행한 이 프로젝트의 처음 폴더 구조는 대략적으로 아래와 같았다. pagse - page - api - utils - type 위 처럼 폴더 구조를 잡..

자신의 단 한 장의 최고의 사진을 공유하는 서비스이자 개인 프로젝트인 'YooP'에 기존에 없었던 새로운 게시물이 나타났다. 바로 예상하지 못한 회원이 나타난 것이다. 단 한 명의 회원을 통해 'YooP' 서비스의 문제점을 알 수 있었다.'YooP' 서비스에서 게시물을 작성할 때, 이미지 첨부와 글 작성을 필수로 포함될 수 있도록 유효성 검사가 이루어져 있다. 그래서 만약에 이미지를 첨부하지 않거나 글을 작성하지 않은 채 작성하게 되면 이미지를 첨부하거나 글을 작성하라는 메세지가 나타나도록 구현되어 있다.  그러나, 한 명의 고객이 작성한 게시글에는 이미지가 첨부되어 있지 않고 글만 포함되어 있는 채 작성되어 있었다. 또 다른 문제는 회원 프로필 사진이 엑스박스(이미지가 없어서 발생하는 문제)로 나타나 ..

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년 안에 개발하는 것을 목표로 하고 있다.위의 서비스를 통해 나의 일정을 쉽게 기록하고 확인하고, 계획이나 기억해야 할 메모를 기록하는 용도로 활용하고 싶다.