반응형 개발 지식 A+/FE13 webpack 환경 설정 우선, webpack 을 공부하게 된 것은 Three.js 패키지를 사용하기 위함이었다. 하지만 React를 구동할 때도 사용되는 것을 알게되고 공부할 필요성을 느꼈다. 공식문서를 참고해서 정리하였다. Why webpack module? webpack 정적 모듈 번들러이다. JS 모듈을 컴파일할 때 사용됨. bundler 여러 파일을 브라우저에서 로딩하는 것은 네트워크 비용 측면에서 부담이 크다. 이에, 여러개의 assets (js, css, png, jpg) 를 웹브라우저가 이해할 수 있는 번들로 묶고 패킹할 수 잇는 번들러 기술이 소개된다. 이제서야, 2가지가 이해되었다. React 개발 시 package.json "scripts" 에서 npm start 와 같은 키워드를 사용하지 않는지, "star.. 2021. 1. 9. React 공식문서 쉽게 공부하기 이제까지는 HTML + CSS + Vanilla (순수) JS 로 공부를 해왔다. 하지만, 최근 웹페이지는 유저와 많은 상호작용이 존재한다.즉 DOM 상태 관리가 필요하다. 이에, 편리한 (Fontend) JavaScript Library를 소개한다. 아래 목차는 공식 문서를 토대로 작성했다. 상세히 읽고 codesandbox에서 실습해보면서 재밌게 공부하였다. What is React 특징 & 장점 Component ( 하나의 의미를 가진 독립적인 단위 모듈 ) 개념에 집중한다. 어찌보면 Customizing HTML tag를 작성한다는 느낌이 든다. 직관적이고 재사용성이 높아진다. 유저와의 상호작용에 유리하다. state, props 변수를 통해 데이터를 관리한다. View Layer (of MVC .. 2021. 1. 2. [JS] 비동기 동작 스케줄링 방법 3가지 웹서비스 개발을 하면서 비동기 작업은 불가피하다. 파일 로딩 (Input/ Output), 네트워크 요청(유튜브 스트리밍 로딩), 시간의 흐름에 따른 애니메이션 등 상황은 다양하며 fs.readFile, requestAnimationFrame, setTimeout, fetch(browser), http(node.js) 등의 메소드들로 구현이 가능하다. 이 포스팅을 통해 비동기 스케줄링을 이해하는 시간이 되었으면 한다. Asynchronous 비동기란? sync[씽크]를 맞춰! 우리는 sync라는 단어가 익숙하다. "영화를 다운 받고, 자막과 영상의 씽크를 맞춘다", "나랑 부모님은 싱크로율 100%" 라는 표현을 자주 사용하기 때문이다. 그 어원에서 출발한 Synchronous는 동기식, Asynchro.. 2020. 12. 22. [JS] 객체 지향 프로그램 컴퓨터 프로그램을 여러개의 독립된 단위, "객체"들의 모임으로 파악하고자 하는 프로그래밍 패러다임 by 위키백과 프로그래밍 패러다임 프로그래밍 스타일에 대한 이론적 개념으로 그 중 3가지를 소개하겠다. 절차 지향 프로그래밍(Procedural) 순차적 처리에 초점 객체 지향 프로그래밍 (Object-Oriented) 기능별로 필요한 데이터(=속성)와 행위(=메소드)를 하나의 덩어리(=객체)로 묶어서 진행한다. 함수형 프로그래밍 함수를 수행해도 함수 외부 값이 변경되는 것을 지양. 단순히 출력되는 what에 초점. JavaScript는 Prototype 기반의 객체 지향 언어인데, OOP 디자인으로 구현 가능하도록 많은 발전이 있었다. OOP (Object-Oriented Programming) 기본 구성.. 2020. 12. 10. 이전 1 2 다음 반응형
