자바스크립트 JavaScript

[에러 해결] json data 를 import 하는 방법

에러 TypeError [ERR_IMPORT_ASSERTION_TYPE_MISSING]: Module "...myData.json" needs an import assertion of type "json" 해결 // assert 구문을 붙여준다 import myData from "myData.json" assert { type: "json" }; 출처 https://ui.toast.com/posts/ko_20211209 자바스크립트에서의 JSON 모듈 ECMAScript 모듈 시스템(`import`와 `export` 키워드)은 기본적으로 자바스크립트 코드만 가져올 수 있다. 하지만 애플리케이션의 설정을 JSON 파일에 저장하는 것이 편리할 때가 많고, 결과적으로 JSON 파 ui.toast.com ECM..

[에러 해결] SyntaxError: Cannot use import statement outside a module

(node:53507) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension. (Use `node --trace-warnings ...` to show where the warning was created) 프로젝트가 ES Module 을 사용중일 때 import 구문을 사용한 경우 발생하는 에러, Warning 에 써있는대로 package.json 에 type:module 을 추가해주면 된다.

2. IntelliJ 에서 ESLint, Prettier 적용하기

전처리 ESLint, Prettier 다운받는것은 이전 글에 있다. https://leexx.tistory.com/102 ESLint 설정 시 Prettier 도 자동으로 설정되게 하는 부분도 같은 글 하단에 있다. https://leexx.tistory.com/102#ESLint%--%EC%--%--%--Prettier%--%EB%-D%--%--%EC%-E%--%EC%--%B-%EA%B-%B- 1. ESLint, Prettier / 설치 및 사용 / 차이점 / 더 잘쓰기 (충돌방지, 쉽게 쓰기) ESLint Lint, Linter ESLint 를 알아보기 전에 Linter 에 대해 알아보자. Lint 는 보풀 이라는 뜻이다. 즉 Linter 의 의미는 보풀 (뭔가 지저분한, 뭔가 잘못된) 을 찾아주는 ..

1. ESLint, Prettier / 설치 및 사용 / 차이점 / 더 잘쓰기 (충돌방지, 쉽게 쓰기)

ESLint Lint, Linter ESLint 를 알아보기 전에 Linter 에 대해 알아보자. Lint 는 보풀 이라는 뜻이다. 즉 Linter 의 의미는 보풀 (뭔가 지저분한, 뭔가 잘못된) 을 찾아주는 의미인 듯 하다. 옷의 보풀은 입어보지 않고도 알 수 있는데, 이는 실행시키지 않아도 코드를 보고 문법의 오류나 안티패턴을 찾아낸다는 의미의 정적분석과도 일맥상통하는 듯 하다. Linter 에는 JSLint, JSHint, ESlint, JSCS 등이 있지만, ESLint 가 커스텀이 좋아서 가장 대중적으로 사용한다고 한다. (ESLint, JSLint 외에는 처음들어봤다) ESLint 니콜라스 C. 자카스에 의해 개발되었으며, ECMAScript 와 실험적인 문법들을 지원한다고 한다. TypeSc..

form, XHR, AJAX, jQuery.ajax, Fetch

XHR이 나오기 이전의 서버와의 통신 XHR, AJAX, jQuery.ajax(), Fetch를 보기 전에 XHR이 나오기 전에는 어떻게 서버와 통신했는지를 알아보자. form 기존의 웹 애플리케이션은 브라우저에서 폼을 채우고 이를 웹 서버로 제출(submit)을 하면 하나의 요청으로 웹 서버는 요청된 내용에 따라서 데이터를 가공하여 새로운 웹 페이지 를 작성하고 응답으로 되돌려준다. 위키백과-Ajax GET request first name: last name: POST request first name: last name: server code app.post("/name-post", function(request, response) { const { firstname, lastname } = req..

OOP (Object Oriented Programming)

들어가며 Object(Instance), Class에 대해 감이 오지 않는다면 이 글 을 참고해주세요. 내용 OOP가 뭐야? Object Oriented Programming으로, 객체 지향 프로그래밍을 말한다. 즉 어떤 개념에 대해서 추상화한 (속성과 행위를 가진) 객체로 만들어, 그들 사이에서 상호작용을 하며 프로그래밍하는 것을 말한다. 예시 철수와 영희, 경아와 상아를 추상화하여 객체로 만들어보자. 이들은 모두 이름과 나이, 직업이라는 속성 을 갖고 잠을 자고, 숨을 쉰다 (행동). const cheolsu = { name: '철수', age: 28, job: '대학원생' sleep: function() { console.log("zzz...") }, breath: function() { conso..

Object(Instance), Class

들어가며 OOP에 대해서 공부를 하던 중에 Object 에 대해 공부가 부족하다는 생각이 들어 Object(Instance) 와 Class 에 대해 먼저 공부를 하게 되었다. 공부를 하며 내가 그동안 헤멨던 내용에 대해 정리를 했다. 내용 객체가 뭐야? 객체 란 무엇일까? 객체에 대해 찾아보면 흔히 나오는 답은 아래와 같다. 객체란 어떤 물체나 개념을 추상적으로 표현한 것이다. 객체란 현실의 것을 코드로써 표현한 것이다. (간혹 인스턴스라는 말도 볼 수 있다. 객체와 인스턴스는 종종 같은 의미로 쓰인다.) 처음 객체에 대해 접했을 때 이러한 설명들은 나를 더 혼란스럽게 만들었다. 둘 중 어느게 맞는건지 고민도 했었다. 아는 것이 많지는 않지만, 그 때보다는 많아진 지금 나름 내릴 수 있는 결론은 아래와 ..

Prototype, Inheritance

[[Prototype]], __proto__, prototype 의 차이 JavaScript 에서 변수와 함수는 원형을 갖는 객체이다. 그리고 JavaScript 에서는 이 원형을 __proto__([[Prototype]]) 과 prototype 으로 나타낸다. prototype 은 프로토타입 객체 를 말하는 것이고, __proto__ 는 프로토타입 링크 를 말하는 것이다. 이를 자세히 알아보자. function Person(name) { this.name = name; } var foo = new Person('foo'); 이런 코드가 있을 때, 이는 아래와 같은 그림으로 나타낼 수 있다. 프로토타입 체이닝 보다시피 객체 lee 는 __proto__ 를 통해 Human's Prototype 에 접근할 ..