개발 이야기/front-end (18) 썸네일형 리스트형 Component Pattern | Context API 를 활용하자. Prop Drilling 참고: https://kentcdodds.com/blog/prop-drilling 하나의 컴포넌트를 여러 컴포넌트로 쪼개고, 쪼갠 컴포넌트에서 또 쪼개는 것. 하나의 컴포넌트에서 전부 다뤄지던 state가 props로 전달 된다. 깊이가 깊어질 수록 prop을 전달하는 과정이 드릴로 뚫고 들어가는 것 같아서 Prop Drilling이라고 한다. Card → CardContent, CardBottom CardContent → Title, Description, Thumbnail CardBottom → LikeButton, HateButton 좋은 점 한 컴포넌트 안에서 코드가 매우 길어지면 수정이 어려워진다. global로 변수를 관리할 때처럼 하나의 컴포넌트 안에 여러 state.. 리액트 번들 사이즈 최적화 Bundle Size 최적화 참고: https://dev.to/mbernardeau/6-tips-to-optimize-bundle-size-50n9 default import 사용 default import와 member style import(global import) 했을 때 가져오는 파일 사이즈가 다르다. // member style imports(global import): import { Row, Grid as MyGrid } from 'react-bootstrap'; import { merge } from 'lodash'; // default style imports: import Row from 'react-bootstrap/lib/Row'; import MyGrid from 'react-b.. css rendering - 기본 레이아웃 | CSS 속성은 사실 OO이다? CSS란? CSS(Cascading Style Sheets)는 종속형 스타일 시트 언어입니다. *마크업 언어의 스타일을 웹사이트에 표현하는 데 사용합니다. HTML 요소에 선택적으로 스타일을 지정할 수 있습니다. *마크업언어: 태그로 문서나 데이터 구조를 표시하는 언어 css로 엘리먼트에 float: left 속성을 주면 왼쪽에 배치됩니다. 'left 값을 주면 왼쪽에 배치된다'고 추상적으로 알고는 있지만, 우리는 실제로는 어떻게 배치가 됐는지는 알지 못합니다. 그래서 오늘은 평소에 당연하다고 생각했던 CSS 스타일이 어떤 과정을 거쳐 그려지고 있었는지 알아보려 합니다. 코드스피츠 css 렌더링 1-1 코드스피츠 css 렌더링 1-2 CSS 등장 배경 우리가 보는 화면은 픽셀들로 이루어져 있습니다. 이 .. 자바스크립트 이벤트 루프와 비동기 콜백 | how does javascript work? 대학생 때 이자카야에서 서빙 아르바이트를 한 적이 있었습니다. 식당에는 손님이 많지 않아 혼자 일 했습니다. 손님들이 오시면 테이블에 안내해드리고 주문을 받습니다. 그동안 또 다른 손님들이 옵니다. 몸이 두 개가 아니므로 첫번째 테이블을 응대하고 있는 동안 '두번째 테이블에 가야한다'는 작업을 머릿 속에 생각해둡니다. "event loop" 이와 비슷하게 자바스크립트는 싱글 스레드(single thread)로 동작합니다. 홀로 서빙하는 종업원처럼 많은 작업을 하나의 스레드로 처리한다는 뜻입니다. 하지만 제가 동시에 여러 일을 못하듯이 자바스크립트도 동시에 여러 작업을 할 수 없습니다. 그래서 만약 현재 제가 어떤 일을 진행 중이라면, 당장 다른 일은 못하지만 머릿 속에서 다음 할 일을 생각하는 것처럼 자.. [Browser] 브라우저가 화면을 그리는 법 Render Tree, layout, paint | Browser Rendering 이번 포스팅은 파싱에 이어 렌더 트리구축, 배치, 페인팅 단계에 대해 다룹니다. [Browser] 브라우저가 화면을 그리는 법#1 파싱 | Browser Rendering - Parsing 1990년대 초 World Wide Web을 시작으로 IE, Mosaic, Netscape 등 여러 브라우저가 나오면서 브라우저 시장은 춘추전국시대를 맞았습니다. *WordSideStory 데이터에 따르면 2002년에 IE는 약 95%의 사용점유율을.. another-light.tistory.com "렌더링 과정" 아래는 렌더링 엔진이 렌더링하는 과정입니다. 저번에는 parser를 통해서 파싱하고, DOM Tree를 구축하는 단계까지 알아보았습니다. 브라우저는 DOM 트리를 구축하면서 브라우저는 렌더 트리를 구축합니다.. [Browser] 브라우저가 화면을 그리는 법#1 파싱 | Browser Rendering - Parsing 1990년대 초 World Wide Web을 시작으로 IE, Mosaic, Netscape 등 여러 브라우저가 나오면서 브라우저 시장은 춘추전국시대를 맞았습니다. *WordSideStory 데이터에 따르면 2002년에 IE는 약 95%의 사용점유율을 보였는데요. IE가 시장을 독점하다시피 했을 때는 브라우저가 어떻게 돌아가는지에 대해 알 수 없었습니다. 하지만 Mozila의 Firefox 이후로 오픈소스 브라우저들이 나오면서 우리는 브라우저의 내부 동작에 대해 알 수 있게 되었습니다. 그럼 우분투 정신에 감사하며 저번 포스팅에서 알아보았던 브라우저의 구조에 이어 브라우저가 어떻게 화면을 렌더링하는지 알아봅시다 :) 이번 포스팅에서는 HTML과 CSS 파싱을 다룹니다. *1999-2006 usage sha.. [Browser] 브라우저의 구조 | Browser Structure "브라우저, 왜 알아야 할까" 브라우저에 내부 동작에 대해 꼭 알아야 할까요? 브라우저는 IE는 Windows, Safari는 Mac OS X, Firefox는 Linux(+Windows, Mac) 등 다양한 운영체제들로부터 나왔고, 운영체제와 상호작용할 수 있는 API를 갖고 있습니다. 이렇게 운영체제마다 여러 브라우저들이 있지만, W3C에 의해 html, css, javscript가 표준화되었습니다. 하지만 아직도 브라우저마다 호환되지 않는 기능들은 있습니다. 웹 개발자에게는 골치 아픈 일이죠. 고백하자면 작년에 회사에서 맡았던 서비스가 IE 브라우저까지 지원해야해서 IE가 얼른 사라지길 기도했었습니다. 브라우저는 우리 생각보다 복잡하고, OS API와 UI를 사용하기 때문에 일반적인 소프트웨어와는 .. 나의 웹 개발자 로드맵 - 프론트엔드 체크리스트 https://github.com/kamranahmedse/developer-roadmap kamranahmedse/developer-roadmap Roadmap to becoming a web developer in 2021. Contribute to kamranahmedse/developer-roadmap development by creating an account on GitHub. github.com developer-roadmap 참고해서 필요한 것들만 체크리스트로 만들었다. 개중에는 내가 추가한 것도 있다. "인터넷" - [x] internet이 어떻게 동작하는가 another-light.tistory.com/57 너와 나의 연결고리, 인터넷에 대하여 | how does internet wo.. 이전 1 2 다음
