Front-end (13) 썸네일형 리스트형 #4 [2021 UPDATE] PROPS #4.0 Props 분할, 정복 로직을 고립시켜서 분리된 컴포넌트로 만든다! 부모 컴포넌트는 App Props는 일종의 방식으로 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 전송하는 방식. 부모에 props를 사용하면 자식 컴포넌트(함수)의 인자로 객체가 들어가게 됨 하나의 버튼을 props을 이용해 재사용함! component는 단지 function(함수) 으로 JSX 반환함 => 함수형 컴포넌트 property => object로 모두 들어간다! function Btn({text}) { // props는 object // shortcut (props -> {text, onClick}) 변경! return ( {text} ); } function App() { // 컴포넌트 // JSX의 내부 cons.. Web Programming Tutorial https://poiemaweb.com/ 웹 프로그래밍 튜토리얼 | PoiemaWeb Front-end Development Tutorial poiemaweb.com #3 [2021 UPDATE] STATE - nomad coder #3 [2021 UPDATE] STATE #3.0 Understanding State 바뀌는 데이터 페이지를 로드했을 경우만 렌더링 되고, counter 업데이트 되지 않음 counter 렌더링 추가 - 전체 영역을 렌더링 하는게 아니라 counter 부분만 업데이트 됨 https://nomadcoders.co/react-for-beginners/lectures/3265 All Courses – 노마드 코더 Nomad Coders 초급부터 고급까지! 니꼬쌤과 함께 풀스택으로 성장하세요! nomadcoders.co #3.1 setState part One 자동으로 리렌더링을 유발, 일으키는 방법 React.js가 우리가 원하는 부분 렌더링 처리 data를 담는 것과 업데이트 하는 방법 const data .. #2 [2021 UPDATE] THE BASICS OF REACT - nomadCoder https://nomadcoders.co/react-for-beginners/lectures/3258 All Courses – 노마드 코더 Nomad Coders 초급부터 고급까지! 니꼬쌤과 함께 풀스택으로 성장하세요! nomadcoders.co #2 [2021 UPDATE] THE BASICS OF REACT #2.2 Our First React Element React.js: 어플리케이션이 아주 인터랙티브(interactive) 하도록 만들어주는 library, Engine과 같다. React-dom: library 또는 package. 모든 react element들을 HTML body에 둘 수 있도록 해줌 ReactDOM.render(): render의 의미는 react element를 가지고 H.. React 공부 시작 - 노마드 코더 강의 https://nomadcoders.co/react-for-beginners/lectures/3257 All Courses – 노마드 코더 Nomad Coders 초급부터 고급까지! 니꼬쌤과 함께 풀스택으로 성장하세요! nomadcoders.co 이번주 계획 #2 [2021 UPDATE] THE BASICS OF REACT ~ #7 [2021 UPDATE] PRACTICE MOVIE APP 수강 하기 : ) Async, Await와 Promise의 차이는? Async, Await와 Promise의 차이는? Promise를 더욱 쉽게 사용할 수 있도록 ES2017(ES8) 문법입니다. 함수의 앞부분에 async 키워드를 추가하고, 함수 내부에서 Promise의 앞부분에 await 키워드를 사용한다. async, await를 사용할 경우 코드가 간결해지지만, 에러 처리를 잡기 위해 try-catch()를 사용해야합니다. 동기적인 코드 흐름으로 개발이 가능합니다. 자바스크립트에서는 비동기 처리를 다룰 수 있는 방법에는 여러 가지가 있다. 주로 callback, Promise, async/await를 활용한다. 그 중에서도 요즘 특히 많이 사용되는 Promise, async/await의 특징 및 간단한 사용 예시와 둘의 차이점을 정리한다. Promise Promi.. GET, POST는 어떻게 다르게 쓰는지? + REST API GET, POST는 어떻게 다르게 쓰는지 GET GET method는 클라이언트에서 서버로 어떠한 리소스로부터 정보를 요청하기 위해 사용되는 메서드입니다. 데이터를 읽거나(Read), 검색(Retrieve)할 때에 사용되는 method라고 할 수 있습니다. GET은 요청을 전송할 때 URL 주소 끝에 파라미터로 포함되어 전송되며, 이 부분을 쿼리 스트링(QueryString)이라고 부릅니다. GET 방식은 데이터를 요청할 때 이 요청하는 데이터가 HTTP Request Message의 Header 부분의 url에 담겨서 전송된다. 그래서 요청시 url 상에 ? 뒤에 데이터가 붙어서 request를 보내는 것이다. 요청 파라미터가 여러 개인 경우 &로 연결합니다. 그리고 GET 요청은 오로지 데이터를 읽을.. Promise와 Callback의 차이점은 무엇이며 각각의 장단점은? 비동기 프로그래밍(Asynchronous) Promise와 Callback의 차이점은 무엇이며 각각의 장단점은? 둘 다 자바스크립드에서 비동기 처리를 위해서 사용되는 패턴이며, Callback 같은 경우 함수의 처리 순서를 보장하기 위해서 함수를 중첩하게 사용되는 경우가 발행해 콜백헬이 발행하는 단점과 에러 처리가 힘들다라는 단점이 있다. 그래서 나온게 Promise이며 ES6부터 정식 채택되어 사용중이다. Promise 생성자 함수를 통해 인스턴스화하며, // Promise 객체의 생성 const promise = new Promise((resolve, reject) => { // 비동기 작업을 수행한다. if ( /* 비동기 작업 수행 성공 */) { resolve('result'); } else {.. 이전 1 2 다음