차근차근 배움터

Hook을 만들고 npm (오픈 소스)에 등록해볼 예정이다. 많은 사람들이 자신들이 만든 hook을 공유하고 npm에 등록하여 홍보하고 있다. 그만큼 유용한 hook들을 사용하기를 바라는 마음에서 개발하는 것이다 아래와 같은 훅들을 만들어볼 예정이다 #03.Requirements node js와 react가 필요하다 setState와 같은 것들은 만들어본 경험이 있어야 한다 #04. Workflow 이번에는 VSCode가 아닌 Code Sandbox에서 만들 것이다 CodeSandbox: Code, Review and Deploy in Record Time CodeSandbox is a cloud development platform that empowers developers to code, colla..

5/26 - 프로젝트 설치 react-movie-list라는 이름으로 설치했다 $ npx creat-react-app react-movie-list - Navbar.js 생성 네비게이션 바 먼저 만들고 싶어서 Navbar.js 파일을 components 폴더를 생성해서 그 안에 만들었다 App.js에 Navbar.js 파일을 import 하고 출력 성공 - SCSS 사용 이번에는 React에서 css가 아닌 scss를 사용하고 싶다 npm을 이용해서 설치 왜 다 다른 설치 코드인 것인지는 모르겠으나.. Adding a Sass Stylesheet | Create React App Note: this feature is available with react-scripts@2.0.0 and higher. c..

React에서 컴포넌트 리스트를 렌더링할 때 key prop을 지정하는 이유는 React의 내부적인 동작과 성능 최적화를 위해서입니다. key prop은 각 컴포넌트의 고유성을 나타내는 식별자로 사용됩니다. key prop이 제공되면 React는 컴포넌트 간의 변경을 효율적으로 추적할 수 있습니다. React는 key 값을 이용하여 변경된 컴포넌트를 식별하고, 변경된 컴포넌트만 업데이트합니다. 이는 성능 향상을 위해 컴포넌트 재사용을 최대화하고, 필요한 부분만 업데이트하여 리렌더링을 줄입니다. 예를 들어, 컴포넌트 리스트를 렌더링할 때 key prop을 사용하지 않으면 컴포넌트가 추가, 제거 또는 재정렬될 때 React는 전체 리스트를 비교해야 합니다. 이는 비효율적인 동작이며, 성능 저하를 유발할 수 ..

React js는 어플리케이션이 아주 interactive하게 만들어주는 library이다 react-dom은 library, package인데 모든 React element 들이 HTML body에 둘 수 있게 해 준다. React JS는 엔진 같은 역할 => 암기하지 말고 이해해보려 해라 ReactDOM.render(); render() 유저에게 보여주는 것 브라우저가 JSX를 이해할 수 있도록 BABEL을 설치해야 한다. 컴포넌트에 위와 같이 속성 이름과 값을 지정하면 function에서 props로 변수를 받아서 props.banana와 같이 꺼낼 수 있다 이렇게 컴포넌트에 작성되어 있는 onClick 은 이벤트 리스너가 아니라 하나의 props 이다 컴포넌트를 re-rendering하고 싶지 않..

npx create-react-app과 npm init은 둘 다 프로젝트를 생성하는 데 사용되는 명령어입니다. 그러나 그들은 서로 다른 목적을 가지고 있습니다. npm init: npm init 명령어는 새로운 Node.js 프로젝트를 시작할 때 사용됩니다. 이 명령어를 실행하면 프로젝트의 package.json 파일을 생성합니다. package.json 파일은 프로젝트의 메타데이터와 종속성(dependencies) 정보를 포함하고 있습니다. npm init은 프로젝트의 기본 설정을 위해 몇 가지 질문을 하고, 사용자로부터 입력을 받아 package.json 파일을 생성합니다. 이후에는 npm install을 사용하여 package.json에 명시된 종속성들을 설치할 수 있습니다. 이 명령어는 React..

#7.10 Next Steps breaking change 버전 1에서 코드를 작성했는데 버전이 올라가면서 깨지는 현상 새로운 버전에 맞춰서 코드를 수정해야 하는 일이 발생한다 그러나 React js 에서는 breaking change 현상이 없다 예전 버전의 코드 방식을 그대로 갖다 써도 React.js에서는 깨지는 현상이 없다 useState()와 useEffect()가 최고의 조합이라고 생각한다 구버전의 리액트 코드들도 배우는 강의가 있지만 나는 일단 패스 영화 웹사이트 완성 React App yujinkimkr.github.io 일단 완성 및 배포했고 나머지 수정 사항들은 아래로 정리할 수 있을 것 같다 그리고 다른 리액트 강의들을 또 찾아서 들어보려고 한다 1) Detail.js에서 Descri..

gh-pages 라는 툴을 설치한다 $ npm i gh-pages gh-pages란? 결과물을 github pages에 업로드 할 수 있게 해주는 나이스한 패키지 package.json에 있는 scripts를 먼저 확인 script의 build를 실행하면 "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, 웹사이트의 production ready code를 생성하게 된다 production ready란 => 코드가 압축되고 모든 것이 최적화된다는 뜻 $ npm run build 아래 명령어를 실행하고 나면 ..

영화 목록 상세 내용을 불러올 수 있었다 다른 분들이 만든 멋진 화면들을 공유해본다 React App mascaradee.github.io https://brilliant-froyo-4c6888.netlify.app/ 이분은 예고편까지 넣으셨다 React App brilliant-froyo-4c6888.netlify.app Detail.js import { useParams } from "react-router-dom"; import { useEffect, useState } from 'react'; function Detail() { const { id } = useParams(); const [movie, setMovie] = useState([]); const getMovie = async () =..

먼저 React Router 를 사용하기 위해서 몇 가지 import 해야 함 import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom"; Switch는 Route를 찾는 것 Route는 웹브라우저 상에 입력된 url을 말한다 route를 찾으면 컴포넌트를 Rendering한다 App.js 강의가 조금 옛날 꺼라서 프론트엔드가 슉슉 바뀌는 것도 감안해서 강의에서 설명하던 Switch라는 기능은 Routes로 변경되었다. import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'; import Home from './routes/Home'; funct..

{movie.title} {movie.summary} {movie.genres.map((genre) => {genre})} medium_cover_image 자바스크립트에서는 왼쪽보다 오른쪽처럼 작성 mediumCoverImage import PropTypes from "prop-types"; Movie component의 proptype 설정 Movie.propTypes = { coverImg: PropTypes.string.isRequired, title: PropTypes.string.isRequired, summary: PropTypes.string.isRequired, genres: PropTypes.arrayOf(PropTypes.string).isRequired, } React Router ..