찐빵이의 개발일기

공부하는 이유 Vue를 사용해서 개발할 때 여러 컴포넌트(Component)를 만들어서 사용하게 된다. 생성 주기에 따라 컴포넌트에서 해야 하는 일이 추가될 수 있기 때문에, 생명주기를 잘 알고 있어야 한다고 생각했다. 생명주기 (Life Cycle) 이해하기 Vue는 다음과 같은 생명주기를 가지고 있다. 라이프 사이클은 크게 Create, Mount, Update. Destroy로 나눌 수 있다. Create Vue 인스턴스가 생성되고 이벤트 및 라이프 사이클이 초기화된다. SSR 적용 시 서버 사이드에서도 실행 가능하다. beforeCreate 인스턴스 생성 후 가장 먼저 실행되는 단계. Vue 인스턴스의 data와 methods 속성이 정의되어있지 않은 상태다. DOM에 접근할 수 없다. 이 단계가..

1. Pure Function (순수 함수) 함수에서 외부의 값을 참조하면 안 된다. 동일한 인자를 넣었을 때 항상 동일한 결과 값을 내어야 한다. 함수 안에서 외부의 상태 값을 변경하면 절차 지향적 프로그래밍이다. 2. Stateless, Immutability (비상태, 불변성) 함수 인자로 전달된 데이터를 변경하면 안 된다. 멀티스레드 환경에서 사이드 이팩트가 있기 때문이다. 새로운 Object에 결과값으로 만들어서 전달해야 사이드 이팩트를 막을 수 있다. 3. Expressions Only 반복문, 조건문을 사용하지 않고도 배열 내장 메서드를 사용해서 배열에 접근 및 값 변경 가능하다. 4. First-class and Higher-order functions First-class : 함수를 변수..

CSS로 스타일링을 하다 보면 가운데 정렬이 헷갈린다. 여러 방법이 다른 것 같은데, 매번 찾기 귀찮아서 정리해본다. margin 사용하기 div, block요소는 margin:auto를 사용해서 가운데 정렬을 할 수 있다. text-align 사용하기 text나 inline-block요소는 text-align:center를 사용해서 가운데 정렬을 할 수 있다. flex 사용하기 요소의 display속성을 flex로 정의하면, justify-content와 align-content, aling-items를 사용해서 정렬 방식을 설정할 수 있다. 예시 li{ display: flex; align-items: center; /*가로 가운데 정렬*/ }

CSS를 작성하다 보면 같은 값들이 반복되는 경우가 있다. 이런 경우 변수를 만들어서 사용하면 관리가 쉬워진다. CSS 변수 사용법 root클래스 안에 변수를 선언하면 사용할 수 있다. :root { --main-bg-color: pink; } body{ background-color: var(--main-bg-color); } 동일한 값을 사용하는 곳에 변수를 사용해서 적용하면 된다. 대체 변수 사용하기 변수가 정의되지 않았을 때, 대체 변수를 사용할 수 있다. body{ background-color: var(--main-bg-color, red); /*--main-bg-color가 정의되지 않은 경우 red가 적용된다.*/ } 참고자료 사용자 지정 CSS 속성 사용하기

position이란 position 속성은 HTML 문서에 요소가 배치되는 방식을 결정한다. 대부분 position 속성으로 배치 방식을 결정하고 top, bottom, left, right 속성으로 위치를 결정한다. position:static (default) position 속성을 지정하지 않으면 default값으로 static이 적용된다. HTML에 작성된 순서대로 브라우저 화면에 표시가 된다. top, bottom, left, right 속성 값은 무시된다. position:relative 원래 위치를 기준으로 상대적으로 배치하는 방법이다. top, bottom, left, right 속성을 이용해서 요소가 원래 위치에서 얼마나 떨어질지 정할 수 있다. position:absolute posit..

저번 시간에 ES6에서 추가된 const와 let으로 var를 대신할 수 있다는 사실을 알았다. javascript에서 var을 사용하면 안 되는 이유 그럼 const와 let의 차이점은 무엇일까? 바로 재할당 가능여부이다. const 변수 재선언, 재할당이 불가능하다. const banana = "banana"; console.log(banana); // banana // 재선언 const banana = "apple" console.log(banana); // Uncaught SyntaxError: Identifier 'banana' has already been declared // 재할당 banana = "apple" console.log(banana); // Uncaught TypeError: ..

1. var hoisting Hoisting : 어디에 선언했느냐에 상관없이 선언을 제일 위로 끌어올려주는 것. var을 사용하면 hoisting이 되기 때문에 아래와 같은 이상한 행동을 할 수 있다. 선언하기 전에 값을 할당 값을 할당하기 전에 출력 2. block scope이 없다. { variable = "I am a variable"; var variable; } console.log(variable); 블럭 안에서 변수를 선언하고, 블럭 밖에서 변수를 출력할 수 있다. 3. 재선언이 가능하다. var banana = "banana"; console.log(banana); // banana var banana = "apple"; console.log(apple); // apple 바나나가 사과가 ..

promise와 async await은 비동기적인 일의 결과를 받아야 할 때 사용된다. Promise resolve와 reject 콜백 함수를 전달한다. const promise = new Promise((resolve, reject) => { //promise에는 resolve, reject가 있다. //resolve : 정상적으로 동작했을 경우 일어나는 행동 //reject : 에러가 있었을 경우 일어나는 행동 //프로미스를 만드는 순간 이 안에 있는 내용이 실행된다. //정상 실행인 경우 예시 resolve('Success!'); }); promise .then((value) => { // promise resolve 결과가 여기에 전달된다. // Success가 전달됨 }) .catch((erro..

순수 바닐라 자바스크립트를 이용할 때는 use strict를 쓰는 게 좋다. 자바스크립트는 굉장히 유연하다는 게 특징인데, 개발자가 실수를 할 수 있다는 단점이 있다. 예를 들어 선언되지 않은 변수에 값을 할당 기존에 존재하는 프로토타입 변경 이런 이상한게 가능하다. ECMAScript 5부터 추가된 use strict 을 사용하게 되면 위처럼 비상식적인 것을 사용할 수 없게 된다. (에러가 나서 잘못된 부분을 확인할 수 있다.) use strict 사용법 javascript 파일 제일 위에 use strict를 적어준다. 예시 'use strict' /* 코드 작성 */

웹 개발을 할 때 HTML head에 script를 포함한다. 브라우저는 사용자가 HTML 파일을 다운로드하였을 때 브라우저를 한 줄씩 분석하게 되는데, script 태그가 보이면 script파일을 다운받아야 한다. script를 다운받는 방법은 한 가지 일까? 효율적으로 script파일을 다운로드하는 방법은 무엇일까? fetching : 스크립트를 서버에서 받아온다. executing : 스크립트 실행 1. 헤더에 그냥 추가하기 이 방법은 HTML을 파싱하다가 script태그를 만났을 때 파싱을 멈추고, . js파일을 다운로드, 실행한다. . js파일이 크기가 크거나 인터넷이 느린 경우 사용자가 웹 페이지를 볼 때까지 오랜 시간이 걸린다는 단점이 있다. 2. body 끝부분에 추가하기 브라우저가 HTM..