개발일지 (47) 썸네일형 리스트형 [노마드 코더] 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개발자가 사용자가 좋.. Uncaught ReferenceError: global is not defined at node_modules/buffer/index.js "global is not defined" vite를 이용해 react 프로젝트를 하던 중 aws-sdk를 설치 후 AWS관련 패키지를 이용하려고 했을 때 만났던 오류이다. vite를 이용하지 않고 react프로젝트를 만들었을 시에는 오류가 뜨지 않아 원인을 좀 찾아보았다. https://stackoverflow.com/questions/72114775/vite-global-is-not-defined Vite 'global is not defined'I'm creating a project using Vite with vanilla-ts, at one point I had to use the readdir method from the fs-extra package, but it created an e.. npm error errno -4058 실행 경로 오류 Either try using a new directory name, or remove the files listed above. npm error syscall open npm error path E:\dev\prac\aws_s3_prac\package.json npm error errno -4058 npm error enoent Could not read package.json: Error: ENOENT: no such file or directory, open 'E:\dev\prac\aws_s3_prac\package.json' npm error enoent This is related to npm not being able to find a file. npm error enoent npm erro.. 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.. 이전 1 2 3 4 5 6 다음
