Look and Find what i've done. 분류 전체보기 TIL Front javascript CS ps special 클린코드 - 타입 검사 자바스크립트의 타입 검사가 까다로운 이유 : 1. 동적으로 타입이 변하기 때문! 자바스크립트의 동적 타이핑과 duck typing에 대해서는 여기 재밌는 글이 하나 있다. 자바스크립트는 왜 프로토타입을 선택했을까 프로토타입으로 검색하면 으레 나오는 서두처럼 저 또한 자바스크립트를 처음 접했을 때 가장 당황스러웠던 게 프로토타입이었습니다. medium.com 2. 타입을 검사하는 데에 1가지 방법만 있는 게 아니기 때문 !..! 타입 검사의 방법이 하나로 정해져있는 게 아니라 내가 어떤 것을 검사하는지 그때마다 잘 보고 판단할 수 있어야 한다. typeof primitive type은 typeof를 사용한 검사가 대체로 수월한 편! 그러나 하나 무시무시한 자바스크립트의 언어 오류가 있다! 바로 null을 .. 클린코드 - 변수다루기 해당 정리는 아래의 강의를 기반으로 합니다. 클린코드 자바스크립트 자바스크립트를 위한 코드 스타일부터 습관 그리고 클린 코드에 대해 함께 고민해보고 그 이유에 대해 탐구하고 또 학습해보는 시간을 가집니다. www.udemy.com 온라인몰 유지보수 개발자로 일하고 있으면서 화가날 때가 많습니다...ㅎㅎ jsp 기반이고 순수 js로 동적으로 모든 것을 처리하며 게다가 규모가 꽤 큰 어플리케이션인 상당히 오래된 레거시라,,, var 천국에서 유지보수를 하고 있기 때문;;;;;; (모든 작업을 할 때는 ctrl + h (전역에서 찾기) 가 필수일 정도로... ) 이렇게 유지보수 하기 힘든 환경에 그저 화만 났는데 해당 강의를 통해 좀 더 구체적으로 "왜" 이렇게 힘든지에 대해 파악해볼 수 있었습니다. 해당 강.. [함수형 자바스크립트] 객체의 불변성을 관리하는 방법들 자바스크립트는 동적인 언어(Dynamic-Weak typing)이기 때문에 객체의 상태를 보호하는 일이 힘들다. 따라서 이러한 관리를 하는 여러 방법들이 있다. 1. const(상수값)으로 선언 ex) const gravity_ms = 9.806; gravity_ms 변수에는 다른 값을 재할당하지 못한다. 그러나 객체의 경우 객체 자체의 레퍼런스 참조는 잠그더라도 객체 attritubte의 레퍼런스 변화까지는 막지 못한다. 2. 값 객체 패턴: 객체 리터럴 인터페이스({}) 반환을 통해 내부 상태 접근 막기 function zipCode(code, location){ let _code = code; let _location = location || ''; return{ code : function(){ .. [함수형 언어, 자바스크립트] 비동기 처리 (3) await과 async의 이해 await과 async는 새로운 것이 아니라 promise 위에서 동작하는 api로 promise를 동기적으로 보일 수 있도록 하는 Syntantic Sugar라고 할 수 있다. 프로미스는 체이닝이 가능하기 때문에 자칫하면 콜백처럼 체이닝으로 코드가 지저분해보일 수 있는데 await와 async의 사용으로 이를 간결하게 만들 수 있다. Promise와 Async //Promise function fetchUser1() { return new Promise((resolve, reject) => { //do network request in 10 sec.... resolve("ellie"); }); } const user1 = fetchUser1(); user1.then(console.log); 프로미스를 .. [함수형 언어, 자바스크립트] 비동기 처리 (2) Promise의 이해 Promise의 개념 프로미스는 비동기를 위한 오브젝트 중 하나로 pre-enrollment service와 after-enrollment service가 작동하는 방식에 비유될 수 있다. 예를 들어 원하는 코스가 아직 개강 전일 때 접수했다면 개강 이후 자동 접수가 되고 개강일이 지난 후에 접수하면 그대로 접수가 되는 방식이다. 프로미스는 Pending과 (fulfilled/rejected)라는 두 가지 상태를 가지고 있으며 원하는 기능을 수행해서 해당하는 데이터를 만들어내는 Producer와 원하는 데이터를 소비하는 Consumer를 이용하여 비동기적으로 데이터를 처리할 수 있다. Promise의 Producer Producer를 만드는 과정은 다음과 같다. 프로미스는 생성될 때 우리가 작성한 exe.. [함수형 언어, 자바스크립트] 비동기 처리 (1) Callback 함수의 이해 동기와 비동기 자바스크립트는 기본적으로 동기적이라고 할 수 있다. 코드 블럭들은 호이스팅* 이후에 바로 실행되고 코드 한 줄이 끝난 후에야 다음 줄이 실행될 수 있다는 뜻이다. *호이스팅: var, function declaration 예시 1) function printImmediately(print){ print(); } printImmediately(() => console.log('hello')); 하지만 항상 코드가 동기식으로 작성되면 문제가 발생한다. 네트워크, 서버 통신을 하는 동안 해당 줄에서 코드 실행이 멈추게 되기 때문이다. 웹의 경우 웹 화면이 멈추게 되는데 이러한 문제를 방지하기 위해 "비동기" api를 사용하게 된다. setTimeout은 대표적인 비동기 api 중 하나이다. (이.. [함수형 언어, 자바스크립트] 배열에 함수 체이닝 (1) 함수 체이닝을 다루기 이전에 먼저 제어흐름, 제어 구조에 대하여 알아본다. 함수형 프로그램에서는 데이터와 제어 흐름을 추상화하여 고수준 컴포넌트사이의 단순 연결(Chaininng)로 취급하기 때문이다. Control Structure(제어구조) 1960년대에 많은 조사 끝에 플로우차트로 그릴 수 있는 모든 알고리즘들이 two-way selection(if,else)과 pretest logical loop 이 두 가지로 코딩될 수 있다고 알려졌다. 따라서 프로그래밍에서 이 두가지는 매우 중요하다 할 수 있겠다. 물론 two-way selection(if, else) 외에도 switcch case이나 혹은 if 안에 또 if를 사용하는 nested loop 등 여러 selection 등이 있지만 two-wa.. [함수형 언어, 자바스크립트] 배열 control structure 자바스크립트에서 배열의 기본적인 활용은 다음과 같다. 1. declaration //1. declaration const arr1 = new Array(); const arr2 = [1, 2]; 2. Looping //2. Looping const fruits = ["🍎", "🍌"]; // a. for for(let i = 0; i console.log(fruit, index)); 3. 추..
