CodeStates/React11

• 

  [CSS] HTML 셀렉터의 종류 1. 셀렉터 h1 {} div {} 모든 h1을 선택 모든 div를 선택 2. 전체 셀렉터 * {} 모든 엘리먼트를 선택 3. Tag 셀렉터 section, h1 {} 쉼표(,)는 section과 h1를 다중으로 선택 4. id 셀렉터 #only {} #label.center {} id가 only인 엘리먼트를 선택 id가 label이면서 동시에 class가 center인 엘리먼트를 선택 5. class 셀렉터 .center {} .show#only {} class가 center인 엘리먼트를 선택 class가 show이면서 동시에 id가 only인 엘리먼트를 선택 6. attribute 셀렉터 a[href] {} p[id="only"] {} a 엘리먼트 중에서, href 속성을 갖는 모든 엘리먼트를 선택 .. CodeStates/React 2022. 4. 16.

• 

  [배포] 클라이언트 빌드와 배포 클라이언트 빌드 SSR과 CSR 차이 : 서버에 데이터를 요청했을 때 html파일이 어디서 조작되는가 브라우저의 작동 원리 참고 1. SSR const express = require('express') const app = express() const username = db.findOne({where: {id: 1}} app.get('/', function (req, res) { res.status(200).send(username) }) 장점 : 초기 랜딩 속도가 빠르며 검색 엔진 최적화(SEO)가 가능 웹 사이트가 검색 결과에 더 잘보이도록 최적화하는 과정 단점 : 페이지를 요청할 때마다 새로고침이되며, 요청이 많아지면 서버에 부담 2. CSR function Userinfo (prop) { co.. CodeStates/React 2022. 4. 12.

• 

  [Redux] 상태 관리 라이브러리 프론트엔드 개발에서 상태의 중요성 1. 상태 상태 : UI에 동적으로 표현될 데이터 로컬 상태 : 특정 컴포넌트 안에서만 관리되는 상태 *다른 컴포넌트와 데이터를 공유하지 않는 폼(form) 데이터 : input box, select box 등과 같이 입력값을 받는 경우 전역 상태 : 프로덕트 전체 혹은 여러 컴포넌트에서 관리되는 상태 *다른 컴포넌트와 상태를 공유하고 영향을 끼치는 상태 : 데이터 로딩 여부(로딩중), 다크모드, 국제화(Globalization) 설정 등 2. 데이터 무결성 전역 상태에서의 데이터 무결성 : 데이터의 정확성을 보장하기 위해 데이터의 변경이나 수정 시 제한을 두어 안정성을 저해하는 요소를 막고 데이터 상태들을 항상 옳게 유지하는 것 무결성을 위한 방법론 : Single s.. CodeStates/React 2022. 4. 11.

• 

  [React] 컴포넌트 디자인 및 구분 CDD(Component Driven Development) 페이지 단위로 UI 개발이 이루어지는 것과는 반대로 UI 컴포넌트들부터 만들고 이를 기반으로 페이지를 구성 재사용할 수 있는 UI 컴포넌트로 부품 단위로 UI 컴포넌트를 만들어 나가는 개발 방식 Storybook Component Driven Development를 지원하는 도구인 Component Explorer(컴포넌트 탐색기) 중 하나 예시 : BBC, UN Storybook 장점 각각의 컴포넌트들을 따로 볼 수 있게 구성해 한 번에 하나의 컴포넌트에서 작업 가능 복잡한 개발 스택을 시작하거나, 특정 데이터를 데이터베이스로 강제 이동하거나, 애플리케이션을 탐색할 필요 없이 전체 UI를 한눈에 보고 개발 가능 재사용성을 확대하기 위해 컴포넌.. CodeStates/React 2022. 4. 4.

• 

  [React] 데이터 흐름의 이해와 비동기 요청 처리 React 데이터 흐름 React의 개발 방식 : 한가지 일만 하는 컴포넌트 단위로 시작(컴포넌트를 먼저 만들고 조립) *단일 책임 원칙, 상향식(bottom-up) 1. 단방향 데이터 흐름(one-way data flow) 데이터의 흐름 : 컴포넌트는 컴포넌트 바깥에서 props를 이용해 데이터를 마치 인자(arguments) 혹은 속성(attributes)처럼 전달받음 하향식(top-down) : 데이터를 전달하는 주체는 부모 컴포넌트 컴포넌트는 props를 통해 전달받은 데이터가 어디서 왔는지 전혀 알지 못함 2. 역방향 데이터 흐름 추가하기 부모 컴포넌트에서의 상태가 하위 컴포넌트에 의해 변하는 경우 존재 State 끌어올리기(Lifting state up) : 상태를 변경시키는 함수(handle.. CodeStates/React 2022. 4. 4.

• 

  [React] State & Props Props 외부로부터 전달받은 값 즉, 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값 1. Props 특징 props를 함수의 전달인자(arguments)처럼 전달받아 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환 컴포넌트가 최초 렌더링될 때에 화면에 출력하고자 하는 데이터를 담은 초기값으로 사용 가능 props로 어떤 타입의 값도 넣어 전달할 수 있도록 props는 객체의 형태를 가짐 함부로 변경될 수 없는 읽기 전용(read-only) 객체 2. Props 사용방법 1. 하위 컴포넌트에 전달하고자 하는 값(data)과 속성을 정의 2. props를 이용하여 정의된 값과 속성을 전달 3. 전달받은 props를 렌더링 props 속성의 이름을 임의로 지정 가능 props .. CodeStates/React 2022. 2. 21.

• 

  [React] Single-Page Application SPA 서버로부터 완전한 새로운 페이지를 불러오지 않고 페이지 갱신에 필요한 데이터만 받아 그 정보를 기준으로 현재의 페이지를 업데이트함으로써 사용자와 소통 전통적 웹사이트는 페이지 이동 시 html 파일로 된 페이지 전체를 렌더링 *서버와의 불필요한 트래픽 발생, 느린 속도로 사용자 경험 저하 SPA는 필요한 부분만 새로 렌더링, 중복되는 부분은 불러오지 않음 *업데이트에 필요한 데이터만 전달받아 자바스크립트가 동적으로 html 요소를 생성해서 화면에 보여줌 장점 사용자와의 interaction에 빠르게 반응 가능 서버에서 요청받은 데이터만 넘겨주면 되기에 서버 과부하 문제 해결 전체 페이지를 렌더링할 필요가 없어 높은 사용자경험 제공 단점 html 파일을 읽는 과정에서 자바스크립트 태그를 만나면 ht.. CodeStates/React 2022. 2. 21.

• 

  [React] React 기초와 프로젝트 시작방법 React란? 프론트앤드 개발을 위한 자바스크립트 오픈소스 라이브러리 오픈소스 소스가 공개되어 있어서 누구나 자유롭게 사용, 복제, 배포, 수정이 가능한 소프트웨어 라이브러리 다른 프로그램에서 호출하여 사용할 수 있도록 제공하는 일종의 함수 집합 React의 특징 1. 선언형(Dexlarative) 무엇(What)에 집중하여 프로그래밍 하는 것으로 선언형 프로그래밍은 JSX 표현식으로 작성함 *삼항연산자, map, 태그(JSX만 가능, JS는 불가) 등 선언형의 반대는 명령형 프로그래밍으로 어떻게(How)에 집중하여 프로그래밍 반복문, 조건문 등은 명령형에 해당 *변수에 할당되지 않는 것들이 명령형, 변수에 할당되는 것들은 선언형 JSX를 활용한 선언형 프로그래밍 : 한 페이지를 보여주기 위해 html,.. CodeStates/React 2022. 2. 16.

• 

  [DOM] Document Object Model 문서 객체 모델 DOM(Document Object Model) 1. DOM의 개념 HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model HTML의 구조와 관계를 객체로 표현한 모델로 document라는 전역변수를 통해 HTML에 접근 가능 자바스크립트를 이용해 DOM에 접근하여 엘리먼트의 속성값을 얻거나 변경할 수 있음 2. DOM의 구조 자바스크립트의 객체와 같이 트리 구조이기 때문에 자바스크립트의 DOM이 브라우저에 접근하기 가장 용이 *다른 언어도 DOM을 가지고 있지만 자바스크립트가 가장 안정적 3. console.dir()로 콘솔에서 엘리먼트 조회하기 console.log(document): html문서 형식으로 보여줌 conso.. CodeStates/React 2022. 2. 14.

• 

  [CSS] Cascading Style Sheets CSS 정의 콘텐츠의 배치와 위치 (레이아웃 및 디자인) 및 최소한의 타이포그래피를 통해 User Experience(UX)를 제공 CSS를 작성해 간단한 User Experience(UI)를 만드는 일은 개발자의 기본 소양 CSS는 스타일링 도구로 독립적으로 기능하지 않고 반드시 HTML이 있어야만 동작 CSS 파일 추가 CSS를 별도의 파일로 분리하지 않고, HTML 태그에 직접 CSS 속성을 추가 시 하나에 집중하기 위해 파일이나 구간을 구분하는 관심사 분리 측면에서 권장하지 않음 관심사 분리 : HTML 파일에서는 웹 페이지의 구조만 신경쓰고, CSS 파일에서는 디자인만 신경쓸 수 있도록 구현 CSS 파일을 HTML 파일에 적용 : Link 태그 안에서 href 속성을 통해 파일을 연결 //CSS.. CodeStates/React 2021. 12. 20.

• 

  [HTML] HyperText Markup Language HTML 구성 HTML 기본 구조와 문법 1. HTML 정의 웹 페이지의 틀을 만드는 마크업 언어(태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어) tag들의 집합 tag : 부등호()로 묶인 html의 기본 구성 요소 열고 닫기 html 확장자 사용 속성(attribute) : attribute name(속성 이름)과 attribute value(속성 값) 으로 구성 div*2>li*1>ol*2 //tap을 누르면 아래처럼 자동완성 id id(#name) : 한가지만 지정, 하나의 문서에 고유한 id 하나만 사용 가능 This is the navigation section. //CSS에 적용시 #id { color: black; } class class(.name) : 그룹으로 묶어서 스타일 .. CodeStates/React 2021. 12. 20.