오묘한

참고한 자료: https://burning-camp.tistory.com/84#%EC%BB%A-%ED%--%-C%EC%-D%B-%EB%--%--%--%ED%--%--%EB%A-%AC%EC%A-%A-%ED%--%B--container-presenter-%--%ED%-C%A-%ED%--%B- - 컨테이너와 프리젠터(container-presenter) 디자인 패턴은 비지니스 로직과 뷰를 분리하는 방식이다. MVC 패턴과 유사함을 느낄 수 있다. 컨테이너 프리젠터 패턴이란? - 컨테이너는 data와 state를 가지고, api를 불러온다. 그리고 모든 로직을 처리한다. - 프리젠터는 데이터를 보여줄 뿐이며, state를 갖고 있지 않은 단순한 함수형 컴포넌트이다. - 프리젠터는 스타일, 컨테이너는 데이터의 개..

가장 쉬운 웹개발 with Boaz 12강. React component, element, instance 끝내기 React Components, Elements, and Instances 번역글 Managing the Instances hkc7180.medium.com 더보기 Managing the Instances 기존 UI model(OOP) class Form extends TraditionalObjectOrientedView { render() { // Read some data passed to the view const { isSubmitted, buttonText } = this.attrs; if (!isSubmitted && !this.button) { // Form is not yet ..

가장 쉬운 웹개발 with Boaz 11.Thinking in React 11.Thinking in React (React 공식문서의 main concepts 번역 글입니다.)함께보면 이해가 쏙쏙https://youtu.be/J3iNl63vbYMhttps://youtu.be/rs_3C-8I5ysReact는 Javascript로규모가 있는 Web app을 만드는 빠른 방법이다.이번 글에서는 React를 활 davidhwang.netlify.app 더보기 React는 Javascript로 규모가 있는 Web app을 만드는 빠른 방법이다. 이번 글에서는 React를 활용해서 제품 검색 App을 구현할 것이다. 구체적인 예시(제품 검색 App)를 React로 직접 구현하면서 그 과정을 익혀보자. Mockup ..

가장 쉬운 웹개발 with Boaz 10.Composition vs Inheritance 10.Composition vs Inheritance (React 공식문서의 main concepts 번역 글입니다.) 함께보면 이해가 쏙쏙https://youtu.be/T6Wj2pbkorA 과 는component를 만드는 2가지 다른 패턴이다.(https://www.youtube.com/watch?time_continue=238&v=wfMtDGfHWpA)(위 영상을 참 davidhwang.netlify.app 더보기 composition과 inheritance는 component를 만드는 2가지 다른 패턴이다. 둘 다 중복을 제거하기 위해 사용한다. (https://www.youtube.com/watch?time_..

가장 쉬운 웹개발 with Boaz 9.Lifting state up 9.Lifting state up (React 공식문서의 main concepts 번역 글입니다.) 함께보면 이해가 쏙쏙https://youtu.be/ZkfeVp-YnCUhttps://youtu.be/GMcP6ZhwbXo여러 component들에게 data의 변화를 모두 반영해야 할 때각 component의 state를 통합해야 davidhwang.netlify.app 더보기 이것이 state를 끌어올리는 것, 즉 lifting state up이다. 현재 상태를 가진 component로 부모 component로 state를 끌어올리는 것이다. 여러 component들에게 data의 변화를 모두 반영해야 할 때 각 component의 s..

가장 쉬운 웹개발 with Boaz 7.Lists and Keys 7.Lists and Keys (React 공식문서의 main concepts 번역 글입니다.) 함께보면 이해가 쏙쏙 https://youtu.be/7xZMLyfsQc8component로 list를 구성할 때key를 활용하여 각 component를 구분해야 한다. 그래야만 ReactDOM이 각 component를 비 davidhwang.netlify.app 더보기 React에서 array의 아이템 하나하나를 component로 만들어 리스트에 저장한다. 다수의 component를 rendering 하기(list 만들기) elements를 item으로 갖는 array를 만들 수 있다. 이 array를 {}를 통해 JSX안에서 사용할 수 있다..

https://youtu.be/PN_WmsgbQCo 우테코 테크톡 - virtual dom

강의를 들은 이유: React 문법을 잘 알고있단 확신이 없어서😅 그동안 React를 쓸 때 내가 정말 React 문법을 깊이 있게 이해하고 있다는 확신이 들지 않아 공식 문서를 쉽게 한국어로 풀어서 강의해주시는 데이비드님의 '가장 쉬운 React(https://youtu.be/MTzS8XnD6-Q)'강의를 보게 됨. [가장쉬운 리액트] Elements - 가장 쉬운 웹개발 with Boaz 공식문서는 여기. https://reactjs.org/docs/rendering-elements.html Rendering Elements – React A JavaScript library for building user interfaces reactjs.org 1강: JSX 1.JSX (React 공식문서의 ma..