개발일지/React (18) 썸네일형 리스트형 [노마드 코더] ReactJS 트위터 클론 코딩 - Router 이 포스팅은 노마드 코더님의 트위터 클론코딩을 학습 후 작성하였습니다. (무료!!)https://nomadcoders.co/nwitter 트위터 클론코딩 – 노마드 코더 Nomad CodersReact Firebase for Beginnersnomadcoders.co 이번에는 여러 가지 기본 global styels 중에 styled components를 사용해 routing설정을 해 보자.App 파일에서 새로운 라우터를 생성할 것이다. 먼저 src 폴더 아래에 componentes 폴더를 생성 후 layout.tsx 파일을 생성해 준 후 여기에 Outlet Compnent를 반환해 준다. 그리고 마찬가지로 src 폴더 아래에 routes 폴더를 생성 후 home.tsx와 profile.tsx를 생.. [노마드 코더] ReactJS 트위터 클론 코딩 - 프로젝트 설정 이 포스팅은 노마드 코더님의 트위터 클론코딩을 학습 후 작성하였습니다. (무료!!)https://nomadcoders.co/nwitter 트위터 클론코딩 – 노마드 코더 Nomad CodersReact Firebase for Beginnersnomadcoders.co 먼저 강의가 들어가기전에 nodejs가 필요하다. 준비되지 않았다면 설치 후 진행하자.node -v 터미널에서 위의 명령어를 입력하면 현재 node의 버전을 확인할 수 있다. 또한 백엔드 서버의 역할을 수행해 줄 firebase의 계정도 생성해 두자.https://firebase.google.com/?hl=ko Firebase | Google's Mobile and Web App Development Platform개발자가 사용자가 좋.. ReactJS 로 영화 웹 서비스 만들기 #8 Old Codes 지금까지 강의로 ReactJS를 이용해 영화 웹 서비스를 만들어 보았다. 하지만, 강의가 끝났음에도 뒤를 이은 강의가 있었는데 이는 예전 방식의 ReactJS를 사용하는 법이 있다고 한다. 현재 최신 버전으로 함수들을 이용해 쉽게 state와 effect등을 사용했지만, 분명 이 전 버전의 코드들도 존재할 것이다. 어떠한 점이 다른지 복습을 하며 알아보자. 하나의 실행되는 함수를 component라고 부른다. React는 component를 사용해 HTML처럼 작성한다. 이러한 Javascript와 HTML사이의 조합을 JSX라고 부른다.component의 이름의 첫 글자는 항상 대문자이다. ( 의 형식이기 때문에 일반 html tag와 구분)React는 하나의 component를 랜더링 한다. 따라.. 노마드 코더 - ReactJS 로 영화 웹 서비스 만들기 #7 Practice Movie App Styles 투박한 웹을 이제 보기 좋게 스타일을 씌어볼 생각이다. 우선 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.. 노마드 코더 - ReactJS 로 영화 웹 서비스 만들기 #7 Practice Movie App 이 포스팅은 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.. 노마드 코더 - ReactJS 로 영화 웹 서비스 만들기 #6 Effects 이 포스팅은 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.. 노마드 코더 - ReactJS 로 영화 웹 서비스 만들기 #5 Create React App 이 포스팅은 https://nomadcoders.co/react-for-beginners강의를 보며 작성하였습니다.(무료!) npx create-react-app my-app 이제 본격적으로 script로 불러오는 방식이 아닌 react app을 만들어 본격적으로 react를 사용해 볼까 한다. react app을 creat 하는 도중에 npm install error ENOENT라는 작은 에러를 만났다. 우선 기존에 깔려 있던 node.js를 재 설치 한 후 댓글에 있는 방식으로 앱생성을 진행하였다. 생성한 폴더에서 터미널을 열고 node -v을 입력해 node.js의 설치를 확인했다. 그리고 px create-react-app . 을 입력 후 y를 눌러서 설치를 시작했다. 설치가 끝나니 여러가지 .. 노마드 코더 - ReactJS 로 영화 웹 서비스 만들기 #4 Props 이 포스팅은 https://nomadcoders.co/react-for-beginners 강의를 보며 작성하였습니다. #4 Props Props는 일종의 방식이다. 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방법. 이제부터 해볼 것은 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 보내는 것이다.중요한 점은 컴포넌트는 단지 JXS를 반환하는 함수일 뿐이다. 이러한 작업이 필요한 이유는 무엇일까? 만약 버튼을 만든다고 했을 때 비슷한 스타일의 버튼을 만들기 위해 설정한 style값을 모두 붙여 넣어 만든다면, 추후 수정이 있을 시 모든 버튼의 style값을 조정해야 할 것이다.function SaveBtn() { return Save Changes}function Confirm.. 이전 1 2 3 다음
