전체 글

화이팅
·코딩/REACT
useEffect의 마지막 기능이자, 프로젝트 전 마지막 진도인 cleanUp에 대해서 배워 볼 것이다. 바로 예제로 고 저번에 배운 useEffect를 사용한 코드로 버튼에서 사용할 state를 하나 만들고, 클릭함에 따라, state의 showing값이 true, false를 오가며 버튼은 Show, hide를 보여준다. 그리고 true일 경우 line13과 같이 Hello 컴포넌트를 실행시키고 false일 경우 아무 것도 하지 않는다. useEffect에는 콘솔창에 "나 여기 있어!" 해주는 기능과 Hello라는 h1태그를 return 해준다. 지금의 경우 showing이 false, true값을 가질 때마다 Hello 컴포넌트를 삭제 생성하곤 한다. useEffect안에 (return 새로운 fu..
·코딩/REACT
오늘은 20일에 강의 다 듣고 정리한 것을 대학 친구들 만나고, 집에 온 아버지랑 놀고, 영화 보느라 이제야 쓴다. 당일에 정리했으면 지금 새로운 강의 듣고 진도 나갈텐데 끙 이제라도 앉은 게 어디냐 정리하자. ※오늘의 문제점 특정코드 실행을 제한하고 싶음※ 리액트는 component내의 state가 변경, props로 전달받은 인수가 변경, 부모컴포넌트가 렌더링 되면 해당 컴포넌트는 리렌더링 되는 유용한 기능이 있다. 다만, 우리가 원치 않는 부분까지 리렌더링 하게된다. 예를 들어 접속시 회원의 이름은 console.log를 통해 알려주는 코드가 있으면 우리가 검색 기능을 사용하기 위해 input창에 입력 시 console.log는 처음 한 번만 나타나면 되는 기능인데도 위의 여러 이유로 리렌더링 된다..
·코딩/REACT
본격적으로 프로젝트가 시작되었다. 지금껏 만든 방식 그대로 Button을 한 개 만들어 볼 것이다. 자바스크립트에서는 애플리케이션을 실행하기 위해 한 파일에서 코드를 작성하기에는 너무 불편한 점이 많기에 하나의 파일을 여러개로 쪼개는 것이 가능한데, 그때 사용하는 것이 import와 export이다. export를 붙인 모듈은 파일 외부에서도 import를 통해 사용할 수 있다. 두 파일의 오작교 같은 역할이다. 지금 위의 line5에서도 이 버튼을 외부에서 즉 index.js에서 사용하기 위해 적은 것이다. 비교적 되게 최근에 한 것들이 여러 보인다. Button.js에서 Button을 만들고 Button {text}에 들어갈 형식을 string으로 정해주는 propTypes를 npm i 를 통해 설치..
·코딩/REACT
본격적으로 프로젝트를(클론 코딩) 시작하기 앞서 몇 가지 준비물을 갖추자 1. Create React App을 위해 Nodejs 를 설치해야 한다.(많은 스크립트와 사전 설정을 도와줘 애플리케이션을 만들기 훨씬 쉽고 유용하다. 1-1 Nodejs 홈페이지에 들어가 내게 맞는 버전을 설치 후 cmd를 열어 npm -v를 한다. 설치가 되었다면 현재의 버전이 보일 것이다. 1-2 npx커맨드를 사용할 수 있는지 확인한다. 나의 경우엔 'npx를 사용하기 위해서는 ~을 설치해야합니다. 라고 뜨길래 설치했다. 1-3 npx create-react-app (내가 원하는 프로젝트 명) 나는 my-react-project라고 했다. 막 이것저것 만들고 우당탕탕 한다. 기다리면 다 만들어졌다는 문구가 뜬다. 생성된 M..
·코딩/REACT
닥터 2를 안 봤다면 스포 없으니까 걱정 붙들어 매라. 끄응 영화에서 완다가 자신의 욕심에 개판을 치는데 닥터가 막고 싸우는 내용인데, 이 영화 꽤나 혹평이 많았다. '갑자기 왜 화났냐 완다?'. '쟤네 뭔 이야기 하는 거임?' 등 암튼 그래서 안 그래도 이해 잘 못하는 나 유튜브로 공부 좀 하고 봤다. 이 영화로 단편적으로 완다를 본다면 좀 딱하기는 해도, 절대적인 악 느낌이다. 막무가내에, 제멋대로에, 못말려 짱구 근데 앞의 내용이나 완다가 왜 흑화했는지 알고 나면 다르게 보인다. 오히려 막는 닥터가 너무하게도 느껴지기도 한다. 전쟁터 출신, 눈앞에서 가족 잃음, 지구 지켰는데 욕먹음, 어렵게 만난 남편 자기 손으로 죽이고, 부관참시 목격함. 진작에 지구 부셨어도 할 말없는 수준, 완다 지구부셔! 아..
·코딩/REACT
복학까지 어느덧 4개월 남은 5월이 왔다. 요즘 친구들을 만날 때면 시간 진짜 빠르지 않냐? 하는데 나 빼고 다 느린 시간 속에 살고 있나 보다. 다들 느리다고 한다. 암만 봐도 너무 빠른데 三三ᕕ ⍢⃝ ᕗ 남은 4개월도 전역하고 보낸 4개월보다 더 보람찬 4개월을 보내자는 각오를 갖고 5월을 맞이했다 서론이 길었네 고 오늘은 저번시간에 열심~~히 만든 변환기 다 지우고 시작한다. 본격적으로 클론코딩 프로그램을 시작하려나 보다. 눈물을 머금고 저번에 만든걸 지운 후, 배우려는 개념은 prop이고, 배우기 위해서 만들건 두 개의 버튼 끝! 당연히 버튼을 만드는 것 보다 안에 들은 동작원리와 prop, 컴포넌트의 개념을 이해하자. 우리가 앱을 만드는 상황이라고 가정하고, 변경한 내용을 저장하는 저장버튼, 확..