분류 전체보기94 [영화 웹 서비스 만들기] #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. [GPIO] #1. GPIO & LED 대회 준비하면서 관심을 가지게 되었던 라즈베리파이4에 대해서 마저 정리해보자! 교수님 수업자료 기반이고, 제가 추가 할 코멘트는 따로 추가했습니다. 1. GPIO - General Purpose Input and Output - 범용 입/출력 장치(단자)를 지칭하는 용어 - 일반적으로 AP(Application Processor)는 물리적인 형태를 가지는 IC로 구현될 때 제한된 개수의 핀(신호를 주고 받는 통로)를 가짐 - AP 내부 기능은 물리적인 핀의 숫자보다 많음 - IC에 내장된 기눙과 입/출력 동작을 설정하고, 각 동작의 세부 상태를 설정하는 용도로 사용됨 - AP의 물리적인 특정핀의 동작 상태를 입력 또는 출력으로 설정 - 입력 상태와 출력 상태를 동시에 가질 수 없음 - 한 순간에는 하나의.. 2022. 2. 7. [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 ··· 12 13 14 15 16 다음
