시작하며...

갱생 타겟

• 쌩초보 사촌형.. 그에게 코딩 알려주면서 커리큘럼 만들고 포토폴리오 만들어서
• 부업으로 코딩과외 해볼 수 있지 않을까 하는 검은 욕심 ㅋㅋㅋ
  (벌써 숨고에 4만원 결제해놓은건 비밀..)
• 난공불락 사촌형을 뚫어내면 코칭스킬이 엄청나게 발전해서
• 나중에 시니어 되었을 때 연봉에 조금이라도 보탬이 되지 않을까하는 생각두
  (미리 레퍼를 쌓아뒀는 거쥬~)
  

---

쉽지 않네 😅😅😅

• 개발과 전혀 관련없는 건실한 직장에 다니는 사촌형!
• 강의 추천해주고, 같이 시간 쓰면서 공부하는 방식으로 시도해봤지만...
  (노마드 코더, 생활코딩 등등... 코딩강의 결제도 해주었지만)
• 어렵다고. 괜히 시도한 것 같다고. 코딩공부하려고 맥북샀는데 당근가야겠다고..
  

---

마지막 도전

• 그래도 마지막 도전을 해보기로 했다!
• 페어 프로그래밍이 아니라 좀비 프로그래밍... 해보기로
  (처음부터 끝까지 내가 옆에서 입코딩하고, 사촌형이 손코딩하는 방식)
• 만약 이것마져 안되면 아마도 처음이자 마지막 포스팅이 될 듯... ㅋㅋㅋ
  

---

재도전 전에 했던 고민들

• 지금 당장 필요하지 않은 이론은 알려주지 않는다..
  (이론 주입은 흥미를 떨어뜨리고 스트레스를 부과함.)
• 최대한 바로바로 써먹을 수 있는 정보만 제공!
  (연결지어서 이해쉬운 정보 그때그때 제공하기~)
  (타이밍도 중요하고, 분량도 중요하다. 적절한 타이밍에 적절한 분량을)
• 요 두가지 고민을 커리큘럼에 반영해서 고안한 것이 좀비 프로그래밍. 내가 만드는 과정을 입으로 전달하고 사촌형이 이해해서 프로그래밍 하도록 만드는 것.
• 중요한건 지식을 전달하는게 아니다. 프로그래밍하는 근육을 길러주는 것이고, 거기에 나의 좋은 습관들을 추가적으로 이식해주는 것이 중요한것! 그렇다면 내가 하는 그대로 한달여간 뭔가를 개발하는게 최선의 방법이 아닐까 하는 생각. 그리고 그걸로 어떻게 이착률 할건지는 다음단계!

수업 시작~!

들어가기

• 개발환경 구축 (react)
• 버튼, 입력창, 텍스트 만들어보기

node

• 코드를 실행시켜주는 프로그램 (aka 런타임)
  (우리가 사용할 프로그래밍 언어는 JavaScript라는 코드)
• 요리로 접속 => https://nodejs.org/ko/
• lts 버전 다운로드, 압축풀고, pkg파일 설치해라
• terminal 열어서, node -v 입력해서 설치확인

---

npm

• 다양한 개발에 도움되는 도구들 설치할 수 있음 (aka 패키지 매니저)
• 터미널 열고
  • sudo npm install -g create-react-app
    : 리액트 앱 만들어주는 패키지 설치
  • create-react-app -V
    : 설치 확인
• 개발 진행할 폴더 만들고 해당 디렉토리 이동
  • cd
    : change directory (경로이동)
  • ls
    : list segments (파일목록)
  • create-react-app .
    : 개발 진행할 폴더에 리액트 어플리케이션 초기화

---

VS Code

• 코드 작성, 실행, 디버그, 배포 할 수 있는 프로그램 (aka 통합개발환경 ~ IDE)
  • 요기로 접속 => https://code.visualstudio.com/
  • 설치하고 프로젝트 폴더 열기
  • 터미널 열고 npm start, 웹 가동시켜보기

---

react

• 페이스북이 웹페이지 개발 쉽고 편리하게 하려고 만든 개발도구모음 (aka 라이브러리)
• 코딩 = 작고 간단한 레고블럭 조립해서 크고 복잡한 어플리케이션 만드는거
• 세가지 주요한 부품유형
  • 사용자에게 보여줄 화면 (component)
  • 사용자에게 보여줄 데이터 (props, state)
  • 사용자와 상호작용 이벤트
• 복잡하게 보이지만 사실은 간단함. 처음에는 필요한거만 알면됨. 다른것 신경꺼도 문제없음.
  • index.js / 시작점
  • index.css / 안에 있는 내용 다 지우기
  • app.js / div 안에있는 내용 다 지우기
  • app.css / 안에 있는 내용 다 지우기

---

Component

• 기본 컴포넌트 써보기
• 버튼
• 입력창
• 텍스트

여기 리뉴얼 필요

---

vscode 확장툴

• 개발 편리하게 해주는 도구들
• prettier : 코드 형식 깔끔하게 정리해줌.
• eslint : 코드 문법 틀린 부분 체크해줌.
• path intellisense : 경로 자동 선택지 제공.
• auto close tag : html 태그 자동으로 닫아줌
• auto rename tag : html 태그 자동으로 바꿔줌

---

간단 수업준비

• 벨로그가 만들어준 마크다운 화면을 고대로 스샷찍어서 파워포인트로 강의안 마련
  

---

나가기

• 아 그래도 이정도면 선방했다. 할만하다고~~~
• 이번주 설연휴! 월욜 화욜도 진행하기로 했구.
• 월욜은 화면 전환하는 기능
• 화욜은 데이터 사용하는 기능
• 만족만족만족~~