oyatplum

3. To-do_1 : react-hooks란 무엇인고 React Hooks란 지금까지 사용한 class 없이 state를 사용할 수 있는 새로운 기능이다. 리액트에는 클래스 컴포넌트와 함수형 컴포넌트가 있었지!! 여기서 리액트는 주로 클래스 컴포넌트를 사용하고 리액트 훅스는 주로 함수형 컴포넌트를 사용한다... 클래스 컴포넌트와 함수형 컴포넌트를 비교해볼까 클래스 컴포넌트 : 더 많은 기능 제공, 더 긴 코드의 양, 더 복잡한 코드, 더딘 성능 함수형 컴포넌트 : 더 적은 기능 제공, 짧은 코드의 양, 더 심플한 코드, 빠른 성능 그렇다면 함수형 컴포넌트가 클래스 컴포넌트에 비해 적은 기능을 제공한다면.... 어떤 기능을 제공하지 못 하는걸까?? 리액트에는 생명 주기가 있다. 이는 Mounting > ..

2. To-do_1 : Filter 메소드를 사용해서 할 일 목록 지우기 x 버튼을 누르면 해당 할 일 목록이 사라지도록 해보자!!! 그러면 x 버튼을 클릭했을 때 클릭 이벤트가 발생하면서 함수를 호출해야겠지!? 그래서 이렇게 버튼 태그에 onClick 메소드를 이용하여 클릭을 했을 때, handleClick이라는 함수가 호출되도록 해주었고 넘겨줄 인자는 유니크한 값인 id!!!를 넘겨주어따아아아아 이제 handleClick 함수를 써보자 여기서 사용할 메소드는 filter() 메소드!!! 이게 무엇인고 하면... 주어진 함수의 조건을 만족하는 모든 요소를 모아서 새로운 배열로 반환하는 것이다. 좌... 이렇게 handleClick 함수를 구현했다. 우선 인자로는 지우려고 하는 목록의 id를 가져왔었고 ..

학습 목표 to-do 앱을 만들어 보자고!!!!! 1. To-do_1 : 할 일 목록 앱 컨테이너 생성 우선 기본적으로 불필요한 App.js , App.css , index.css의 내용을 지워줬다. 배경 색은 강의와 동일하게 aliceblue로 했고 이는 index.js 에서 index.css를 import 하기 때문에 화면에 그려질 수 있는 것이다! 이제 배경 위에 올라올 컨테이너를 만들 것이다. 리액트에 대해 알아보면서 클래스형 컴포넌트와 함수형 컴포넌트가 있다는 것을 배웠었다.. 우선 클래스형 컴포넌트로 만들어보자!! 자... 설명을 해보자면 리액트는 라이브러리였다. 그래서 {Component} from "react"는 리액트에서 컴포넌트를 가져온다는 뜻! 그리고 그 컴포넌트를 리액트에서 사용할 ..

2. 리액트란_1 : 리액트의 기본 구조 설치한 리액트 폴더 구조를 살펴볼 것이다. 우선 index.html과 index.js는 이름을 바꾸면 안된다!! 그리고 src 폴더에 JS와 CSS 파일들을 넣으면 된다. Webpack은 여기에 있는 파일만 보기 때문에 이 폴더 이외에는 webpack에 의해 처리되지 않는다. +) webpack은 간단히 여러 자바스크립트 코드를 압축하여 최적화하는 것이라고 생각하면 된다! 또 알아야 할 파일은 Package.json 이는 해당 프로젝트에 대한 정보들이 들어있다. 라이브러리들의 이름과 버전들, 스크립트들이 명시되어있고 node_moduls 폴더가 삭제되어 있다면 npm install을 통해 설치하면 된다!!! 2. 리액트란_2 : 리액트 실행 계속했던 것처럼 리액트..

학습 목표 리액트 박살내기 to-do 앱과 netflix 앱을 구현해보자!!! 앞으로의 리액트 관련 포스트들은 인프런의 이 강의를 바탕으로 이루어 질 것이다!! 1. 리액트란_1 : 리액트는 프레임워크가 아닌 라이브러리 웹 앱을 만드는 Tool에는 react, vue, angualar 등이 있다. 이들의 가장 큰 차이점은 vue와 angualar는 프레임워크이며 react는 라이브러리이다. 그렇다면 프레임워크와 라이브러리의 차이점은 무엇일까?? 1. 프레임워크 : 앱을 만들기 위해 필요한 대부분의 것을 가지고 있음 2. 라이브러리 : 어떠한 특정 기능을 모듈화 해놓은 것 즉, 프레임워크는 라이브러리와 코드를 포함하고 코드는 라이브러리를 호출하는 형태이다. 따라서 내가 지금 사용하려고 하는 리액트는 프레임..

6. 최종 음... 기존의 툴은 재미 없어서 내 맘대로 바꾼 명수옹 검색 페이지 구현... ㅎㅎㅎㅎ... ㅎㅎㅎㅎ........ 귀여운 명수다. 까칠한 명수고 신이난 명수이며 라푼젤 명수에 현실적 명수까지 ㅎㅎㅎㅎ 아무리 생각해도 이렇게 냅다 SearchModel을 찍어내는 것보다 효율적인 방법이 있을 것 같은데.... 더 공부해야겠다. 헤헤 그래도 조금 허술한 명수옹 페이지 구현 완료>..

5. 최근 검색어 구현_1 : 최근 검색어 목록이 탭 아래 위치! 목록에서 검색어 클릭하면 해당 화면으로 이동!목록에서 검색어를 클릭하면 결과 화면으로 이동! 이는 추천 검색어에서 구현한 것과 비슷하다. 추천 검색어에서는 keywords로 빈 배열을 만들었듯이 최근 검색어에서는 histroy로 빈 배열을 만들었다. 그리고 최근 검색어 역시 history가 있을 경우와 없을 경우를 나누어서 html을 작성했다. 이렇게!! 그리고 fetchKeyword와 마찬가지로 fetchHistory를 통해 최근 검색어 데이터를 불러왔다. KeywordModel을 import 해오고 함수 구현도 동일하게 작성해주었다. 이러면 v-if 문을 작성할 수 있게 되었기 때문에 이 역시도 동일하게 이렇게 작성해주었다. 그러면 헤..

4. 추천 검색어 구현_1 : 번호, 추천 검색어 목록이 탭 아래 위치하도록 해보장~~~ 검색 결과를 searchResult 변수로 받은 것처럼 추천 검색어로 데이터를 받아 올 것이다. 어디서??? 모델에서!! 그래서 이렇게 data에 keywords 라는 빈 배열의 변수를 만들어 주었다. 그러면 이제 이 데이터가 있을 경우와 없을 경우를 따져줘야겠죵 그래서 추천 검색어 목록이 있던 div에 또 다시 v-if , v-else로 나누어 분리를 해주었다. 그리고 keywords가 있는 경우엔 모델에서 데이터를 가져와야 하기 때문에 KeywordModel를 inport 해오고 이는 뷰 인스턴스가 처음 실행이 될 때 가져올 것이기 때문에 created함수에서 this.fetchKeyword라는 함수를 호출하도록..

3. 탭 구현_1 : 추천 검색어, 최근 검색어 탭이 검색 폼 아래 위치! 기본적으로 추천 검색어! 추천 검색어와 최근 검색어라는 데이터를 이렇게 tabs 라는 변수에 배열로 넣어주었고 html로 돌아와 v-if 에 submitted를 div로 만들어줬었기 때문에 검색 결과 창이 아닌 경우 v-else에 이렇게 JS에서도 ul태그의 tabs의 class를 tabs로 해줬으니까... 맞춰주고 li 태그를 반복문으로 돌기 때문에 역시 v-for 사용! 그리고 출력할 탭들을 {{tab}}으로 작성해주면 추천 검색어와 최근 검색어가 차례로 출력이 된다.... 이렇게!! 그런데 출력될 탭을 {{tabs}}로 s를 붙여주면 이렇게 변수였던 tabs가 두 번 나오게 되는 것을 확인할 수 있다.... s의 영향력이 크..

2. 검색 결과 구현_1 : 검색 결과가 검색 폼 아래 위치하고 보이게! 우선 검색 결과 데이터를 정의해줘야 한다. JS에서 배열로 받았기 때문에 여기서도 뷰의 데이터에 빈 배열을 넣어줬다. 이렇게 빈 배열인 searchResult를 만들어 줬다. 그리고 이 searchResult를 html에서 출력할 부분을 만들어준다!! 데이터가 있을 경우와 없을 경우를 나누어서 있을 경우에는 배열의 길이가 있도록! 이렇게 검색폼인 form 태그 아래에 v-if 와 v-else를 사용해서 만들었다.. v-if는 " " 안의 값이 참일 경우에만 내용을 출력하도록 해준다!!! searchResult는 배열이기 때문에 배열을 순회하면서 출력해주면 되겠지! 검색 결과는 ul 태그를 이용해서 만들어줬고 li 를 출력하도록 한다..