오묘한

가장 쉬운 웹개발 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

러닝 리액트 56 ~ 64p 함수형 프로그래밍의 역사는 람다 계산법으로 거슬러 올라가야 한다. 람다 계산법을 이후 존 맥카시가 리스프란 이름의 프로그래밍 기법으로 바꾼 것이 오늘날의 함수형 프로그래밍이다. 함수형 프로그래밍은 선언형 프로그래밍의 일종이다. 선언형 프로그래밍 vs 명령형 프로그래밍 선언형은 what 에 집중, 명령형은 how 에 집중. 선언형 프로그래밍은 함수명을 통해 다음에 처리할 일을 추론하기 쉬워 주석을 많이 안달아도 된다. 또 각 함수의 구현 방식은 추상화로 감출 수 있다. 함수형 프로그래밍의 핵심 개념은 5가지이다. 불변성, 순수성, 데이터변환, 고차함수, 재귀 (++ 이 부분부터는 직접 코드를 따라치며 익혀보기) 컬리 기술블로그 람다 (http://thefarmersfront.g..

강의를 들은 이유: 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..

https://youtu.be/G4eQziVzCTE FPS란 : Frame per Seconds. 기기에 1초당 몇 프레임이 그려지는지를 표현. 대부분의 기기들은 스크린을 1초에 60번을 screen을 refresh한다. 만약 화면 전환 시에 애니메이션이 있다거나, 유저가 스크롤링으로 페이지를 내린다던가 할 때 브라우저는 이 디바이스의 refresh rate에 맞추어서 1개의 새로운 그림이나 프레임을 띄워줘야 한다(스크린이 refresh 될 때 마다!) 60fps는 1초에 60장의 프레임이 그려진다는 의미이다. 그래서 16.6ms만에 1프레임이 그려져야, 즉 브라우저 렌더링이 16.6ms 만에 무사히 수행되어야 애니메이션이 끊김 없이 보일 수 있다.(실제로 브라우저는 다른 하는 일이 많기 때문에 화면에 ..

https://youtu.be/2AMRTAFSh98 목표: 숫자, 날짜, 통화를 잘 나타내보자! // intl 사용해 // 1. 숫자 나타내기 { const views = 9744642; const formatter1 = new Intl.NumberFormat("ko"); console.log(formatter1.format(views)); // 9,744,642 const formatter2 = new Intl.NumberFormat( navigator.language /* 사용자가 지정한 언어 */, { notation: "compact" } ); console.log(formatter2.format(views)); // 974만 const formatter3 = new Intl.NumberForma..

https://youtu.be/wbDpZwDRgRk 1) TypeIt : 타이핑 효과를 주는 애니메이션 라이브러리 https://www.typeitjs.com/docs Documentation | TypeIt It's extremely easy to configure and start using TypeIt. Here's the documentation to show you how to fully leverage it. www.typeitjs.com 장점: 4kb의 작은 용량, SEO 최적화 DreamCoding Youtube 2) ScrollOut: 스크롤링 애니메이션 라이브러리 https://scroll-out.github.io/guide.html#getting-started ScrollOut Eff..