[REACT] 본격시작 >> 이론공부, VisualCode, HTML, JavaScript, node.js

 

리액트 공부 첫 날의 기록이다.

오늘은 배운내용 정리보다는 거의 느낀점 기록에 가까움.

앞으로도 어떻게 공부내용을 정리할 지는 모르겠지만,

무튼 내가 기억하고 싶은 기록들을 자유롭게 적어나갈 것임.

그러므로 리액트에 대해 이론적 공부를 하고 싶은 사람은 내 블로그보단 다른 곳을 참고하시길!

 

 

 

---

2019. 10. 06

 

 

삼성역 L오빠의 사무실로 가서 사무실 투어를 하고,

리액트를 배우기 앞서 웹앱 개발에 대한 이론적 공부를 먼저 했다.

(쉬운 설명과 비유로 칠판가득 열강해주신 L오빠 진짜진짜 고마워)

 

다룬 내용은 많았지만 오늘 배운 내용의 핵심은 다음과 같았다.

1. SPA - Single Page App

2. Micro Service

3. JS의 등장배경

4. Interpreter Language versus Compiler Language

 

이거에 대한 설명은 인터넷에 많이 나와있으니 생략하고...

나중에 나도 따로 공부하면서 기회가 되면 정리해보겠다.

 

 

무튼 이론수업 이후 내 노트북에 VisualCode와 node.js, GitHub을 설치하고 본격적인 코딩을 시작했다.

L오빠는 Mac, 나는 윈도우 OS를 썼지만 설치하는 파일 버전만 다를 뿐 아무런 차이는 없었다.

학원에서는 Eclipse와 SVN을 이용했었어서 완전 새로 프로그래밍을 배우는 느낌이었다.

VisualCode를 많이 이용한다고는 들었는데, 드디어 써보게 되다니 신기했다.

10층 빅데이터반은 Spyder Python을 쓰던데 그것도 나중에 알아봐야지 note note

(와 근데 방금 알게된 사실인데 내 노트북에 Anaconda, Jupiter Notebook, Spyder 다 있었음;

예전에 파이썬 맛보기 할 때 깔았었었다. 멍춍멍춍)

 

참참, GitHub를 이용하기 위해 PowerShell를 cmd로 사용해야 했다.

그런데 L오빠를 따라 계속 명령어를 쓰는데 뭔가 익숙해서 봤더니 리눅스마스터 공부를 하면서 보던 문법이었다.

cd(change directory)같은 명령어들! 오 자연스럽게 리눅스마스터 공부도 되겠다. 개이득b

 

알고보니 깃허브를 만든 사람이 리눅스를 만든 사람과 동일하다고 한다.

미친.... 나는 리눅스가 너무 유명해서 창조자가 벌써 사망했을 줄 알았더니 깃허브도 만들었다는 말이지;;;;

알고보면 그런 천재들이 내 지능까지 끌어다 쓰고 있는 것 아닐까?

 

 

 

 

 

여튼간에 코드 편집기과 버전관리 툴만 다른 게 아니라

내가 아는 줄 알았던 HTML과 CSS, JavaScript도 학원에서 배운 것과 너무 달랐다.

예를 들면 아래와 같음 ↓

 

        <button onClick={() => setName(NAMES[_.random(0, NAMES.length - 1)]) } >
          Change Name!
        </button>

 

놀랍게도(?) 이건 내가 배웠던 HTML과 JavaScript를 이용한 건데,

위 코드에서 _.random 이라는 건 lodash라는 JS library 중에서 랜덤값을 선택하라는 코드이다.

이 기능을 쓰기 위해서는 import _ from 'lodash'; 라고 위에 미리 선언을 해줘야 하는데,

학원에서 배웠던 js 파일에서는 import를 써본 적이 없으므로 무척 생소했다... 자바인줄!

 

게다가 파일 작성을 완료하고 나면 export default App; 이런식으로 익스포트 시켜줘야

다른 파일에서도 가져다 쓸 수 있었다. 그냥 같은 패키지 안에 있으면 ㅇㅋㄷㅋ인 학원수업과는 달랐음!!!

 

달라진 JS 문법까지 L오빠가 붙잡아놓고 가르쳐줄 수는 없으니, 이건 내가 따로 공부해야 겠다.

 

리액트는 '함수형 프로그래밍'이어서 이것도 생소했음.

L오빠가 너가 최근에 배운 Spring, Mybatis의 핵심이 뭐야? 해서

MVC 패턴 이용한 관점지향 프레임워크~!! 하고 씐나게 대답하고 왕창 뿌듯해 했으나

그다음 바로 모르는 개념이 나와서 시무룩...

 

보통 우리가 함수(function)을 작성하면, 객체를 이용해 이런저런 기능을 선언하고 난 뒤에

마지막 라인에 return 객체명; 이란 형식으로 값을 반환하게 되는데

함수형 프로그래밍은 시작부터 function Name() { 필드선언; return (기능선언); }; 이런 형식이라 굉장히 생소했다.

 

다행히 CSS는 아직까지 다른점 못찾았다.

익숙한 게 하나라도 있어서 다행이다.

 

 

 

무튼 버튼을 누르면 랜덤으로 글자가 바뀌는 기능을 만들어보고

오늘의 수업내용을 나의 깃헙에 push하고 나니 벌써 밖은 캄캄했다.

 

이제 과제가 주어지고, 한 주 동안 열심히 과제를 완수해야 한다.

아직은 아주 쉬운 과제만 받았지만 이제 앞으로는 어찌 될지 모르겠다:Q

그래도 열심히 배워봐야지!!!!!

 

 

 

---

<< 간단정리 >>

React.js : 프론트엔드에서 UI를 동적으로 사용하기 위해 만든 JavaScript Library

(참고글: https://medium.com/@RianCommunity/react%EC%9D%98-%ED%83%84%EC%83%9D%EB%B0%B0%EA%B2%BD%EA%B3%BC-%ED%8A%B9%EC%A7%95-4190d47a28f)

 

git add <파일>
git commit -m “<메시지>”

(참고글 : https://medium.com/@joongwon/git-git-%EB%AA%85%EB%A0%B9%EC%96%B4-%EC%A0%95%EB%A6%AC-c25b421ecdbd )