react 썸네일형 리스트형 웹 컴포넌트란? 안녕하세요. 꼬동입니다. 최근 웹 프론트엔드 프레임워크를 공부하다가, 의문이 생긴 것들이 있습니다. 바로 "컴포넌트 기반 개발 프레임워크"라는 말입니다. 아래 글에서도 이를 기반으로 글을 작성했더군요. www.samsungsds.com/kr/insights/frameworks.html 웹 프론트엔드 프레임워크, 무엇을 쓸까? 웹 프론트엔드 프레임워크, 무엇을 쓸까? www.samsungsds.com "~ 기반 개발 프레임워크"는 뭐 그렇다고 친다만, "컴포넌트" 얘는 뭘까요? 뭐.. 독립된 하나의 부품?? 으로 이해할 수 있겠다만, 좀 더 자세히 알아야하지 않을까 싶어서, 찾아보다가 W3C에서 웹 컴포넌트를 정의한 글이 있더군요. W3C는 월드 와이드 웹을 위한 표준을 개발하고 장려하는 조직입니다. 그리.. 더보기 Flux 패턴 MVC 패턴을 보완하기 위해서, FaceBook에서 만든 아키텍처를 소개해봅시다. 간단하게 단방향 데이터이고, Action이 발생하면 Dispatcher에 의해 Store에 전달되고, Store가 변경되면, View가 변경되는 패턴입니다. 조금 더 자세하고, 쉽게 알아보도록 합시다 ! 해당 글은 아래 글을 참조하여 작성한 글입니다. ui.toast.com/weekly-pick/ko_20151027 Flux 카툰가이드 | TOAST UI :: Make Your Web Delicious! Flux 카툰가이드 원문 : https://code-cartoons.com/a-cartoon-guide-to-flux-6157355ab207#.9nbhrj3of 플럭스는 현재 웹개발에 대한 토픽들중에 가장 유명하지만 이것을.. 더보기 React 소개 with 이벤트 위임 소개 React는 Facebook에서 개발한 오픈소스 UI 프레임워크입니다. 이전엔 직접 DOM 조작을 하며 이뤄진 과거 개발 방식(jQuery)이었는데, 이젠 DOM을 직접 다루지 않고, 데이터 상태에 따라 UI를 관리하기 때문에, 개발자는 특정 상태에 대한 뷰의 변화만 구현하면 됩니다. React는 3가지 특징이 있습니다. UI 컴포넌트를 만들기 위한 라이브러리이며 React의 컴포넌트는 트리형태로 구성됩니다. Virtual DOM을 사용하여 변경된 부분에 대한 최소한의 DOM 처리로 UI를 업데이트하여 애플리케이션의 성능을 향상합니다. 부모 컴포넌트에서 하위 컴포넌트로 전달하는 단방향 데이터 흐름을 가지고 있습니다. 그렇기에 데이터 추적 및 디버깅이 쉽습니다. 개발 환경 JSX React에서는 UI.. 더보기 이벤트 리스너 캐시 제가 최근 과제를 진행하며, render 함수에 이벤트 리스너를 추가하는 코드를 많이 짰는데, 이러한 코드는 성능을 떨어뜨린다는 피드백을 많이 받았습니다. 도대체 왜 그런 것일까가 궁금해서 찾아보았고 아래의 글을 찾게 됐습니다. 본 글은 아래의 글을 정리하는 글이 될 것 같네요. ui.toast.com/weekly-pick/ko_20180911 이벤트 리스너 캐시를 이용한 React 성능 향상 | TOAST UI :: Make Your Web Delicious! 이벤트 리스너 캐시를 이용한 React 성능 향상 저자 : Charles Stover / 웹사이트 : charlesstover.com / LinkedIn : https://www.linkedin.com/in/charles-stover / Twit.. 더보기 React Form과 bind 개념 본 글은 아래 링크를 참고하여 만들었습니다. https://ko.reactjs.org/docs/forms.html 폼 – React A JavaScript library for building user interfaces ko.reactjs.org 현재 React를 통해서 개인 프로젝트를 진행 중입니다. 아마 이번 달까지는 여러분들에게 보여줄 수 있을거라고 생각이 드네요 !! 대신 수면 시간을 줄겠지만 ㅠ 사실 이 Form이라는 개념은 간단합니다. 한 번 살펴보죠. First name: Last name: 보통 html에 존재하는 form을 들고 왔습니다. 저기서 마지막 줄 input을 통해 버튼이 생기죠. (input이지만 Submit 버튼이 생성됩니다. 아마 type이 Submit이라서 그렇습니다) .. 더보기 React Project에 Tailwind 적용하기 안녕하세요 ! 오늘은 여러분들의 React 프로젝트에 Tailwind를 적용하는 법을 알아 볼 것입니다 ! Bootstrap이라는 프레임워크도 있지만, Tailwind라는 새로운 기술을 익혀보고 싶었거든요. 시작합시다. https://tailwindcss.com/ Tailwind CSS - A utility-first CSS framework for rapidly building custom designs Documentation for the Tailwind CSS framework. tailwindcss.com 우선 tailwind는 이런 친구입니다. Bootstrap처럼 css framework인데, 보다 customizing에 좀 더 용이한 프레임워크입니다. 저 또한 React를 공부 중인데, 이.. 더보기 이전 1 다음
