FE

번들러(Bundler)와 트랜스파일러(Transpiler)

🤔 번들러(Bundler)를 사용해야 하는 이유 초기의 웹 페이지와 서비스들의 규모는 그렇게 크지 않았다. 때문에 이를 구성하는 HTML이나 자바스크립트 파일의 크기도 상대적으로 작았고, 해당 서비스를 유지하는데 큰 무리가 없었다. 그러나 기술의 발전으로 컴퓨터 성능이 좋아지고, 네트워크 속도도 빨라지면서 웹 애플리케이션의 규모 또한 커져갔다. 이로 인해 파일의 양은 점차 늘어났고, 그에 따라 다양한 문제를 야기하였다. 1. 중복된 이름으로 인한 에러 대규모 웹 페이지의 경우 수 백, 수 천개의 자바스크립트 파일이 있고 여러 사람들이 관리하다보니 함수명, 변수명을 똑같이 짓는 경우가 생겨 예상치 못한 에러가 발생할 수 있다. 2. 파일로 인한 문제 사용자가 요청을 하면 서버는 웹 애플리케이션을 구성하는 ..

[JS] ES6의 특징 (2) - 템플릿 리터럴, 반복자, for ... of

const and let Arrow functions(화살표 함수) Template Literals(템플릿 리터럴) Default parameters(기본 매개 변수) Array and object destructing(배열 및 객체 비구조화) Import and export(가져오기 및 내보내기) Promises(프로미스) Rest parameter and Spread Operator(나머지 매개 변수 및 확산 연산자) Classes(클래스) Generator(생성자) Iterator(반복자) 템플릿 리터럴(Template literals) 복잡한 문자열을 쉽게 만들어주는 장치로 문자열 안에 문자열 및 변수를 넣을 수 있다. 기존 문자열 출력 시 변수와 함께 출력하려면 아래와 코드와 같이 따옴표(', ..

[JS] ES6의 특징 (1) - const와 let, 화살표 함수

ES6(ECMAScript 2015)는 ECMAScript 표준의 최신 버전이다. ES6는 새로운 언어 기능이 포함된 주요 업데이트이며, 2009년에 표준화된 ES5 이후로 언어 기능에 대한 첫 업데이트이기도 하다. ES5 이하 명세에서 문제가 되었던 부분들이 해결되었고 많은 기능들이 추가되었다. 이는 가독성과 유지보수성 향상으로 이어졌다. React나 Vue 등의 라이브러리들도 이에 맞춰 개발 환경을 ES6로 바꾸게 되었고 이러한 이유로 인해 우리는 ES6에 주목하고 관심을 갖게 되었다. ES6는 아래의 새로운 기능들을 포함하고 있다. const and let Arrow functions(화살표 함수) Template Literals(템플릿 리터럴) Default parameters(기본 매개 변수) ..

[JS] 호이스팅(Hoisting)

호이스팅(Hoisting) 호이스팅이란 "끌어올린다"는 뜻으로 변수 및 함수 선언문이 스코프 내의 최상단으로 끌어 올려지는 현상을 말한다. 이는 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다. 호이스팅 시 var 키워드로 선언한 변수의 경우 undefined 값으로 변수를 초기화한다. console.log(num1); // undefined var num1 = 6; // 선언, 초기화 console.log(num1); // 6 컴파일러는 자바스크립트 엔진이 인터프리팅하기 전에 컴파일을 하는데, 이 때 var num1 = 6;을 2개의 구문으로 여긴다. var num1 num1 = 6 var num1은 변수 선언문으로, 컴파일을 할 때 처리하고 num1 = 6은 실행할 때..

[CSS] Reset CSS와 Normalize CSS이란 무엇일까?

Reset CSS, Normalize CSS는 브라우저마다 HTML 요소에 대한 기본 CSS값이 다르기 때문에 그 차이를 없애기 위해 필요하다(크로스 브라우징을 위해 사용). Reset.css 모든 브라우저의 내장 스타일을 '없애는' 기법이다. 아무 스타일도 없는 상태에서 스타일링을 시작하며, 공식적으로 권장하는 기법이라기보다 실무에서 편의에 의해 임의로 지정하는 설정이다. * { margin: 0; padding: 0; border: none; } 초기에 reset이라는 개념이 잡히기 전에는 *으로 초기화하는 방법을 많이 사용했으나 전역으로 사용되는만큼 불필요한 렌더링이 발생해 최근에는 많이 사용되지 않는다. Eric Mayer의 reset.css를 많이 이용한다. CSS Tools: Reset CSS..

[CSS] 마진 겹침 현상(Margin-Collapsing)

마진 겹침 현상이란? 인접한 마진이 상쇄되는 현상을 말한다. 블록 요소에 한해서 좌우 방향은 적용되지 않고 오직 수직방향으로만 적용되며, 마진값이 0이더라도 상쇄 규칙은 적용된다. 또한 좌우 마진은 겹치더라도 상쇄되지 않는다. 이는 아래의 경우처럼 3가지 상황에서 발생한다. 1. 형제 박스요소 간에 상하 마진이 겹칠 때 div { background-color: tomato; width: 100px; height: 100px; } .d1 { margin-bottom: 60px; } .d2 { margin-top: 30px; } 위와 같을 때, 생각대로라면 d1과 d2에 각각 margin-bottom과 margin-top을 주었으니 전체 margin이 90px이 되어야 할 것같지만 그렇지 않다. 형제 블록..

신입 FE 개발자가 되려면 무엇을 학습해야 할까?

https://jbee.io/essay/for_junior_frontend_developer/ 신입 프론트엔드 개발자가 되려면 무엇을 학습해야 하나요? 얼마 전, 제 발표를 들은 어떤 한 대학생에게 질문을 받아서 주저리 주저리 써내려가다가 통째로 올렸습니다. 피드백은 환영입니다. TL;DR 아래 Step은 학습 순서와는 전혀 상관이 없으며 단계별로 jbee.io 좋은 글! 아직도 한참 멀었다는 것을 느낀다. 올라온 지 좀 된 글이지만 그래도 공부 방향 잡는 데에는 도움이 될 거라고 생각해 간단히 정리해봤다. Step 1. Git / Github ES6 Javascript의 동작원리 DOM API and Concept NPM Webpack HTML/CSS 기본 CSS Media Query Step 2. 자..

[HTML] HTML img 태그에 alt 속성값을 넣어줘야 하는 이유

새 프로젝트의 html을 짜기 위해서 다른 웹사이트들의 html 구조를 살펴보고 있었는데 보통 태그 안에 태그를 넣고 거기에 alt 속성값을 적어놓은 것을 발견했다. 전에는 alt는 써본적이 없었기 때문에 굳이 왜 써주는 것인지 찾아보았다. 보통 이미지 태그는 아래와 같다. 먼저 img폴더 안에있는 google.png파일을 불러왔고, alt로 로고라는 설명을 덧붙였다. 이번에는 이미지 경로를 틀린 경로로 바꿔보았다. 이미지가 깨졌지만 alt 속성에 써놓은 "로고"라는 텍스트가 나오는 것을 볼 수 있다. 이처럼 만약 서버에 문제가 생겼다든지 이미지에 문제가 있을 경우 이미지가 엑박으로 뜰 수 있다. 이 때 이미지 대신 해당 메뉴가 무엇인지 알 수 있게 해주는 것이 alt 속성이다. (그리고 이 alt값은 ..

[JS] 자바스크립트로 모멘텀(Momentum) 만들기

바닐라 자바스크립트를 이용해서 모멘텀을 만들어보았다. 시계, 사용자 이름 기억, 투두 리스트, 명언, 날씨 등의 기능을 넣었다. 그 중 투두리스트 구현 부분의 코드를 아래 가져와봤다. 전체 코드는 아래 깃허브에서 https://github.com/Seohyun-Roh/vanilla_JS GitHub - Seohyun-Roh/vanilla_JS: HTML, CSS, and JavaScript로 만든 Momentum입니다. HTML, CSS, and JavaScript로 만든 Momentum입니다. Contribute to Seohyun-Roh/vanilla_JS development by creating an account on GitHub. github.com index.html todo.js 전체 코드..

[JS] filter 함수란?

Array.prototype.filter() filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환 arr.filter(callback(element[, index[, array]])[, thisArg]) 매개변수 callback: 각 요소를 시험할 함수. true 반환 시 요소 유지, false 반환시 버림. 다음 세가지 매래변수를 받음. element: 처리할 현재 요소 index(Optional): 처리할 현재 요소의 인덱스 array(Optional): filter를 호출한 배열 thisArg(Optional): callback을 실행할 때 this로 사용하는 값. 반환 값 테스트를 통과한 요소로 이루어진 새로운 배열. 어떤 요소도 테스트를 통과하지 못했으면..