마이덕스타일

지금까지 강의로 ReactJS를 이용해 영화 웹 서비스를 만들어 보았다. 하지만, 강의가 끝났음에도 뒤를 이은 강의가 있었는데 이는 예전 방식의 ReactJS를 사용하는 법이 있다고 한다. 현재 최신 버전으로 함수들을 이용해 쉽게 state와 effect등을 사용했지만, 분명 이 전 버전의 코드들도 존재할 것이다. 어떠한 점이 다른지 복습을 하며 알아보자.  하나의 실행되는 함수를 component라고 부른다. React는 component를 사용해 HTML처럼 작성한다. 이러한 Javascript와 HTML사이의 조합을 JSX라고 부른다.component의 이름의 첫 글자는 항상 대문자이다. ( 의 형식이기 때문에 일반 html tag와 구분)React는 하나의 component를 랜더링 한다. 따라..

투박한 웹을 이제 보기 좋게 스타일을 씌어볼 생각이다. 우선 summary의 길이가 제각각 이기 때문에 이 summary의 길이부터 조절해 보도록 하자. Movie.js에서 summary를 찾아서 조정해 준다. {summary.length > 235 ? `${summary.slice(0, 235)}...` : summary} 3항연산자를 이용해 글자의 개수가 235자가 넘어가면 잘라주고 이하라면 그대로 보여주게 해 주었다. css는 소스코드로 만들어 둔 것을 입혔다. index.js, Movie.js, Home.js에 각각의 css module을 import 하고 적용해 주었다. 이제 내가만든 detail page만 알맞게 꾸며주면 프로젝트가 끝난다. git : https://github.com/lees..

이 포스팅은 https://nomadcoders.co/react-for-beginners  강의를 보며 작성하였습니다.(무료!)  이번 section에서는 지금까지 배웠던 State, Effect, props를 연습하면서 지금 까지 배운 것들을 연습하고 적용해 볼 것이다.먼저 To Do List를 만들어보자!git : https://github.com/leesulgi66/React_for_Beginners/commit/f7ce28c1e54a926bb370047a601c5a8e15144137import { useState } from "react";function App() { const [toDo, setToDo] = useState(""); const [toDos, setToDos] = useSta..

이 포스팅은 https://nomadcoders.co/react-for-beginners강의를 보며 작성하였습니다.(무료!)  이번 강의를 학습하기 전에 왜 이러한 것들이 필요한지 먼저 알아보도록 하자. 먼저 앞선 강의에서 배웠던 것을 활용해 똑같이 count를 세는 state를 만들어 보자.import { useState } from "react";function App() { const [counter, setValue] = useState(0); const onClick = ()=> setValue((prev)=>prev+1); return ( {counter} click me );}export default App;counter를 state로 선언해 주고 o..