Why not?

react app 사용하기 위해서는 node.js가 설치되어 있어야 한다. 기존에 node.js 가 다운로드 되어 있어서 바로 될 줄 알았는데.. npx 명령어를 쳐도 아무런 반응이 없었다.. (왜?) 찾아보니 node 버전 문제인 것 같아서 node를 삭제하고 다시 다운로드 하였다. node 버전 문제를 저번에도 겪었었는데 또 겪으니.. 조금 짜증이 나서 해결할 수 있는 방법이 없나 검색하다가 nvm을 통해 node를 설치하면 버전관리가 된다는 것을 알고! 따라해보았다. 굿! 근데 노트북이 너무 너무 너무 너무 느려서 npx create-react-app react-practice 명령어를 완료하는 데 15분 정도 걸린 것 같다.. (이거 맞나?) npm start 위의 명령어를 통해 react-app..

props: parent component가 child component 에 데이터를 보낼 수 있게 해주는 방법 component: JSX를 return 하는 함수 * Component를 재사용하는 법을 모르기 때문에 먼저, 각각의 버튼마다 component를 생성함 두 개의 버튼의 스타일을 같게 하기 위해서 style을 복사+붙여넣기하여 사용함 -> 비효율적 따라서 이 설정을 넘겨줄 수 있는 button component가 있다면 좋겠다! => 이 style을 모두 갖는 단 한 가지의 component있다면 이를 재사용하여 효율적으로 버튼을 만들 수 있음 Btn({text:"Save Changes"}) Btn 함수에 인자를 넘겨주는 것! 따라서 Btn 함수의 첫 번째 인자 속으로 Save Changes..

메리크리스마스 🎄 flipped 이 true인지 false인지에 따라 minutes 값을 hours로 변환할지, hours 값을 minutes로 변환할 지 결정한다. 이는 value 속성 에 삼항 연산자를 사용하여 구현하였음 flipped ? amount : amount / 60 => flipped 상태이면 state 값을 그대로 보여주고(amount), 아니라면 60으로 나눈 변환 값을 보여주기 flipped ? amount * 60 : amount => flipped 상태이면 60을 곱한 변환된 값을 보여주고, 아니라면 state 값을 그대로 보여주기(amount) onFlip 함수에 reset()을 추가한 이유는 flip 버튼을 누를 때마다 변환된 값을 그대로 가져오므로, reset을 하여 사용자가..

이전 state 값을 바탕으로 현재 state 값을 설정하고 싶다면 //modifier(counter+1); modifier((current)=>current+1); (current) => currnet +1이 return 하는 값이 새로운 state가 됨 아래 방법이 더 안전한 방법(counter가 다른 함수 내에서도 사용될 수 있음.. ) 왜? 위의 방법이 안전하지 않은 가 생각해봤는데.. React.useState()에서 counter state에서 값을 받아오면 modifier(counter+1)에서 새로 값을 세팅한다. 그런데.. useState가 실행되고 modifier가 실행되기 전에 다른 부분에서 counter를 바꾼다면 바뀐 counter 값이 적용되지 않아서 안전하지 않다고 이해함.. ..

오늘은 2일차이다. 새로운 것을 배우는 것은 역시 항상 재밌다. 조금 시간이 지나면 지루해지는데 리액트는 어떨지.. 흥미 잃지 않고 열심히 하자 끝까지! 아자자 그나저나 퇴근하고 스터디까지 하려니까 좀 힘듦..

3학년 2학기 캡스톤 프로젝트에서 리액트를 활용하여 웹 페이지를 만들었는데 리액트를 잘 몰라서 프론트 코드를 하나도 건드리지 못하였다. 대신 나는 Database와 Flask API로 크롤링 서버 만드는 역할을 맡았다. 하지만 캡스톤 프로젝트가 이번 학기로 끝나는 것이 아니고 방학 때도, 그리고 4학년 1학기 때도 계속 할 것이기 때문에 리액트를 공부해야 했다. 팀 프로젝트 뿐만이 아니더라도 리액트를 사용하는 곳은 굉장히 많다. 많은 사람들이 사용하는 데에는 그만한 이유가 있다. 따라서 12/21부터 약 2개월간 리액트를 공부하여 팀 프로젝트와 내 개인 개발 능력에도 더 많은 성과를 내고 싶다. 리액트의 ㄹ도 모르는 쌩초보가 시작하는 리액트 스터디... Nomadcoder의 react for beginn..