전체 글
[JS/호이스팅/실행 컨텍스트/이벤트 루프] JS 코드의 흐름
저는 var을 한번도 써본적이 없지만, JS는 오래동안 써왔던 언어이므로 ,var를 마주칠 가능성이 높습니다. (var은 호이스팅을 하기 때문에, 선언하지 않아도 접근이 가능해지며 재할당을 해도 아무런 상관이 없는 문제가 있었습니다) JS의 코드의 흐름중에 하나인, 호이스팅부터 짚고 넘어가볼까요! 호이스팅(Hoisting) 아래의 코드를 보시죠! 어떤 문제가 있어보이나요? var a=5 console.log(a) 아뇨, 없습니다! a=5 라는 결과가 나올겁니다. 아래의 코드를 보시죠 . 문제가 있을것 같나요? console.log(b) var b=5 놀랍게도, 아래의 코드도 "실행"은 됩니다. 의도치 않은 결과인 "undefined"를 뱉을 뿐, 에러는 발생하지 않습니다. C언어,Java와 같은 정적인 ..
[JS/EventLoop/CS] JS의 코드의 실행을 이해기 위한 CS
JavaScript는 다른 언어들과 다르게, 특이한 흐름이 있습니다. JS는 "싱글 쓰레드"언어이지만, 동시성을 갖고 있는 언어이기도 합니다. 이게 무슨말인지 잘 와닿지 않을 수 있습니다. 여기서는 CS지식이 들어갈 수 밖에 없고, 저는 다행히 전공을 했기 때문에 이해가 가지만, 어려운 개념에는 틀림이 없습니다! 천천히 가보죠! 동시성(Concurrency) 프로그램 처리 관점에서 Concurrency는 "동시에 수행하는 것 처럼 동작시키는 것"을 이야기합니다. 아래의 예시를 보시죠. 어떤 작업 Task1,Task2가 듀얼코어의 CPU 시스템에서 처리된다고 생각해봅시다. cpu는 1개의 task밖에 처리를 못한다고 가정하겠습니다. 이런상황에서 , task 3,task 4를 진행시키고 싶은겁니다. 다른 말..
[JS/this/호출스택] JS의 This 정리 (호출스택,This)
이제 JavaScript에 대해서 조금 깊게 다루어볼까 합니다. JS를 다룬지 벌써 꽤 되었습니다. 하지만, 여전히 익숙하지 않은 부분이 많고, "JS"만의 특징들이 몇개 있습니다. 그 점을 다루어보려고 합니다! JavaScript에서는 함수의 매개변수로 함수를 넘길 수 있다는 점입니다. 심지어, "함수"그 자체가 변수가 되기도 하였습니다. JS에서 함수(Function)은 1급 객체이다. 자바스크립트에서 함수는 1급 객체입니다. 함수가 "값"처럼 취급이 됩니다. 대표적인 형태가 callback 함수입니다. "값"처럼 취급 된다는 이야기는, JavaScript에서는 함수를 변수로 담을 수 있고, 함수를 매개변수로 전달도 할 수 있다는 이야기입니다. const calc = (callback,a,b) => ..
[JS/Array/Basic] Array를 잘 다루어보자- 2
결국 우리는 직접 조건을 작성하여, 배열을 처리하는 경우가 많다. 하지만, 이 조건을 메서드를 이용해서 for문 작성없이 깔끔하게 한 문장으로 처리할 수 있다면, 생산성이 아주 좋을 것이다. 그러기 위해서, 나오게된 ES6 문법들을 알아보자. 정확히는 "iterable"하면 쓸 수 있는 메서드지만, Array는 iterable하기 때문에, 아래의 메서드들이 다 사용이 가능하다. 배열을 조건에 맞게 탐색, 만나는 첫번째 원소값을 반환 어떤 요소가 배열안에 있는지 ,없는지 찾고 싶을 때가 있다. 그럴 때 유용하게 쓸 수 있다. const arr=[1,2,3,4,5,6,7] find() 주어진 판별 함수 (콜백)를 만족하는 첫번째 요소의 값을 반환합니다. 그런 요소가 없다면 undefinded를 반환합니다. ..
[JS/배열/Method/Array] Array를 잘 다루어보자!
JavaScript에서는 Array를 다룰 일이 많았다. React에서도 Map,filter,find 같은 메서드는 자주쓰기 때문에, 한번 쯤은 정리를 해야겠다 싶어, 이번 기회에 10개정도를 연습해보려고 한다! 배열을 문자열로 변경하기 (Join) 처리를 할 때는 배열형태가 좋지만, 마지막에 출력할 때는 결국 String형태로 바꿔야하는 경우가 자주있다. 즉 , 특정 배열을 모두 문자열로 나타내어, 출력하는 상황이 자주 발생한다. // make a string out of an array const Target = ["i","love","you"] join() 배열의 모든 요소를 연결해 하나의 문자열로 만듭니다. 반환: String을 반환합니다. 사용방법: array.join([seperator]) ,..
[REST/API/WEB] REST API에 대해서
REST구조에 대해서는 설명이 끝났으니, REST를 만족하는 API에 대한 설명으로 REST에 대한건 마치려고 합니다! 먼저, API에 대해서부터 알아보죠! API API는 Program과 소통하기 위한 모듈, 혹은 함수를 이야기합니다. 현실세계에서 예시를 들면, 식당을 예시로 많이들게 됩니다. 주방장이 Server , 점원(홀)이 API , 손님이 Client라고 예시를 많이듭니다. 하지만, "Program과 소통하기 위한 함수" 라고 정의하고 싶습니다. 왜냐하면, 프로그램끼리 소통을 하기위해서 API를 쓰기 때문이죠. 단순히 client가 server에 요청하는 형태의 API뿐만아니라, Program과 Program 혹은 Program과 유저가 소통하기 위해서 만들어놓은 별도의 로직, 함수라고 정의할..
[REST/WEB/구조] Rest구조에 대해서
Rest API , RESTFul API 정말 많이 들어본 말이다. Web개발자라면 한번 쯤은 들어본 말일거다. 오늘은, 제가 이해한 REST 구조에 대해서 이야기 해보려고 합니다! REST의 등장배경 REST는 2000년도 Roy fielding의 박사논문에서 나오게 됩니다. Roy Fielding님은 HTTP 1.0 , HTML 명세 등 웹 표준화 작업에 참여한 엄청난 컴퓨터 과학자 분중 한 분 이십니다. Web은 1991년에 처음으로 등장했는데, Web 통신은 HTML로 , URI를 통해서 HTTP로 통신하자고 이미 약속되어있었고, 사용되어지고 있는 상황이었습니다. 따라서, HTTP 1.0을 발표한 상태에서, 이미 웹은 여러 곳에서 사용 중 이었고, Roy Fielding 박사님은 그 당시 대학원생..
[React/State/Props] MVC 모델과 Flux모델 , React의 선택
React의 핵심은 "상태(state)"를 어떻게 잘 관리하냐는 것입니다. TodoList를 짜면서도 느낀거지만, 기본적으로 state는 setState로 비동기로 관리하게 되고, 불변성을 만족하는 등의 일종의 제약조건이 있게 됩니다. React는 화면과 데이터를 일치시키기 위해서, 다른 말로 하면 실시간 렌더링을 위해서 , Flux패턴을 채용했습니다. 상태 끌어올리기를 이해하기 위해서는, React의 기본적인 데이터의 흐름에 대해서 이해해봅시다! React의 데이터 흐름을 이해하기 전에, 간단하게 90's부터 이어져온 ,전통적인 Web Model에서의 Data 흐름을 봅시다. 그래야 React가 왜 FLux를 썻는지 더 잘 와닿습니다. 전통적인 Web Model (MVC) React 또한 MVC 모델을..