불필요한 태그는 쓰지 않는다. wrapper 역할로만 사용되는 , div 안에 데이터를 넣기 위한 들을 많이 봤다. 써야 한다면 쓰는게 옳다. 하지만 하나의 노드가 추가될 때마다 DOM tree도 깊어진다. 최대한 DOM depth가 많아지지 않도록 해야 한다. 동적인 스타일 변화는 부모에 주지 않는다 변화가 발생하면 repaint는 자식 요소, reflow는 부모와 자식 요소 관계없이 일어난다. 그러니까 동적인 변화를 줘야 한다면 그 요소만 타겟해야 한다. 또한 그 요소에도 최대한 자식 요소가 없도록 구조하는 것이 좋다. inline style 보다는 클래스명이 낫다 클래스명의 변화도 reflow를 일으킨다. 여러 스타일을 인라인으로 추가한다면 스타일 하나 하나가 reflow를 유발한다. 모든 스타일들..
DOM DOM은 자바스크립트가 웹 페이지에 접근하여 내용과 디자인을 바꿀 수 있게 한다. 다른 프로그래밍 언어도 가능하지만 DOM 조작의 대표적인 언어는 자바스크립트다. 그래서 DOM은 프로그래밍 언어가 문서에 접근해서 읽고, 조작할 수 있게 하는 인터페이스다. 어떻게 생겼을까? DOM은 대표적으로 HTML을 통해서 표현된다. JavaScript로 DOM을 직접 조작하면서 화면은 정적이지 않다. 사이트는 이벤트에 따라 컬러가 바뀌고, 다이나믹하게 애니메이션이 일어나기도 한다. 그렇지만 변화가 일어날 때 CPU 소모가 발생한다는 문제가 있다. 자바스크립트는 DOM을 변경하고 검색한다. 문서는 트리 구조다. 변경된 요소를 찾으려면 하위 트리 구조까지 타고 가야 한다. JavaScript가 요소에 변화를 주면..
목표 개발과 배포 환경에 따른 환경변수를 설정한다. 이를 위해 webpack에서 dotenv와 definePlugin을 사용한다. 실제 회사에서 개발 환경은 Dev, Beta, Stage, Operation(Production) 과 같이 구분됩니다. 이 환경에 대해 부르는 이름과 구성은 상이할 수 있습니다. 그렇지만 우리가 작업하는 로컬인 Dev와 실제 적용된 운영(Production) 환경은 공통됩니다. 환경에 따라 크게 다른 부분은 API의 Base URL이 있습니다. 그렇기 때문에 환경 변수를 통해 개발 환경에 따른 값을 설정할 수 있습니다. 이 외에도 환경변수가 필요한 경우는 API의 private한 key값을 숨겨야 하는 경우도 있습니다. .env 환경변수를 설정할 파일들을 만듭니다. 이 글에서..
XSS 공격 Cross Site Scripting의 약어입니다. CSS가 맞는 줄임이겠지만, 이미 스타일시트로 보편화되어 사용되고 있는 CSS가 있지요. 그래서 CSS가 아니라 XSS로 줄여서 말합니다. XSS 공격은 DOM에 악성 자바스크립트 코드를 삽입하여 공격하는 기법입니다. 입력창에서 이렇게 스크립트를 삽입할 수 있습니다. Submit function displayMessage() { var name = document.getElementById('name').value; document.getElementById('message').innerHTML = 'Welcome, ' + name + '!'; } 공격의 예시 코드를 삽입해 어떤 공격을 할 수 있을까요? 사용자의 쿠키를 탈취하는 스크립트 로..
Polling이 무엇인지 알아보기에 앞서 Web 통신의 특성에 대해 알아야 합니다. Web HTTP 통신은 클라이언트가 서버에 요청을 하고, 응답을 받으면 연결이 끊어지는 특징이 있습니다. 바로 비연결성(Connectionless)이라고 합니다. 그래서 웹은 실시간으로 서비스를 운영할 수 없는 한계가 있습니다......만 Polling 방식을 통해서 실시간처럼 보이도록 할 수 있습니다. 폴링(Polling) 폴링은 업데이트가 갱신되었을 때, 이를 확인하기 위해 사용합니다. 다시 말해 새로운 데이터를 계속 보여주기 위해 반복적으로 API 요청을 하는 방식입니다. 예시 만약 인스타그램과 같은 SNS에 폴링을 적용한다면 사용자는 계속 새로고침을 하지 않아도, 최신 피드를 확인할 수 있습니다. 작동 순서는 대략..
자바스크립트에서 객체는 프로퍼티(Property, 속성)를 가지고 있습니다. 각 프로퍼티는 이름과 값이 있습니다. 이름은 문자열이고, 값은 어떤 타입이든 가리지 않습니다. const obj = { name: "객체" } 프로퍼티는 추가, 삭제가 가능합니다. 그러므로 객체는 프로퍼티의 집합이기도 합니다. 프로퍼티는 데이터, 접근자 프로퍼티로 나뉩니다. 데이터 프로퍼티(Data Property) const person = { age: 15, // 데이터 프로퍼티 name: "김개굴" // 데이터 프로퍼티 } 객체의 프로퍼티 대부분은 이름과 값이 있는 데이터 프로퍼티입니다. 이 객체는 두 개의 데이터 프로퍼티가 있습니다. 접근자 프로퍼티(Accessor Property) 위의 데이터 프로퍼티와는 좀 다른 모양..
체크박스 아이콘의 테두리가 잘려 보인다는 QA 요청이 왔습니다. 이슈 재현을 해보니 사파리 브라우저에서만 발생하는 이슈였습니다. (특정 브라우저에서만 발생하는 이슈는 정말 귀찮다고 생각해요..ㅠ) 개발자 도구로 스타일 조작을 해봐도 요지부동이었습니다. 검색을 통해 발견한 방법들은 다 적용해 본 것 같습니다 🫠 그러면 제가 찾아 보았던 방법과 결과를 정리해 보겠습니다. 문제 Safari에서 SVG 아이콘 픽셀이 깨짐 (정상 렌더링이 되지 않음) 원인 Safari 자체에서 SVG 지원이 완벽하지 않음 해결 방법 img 태그 사용하기 svg view box 수정 svg에 attribute 추가 svg width와 height 단위 변경 아이콘의 border만 css로 처리하기 svg 디자인 직접 수정하기 (✅..
객체에 대해 설명해 봐야 한다면 뭐라고 해야 할까요? 객체란? 객체에 대한 짧은 정의는 이렇습니다 자바스크립트의 가장 기본적인 데이터 타입 자바스크립트의 타입은 원시 타입과 객체 타입으로 나뉘어지죠 프로퍼티의 순서없는 집합 const 객체 = { name: '김객체' , human: false } 객체는 자신만의 프로퍼티를 가지고, 프로토타입으로 불리는 다른 객체에서 프로퍼티를 상속받기도 합니다. 자바스크립트가 프로토타입 기반의 객체지향 프로그래밍 언어라고 불리우는 이유입니다. 프로퍼티 프로퍼티는 이름과 값으로 이루어져 있습니다. 이름은 문자열이나 심벌 타입을 가집니다. 보통 대부분의 이름은 문자열입니다. 값은 이름과 다르게 타입을 가리지 않습니다. 어떤 타입도 가능하고 getter나 setter 또는 ..
로그인이 뭔지 아세요? Q. 로그인은 무엇일까? A. 인증된 사용자라는 것을 알려주기 위한 기능 Q. 어떻게 구현해야 할까? A. JWT 토큰 위의 내용은 이 글에 대한 요약이 아닙니다 ❌ 공부를 하기 전에 생각한 제 대답입니다. 제가 어떻게 이해했고, 결론은 어떻게 내렸는 지 써보겠습니다. 알아볼까요 어떤 서비스에나 있는 로그인과 로그아웃은 간단해 보입니다. 그렇지만 이 인증과 인가 기능을 구현하기 위해서는 고려해야 할 것이 많습니다. 사용자의 정보가 털리지 않도록 보안을 지켜야 하고, 사용자가 서비스에 머무는 동안 로그인이 잘 되어 있도록 사용성을 중시해야 합니다. 로그인의 문제점 구현에 앞서서 알아야 하는 부분입니다. 로그인을 공부하다 보면 서버와 보안에 대해 알게 됩니다! (또 여기서 모르는 용어..
API에서 날려주는 데이터를 UI에 더 잘 뿌려주기 위해 꼭 알아야 할 부분입니다. 이 글은 자세한 개념을 다루지 않고, 제가 기억하고 싶은 부분 중심으로 작성했습니다. 🥑 구조 Object.assign(target, ...sources) Object.assign({초기값, 객체들}) 뒤에 있는 객체들이 초기값 부분과 합쳐집니다. ❓ 왜 쓰는가 우리가 객체를 복제하고 싶을 때, 쉽게 이용할 수 있는 방법은 또 다른 변수에 객체를 담는 것입니다. const user = { name: "gaegul", gender: "female" } const newUser = user; // newUser에 user를 복제 console.log(newUser.name) // gaegul newUser은 user의 내용을..
여차저차 갖가지 에러를 해결하며 프로젝트에 맞는 npm install 성공 완료! 그리고 npm run start 에러… import된 css들이 제대로 컴파일이 되지 않는 것 같았습니다. 찾아보니 sass 팀에선 더이상 node-sass를 지원하지 않는다고 합니다. 이는 최신 m1 환경도 지원하지 않는 다는 소리. 공식 사이트에서 dart-sass를 이용하라고 말합니다. We no longer recommend LibSass for new Sass projects. Use Dart Sass instead. If you’re a user of Node Sass, migrating to Dart Sass is straightforward: just replace node-sass in your packag..
해당 어플리케이션 웹사이트에서 가서 직접 설치할 수도 있지만, 더 편하게 터미널에서 명령어로 우리가 필요한 프로그램들을 설치해 보겠습니다. Visual studio code, Chrome 설치하기 우선 저는 비주얼 스튜디오 코드와 크롬이 필수 앱입니다. $ brew install visual-studio-code $ brew install google-chrome 최신 homebrew에는 cask가 기본으로 되어 있어서 --cask 명령어는 생략해도 됩니다. 카카오톡 설치하기 PC톡은 무조건 아니겠습니까… 설치에 앞서서 mas를 설치해야 합니다. cask : 웹사이트에서 받을 수 있는 어플리케이션 설치 mas : 앱스토어에서 받을 수 있는 어플리케이션 설치 // mas 설치 $ brew install m..
