개발자 공부합니다

https://reactrouter.com/en/main/router-components/browser-router BrowserRouter v6.23.1 | React Router reactrouter.com ++ 공식문서 업데이트 참고해야함!!  1. css 꾸미기components 의 Movies.js 수정import PropTypes from "prop-types";import {Link} from "react-router-dom";import styles from "./Movie.module.css";function Movie({id, coverImg, title, year, summary, genres}) { return ( {title} ..

https://reactrouter.com/en/main/router-components/browser-router BrowserRouter v6.23.1 | React Router reactrouter.com ++ 공식문서 업데이트 참고해야함!!  1. 영화사이트와 연결하기 component를 만들어보자.Movie.js 파일을 만들어준다.function Movie({coverImg, title, summary, genres}) { return ( {title} {summary} {genres.map(g => {g})} );}export default Movie;App.js 를 수정해준다.import { useEffect, useState } from "react";impo..

1. to-do-list를 만들어보자.import { useState } from "react";function App() { const [toDo, setToDo] = useState(""); const onChange = (event) => setToDo(event.target.value); console.log(toDo); return ( );}export default App;  import { useState } from "react";function App() { const [toDo, setToDo] = useState(""); const onChange = (event) => setToDo(event.target.value); const onSubmi..

1. 카운터를 만들어보자. 먼저 src 의 App.js 를 수정해준다.import { useState } from "react";function App() { const [counter, setValue] = useState(0); const onClick = () => setValue((prev) => prev + 1); return ( {counter} click me );}export default App; 클릭을 누르면 숫자가 올라간다.       2. 처음에만 코드가 실행되고 다른 state 변화에는 실행되지 않도록 해보자api 를 가져올 때 처음에만 api 를 가져오고 그 다음에는 안가져 올 수 있도록!(로그인 같은 개념인가?) index.js 도 수..

1. 설치해주자 https://nodejs.org/en Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org 먼저 다운로드 해주자. (windows용)1. 윈도우키 + R 누르면 실행창이 뜬다.2. cmd 라고 입력하고 확인하면 아래의 창이 뜬다.3. node -v 를 치면 버전을 확인하여 잘 깔렸는지 확인가능.4. npx 를 쳐서 설치된것을 확인한번 더 한다.(잘 실행되는가)     ㅎㅎㅎ 에러가 안나면 재미없지. npm install -g npm@latest # 버전 업데이트npm config s..

1. 분을 시로 바꾸어보자 - 먼저 분이 잘 출력되는지 확인한다.   안돼면 script 바꿔주기        2. 분을 시로 바꾸어보자.                3. 바꾸어서 시를 분으로 바꾸어보자.  버튼을 누르면 뒤로가기로 바꿀 수 있다.{flipped ? "Turn back" : "Flip"}         4. 킬로미터로 바꾸는 것도 추가해서 선택해 계산해 볼 수 있도록 하자           5. Props 방식 : ..

[ 세번째 프로젝트 ]   AI를 이용한 소설 사이트를 만들어 보자.    ++  팀 스로젝트로 팀과의 협업이 중요하다.++  장고 공식 문서는 항상 확인하기 https://docs.djangoproject.com/en/4.2/  https://github.com/1489ehdghks/NOST.git GitHub - 1489ehdghks/NOSTContribute to 1489ehdghks/NOST development by creating an account on GitHub.github.com    1.  먼저 팀프로젝트를 하기 위해 git 협업준비빈 파일에 git init 을 해준다.그 다름 git clone https://~  주소를 복사해서 넣어준다..   브렌치를 생성하여 git에 push 한..

1. 클릭해서 콘솔에 나오는 것을 확인해보자. 바닐라js 했던 것을 그대로 Click me      2. 클릭 되는 것을 업데이트 해보자- 여기까지는 바닐라거.. Total click: 0 Click me      3. 리엑트를 알아보자 - 다음에서 더 쉽게 바꿀거지만 일단 어떻게 작동하는지를 알아본다.          4. 그 다음으로 디벨롭 해보자. 바닐라는 더 쉽게 사용할 수 있게 리엑트에서 왠만한건 다 가져올 수 있다.        5. jsx 로 변환해보기 - babel 에서 자동변환해주는 것을 가져와서 더 간단한 코드로 ..

[ 세번째 프로젝트 ]   AI를 이용한 소설 사이트를 만들어 보자.    ++  팀 스로젝트로 팀과의 협업이 중요하다.++  장고 공식 문서는 항상 확인하기 https://docs.djangoproject.com/en/4.2/  https://github.com/1489ehdghks/NOST.git GitHub - 1489ehdghks/NOSTContribute to 1489ehdghks/NOST development by creating an account on GitHub.github.com    S.A.NOST  1. git commit 규칙🌟feat : 새로운 기능에 대한 커밋fix : 버그 수정에 대한build : build 관련 파일 수정에 대한 커밋chore : 그 외 수정에 대한 커밋c..

[ 두번째 프로젝트 ]   스파르타 뉴스를 만들어 보자.    ++  팀 스로젝트로 팀과의 협업이 중요하다.++  장고 공식 문서는 항상 확인하기 https://docs.djangoproject.com/en/4.2/  https://github.com/1489ehdghks/spartaNews GitHub - 1489ehdghks/spartaNewsContribute to 1489ehdghks/spartaNews development by creating an account on GitHub.github.com        1.  리드미를 작성해보자 댓글과 대댓글은 프론트앤드 구현이 힘들어 포스트맨으로 확인하였다.포스트맨으로 구현해본것을 깃 리드미에 넣어보자. https://aiday.tistory.com..