슬기로운 개발노트

css 작업 후 1. ctrl + shift + p 명령 팔레트 실행 2. Autoprefixer: Run 실행 시 CSS 접두어 자동완성 # 프로젝트 구축 시 사용할 것 !

1. ctrl + shift + p (명령 팔레트 열기) 2. File: compare Active File With... 선택 > 현재 열려 있는 파일과 선택한 파일간에 코드 비교후 다른 부분 표기해줌. File: compare Active File with Clipboard 선택 > 현재 열려 있는 파일과 복사 되어있는 코드랑 비교 후 다른 부분 표기해줌. File: compare Active File with saved 선택 > 현재 열려 있는 파일에서 수정작업 후 파일 저장전이라면, 저장전 파일과 저장후 파일을 비교해줌.

setting.json 에서 수정할 사항들이 항상 많았는데, 매번 구글링 검색후 들어가는 방식이 번거로워서 간략하게 정리!! step 1. command palette 열기 step 2. setting.json 파일 열기 step 3. setting.json 파일에 주석색깔 넣기. "editor.tokenColorCustomizations": { "comments": "#fc5dff" }

css 한 줄 정리 alt + shift + F prettier alt + shift + F (css 제외) 브라우저 미리보기 alt + shift + B

map() 배열 각 요소에 대하여 주어진 함수를 수행한 결과를 모아 "새로운 배열을 반환" 하는 메서드 var num = [1, 2, 3, 4, 5]; var numMap = num.map(val => val * 2); /* 아래코드와 동일. var numMap = num.map(val => { return val * 2 }) */ filter() 배열 각 요소에 대하여 주어진 함수의 결괏값이 true인 요소를 모아 새로운 배열을 반환하는 메서드 var fruits = ["grape", "watermelon", "banana"]; var fruitsMap = fruits.filter(val => { val.length > 5; }); // "watermelon", "banana"

setInterval 일정 시간 간격을 두고 함수를 실행하는 방법 clearInterval setInterval을 멈추게 하는 방법. var count = 0; var repeat = setInterval(function(){ count++; if(count === 5){ clearInterval(repeat); } }); // 0 // 1 // 2 // 3 // 4 // 5 setTimeout 일정 시간이 지난 후에 함수를 실행하는 방법, 사용방법은 setInterval과 같다.

간략하게 정리해보기 :) 1. DOM (Document Object Model), CSSOM (CSS Object Model) 생성 서버로부터 받은 HTML, CSS를 다운로드 받는다. 이 파일들은 각각 [사진1-1] HTML ➔ DOM Tree [사진1-2] CSS ➔ CSSOM (Object Model) 으로 만들어진다. + javascript 실행 (21/4/12 추가) 2. Render Tree 생성 DOM Tree와 CSSOM을 이용하여 Render Tree를 생성한다. DOM Tree : 순수한 요소들의 구조와 텍스트만 존재한다. Render Tree : 스타일 정보가 설정되어 있으며 실제 화면에 표현되는 노드들로만 구성된다. (display: none은 Render Tree에 포함되지 않으나..

개발자들이 하나의 소프트웨어 소스 코드를 통째로 복사하여 독립적인 새로운 SW를 개발하는 것을 의미한다. 정리한 이유는 아래 2가지에서 쓰였기 때문이다. 1. [사진참조] github : repository - fork 2. 브라우저 렌더징 과정 : chrome - 웹킷 fork ➔ Blink 엔진으로 자체적 구현사용 출처ko.wikipedia.org/wiki/%ED%8F%AC%ED%81%AC_(%EC%86%8C%ED%94%84%ED%8A%B8%EC%9B%A8%EC%96%B4_%EA%B0%9C%EB%B0%9C)

function sum(a,b){ return a + b; } sum(1, 2); // 3 인수 (Argument) = 전달인자 : 말 그대로 함수에 전달하는 값(인자)! 위 코드에서는 1, 2을 의미한다. 인자 (Parameter) = 매개변수 : 전달받은 값(인자)을 받아들이는 변수 위 코드에서는 a, b을 의미한다.

간단하고 업무할 때 반드시 필요한 기능이지만, 한번 셋팅해놓고 매번 찾아보기 번거로워서 이번에 정리해본 것! 1) extensions에서 "prettier" 검색 ➔ Setting 버튼 클릭 ➔ Extension Settings 클릭 2) editor.format 검색창에 입력 ➔ Editor: Format On Save 안의 체크박스 체크 그리고 파일 저장시 셋팅한 포맷에 맞게 코드정리가 된다 👍👍

작년에 이어 올해도 코로나시대를 맞이하고 있다. 많은 회사에서 재택근무를 하는 와중에, 현대인들이 생활속에서 접하고 있지만 개념적으로 정리해보진 않은 서비스형 소프트웨어(SaaS)에 대하여 간략하게 정리해보고자 한다 😀 서비스형 소프트웨어 (SaaS : Software As A Service) : 서비스공급자들에 의해 온라인에 호스팅된 소프트웨어를 고객들이 이용에 대한 사용료를 지불하는 비즈니스 모델. 쉽게 말해서, 서비스를 소프트웨어로 제공한다는 것! (물건을 사면 물건값을 내는것처럼, 소프트웨어를 사용하면 이용료를 지불한다.) SaaS 기업으로는 아래와 같은 기업이 있다. - 잔디 JANDI (국내에서 유명한 온라인 협업툴) www.jandi.com/landing/kr JANDI | Work Bett..

scss, sass를 공부하다가 '런타임'이라는 개념을 접하게 되었고, 이번 기회에 확실하게 알고 넘어가고자 개념정리 해본것 ! step1. 사용자(사람)가 코드를 작성한다. 사람이 보기좋게 작성한 것이지 컴퓨터는 이걸 읽고 동작할 수 없다. step2. 그렇기에 컴퓨터가 이해할 수 있는 코드로 변경한다. (= 사람이 작성한 코드를 컴퓨터가 읽을 수 있도록 compile 한다. -> 000000100000010101000...) => 이시간을 "컴파일타임 (Compile-time)"이라고 한다. 이 과정에서 사람이 작성한 코드에서 문법에러가 존재한다면, "컴파일타임 에러 (Compile-time error)"가 발생한다. 예) ;가 없어요. number와 string은 더할수 없어요. step3. 이제 ..

협업을 하다보면 다른 작업자가 써놓은 주석을 종종 보게된다. (근무회사에서는 작업자 본인이 추후에 작업사항이 필요하거나 다른 작업자에게 작업을 요청할 경우에 보통쓰였다.) FIXME TODO XXX 무언가 작업을 해야될 필요성이 있으므로 추후에 해야된다고만 생각했었다. 이번 정리를 통해 둘의 차이점과 의미를 확실하게 알고 넘어가자! (결론 : 단순 주석보다는 의미있는 주석을 남기는 습관을 들이자!!👍) TODO 당장 구현하기는 어렵지만 추후에 작업이 필요한 사항. 추후에 무언가 더 의미있는 작업을 해야될 필요성이 느껴지는 사항. (ex. 최적화, 리팩토링) FIXME 문제사항이 있는건 확실하지만, 당장 수정할 필요는 없는 사항. XXX 해당 부분에 대하여 더 생각해볼 필요성이 있는 사항. (근무한 회사 ..