분류 전체보기30 [STUDY] 컨텍스트 Context Context를 이용하면 component 마다 props로 데이터를 넘겨주지 않고도 component 트리 전체에 데이터를 전달 혹은 받을 수 있습니다. * Context를 통해서 데이터를 전역으로 다룰 수 있지만 비슷한 유형의 Redux 나 Mobx가 실무에서 많이 쓰이고 있습니다. 공식 문서에서도 규모가 큰 프로젝트에서는 사용하지 않는 것을 권장하고 있습니다. Context를 사용해서 UI테마나 location에 따른 언어 설정 같은 정보를 components간 props로 전달 하는 것이 아니라 공유하게 할 수 있습니다. 위의 예시 처럼 context를 사용하면 중간에 있는 엘리먼트들에게 props를 넘겨주지 않고 공유하고 있는 전역객체인 context에서 받아서 사용할 수 있습니다.. 2021. 3. 13. [STUDY] 에러 경계 에러 경계란 * 과거 리액트는 컴포넌트 내에서 발생한 에러를 정상적으로 처리 할 수 있는 방법을 제공하지 않아 이를 복구 할 수 없었습니다. 에러 경계는 새로운 컴포넌트나 자바스크립트 라이브러리가 아닌 리액트 컴포넌트 내부에서 발생하는 에러를 다루기 위한 전략적인 방법이라고 할 수 있습니다. 참고자료: https://www.digitalocean.com/community/tutorials/react-error-boundaries 에러 경계 in React UI 일부분에서 발생하는 자바스크립트 에러가 전체 애플리케이션을 중단해서는 안되기 때문에 React 16버전에서 에러경계라는 새로운 개념이 도입되었습니다. 자바스크립트 에러가 난 컴포넌트 대신 폴백 UI ( 사용자 설정 가능 ) 를 보여줍니다. * 에러.. 2021. 3. 12. [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. 신입 프론트엔드 개발자의 첫 3개월 [2편] 지난 편에 이어서 중요도가 높은 2가지의 사이드 프로젝트를 기록해보고자 한다. 프론트엔드 개발자로 입사를 했지만 부끄럽게도 프론트엔드의 프자도 몰랐다.. 특히 자바스크립트라는 언어와 리액트와 같은 대세 프론트엔드 라이브러리를 제대로 사용해본 적이 없기에 이에 대한 갈급함이 매우 컸다. 사이드 프로젝트로 리액트 애플리케이션을 만들어 개발 실력을 키우자라는 마음을 먹었다. 회사에는 커피 및 다양한 음료를 무료로 제공하는 카페가 있는데 바쁜 시간에는 사람들이 많이 붐벼 대기를 해야 했다. 순간, 주문을 간편하고 쉽게 할 수 없을까라는 생각이 들었고 스타벅스의 사이렌 오더 처럼 우리 회사만의 사이렌 오더 애플리케이션을 만들어보면 잼있겠다는 생각에 사로잡혔다. 본격적으로 사이렌 오더 애플리케이션에 대해 기록하기 .. 2020. 11. 14. 신입 프론트엔드 개발자의 첫 3개월 [1편] 지난 3개월을 되돌아보면 나는 과연 잘 살았다고 할 수 있을까? n개월의 수습기간을 거쳐야 정직원이 되는 보통의 IT회사와 같이 내가 입사한 회사에서도 3개월의 수습기간이 주어졌다. 그리고 11월 11일, 장그래의 시간은 끝났고 정식으로 회사의 한 일원이 되었다. 나는 지난 3개월 동안 열심히 살았다고 생각한다. 하지만 무의미하게 시간을 보냈다는 대조적인 생각이 들기도 한다. 개발자로서 크게 성장을 했다고 느끼면서 동시에 성장을 하지 못했다고 느낀다. 회고록을 적으면 이에 대한 답을 찾을 수 있을까? 수습기간에는 수습 과제에만 집중하는 기존 문화와 달리 투입된 팀의 서비스가 대외적으로 유명세를 얻으면서 개발 일손이 부족해지기 시작하자 수습 과제를 업무로 대체하였다. 해당 팀에서는 webRTC를 기반으로 .. 2020. 11. 14. 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. 이전 1 2 3 4 다음
