HTML만을 다루거나 정적 웹사이트를 만들 때는 그럴 일이 거의 없겠지만, 사용자의 입력에 따라 다르게 반응해야 하는 웹앱(CRUD는 기본)을 제작한다면 JavaScript에서 innerHTML로 태그를 직접 수작업으로 넣어주어야 하는 경우가 있다. 그래서 실수하기 쉽다. IDE에서 오리지널 HTML이나 EJS, PUG 등 템플릿을 사용한다면 HTML Element의 속성들도 자동추천해주기 때문에 버그가 적다. 하지만 JS에서 수작업을 한다면 특정 속성을 간과한 것이 큰 버그로 이어질 수 있다. 나는 사용자들의 댓글 내용을 li 태그로 뿌리면서, "현재 로그인한 유저의 id"와 "댓글작성자의 id" 같은 li에 한해서 삭제버튼을 부여하려고 아래와 같은 코드를 만들었다. myForm.innerHTML = ..

Context : 문학에서는 "문맥"이라면, 프로그래밍에서는 현재 이 오브젝트가 document상 어느 위치에 있는지 알려준다. this 키워드 사용. 만약 어떤 함수가 {} 객체 내 속성으로 정의되어 있고 그 함수 내에서 this를 사용한다면, 해당 this는 객체 내 함수만을 가리킨다. const obj = { myFunc: function () { console.log(this); } }; Instantiation : 클래스(Constructor Function)를 정의하고 해당 속성과 메서드를 가지는 객체들을 인스턴스화하는 것. new 키워드 사용. 클래스는 extends로 상속이 가능하며, 상속시에는 반드시 super(인자들) 메서드를 먼저 사용한 후에 오버라이딩 또는 커스터마이징해야 한다. c..

Import와 Export는 파일의 독립적 관리를 통해 유지보수를 돕고, VanillaJS에서 뿐만 아니라 이후 node.js의 패키지 모듈 사용이나 ReactJS에서 빛을 발하게 된다. 1. 다른 .js 파일에서 하나의 함수 또는 하나의 상수/변수 불러오기 => default 키워드 이용. // pi.js const PI = 3.141592 export default PI; // index.js import pieeeee from "./pi"; console.log(pieeeee); default 키워드를 이용할 때는 어차피 하나의 데이터만 전송하기 때문에, import하는 곳에서는 가져온 데이터의 이름을 원본처럼 PI가 아니라 임의로 변경설정이 가능하다. 실제 활용할 때 이름만 맞춰주면 그만이다. 2..

const city = ["New York", "Seoul", "Los Angeles", "Busan", "Shanghai", "Paris"] function findCity(arr) { for ( let i=0 ; i { arr.forEach(element => { if (element === "Busan") { console.log("Gotcha!") } }) } const findCity3 = arr => { for (let element of arr) { if (element === "Busan") { console...

간단하게 5분도 안 걸리는 코딩이다. HTML This is a clock app. JS // DOM 객체로서 HTML 태그 속의 class name을 css처럼 직관적으로 가져오게 하는 마법의 도구 : document.querySelector() const CLOCK = document.querySelector(".js-clock"); // 3. showClock 함수는 시간 객체를 생성하여 각 상수에 필요한 정보만을 선별한 뒤, HTML에 쏘아주는 역할을 한다. function showClock() { // 날짜와 시간 모두 가져와주는 객체 Date를 생성하여 상수 DATE에 담는다. const DATE = new Date(); // 시, 분, 초에 해당하는 정보를 가져와주는 함수만을 "."를 활용하..

최근 it분야가 엄청 발전하면서 개발도구 또한 화려해지고 있다. 더 편하고 실수도 적게 하게끔 도와주는 IDE부터 코딩을 몇배 줄여주는 다양한 라이브러리까지 개발자 입장에서는 르네상스임에 틀림없다. 하지만 코딩을 떠나, 어떤 분야이든 흔들리지 않는 중심 개념이 있다. 여기서 중심 개념이란 모든 잔가지들을 파생시킨 최초의 장본인이며, 매우 중요하다고 할 수 있다. 즉 어떤 분야에서든 파생된 개념을 제대로 이해하기 위해서는 그것이 등장하기 전을 알아야만 한다. 그것을 살펴야만 왜 새로운 것이 등장했는지, 그래야만 했던 철학이 무엇인지 마음으로 느낄 수 있으며 그것은 빠른 이해와 행동력으로 발전할 것이다. 핵심은 매우 깊이 박혀 있어서 한눈에 보기 힘들고 때로는 거기까지 뚫는 데 많은 시간과 노력이 필요할 수..