컴퓨터언어/Vanilla JS(16)
-
함수형 프로그래밍 #3 - 기능에 따른 콜백의 여러가지 이름
이 포스팅은 아래 강의를 수강하며 정리한 글입니다. https://www.inflearn.com/course/%ED%95%A8%EC%88%98%ED%98%95-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D 자바스크립트로 알아보는 함수형 프로그래밍 (ES5) - 인프런 마플(http://www.marpple.com)의 CTO 유인동님이 알려주는 함수형 프로그래밍에 대한 강좌 입니다. 함수형 프로그래밍으로 라이브러리를 직접 만들어가며 함수형 프로그래밍의 패러다임과 코딩의 즐거 www.inflearn.com 프로그램을 함수형으로 작성한다면, 하나의 함수는 고차함수로서 또다른 함수를 값(인자)으로 전달하게 된다. 이렇게 내부의 인자로 전달되어 고차함수보다 먼저 종료되는 함수를..
2020.08.06 -
함수형 프로그래밍 #2 - 메서드를 함수형으로 전환하기
이 포스팅은 아래 강의를 수강하며 정리한 글입니다. https://www.inflearn.com/course/%ED%95%A8%EC%88%98%ED%98%95-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D 자바스크립트로 알아보는 함수형 프로그래밍 (ES5) - 인프런 마플(http://www.marpple.com)의 CTO 유인동님이 알려주는 함수형 프로그래밍에 대한 강좌 입니다. 함수형 프로그래밍으로 라이브러리를 직접 만들어가며 함수형 프로그래밍의 패러다임과 코딩의 즐거 www.inflearn.com 굳이 함수형 프로그래밍을 하지 않아도 상관은 없다. 하지만 사람이라면 누구나 실수하기 마련이고, 또 코딩은 나 혼자만 하는 것이 아니기 때문에, 유지보수와 사후관리를 위..
2020.08.06 -
함수형 프로그래밍
이 포스팅은 아래 강의를 수강하며 정리한 글입니다. https://www.inflearn.com/course/%ED%95%A8%EC%88%98%ED%98%95-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D 자바스크립트로 알아보는 함수형 프로그래밍 (ES5) - 인프런 마플(http://www.marpple.com)의 CTO 유인동님이 알려주는 함수형 프로그래밍에 대한 강좌 입니다. 함수형 프로그래밍으로 라이브러리를 직접 만들어가며 함수형 프로그래밍의 패러다임과 코딩의 즐거 www.inflearn.com 성공적인 프로그래밍이란? 사용성, 성능, 확장성, 기획변경에 대한 대응력을 효율적이고 생산적으로 이루는 일 함수형 프로그래밍이란? 성공적인 프로그래밍을 위해 부수효과를 ..
2020.08.02 -
form 안의 button은 기본적으로 submit 기능을 가지고 있다! (preventDefault 안 먹힐 때?)
HTML만을 다루거나 정적 웹사이트를 만들 때는 그럴 일이 거의 없겠지만, 사용자의 입력에 따라 다르게 반응해야 하는 웹앱(CRUD는 기본)을 제작한다면 JavaScript에서 innerHTML로 태그를 직접 수작업으로 넣어주어야 하는 경우가 있다. 그래서 실수하기 쉽다. IDE에서 오리지널 HTML이나 EJS, PUG 등 템플릿을 사용한다면 HTML Element의 속성들도 자동추천해주기 때문에 버그가 적다. 하지만 JS에서 수작업을 한다면 특정 속성을 간과한 것이 큰 버그로 이어질 수 있다. 나는 사용자들의 댓글 내용을 li 태그로 뿌리면서, "현재 로그인한 유저의 id"와 "댓글작성자의 id" 같은 li에 한해서 삭제버튼을 부여하려고 아래와 같은 코드를 만들었다. myForm.innerHTML = ..
2020.07.26 -
[Non-blocking] JavaScript는 단일쓰레드(하나의 스택)를 사용하면서 논블로킹(비동기실행)이 가능하다.
JavaScript는 개발자가 작성한 코드를 스택에 집어넣고 하나씩 실행하는 "콜스택" 방식으로 실행되는 언어이다. 콜스택은 하나의 함수가 실행을 마치고 스택을 나가야만 다음 함수가 들어와 실행되는 구조다. 그런데 JavaScript는 이 스택이 하나인 단일쓰레드를 따르기 때문에, 어떤 함수가 굉장히 무거운 작업(이미지 처리 또는 API Request 등)을 담고 있다면, 그 작업의 처리가 완료되기 전까지 다른 작업을 하지 못하는 동기적(syncronous)실행 언어라고 생각될 수 있지만, JavaScript에는 Web API와 Queue가 있어서 비동기(asyncronous)실행이 가능하다. *Syncronous : 선생님에게 전화를 거는 상황 - 선생님이 전화를 받기까지 다른 것을 할 수 없고, 전화..
2020.06.01 -
[Destructuring] 배열 또는 객체 내 원소를 직관적으로 이용하기
배열은 [0], [100]처럼 숫자로 인덱싱을 하고, 객체는 myObj.name, myObj["name"]처럼 key로 인덱싱을 한다. 인덱싱은 분명 그 자체로 빠르고 직관적인 탐색이지만, 코드량이 많아지거나 협업을 할 때 갑자기 [0]이 나타났다면 코드의 흐름을 한눈에 파악하기 어려울 수 있다. 게다가 배열 안에 또다른 배열이 있거나, 객체 안에 또다른 객체가 있거나, 객체 안에 배열이 있거나 등등 데이터가 중첩되고(nested) 복잡해진다면 더 말할 것 없다. 이럴 때 기존처럼 단순히 숫자나 key로 접근하는 것이 아니라, 언제봐도 직관적으로 이게 어떤 값에 접근하는지를 나타내는 커스텀 인덱스가 있으니, 이것이 바로 Destructuring이다. Destructuring은 단어 그대로 구조를 해체하는..
2020.05.23