javascript42 맥북 초기 세팅 기록 맥북 세팅 1.홈브루 설치 홈브루 홈페이지 들어가서 커맨드 붙여넣기 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" (설치할 때 Xcode command Line 설치하냐고 물어보면 엔터눌러서 설치하고 터미널에 echo ~~ 이런거 복붙함) 2.필요한 패키지 및 어플리케이션 설치 Brew install —cask 하면 맥용 어플리케이션을 설치할 수 있음 brew install —cask visual-studio-code google-chrome slack iterm2 Brew install 하면 패키지 설치 가능 Brew install node 로 node 설치 brew instal.. 2023. 8. 15. scrollIntoVeiw로 스크롤 항상 아래로 유지하기(+ 키보드 Enter 이벤트) 웹 개발을 하다 보면 스크롤을 제어해야 하는 경우가 있습니다. 졸업 프로젝트로 모바일 웹앱을 만드는 도중에 해쉬태그를 그리드 형식으로 입력받는 ui를 구현하였습니다. 키보드 이벤트를 붙여서 해쉬태그를 입력 받는데 여러개의 해쉬태그를 입력 받다 보면 input 태그가 스크롤 아래로 숨겨지는 현상이 있었습니다. input 창이 내려갈 때마다 유저가 스크롤을 내려 input 창을 화면에 보이게 제어하는 것은 좋지 않은 사용자 경험이라 생각하여 webAPI의 scrollIntoView를 사용하여 input 태그에 스크롤이 따라 내려가게 구현하였습니다. https://developer.mozilla.org/ko/docs/Web/API/Element/scrollIntoView element.scrollIntoVie.. 2022. 6. 30. [11주차 스터디]49장-Babel과 Webpack 이요한 ES6+/ES.NEXT 개발환경 구축 Babel과 WebPack을 이용한 ES6+/ES.NEXT 개발 환경 구축 매년 새롭게 도입되는 ES6이상의 버전(ES6+)과 제안 단계에 있는 ES 제안 사양(ES.NEXT)은 브라우저에 따라 지원율이 제각각 따라서 최신 사양으로 프로젝트를 진행하려면 구형 브라우저에서 문제 없이 동작 시키기 위한 개발환경을 구축하는 것이 필요하다. 대부분의 프로젝트가 모듈을 사용하므로 모듈 로더도 필요하다. 다음과 같은 이유로 ESM 보다 별도의 모듈 로더를 사용하는 것이 일반적 IE를 포함한 구현 브라우저는 ESM을 지원하지 않는다. ESM을 사용하더라도 트랜스 파일링이나 번들링이 필요한 것은 변함 없음 ESM이 아직 지원하지 않는 기능(bare import 등..)이 존재 Babel Babel은 트랜스 파일링 도구.. 2022. 4. 8. [11주차 스터디]48장-모듈 모듈 모듈의 일반적 의미 모듈(module)이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다. 일반적으로 모듈은 기능을 기준으로 파일 단위로 분리 이때 모듈이 성럽하려면 모듈 자신만의 파일 스코프(모듈 스코프)를 가질 수 있어야 함 자신만의 파일 스코프를 갖는 모듈은 기본적으로 비공개 상태 즉, 모듈내부의 변수, 함수 객체 등 모두 캡슐화 되어 다른 모듈에서 접근할 수 없다. 그러나 모듈은 애플리케이션이나 다른 모듈에 의해 재사용 되어야 의미가 있음, 따라서 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개가 가능 하다. 이를 export라고 한다. export된 모듈은 다른 모듈에서 재사용 가능하고, 이때 공개된 모듈은 사용하는 모듈을 모듈 사용자(module consu.. 2022. 4. 8. [11주차 스터디]47장-에러 처리 에러 처리 try ... catch ... finally 에러 처리 구현하는 방법은 크게 두가지 예외 적인 상황이 발생 시 반환 하는 값을 if 문, 단축 평가, 옵셔널 체이닝 등으로 직접 확인하는 방법 에러 처리 코드를 미리 등록해 두고 에러가 발생하면 에러 처리 코드로 점프하도록 하는 방법 try ... catch ... finally 는 두번 째 방법 3개의 코드 블록으로 구성 try { // 실행 할 코드(에러가 발생할 가능성이 있는 코드) } catch (err) { // err 변수명은 다른 거 해도 됨 // try 코드 블록에서 에러가 발생하면 이 코드 블록의 코드가 실행 된다. // err에는 try 코드 블록에서 발생한 Error 객체가 전달된다. } finally { // 에러 발생과 .. 2022. 4. 8. [11주차 스터디]46장-제너레이터와 async / await 제너레이터와 async/await 제너레이터란? ES6에서 도입 된 제너레이터는 코드 블록의 실행을 일시 중지 했다가 필요한 시점에 재개할 수 있는 특수한 함수 입니다. 일반 함수와의 차이 제너레이터 함수는 함수 호출자에게 함수 실행의 제어권을 양도할 수 있다. 이때 함수의 제어권을 호출자에게 넘기는 것을 양도(yield)라고 함 제너레이터 함수는 함수 호출자와 함수의 상태를 주고 받을 수 있다. 제너레이터 함수는 함수 호출자에게 상태를 전달할 수 있고 함수 호출자로 부터 상태를 전달 받을 수도 있다. 제너레이터 함수를 호출하면 제너레이터 객체를 반환한다. 제너레이터 함수를 호출하면 함수 코드를 실행하는 것이 아니라 이터러블이면서 동시에 이터레이터인 제너레이터 객체를 반환한다. 제너레이터 함수의 정의 제.. 2022. 4. 8. 이전 1 2 3 4 ··· 7 다음
