찐빵이의 개발일기

PWA란? 모바일 앱과 같은 경험을 주는 최신 웹 앱이다. 앱과 같이 아이콘, 설치 배너, 푸시, 오프라인 경험을 제공한다. HTML, CSS, JS로 구현할 수 있다. PWA 적용 애플리케이션 인스타그램, 우버, 트위터, 스타벅스 등 전 세계적으로 사용하고 있다. PWA 등장배경 우리는 일상 속에서 모바일을 많이 사용한다. 하이브리드 앱으로 모바일 앱 영역을 커버하기에는 한계점이 있었다. only 웹 기술로 모바일을 점유하기 위해서 등장했다. PWA 특징 Responsive 반응형 웹 디자인. PC, 태블릿, 폰에서도 편리하게 사용 가능하다. App like & Discoverable 웹이지만 유저는 앱처럼 느낄 수 있다. Engageable 푸시 알림이 가능하다. Connectivity 온라인, 오프..

1. Nullish Coalescing​ function print(something){ const message = something ?? 'there is no message'; console.log(message); } something이 null/undefined 인 경우 "there is no message"가 message에 들어간다. default parameter를 사용하면 undefined 인 경우에만 적용되고, null인 경우에는 적용되지 않는다. 2. Object Destructuring function printStudent(student){ const { name, age } = student; console.log(name); console.log(age); } 객체의 반복을 줄..

공부하는 이유 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..