프론트엔드 (23) 썸네일형 리스트형 리액트 꿀팁 메모메모 보호되어 있는 글입니다. 리액트와 뷰 리액트와 뷰 비교 참고 https://kr.vuejs.org/v2/guide/comparison.html 다른 프레임워크와의 비교 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org [공통점] 1. Virtual DOM 사용 2. 반응형 컴포넌트를 조합하여 프로젝트 구축 3. 코어 UI 라이브러리에 집중함. 라우터 및 스토어 등의 기능은 별개의 라이브러리를 추가로 사용해야 함 [차이점] 1. 재렌더링 Vue는 재렌더링시 컴포넌트간의 종속성을 추적해 재렌더링이 필요한 컴포넌트에 한해서만 렌더링을 수행함 React는 부모 컴포넌트에 종속된 하위 컴포넌트들이 모두 재렌더링 됨. 상태 변화와 무관한 컴포넌트도! Vue는 이러한 측면에서 vue의 렌더링이 react보다 효율.. [리액트] 실습 - 함수형 컴포넌트에서 데이터 통신하기 간단한 클래스형->함수형 리팩토링은 했는데 서버쪽 세팅이 늦어지고 있어서 함수형 컴포넌트에서 데이터 통신을 해보는 실습을 못 하고 있었음. 그러다 좋은 강좌를 발견해서 공부한 내용을 정리한다. www.youtube.com/watch?v=DtLhiMxgsm0 목표는 1. hook 사용하기 2. API 통신하기 [1차] 영상에서 다룬 부분만 완료해봤다. uesEffect 훅에서 API 통신을 하고, 데이터를 파싱해서 각각의 state를 세팅한 뒤 차트를 그려주고 끝. [내용정리] 1. UseEffect란? 결론부터 말하자면 함수형 컴포넌트에서 사용되는 hook의 일종이다. 기존의 클래스형 컴포넌트가 가지던 라이프사이클들 (mount, update, unmount) 과 같은 목적으로 탄생했다. 리액트 공식 문.. [워다타 프로젝트] 4. 컴포넌트 흐름 구성하기 - Analyze, WordBook, WordList [사용 프로그램] draw.io www.diagrams.net/ Diagram Software and Flowchart Maker Security-first diagramming for teams. Bring your storage to our online tool, or go max privacy with the desktop app. No login or registration required. www.diagrams.net [내용] 1. Analyze, WordBook, WordList 단어장 분석 신청 화면(Analyze)과 단어장 목록 화면(WordBook)에서 각각 단어 목록 화면(WordList)으로 넘어가는 부분의 로직 drive.google.com/file/d/1OSeeAZGCRGCdw2.. [ESLint&airbnb] 기억해 둘 스타일 가드 [리액트 사용시] 1. Prevent missing React when using JSX 'React' must be in scope when using JSX. JSX 표현식을 사용하는 모든 파일 최상단에 import React from 'react'; 를 써주자 React 를 글로벌 변수에 등록해 사용한다면 무시해도 됨. 하지만 그렇지 않을때는 파일 내에서 직접적으로 React 객체를 사용하지 않는다 해도 명시해줘야 함. 자세한 내용은 문서 참고 github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/react-in-jsx-scope.md yannickcr/eslint-plugin-react React specific linting rules.. [프론트엔드 기술의 변천사] 보호되어 있는 글입니다. [워다타 프로젝트] 3. 홈화면 만들기 보호되어 있는 글입니다. [워다타 프로젝트] 2. 프로젝트 설계 [비고] 수정중 1. 레이아웃 종류 이름 컴포넌트명 비고 화면구성 헤더 Header 바디 Body 푸터 Footer 컬러 배경 Background 페이지별 동적 렌더링 2. 화면 종류 이름 컴포넌트명 인덱스 url 비고 application 홈페이지 Main 1 /main 영역 6행 1 문서 분석 단어장 연구소 Analyze 2 /w_analyze 2 단어 리스트 WordList 3 /w_list?name=[단어장] 3 내 단어장 목록 WordBook 4 /w_books(?category=[카테고리]) 4 단어장 공유 순위 WordShare 5 /w_share 5 quiz 퀴즈 선택 QuizSelect 11 /wq_select 6 카드 뒤집기 QuizFlip 12 /wq_flip 7 카드 뒤집기 결과 Q.. 이전 1 2 3 다음
