개발감성

.box1 { border-radius: 20px; border-bottom: none; } .box2 { border-radius: 50px; } .box3 { border-radius: 50%; } .box4 { border-radius: 50px 0 50px 0; } .box5 { border-radius: 200px 0 0 0; } .box6 { border-radius: 200px 200px 200px 0; } .box7 { border-radius: 200px 0 200px 0; } .box8 { border-radius: 100px 100px 0 0; }

.parent { border: 1px solid red; width: 600px; height: 200px; } .child { border: 1px solid blue; width: 200px; height: 50px; } .parent div { border: 1px solid yellowgreen; padding: 20px; width: 200px; } 한 칸을 띄우고 선택자를 적으면 모든 자식에 대해 적용을 시킨다. .parent > div { background: #352351; } >를 적어주면 바로 아래의 자식에 대해 적용을 시킨다. .parent > div div { background-color: aqua; } parent 클래스를 가진 요소의 바로 아래 div의 모든 div태그에 aq..

//html 문단1 문단2 문단3 //css p { text-align: center; color: red; } p.class { text-align: right; color: blue; } #id { text-align: left; color: green; } 태그 선택자 보다 class와 id 선택자가 우선된다. 태그 클래스 아이디 인라인 !important li { color: red; } .text { color: blue; } #text { color: green; } 태그 > red 태그 + 클래스 > blue 태그 + 클래스 + 아이디 > green 태그 + 클래스 + 아이디 + 인라인 > gold li { color: red !important; } .text { color: blue; }..

에러는 생성자를 가지는 객체이기 때문에 얼마든지 객체처럼 다룰 수 있다. 에러 객체 상속 class authenticationError extends Error { constructor(message) { super(message); this.name = "authenticationError"; this.favoriteSnack = "chitos"; } } const a = new authenticationError("cause err"); console.log(a.favoriteSnack); 인증 에러라는 새로운 클래스를 생성하고 Error 객체를 상속받은 후 부모의 멤버변수인 message를 생성자에 집어넣고 커스텀 하고 싶은 속성인 name과 favoriteSnack을 정의했다. 해당 생성자로 생성..

일반적인 try catch문은 비동기 코드에선 동작하지 않기에 Promise에서 따로 catch문을 지원한다. 하지만 또다시 async함수로 작성하게 된다면 Promise의 catch가 아닌 일반 try catch문의 문법대로 에러 핸들링을 하게 된다. async함수 내에서 정의된 try catch문은 비동기 오류를 잡아낼 수 있다. (async function () { try { await Promise.resolve("async fail #1"); await Promise.reject("async fail #2"); } catch (err) { console.log(err); } console.log("isnt still good?"); })(); 사용법은 일반 try catch문과 동일하다. try..

일반적인 try catch문의 문제는 비동기적 코드에는 대응하지 못한다는 것이다. 그렇기 때문에 Promise에는 비동기만을 위해 지원하는 catch문이 따로 존재한다. Promise catch문 사용법 Promise.resolve("async fail") .then((res) => { throw new Error("#1 fail"); return res; }) .then((res) => { console.log(res); }) .catch((err) => { console.log(err); return err; }) Promise에는 정상동작일 때를 위한 then문과 오류처리를 위한 catch문이 존재한다. 첫 번째 then문에서 의도적으로 #1 fail이라는 에러를 생성했고 따라서 두 번째 then문..

try catch문 //how catch err in program function fail() { try { consol.log("just do"); // throw new Error("second err"); } catch (error) { console.log("Its,,,fail", error); } } fail(); 위 try문의 console.log메서드를 일부러 오타를 내서 실행시켰다. try가 정상동작하지 않으면 자동으로 catch문으로 넘어가며 catch문은 인자로 에러를 받아서 catch문 내에서 에러인자를 자유롭게 사용할 수 있도록 해준다. try { try { never(); } catch (e) { throw new Error(e); } } catch (e) { console.lo..

다른 변수와 비슷하게 에러 또한 생성자가 존재한다. 에러 생성자는 다른 생성자와 마찬가지로 new 연산자를 통해 생성이 가능하며 콘솔에 에러 메시지를 지정해서 보여줄 수 있다. throw throw는 프로그램 동작을 멈추게 되는데 에러 생성자는 보통 throw와 함께 사용된다 에러 객체 생성자로 생성된 에러는 객체 형태를 가지는데 에러 객체의 message는 에러 메시지 stack은 에러가 발생한 위치를 알린다. 이 외에 name속성이 기본적으로 있다. function a() { const b = new Error("in a"); return b; } a(); //stack a().stack; 함수 a는 에러 객체를 리턴하며 a를 실행시키면 메시지와 스택이 함께 출력된다. 항상 콘솔에서 보던 에러 메시지..

CommonJS에 이어서 JS는 모듈 시스템을 ES6에서부터 공식지원한다. //ES6 module import module1 from "module1"; //fight import module2 from "module12"; export function fight(a) { return a; } 모듈을 가져올 때는 import문을 내보낼 때는 앞에 export를 붙여준다. import import는 require과 다르게 파일의 최상단에만 작성해야 한다.

History 코드의 양이 많아짐에 따라 변수명 중복, tight coupling 등의 문제가 생김 script파일을 나눠도 서로 간섭이 가능하여 생기는 side effect가 발생 function scope, IIFE, Closure를 사용해 각 script파일이 개별적인 scope를 보장받도록 하는 module pattern개발 module pattern은 여전히 global scope duplicate, dependency resulution of declared order 등의 문제가 있음 CommonJS, AMD 등의 모듈 시스템 개발 CommonJS // CommonJS var module1 = require("module1"); //.fight var module2 = require("mod..