3. 생활코딩 강의를 정주행해버리갔어-!

개발공부일기 3. ‘생활 코딩’유튜버님의 자바스크립트 강의를 정주행해버리갔어-!

 

나와 같은 초보 개발자는 어떤 루트를 통해서 개발 공부를 하는 것이 좋을까?

탁상공론 식의 고민이 아니라 나와 초보 개발자에게 무슨 방법이 맞을지 요즘 온 몸으로 부딪히며 공부를 하고 있다.

 

첫 번째 몸통 박치기

 

‘(아무것도 모르는 상태) 누가 나에게 이 일 해주면 돈 얼마 줄게! 이것좀 부탁해!’하면서 일을 던져주면 구글링을 하든, 유튜브에서 공부를 하든 해낼 수 있지 않을까하는 마음이 은연중에 있었다. 그래서 크몽과 같은 개발외주사이트에 어떤 일거리들을 실제로 거래가 되고 있고, 이를 위해서는 무슨 기술이 필요한지 찾아봤다. 어느 정도 파악이 된 다음에 견적 5개를 신청했다. 당연히 나에게 일을 시켜줄 리가 없지.

 

두 번째 몸통 박치기

 

‘일을 아무도 안 시켜주네. (당연한건데 왜 시무룩해하지?ㅋㅋ) 그럼 실제 일거리랑 흡사한 프로젝트들을 만들어보면 되자나!’하며 구글에서 정보를 찾아봤다. 그러니 나오는 것이 프론트엔드 개발자가 되기 위해 익혀두면 좋은 9가지 프로젝트였다. 그래서 리액트를 사용하여 만드는 영화검색어플을 따라해봤다. 당연한 얘기지만, 튜토리얼대로 다 따라해도 뭐가뭔지를 몰랐다. 기본적인 컴퓨터 단어와 문법을 아예 모르는 수준이였기 때문에, 구글링으로 하나하나 모든 것을 검색해도 바로 지식이 흡수되지 않았던 것이다. 그래도 꾸역꾸역 첫 번째 영화검색어플을 다 따라했다. 그런데 웬걸? 실행을 어떻게 하는지를 모르겠는...그리고 오류가 떠서 okky 개발자 커뮤니티에 자문을 구했다.

 

돌아온 답변은 다음과 같다.

 

‘개발 공부를 1주일 한 상태면 문법과 DOM관련해서도 거의 모를 텐데 바로 리액트를 따라하시는 것은 문제오류 잡기가 거의 불가능해요. 자바스크립트로 1달 정도 이것저것 만들어보며 기본 문법과 DOM을 익혀보는건 어떨까요?’

 

그래 좋았어! 요거지!!

 

세 번째 몸통박치기, 그리고 찾은 생활코딩 유튜브

 

댓글을 요약하면 다음과 같다.

 

javascript에서 문법적인 요소 : scope, closure, hoisting, first class citizen, async/await, promise, callback, annonymous function, this

DOM 관련 : event bubbling, capturing, listener, id, class

+ node.js가 무엇인지 왜 사용하는지 이해하고 module system, npm, export, export default, require, import 공부하기 // 그리고 나서 대망의 react 공부하기!!

 

그래서 내가 맨 처음에 할 것은 무엇? 바로 javascript에 대해 요리조리 만져보며 문법과 DOM을 이해하는 것이다. 그래서 ‘projects using javascript’라고 구글에 검색했다. lolcat, calculator, clock 등등 간단한 튜토리얼들이 많이 나왔다. 그 중에서도 관심이 가는 것이 있었다. 평소 많이 듣기만 했던 ‘생활코딩’ 유튜브이다.

 

‘Javascript 입문 수업’이라고 적혀있는 카테고리를 들어갔다.

‘그래 이거지!’하며 8강 정도 들었다. 오랜만에 보는 한국어강의라서 그런지 반가웠고(휴,,,며칠간 아메리칸 사람인줄..ㅋㅋ) 이해하기 쉽게 egoing님이 설명해주셔서 집중해서 들을 수 있었다. 102개의 강의이지만, 하나의 영상이 별로 길지 않아서 금방 뽀실 수 있지 않을까싶다.

 

여기까지가 최근 개발공부의 방향을 정해온 흐름이다. 그럼 오늘 공부한 것들을 한번 정리해봐야지ㅎㅎ

 

* 데일리 개발공부

 

1. javascript란 무엇인가?

 

javascript는 웹 브라우저에 ‘hello world’와 같은 내용이 프린트되도록 명령한다. 웹 서버라는 것이 있는데, 원래는 PHP, JAVA, PYTHON, RUBY 등등의 언어가 담당을 했었다. 그런데 node.js라는 것이 등장을 하며 javascript로 웹 서버와 웹 브라우저 동시에 호환이 될 수 있는 환경이 되었다.

 

자바스크립트가 웹 브라우저를 제어하기 위한 효용으로 끝나는 것이 아니라, 구글 스프레드시트, 그리고 웹 서버의 제어에도 범위를 확장하여 기능을 펼칠 수 있다는 것을 알아야 한다.

 

웹브라우저, node.js, 구글 스프레드시트 각각 환경이 달라짐에 따라 사용하는 명령과 문법도 달라진다.

 

* node.js가 무엇인가?

 

: 확장성 있는 네트워크 애플리케이션(특히 서버 사이드) 개발에 사용되는 소프트웨어 플랫폼이다. 작성 언어로 자바스크립트를 활용하며 Non-blocking I/O와 단일 스레드 이벤트 루프를 통한 높은 처리 성능을 가지고 있다.

 

non-blocking : A스레드에서 오류가 발생시, B스레드에는 영향을 주지 않도록 하는 방법. non-blocking algorithm(wait-freedom, lock-freedom -> )

https://en.wikipedia.org/wiki/Non-blocking_algorithm#Wait-freedom

 

Asynchronous I/O(에이신크로니스, 비동기 입출력)을 활용하여 어떻게 하면 더 효율적, 더 문제없는 프로그램을 만들 수 있을지 반영한 것.

 

Difference between non-blocking I/O and asynchronous I/O

- 논블로킹 I/O는 처리 가능한 상태도 오류로 나타난다. 비동기 I/O는 완전히 처리가 되지 않았을 때, 백그라운드에서 대기하고 처리가 되고 나서는 통지를 한다.

추가 개념

 

concurrency(동시성) : 한 프로세서 안에서 여러 개의 잘게 쪼개진 업무들을 감당할 수 있도록 만들어놓고 일의 순서와 상관없이 일이 할당되면 쪼개진 업무를 프로그래밍한 범위 안에서는 바로 처리할 수 있도록 한다는 것. 효율성의 측면에서 장점을 갖고 있다.

parallelism(병렬성) : 처리자의 공급을 늘려 생산성을 늘린 것이다. 그러므로 한 프로세서 안에서 2가지 이상의 일을 처리하는 것은 불가능하며, 처리하는 사람의 수를 늘려 일의 생산성을 높인 개념이다.

스레드 : 프로세스 내에서 실행되는 흐름의 단위. 일반적으로 한 프로그램에 하나의 스레드가 들어있다. 하지만 2개 이상의 스레드를 가진 프로그램도 있다. 이를 멀티스레드라고 한다.

 

alert(‘여기에는 자신이 원하는 문구를 넣어주세요’);

 

WARN : alert(‘브라더원\’s 실험실’); => 역슬래쉬 뒤에 ‘가 오면 정보로써 취급한다

\n은 줄바꿈이다.

 

* 오늘 배운 인풋을 삶과 연결하여 아웃풋으로 전환시킬 거리가 있는지?

 

아직 기초개념 공부라서 떠오르는 아이디어는 없다.