초보 개발자

react를 왜 배워야하는지 어떨 때 써야하는지에 대해서 모른다면 사용법을 무작정 외우는 수 밖에 없다. 이번에 간단하게 어떤 차이가 있는지 알아보고 가겠다. react element를 직접 만들어 보는 방식으로 원리를 이해하고, 어려운 방식으로 먼저해봐야 나중에 쉬운 방식으로 했을 때 편한지를 알 수 있었다. 먼저 비슷한 기능을 만들어보려고한다 VanilaJS 먼저 버튼을 클릭하면 화면의 숫자가 하나씩 증가하는 것을 나타내려고 하였다. 데이터가 바뀌어도 html은 새로고침이 되지 않는다. 따라서 화면에 그 숫자가 자동으로 반영되지 않는다. 이를 해결하기 위해서 eventlistener에 들어가는 함수에 그 표시하는 값을 바꿔주는 식을 적어주어야함. 그리고 많은 양의 코드가 필요 ( eventlisten..

A component is changing a controlled input of type text to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. react hook을 만들다가 useState를 쓰는 과정에서 위와 같은 오류가 떴었다.. 뭐지..? 내가 잘못한건 없는거같은데... 이 이유는 간단했다 input에 undifined가 들어갔을 때의 처리방식을 설정해주지 않아서 그런 것 같다. 해결방법..

react-router-dom을 활용해서 react에서 간단히 router를 만들어 줄 수 있다. 여러 종류가 있지만 우리는 gh-pages에 최적화된 HashRouter를 사용할 것이다. npm i react-route-dom App.js에서 아래와 같은 Route를 만들 것이다. / /home /about 각 url에 구분을 해주려고한다. /은 home으로 영화List를 보여주고 /about은 그냥 소개페이지이고 /movie/:id는 각 영화를 누르면 그 영화가 나오도록 해주었다. 여기서 /에는 exact={true}옵션을 주었는데 이것을 주지 않게되면 겹치는 URL전부다 component가 실행이 된다. 예를들어 '/'는 '/' + 'about'에도 들어가있기 때문에 /의 component가 abo..

전에 axios를 async await을 사용하여 비동기로 정보를 가져온 적이 있다. 이제 이 정보를 가지고 영화제목 및 정보를 나타내려고한다. 가져온 값을 콘솔에 찍어보면 objetct가 출력이 되는데 obj.data.data.movies안에 20개의 영화들이 들어있다. componentDidMount가 되면 이 정보들을 가져와서 setState를하는 함수를 만들어 집어 넣었다. 이로인해 App component의 state에는 20개의 movie가 들어있다. 그리고 정보를 받아오면 isLoading은 false로 바꿔주자. 각 movie에 많은 정보들이 담겨있지만 우리가 이번에 써볼것은 아래와 같다. 따라서 Movie.js에 Movie component를 만들어준다. 이번에는 class compone..

state는 보통 우리가 동적 데이터와 함께 작업할 때 만들어진다. 변하는 데이터, 존재하지 않는 데이터, 생기고 사라지고 변경되는 데이터.... 지금까지 해왔던 것은 function component이었다. 이제는 class component를 사용해 보려고 한다. function이 아니기 때문에 return이 없다. 대신 render를 써주면 된다. function component는 function이고 뭔가를 return한다 그리고 screen에 표시가 된다. class component는 class이다. 하지만 react component로부터 기능을 상속받아 screen에 표시가 된다. 그걸 render method안에 넣어야한다. react는 자동적으로 모든 class component의 re..

map함수를 활용하여 배열에 있는 요소를 수정해주려고한다. map은 array의 각 item에서 function을 실행하는 js function이며, function의 result를 갖는 array를 우리에게 다시 준다. 예를들어 아래와 같은 경우 배열은 [1,2,3,4] 에서 [0,0,0,0]으로 바뀌고 console.log에는 1 2 3 4가 각각 찍혀있는 것을 확인할 수 있다. 쉽게말해서 map함수안에 함수가 있고 그 함수의 인자로 각 배열의 요소가 들어온다. 그리고 return값이 그 요소의 값으로 바뀐다. ( return이 없으면 undefined를 반환함 ) 하지만 원래의 값에는 영향을 주지 않는다. const array = [1,2,3,4] array.map((current) => { con..

react를 활용하여 영화 웹 서비스를 만들어 보려고한다. 먼저 npx create-react-app movie_app_2021명령어를 사용하여 CRA를 만들어준다. npm은 현재 최신 버전의 노트 패키지를 데스크톱에 설치해 주는 도구이고, npx는 최신 버전의 노드패키지를 사용하게 해주는 도구이다. npx는 설치할 노드 패키지를 최신 버전으로 다운로드해서 설치한 다음 데스크톱에 남기지 않고 삭제한다. 한번 사용하고 말 노드 패키지를 굳이 데스크톱에 남길 필요는 없을 것이다. git에 repository를 만들고 git remote add origin 주소를하여 연동해주자!! 이제 npm start를 하면 CRA가 실행이된다!!! 오우야 App.js에서 이렇게 html을 return하는 함수를 만든다. ..

파일 업로드를 uploads를 서버가 아닌 AWS S3 버킷으로 바꾸려고 했고 multerS3를사용하여 storage를 변경해준 결과 갑자기 괴랄한 오류가뜨면서 나를 방해하기 시작했다. 일단 내가 heroku를 통해 배포한 웹사이트에서 AWS의 S3에 올려놓은 리소스(업로드한 파일)를 가져오려면 CORS 위반으로 자료를 가져올 수 없다고한다. 그냥 안된다. 이를 해결하려면 AWS에서 파일을 가져가는 것을 허용할 수 있게끔 설정을 해줘야한다. AWS S3 버킷에 있는 파일을 내 웹사이트로 가져오려고 요청(request)할 때, 요청헤더 (request header)에 Origin 프로퍼티에 내 사이트 주소를 담아서 보낸다. 그리고 요청을 받은 AWS 측에서는 응답헤더(response header)에 Acc..