🤓 슬기로운 개발생활 🤓 슬기로운 개발생활

용어 정리 - 이벤트 버블링(event bubbling) : 이벤트 타깃 요소에 이벤트가 발생하면, 최상단의 부모 요소까지 각각 할당된 이벤트가 발생되는 것. - 이벤트 캡처링(event capturing) 3단계의 이벤트 흐름에서 첫 번째 단계이다. 1. 캡처링 단계 : 이벤트가 하위 요소로 전파되는 단계 2. 타깃 단계 3. 버블링 단계 가장 최상위 조상에서 아래(타깃 요소)로 이벤트가 전달되는 단계이다. 이벤트(Event) 브라우저에서 로그인 버튼을 클릭했을 때, 뒤로 가기 버튼을 클릭했을 때 브라우저는 버튼의 역할에 맞게 동작을 수행한다. 사용자가 어떤 사건(버튼 클릭, 더블클릭, enter 등)을 발생시켰을 때 브라우저가 이를 감지하여 이벤트(로그인을 한다, 다음 페이지로 넘긴다 등)를 발생시킨..

용어 정리 - HTMLCollection 객체 : 유사 배열 객체이면서 이터러블이다. 인덱스를 키 값으로 가지고 있고, length를 가지고 있다. 배열과 비슷하게 생겼지만 객체이다. - NodeList 객체 : 유사 배열 객체이면서 이터러블이다. forEach 메서드를 제공한다. 요소 노드 취득하기 DOM API(프로퍼티, 메서드)를 사용하여 html 을 변경하기 위해서는 일단 변경할 노드를 선택할 수 있어야 한다. Hello 예를 들어 div 태그 안의 Hello 텍스트를 변경하기 위해서는 div 요소 노드와 연결된 텍스트 노드를 변경해야 한다. 이를 위해 DOM은 여러 가지 메서드들을 제공한다. 1. id를 이용하기 - method : document.getElementById(); - parame..

용어 정리 - 파싱(parsing) : 문장이나, 데이터 문자열을 분석하고 해부하여 원하는 데이터를 뽑아내는 기술 예를 들어 JSON.parse(json) 메서드는 인자로 받은 json을 분석하고 해부하여 객체로 변환한다. const json = `{"string" : "json 변환", "result" : "true"}`; const result = JSON.parse(json); console.log(result);//{string: 'json 변환', result: 'true'} console.log(result.string); //json 변환 console.log(result.result); //true -API(Application Programming Interface) : 리모컨 역할 tv..

%와 px 비교 px은 parent에 상관없이 항상 같은 공간을 차지한다. %는 parent의 넓이를 기준(padding 값 제외)으로 적용되기 때문에 parent의 크기에 영향을 받는다(relative). index.html 50% 100px 50% 100px 선을 기준으로 위쪽의 %는 기준이 html 전체 크기가 되고, 아래의 %는 parent 태그의 크기가 기준이 된다. em와 rem 비교 em은 상위 요소(가장 가까운 parent) 폰트 사이즈의 몇 배인가를 나타낸다. 만약 상위 요소의 폰트 사이즈가 20px 이라면, 1em = 20px 이 되고 20em = (20 * 20) px 이 된다. rem은 최상위(root) 폰트사이즈가 기준이다. index.html 1rem 1em 2rem 2em 1r..

Step 1: Background flexbox가 있기 전에는 float, position, table을 사용해서 하나하나 배치를 해주었다. 예를 들어 float의 경우는 본문과 사진을 함께 배치할 때 사진의 위치를 left , center, right 으로 조정해주었다. 그리고 본문을 다시 또 나눠서 하나는 오른쪽에 나머지 하나도 float을 사용해 아래에 배치해주었다. .img { float : left } float 의 원래 목적은 텍스트와 이미지를 배치하는 것이었지만, 원래 목적에서 벗어나게 되었고, 코드도 복잡해졌다. flexbox가 등장하게 되면서 float은 원래 목적으로만 사용할 수 있게 되었다. Step 2 : Flexbox Flexbox layout 모듈(Flexbox)은 박스와 아이템..

CSS (Cascading Style Sheets) CSS는 Cascading Style Sheets의 약자이다. html이 웹페이지의 content를 담당하고, javascript가 웹페이지의 동적인 요소들을 담당한다면, css는 웹페이지를 아름답게 만들어주는 역할을 담당한다. 웹페이지가 스타일링 될 때는 아래 3가지를 참고한다. 1. Author style : 내가 작성한 style sheets. (.css파일) 2. User Style : 사용자가 스타일하는 것(다크모드, 글자 크기 설정 등) 3. Browser : 브라우저 상에서 기본적으로 지정된 스타일. 그리고 우선순위를 가지는데 기본적으로 내가 작성한 style sheets인 author style이 1순위, user style이 2순위, 마..

Creact-React-App 리액트에서도 es6 등 최신 문법을 사용하기 때문에 웹팩과 바벨이 필요하다. 웹팩은 파일들을 하나로 묶어 빌드시켜주기 위해 필요하고, 바벨은 최신 자바스크립트 문법도 구형 브라우저에서 잘 동작할 수 있도록 해주기 위해 필요하다. 하지만 create-react-app, CRA를 사용하면 이러한 개발 환경을 알아서 세팅해주기 때문에 우리가 웹팩과 바벨 세팅을 하지 않아도 된다. CRA없이 직접 React 프로젝트 시작하기 CRA가 작동되는 원리를 알기 위해 CRA없이 직접 개발 환경을 구축해보자. 1. 필요한 폴더, 파일들 생성하기 직접 creact-react-app으로 리액트 프로젝트를 시작하면 아래와 같은 폴더 구조를 볼 수 있다. 여기서 public 폴더는 정적 파일(ht..

Jest 초기 세팅 Jest는 간단한 자바스크립트 테스트 프레임워크이다. babel, typescript, node, react, angular, vue 등을 사용하는 여러 프로젝트와 함께 사용할 수 있다. 1. installing Jest using npm npm install --save-dev jest 2. 예제 파일 sum.js 생성 //sum.js function sum(a,b){ return a + b; } module.exports = sum; 3. 테스트 예제 파일 sum.test.js 생성 이 때 __test__ 디렉토리 안에 있는 파일이나 test.js로 끝나는 파일들은 모두 테스트 파일로 인식한다. const sum = require('./sum'); test('add 1 + 2 to..