728x90 분류 전체보기51 ~0530 React Router 6월이다. 22년 절반이 지나가려해 일주일의 시작 월요일! 기분 좋게 내 사진으로 시작 +작성 시작은 월요일에 했는데 이것저것 치이느라 이제야 작성한다 푸하하 세상은 요지경 사진 좀 백예린 느낌 나지 않니 애들아 아니라고? 웅 저번에 정신없이 덕지덕지 강의에 route, await sync 등 나를 혼란하게 했다만 이번 수업으로 route는 좀 반가운 친구가 되었다. 오늘은 route의 작성법, 그리고 활용하는 방식들에 집중하면 된다. 가보자 고! 리액트 라우터 돔을 사용하기 위해 몇가지를 import 해야 하는데 Switch, Route, Browse as Router가 보이고 Link 또한 있는데 이건 나중에 배울 거니 일단 보류. 라우터에는 두 가지 종류가 있는데 Hash와 Browser 큰 차이는 없고 url의 생김새에 차이가 있다.. 2022. 6. 1. ~0529 React - Movie App pt.(1,2) 굿바이 서울 https://youtu.be/IKNJfPJFY8g 혁오 - Goodbye Seoul 금요일의 빡공, 토요일의 적절한 나태함, 다시 일요일에 돌아와서 담주 준비(청소, 계획) + 빡공 좋다 좋아. 강의 두 개분 분량 + 앞으로 클론 코딩의 기반 다지는 파트라 생각하고 들으면 될 것 같다. 특히 파일 쪼개기 할 때 내 뇌를 쪼개지 말고 파일 잘 쪼개는 법 이해하고 기억하자. 고 Movie App Pt.1 pt.1에서는 저번 시간에 만든 코인트래커에서 코인 API 대신 영화 API로 바뀌었다고 생각하면 될 것 같다. 우리가 클론 코딩해서 결과적으로 만들려는 건 넷플릭스 웹페이지니까 코드 보자 loading문구를 보여주기 위해 state를 만들었어. boolean 값을 갖는 loading과 true, fals.. 2022. 5. 29. ~ 0527 React coin-Tracker +뿌듯한 금요일 아무것도 없는 금요일이라 최소 강의 3개는 조지고, 술을 조지러 가야겠다.라고 생각한 내 마인드가 3시간 동안 조졌다. 어떻게 14분 분량의 강의를 거즘 3시간 소화시킨 거지 아무리 꼭꼭 씹어먹는 게 좋다만, 과하다. 과유불급! 사실 강의 14 분치고 양이 많은 것도 있었는데, 혼자 숙제하느라 시간을 많이 잡아먹었다. 내 수준도 어느 정도 체감했고 값졌다. 이렇게 오랜 시간 집중한 것도 오래간만이고. 아 오늘 든 생각인데, 강의를 다 듣고 코드를 혼자 적어보거나 예외적인 내용들 추가해보는 습관도 들이면 좋을 것 같다. 서론이 역시나 오늘도 길었다 가보자 고! 오늘 만들건 coin Tracker 방대한 이름과는 다르게 암호화폐들 api를 싹 긁어와 이름, 가격, 상징 등 나열하는 것 + 독학 숙제 일단 시.. 2022. 5. 27. ~0524 React toDolist pt.2 천천히 오가는 대화 속에 toDoList를 이어서 제작한다. 추가할 기능은 크지 않다. 저번에 만든 기능 + 할 것들 적으면 li태그로 하나하나 나열하는 식 우리가 js바닐라로 만들 때는 html로 만들었다가, js로 입력한 것들 나타내기 하면서 꽤나 많은 코드가 쓰였는데 그거랑 비교해보자. pt1 때 만든 array(toDos)안에는 여러 요소들이 존재하는데, 이 요소들을 각각의 컴포넌트로 만들고 싶다. 여기서 우리는 map함수를 이용 할 것인데, array.map(array의 item을 변경시킬 함수) 배열의 각 item 하나하나함수가 실행되고 그 값을 return한다. toDos array에 map함수를 그리고 변경시키는 내용은 item(내가 적은 할 것들)을 li태그로 묶인 item(내가 적은 할 것들)로 return 하.. 2022. 5. 26. ~0524 React toDolist pt.1 본격적으로 프로젝트를 시작함에 있어 toDoList 할 일 적어놓는 것을 만들건데 이건 바닐라자바스크립트로도 만들어 봤는데 우린 리액트를 배우니까 리액트를 사용해 더 효율적으로 코드를 작성할 수 있다하니 배워보자. 고 13line return부터 보면 input의 입력을 하면 onChange를 통해 입력 값을 가져오고(배웠음 수도 없이), toDo는 이 value를 나타낸다. 그리고 form태그를 추가해 onSubmit으로 버튼 클릭시 line7~ 아무값도 없이 클릭 했을 시 return으로 함수를 종료하고, setToDo를 통해 입력창을 빈칸으로 만든다. state 설명은 생략 여기까지는 toDoList에서 해야 할 일을 입력하는 입력창을 만든 과정 되시겠다. toDos를 array로해서 직접적으로 a.. 2022. 5. 25. ~0523 cleanUp 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.. 2022. 5. 23. ~0519 useEffect (미루지말자 let's not procrastinate) 오늘은 20일에 강의 다 듣고 정리한 것을 대학 친구들 만나고, 집에 온 아버지랑 놀고, 영화 보느라 이제야 쓴다. 당일에 정리했으면 지금 새로운 강의 듣고 진도 나갈텐데 끙 이제라도 앉은 게 어디냐 정리하자. ※오늘의 문제점 특정코드 실행을 제한하고 싶음※ 리액트는 component내의 state가 변경, props로 전달받은 인수가 변경, 부모컴포넌트가 렌더링 되면 해당 컴포넌트는 리렌더링 되는 유용한 기능이 있다. 다만, 우리가 원치 않는 부분까지 리렌더링 하게된다. 예를 들어 접속시 회원의 이름은 console.log를 통해 알려주는 코드가 있으면 우리가 검색 기능을 사용하기 위해 input창에 입력 시 console.log는 처음 한 번만 나타나면 되는 기능인데도 위의 여러 이유로 리렌더링 된다.. 2022. 5. 22. ~0515 REACT 프로젝트 시작 발등에 불 본격적으로 프로젝트가 시작되었다. 지금껏 만든 방식 그대로 Button을 한 개 만들어 볼 것이다. 자바스크립트에서는 애플리케이션을 실행하기 위해 한 파일에서 코드를 작성하기에는 너무 불편한 점이 많기에 하나의 파일을 여러개로 쪼개는 것이 가능한데, 그때 사용하는 것이 import와 export이다. export를 붙인 모듈은 파일 외부에서도 import를 통해 사용할 수 있다. 두 파일의 오작교 같은 역할이다. 지금 위의 line5에서도 이 버튼을 외부에서 즉 index.js에서 사용하기 위해 적은 것이다. 비교적 되게 최근에 한 것들이 여러 보인다. Button.js에서 Button을 만들고 Button {text}에 들어갈 형식을 string으로 정해주는 propTypes를 npm i 를 통해 설치.. 2022. 5. 15. ~0513 React project시작 본격적으로 프로젝트를(클론 코딩) 시작하기 앞서 몇 가지 준비물을 갖추자 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.. 2022. 5. 15. 이전 1 2 3 4 5 6 다음 728x90
