기본 콘텐츠로 건너뛰기

3월, 2024의 게시물 표시

;

  자 제목이 참 뜬근없기도 하다. 저게 뭘까?  empty statement라고 부르는 것이다. for ( let i = 0 ; i < 1000 ; i++) ; 과연 위의 코드는 무엇일까? 옛날 개발자가 보았다면, 특정 시간을 기다리는 코드라고 말할 것이다. 하지만, 현대에서는 절대로 의미 없는 코드라는 것은 알고 있을 것이다. 자 이제 사용할만한 부분을 보자. const condition = 'A' ; if ( condition === 'A' ) { // do Something } else if ( condition === 'B' || condition === 'C' ) ; else { // do Something }  자 일단 위 같은 코드인데, 1. A인 경우 2. A가 아니면서 B,C 인 경우 3. A, B, C 가 아닌경우. 2번의 경우 아무것도 실행 안하고 else문에 도달하는 것을 멈추게 할 수 있다. 실무 입장에서는?  참으로 javascript는 empty를 좋아한다. 희소배열 이라던지, 애로우 평션의 empty body라던지, empty statement라던지,  하지만 모든 empty요소가 오류의 가능성을 내재 하고 있다. 1. 희소 배열의 경우, 일반적인 for문과 map의 순회 횟수가 다른다. 2. 애로운 평션의 엠티 바디의 경우, 원래 원했던 리턴값이 undefined인지, plain object인지 헷갈린다. 3. empty 스테이트먼트의 경우, 진짜로 원해서 그 위치에 ;가 들어간건지 헷갈린다.

세상에 나와선 안되었던 키워드. async/await

 오늘은 한 가지 세상에 있어서 안되었던 키워드를 이야기 하고자 한다. 뭐 물론, 이 키워드를 이용하여, 만들어진 프로그램은 수도 없이 많을 것이다. 특히나, ES6이후에 만들어진 웹사이트 Node 서버들은 무조건 포함이 되는 키워드일 것이다.  이런 생각을 하는 사람들은 그렇게 많지는 않을 것 같다. 아마도 동료들한테 말을 하는 순간 엄청나게 욕을 먹고 까일 것 같다...  async/await은 비동기 코드를 동기코드로 만들어주는 아주 마법 같은 키워드이다. 하지만 그로 인해서 모든 대부분의 개발자들이 동시성이 주는 마법을 잊어버리고 있다. 특히나 싱글스레드인데도 사용하다니, 더 이상 동시성에 대한 고려를 하지 못하도록 원천 차단하고 있다.  그래도 Promise 때 까지만 해도 좋았다. 무슨 말일까? 잠깐만 아래의 코드를 잠깐만 생각해보도록 하자. promise 방식 function initData () { apiCall1(). then ((res) => { this . data1 = res. payload }) apiCall2(). then ((res) => { this . data1 = res. payload }) apiCall3(). then ((res) => { this . data1 = res. payload }) } async/await async function initData () { this . data1 = await apiCall1(). payload this . data2 = await apiCall2(). payload this . data3 = await apiCall3(). payload } 자 이 두개의 코드가 내가 말하고 싶은 것의 축약본이다. apiCall1: 1초, apiCall2: 2초, apiCall3: 3초, 라고 생각해보자. 총: async/await으로 작성된 코드는 6초, promis

함수형 프로그래밍의 역사.

  간단하게, 이 내용을 작성하는 것은, 자꾸만 주변에서 함수형프로그래밍이 망했던... 패러다임이라는 내용이 오갔던, 내용이 있어서 그에 대한 내용을 작성을 합니다.  요즘 개발자들이 오해를 하는 부분들이 있는데, 함수형프로그래밍이 아주 최신에 만들어진 패러다임이라는 생각이다.  간단하게 위의 이미지만 보더라도 말이다. 뭐 간단하게 말하면, 라이터와 성냥같은 차이이다. 라이터가 성냥보다 최근에 만들어진 도구라고 생각 할 수 있지만, 성냥이 더 최근에 개발된 것이다.  컴퓨터 공학도라고 하면, 튜링머신에대해서 배웠을 것이다. 영화( 이미테이션 게임 (2014) )에서 본 사람들도 있을 것이고 말이다. 튜링머신이 왜 만들어졌는지 알까? 영화만으로 본 사람들은 독일군의 암호를 해독하는 그 장치가 튜링머신이라고 오해 할 수 있다. 하지만, 컴퓨터 공학도 라면, 간단하게 종이와 볼펜만 가지고 튜링머신을 만들 것이다.  튜링머신은 20대 였던, 앨런튜링이 작성했던, 논문(  1936년   )에서 만들어진 기계 이름이다. 발명하게된 이유는 A라는 수학자가 세상에 우리가 알고 있는 모든 명제를 학습 시킨 머신이 있다면, 확인되지 않은 명제x를 입력을 하게 되었을 때, 모든 명제에 대해서 참과 거짓을 판별을 할 수 있고, 그렇게 하여 자동으로 명제X들을 다 풀어낼 수 있다. 이 내용을 부정하기 위해 만들어진 종이쪼가리 머신 일 뿐이다. 거짓에대한 증명을 홀팅프러블럼을 이용하여 증명 하였다.  일단 대충 내용이 튜링머신에 대해서 길어지니, 왜 이 내용을 이야기하는 것일까? 우리가 알고 있는 절차형 프로그래밍이 튜링머신과 닮았다고 생각하지 않는가?  현재의 상태를 보관 하고 있는 테이프(상태)에 따라 명령이 실행되는 방식이다. 절차지향형 프로그래밍언어 C라이크 언어들에 대한 내용이다.  자 절차형프로그래밍에 대한 시초는 대충 훑어 보았고, 함수형프로그래밍의 시초를 한 번 살펴보자. 함수형프로그래밍의 방식은 람다대수부터 시작이라고 볼 수 있다.  1930년 대 알론조 처치가 수학기

Iterator Helpers

  오늘날 generator function을 사용하는 사람들은 매우 적다. 현재 상태에 따라, 결과가 달라진다라는 것도 요즘 패러다임에는 맞지 않는 방식이니까 말이다. 하지만, 이번에 Stage 3 Draft / December 12, 2023 스펙에 "Iterator Helpers"가 등장한 것은 꽤나 흥미로운 일이다.  언젠가 iterator에 대해서 다루면서, 가장 간단하게 iterator를 생성하는 방법으로 generator function을 소개하였다. function * test () { yield 1 ; yield 2 ; yield 3 ; } let iter = test () ; const arr = [... iter ] ; console . log ( 'arr' , arr ) ; iter = test () ; for ( const item of iter ) { console . log ( 'item' , item) ; }  iterator는 펼침연산을 수행할 수 있고, for of를 이용하여 순회 할 수 있다. 하지만 무엇인가 부족했다. iterator 자체로는 map을 사용할 수 도 없고, filter를 사용할 수 없었다.  그것이 바로 Iterator helpers인 것이다. function * test () { yield 1 ; yield 2 ; yield 3 ; } [... test (). map (v => v * 2 ). filter (v => v % 3 )]  map과 filter를 사용하여, 새로운 iterator를 받을 수 있게 되었다. 그 뿐만이 아니다. [... test (). flatMap (v => test ()). map (v => v * 2 ). filter (v => v % 3 )]  당연하게도, flatMap이 사용 가능하다!  위에서는 펼짐 연산자를 이용하여, 배열로 형변환을 해주었지만?  test (). toArra

옛날 코드 다시 읽기 4 (비동기 api 호출)

 제너레이터 함수를 다루어 보았을까? 만약 그렇다면, async/await이 없던 시절에 개발을 했던 사람일 수 있다.  자 오늘은 옛날 코드 다시보기가 될 수 있을 수 있다.  callBack  자 하나하나씩 보도록 하자. 일단 xmlHttpRequest나 form방식은 건너띄고, 우리에게 친숙한 callback 방식이다. // callBack 버전 $.ajax({ url : 'https://jsonplaceholder.typicode.com/comments' , dataType : 'json' , success : function (comments) { // 댓글 목록을 처리합니다 . // ... // 댓글 목록을 가지고 POST API 호출 const comment = comments[ 0 ]; // 첫 번째 댓글 선택 const postData = { postId : comment . postId , name : comment . name , email : comment . email , body : comment . body , }; $.ajax({ url : 'https://jsonplaceholder.typicode.com/comments' , method : 'POST' , data : JSON . stringify ( postData ), dataType : 'json' , success : function (data) { console . log ( ' 새로운 댓글이 생성되었습니다 :' , data);