oyatplum

8. 최종 우선 내가 만들고 있던 깃허브 배포 페이지에 리액트 프로젝트를 더 확실하게(?) 배포하려면... 그러니까 다른 사용자도 와서 내가 만든 것 좀 구경하게끔ㅋㅋ.. 하고 용량도 관리를 해주려면 build를 해줘야 한다. https://velog.io/@nemo/github-page-deploy-%EB%B0%B0%ED%8F%AC [React] 깃허브 페이지에 리액트 프로젝트 배포하기 자, 이제 제작한 앱을 깃허브 페이지에 배포해보자.메인 디렉토리 URL : https://{본인아이디}.github.io/서브 디렉토리 URL : https://{본인아이디}.github.io/movie-app우리는 메인이 아닌 서브 디렉토리에 배 velog.io 그래서 이 사이트를 참고해서 다... 올려줬고 이제 강의..

7. To-do_1 : 리액트 확장 프로그램 추가하기 이전 포스팅에서 React.memo를 통해 console을 찍으면서 리렌더링의 유무를 확인했었다. 이건 리액트 확장 프로그램을 통해서도 확인할 수 있다. 구글에서 '크롬 확장 프로그램'으로 검색을 해서 크롬 웹 스토어에 들어가 리액트를 검색하면 이렇게 개발 툴이 나오고 여기서 크롬에 추가를 하면 바로 확장 프로그램이 추가된다. 이제 우리가 만든 앱을 크롬으로 시작하면 리렌더링 되는 부분을 설정에서 보이도록 설정했을 때... 리렌더링 되는 부분이 색깔로... 표시된다고 한다... 나중에 크롬으로 열어서 확인해봐야겠다!! 7. To-do_2 : 할 일 리스트 모두 지우기 버튼 생성 이건 간단하게 할 수있다. App.js에서 할 일 목록 다음에 handle..

6. To-do_1 : 리액트 불변성 지키기 불변성이란 사전적 의미에서 값이나 상태를 변경할 수 없는 것을 의미한다. 자바스크립트는 두 가지의 타입이 있다. 1. 원시 타입 : Boolean, String, Number, null, undefined, Symbol 2. 참조 타입 : Object, Array 여기서 원시 타입은 불변성을 가지고 있고 참조 타입은 그렇지 않다. 자바스크립트에서는 원시 타입에 대한 참조 및 값을 저장하기 위해 call stack 메모리 공간을 사용하고 참조 타입인 경우 heap이라는 별도의 메모리 공간을 사용한다. 이 경우 call stack은 개체 및 배열 값이 아닌 메모리에만 heap 메모리 참조 ID를 저장한다. 즉, 원시 타입은 고정된 크기로 call stack 메모리..

5. To-do_1 : Drag and Drop 기능 추가하기 Drag and Drop 기능을 구현하는 순서로는 1. html 드래그 앤 드랍 api를 사용하여 원하는 목록을 드래그 가능하게 만든다. 2. 사용자가 드래그 할 때 적절한 애니메이션을 준다. 3. 사용자가 드래그를 멈췄는지 확인하고 여기에도 애니메이션을 준다. 4. 클라이언트가 목록을 재설정한 경우 항목의 위치를 새 항목으로 업데이트한다. >> 이것을 쉽게 구현할 수 있도록 해주는 모듈이 react-beautiful-dnd 이다. 따라서 이 모듈을 설치해보자~!! 후후 요로콤시 해주면 된다. 여기서 제공해주는 드래그 앤 드랍 api를 살펴보면 1. : 드래그 앤 드랍 하길 원하는 부분 전체를 감싸준다. 2,3 포함 2. : 드래그 앤 드랍하..

4. To-do_1 : 구조 분해 할당(Destructing) 구조 분해 할당이란 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식이다. 말 그대로 구조를 분해하는 것이라고 보면 된다. 구조 분해 할당은 clean code!! 깔끔한 코드를 위해서 한다. 객체 구조 분해 할당이 있고 배열 구조 분해 할당이 있는데.. 일단 그렇다는 것 정도만 알아두자 하하하ㅏ.... 다음에 이건 자세하게.. 봐야지ㅠㅠ 4. To-do_2 : From 부분을 위한 컴포넌트 생성하기 이전 포스팅에서 List 부분의 컴포넌트까지만 생성해줬다. 이제 입력 창을 담당하는 Form 부분의 컴포넌트도 분리를 해줄 것이다. List.js에서 했던 방식과 동일하므로 자세한 설명은 생략하겠다!! ..

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"는 리액트에서 컴포넌트를 가져온다는 뜻! 그리고 그 컴포넌트를 리액트에서 사용할 ..