본문으로 건너뛰기

도큐사우루스 블로그

프로젝트 진행

  • 요구사항을 정리하고 도식화
  • 업무 프로세스와 기능을 단순화
  • 사용자에 맞는 UI 제작

배운 내용 정리

  • 읽고 배운 내용을 정리
  • 주제에 벗어나지 않고 정리
  • 예제 코드를 분석하고 정리

자기소개서

  • 짧고 간결한 표현을 사용
  • 이해를 돕는 시각화 자료 준비
  • 5페이지 이내의 크기로 작성

회고록 작성

  • 블로그 제작 과정을 기록
  • 배운 내용을 정리
  • 버전관리를 신경쓰며 커밋

3월 4주차 회고 및 다음 계획 작성.

1. 워밍업 강의 수료식(4/4) ​

01.webp

02.webp

1개월 동안 과제를 수행하고 제출하는 방식으로 진행됐던 워밍업 클럽이 4월 4일 진행되는 수료식을 마지막으로 끝이 납니다.

2. 평가 ​

1. FE(★★★☆☆)​

저조한 참여도​

03.webp

과제 제출에 눈치가 보일 정도로 참여도가 저조한 강의였습니다. 아마도 과제의 제출 요구 사항이 지나치게 엄격했기 때문일 수도 있습니다. 또한, 강의가 기능 위주로만 설명하다 보니, 페이지 기초가 부족한 사람들은 과제를 제출하는 것 자체가 어려웠을 것이라고 생각됩니다. 더해서 중간 점검에서 하신 말씀 중 과제는 우수 러너 선정 기준이라는 말씀이 오히려 참여도를 떨어뜨리게 되었다고 생각합니다.

강의 테마와 맞지 않음​

따라하며 배운다는 테마를 강조한 강의였지만 정작 따라하며 진행하는 부분이 적습니다. 대부분 수강생이 클론 코딩을 하며 과제도 동시에 진행할 수 있는 것을 예상하고 신청했을 것인데, 정작 과제가 테마에 맞는 페이지 기능을 구현한 40초 남짓의 영상을 보고 프로젝트를 0 부터 수행하는 것이었기 때문에 많은 사람이 포기햇을 것으로 보입니다.

그래도 내용은 좋았던 강의​

프로젝트 구상에 필요한 내용들과 리엑트 기능 구현, 컴포넌트화를 잘 알 수 있고, 전역 상태관리에 대한 것과 Git 배포에 대한 내용도 배울 수 있습니다. 리엑트를 제대로 활용하고 있지 못한다는 생각이 들 때 한 번씩 들으면 좋은 강의라고 생각합니다.

2. BE(★★★★☆)​

높은 참여도​

04.webp

가장 많은 사람들이 수강했고 그 영향 때문인지 참여율도 높았습니다. 다른 강의에 비해 과제가 많았음에도 불구하고 과제 수행률이 높아, 많은 사람들이 리팩토링한 코드 샘플을 수집할 수 있었고, 잘 만드는 사람들은 어떤 방식으로 사고하며 코드를 작성하는지 확인할 수 있는 좋은 강의였습니다.

적극적인 강사의 참여​

05.webp
06.webp

수강 인원이 점검을 요청하고, 강사가 평가해주는 방식의 중간 점검을 2번 진행했는데 첫 점검은 2주차 리팩토링을 진행했고, 두 번째는 테스트 코드를 진행했습니다. 이 강의를 많은 사람들이 수강하는 이유도 이런 방식의 개발 경험을 얻을 수 있기 때문이라고 생각합니다.

리팩토링과 테스트​

기능 구현이 끝이 아니라 유지 보수와 가독성을 위해 좋은 코드와 데이터 모델을 사용해야 한다는 것을 알게 되었습니다. 강의 내용이 훌륭해 백엔드 지식이 부족하더라도 쉽게 이해할 수 있을 것이라 생각이 듭니다.

3. DE(★★★★★)​

처음부터 만드는 UI KIT​

테마에 필요한 설정값과 그것을 사용한 컴포넌트를 제작하고 라이브러리를 활용해 페이지를 제작하는 것을 배울 수 있습니다. 퍙소 CSS에 대한 지식이 부족했지만 무난하게 들을 수 있는 강의였습니다.

컴포넌트인 것이 문제다.​

말 그대로 피그마로 컴포넌트를 디자인 하고 페이지를 만들었다면 해당 기능은 컴포넌트가 됩니다. 그 말은 개발 환경에서 컴포넌트화 되어있지 않다면 즉시 사용할 수 없는 것이기 때문에 초기 작업이 필요하게 되며, 시간적 비용을 발생시킵니다.

비용도 비용​

07.webp

Anima를 사용해 해당 페이지의 코드를 Tailwind 형식으로 불러낼 수 있지만 유료이기 때문에 비용이 발생합니다. 마찬가지로 즉시 적용하지 못하기 때문에 프로젝트 내부에 UI KIT이 필요하게 됩니다.

사전에 준비하면 해결될 문제​

1인 개발이 아닌 이상 컴포넌트 문제는 사전에 준비할 수 있는 것들입니다. 피그마 개발의 중요한 점은 디자이너와 협업이 가능하다는 것이기 때문에, 개발 기간과 예산이 충분하다면 협업을 통해 문제 없이 빠르게 개발할 수 있을 것이라고 생각합니다.

4. Full-stack(★★★★★)​

배우고 싶었던 내용​

평소 Supabase에 관심이 많았고, 학원 개인 프로젝트에도 적용해 본 적이 있으며, 이 기술을 어떤 방식으로 활용할 수 있는지 배우고 싶었던 내용이 많이 포함되어있습니다.

필요한 내용만 있는 강의​

UI 작성 등은 준비되어 있었기 때문에 정말 기능 개발에 필요한 내용만 압축해서 전달하는 강의였습니다. 나중에 기능 구현이 필요한 순간에 강의에서 사용한 코드를 활용할 수 있을 것입니다.

5. CS(★★★★☆)​

기본 내용 전달에 충실​

비전공자도 컴퓨터 지식과 알고리즘을 쉽게 이해할 수 있는 시각 자료를 활용한 강의입니다. 강의를 듣는다기 보다 기초 교양을 배운다는 마음가짐으로 듣기 좋은 강의입니다.

책 읽기 필수​

기초적인 내용을 전달하고 있기 때문에 컴퓨터 지식에 대해 더 앍고 싶다면 전공서적을 읽는 것을 추천합니다.

3. 다음 계획 ​

08.webp

데이터 크롤링을 통해 얻은 데이터를 저장소에 입력하고, 활용하기 위해 완강 보상으로 받은 쿠폰을 사용해 수강신청했습니다. 기능 개발에 성공한다면 괜찮은 프로젝트가 만들어 질 것 같습니다.

4. 블로그 변경점 ​

09.webp

섹션의 색깔을 파랑으로 변경하고 가독성을 위해 회고 출력 방식을 변경했습니다.

3월 3주차 회고 및 다음 계획 작성.

1. 워밍업 강의 진도표 (~3/30) ​

FE (~ 3/28)​

테마를 선택하고 리엑트 프로젝트 생성하기 (3개)​

BE (~3/30)​

Day 15 Spring & JPA 기반 테스트: Presentation Layer (과제必)​

  • [테스트] Section 6. Presentation Layer (2)

Day 16 Mock을 마주하는 자세​

  • [테스트] Section 7

Day 17 더 나은 테스트를 작성하기 위한 구체적 조언 (과제必)​

  • [테스트] Section 8

Day 18 학습 테스트 | REST Docs​

  • [테스트] Section 9-10

Day 19 중간 점검​

  • 온라인 세션

DE (~3/30)​

Day 15 (과제必)​

  • B2B 이커머스 어드민 페이지 만들기

Day 16 (과제必)​

  • B2C 이러닝 페이지 만들기

Day 17 (과제必)​

  • 모바일 OTT 서비스 페이지 만들기

Day 18​

  • 타이포그래피 베리어블 등록하기

Day 19​

  • Q&A 온라인 세션 진행

Full-Stack (~3/30)​

Day 11 인스타그램 클론 - 프로젝트 준비​

  • Section 6 (강의 소개, Git 설정)

Day 12 인스타그램 클론 - 로그인 & 회원가입 구현​

  • Section 6 (인증 구현)

Day 13 인스타그램 클론 - 채팅 기능 구현​

  • Section 7 (채팅 UI, Realtime 채팅)

Day 14 인스타그램 클론 - RLS 적용​

  • Section 7 (RLS 심화 강의)

Day 15 웹사이트 배포하기 - Vercel 배포, AWS EC2 배포, 도메인 등록​

  • Section 8 (도메인 등록, Vercel, AWS 배포)

2. 테스트에 대한 생각 ​

1. 테스트​

웹 개발은 클라이언트 요청에 맞는 데이터를 반환하는 기능을 제작하는 것입니다. 개발은 주로 협업 환경에서 이루어 지기 때문에 자신이 맡은 기능에 문제가 없는지 검수 해야 하고 그 과정을 시각 자료가 아닌 코드를 통해 논리적으로 검증받는 것이라고 생각합니다.

프론트엔드​

페이지가 최종적으로 출력되기 위해 수많은 컴포넌트를 제작하게 됩니다. 이 컴포넌트 중에는 이벤트를 담당하는 곳, 로직을 계산하는 곳, 데이터를 반환하는 곳이 있을 것이고, 속성값에 대한 테스트 비용을 줄이기 위해 타입스크립트를 사용하게 됩니다. 테스트 과정 축소를 통해 개발자는 화면 출력에 사용되는 기능 테스트에 집중할 수 있게 됩니다.

백엔드​

데이터의 입출력을 목적으로 진행됩니다. 사용자 요청을 받고 데이터를 반환할 때 계산이 정확한 지, 제대로 된 데이터를 반환하고 있는 지 생각해야 하고, 프론트엔드와 마찬가지로 단위테스트를 진행 후 통합테스트를 진행하는 방향으로 넘어가게 됩니다. 아직 익숙하지 않지만 전반적인 흐름은 이런 느낌입니다.

2. 테스트를 진행하는 이유​

소규모 개발 환경(팀 프로젝트, 개인 개발 등)을 경험하다 보면 실제로 테스트 코드를 작성하지 않고 기능 동작 확인 후 보고하는 형식이 대부분이라 버그나 에러를 미연에 방지하는 것이 힘듭니다.

테스트 코드를 작성하면 데이터의 정확한 정보를 알 수 있고, 서비스 단의 안정성을 확보할 수 있게 됩니다. 협업 환경에서 에러 발생은 치명적인 문제를 야기시키기 때문에, 팀원간 신뢰성 확보에도 많은 도움을 줍니다.

후기 ​

펼치기

Liked : 좋았던 점은 무엇인가?

  • 수강 완료
    • CS 전공지식이 3주차를 마지막으로 종료되었습니다. 기초적인 컴퓨터 지식을 빠르게 배울 수 있어 좋았습니다.

Lacked : 아쉬웠던 점, 부족한 점은 무엇인가?

  • 피그마 사용
    • 커리큘럼 마지막 프로젝트에서 피그마를 적절하게 사용해 페이지를 출력해보고 싶었는데 아직 지식이 부족하기 때문에 피그마에 대해 더 알아가야 하겠다고 생각하고 있습니다.

Learned : 배운 점은 무엇인가? (깨달은것, 인사이트, 기억하고 싶은 것 등)

  • 테스트 주도 개발
    • TDD 개념을 배우게 되었고 테스트 라이브러리를 사용해 어떤 방식으로 진행되고, 이점이 무엇인지 배우게 되었습니다.

Longed for : 앞으로 바라는 것은 무엇인가? (앞으로 어떤 행동을 할것인지)

  • 완주
    • 완주까지 1주일 남은 시점이기 때문에 마지막까지 과제를 빠짐없이 제출하고 공부를 마쳐 수료증을 받을 것입니다.

3월 2주차 회고 및 다음 계획 작성.

1. 워밍업 강의 진도표 (3/17~ 3/23) ​

FE (3/17~ 3/19)​

Day 10 리액트 테스트 경험하기 (과제必)​

  • Section 7~8

Day 12 NextJS, 타입스크립트 (과제必)​

  • Section 9~10

Day 13 리덕스 학습하기 및 리액트 19 (과제必)​

  • Section 11~13

BE (3/17~ 3/23)​

Day 10 테스트 코드 적용 실습 (과제必)​

  • 지뢰찾기, 스터디카페 중 하나를 골라, 단위 테스트를 작성해 봅시다

Day 11 Spring & JPA 기반 테스트: Persistence Layer​

  • [테스트] 섹션 6. Persistence Layer

Day 12 Spring & JPA 기반 테스트: Business Layer​

  • [테스트] 섹션 6. Business Layer (1-2)

Day 13 Spring & JPA 기반 테스트: Business Layer​

  • [테스트] 섹션 6. Business Layer (3)

Day 14 Spring & JPA 기반 테스트: Presentation Layer​

  • [테스트] 섹션 6. Presentation Layer (1)

DE (3/17~ 3/23)​

Day 10 (과제必)​

  • 피드백 컴포넌트 만들기

Day 11 (과제必)​

  • 네비게이션 컴포넌트 만들기 파트 1

Day 12​

  • 네비게이션 컴포넌트 만들기 파트 2

Day 13 (과제必)​

  • 베리어블 다크모드 개념을 익히고 활용해보기

Day 14 (과제必)​

  • 기타 베리어블 모드 활용 개념 익히고 실습해보기

CS (3/17~ 3/23)​

Day 10 메모리​

  • 알고리즘 Section 3 (6)
  • 운영체제 Section 8 (1~4)

Day 11 가상메모리​

  • 알고리즘 Section 3 (7)
  • 운영체제 Section 8 (5)

Day 12 가상 메모리​

  • 알고리즘 Section 3 (8)
  • 운영체제 Section 8 (6~7)

Day 13 입출력 장치​

  • 알고리즘 Section 3 (9)
  • 운영체제 Section 9

Day 14 입출력 장치 (과제必)​

  • 알고리즘 Section 3 (10)
  • 운영체제 Section 10

Full-Stack (3/17~ 3/23)​

Day 11 Netflix 클론 - 프로젝트 준비​

  • Section 5 (강의 소개, Git 설정)

Day 12 Netflix 클론 - UI 구축 (선택)​

  • Section 5 (UI 구축)

Day 13 Netflix 클론 - 검색 & 상세 페이지​

  • Section 5 (검색 기능, 상세 페이지)

Day 14 Netflix 클론 - 무한 스크롤 & SEO​

  • Section 5 (무한 스크롤, SEO)

Day 15 Netflix 클론 - 추가 기능 구현​

  • 사용자 즐겨찾기 기능 추가 등

2. learn_book 일정 (3월 3주차) ​

FE - 리액트 인터뷰 가이드​

  • 06장: 리덕트: 최고의 상태 관리 솔루션
  • 07장: 리액트에서 CSS를 다루는 다양한 방법
  • 08장: 리액트 애플리케이션 테스팅과 디버깅
  • 09장: Next.js, 개츠비, 리믹스 프레임워크를 활용한 빠른 개발

방법론 - 디자인 패턴의 아름다움​

  • 05장: 리팩터링 기법

CS- 서버 인프라를 지탱하는 기술​

  • 02장: 한 단계 높은 서버/인프라 구축

CS - 그림으로 공부하는 IT 인프라 구조​

  • 04장: 인프라를 지탱하는 기본 이론
  • 05장: 인프라를 지탱하는 응용 이론

3. 3/16 회고 ​

1. 마감 기한과 예상치 못한 오류​

01.webp

커리큘럼은 마감 기한이 정해져 있어 기한 내에 과제를 제출해야 하며, 평일에 과제 내용을 정리하고 주말에 후기를 집중해서 작성해야 합니다.

02.webp

마감이 1시간 남은 상황에서, 로컬에서는 확인할 수 없는 빌드 오류가 발생했습니다. 잠재적인 원인을 수정하고 의심되는 문서를 제거해 보았지만 해결되지 않았고, 버전 변경까지 시도했음에도 문제가 지속되었습니다.

03.webp 결국 원인은 전혀 의심하지 않았던 파일 크기였습니다. 침착하게 오류 코드를 확인했다면 쉽게 해결할 수 있었겠지만, 급한 마음에 당황하면서 문제 해결이 늦어졌습니다. 결과적으로 컨디션이 무너졌고, 이후 작업에도 영향을 미쳤습니다.

이 경험을 통해 급한 상황에서 오류가 발생하더라도 당황하지 말고 순차적으로 접근해야 한다는 것을 깨닫게 되었고 다음에 문제가 발생했을 때 침착하게 접근할 수 있을 것입니다.

후기 ​

펼치기

Liked : 좋았던 점은 무엇인가?

  • 시간 규칙 준수
    • 계획한 내용을 수행하고 정리하다 보면 좋은 습관이 생기게 되는데 시간과 규칙을 준수하게 됩니다. 지금 하고 있는 것은 단순한 커리큘럼 수행처럼 보일 수 있지만, 시간 규칙을 지키도록 설계했기 때문에 업무에 지장이 가지 않는 선에서 스케쥴을 만들게 됩니다.

Lacked : 아쉬웠던 점, 부족한 점은 무엇인가?

  • 코드를 읽지 않음
    • 오류 코드를 충분히 분석하지 않았습니다. 로컬 환경만을 생각하고 혼자 판단하여 가능성이 있는 부분을 수정했습니다.

Learned : 배운 점은 무엇인가? (깨달은것, 인사이트, 기억하고 싶은 것 등)

  • 디자인 패턴
    • DE,BE,CS 의 내용을 정리하다 보니 각 분야에서 체계적으로 업무를 완수하기 위한 패턴이 있는 것을 확인했습니다. 주방에서의 업무 수행이나 연구소에서의 일에서도 더 세부적으로 진행할 수 있었겠다고 생각했습니다.

Longed for : 앞으로 바라는 것은 무엇인가? (앞으로 어떤 행동을 할것인지)

  • 책 읽기
    • 3주차에 들어서면 끝나는 커리큘럼이 생기기 때문에 그 시간에 책을 읽고 더 많은 내용을 작성할 수 있게 될 것입니다.

3월 1주차 회고 및 다음 계획 작성.

1. 워밍업 강의 진도표 (3/10~ 3/14) ​

FE (3/10~3/14)​

Day 5 Iterator, Generator, Design Pattern (과제必)​

  • Section 8~9

Day 6 프로젝트 만들기 (과제必)​

  • Section 10

Day 7 중간 점검​

  • 온라인 세션

Day 8 리액트 기본 및 Todo 앱 만들기 (과제必)​

  • Section 2~4

Day 9 리액트로 Netflix 만들기 (과제必)​

  • Section 5~6

BE (3/10~3/14)​

Day 5 리팩토링: 코드 다듬기​

  • [클린코드] Section 6

Day 6 클린코드 리팩토링 실습​

  • 미션 진행

Day 7 리팩토링 연습 | 기억하면 좋은 조언들​

  • [클린코드] Section 7~9

Day 8 단위 테스트 | TDD | 테스트는 [ ] 다​

  • [테스트] Section 1~5

Day 9 중간 점검​

  • 온라인 세션

DE (3/10~3/14)​

Day 5 (과제必)​

  • 컴포넌트 준비 세팅과 입력 컴포넌트 만들어보기 파트 1

Day 6​

  • 입력 컴포넌트 만들어보기 파트 2

Day 7 (과제必)​

  • 디스플레이 컴포넌트 만들어보기 파트 1

Day 8​

  • 디스플레이 컴포넌트 만들어보기 파트 2

Day 9​

  • Q&A 온라인 세션 진행

CS (3/10~3/14)​

Day 6 프로세스 동기화​

  • 알고리즘 Section 3 (1)
  • 운영체제 Section 4

Day 7 데드락​

  • 알고리즘 Section 3 (2)
  • 운영체제 Section 5

Day 8 데드락​

  • 알고리즘 Section 3 (3)
  • 운영체제 Section 6

Day 9 메모리​

  • 알고리즘 Section 3 (4~5)
  • 운영체제 Section 7

Day 10 중간 점검​

  • 온라인 세션

Full-Stack (3/10~3/14)​

Day 6 Dropbox 클론 - 프로젝트 준비​

  • Section 4 (강의 소개, Git 설정)

Day 7 Dropbox 클론 - UI 구축(선택)​

  • Section 4 (UI 구축)

Day 8 Dropbox 클론 - 파일 업로드 구현​

  • Section 4 (Supabase Storage, 업로드 기능)

Day 9 Dropbox 클론 - 파일 삭제 & 멀티 업로드​

  • Section 4 (파일 제거, Drag & Drop)

Day 10 중간 점검​

  • 온라인 세션

2. learn_book 일정 (3월 2주차) ​

강의 과제 수행과 블로그를 문서를 동시에 운영하는 작업은 생각보다 많은 시간이 필요했고 예상치 못한 문제가 하나 발생했기 때문에 원래의 일정을 지키지 못해 뒤로 밀리게 되었습니다.

FE - 리액트 인터뷰 가이드​

  • 02장: 리액트의 기본 개념과 기능 이해
  • 03장: 훅: 함수 컴포넌트에 state와 다른 기능 추가하기
  • 04장: 라우팅과 국제화
  • 05장: 리액트의 고급 개념

방법론 - 디자인 패턴의 아름다움​

  • 01장: 개요
  • 04장: 코딩 규칙

CS- 서버 인프라를 지탱하는 기술​

  • 01장: 서버/인프라 구축 입문

CS - 그림으로 공부하는 IT 인프라 구조​

  • 02장: 서버를 열어보자
  • 03장: 3계층형 시스템을 살펴보자

3. 블로그 변경점 ​

1. 작성 날짜 추가​

04.webp

  • 블로그를 제외한 마크다운 문서는 작성일을 호출하려면 리액트 컴포넌트를 호출하는 mdx 문서를 사용해야 하는데 이 방법을 사용하면 버그가 생기기 쉽고 문서 이동이 일어나게 될 때 유지보수가 좋지 않아 프론트메터에 데이터 입력 후 호출하는 방식으로 변경했습니다.

2. 경어체 사용​

07.webp

  • 문서를 설명하는 방식을 사용할 때 경어체 채택시, 문서 내용 전달에 이점이 크기 때문에 앞으로의 문서에는 경어체를 사용하게 됩니다.

3. 회고 방식 변경​

08.webp

  • 기존의 회고 방식을 경어체로 변경하고 소재목을 사용해 가독성을 높였습니다.

4. 폴더 정리(점진적으로 추가)​

01.webp

  • 블로그가 커지면서 폴더 구조를 학습 전과 후로 나눌 필요가 생겼습니다. 내부에 있는 mdx 문서가 경로 이동시 버그를 발생시키기 때문에 시간이 생길 때 수정해나갈 예정입니다.

5. Todo 사이드 바 추가(예정)​

  • 많은 일정을 관리할 때 오늘 할 일을 관리할 수 있는 카테고리가 있으면 많은 도움이 되기 때문에 블로그 기능을 추가할 예정입니다.

후기 ​

펼치기

Liked : 좋았던 점은 무엇인가?

  • 계획한 대로 수행했음
    • 인프런 커리큘럼은 계획에 맞게 제대로 진행하게 되었습니다. 첫 주에 어떻게 해야할지 템플릿을 만들었기 때문에 문서 작성에도 속도가 붙게 될 것 같습니다.

Lacked : 아쉬웠던 점, 부족한 점은 무엇인가?

  • 많은 일정
    • 어떤 문제가 일어났을 때 유연하게 대체하지 못하면 다른 업무를 수행할 수 없다는 것을 깨닫게 되었습니다. 풀스택 강의에서 에러를 해결하지 못해 하루를 통째로 사용했었는데, 소위 말하는 초과업무 개념으로 일을 처리하게 됐습니다.
  • 시간 분배 실패
    • 위의 내용과 연결됩니다. 과제 수행과 인프런 발자국 남기기, 블로그 문서 작성 등 생각보다 바쁘게 움직여야 했는데, 문제 해결에 시간을 사용하거나 특정 개념을 이해하지 못했을 때 시간 비용을 고려하지 못했습니다.

Learned : 배운 점은 무엇인가? (깨달은것, 인사이트, 기억하고 싶은 것 등)

  • 문서 작성 시간 단축을 위한 템플릿 추가
    • 지금까지 마크다운 명령를 사용해 문서에 필요한 컴포넌트를 추가했다면, 이제는 문서 자체의 템플릿을 만들어 알맞은 내용을 기입하는 식으로 만들어야 일정을 수행할 수 있다는 것을 배우게 되었습니다.

Longed for : 앞으로 바라는 것은 무엇인가? (앞으로 어떤 행동을 할것인지)

  • 블로그 변경점 적용
    • 일정과 업무 수행에 차질이 생기지 않게 일정표를 만들고, 블로그의 크기가 켜졌기 때문에 더 세분화 시킬 필요가 있어 학습 진행상태로 구분할 것입니다.

2월 4주차 회고 및 다음 계획 작성.

1. FE - 한 입 크기로 잘라먹는 타입스크립트​

1. 학습 내용​

2. 학습 성과​

책에서는 자세하게 나와있지 않는 타입 정의와 활용하는 방법들이 많이 나왔다. 처음 학습하는 인원도 이해하기 쉽게 자바스크립트 예제를 들어 설명한다. 배운 내용을 가지고 있으면 앞으로 진행할 프로젝트 과제 수행에 문제가 없어 보인다.

3. 진도표 (3/4~3/7)​

Day 11 제네릭​

  • Section 7 (3~6)

Day 12 타입 조작하기​

  • Section 8

Day 13 조건부 타입​

  • Section 9

Day 14 유틸리티 타입​

  • Section 10

2. 인프런 워밍업 클럽​

타입스크립트를 수강하고 괜찮은 공부방식이라고 생각했기 때문에 기초 능력 향상을 위한 강의를 신청했다.

1. 클럽 신청​

01.webp

모집 중인 클럽의 설문조사를 통해 신청 가능하다.

2. 강의 구매​

02.webp

커리큘럼을 진행하기 위한 강의를 구매해야 한다.

3. 오리엔테이션​

03.webp

많은 클럽에 신청했기 때문에 OT 시간이 겹쳐 다른 컴퓨터로 녹화본을 만들었다.

4. 커뮤니티​

04.webp

공지 전달과 과제 제출 매체로 디스코드를 채택한 모습이다.

5. 과제 제출 방법​

05.webp

인프런 -> 블로그 형식에 맞춰 해당 링크를 제출해야 한다.

6. 총 시간​

06.webp

전체 강의는 약 99시간이며, 블로그 글 작성과 과제 제출을 고려하면 170시간 정도로 생각하고 있다. 시간을 많이 잡아먹는 강의와 실습 위주의 강의에 많은 시간을 사용할 것으로 보인다.

3. 워밍업 강의 진도표 (3/3~ 3/8) ​

FE (3/4~3/7)​

Day 1 자바스크립트 기초 (과제必)​

  • Section 2~4

Day 2 자바스크립트 중급 (1) (과제必)​

  • Section 5 (1~8)

Day 3 자바스크립트 중급 (2) (과제必)​

  • Section 5 (9~17)

Day 4 OOP, 비동기 (과제必)​

  • Section 6~7

BE (3/4~3/7)​

Day 1 추상과 구체 (과제必)​

  • [클린코드] Section 1~2

Day 2 논리, 사고의 흐름 | 객체 지향 패러다임​

  • [클린코드] Section 3~4.객체 설계하기 (2)

Day 3 SOLID (과제必)​

  • [클린코드] Section 4.SOLID

Day 4 객체 지향 적용하기​

  • [클린코드] Section 5

DE (3/4~3/7)​

Day 1​

  • 피그마 베리어블과 디자인 토큰

Day 2 (과제必)​

  • 색상 베리어블 등록하기

Day 3 (과제必)​

  • 타이포그래피 베리어블 등록하기

Day 4 (과제必)​

  • 간격, 그림자 효과, 반응형 기준점, 기타 베리어블 등록하기

CS (3/3~3/7)​

Day 1 운영체제 들어가기​

  • 알고리즘 Section 1
  • 운영체제 Section 1

Day 2 프로세스와 쓰레드​

  • 알고리즘 Section 2 (1~3),
  • 운영체제 Section 2 (1~4)

Day 3 프로세스와 쓰레드​

  • 알고리즘 Section 2 (4~8)
  • 운영체제 Section 2 (5~7)

Day 4 CPU 스케줄링​

  • 알고리즘 Section 2 (9~10)
  • 운영체제 Section 3 (1~4)

Day 5 CPU 스케줄링 (과제必)​

  • 알고리즘 Section 2 (11)
  • 운영체제 Section 3 (5~7)

Full-Stack (3/4~3/8)​

Day 1 오리엔테이션​

  • Section 1

Day 2 Next.js 기본기​

  • Section 2 (Next.js Part 1,2)

Day 3 TailWindCSS & Recoil​

  • Section 2 (TailWindCSS, Recoil)

Day 4 React Query & Supabase 소개​

  • Section 2 (React Query)
  • Section 3 (강의 소개)

Day 5 TODO List 클론 - 프로젝트 설정 & CRUD 구현​

  • Section 3 (Git설정, Supabase연동, CRUD 구현)

4. learn_book 일정 (3월 1주차) ​

FE - 리액트 인터뷰 가이드​

  • 02장: 리액트의 기본 개념과 기능 이해
  • 03장: 훅: 함수 컴포넌트에 state와 다른 기능 추가하기
  • 04장: 라우팅과 국제화
  • 05장: 리액트의 고급 개념

방법론 - 디자인 패턴의 아름다움​

  • 01장: 개요
  • 04장: 코딩 규칙

CS- 서버 인프라를 지탱하는 기술​

  • 01장: 서버/인프라 구축 입문

CS - 그림으로 공부하는 IT 인프라 구조​

  • 01장: 인프라 아키텍처를 살펴보자
  • 02장: 서버를 열어보자
  • 03장: 3계층형 시스템을 살펴보자

블로그 일지 ​

일정이 아주 많아 보이지만 체계적으로 계획을 만들면 사실 별 것 없는 170시간 견적의 일정이기 때문에 시간이 드는 강의와 과제를 먼저 수행하면 충분히 가능하다고 생각했기에 즉시 진행하기로 했다. 인프런 과제의 경우 주말에 블로그에 작성한 글을 그대로 붙여넣으면 되는 형식이라 평소와 다를 것 없어 보인다.

2월 3주차 회고 및 다음 계획 작성.

1. 한 장 보고서의 정석​

1. 문서 작성 방식의 변화​

자료를 찾기 위해 여러 블로그와 강의 내용, 공식문서를 찾다 보니 작성 구조를 바꿔야 한다는 느낌을 받게 되었다. 2주 전에 비해 더 보기 좋아졌다는 느낌을 받는다.

2. 학습 방식​

다른 블로그를 참조하기 보다 좋은 문서를 발견햇을 때 어떤 의도를 가지고 작성했는지, 이해를 돕기 위한 자료를 어떤 방식으로 채택했는지에 대해 생각하며 학습해야 한다.

2. FE-모던 리액트 DeepDive​

1. 학습 내용​

2. 학습 성과​

12장과 13장에서 최적화에 대한 내용을 감명깊게 읽었는데, 애플리케이션의 사용 목적에 맞게 최적화 하는 방법에 대해 고민하게 되었다. 데이터베이스 사용시 복잡한 쿼리가 필요가 없는 단순 데이터 저장이나 출력일 경우 서버에 연결할 필요 없이 내부적으로 관리했을 때의 이점에 대해 생각해보았다.

3. FE-우아한 타입스크립트 with 리액트​

1. 학습 내용​

4. FE-한 입 크기로 잘라먹는 타입스크립트​

1. 학습 내용​

2. 학습 성과​

책과 강의를 병행하며 학습했다. 책에서 문서화 시킨 내용을 강의를 듣고 복습해 이해를 높였다.

블로그 일지 ​

점점 글의 형태를 갖춰가는 느낌이 든다. 2주차 까지는 문서의 내용이 뭉쳐 보여서 가독성이 떨여졌는데 칸을 나누고 직관성을 높이니 더 좋은 모양이 완성된다. 글의 내용을 더 세부적으로 적는 방법을 연구해야 한다.

2월 2주차 회고 및 다음 계획 작성.

1. 한 장 보고서의 정석​

1. 읽은 이유​

블로그 글 작성이나 회고시 어려움이 있어 책을 읽어보기로 했다. 마음 내키는대로 글을 쓰는 경향이 있어 체계적인 계획이나 목적을 전달하는 글을 잘 쓰지 못했는데 이 책을 읽고 어느 정도 교정되었다.

2. 학습 방식​

책을 읽기 전과 후로 나눈 뒤 문서 작성 형태를 비교하고 나아진 점을 찾아 더 좋은 문서를 만드는 방식으로 진행할 것이다.

2. FE-모던 리액트 DeepDive​

1. 학습 내용​

1주차가 내용을 정리하며 학습하는 시간을 가졌다면 2주차는 배운 내용을 실습하고 응용하는 내용이다. 리엑트에서 사용되는 상태 관리 라이브러리나 디버깅을 하는 방법, 좋은 코드 작성을 위해 알아야 할 것들 까지 더 나은 코드를 만들기 위해 알아야 하는 내용들이다.

2. 학습 성과​

화면을 보고 구상할 때 어떤 방식으로 데이터를 출력하면 좋을 지 기능은 무엇을 사용해야 좋을 지 한 번 생각하게 되었다. 기능을 만들기 위해 어떤 코드를 사용하면 좋겠다는 발상이 떠오르게 되었다.

3. FE-우아한 타입스크립트 with 리액트​

1. 학습 내용​

DeepDive와 마찬가지로 1주차에 학습한 내용을 심화하는 내용이다. API 응답시 타입을 지정하거나 특정 타입이 들어올 수 있게 확장하거나 좁혀 안정성을 높일 수 있다는 내용이 주 내용이다. 타입스크립트는 개념 이해 보다 실습이 더 중요하기 때문에 매 주 실습한 내용을 카페에 올려야 하는 온라인 강의를 구독했다.

3. 블로그 일지​

감도 잡히지 않았던 문서 작성이 익숙해 지고 있지만 체계적인 계획이 부족해 시간을 낭비하게 되었다. 하고 싶은 것은 많은데 실력이 부족해 시간을 많이 잡아먹으니 당장은 문서 작성과 기본기를 더 익혀야 겠다고 생각한다.

4. 작성하고 느낀 점​

좋았던 점: 블로그에 한 장 보고서의 정석에서 배운 내용을 조금식 적용해 깔끔하게 정리되었다.

배운 점: 리엑트와 타입스크립트의 심화 과정을 배우며 프로젝트에 어떤 방식으로 적용해야 할지 고민하고 더 좋은 페이지를 만들기 위해 무엇을 해야 하는지 찾아보게 되었다.

아쉬운 점: 하고 싶은 것은 많은데 실력이 따라주지 않아서 배우는데 많은 시간을 사용한 나머지 정작 해야할 것들을 미뤄두게 되었다.

향후 계획: 우선순위가 높은 것을 먼저 처리하기 위해 계획을 세우고 공부를 해야한다.

2월 1주차 회고 및 다음 계획 작성.

문화-구글 엔지니어는 이렇게 일한다​

구글 엔지니어들의 업무 방식과 문화를 배우며, 효율적인 협업과 개발 환경에 대해 고민하는 계기가 되었다. 특히 문서화를 중요하게 생각하는 점이 인상적이었으며, 이를 실무에도 적용할 방법을 찾고 있다.

FE-모던 리액트 DeepDive​

리액트의 기본 개념을 복습하고 심화 내용을 학습하며, 컴포넌트 구조와 최적화 기법을 익혔다. 기존 템플릿에서 벗어나 새로운 패턴을 적용하는 것이 중요하다는 점을 깨달았다.

FE-우아한 타입스크립트 with 리액트​

타입스크립트와 리액트를 함께 활용하는 방법을 배우며, 보다 견고한 코드 작성 방법을 익히는 중이다. 특히 제네릭과 유틸리티 타입을 활용하는 방식이 흥미로웠다.

블로그 일지​

마크다운을 활용한 문서 작성법을 익히고 블로그에 적용하면서 기록하는 습관을 들이는 중이다. 도큐사우루스의 플러그인을 추가하는 과정에서 오류를 해결하며 개발 역량도 함께 성장하고 있다.

작성하고 느낀 점​

좋았던 점: 블로그에 문서를 작성하고 기능을 추가하는 과정이 흥미로웠다.

배운 점: 구글 개발 문화, 리액트와 타입 스크립트의 기초를 복습했다.

아쉬웠던 점: 작성 요령과 기초가 확립되지 않아 작성에 시간이 걸리고 문서의 품질이 낮아지게 되었다.

향후 계획: 좋은 문서를 작성하기 위한 방안을 마련할 것이다.