전체 글 (131) 썸네일형 리스트형 [ReactJS] 리액트 JS 의 Breaking Change 프로그램을 개발한 툴이 업데이트 됨에 따라 코드가 깨져서(동작을 하지 않아) 코드를 수정해 줘야 하는 걸 의미한다. 새로운 버전에 맞춰서 코드를 수정해야 하기 때문이다. ReactJS 는 Breaking Change 가 일어나지 않는다. 왜냐하면 그럴 수 있게끔 업데이트를 하기 때문이다. 대신 예전 코드에 기반해서 업데이트를 했다. 예전 방식은 그저 코드를 작성하는 다른 방식일 뿐이다. useStae, useEffect 의 큰 틀을 활용하는 걸 현업에서 많이들 선호하지만 예전의 코드들 또한 문제없이 동작하기에 남아있기 마련이다. https://nomadcoders.co/react-for-beginners/lectures/3296 All Courses – 노마드 코더 Nomad Coders 초급부터 고급까.. [JavaScript] 문자열 관련 함수 - 길이(length), 문자열에서 부분 문자열 추출(slice) 콘솔에서 전체 문자열의 크기를 .length 로 알 수 있고, 문자열 중 일부분 만을 짤라서 추출할 때는 .slice(start Index, end Index) 로 활용할 수 있다. 이를 삼항연산자와 함께 활용한다면 다양한 응용이 가능해진다. Q. 백틱은 어느 문법일까. https://curryyou.tistory.com/185 [JS] 자바스크립트 템플릿 리터럴: 백틱(``), 달러(${ }) 사용법 # 템플릿 리터럴(Template Literal) ES6부터 새로 도입된 문자열 표기법이다. 문자열 생성시 따옴표 대신, 백틱(`)을 사용한다. var str_01 = `hello world`; # 템플릿 리터럴의 기능 1. 줄바꿈(개행: Multi-line.. curryyou.tistory.com [ReactJS] Publishing :: gh-pages, deploy, predeploy gh-pages 라는 아주 nice 한 툴을 설치해 줄 거다. npm i gh-pages gh-pages 라는 것은 결과물을 github page 에 업로드 할 수 있게 해주는 툴,패키지 이다. github pages 는 github에서 제공하는 무료 서비스인데 완성된 결과물인 html, js,css 를 올리면 자동으로 웹사이트로 만들어 주는 것을 의미한다. 도메인도 주고. 가장 먼저 해야할 것은 package.json 의 scripts를 먼저 확인하는 것이다. scripts는 기본적으로 명령어인데, (start를 보면 알 수 있듯이, ex : npm run start) build 라는 명령어를 실행시키면 우리 웹사이트의 production ready code를 생성하게 된다. production rea.. [Git] git config username, email 확인 및 변경 확인 git config --global user.name 변경 git config --global user.name email은 user.name 대신 user.email로 진행 [ReactJS] React Route 가 제공하는 dynamic url, useParams 다이나믹하다는 것은 변수를 url에 넣어줄 수 있음을 의미한다. 이렇게 /:id 를 적어주면 이렇게 Detail.js 가 랜더링 된다. Props 는 그저 Object 일 뿐이다. 우리는 그저 item을 꺼내 쓸 뿐이다. 이제 id 값을 Home 컴포넌트에서 Movie 컴포넌트로 Props 에 넘겨주어 이를 Movie 컴포넌트에서 활용해 링크를 특정 id 로 연결시켜주고자 한다. 어떻게 해야 할까? 특정 영화 제목을 클릭할때마다 고유의 id 값을 가지는 url로 이동됨을 확인할 수 있었다. 무슨 id 일지 알면 좋겠다. 왜냐하면 그렇게 되면 id 값을 통해 api에 변수를 집어넣은 request 를 할 수 있기 때문이다. 이건 쉽다 왜냐하면 React Router에서 제공하는 함수 중 하나가 url에 있.. [ReactJS] 오류해결 Uncaught (in promise) TypeError: fetch(...).json is not a function 현상 동적 URL 로 ID 값을 가지고 들어갔을때 이를 통해 API 에 다시 request를 보내 데이터를 받아서 json 형식으로 처리를 해줘야 하는데 안되었다. 환장할 노릇이었다. 오류 메세지 Detail.js:8 Uncaught (in promise) TypeError: fetch(...).json is not a function 해결 await 함수에 한번 넣어주면 되었다. 바로 안되고 받은 걸 한번더 await 함수로 묶어서 .json() 해줘야 되는 것이었다. 참고 : https://stackoverflow.com/questions/65729947/request-using-fetch-returns-typeerror-response-json-is-not-a-function-reactj Reque.. [ReactJS] Route 최신 v6 (Switch 안씀) https://mswait.tistory.com/127 [ReactJS] [Movie App] [3] - Router & Link, ReactJS의 위력(Switch 포함) * Swith 가 Route 로 대체 되기 전의 내용이다. 업데이트 된 내용은 하단 참조 import { BrowserRouter as Router, Switch, Route } from "react-router-dom"; 라우터에는 두가지 종류가 있다. 1. Hash Router 2... mswait.tistory.com 의 최신 v6 (switch 안씀) https://reactrouter.com/docs/en/v6/getting-started/overview from v6, they don't use switch --------.. [ReactJS] [Movie App] [3] - Router & Link, ReactJS의 위력(Switch 포함) * Swith 가 Route 로 대체 되기 전의 내용이다. 업데이트 된 내용은 하단 참조 import { BrowserRouter as Router, Switch, Route } from "react-router-dom"; 라우터에는 두가지 종류가 있다. 1. Hash Router 2. Browser Router Switch 가 하는 일은 Route 를 찾는 건데. Route 은 URL을 의미한다. Route(URL) 을 찾으면 랜더링 한다. Route 안에다가 컴포넌트를 적어주면 된다. path 속성으로 route(URL)을 적어주면 해당하는 Route에 안에 적어준 Component를 불러준다. 여기서는 기본 URL 에 Home 컴포넌트를 랜더링 해준다. 이제 우리는 reactJS 에게 route 에.. 이전 1 2 3 4 ··· 17 다음
