Suyeon BLOG

React로 프로젝트를 만들던 도중에 style을 준 적이 없는데 이상하게 화면이 보인 적이 있었습니다. 찾아보니 컴포넌트끼리 같은 클래스명을 사용하면 충돌이 일어난다고 하네요.. 그래서 이를 해결할 방법을 찾아보니 css-module을 사용하면 충돌을 막을 수 있다고 합니다!! css-module 사용하기 /* 주의!! */ /* React에서 css-module을 사용할 땐, 클래스명을 abc-efg 하면 안되고 abcEfg 로 지어야 오류가 안 생긴다. */ .itemsList { background-color: #E67E22; margin: 0 auto; } .item { color: #ffffff; font-size: 18px; } import style from './style.css'; fu..

프로젝트를 만들던 도중 드랍 다운 메뉴를 만들어야 하는데 많은 예제들을 참고 하다가 제일 간단한 방법을 찾은 것 같습니다. 저는 이렇게 코드를 작성했습니다. import {useState} from 'react'; import {Routes, Route, Link} from 'react-router-dom'; function App() { let [isOpen, setIsOpen] = useState(false); return( { setIsOpen(!isOpen); }}> 메뉴 검색 ); } function Sidebar(props) { let isOpen; if(!props.isOpen) { isOpen = 'hide-sidebar'; } else { isOpen = 'hide-sidebar show..

Node js를 이미 다운받았다는 전제 하에 시작하도록 하겠습니다. 1. Visual Studio에서 폴더 1개를 생성합니다. 2. 터미널을 열어서 경로를 생성한 폴더명으로 옮깁니다. (cd 라는 명령어를 사용하면 됩니다.) 3. 터미널에 npx create-react-app 원하는폴더명 을 입력합니다. 4. 그 다음 react를 실행하고 싶으면 npx 로 만들었던 폴더명으로 터미널 경로를 이동합니다! (마찬가지로 이것도 cd 를 사용하면 됩니다) 5. 이동을 했다면, 터미널에 npm start 를 입력해주면 됩니다. 6. 만약 오류가 나거나 제가 올린 그림처럼 똑같은 문장이 뜨지 않는다면!! https://codingapple.com/unit/react1-install-create-react-app-n..

출처: Do it! 클론 코딩 영화 평점 웹서비스 1. movie_id - moive API에서 id값이 10인 것만 출력할 수 있습니다. ex) https://~~.json?movie_id=10 2. sort_by - 기본적으로 내림차순 정렬을 합니다. ex) https://~~.json?sort_by=rating 평점(rating)을 기준으로 내림차순을 합니다. ※ 영화 평점 웹서비스 디자인은 어디서 가져온 것인가? https://dribbble.com/shots/2442798-Movie-Application Movie Application dribbble.com - 여기서 회원가입은 없기 때문에 기능에는 '영화 제목', '영화 개봉년도', '영화 장르', '영화 시놉시스', '영화 평점', '영화 ..

출처: Do it! 클론 코딩 영화 평점 웹서비스 1. 구조 분해 할당을 하지 않았을 때 2. 구조 분해 할당을 했을 때 - 점 연산자 적용한 순서대로 하면 됩니다.

생명주기 함수 - 클래스형 컴포넌트의 일생을 만들어주는 생명주기 함수에 대해 알아볼 것입니다. - class component 안에 작성합니다. - 실행함수, 업데이트 함수, 언마운트 함수 로 알아봅니다. ※ 실행 함수 1. constructor() - 자바스크립트 함수이지만 클래스형 컴포넌트가 실행되면 같이 실행되는 함수입니다. - render보다 더 먼저 실행됩니다. - 실행 순서를 알고 있으면 무엇을 어떻게 사용해야 하는지 알기 쉬워집니다. 2. componentDidMount() - 컴포넌트가 처음 화면에 그려지면 실행되는 함수입니다. - render() 다음에 실행됩니다. - 영화 앱을 만든다면 안에 영화 API를 가져오는 역할을 합니다. ※ 업데이터 함수 1. componentDidUpdate..

React 컴포넌트 class 정의할 때 - class 형 컴포넌트를 만드는 이유는 'state를 사용하기 위함' 입니다. - React.Component를 상속받아야만 합니다. - React.Component 클래스는 약 500줄이 넘는 코드를 가지고 있습니다. - 이때 App 컴포넌트는 클래스이므로 함수가 아니라서 return 사용이 불가능 합니다. - 따라서 render() 함수를 사용해서 JSX를 반환합니다. class App extends React.Component { render() { return 컴포넌트; } } render() 함수를 구현하지 않아도 사용할 수 있는 이유 - React.Component를 상속받았기 때문입니다. state - 객체 형태의 데이터입니다. - class co..

1. Navigation component를 추가합니다. import React from "react"; import { Link } from "react-router-dom"; function Navigation() { return ( Home About ); } export default Navigation; 2. Navigation component를 App.js에서 임포트 합니다. - 이때 클릭하면 새 페이지로 로딩되면서 페이지를 가져옵니다. (a 태그의 특징입니다.) - 따라서 이것을 방지하기 위해 Link to를 사용합니다.

출처: 노마드코더 - React JS로 영화 웹 서비스 만들기 - 영화 소개글 최대는 235로 지정합니다. - 영화 소개글을 해주는 태그에 직접 아래 코드를 작성합니다. {summary.length > 235 ? `${summary.slice(0, 235)}...` : summary} //235초과면 인덱스 0부터 시작해서 235개까지 출력, 아니면 그냥 출력하기

출처 : 노마드코더 - React JS로 영화 웹 서비스 만들기 1. gh-pages 다운받기 - TERMINAL에 npm i gh-pages 입력해서 다운받습니다. - 결과물을 git hub에 올릴 수 있도록 도와줍니다. 2. 폴더에 packages.json이 있는지 확인합니다. - TERMINAL에 npm run build 하면 build라는 폴더가 생성됩니다. - 폴더 안에 여러 파일이 있는데 여기에는 우리가 사용했던 코드들이 있습니다. - build를 GitHub에 올려주면 되지만 작업을 다 한 후에 해야 합니다. 3. 올리기 전에 우선 packages.json에 작업해야할 것이 있습니다. //scripts에 작성 "scripts" : { "deploy" : "gh-pages -d build", ..