블로그

임동근

비전공 독학 개발자의 40일 도전 — 직접 만든 CS 학습 플랫폼 CodeMaster 공개

🚀 안녕하세요, 비전공 독학 개발자입니다CS 전 분야를 40일 안에 정복하겠다고 선언합니다.그리고 그 무기는 제가 직접 만든 플랫폼, CodeMaster입니다.📚 CodeMaster가 뭔가요?codemaster40.com — 직접 설계하고 직접 구현한 CS 학습 플랫폼입니다.✅975개 이상의 학습 콘텐츠✅16개 CS 카테고리 — Java, Spring, Python, 알고리즘, OS, DB, 네트워크, 클린코드, 보안, DevOps, 개발도구, 협업&Git, HTML/CSS, JavaScript, React, AI 활용✅ AI 학습 도우미 챗봇✅ AI 코드 리뷰어 (Monaco Editor 탑재)✅ AI 모의 면접 시뮬레이터 (레이더 차트 분석)✅ TensorFlow.js 이미지 분류기✅ YOLO 기반 번호판 인식 데모✅ Pyodide 기반 데이터 분석 플레이그라운드 (브라우저에서 Python 실행!)남이 만든 플랫폼으로 공부하는 게 아니라, 직접 만든 플랫폼으로 직접 공부합니다.🗺 홈 화면 — 16개 카테고리 한눈에아래는 실제 CodeMaster 메인 화면입니다. 총 975개 콘텐츠, 16개 카테고리로 구성되어 있습니다.📅 40일 로드맵 — D1부터 D40까지하루 평균 19개 콘텐츠, 총 1016개 콘텐츠로 구성된 체계적인 40일 로드맵입니다.D1 — Java 입문 & 기초 문법 (6시간)D2 — Java 객체지향 OOP (8시간)D3 — Java 핵심문법 & 컬렉션 (7시간)D4 — Java 함수형 & 스트림 (6시간)D5 — Java 멀티스레딩 (5시간)D6 — Java JVM & GC (5시간)D7 — Java 디자인패턴 & 테스트 (6시간)... D40까지 계속됩니다 🔥매일 이 로드맵을 따라가며 학습 기록을 블로그에 남깁니다.🔬 데이터 분석 플레이그라운드Pyodide(WebAssembly 기반 Python 런타임)를 사용해서 서버 없이 브라우저에서 바로 pandas, numpy, matplotlib를 실행합니다.백엔드 서버 비용 0원. 브라우저만 있으면 됩니다.🛠 기술 스택프론트엔드 — Next.js 14 App Router, TypeScript, Tailwind CSS데이터 분석 — Pyodide (WebAssembly Python)인증 — Google OAuth, Kakao OAuth (PKCE)DB — Supabase PostgreSQL (RLS 적용)AI — Claude API, TensorFlow.js, YOLO11배포 — Vultr VPS, Nginx, PM2, Cloudflare DNS📆 40일 계획하루 평균 3~4개 카테고리씩 정복합니다.매일 학습 기록을 이 블로그에 남깁니다.40일 후에는 CS 전 분야를 커버한 상태로 면접장에 들어갑니다.✍ 마무리"직접 만든 플랫폼으로 직접 공부한다."이것이 제가 생각하는 진짜 개발자의 학습법입니다.👉 플랫폼 구경하러 가기: https://codemaster40.com

CodeMaster･독학개발자･CS학습･포트폴리오･Python･NextJS･AI

강지원

[인프런 워밍업 스터디 클럽 2기 FE] 강지원 3주차 발자국

따라하며 배우는 리액트 A-Z (7~13강) Day 11 (리액트 테스트 경험하기) TDD (Test Driven Development)개발 전 테스트 코드를 먼저 작성하는 방법론 순서테스트 코드를 작성 → 실행 (당연히 실패) → 딱 이 테스트 코드를 통과할 만큼의 코드만 작성 → 성공 → 다른 테스트 코드 작성으로 이동전부를 다 한 다음에 리팩토링 작업을 실행여기서 문제가 된다면 다시 테스트 코드를 확인하고 수정함 TDD의 장점소스 코드에 안정감을 줌디버깅 시간과 개발 시간이 줄어듦시스템 전반적인 설계 향상 (클린 코드가 나올 확률이 높아짐)개발 집중력 향상 (테스트를 하나씩 깨나가면서 개발할 수 있기 때문)  Day 12 (NextJS, 타입스크립트)내용을 복습하면서 원래 알고 있던 것 + 새로 알게 된 내용을 공부하는 방식으로 공부했다.특히 TS의 타입 들을 코드로 정리하면서 어떤 타입이 있었는지 다시 새길 수 있었다. Next.jsReact의 SSR을 쉽게 구현할 수 있게 도와주는 간단한 프레임 워크 특징 Full-StackFile-based RoutingSEO, Image, Font OptimizationServer Side RenderingHybrid Rendering CSR (Client Side Rendering)리액트만으로 프로젝트를 만들면 발생 → 렌더링 하는 주체가 클라이언트 (브라우저) 장점한번 로딩 되면, 빠른 UX 제공서버의 부하가 작음 단점페이지 로딩 시간(TTV)이 김 (FCP가 오래 걸린다고도 함)자바스크립트 활성화가 필수임SEO가 힘듦보안에 취약 (모든 react 라이브러리, js 소스 코드를 다 다운 받아야 하기 때문에)CDN(Content Delivery Network)에 캐시가 안됨 → 이러한 많은 단점들을 해결하기 위해서 나온 것이 SSR SSR (Server Side Rendering렌더링 하는 주체가 서버렌더링 되는 순간 : 요청 시 렌더링 (미리 해두지 않음) 장점페이지 로딩 시간(TTV)이 빠름자바스크립트 활성화 여부가 필요 없음SEO 최적화가 좋음보안이 뛰어남CDN에 캐시가 됨실시간 데이터를 사용!사용자 별 필요한 데이터를 사용함 (요청 시 렌더링 하기 때문에 요청하는 사람에 맞게 데이터 제공이 가능) 단점비교적 느릴 수 있음서버에 과부하가 걸릴 수 있음 (몇 천명의 페이지를 요청 시 마다 계속 만들어야 하기 때문에)CDN에 캐시가 안됨 (요청마다 새로운 페이지를 만들기 때문에) Typescript 타입 : value가 가지고 있는 프로퍼티나 함수를 추론할 수 있는 방법JS의 dynamically type이 야기할 수 있는 runtime error를 해결하기 위해 statically type을 적용 시킨 언어 사용하는 이유Typescript는 JS코드를 단순화하여 더 쉽게 읽고 디버그할 수 있도록 함Typescript는 코드 유형 검사를 통해 JS를 작성할 때 고통스러운 버그를 피할 수 있도록 도와줌  Day 13 (리덕스 학습하기 및 리액트 19) ReduxJS 어플리케이션을 위한 상태 관리 라이브러리 data flowAction간단한 JavaScript 객체수행하는 작업의 유형을 지정하는 'type' 속성이 있으며 선택적으로 redux 저장소에 일부 데이터를 보내는 데 사용되는 'payload' 속성을 가질 수도 있음 Reducer어플리케이션 상태의 변경 사항을 결정하고 업데이트 된 상태를 반환하는 함수store 내부의 상태를 업데이트함 Redux Store어플리케이션의 전체 상태 가지고 있는 객체내부 상태를 변경하는 유일한 방법은 해당 상태에 대한 Action을 전달하는 것 Redux 미들웨어action을 dispatch하고 reducer에 도달하는 순간 사이에서 사전에 지정된 작업을 실행할 수 있게 해주는 중간자 Redux Thunk비동기 작업을 할 때 많이 사용하는 방법Redux Thunk도 리덕스 미들웨어액션 내부에서 다양한 작업을 할 수 있게 해줌 Redux ToolkitRedux 로직을 작성하기 위한 공식 권장 접근 방식Redux 코어를 둘러싸고 있고, Redux 앱을 빌드하는 데 필수적인 패키지와 기능이 포함되어 있음Redux 작업을 단순화하고 일반적인 실수를 방지하며, Redux 앱을 더 쉽게 작성할 수 있도록 도와줌 느낀 점 redux의 기본 사용 법을 처음으로 배우는 것이라 신기하고 어렵게 느껴졌다. 강의를 따라가면서 기초에 집중하려고 노력했는데, 처음 배운 개념을 이용해서 앱을 만드려니 꽤나 막막해서 시간이 많이 걸렸다. 앞으로 더 능숙해지고 싶다. 일주일 회고스터디 중간에 몸이 3일 동안 아팠어서 시간이 많이 없었지만 열심히 달려서 겨우 완주 조건까지 달성했다.매일 새벽까지 과제를 개발한 덕에 JS 과제 5개와 React 과제 3개를 해냈다. 모든 과제를 해내면 신입 역량 이상이라고 하셨었는데 나는 아직 신입 역량 정도였나 보다. 아쉽다.그동안 머릿속에 스터디만 가득한 채로 3주를 보냈는데 막상 끝나려고 하니까 아쉽지만 3주전의 나와 지금의 나를 비교했을 때 많은 성장을 이뤄낸 것 같아서 뿌듯하다.이번에 알게 된 부족한 점들을 바탕으로 앞으로의 공부 계획을 세워나갈 예정이다.정말 의미 있는 시간이었고, 꼭 필요했던 시간이라고 생각한다. 강의 출처강의 주소(React) : https://www.inflearn.com/course/따라하는-리액트/코치님 성함 : John Ahn

React･NextJS･Typescript･Redux･프론트엔드･인프런스터디･3주차

채널톡 아이콘