React

이제껏 강의를 들으면서 잘 모르고 넘어간 것들 제목에 쓰여있는 3가지를 오늘 정리 + 이해해 볼 것이고 지금부터는 내가 직접 코드 작성하고, 파일도 분할해야 하기에 어떤 기능을 위해 쓰였는지 왜 이렇게 작성되었는지 알아야 해서 정리한다 가보자. 아 그리고 여러 블로그, 공식 사이트를 참조했지만 대부분의 내용은 이 두 분의 글을 통해 이해했다. 여러 가지 프런트엔드 관련 좋은 글이 많으니 심심하거나 궁금한 게 있으면 들어가서 보도록 하자. https://joshua1988.github.io/ 캡틴판교 joshua1988.github.io https://velog.io/@change change (Change) - velog velog.io async, await를 이해하려면 비동기 처리, promise나인..

강의를 다 들었다. 들어서 리액트를 마스터했냐? 절~대 아니다 알바를 시작할 때 불편할 거 같아서 옆에서 지켜보세요~하면 다음주에 혼자 일하면 하나도 기억 안 나고 어렵다. 이런 너낌으로 나도 강의 자체가 클론 코딩인 만큼 보고 배운 부분은 머릿속에 어느 정도 넣은 상태이고, 이걸 다시 내 입맛에 정리해보면서 만드는 시간이 필요하다. 어떤식으로? 내가 한 강의의 최종 목적은 넷플릭스 같은 영화 사이트 만들기 많은 영화들을 사람들의 입맛에 맞게 + 보기 좋게 정리한 것이 많은 OTT사이트들의 특징이다. 이 정도는 아니어도 비슷하게끔 만들어 볼 것이다. 내 사이트의 현재 상태는? 흰 도화지 같은 상태인 이 페이지를 내 입맛에 맞게 + OTT페이지답게 만들어 볼 것이다. 중간중간 무슨 작업했는지 올릴 수도 있..

퍼블리싱이 하도 안돼서 이 방법, 저 방법 끙끙 대가가 겨우 해결해 글을 작성한다. 고생했어 본인 토닥 이번 시간에 해볼 건 내가 만든 사이트 배포하기 기껏 만들었는데 남들이 보게끔 만들어야 한다. 오늘은 배포하는 방법을 알아보려 한다. 가장 먼저 할건 gh-pages 설치하기 터미널 창에 npm i gh-pages입력 우리 결과물을 깃허브 페이지에 업로드하게끔 해준다. (우리가 만든 파일들 gh-pages의 branch에 publish) 두번째 여러 가지 정보들이 있는 package.json으로 이동해보면 scripts에 build라는 것이 보이는데 build를 실행시 우리의 웹사이트의 production ready code(코드 압축 + 최적화)를 생성하게 됨 즉 브라우저가 인식하기에 최적화된 코드로..

어제, 수업을 마치고 10시 어간이 되어 나가 보니, 집이 물바다가 됐다. 처음에 냉장고 밑에서 물이 새서 아 냉장고 문제겠거니 조금 물 막고, 내일 사람을 불러야겠다. 했는데.. 그랬는데 상황이 심각해져서 무슨 여름시즌 한정 이벤트인지 물이 계속 나와서 거실을 흥건히 적셨다. 집이 1층인게 죄인지는 몰라도 오늘 아침에 배수구 수리업체에서 오셔서 조치해주고 가셨다. 아직도 쿰쿰한 냄새가 난다 하필 아버지 내려가셨을 때 이런 일이 벌어지다니 난 역시 아직 얼라야. 이런 나를 향한 세상의 억까 속에서도 글을 작성해보자. 고 react-router는 동적 url을 지원한다. (url에 변수를 투입 가능) 이를 통해 저번 시간 발만 담갔던 Detail페이지 구현이 가능해졌다. 영화 페이지에서 제목을 클릭하면 그..

일주일의 시작 월요일! 기분 좋게 내 사진으로 시작 +작성 시작은 월요일에 했는데 이것저것 치이느라 이제야 작성한다 푸하하 세상은 요지경 사진 좀 백예린 느낌 나지 않니 애들아 아니라고? 웅 저번에 정신없이 덕지덕지 강의에 route, await sync 등 나를 혼란하게 했다만 이번 수업으로 route는 좀 반가운 친구가 되었다. 오늘은 route의 작성법, 그리고 활용하는 방식들에 집중하면 된다. 가보자 고! 리액트 라우터 돔을 사용하기 위해 몇가지를 import 해야 하는데 Switch, Route, Browse as Router가 보이고 Link 또한 있는데 이건 나중에 배울 거니 일단 보류. 라우터에는 두 가지 종류가 있는데 Hash와 Browser 큰 차이는 없고 url의 생김새에 차이가 있다..

https://youtu.be/IKNJfPJFY8g 혁오 - Goodbye Seoul 금요일의 빡공, 토요일의 적절한 나태함, 다시 일요일에 돌아와서 담주 준비(청소, 계획) + 빡공 좋다 좋아. 강의 두 개분 분량 + 앞으로 클론 코딩의 기반 다지는 파트라 생각하고 들으면 될 것 같다. 특히 파일 쪼개기 할 때 내 뇌를 쪼개지 말고 파일 잘 쪼개는 법 이해하고 기억하자. 고 Movie App Pt.1 pt.1에서는 저번 시간에 만든 코인트래커에서 코인 API 대신 영화 API로 바뀌었다고 생각하면 될 것 같다. 우리가 클론 코딩해서 결과적으로 만들려는 건 넷플릭스 웹페이지니까 코드 보자 loading문구를 보여주기 위해 state를 만들었어. boolean 값을 갖는 loading과 true, fals..

아무것도 없는 금요일이라 최소 강의 3개는 조지고, 술을 조지러 가야겠다.라고 생각한 내 마인드가 3시간 동안 조졌다. 어떻게 14분 분량의 강의를 거즘 3시간 소화시킨 거지 아무리 꼭꼭 씹어먹는 게 좋다만, 과하다. 과유불급! 사실 강의 14 분치고 양이 많은 것도 있었는데, 혼자 숙제하느라 시간을 많이 잡아먹었다. 내 수준도 어느 정도 체감했고 값졌다. 이렇게 오랜 시간 집중한 것도 오래간만이고. 아 오늘 든 생각인데, 강의를 다 듣고 코드를 혼자 적어보거나 예외적인 내용들 추가해보는 습관도 들이면 좋을 것 같다. 서론이 역시나 오늘도 길었다 가보자 고! 오늘 만들건 coin Tracker 방대한 이름과는 다르게 암호화폐들 api를 싹 긁어와 이름, 가격, 상징 등 나열하는 것 + 독학 숙제 일단 시..

본격적으로 프로젝트를 시작함에 있어 toDoList 할 일 적어놓는 것을 만들건데 이건 바닐라자바스크립트로도 만들어 봤는데 우린 리액트를 배우니까 리액트를 사용해 더 효율적으로 코드를 작성할 수 있다하니 배워보자. 고 13line return부터 보면 input의 입력을 하면 onChange를 통해 입력 값을 가져오고(배웠음 수도 없이), toDo는 이 value를 나타낸다. 그리고 form태그를 추가해 onSubmit으로 버튼 클릭시 line7~ 아무값도 없이 클릭 했을 시 return으로 함수를 종료하고, setToDo를 통해 입력창을 빈칸으로 만든다. state 설명은 생략 여기까지는 toDoList에서 해야 할 일을 입력하는 입력창을 만든 과정 되시겠다. toDos를 array로해서 직접적으로 a..

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..