이론/Frontend74 React CRA시 App.js에 표시되는 빨간 줄 제거하기 React를 사용할때면 많은 분들이 CRA 명령어를 애용합니다. 그런데 CRA 명령으로 생성된 파일에 빨간줄이 죽죽 그어져있다면, 개발자 입장에서는 당황스럽습니다. 자동으로 구성된 파일에 문제가 있을 확률은 극히 낮기 때문에 어디서 오류의 원인을 찾아야할지 막막해지기 일쑤입니다. 문제 상황은 이렇습니다. 자동 생성된 App.js 파일에 빨간 줄들과 함께 갖가지 오류가 표시되었습니다. expression(statement) expected Expecting newline or semicolon Unresolved variable or type className(src, alt, href, target, rel...) Unnecessary semicolon 일단 저 오류들을 모두 무시하고, npm run s.. 2021. 8. 6. JavaScript의 객체 - 1 (Object of JavaScript) 이번 시간에는 자바스크립트의 객체에 대해 이야기 해보겠습니다. 객체란 연관된 데이터와 함수들의 집합을 의미합니다. 자바스크립트에서 이러한 객체가 어떻게 생성되고, 어떤 내용을 갖고 처리되는지 함께 알아봅시다. MDN 문서에 따르면 "객체는 단독으로 존재 가능한 개체(entity)이며, 프로퍼티(property)과 타입(type)을 가진다." 라고 기술되어있습니다. 따라서 자바스크립트의 객체는 그 개체의 특징이 되는 여러 프로퍼티를 가진다고 볼 수 있습니다. 이런 타입과 프로퍼티들이 어떻게 할당되는지 객체의 생성 방식부터 순서대로 알아보겠습니다. 생성 방식 먼저 객체의 생성 방식입니다. 객체를 생성하는 방법은 크게 두 가지가 있습니다. 바로 리터럴 형식과 생성자 형식입니다. 리터럴 형식은 중괄호를 이용하여.. 2021. 8. 4. JavaScript의 this (this of JavaScript) 현재 사용되고 있는 많은 언어들은 this 키워드를 제공하고 있습니다. 자바스크립트에서의 this는 상황에 따라 다른것을 가리키기 때문에 편리하지만 정확히 무엇을 가리키고 있는 것인지 쉽게 헷갈리는 식별자 중 하나입니다. 오늘은 이 this에 대해서 알아보겠습니다. this는 어디에서 오는가? 코드 곳곳에서 등장하는 this는 보통 함수의 스코프를 가지고 있다고 생각하기 마련입니다. 그도 그럴것이, this 키워드를 사용하면 함수 내부 변수를 조작하거나 함수를 실행시키는등 스코프에서 할 수 있는 작업들을 할 수 있기 때문입니다. 그렇다면 자바스크립트의 this는 사용될때마다 동적으로 함수의 스코프가 바인딩된다고 생각하면 될까요? 그 전에 먼저 this가 어디에서 오는것인지 알 필요가 있습니다. 우리는 t.. 2021. 7. 21. JavaScript의 클로저 (Closure of JavaScript) 클로저라는 용어 자체는 생소하게 들릴 수 있지만, 사실 클로저의 내용은 지금까지 자바스크립트를 공부했다면 자연스럽게 알고있는 내용입니다. 코드를 통해 바로 확인해보겠습니다. function a() { let a = 1; function b() { console.log("a is " + a); } return b; } let c = a(); c(); // a is 1 a() 내부에 b()가 선언되어 있고, 전역에서 변수 c에 a()를 담아 c()를 실행시키는 모습입니다. 보통의 경우 라인 1의 function a() { ... 부터 라인 9의 let c = a(); 에 이르기까지의 과정에서, a() 는 그 사용을 다 하였기 때문에 가비지 컬렉터가 할당된 메모리를 해제시켜버립니다. 그러나 위의 코드를 직접 .. 2021. 6. 26. JavaScript의 스코프 - 3 (Scope of JavaScript) 지금까지 공부한 스코프와 그 범위, 렉싱 단계 이후 스코프를 변경하는 방법들을 통해 스코프의 특징에 대해 어느정도 감이 잡히셨을거라 생각합니다. 그래도 아직은 약간 부족한 느낌이 드니 조금 더 확실히 해보겠습니다. 이전 글에서 스코프는 분명 서로 중첩되지 않는 독립적인 공간을 형성한다고 하였습니다. 예를 들어 설명했었던 함수가 이러한 스코프를 형성하는 역할을 하는 좋은 예시 중 하나입니다. '예시 중 하나' 라는 것은 다른 자료 구조 또한 스코프를 형성할 수 있다는 이야기겠지요? 이번 포스트에서는 스코프를 형성하는 구조들에 대해 알아보도록 하겠습니다. 함수 기반 스코프 가장 먼저 함수를 기반으로 한 스코프입니다. 함수 내에 속한 변수와 함수들은 중첩된 스코프들을 포함하여 함수 전체에 걸쳐 사용됩니다. 우.. 2021. 5. 13. JavaScript의 스코프 - 2 (Scope of JavaScript) 지난 글에서는 스코프가 어떤 것인지 알아보았습니다. 이번 글에서는 자바스크립트를 비롯한 대부분의 프로그래밍 언어에서 사용하는 렉시컬 스코프에 대해 알아보겠습니다. 렉시컬 스코프 렉시컬 스코프는 스코프의 작동 방식 중 하나입니다. 컴파일러가 문자열을 의미있는 단어들로 나누어 내는 것을 토크나이징이라고 했는데, 이를 렉싱(Lexing)이라고 부르기도 합니다. 렉싱이 일어나는 시간대를 렉싱 타임(Lexing Time)이라고 하는데 결국 개발자가 작성한 코드들이 어디에 작성되었는지를 기반으로 처리된다고 볼 수 있겠습니다. 다른 방식으로는 동적 스코프가 존재하지만, 이 글에서 따로 다루지는 않겠습니다. 여러 함수들이 중첩되어 있는 코드의 스코프를 그림으로 나타내면 아래와 같습니다. 매개변수를 포함한 함수 내부까지.. 2021. 5. 3. 이전 1 ··· 6 7 8 9 10 11 12 13 다음
