승터디

오늘은 팀프로젝트를 진행 중 문제가 생겼었다. 내가 분업 및 모듈화를 위해 자바스크립트를 기능별로 나누었고 type="module"로 스크립트를 선언했다. 여기서 문제가 생겼는데 모듈 내에서 DOM을 접근하려고 할때 접근할 수가 없었다. addEventLisner를 사용해서 이벤트를 주려고 해도 먹히지가 않았다. 구글링도 해봤는데 모듈에선 DOM을 제어할 수 없다고 검색이 되었다. 자세한 이유를 알고 싶어서 튜터님에게 가서 여쭤보았는데 모듈은 부품처럼 각자 독립적이기 때문에 DOM과 모듈이 서로를 알지 못한다고 한다. 그래서 모듈인 부분을 빼버리고 defer를 주어서 DOM생성후 제어할 수 있었다.

자바스크립트를 더욱 강력하게 만들어줄 타입스크립트 자바스크립트에서는 변수를 선얼할때 타입을 지정하지 않고 실행시점에 타입이 결정되는 언어이다. 이러한 특징 때문에 편한 부분도 있지만 예기치 못한 결과를 초례하기도 한다. 이러한 문제는 프로젝트가 커지면 커질수록 더욱 심각해졌다. 이러한 배경 때문에 타입스크립트가 등장했고 최근엔 많은 자바스크립트로 된 프레임워크에선 타입스크립트를 권장한다. 개인 과제도 제출했고 강의도 2 회독이 끝나서 오늘은 앞으로 배우게될 타입스크립을 미리 만나보았다. 타입스크립트 설치하기 1.폴더 만든 후 오픈하고 터미널 오픈하기 여기서는 Test 이름의 폴더를 만들었다 2. 해당 명령어를 입력해야 한다(npm이 설치되어있어야 한다.) npm install -g typescript 3..

자바스크립트에선 this라는 키워드가 존재한다. 다른 언어에서도 자주 볼 수 있는 키워드인데 자바스크립트에서 this는 가리키는 객체가 상당히 혼란스러운 경우가 많다. function add(a, b) { console.log(this, a, b); } const obj1 = { name : "obj1", func : function () { console.log(this); } } 여기 형태에 함수가 있다. add는 평범하게 함수 선언식으로 선언된 함수이다. func는 obj1에 속해있는 함수이다. 이런한 형태일 때 각자 this가 가리키는 게 무엇인지 생각해 보자. 브라우저 콘솔에서 add함수를 실행시켜 보았다. 10과 20은 우리가 전달한 값이고 window라는 정체불명의 객체가 출력되는 것을 볼 ..

실행 컨텍스트란????? 사실 이 주제는 3주 차 강의 내용인데 처음 들었을 때는 이해가 가지 않는 부분이 많아서 TIL에 기록을 하지 않았다. 강의를 2 회독 한 시점에서 조금 감을 잡았고 정리한 내용을 한 번 더 읽으니까 더 이해하기 쉬웠다. 자바스크립트는 CallStack 이란곳에 실행 콘텍스트를 저장하고 Stack자료구조(FIFO)처럼 관리해서 코드 실행순서를 보장한다. CallStack에 저장하는 실행 콘텍스트란것이 무엇인지 알아보자 실행 컨텍스트 실행할 코드에 제공할 환경 정보를 모아놓은 객체이다. 3가지 일을 함 호이스팅 외부 환경 구성 this 바인딩 실행 콘텍스트에는 무엇이 담기나?? VariableEnvironment 식별자 정보 (record)는 변수, 함수, 매개변수 등을 의미한다...

자바스크립트 깊어질수록 어렵다. 자바스크립트를 공부하기 전에 익히 듣기론 배우기 쉬운 언어라는 이야기를 들었다. 3주 차 강의를 들을 때 까진 이 말이 맞다고 생각했었다.. 그러나 this, 동기, 비동기 Promise 등 다양한 내용이 나오니까 이해하기 힘든 부분이 많아졌다.오늘 글에서 이 내용을 다뤄야 하지만 이해가 가지않는 부분이 많아서 추가적인 학습 후 글에서 다뤄야 할 거 같다. 콜백 함수란? 함수를 인자로 받는다 함수를 리턴한다. // 대표적인 콜백함수 setTimeout(function() { 전달될 함수 내용 }, 1000); [1, 2, 3, 4].forEach(() => { 함수 내용 }); 콜백함수도 함수이므로 this를 사용할 시 전역 객체를 참조한다. 클래스 클래스는 설계도와 같다..

Map, Set 자료구조 그리고 데이터 저장 원리 Map과 Set 자료구조에 대해서는 프로그래밍 언어에서 비슷한 개념으로 많이 사용되는 것을 알고 있었다. Map은 자바의 Map가 비슷했고 Set은 스위프트를 공부할 때 배웠던 개념이랑 유사했다. 그래서 비교적 이해하는데 수월했던 것 같다. 그리고 변수를 선언하고 할당할 때 메모리에 어떻게 저장되는지는 이번에 처음 배웠는데 원리를 알고 나니까 자바스크립트를 깊이 있게 알아가는 느낌이 들었다. Map 이란 Key, Value 값으로 이루어져 Object와 비슷하지만 순서를 가진다. 검색, 삭제, 검색, 존재여부 등 활용할 수 있음 const myMap = new Map(); // Map에 값을 저장하기 myMap.set("one", 1); myMap.set..

점점 더 발전하는 자바스크립트 자바스크립트는 ES6에 들어서면서 발전하고 현대적인 언어로 업그레이드되었다. 그럼으로써 배워야 할 문법도 많아졌고 새로운 개념도 많이 도입되면서 기존 ES5나 Jquery에 익숙한 사용자들에겐 당황스러운 부분이 많을 것이다. 그중 나도 해당하는데 다행히 강의에서 ES6문법을 자세히 다뤄주어서 정리해보려고 한다. 구조분해할당 객체, 배열의 속성을 분해해서 새로운 변수에 옴겨담거나 사용가능하게 만듦 //1. 배열의 경우 // value1,2에 배열 index 순서대로 할당한다. const [value1, value2] = [1, "홍길동"]; // value1 = 1, value2 = "홍길동" const myArray = [1, "홍길동", 3]; const [a, b, c]..

TIL(Today I Learned)를 왜 쓰게 되었을까??? 10월 4일부터 스파르타 코딩클럽에서 진행하는 내일 배움 캠프에 백엔드(Node) 과정으로 참여하게 되었다. 시작하자마자 미니프로젝트를 진행하게 되어 정신없이 1주일이 지나갔고 발표 까지 끝마쳤다. 이제 고작 1주일 진행했는데 벌써 한 달은 지난듯한 느낌이었고 오늘부터 본격적으로 주특기 수업인 자바스크립트 공부가 시작되었다. 오늘 하루종일 정신없이 강의를 시청했고 새로운 것도 배웠는데 휘발성으로 날아가버릴 거 같아서 두려웠고 내일 배움 캠프에서도 TIL을 강조하여서 TIL에 대하여 찾아보았다. 그날그날 공부한 내용을 기록하는 것이라고 한다. 이것만으론 감이 잡히지 않아서 다른 블로그들도 찾아보았는데 다들 멋있는 레이아웃으로 가독성 좋게 꾸며놓..

개발을 하다 보면 리스트를 순회하면서 데이터를 가공한다던가 하는 처리가 필요한 경우가 많다. 지금 까지는 for 문을 이용하여 순회를 했었는데 map이라는 함수를 알게 되었다. for 문보다 간결하고 익숙해진다면 편하게 사용할 수 있기에 map에 대해서 알아보자. 배열에서 사용하기 일단 기존 for문에서 배열을 순회해서 처리하는법을 한번 보겠다. 숫자가 들어있는 'numbers'라는 배열에 요소를 하나씩 꺼내서 곱하기 2를 한 새로운 배열을 반환한다고 가정하자. const numbers = [1, 2, 4, 6 , 8, 10]; for (let i = 0; i < numbers.length; i++) { numbers[i] = numbers[i] * 2; } 가장 원시적인 방법이자 초보들에게 익숙한 방법..