본문 바로가기

리액트6

[React] Intro 리액트는 크게 세가지 개념이 중요하다.1. Reactive2. Virtual DOM3. Component Reactive는 특정 값에 의존해 자동으로 반응하는 것을 의미한다.Vanila js로 검색 서비스를 만들면서 값을 변경하게 되면(검색 등) 다시 rendering을 하는 과정이 필요했었다.하지만 리액트는 값을 변경하면 다시 rendering 할 필요가 없도록 설계되었다. react는 DOM API를 호출하면서 성능 저하가 발생하는 문제를 해결하기 위해 Virtual DOM을 제공한다.Virtual DOM에서 변경된 부분을 확인하고 바뀐 부분만 확인하여 DOM에 제공한다.이런 특성 때문에 reactive 하다고 할 수 있다. 아래는 참고하면 좋은 예시 영상이다.https://www.youtube.co.. 2024. 8. 3.

[Vanila js] 최근 검색 구현하기 ResultViewexport default class HistoryListView extends KeywordListView { constructor() { super(qs("#history-list-view"), new Template()); } bindEvents() {} handleClickRemoveButton() {}} HistoryListView를 보면 KeywordListView 와 매우 유사하다.추천검색과 차별점을 생각하면, 검색기록을 지우는 작업이 추가로 수행되니까. 새로운 이벤트를 바인딩 해준다.또, KeywordListView를 상속받으므로 KeywordListView의 생성자의 구조 변경이 발생한다.Controllerexport defaul.. 2024. 8. 2.

[Vanila js] 키워드 검색 구현하기 ResultViewexport default class KeywordListView extends View { constructor() { super(qs('#keyword-list-view')); this.template = new Template(); this.bindEvents(); } show(data = []) { } bindEvents() { } handleClick(event) { }} 앞선 기능들과 마찬가지로 keyword-list-view에 적용할 interface다.Result를 보면 키워드를 클릭하는 이벤트가 발생하니까 이벤트를 바인딩해주는 것이 필요하고keyword 목록들을 보여주어야 하므로 show().. 2024. 8. 2.

[Vanila js] 탭 구현하기 ResultViewexport default class TabView extends View { constructor() { super(qs('#tab-view')); this.template = new Template(); } show() {} bindEvents() {} } 정적 페이지의 tab-view id를 가진 태그에 작업을 수행한다.Result와 같이 탭을 보여줄 기능과, 탭을 누르는 행위를 하는 기능이 필요Controllerexport default class Controller { constructor(store, {searchFormView, searchResultView, tabView}) { this.store.. 2024. 8. 1.

[Vanila.js] 환경셋팅 1 우아한 형제들에서 근무 중이신 프론트 개발자 김정환님의 강의를 기반으로 작성합니다.인프런 강의 제목은 '만들고 비교하며 학습하는 리액트'입니다. 해당 강의는 깃을 사용하며 Branch별로 강의를 해주십니다. 학습을 하기 위해 먼저 git을 fork합니다. fork가 잘되었다면, 강사님이 만들어 둔 branch로 이동할 수 없습니다.우선 fork한 내 레파지토리를 clone하고 해당 폴더로 이동해서 git bash를 실행합니다.그리고 아래와 같은 명령을 작성합니다. 1. git remote add upstream https://github.com/jeonghwan-kim/lecture-react.git2. git fetch upstream3. git checkout -f upstream/ready/scaf.. 2024. 7. 30.

[Vanila.js] 환경셋팅2 1. VS 코드를 설치한다.2. Node.js를 설치한다.2-1. npm --version 으로 환경변수 설치가 잘되었는지 확인한다.3. Git Bash를 설치한다. (선택, 프로젝트 관리하려면 설치)4. npx lite-server --baseDir "폴더명" or npx lite-server ※ 주의 (windows 환경)Node.js의 경로를 커스텀 영역에 설치 시, 실행이 안된다.1. Ctrl + r -> %appdata% -> 새폴더 생성(이름: npm) 2. System 환경변수에서 해당 node js의 custom 영역을 path 변수에 추가한다.나는 사용자 영역에 추가했다. ※ TipVsCode에서 code . 으로 실행하려는데 안된다.Ctrl + shift + p 로도 code 를 검색해.. 2024. 7. 30.

이전 1 다음

티스토리툴바