휴지통../React (8) 썸네일형 리스트형 🔎 브랜드를 찾아줘 승훈이와 함께 Google Megazone 공모전 "클라우드를 부탁해" 공모전에 나가기로 했다. 주제 : 브랜드를 찾아주는 머신러닝 프로젝트 개발 기간 : 02.27 ~ 03.13 (승훈이는 정보처리기사, 나는 취준을 하기 때문에 많은 시간을 투자하지는 못했다.) client 폴더에서 React View를 설정하고, server.js 파일로 node JS 서버를 구현하였다. 초기화면이다. 사용자들이 가장 많이 검색한 브랜드와 검색 횟수를 알려주는 텍스트를 보여주고, 내가 원하는 브랜드 사진을 업로드 할 수 있는 버튼, 가까운 해당 브랜드 상점을 확인할 수 있는 Google Map 창이 있다. ( Google Cloud에서 제공하는 Google Map API를 이용하여 Google Map 구현 ) 이미지를.. React - 기초 ( 단어장2 API , Hooks, REST_API) - API 지금까지는 data.json에 있는 더미 데이터 파일을 import 해서 사용하였지만 이제는 해당 json 객체를 node js에서 지원하는 json-server 모듈을 이용하여 사용하기로 했다. json-server json-server --watch ./src/db/data.json 명령어를 이용하여 3001번 포트에 API로 받을 객체를 띄어준다. 이후 해당 주소창을 검색하면 위와 같이 객체들을 확인할 수 있다. 이렇게 받아온 객체들은 단어들을 표시하는 경우, DAY를 표시하는 경우 등 많은 경우에 사용되기 때문에 React Hooks를 이용하여 작성을 할 것이다. - React Hooks useFetch라는 hooks을 만들어주고, 원하는 컴포넌트에 import useFetch from.. React - 기초 ( 단어장1 더미 데이터,이벤트 ) 앞에서 배운 기초를 토대로 유튜브 채널 코딩앙마의 단어장 만들기 프로젝트를 중심으로 단어장 프로젝트를 만들어보았다.(물론 영상을 보면서) - App.js React에서 초기화면을 보여주는 부모 컨테이너 App.js이다. React는 SPA(Single Page Application) 이용하여 다양한 페이지를 바꾸어 주기 때문에 react-router-dom을 이용하여 페이지를 핸들링 한다. BrowserRouter를 이용하여 컴포넌트를 바꾸어주고 Header와 같이 계속해서 같은 화면이 나오는 부분은 Switch 밖으로 화면이 계속해서 바뀌는 부분은 Switch로 바꾸어준다. - Header.js 헤더 부분이다. 단어를 추가하는 버튼과 Day를 추가하는 두개의 버튼으로 이루어져 있고, 토익 영단어 고급을.. React - 기초 ( Props) - Props 위 사진과 같이 부모 컨테이너에서 age 변수를 설정해 준 후 자식 컨터이너에서 매개변수를 통해 props를 받아준다. console.log를 활용해서 props를 확인해 보았다. age를 10, 20, 30 으로 설정한 3개의 State 컴포넌트를 선언했기 때문에 3가지의 결과가 나오는 것을 확인할 수 있다. 부모컨테이너를 통해 받은 props를 useState를 통해 해당 컴포넌트 변수로 설정해줍니다. props.age를 설정 한 후에 삼항 연산자를 이용하여 19세 초과면 성인 이하면 미성년자임을 표기합니다. 해당 사진과 같이 결과가 나오는 것을 확인할 수 있습니다. JSX 부분의 age를 위에 선언해준 age를 setAge를 이용하여 {age}로 선언 후 setAge(age+1)로 선.. React - 기초 ( useState ) - ChangeName() JSX 부분에 name변수를 출력하는 h2 태그와 클릭 시 Mike와 Jane으로 이름을 변경해주는 함수를 만들어 주었다. 하지만 버튼 클릭시 이름이 바뀌지 않고, console.log를 통해 이름을 확인해 보면 변수가 계속해서 바뀌는 것을 확인할 수 있다. 이러한 경우를 해결하기 위해서 바닐라 JS에서는 document.getElementById("name").innerText = name; 구문을 통해 위 처럼 JSX의 이름 값이 바뀌는 것을 확인할 수 있다. 이러한 구문 없이 상태값을 자유자재로 바꾸기 위해서 React에서는 Hooks 를 제공한다. Hooks 란 컴포넌트를 함수형으로 작성하여 상태값을 컨트롤 할 수 있는 기능이다. - UseState useState의 기.. React - 기초 ( 이벤트 핸들링 ) - React 이벤트 핸들링 리엑트는 이벤트를 핸들링 하기 위해 함수를 사용한다. 이벤트를 발생시키기 위해서 2개의 버튼과 한개의 Input박스를 만들었다. showName함수는 클릭 이벤트 발생 시 console.log를 통해 이름을 보여주는 함수이고, showAge는 showName과 같이 나이를 보여주는 함수이다. showName은 매개변수 없이 직접 이름을 입력하였고, showAge는 매개변수를 통해 console.log를 진행했다. 이벤트 발생 시 개발자 도구를 통해서 이벤트 발생 여부를 확인할 수 있다. - e.target 다음은 Input박스를 통한 이벤트 핸들링이다. input박스를 통해 입력을 한 값은 이벤트 객체인 e를 통해서 e.target.value로 값을 확인 할 수 있다. (해당.. React - 기초 ( 컴포넌트, 변수,CSS ) - React 기초 초반 create-react-app 과 초기 설정 같은 부분은 뛰어넘고 진행할것이다. 해당 글은 유튜브 강의 : https://www.youtube.com/watch?v=05uFo_-SGXU 를 보고 진행할것이다 - APP.js react는 Index.js로 부터 시작하는데 위의 사진 JSX 부분과 같이 를 통해 REACT가 실행되는것을 확인할 수 있다. - 컴포넌트 기초 강의 중 컴포넌트 설명을 들으면서 3가지의 컴포넌트를 설정하였다. - Test.js name 이라는 변수와 naver 라는 객체 변수를 설정하여 { } 를 통해 변수를 표시하였습니다. - Css.js React에서는 다양한 방법으로 CSS 스타일을 적용할 수 있는데 두가지의 방법으로 진행하였습니다. 1. 인라인 첫번.. REACT - 코로나 집계 React를 이용한 코로나 집계 사이트 코로나 관련 뉴스를 찾아보던 도중 React를 활용한 간단한 코로나 집계 사이트 강의가 있어서 만들어 보았습니다. 컴포넌트 관리 컴포넌트는 내용을 담는 Content와 Header로 설정 API 불러오기 코로나 관련 API는 https://api.covid19api.com/dayone/country/kr 오픈 API를 사용하였습니다. useEffect를 사용하여 페이지 로딩과 함께 API를 불러오고 불러온 items를 reduce를 통해 각각의 객체를 분류합니다. find를 활용해서 값이 유효한 경우에 값을 불러오도록 설정해 줍니다. API를 통해 불러온 값을 차트를 사용하여 화면에 나타내기위해서 react-chartjs-2를 사용합니다. 저는 강의와 같이 Bar,.. 이전 1 다음
