혜벌쭉의 퍼블리싱

https://nolboo.kim/blog/2013/10/06/github-for-beginner/

동기와 비동기방식이란?

동기 synchronous : 동시에 일어나는 이란 뜻으로 요청과 결과가 동시에 일어남 (요청과 결과가 동시에 일어나야하기에 중간에 대기시간이 있움-느림)

-> 생활 속의 예로, 설거지-집안청소-빨래라는 3가지 할 일이 있다.

설거지가 끝나고 나면 집안청소를 하고, 집안청소를 끝나면 빨래를 함

각 업무의 예상소요시간을 1시간씩 잡아도 3가지를 다 하면 3시간이 지나있음.

가장 생각하기 쉬운 방법이지만, 할 일이 많아지면 점점 소요시간(누군가가 나를 기다리는 입장에선 대기시간)이 길어지는 단점이 있음.

[설계가 간단하고 매우 직관적 / 대기시간이 길어질 수 있는 단점 ]

동기방식으로 이메일 바로행하는 프로그램 

-> 만명에게 이메일 보내면 한명, 한명, 한명

비동기 Asynchronous : 동시에 일어나지 않는 뜻으로 요청부터 하고 결과는 동시에 일어나지 않는다는 뜻으로 보면 됌 

Non-blocking input/output

-> 동기식의 예를 들 때와 마찬가지로 설거지, 집안청소, 빨래라는 3가지 할 일이 있을 때

설거지하는 업체에 전화를 해서 설거지를 부탁하면서 끝나면 전화하라고 당부함

집안청소, 빨래까지 각 업체에도 같은 내용으로 통화를 함

3시간이 걸리지도 않은 채 3가지 일을 '시작'했다고 볼 수 있어서 일처리가 동기보다 상대적으로 빠른 편..

하지만 언제 끝날지는 알 수 없음.! 그래도, 동기보단 세가지 일이 병렬적으로 해결이 가능하다.

[맡겨야 하는 과정들이 조금 복잡하지만 / 결과가 주어지는 그 사이 시간 및 자원을 효율적으로 쓸 수 있음]

즉

=> 업무를 볼 때에도 한사람이 4가지 일을 첫번째 끝내놓고 두번째, 두번째 끝내놓고 세번째 해결하는 것보단

한사람이 4가지 일 중 첫번째를 남한테 맡겨서 스타트를 끊어놓고 두번째를 자기가 하고 있는게 일이 처리되는 효율성은 훨씬 높음

비동기방식으로 이메일 발행

-> 이메일 보내는 별도 시스템에게 만명에게 이메일 보내라는걸 하면!

우선 사용자에겐 사용자에게 전송을 완료했습니다. 메세지 보냄

(전송 시작됐다는 메세지 나오고 뒤에서 이메일을 보내는 중...)

* 우체국에 비유

 - 외부직원 : 싱글쓰레드

 - 손님 : 개별 유저

 - 동기 : 외부직원이 처리할 때까지 손님이 기다림

 - 비동기 : 순번을 예약해놓고, 자신의 차례가 되면 와서 처리, 기다리지 않음.

1. 싱글쓰레드 & 동기

 - 하나의 우체국에 한 명의 직원, 즉 손님1 이 짐을 처리할 때까지, 손님 2,3,4 는 기다려야합니다.

   손님1의 처리가 끝난 뒤, 손님2의 짐을 처리할 수 있습니다. 이게 싱글쓰레드 - 동기 처리입니다.

   따라서 손님 하나를 받는동안 나머지 손님들은 기다리기만 해야합니다. 

2. 멀티쓰레드 & 동기

 - 우체국을 손님수만큼 만든다. 손님이 1000명이라면 우체국을 1000명 만들고, 손님1의 짐은 우체국1이

   손님2의 짐은 우체국2가 처리한다고 한다.  손님들은 기다리지 않아도 되지만, 우체국이 쓸데없이 너무 

   많아지게 된다. 즉 성능이 안 좋아진다. 이 방식이 기존 웹서버의 처리방식이였습니다.

3. 싱글쓰레드 & 비동기

 - 우체국은 1개이나, 손님1이 예약을 하고 집에가서 기다리는 방식. 각 손님2, 3, 4... 들도 예약을 하고, 

   우체국은 각 손님들의 우편이 도착하면, 각 손님들에게 알려주고, 손님들은 기다리지 않고, 바로 자신의  

   짐을 처리할 수 있다. 기술적으로 이런 방식을 멀티플렉싱이라고 합니다.

4. 멀티쓰레드 & 비동기

 - 이 방식은 각 우체국을 손님 수만큼 늘리는 것이 아니라, 위의 싱글쓰레드-비동기 방식에서 처리하는 방식의

   우체국을 10개정도만 늘려서 우체국이 비동기로 처리하는 방식입니다. 기술적으로 상황에 따라 cpu갯수 * 1~4

   퍼포먼스가 가장 잘나옴.

참고하기 좋은 사이트들

① http://hamait.tistory.com/694 (동기와 비동기의 우체국 예)

② https://private.tistory.com/24 (동기와 비동기의 은행 예)

19.03.02 

이직 목적이 아니라도 내 레벨을 증명하기 위한 자료는 항상 구비되있어야한다,,,

사람일은 어떻게 될지 모르니깐 ㅎㅎㅎㅎ 공무원이 아닌 이상 안주해있을 수만은 없는 업계이기도 하고..

2019년의 목표는 프론트엔드 개발자로서 거듭나는게 가장 큰 커리어 목표당

그에 따라 해야할 일련의 과정들을 나열해보고자 한당

1. 포트폴리오 준비

  1) 설치형 CMS 그누보드/영카트/워드프레스 < 개인적으로 그누보드 영카트보단 워드프레스가 더,,, 욕심난단 말이지 이유는 

워드프레스 기반으로 디자인된 사이트들이 넘 예쁜 사례들을 많이 봐가지구 무의식적으로 배우고싶단 욕심이 생겼당)

  2) 회사에서 했던 퍼블리싱 자료들 정리해보고, 원본소스 있음 따로 백업해놓고 그게 곤란할 것 같으면 캡쳐라도 떠놓기)

  3) 새로 배우는 리액트로 진행하는 프로젝트들도 자신있게 실을 수 있도록 최선다해보깅

2. node.js / react.js / vue.js 노드와 프레임워크 학습

3. ES6 자바스크립트 학습

이것조차도 다 할 수 있을진 모르겠지만 무작정 겁먹고,, 안해보는건 쫌 아니니깐 해봐야지,,,

너무 무리하게 세운건지 적당하게 세운건지 모르겠지만 ㅋㅋㅋㅋㅋ 

그래도 이렇게 글로서 흔적이라도 남겼으니 행동으로 잘 실천해야겠다.

와 개힘들다 ㅎ

무슨 개발환경 세팅하는데만 이렇게 오래 걸리냐 ㅎㅎㅎㅎㅎㅎ..

우선 설치햇긴 햇는데 이게 맞는건지 모르겟넹 ㅎㅎㅎㅎㅎ

https://www.icelancer.com/2016/11/nvm-nodejs.html

https://gist.github.com/falsy/8aa42ae311a9adb50e2ca7d8702c9af1

아주아주 도움이 됏던 블로그들

출처는 https://velopert.com/3621

-글을 시작하기에 앞서, 본 포스팅은 정보성보단 기록용 성질이 강한 글임을 미리 알려드립니다....-

react 프레임워크를 학습하기 전, 거쳐야하는 단계 개발환경 세팅!

react.js는 자바스크립트 기반 프레임워크이기 때문에, node.js를 설치해줘야한당.

node.js는 ?? -> 나중에 적어야지

node.js를 설치하면서 npm이 자동으로 설치되긴 하는데,

react.js 개발환경을 세팅할 때는 좀 더 개선된 자바스크립트 기반 패키지 매니저 도구로 Yarn을 설치해야한다.

설치해보잣

https://yarnpkg.com/en/docs/install#mac-stable

를 들어가면 

이 화면이 뜬다 신기하게 자동으로 macOS로 설정이 됌 ㅎㅎ

version은 뭔지 모르겠으니 나중에 알아보는걸로 하고^^

우선 보니깐... 터미널에 무작정 brew install yarn을 입력하니깐

명령어가 안먹고 뭘 깔라고 나온다. 앱스토어에서 명령어 입력기 깔라고 자동으로 띄어주길래 깔아주고..

눈치상 homebrew package manager를 클릭해야할 것 같아서 클릭하고 들어가니

https://brew.sh/index_ko 사이트가 떴다.

터미널에 붙여넣기 하라 해서 말 잘들었음 ^^

붙여넣으니깐 패스워드 입력하라 해서 무슨 패스워드? 이러고 있었는데 내 맥북계정 패스워드였당.

입력하고 나니깐 설치가 됌

그러고나서 ~_~

brew install yarn

입력하면 설치된당!!

-끝-