본문 바로가기

프론트엔드

Sass 정리! 타입스크립트로 토이프로젝트를 하기에 앞서서 프로젝트에 Sass를 적용하고자 학습하는 시간을 가졌다. Sass? Sass만의 문법으로 작성된 Style sheet를 css로 변경해주는 변환 엔진 컴파일러이다. Sass 를 쓰는 이유 프로젝트 규모가 커지면 css를 관리하기가 매우 복잡해지는데 Sass를 사용하면 css코드의 중복을 줄이고 유지보수가 용이해진다. Sass의 확장자 .scss .sass 이렇게 두가지가 있다. 둘의 차이는 간단하다. 중괄호와 세미콜론의 유무 Mixins 기능 사용방식이 다르다. 아무래도 나는 중괄호가 있는 css가 익숙하니 scss로 학습해야겠다. 사용하기 npm i install node-sass로 설치해서 사용하는 방법만 알고 있었는데 vscode에서 익스텐션으로 제공해주고.. 더보기
리액트에서 lottie 적용해보기 Lottie.js 안드로이드 웹 등에서 코드로 애니메이션을 만들 수 있도록 하는 라이브러리이다. 모션 그래픽 효과를 줄 때 gif를 갖다 쓰는게 아니고 코드로 만들 수 있다. (에어비앤비에서 만들었다고 한다..!) 필요 사전 지식 : HTML, CSS, JS, After Effect 시작하기 제대로 하려면 다음과 같이 몇가지를 설치해야한다. 1. 애프터 이펙트 2. ZXP 인스톨러 3. 바디무빈 익스텐션 https://aescripts.com/learn/zxp-installer/ https://github.com/airbnb/lottie-web/tree/master/build/extension 하지만 나는 디자이너가 아니라서 저런 툴은 모르기때문에 패스하고 진행했다. js 와 리액트만 조금 알면 할 수 .. 더보기
var를 쓰면 안되는 이유 es6 (es 2015)가 등장하기 이전에는 자바스크립트에서 변수를 선언하기 위한 방법은 var 밖에 없었다. let과 const는 es6에서 등장했다. let, const : 블록 스코프 var : 함수 스코프 var에는 다음과 같은 문제들이 있다. 1. 함수스코프 함수스코프이기 때문에 다음과 같은 문제가 있다. function abc() { for(var i=0;i 더보기
웹팩 서버 정리 웹팩 서버 웹팩 서버는 프론트엔드 개발환경에서 개발용 서버를 제공해준다. 웹팩을 통해 빌드한 파일들을 정적인 형태로 제공해주는 서버인 것이다. 사용법은 아래와 같다. 우선 웹팩 서버를 설치한다. npm i webpack-dev-server 설치한 뒤에 npx webpack serve 명령어를 입력하여 서버를 띄울 수 있다. 포트 기본값은 8080인듯하다. 8080포트에 서버를 열면서 설정에 따라서 해당 폴더 내에 있는 정적 파일들이 올라간다. 그럼 이제 해당 웹팩 설정에 포함되는 코드를 변경하면 바로바로 반영하여 브라우저에 보여준다. contentBase는 파일을 올릴 대상의 폴더이름이다. dist라고 설정이 되어있으니 dist 폴더 내의 파일들이 올라갈 것이다. overlay를 true로 설정하면 에러.. 더보기
바벨, 린트 간단 정리 바벨 ES 2015+에서 작성한 코드에 더해서 타입스크립트, JSX 코드들도 모든 브라우저에서 동작하도록 도와주는 도구이다. 바벨은 이러한 것을 어떻게 해주는 것일까? 바벨의 동작과정은 다음과 같다. 입력받은 코드를 파싱 🤜 변환 🤜 결과물 출력 바벨은 코드를 입력받아 변환시킨 코드를 반환해주는 친구이다. 코드를 변환해주는 작업은 사실 플러그인이 담당한다. 플러그인을 설치하고 바벨을 사용해보자 const a = a => console.log(a); const 가 var 로 바뀌었다. block-scoping 플러그인이 동작한 결과이다. 블록 스코핑을 따르는 변수 const let 등을 var로 바꿔주는 플러그인이다. 매번 이렇게 하기엔 귀찮으므로 webpack.config.js 처럼 바벨도 config .. 더보기
웹팩 간단 정리 웹팩 왜 쓰나? 보통 자바스크립트 코드를 html에 넣을땐 태그를 이용한다. 만약 file.js에서 a 라는 변수를 선언했으면 a 변수는 어디서든 접근 가능하게 된다. 그렇기 때문에 전역 스코프가 오염되지 않도록 하기 위해서는 자바스크립트 모듈 시스템을 사용해야한다. 일부 브라우저에서는 script 태그에 type="module" 이라고 줌으로써 모듈 시스템을 이용한다. type="module" 이라고 해줌으로써 브라우저가 main.js는 모듈 시스템을 이용한다고 알게끔해주고 이제 main.js 에서는 import 해오는 것이 가능하게 된다. 참고로 export default가 아닌 그냥 export 들은 { } 로 감싸야한다. nodejs 에서는 require과 exports로 가능하고 ES2015에서.. 더보기
함수형 프로그래밍2 - 추상화 레벨 높이기 이미지 로딩 이전의 실습에서 이미지가 로딩 될때 굉장히 버벅거렸는데 이러한 부분들을 개선해볼 것이다. 이미지가 로딩이 다 되면 화면에 렌더링되도록 코드를 작성해보자. _.go( Images.fetch(), Images.tmpl, $.el, $.append($.qs('body')), _.tap( $.findAll('img'), L.map(img => new Promise(resolve => { img.onload = () => resolve(img); // onload img.src = img.getAttribute('lazy-src'); })), _.each($.addClass('fade-in')) ), $.findAll('.remove'), $.on('click', async ({currentTarge.. 더보기
함수형 프로그래밍2 - 프론트단에서 응용 https://www.inflearn.com/course/%ED%95%A8%EC%88%98%ED%98%95_ES6_%EC%9D%91%EC%9A%A9%ED%8E%B8f 를 수강하며 내용을 정리한 글입니다. 이미지 받아와서 화면에 뿌리기 서버에서 이미지를 받아와서 화면에 뿌려주는 코드 작성해본다. const Images = {} Images.fetch = () => new Promise(resolve => setTimeout(() => resolve([ { name: "HEART", url: "https://s3.marpple.co/files/m2/t3/colored_images/45_1115570_1162087.png" }, { name: "하트", url: "https://s3.marpple.co/f1/.. 더보기
함수형 프로그래밍2 - 명령형에서 선언형으로 이터러블 프로그래밍 홀수 n개 더하기를 명령형으로 구현해보면 아래와 같이 효율적으로 가능하다. function f1(limit, list) { let acc = 0; for(const a of list) { if(a % 2) { const b = a * a; acc+=b; limit--; if(limit == 0) break; } } return acc; } let a= f1(3, [1,2,3,4,5,6,7,8,9,10]); console.log(a); 위의 코드를 한번 생각해보면 이터러블한 객체를 순회하며 특정 조건에 부합할 때(filter) 값을 조작하여(map) 결과를 만들어내는데(reduce) 특정 조건에서 break문을 통해 빠져나오고 있다.(take) 이를 적용해서 코드를 아래와 같이 바꿀 수.. 더보기
this 와 클로저 this this가 필요한 이유? 👉 특정 함수를 여러 객체에서 사용할 수 있기 위해서이다. this는 해당 함수를 실행한 객체를 가리키기 때문에 this를 활용하면 여러 객체가 호출하여 사용할 수 있게 해준다. this를 제어하는 방법. >> this에 할당되는 객체를 원하는대로 지정하는법 Call 함수.call() 하면서 첫번째 인자로는 객체를 넘김 그러면 해당 함수내의 this는 첫번째 인자 객체의 this 이다. apply 함수.apply() 하는데 call과 동일하게 첫번째 인자는 객체 그리고 두번째 인자는 배열로 넘겨줌. 위 두개는 다시말해 this에 할당되는 객체를 지정할 수 있다.! bind 객체를 전달하면 메소드의 this는 해당 객체로 고정됨. Arrow function arrow fu.. 더보기