Web Service/React34 [영화 웹 서비스 만들기] #4. setState ~3.3까지의 강의 State는 기본적으로 데이터가 저장되는 곳이다. 전체코드 사용자에게 변화를 줬다는 걸 보여주려면 render를 호출해주면 된다. render가 최초로 호출될 때, Container 함수를 넣어주면 된다. 렌더링(rendering) html 요소(element), 또는 React 요소 등의 코드가 눈으로 볼 수 있도록 그려지는 것을 렌더링(rendering) 이라고 말한다. React에서 저장하고 자동으로 re-rendering을 배우는 방법을 배워보자. const [counter,setCounter] = React.useState(0); useState 사용했을 때 배열 하나를 주는데, 배열 첫번째요소 우리가 담으려는 data 값(=counter)이고, 두번째 요소는 data 값을 .. 2022. 3. 19. [영화 웹 서비스 만들기] #3. JSX ~2.6까지의 강의 JSX는 자바스크립트를 확장한 문법이다. 기본적으로 리액트 요소를 만들 수 있게 해주고, html에서 사용한 문법과 흡사하다. 앞에서 배운 것과 비교해보자. createElement const h3 = React.createElement( "h3", { id:"title", onMouseEnter: ()=> console.log("mouse enter"), } , "Hello, I'm a span" ); JSX const Title=( console.log("mouse enter")}> Hello I'm a title ); createElement const btn = React.createElement( "button", { onClick:()=>console.log("i'm cli.. 2022. 3. 14. [영화 웹 서비스 만들기] #2. 바닐라JS와 리액트JS의 비교2, 버튼 ~2.4까지의 강의 버튼 만드는 것 부터 바닐라JS와 차이가 난다. vanilla.js Total clicks: 0 Click me #1과 동일한 코드 버튼 만들고 따로따로 해줘야 한다. React.js createElement에 html 선택(h3, button, div 등)하고 이벤트 등록하면 버튼이 생성된다. -> 앞으로 안 쓰지만 그래도 알아두기는 할 것! 처음에 들었을 때는 뭔 소리야;; 했는데 확실히 이해하면서 들으니까 html보다 훨씬 더 간편하다는 것을 깨닫는 중.. 2022. 3. 14. [영화 웹 서비스 만들기] #1. 바닐라JS와 리액트JS의 비교 프로젝트를 본격적으로 하기 전, ReactJS 복습이 필요하다고 생각해 다시 듣기로 결정 ! 이번에는 제발 끝까지 블로그 쓰기를 바란다... ~2.2까지의 강의 처음에는 바닐라랑 비교를 한다. vanilla Total clicks: 0 Click me 간단한 과정은 이렇다. html을 작성 -> 자바스크립트에서 버튼을 가져옴 -> 클릭이벤트 감지(addEventListener) -> 이벤트 함수에서 이벤트를 업데이트 -> html 업데이트 React React 이기는 하지만, 먼저 스크립트로 불러와서 한다. 여기서 react~는 엔진역할이고 UI를 만들고, react-dom~은 html 바디에 넣어주는 역할이라고 한다. ReactDom.render()에서 render는 React element를 가지고 .. 2022. 3. 14. [nextjs-blog] #3. Pre-rendering and Data Fetching https://nextjs.org/learn/basics/data-fetching Learn | Next.js Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and more. nextjs.org 지금까지 블로그 콘텐츠를 추가하지 않았는데, 이제 외부 블로그 데이터를 나의 앱으로 가져오도록 하자. 블로그 content를 파일 시스템에 저장하지만, content가 다른 곳에 저장된 경우도 작동한다. ~아직 미완인 게시물! 수정이 필요함~ 1. Pre-rendering (사전 렌더링) .. 2022. 1. 11. [nextjs-blog] #2. Assets, Metadata, and CSS https://nextjs.org/learn/basics/create-nextjs-app Learn | Next.js Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and more. nextjs.org 저번에 이어서, 오늘은 Assets, Metadata, and CSS 부분을 정리해보자. 1. Assets HTML에서 이미지를 불러오는 방식과는 달리, Next.js는 기본적으로 이미지 최적화를 지원한다. //HTML //Next.js import Image from 'next/i.. 2022. 1. 10. 이전 1 2 3 4 5 6 다음
