Web Front End
[러닝자바스크립트] 2장. 자바스크립트 개발 도구
프로젝트 구조 .git # git es6 # 노드 소스 dist public/ # 브라우저 소스 es6/ dist/자바스크립트 개발도구 Git 연결 및 Commit 빌드 도구(gulp) 설치 gulp: 개발 과정에서 도움이 되는 개발 의존성 도구 트랜스컨파일러(babel) 설치 babel: ES5 --> ES6, ES6와 리액트, ES7 등을 지원하는 범용 트랜스컴파일러 babel과 gulp 함께 사용하도록 설정 gulpfile.js에 파이프로 연결 ESLint 설치 ESLint: 코드를 검토해 자주 일어나는 실수를 알려주는 프로그램.
[러닝자바스크립트] 1장. 첫번째 애플리케이션
See the Pen vYOKNwr by choisohyun (@choisohyun) on CodePen.
[러닝 자바스크립트] 14장. 비동기적 프로그래밍
14장. 비동기적 프로그래밍 목차 개요 콜백 프라미스 제너레이터 1. 개요 자바스크립트: 단일 스레드로 동작함(한 번에 한 가지 일만 가능) 부드럽게 동작하는 소프트웨어를 위해 비동기적 관점에서 문제를 생각해야 함 자바스크립트 비동기적 프로그래밍의 패러다임 콜백 Promise 제너레이터 제너레이터 자체는 비동기적 프로그래밍을 지원하지 않음 비동기를 사용해야 하는 경우 Ajax 호출을 비롯한 네트워크 요청 파일을 읽고 쓰는 파일시스템 작업 의도적으로 시간 지연을 사용할 때 (알람 기능) Callback과 Promise 음식점으로 비유하기 Callback : 줄을 서서 기다리지 않도록, 자리가 나면 전화를 해주는 음식점 Promise : 자리가 났을 때 진동하는 진동벨을 넘겨주는 음식점 2. 콜백 자바스크립..
[CSS] transitionend Event
transitionend Event란? transition이 완료된 이후에 발생하는 이벤트, transition 완료를 감지한다. transition과 함께 사용하는 함수 addEventListener를 사용하여 이벤트 모니터링 가능 예제 testDiv 의 콘텐츠에 마우스를 hover했을 때 2초 동안 원래 크기보다 1.1배 커지게 만든다.(transition) transition이 끝나면 이를 감지하고 "이것은 테스트 텍스트입니다.." 라는 텍스트가 보이도록 한다.(transitionend) .testDiv { transition: 2s; } .testDiv:hover { transform: scale(1.1); } const test = document.querySelector(.testDiv); t..
내가 프론트엔드 개발자가 되고 싶은 이유
몇 달 전에도 이런 질문을 받은 적이 있고 며칠 전에도 이런 질문을 받았다. 두 번의 같은 질문에 나는 명확한 답변을 하지 못했다. 처음에는 내가 이 직업에 대해 잘 몰라서라고 생각하고, 두 번째에는 내 길이 맞나? 하는 의문이 들어서였다. 이리저리 생각해 본 결과, 내가 프론트엔드 개발자에 도전한 이유를 3가지로 추릴 수 있었다. 학교연계 실습으로 웹페이지를 만져 보면서 기능을 추가해 본 적이 있는데 그 때 재미있었다. 지금 와서 다시 돌아보면 나는 브라우저 랜더링 과정도 제대로 이해하지 못하고 마구잡이로 모든 걸 했었다. 웹페이지제작기초라는 교양 수업이 재미있었고, 정량적인 결과도 얻었었다. 코드스쿼드 과정으로 보면 하루 진도를 한 학기에 나간 거였지만 내가 기획서까지 짜고 만들어본 웹페이지를 만들 ..
[CSS] requestAnimationFrame vs transform/transition
requestAnimationFrame vs transform/transition rAF transform 성능 비교적 느림 비교적 빠름 사용되는 상황 세밀한 조작이 필요한 경우 2개 이상의 애니메이션을 동작시킬 때 간단하고 규칙적인 경우 구현 방법 setTimeout의 비정확한 시간 반복에 대한 대안 재귀 호출 사용 애니메이션 처리를 빠르게 하기 위해 GPU 가속 속성 사용 두 개를 같이 구현했을 때에는 transition으로 만든 애니메이션이 더 자연스럽게 동작하는 것을 볼 수 있었다. See the Pen JjdGOqv by choisohyun (@choisohyun) on CodePen. 애니메이션 생성 시 가능한 CSS transition/animation을 사용하는 것이 좋다. 애니메이션이 너..