디자이너 노트

vite란 무엇인가? npm은 JS 라이브러리를 모아놓은 플랫폼 npm으로 JS 라이브러리를 전부 다운 받으면 생기는 문제 node_modules 폴더 용량이 매우 크다. import/require 문법은 브라우저 친화적이지 않음 해결책 모든 JS 파일을 하나로 합쳐(번들링) 사용하기 -> 실제 필요한 코드만 찝어서 합쳐줌 그래서 번들링 툴을 많이들 사용( 기본적으로 npm + Web pack 이 있다. ) 그런데 Web Pack의 경우, npm 라이브러리가 많아지면 번들링이 오래 걸린다. 요약 vite는 js 라이브러리 bundle을 빠르게 해주는 tool이다. 미리보기 띄우는 속도만 빠르다.

Why React? 리액트란 자바스크립트로 만든 SPA의 한계를 극복하기 위해 등장한 라이브러리다. SPA는 모든 페이지를 한 페이지에서 구현하기 때문에 상태 관리가 어려울 수 있다는 단점이 있다. 기존 프론트엔드 개발의 문제점 1. DOM 조작의 어려움 2. 코드 관리 어려움 3. 성능 저하 리액트의 장점 1. 인터페이스를 독립적인 컴포넌트로 구성하여 코드 재 사용성, 유지 보수성, 확장성을 향상 시킴. 2. 가상 DOM을 통해 실제 DOM을 추상화하여 UI 업데이트를 효율적으로 처리. 성능 저하 최소화. 3. 내장된 상태 관리 기능과 서드 파티 라이브러리가 많음 리액트 작성 예시 JSX 문법 import logo from "./logo.svg"; import "./App.css"; function A..

프로젝트 시작 계기 HTML,CSS,JAVAscript의 개념을 어찌저찌 공부하다보니, 프로젝트는 놓치고 있었다. 그 사이, 개념은 여전히 잘 모르겠고, 지난 시간들에 배웠던 것도 잊어가기 시작했다. 실무에서 근무하시는 분께 고민을 이야기하니, 개념에 함몰되지 말아야 한다고 말씀하셨다. 실무를 직접 해보면서 모르는 개념을 익히는 것을 추천하셨다. 이에 HTML, CSS, JAVAscript를 동시에 할 수 있는 미니프로젝트를 진행하기로 했다. 결과물 toggle toggle이란 두가지 상태 사이의 전환을 의미한다. 코드에선 true를 false로, false를 true로 전환하기 위해 사용한다. 예전부터 배경에 야간모드 적용하는 방법을 익히고 싶었는데, 어렵다 느껴서 못했다. 그런데 navbar를 없애고..

AJAX Ajax란 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 말한다. ajax는 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작한다. XMLHttpRequest는 HTTP 비동기 통신을 위한 메서드와 프로퍼티를 제공한다. sync는 모든 화면의 정보를 보내니 비효율적일 수 있다. 반면, async는 필요한 데이터만 넘어간다. 그 데이터를 JSON 형태로 보낸다. browser -> server (문자화) server -> browser(문자화) JSON이란? JSON이란 클라이언트와 HTTP 통신을 위한 텍스트 데이터 포맷이다. 자바스크립트에 종속되지 ..

async/await은 Promise를 기반으로 동작한다. promise는 chaining을 할 수 있다. 그러나 매번 체이닝을 하면 코드가 난잡해질 수 있어 async와 await가 등장했다. 고로 async/await은 promise의 syntactic sugar라고 이야기 한다. - clear style of using promise 더보기 *syntactic sugar 완전 새로운 문법이 아니라 기존 문법위에 또는 기존 문법을 감싸서 조금 더 편하게 사용할 수 있는 API를 제공하는 것을 syntactic sugar라고 이야기한다. 예를 들어 class는 기존 prototype에서 등장한 문법이다. async 함수 async 함수는 async 키워드를 사용해 정의하며 언제나 프로미스를 반환한다. ..

콜백 지옥!(callback hell) 함수를 지속적으로 네스팅해서 가독성을 떨어트리게 만드는 것. 자바스크립트란 기본적으로 호이스팅이 완료된 후, 동기적(synchronous) 처리가 발생한다. 더보기 호이스팅이란? var, function 선언문이 자동적으로 제일 위로 올라가는 것. 콜백 함수 다른 함수의 인수로 전달되는 함수를 의미한다. 즉, 함수 안에서 다른 함수를 인수로 넣어 사용할 수 있으며, 이때 사용되는 함수를 콜백함수라고 부른다. 콜백함수는 2개가 있다. - Synchronous callback - Asynchronous callback 동기적 처리의 특징(synchronous) console.log('1'); setTimeout(()=> console.log('2'), 1000); //..

프로미스란 무엇인가? Promise is a JavaScript object for asynchronous operation. 비동기 처리 상태와 처리 결과를 관리하는 객체 중요 포인트 1. state State: pending -> fulfilled or rejected 2. Producer vs Consumer 프로미스의 생성하기(Producer) when new Promise is created, the executor runs automatically. Promise 생성자 함수를 new 연산자와 함께 호출하면 프로미스(Promise) 객체를 생성한다. Promise 생성자 함수는 비동기 처리를 수행할 콜백 함수를 인수로 전달받는데, 이 콜백함수는 resolve와 reject 함수를 인수로 전달받..

기본 개념 자바스크립트의 엔진은 단하나의 실행 컨택스트를 갖는다. 이는 함수를 실행할 수 있는 창구가 단 하나이며, 동시에 2개 이상의 함수를 실행할 수 없다는 것을 의미한다. 이처럼 자바스크립트의 엔진은 한번에 하나의 태스크만 실행할 수 있는 싱글 스레드(single thread)방식으로 동작한다. 비동기 통신이란? 현재 실행중인 태스크가 종료되지 않은 상태라 해도 다음 태스크를 곧바로 실행하므로 블로킹이 발생하지 않는다는 장점이 있지만, 태스크의 실행 순서가 보장되지 않는 단점이 있다. 타이머 함수인 setTimeout, setInterval, HTTP 요청, 이벤트 핸들러는 비동기 처리 방식으로 동작한다. 예시로, 동기적인건 전부 다 불러오는 것. 비동기적인 건 내가 원하는 부품만 빼서 왔다 갔다 ..

img를 이미지 태그로 넣을 것인가, background로 넣을 것인가? 이미지의 교체 가능성이 조금이라도 있다면 로 넣어준다. object-fit: contain; 이미지와 비디오를 넣을 때, 비율을 조절하기 위한 것. img태그의 크기를 조절하고, 비율을 넣을 때 background 느낌으로 조절할 수 있게끔 도와주는 것. vw viewport-width를 때려주면 반응형 웹에 적용하기 좋다. 모바일 형태로 조절해도 자유롭게 사이즈를 조절하는 것이 가능하다. padding-top: 40%; 패딩탑에 %를 붙이는 것. aspect-ratio: 1 / 1; (정방형 설정) aspect-ratio: 16 / 9; (16:9 비율 설정) 이미지를 background-image마냥 만들기 (absolute) ..

픽셀 퍼펙션 지켜주며 제작하기 타이틀, 메인, 태그 모두 일관되게 늘어나게끔 신경쓸 것 이렇게 img태그를 작명하는 것보다 등을 사용하는 걸 권장. 이미지가 여러장이 되었을 때. 같은 경우도 독립된 컴포넌트로 사용할 수 있기 때문에 그냥"hashtag"도 괜찮다. 이번에 작업하면서도 느낀 거지만, space-between은 유지보수 측면에서 예쁘지 않다. 코드리뷰는 이상적인 형태로 보내는 것보다는 치명적인 오류를 잡아주는 쪽. 같은 경우는 하이픈을 사용하는 이유가 명확해야 한다. 무엇을 지향하는 것인지? 팀내에서 약속을 잡을 때, 줄일것인지 말 것인지에 대해서도 이야기 한다. html 내부에서 - 볼드 처리하는 것은 권장하지 않는다. 왜냐하면 b는 단순히 두껍게하는 역할만 한다. 그렇기에 을 권장한다. ..