Web25 [STUDY] 코드분할 번들링 대부분의 리액트 앱들은 Webpack, Rollup 또는 Browserify 같은 툴을 사용하여 여러 파일을 하나로 병합한 "번들 된" 파일을 웹 페이지에 포함하여 한 번에 전체 앱을 로드 할 수 있습니다. * Webpack 은 의존된어 있는 모든 자바스크립트 파일을 하나로 묶어 번들링 한다. 이미지, 폰트, 스타일시트 같은 비 자바스크립트 파일은 로더를 이용하여 변경한다. 참고 자료 : https://jeonghwan-kim.github.io/js/2017/05/15/webpack.html 코드 분할 번들이 거대해지는 것을 방지하지 위해 코드 분할을 한다. 코드 분할은 런타임에 여러 번들을 동적으로 만들고 불러오는 것이며 위에 언급한 번들러 툴이 지원하는 기능이다. import() 동적으로 im.. 2021. 3. 10. [STUDY] 접근성 1. 접근성 접근성이란? 접근성 ( 별칭 a11y ) 은 쉽게 말해 모두( 몸이 불편한 사람 포함) 가 사용할 수 도록 웹사이트를 디자인, 개발 하는 것을 의미합니다. ios에서는 한글 해석을 손쉬운 사용 이라고 정의했습니다. * A11Y 란 ? Accessibility를 뜻하며 단어가 너무 길기 때문에 처음과 마지막의 알파멧을 남겨두고, 가운데의 열한 글자를 숫자로 대치 한 것이다. 참고자료 https://brunch.co.kr/@gokeshi/1 장애인들이 쓰는 기능인가? NO 이자 YES 라고 할 수 있습니다. 접근성은 '모든 유형의 인간'이 포함되어 있습니다. 스마트폰, 스마트 워치, 태블랫 등의 portable devices 를 사용 할 수 있는 모든 사람이 target이 되는 것입니다. 그들의.. 2021. 3. 9. [Drag and Drop API] 드래그 엔 드롭 기능 개발 기록 자바스크립트 드래그 엔 드롭 이벤트를 다루어 볼 수 있는 좋은 기회가 찾아 왔다. 실제 회사 서비스에 도입 하기 전, 테스트 겸 해당 기능을 갖춘 UI를 퀵퀵퀵(?) 하게 만들어 보고 싶었지만 난 "신입 개발자야" 티를 내듯 별것 아닌 기능에 생각보다 많은 고민과 시간을 투자했다. 어쨋든, 혼자서 구현해본 이 작은 기능이 내부적으로 어떻게 돌아가게 만들었는지 공유하고 싶어졌다. 로직 해당 기능의 로직을 포인트로 간단하게 적어보자면 1. 자바스크립트가 load 되면 selector를 이용해 id가 app인 HTML 요소를 App이라는 함수의 인자로 넘겨 해당 함수 scope 에서 사용할 수 있게 만든다. 2. 넘겨 받은 인자를 부모로 기본 UI를 렌더링 하고 드래그 엔 드롭 이벤트를 바인드 시켜준다. 3... 2021. 1. 31. application/www-form-urlencoded vs multipart/form-data 웹에서 파일을 서버로 보내기 위해서는 multipart/form-data 값을 반드시 써야한다. 그렇게 하지 않으면 웹서버에서는 파일명만 받을 수 있기 때문이다. Note enctype : 전송되는 데이터의 인코딩 형식을 설정 enctype 속성은 3가지 방법으로 지정될 수 있다. application/www-form-urlencoded /* 디폴트 값 */ 폼데이터는 서버로 전송되기전에 URL-Encode 처리 됨 multipart/form-data 파일을 업로드 할 때 사용됨 text/plain 인코딩을 거치지 않은 문자 상태로 전송됨 Note form-data: 브라우저가 난수로 이루어진 {boundary string} 값을 생성해준다. 예시: -----WebkitFormBoundaryFIfNduf.. 2020. 9. 15. [STUDY] 리액트의 기본 개념 1. ReactDOM ReactDOM.render( Hello, World!, document.getElementById('root') ); ReactDOM 은 DOM 상호작용을 하는 메소드들을 모아놓은 패키지 입니다. 주로 리액트 엘리먼트의 삽입이나 업데이트와 관련이 있습니다. render() 리액트와 DOM이 가장 처음 상호작용을 하는 메소드. 사용자가 직접 라는 리액트 엘리먼트를 정의했다고 했을때, 컨테이너로 작용 할 엘리먼트가 ID 값 container라면 다음과 같은 예시로 사용자 정의 리액트 엘리먼트를 컨테이너안에서 렌더링 할 수 있습니다. ReactDOM.render(, document.querySelector("#container")); NOTE: 만약 사용자 리액트 엘리먼트가 이미 div.. 2020. 9. 8. MQTT가 알고싶다 MQTT 프로토콜을 기반으로 만들어진 자사의 서비스 애플리케이션을 시작으로 MQTT에 대한 궁금증이 생겨났다. 다짜고짜 구글링을 해보았다. 그 결과, IOT 관련 최고의 네트워크 프로토콜 중 하나라고 하는 글들을 여럿 보았다. 네트워크를 통해 메시지를 주고 받아야하는 device에서 사용하기 유용하다고 한다. 왜? 어떻게?.... 궁금증이 증폭됬다. MQTT MQTT는 1999년 IBM과 Eurotech에 의해 개발되었으며, 저전력 배터리나 네트워크 상태가 좋지 않은 제한적인 환경에서 동작하게 하기 위한 용도로 만들어 졌다. 때문에 낮은 전력과 낮은 대역폭 환경에서 사용 할 수 있도록 설계 되었고 이러한 점 때문에 IoT device에서 사용하기 유용하다고 한다. 풀네임으로는 Message Queue f.. 2020. 9. 2. Virtual DOM 을 왜 빠르다고 하는가 리액트가 좋대, 리액트가 빠르대... virtual DOM 때문에 속도가 빠르다더라. 라는 주변인들의 소리에 리액트에 관심이 간 건 사실이다. virtual DOM은 무엇이고 왜 필요한지 명확히 짚어 보고 나아가기로 했다. virtual DOM은 리액트가 만들어낸 개념은 아니지만 리액트로 인해 활성화된 개념이라고 할 수 있다. virtual DOM은 말 그대로 가상 DOM이다. ( 가상이라니...? 그럼 DOM이 현실?.. &@&@& ) 이 virtual DOM이 무엇인지 알기 위해서는 먼저 DOM이 무엇인지 알아야 하고 DOM을 이해하기 위해서는 웹페이지가 만들어지는 과정을 알아야 한다. 웹페이지가 만들어지는 과정 // 웹 페이지가 만들어지는 과정 보러 가기 DOM 노드를 건들게 되면 리플로우/리페인트.. 2020. 6. 11. 이전 1 2 3 다음
