Develop Note by J.S.

1. CSS in CSS 일반적으로 CSS 코드를 작성하는 것으로 내부 스타일시트, 외부 스타일시트, 인라인 스타일 방법으로 작성 할 수 있습니다. 내부 스타일 시트 ... 외부 스타일 시트 //외부에 작성된 style.css 파일을 .html 에서 호출 인라인 스타일 This is a heading 2. CSS in JS 자바스크립트 코드에서 CSS를 작성하는 것을 말하며 CSS를 작성할 때 발생되는 문제점들을 해결하기 위한 기능입니다. 예를들어 선택자의 네이밍이 복잡해지는 부분, 상속에 따른 독립성 문제 및 의존관계를 해결할 수 있습니다. 대표적인 CSS in JS 라이브러리로는 'Styled Components'가 있습니다. // myComponent.vue import styled from "st..

개발을 하다보면 "Object에 들어있는 원시값만 사용하고싶어!" 또는 "a객체의 메모리를 공유하는 다른 이름의 객체를 만들고 싶어" 등의 목적으로 코딩을 하다보면 원치않는 동작을 할때가 있습니다. 가장 기본적인 것이지만 한번 제대로 공부해놓지 않고 대충 보고 넘어가다보면 항상 문제가 생기게 되어 정리해 보았습니다. 1. 얕은복사 (메모리 복사) let obj = {}; newObj = obj; let arr = []; newArr = arr; Object와 Array는 1, '1', true(boolean) 등의 리터럴 값이 아닌, 리터럴 값이 저장된 메모리 주소들의 묶음을 새로운 이름으로 재할당하여 사용하는 것입니다. obj와 arr처럼 메모리 주소들의 묶음 자체를 newObj, newArr에 할당하..

프로그래밍 개발에서 꼭 이해하고 넘어가야하는 부분입니다. 대부분의 프로그래밍 언어에서는 존재하는 개념인데요, 값에 의한 호출인지 메모리 참조에 의한 호출인지에 따라 동작이 달라지게 됩니다. 매개변수의 전달 방법, 변수 접근 방법, 특정 변수의 복사 등 어떠한 상황이던 구분해서 사용해야 합니다. Call by Value - 값의 의한 호출, 해당 변수가 가리키는 메모리 내에 들어있는 실제 데이터 (literal)를 사용한다. (ex. 깊은복사) Call by Reference - 메모리 참조에 의한 호출, 해당 변수가 가리키는 메모리 번지를 사용한다 (ex. 얕은복사) Call by Sharing - 함수의 매개변수의 타입(value or reference)과 반대의 타입으로 값을 재할당할 경우 메모리가 ..

Async Await async await는 return형이 Promise 객체일 때 (비동기처리) await 연산자로 동작된 비동기함수의 처리를 순차적으로 동작시키는 기능을 제공합니다. console.log('1'); function callback1 () { return new Promise ((resolve)=> { setTimeout(function() { resolve('2') }, 1000) }) } function callback2 () { return new Promise ((resolve, reject)=> { setTimeout(function() { reject('3') }, 1000) }) } async function showNumber () { try { let number1 =..

1. Promise란 Promise는 ES6에서 새로나운 객체로, then, catch, finally 프로퍼티를 사용하여 비동기처리를 제공하는 기능입니다. 1) then : 앞선 비동기 동작이 종료된 후 동작될 function을 매개변수로 정의한 뒤 이후 순차적으로 then내부에 있는 function들이 동작됩니다. 2) catch : then 동작 중 error 발생 시 가로채어 에러처리를 정의할 수 있습니다. 3) finally : 모든 then 동작이 마무리된 후 마지막에 실행 될 function을 정의합니다. 2. Promise 예제 console.log('1'); function callback1 () { return new Promise ((resolve)=> { setTimeout(func..

Callback이란? Callback은 비동기 로직 처리 후의 동작 될 함수를 뜻합니다. 이후 실행 할 함수를 매개 변수로 전달하여 비동기 동작이 끝난 후 실행할 수 있습니다. 아래 Callback 사용에 대한 예제입니다. function task1(a, cb) { setTimeout(() => { cb(a+1); }, 2000); } function task2(a, cb) { setTimeout(() => { cb(a+1); }, 2000); } function task3(a, cb) { setTimeout(() => { cb(a+1); }, 2000); } task1(1, (a) => { console.log("task1 : ", a); task2(a, (b) => { console.log("task..