프론트엔드 개발자 엄성준

var의 치명적인 단점 var는 함수를 통해서 선언이 될 때만 스코프가 지원된다. var를 통해서 변수를 선언하면 중복 선언이 가능하다. 변수를 선언문을 통해 선언을 하지않았을때와 동일하다. var를 사용하지말자!! 재할당을 해야 되는 경우에는 let, 재할당이 필요 없는 경우에는 const를 이용하자!

Scope를 우리말로 번역하면 ‘범위’라는 뜻을 가지고 있습니다. JS에서 스코프는 2가지 타입이 있습니다. global(전역)과 local(지역)입니다. 예제 1 2 3 4 5 6 7 8 9 const text = 'outside'; { const text = 'inside'; { console.log(text); } } Colored by Color Scripter cs 위의 코드인 경우 console.log(text)의 결과 값은 inside가 출력될 것입니다. 예제 1 2 3 4 5 6 7 8 9 10 const text1 = 'outside'; { const text2 = 'inside'; { console.log(text2); } } console.log(text2); Colored by Co..

처음 학교에 입학했을 때 2018년도였는데 벌써 졸업을 할 때가 되었습니다. 컴퓨터에 관심이 있어서 (구)인터넷 정보통신학과에 지원을 했었는데 제가 생각했던 것 과는 많은 게 달랐었습니다. 그 때 당시 저는 프로그래밍이란 것에 대해서 알지도 못했었고 이 과에 입학한 이후에 영화에서나 보던 프로그래밍에 대해서 알게 되었습니다. 3년 학교를 다니면서 느꼈던 점은 어느 학교나 마찬가지겠지만 저희 학교 커리큘럼은 백엔드 프로그래밍의 비중이 더 큰 거같아서 백엔드 프로그래밍에 관심이 있거나 배우고 싶으면 오시는 것도 좋을 것 같습니다. 저는 웹 프론트엔드 개발자가 꿈이어서 따로 배우는 것도 있지만 백엔드에 대한 기초 지식을 쌓을 수 있어서 현재 공부하는 데 있어서 큰 도움이 된 것 같습니다.

JSON : JavaScript Object Notation 1. sungjun이라는 object를 생성하였음 1 2 3 4 5 6 7 const sungjun ={ name:'sungjun', age:24, eat: ()=>{ console.log('eat'); } } cs 2. Serializing(직렬화) - 객체를 문자열로 만든다. JSON의 static함수인 stringify()를 이용하면 Object를 JSON으로 변환해준다. 1 2 3 const json = JSON.stringify(sungjun); console.log(json); console.log(sungjun); cs 3. Deserializing(역직렬화) - 문자열 데이터를 자바스크립트 객체로 변환해준다. JSON의 stati..

타입 스크립트의 특징 - 컴파일 언어, 정적 타입 언어 - 정적 타입의 컴파일 언어이며, 컴파일러 또는 바벨(Babel)을 통해 자바스크립트 코드로 변환됩니다. - 코드 작성 단계에서 타입을 체크해 오류를 확인할 수 있고 미리 타입을 결정하기 때문에 실행 속도가 매우 빠르다는 장점이 있습니다. - 코드 작성 시 매번 타입을 경절해야 하기 때문에 번거롭고 코드량이 증가하며 컴파일 시간이 오래 걸린다는 단점이 있습니다. - 타입스크립트는 자바스크립트의 슈퍼셋, 즉 자바스크립트 기본 문법에 타입스크립트 문법을 추가한 언어 입니다, 따라서 유효한 자바스크립트로 작성한 코드는 확장자를 .js에서 .ts로 변경하고 타입스크립트로 컴파일해 변환할 수 있습니다. - 타입스크립트는 ES6 에서 새롭게 사용된 문법을 포함..

이벤트 버블링 : 어떤 요소에 대한 이벤트가 발생했을 때, 해당 요소의 최상위 부모까지 이벤트가 전달되는 과정 HTML 구조상 자식 요소에 발생한 이벤트가 상위 부모요소에 영향을 미치는 것이다. 이벤트 캡처링(최상위 부모에서 이벤트 발생 요소까지 이벤트가 전달되는 것)과 정반대이다. 이벤트 버블링이나 캡처링을 차단 하고 싶을 때 e.stopPropagation을 호출하면 이벤트 전파를 막고 해당 이벤트만 실행할 수 있다. 요약정리 : 이벤트 버블링은 자식 요소에서 이벤트 발생 시 해당 요소의 최상위 부모까지 이벤트가 전달되는 것이고 반대 용어로는 이벤트 캡처링이 있다.

브라우저 저장소 분류 - 웹 스토리지(Web Storage) : 웹 데이터를 클라이언트에 저장하기 위해 만들어진 key-value 형식의 저장소. 웹 스토리지는 HTML5에 추가된 클라이언트 기반 key-value 저장소 이며, 웹 스토리지는 로컬 스토리와 세션 스토리지로 나눌 수 있습니다.로컬 스트리지와 세션 스토리지의 차이점은 영구성과 범위에 있어서 크게 차이가 납니다.먼저 로컬 스토리지는 브라우저를 종료해도 데이터를 보관(영구성) 합니다. 또한, 도메인만 같으면 전역적으로 데이터가 공유되는 특성을 가지고 있습니다.세션 스토리지는 브라우저가 종료되면 데이터가 삭제(비영구성)됩니다. 도메인이 같더라도 브라우저가 다르면( 탭 브라우저, 다른 브라우저) 브라우저 컨텍스트가 다르기 때문에 각각의 세션 스토리..

false 값을 나타는 경우 0, -0, '' 1 2 3 4 5 6 7 8 let number =0 console.log(number || '-1'); //0은 false로 간주되기 때문에 -1이 출력 됨 // -1 출력 console.log(number ?? '-1'); // 0 출력 Colored by Color Scripter cs 위와 같이 0을 출력하고 싶을 때 Nullish Coalescing Operator를 사용하면 됨

1. 일반 함수로 실행 1 2 3 4 5 function a() { console.log(this); return ; } a(); // window cs 함수를 그냥 실행하게 되면 this의 값은 전역 객체(window)를 참조하게 됩니다. 2. 메서드로 실행 - 메서드는 객체 안에 있는 함수로, 객체명.함수명 형태로 . 이 붙어있는 형태로 함수를 호출하는 경우입니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 const obj = { func() { console.log(this); return ; }, sub: { subFunc() { console.log(this); return ; } } } obj.func(); // (1) obj obj.sub.subFunc(); // (2) s..

클로저란 무엇인가? - 클로저(closure)는 함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical environment)과의 조합이라고 부르며, 내부 함수가 외부(enclosing) 함수 변수에 액세스(접근) 할 수 있는 자바스크립트의 기능을 말한다. 클로저(closure) 예시 코드 1 2 3 4 5 6 7 8 9 10 11 12 let func1 = function(){ let a = 1; let func2 = function (){ return ++a; }; return func2; //func2 함수 자체를 반환 }; let func3 = func1(); console.log(func3()); // 2 console.log(func3()); // 3 cs 👆 외부 함수 밖에서 내부 함수가..