본문 바로가기

웹 프론트엔드17

웹 개발 시 React 를 선택해야하는 이유 ES6 문법을 익히고나서 React를 공부하기 위해 포스팅을 시작하게 되었습니다. 기본적인 React에 대한 설명과 앱을 설치하고 실행해보는 방법에 대해서 설명하도록 하겠습니다. 1. React 란? React는 페이스북에서 제공하는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리이다. React 는 왜 프레임워크가 아니라 라이브러리일까? React 는 왜 프레임워크가 아니라 라이브러리일까? React에 관한 글을 작성하다가 React는 왜 라이브러리일까? 그리고 프레임워크와 라이브러리의 차이점은 무엇일까? 에 대한 해답을 얻기위해 포스팅을 작성하게 되었습니다. 1. React 는 프레임워크 canoe726.tistory.com 2. 그렇다면 React 왜 써야 할까? React를 사용해 .. 2020. 9. 15.
웹 성능 향상을 위한 Throttle과 Debounce 개념부터 활용까지 저는 Javascript 웹 페이지 제작을 하면서 성능 향상을 위해 쓰로틀(Throttle)과 디바운스(Debounce) 기능이라는 것을 알게 되었습니다. 그에 대한 이해를 더욱 깊이있게 하고 배운 것을 공유하기 위해 포스팅 하게되었습니다. 두 가지 기능에 대한 개념부터 활용까지 한 번 알아보겠습니다. 1. 둘의 개념과 사용법은? 1) Throttle 이란? - 개념 : 여러 호출이 발생할 때 일정 시간이 지나기 전에는 기능이 호출 되지 않도록 하는 기능 - 사용예 : 무한 스크롤을 사용한 LazyLoading 기능을 구현할 때 사용, 스크롤로 인한 성능 저하 방지 Throttle을 적용하지 않으면 스크롤이 조금 움직일 때 마다 기능을 계속 호출하게 된다. 스크롤 이동시 많은 기능이 로드되어야 한다면 부.. 2020. 9. 7.
타입스크립트 설치 및 타입 정의해보기 이번 포스팅에서는 타입스크립트 소개와 간단한 사용법에 대해 알아보겠습니다. 1. 타입스크립트란? Javascript의 변수에 형(Type)을 부여해주고 그와 관련된 문법 검사를 해주는 것 특징 1) Javascript에 타입 기능을 추가하는것 (string, boolean, int 등) 2) 실시간 에러 처리 3) 오픈소스이며 정적타입 추가에 가장많이 사용되는 툴 4) 브라우저, OS에 독립적 5) .js 코드나 .ts 코드는 결과적으로는 동일하게 작동함 2. 왜 사용해야 할까? 1) Javascript에는 변수에 타입을 명시 할수있는 기능이 없다는 단점을 해결 가능함 ex) 함수나 변수명만으로는 그 타입을 한번에 알기 어렵다 2) 에디터에서 코드를 작성하면서 동시에 자동으로 문법오류 체크가 가능함 3... 2020. 8. 31.
Jest 시작해보기 Javascript 테스트 도구인 Jest에 대해서 학습하였고 그에 대해서 포스팅을 하였습니다. 1. Jest 란 무엇일까? Jest는 단순성에 초점을 둔 Javascript 코드 테스팅 프레임워크 입니다. 2. 왜 Jest를 써야할까? Javascript로 작성한 코드가 올바르게 작동하는지 테스트를 하기위해서 사용합니다. Jest 의 공식 홈페이지에 따르면, 문서화가 잘 되어있고 간단한 설정을 통해 테스트 요구사항을 달성할 수 있다고 합니다. 3. Jest 설치하기 Jest를 시작하기 전에 테스팅을 실행할 디렉토리에 package.json 파일을 생성합니다. npm init -y 그 후 Jest를 개발 의존성으로 설치합니다. npm install --save-dev jest 설치가 완료 되었으면 pac.. 2020. 8. 20.
일관성 있는 코드 포맷팅을 위한 ESLint 톺아보기 Javascript 소스코드를 더욱 정확하고 일관성 있게 작성하기 위해 도움이 되는 ESLint라는 도구가 있음을 알게 되었고 포스팅하게 되었습니다. 1. ESLint의 개념 우선, ESLint가 무엇인지 알기 전에 ES와 Lint에 대해서 알 필요가 있습니다. 1-1. ES란? ES는 ECMA Script 와 동일하며, ECMA Script란 ECMA-262 기술 규격에 정의된 표준화된 스크립트 프로그래밍 언어이다. 자바스크립트를 표준화하기 위해 만들어진 규격이다. 이 포스팅에서는 (ES = ECMA Script) => Javascript 언어를 가리킨다고 보면 됩니다. 1-2. Lint란? 린트(lint) 또는 린터(linter)는 소스 코드를 분석하여 프로그램 오류, 버그, 스타일 오류, 의심스러운.. 2020. 8. 19.
구조화된 CSS 작성을 위한 BEM (Block Element Modifier) BEM (Block Element Modifier) : CSS 를 효율적이고 빠르게 작성하기 위한 웹 개발 방법론 1. BEM 사용이유? BEM은 왜 사용해야 할까요? 보통 작은 웹 페이지를 구성할 때에는 CSS, SASS와 같은 방식을 사용해서 시작하게 됩니다. 하지만 점차 웹페이지가 커진다면, 하나의 CSS 파일로는 임의로 작성한 소스코드가 일관성을 유지하기 힘들게 되어 유지보수가 어렵게 될 것입니다. 2. BEM을 사용하면 생기는 이점 이점은 바로 성능과 효율성 입니다. 1) 코드 작성 시간이 줄어든다 : 모듈화 되어 한 번 잘 작성해놓으면 작성한 코드를 불러오면 됩니다. 2) 작성해야 하는 코드양이 줄어든다 : 중첩해서 CSS 코드를 작성할 필요가 없기 때문에 작성할 소스코드 양이 줄어듭니다. 3.. 2020. 8. 18.
웹 프론트엔드 로드맵 웹 프론트엔드 개발자가 되기 위해 공부해야하는 로드맵을 지인을 통해 알게 되었고, 저도 웹 프론트엔드 개발자가 되기 위해 로드맵에서 알지못하는 부분에 대해서 포스팅할 예정입니다. 웹 프론트엔드 로드맵 : https://github.com/devJang/developer-roadmap devJang/developer-roadmap 2020년 웹 개발자가 되기 위한 로드맵 :kr:. Contribute to devJang/developer-roadmap development by creating an account on GitHub. github.com 2020. 8. 17.
트랜스파일을 위한 바벨(Babel) 예제 만들어보기 VSCode 사용법을 익히면서 바벨의 사용법을 알 필요가 생겨서 알아보았고 개념과 사용법에 대해 공유하고자 글을 쓰게 되었다. 1. 바벨(Babel) 이란? - 바벨 공식 홈페이지 Babel · The compiler for next generation JavaScript The compiler for next generation JavaScript babeljs.io 공식홈페이지의 설명에 따르면 자바스크립트 컴파일러라고 한다. 컴파일러(compiler, 순화 용어: 해석기, 번역기)는 특정 프로그래밍 언어로 쓰여 있는 문서를 다른 프로그래밍 언어로 옮기는 프로그램을 말한다. 컴파일러 - 위키백과, 우리 모두의 백과사전 위키백과, 우리 모두의 백과사전. 컴파일은 여기로 연결됩니다. 일본의 기업에 대해서는.. 2020. 8. 13.

티스토리툴바