셀프 프론트엔드 부트캠프 - 사전 준비

벌써 3년이 지났다. ‘만 나이 29세’에 개발 공부 시작을 해보겠다고 뻔뻔하게 블로그에 글을 썼었는데, 2년 차 마케터였던 내가 어느덧 두 번의 이직을 거쳐 IT 스타트업에서 일한 지가 벌써 또 2년이 다 되었다. 그때 시작한 다음 꾸준히 개발 공부를 해왔다면 정말로 좋았겠지만, 그러지 못한 과거의 나를 탓하고 싶진 않고 만 35세가 얼마 남지 않은 지금 다시 한번 공부를 시작해보려 한다.

그렇다고 지난 몇 년간 놀기만 한 것은 아니다. 조금씩 개발 공부를 하기도 했고, 다양한 관련 영상과 블로그 콘텐츠를 보기도 했으며, 업무를 하면서 HTML이나 CSS 정도는 다루는 경우도 있었다. 그렇지만 자바스크립트 기본 문법도 다 잊어버린 지금, 처음부터 다시 시작한다는 마음가짐으로 공부를 해보려 한다. 지나간 시간만큼 나이를 먹어 머리도 굳었겠지만 어떻게 생각해보면 개발자들이 많은 IT 스타트업에 다니고 있고 주변에 개발자 친구들도 많아진 지금이 3년 전보다 개발 공부를 하기 더 좋은 환경이라는 생각도 든다. 공부할 적당한 나이나 시기란 없는 것 같고 언제든 가볍게 시작하고, 잘 맞는 것 같으면 꾸준하게 노력하는 것이 무엇보다 중요하다.

그럼 어떻게 공부하면 좋을까? 여러 개발 강의를 브라우저 즐겨찾기에 넣어뒀고, 다양한 정보도 수집해뒀지만, 이번에는 인터넷 강의에 의존하기 보다는 내가 직접 관련 서적과 문서를 읽으며 공부하려 한다. 새로운 마음가짐으로 공부를 시작하는데 평소의 퇴근 후보다는 더 많은 에너지가 필요할 것 같아 7월 말(7/25~29) 5일간의 휴가를 내놨고 그 기간 스스로 프론트엔드 공부를 하는 일명 ‘셀프 프론트엔드 부트캠프’ 시간을 가질 예정이다. 말은 조금 거창하지만 5일 동안 공부 근육을 다시 일깨우고, 작은 성취를 쌓아가는 정도만 되어도 성공이지 않을까?

셀프 부트캠프 시작일까지는 집중할 수 있는 몸과 마음, 공부를 도와줄 기기 그리고 여러 정보를 두둑하게 준비할 예정이다. 그리고 이번에야말로 꾸준하게 해봐야지. 또 3년 뒤 이와 비슷한 글을 쓰지 않았으면 좋겠다.

준비의 준비의 준비

• 개발 서적 스캔(PDF)
• 아이패드 거치대 구매

• 공부 기록을 위한 블로그 업데이트

  • 구글 애드센스, buymecoffee 배너 삭제하기
• 터미널(iTerm2) 및 Visual Studio Code 세팅 및 플러그인 설치

준비의 준비

• 궁금한 기본 원리들 검색하고 읽기

  • 서버와 웹서버 개념
  • LaBhong 님의 ‘CPU와 어셈블리 언어, 기계어, 어셈블러, 컴파일러, 링커의 상관관계’
  • Frame of Essence의 ‘How do computers read code?’
  • Codecademy의 ‘What is a programming language?’
  • freeCodeCamp의 ‘Computer Coding – Computer Program Definition and Code Meaning’

  • Fireship의 #100SecondsOfCode

    • ‘HTML in 100 Seconds’
    • ‘CSS in 100 Seconds’
    • ‘JavaScript in 100 Seconds’
    • ‘What is THIS in JavaScript? in 100 seconds’
    • ‘Git Explained in 100 Seconds’
    • ‘React in 100 Seconds’

  • 얄팍한 코딩사전

    • ‘혼공얄코 1~4강. 개발자들이 하는 일’
    • ‘혼공얄코 5~7강. 서버와 클라우드’
    • ‘혼공얄코 8~13강. 웹에서 일어나는 일’
    • ‘웹개발 필수개념! DOM이 뭔가요? (+ Web API)’
    • ‘정적 웹은 뭐고 동적 웹은 뭔가요?’
    • ‘자바스크립트에 세미콜론을 써야 하나요? (Feat: ASI)’
    • ‘REST API가 뭔가요?’
  • 캡틴판교 님의 ‘프런트엔드 개발 가이드’
  • 재그지그 님의 ‘프론트엔드 개발자라면 알고 있어야 할 브라우저의 동작 과정’
  • AWS 한국 블로그의 ‘웹 브라우저에 URL을 입력하면 어떤 일이 생기나요?’
  • 찬미니즘 님의 ‘Node.js - npm install, 이제는 알고 쓰자’

  • Evans 님 블로그

    • ‘V8 엔진은 어떻게 내 코드를 실행하는 걸까?’
    • ‘프론트엔드와 백엔드가 소통하는 엔드포인트, RESTful API’
    • ‘기존의 사고 방식을 깨부수는 함수형 사고’
    • ‘Git 뉴비를 위한 기초 사용법 - 시작하기’
    • ‘Git 뉴비를 위한 기초 사용법 - 버전 관리’
  • dev.tinkerbell 님의 ‘주니어 프론트엔드 개발자가 정리한 REST API’
  • 재그지그 님의 ‘프론트엔드 개발자에게도 알고리즘 공부가 중요할까?’
  • 최강훈 님의 ‘의사코드(Pseudo-code) 작성법’
  • 쨜리 님의 ‘수도코드(pseudocode) 작성하는 방법’

• 자바스크립트 동작 원리 검색하고 알아보기

  • toy-crane 님의 ‘진짜! 쉽게 알아보는 자바스크립트 동작 원리’
  • namezin 님의 ‘javascript 동작 원리’
  • JSConf EU의 ‘어쨌든 이벤트 루프는 무엇입니까?’
  • JSUnconf의 ‘JavaScript로 함수형 프로그래밍 배우기’

  • Lydia Hallie 님의 ‘JavaScript Visualized Series’

    • ‘JavaScript Visualized: Event Loop’
    • ‘JavaScript Visualized: Hoisting’
  • 임성묵 님의 ‘자바스크립트는 왜 프로토타입을 선택했을까’ 읽기

  • Evans 님

    • ‘[JS 프로토타입] 자바스크립트의 프로토타입 훑어보기’
    • ‘JavaScript의 let과 const, 그리고 TDZ’
  • 우아한형제들 블로그의 ‘만들어 가며 알아보는 React: React는 왜 성공했나’
  • 김용균 님의 ‘아주 조그마한 컴파일러 만들기’

• mdn web docs 읽기

  • ‘How the web works’ 읽기
  • ‘Introducing the CSS Cascade’
• 성냥 님의 ‘생존형 개발자 성냥의 불친절한 코딩 이야기’ - ‘자바스크립트의 역사와 ECMAScript 2022(ES13) 엿보기, 그리고 서로 닮아가는 언어들에 대해’ 1~5편 듣기
• 생활코딩의 Javascript 언어소개(오리엔테이션) 보고 읽기

• 모던 Javscript 튜토리얼 읽기

  • 파트1. 코어 자바스크립트 - 소개 - 1.1 자바스크립트란?
  • 파트1. 코어 자바스크립트 - 소개 - 1.2 매뉴얼과 명세서

앞으로의 계획

• <Do it! HTML+CSS+자바스크립트 웹 표준의 정석> HTML, CSS 부분 훑기
• MDN JavaScript 재입문하기 (JS ​튜토리얼)
• React 튜토리얼 따라하기
• Next 튜토리얼 따라하기
• <JavaScript: The Definitive Guide> 서문, 1장, 2장 읽기
• Codecademy의 자바스크립트 트랙 중 ‘Introduction to JavaScript’ 섹션 공부
• <JavaScript: The Definitive Guide>의 3장과 4장 읽기
• <JavaScript: The Definitive Guide>의 5장 읽기
• ‘JavaScript Objects in Detail’ 읽기

킵

• w3schools의 ‘HTML Tutorial’
• w3schools의 ‘CSS Tutorial’
• <Do it! 지옥에서 온 문서 관리자 깃&깃허브 입문> 읽기

준비하는데 참고하고 도움이 된 것들

• daun 님의 <모든 것이 되는 법> 정리 - 여러가지 일을 할 수 있다는 건 애매한 게 아니다’
• 놀부 님의 ‘[번역] 자바스크립트 제대로 배우기’

• 기계인간 님의 ‘나의 공부 방법’

  • 책으로 공부하기
  • 블로그, 웹 문서 등은 공부하는 기분만 들고 유튜브로는 학습에 성공한 적이 없음
  • 읽고 있는 책의 모든 챕터를 체크 리스트 형태로 만들고 체크하기

• Sigrid Jin 님의 ‘[번역] 개발 배우기가 정말 어려운 이유’

  • ‘혼돈의 카오스’, 이 단계는 모두에게 고통을 준다
  • 진정으로 개발자로 커리어를 만들어 갈 준비가 된 사람은 혼돈의 카오스 단계에서 살아남는 것이 인생의 새로운 반환점이 됨
  • 학습해야 할 내용은 일주일이나 한 달 안에 끝낼 수 있는 것이 아니고 한 학기 수업을 듣는다고 배울 수 있는 것도 아님
  • 끈기와 올바른 방향을 계속 가지고 갔을 때 비로소 세상에 내놓을 만한 몇 안되는 프로덕트를 만들 수 있을 것이고, 그 즈음 되면 ‘이제 정말 시작했다’고 말할 수 있을 것

  • 단계별 살아남는 법

    • 1단계: 1) 다양한 콘텐츠로 시작하고, 2) 잘 맞다고 생각하는 콘텐츠 하나에 집중해 처음부터 끝까지 듣고, 3) 스스로 만드는 연습하기
    • 2단계: 1) 다른 사람과 함께하고, 2) 다른 사람의 코드를 읽고, 3) 작은 것으로 시작하고 계속해서 만들어보기

• 송요창 님의 ‘무면허 비전공에 IT기업 다니는 프로그래머 이야기’

  • 비전공, 알고리즘, 코딩테스트 등에 눌려서 스스로 작아지지말고 당당하게 시작하라

• 운체조교 님의 ‘기술력을 갖고 싶다면: 코딩을 겁나 하세요.’

  • “겁나 코딩을 많이 해야” 기술력을 쌓을 수 있음
  • 꼭 저수준의 프로그래밍을 해봐야 함

• 조은 님의 ‘프론트엔드 학습 로드맵 - 2022년에 프론트엔드 배우기’

  • Jira 나 Asana 사용해보기
  • Git과 GitHub를 미리 학습해두기
  • React & Next 튜토리얼 따라하기

  • 자바스크립트 기본 모던 JavaScript 튜토리얼을 통해 공부하기

    • 중요 내용: 1) 자바스크립트 기본, 2) 코드 품질, 3) 객체: 기본, 4) 자료구조와 자료형, 5) 함수 심화학습, 6) 에러 핸들링, 7) 프라미스와 async, await, 8) 모듈
  • Next 커머스 데모 UI 따라하기
  • 모던 JavaScript 튜토리얼 파트 2 읽고 이해하기

• Cristian Crețu 님의 ‘Learning Web Development in 2021’

  • need to learn some Data Structures and Algorithms which will be building blocks of programming career
  • in terms of frameworks, the keyword is application
• 성냥 님의 ‘생존형 개발자 성냥의 불친절한 코딩 이야기’ - ‘(청취자 사연) 범람하는 코딩 부트캠프의 참여와 선택에 대해… 일단결론부터편’

• 박찬성 님의 ‘사이드 프로젝트를 통한 성장’

  • 사이드 프로젝트 라이프 사이클: 1) 아이디어 기획, 2) 핵심 기능 프로토타이핑, 3) 세부 구현, 4) 정리 및 브레인스토밍, 5) 홍보 및 1번으로 돌아가기
  • ‘지속성’은 매우 중요
  • 완성된 결과물로 ‘가능한 무언가’에 중점을 두는 것이 현실적인 목표를 세우기 좋음

• zwoo 님의 ‘개발자가 블로그를 운영하면 좋은 점’

  • TIL을 쓸 때 여러 의문을 제기해보기 공부하면서 생기는 호기심을 모두 쏟아내 보기

• Evans 님

  • ‘방향성이 명확한 노력으로 나만의 색깔을 가진 사람이 되기’
  • ‘개발자는 수학을 잘해야할까?’

• freeCodeCamp의 Zubin Pratap 님

  • ‘From Lawyer to Engineer at Google – How to Switch Careers and Learn New Skills’

    • “I tried to teach myself to code THREE times. In 2014, in 2015 and in 2017. And all three times I quit because I tried to jump too high, set myself up for failure (…) Faced with the choice of being defeated or learning to code, I chose to try again – to learn to code. I was 37. In 2020 COVID hit, and just as it was getting very serious, I signed my contract to be an an engineer at Google. I had just turned 39.”
  • ‘Coding Interview Prep for Big Tech (FAANG) – And How I Became A Google Engineer’

• kwanwooi 님의 ‘공개적으로 학습하라!’

  • “무엇을 하던 간에, 여러분이 학습할 때 ‘이런게 있었으면…’ 했던 것을 만들어 보세요. 결과를 ‘박수’나 리트윗, 스타, 좋아요와 같은 것들로 판단하지 마세요.”
  • “꼭 해야할 일은 여러분이 한 일, 해결한 문제에 대해 문서화를 하는 일”