본문 바로가기

programming study

 (889)
[항해99 1기] [Chapter3-1] 주특기 기본 - 프론트의 꽃 리액트 (8) (2021.3.23) 1. 서버와 서버리스 웹은 응답과 요청으로 이뤄진다. 클라이언트가 서버에 요청, 서버가 클라이언트에게 응답 서버가 하는일 데이터 관리 분산처리 웹 애플리케이션 서버리스 서버를 신경 쓸 필요가 없다. 누군가 구축한 서버의 일부분을 빌려 쓸 수 있다. 2. Firebase BaaS Backend as a Service 백엔드와 관련된 것을 빌릴 수 있는 서비스 Firebase 2.1 Firebase 설정 사이트에서 프로젝트 만들기 버튼 클릭 프로젝트 이름을 정하고 약관 동의 프로젝트 애널리틱스 설정 나라 선택 2.2 FireStore realtime-database 제공 실시간 데이터 추가, 삭제 리액트의 react-firebase 패키지와 연동 spark 요금제: 무료 Collection: 문서의 집합 D..
[항해99 1기] [Chapter3-1] 주특기 기본 - 프론트의 꽃 리액트 (7) (2021.3.22) 1. 리덕스 전역 상태관리를 편히 할 수 있게하는 라이브러리 공식 문서 리덕스 패키지 설치 yarn add redux react-redux 1.1 리덕스 개념과 용어 데이터를 한 군데 몰아넣고 다른 곳에서 꺼내볼 수 있다. ActionCreator: 액션 생성 함수, 액션을 만들기 위해 사용 State 리덕스에서 저장하고 있는 상태값 딕셔너리 형태 ({[key] : value})의 형태로 보관 Action 상태에 변화가 필요할때(가지고 있는 데이터를 변경할 때) 발생 객체 type은 정한 임의의 문자열 넣기 {type: "CHANGE_STATE", data: {...}} ActionCreator 액션 생성 함수 액션을 만들기 위해서 사용 const changeState = (new_data) => { /..
[항해99 1기] [Chapter3-1] 주특기 기본 - 프론트의 꽃 리액트 (6) (2021.3.22) 1. 라우팅 1.1 SPA Single Page Application html이 1개인 어플리케이션 전통적인 웹 사이트: 페이지를 이동할 때마다 서버에서 html, css, js (=정적자원)을 내려준다. 페이지를 이동할 때마다 서버에서 주는 방식은 화면을 바꿀 때의 상태유지가 어렵고 바뀌지 않은 부분까지 새로 불러와 비효율적이다. SPA: 딱 한번만 정적자원을 받는다. 장점: 사용성 단점 처음에 모든 컴포넌트를 받아온다. 사용자가 들어가지 않는 페이지까지 전부 가지고 온다. 첫 로딩속도가 느리다. 1.2 라우팅 브라우저의 주소에 따라 다른 페이지를 보여주는 것 SPA에서는 라우팅 라이브러리를 사용하여 구현 2. 라우팅 라이브러리 2.1 react-route-dom 패키지 yarn add react-ro..
[항해99 1기] [Chapter3-1] 주특기 기본 - 프론트의 꽃 리액트 (5) (2021.3.22) 1. State관리 1.1 단방향 데이터 흐름 데이터는 위에서 아래로, 부모에서 자식으로 넘겨야 한다. 라이플 사이클을 고려하면 부모 컴포넌트가 자식 컴포넌트의 props를 받으면 무한 렌더링을 하게 될 것이다. 1.2 setState() 클래스형 컴포넌트의 state를 업데이트할 때 사용하는 함수 state가 변경되면 컴포넌트는 리렌더링된다. this.state: 렌더링된 값 예시 import React from "react"; class App extends React.Component { constructor(props) { super(props); this.state = { count: 3, // state }; } componentDidMount() {} addNemo = () => { // t..
[항해99 1기] [Chapter3-1] 주특기 기본 - 프론트의 꽃 리액트 (4) (2021.3.22) 1. SCSS 공식문서 SCSS와 CSS를 비교할 수 있는 사이트 SASS의 3번째 버전 SASS와 CSS에 호환이 잘 된다. 기본적인 문법은 CSS와 동일 사용하기 위해 패키지들을 설치 yarn add node-sass@4.14.1 open-color sass-loader classnames 1.1 Nesting 부모 태그와 자식 태그에 스타일을 줄 때 다른 블럭을 만들지 않아도 된다. 프로퍼티를 축약형으로 묶을 수 있다 font-size와 font-family를 font 아래에 묶을 수 있다. /* div태그 안에 p태그와 img태그가 있을 때 */ div{ p{ color: white; /* font-size와 font-family를 아래처럼 묶을 수 있다. */ font: { family: sna..
[항해99 1기] [Chapter3-1] 주특기 기본 - 프론트의 꽃 리액트 (3) (2021.3.21) 1. Component 리액트가 레고라면 컴포넌트는 블록이다. 웹 사이트의 조각이라고 할 수 있다. 클래스형과 함수형이 있다. 1.1 State와 Props Component에서의 데이터 관리 State Component가 가지고 있는 데이터 한 Component에서만 사용하는 정보를 주로 넣고 생성, 수정하는 데이터 생성, 수정은 오직 해당 Component에서만 이뤄진다. Props Component가 부모 Component로부터 받아온 데이터 부모로부터 받아온 것이므로 수정할 수 없다. 1.2 함수형 Component 리액트에서 폴더는 소문자로 시작하는 카멜케이스, JS파일, 컴포넌트 이름은 대문자로 시작하는 카멜케이스를 사용한다. 함수형 컴포넌트 예시 // 리액트 패키지 불러오기 import Re..
[항해99 1기] [Chapter3-1] 주특기 기본 - 프론트의 꽃 리액트 (2) (2021.3.20) 1. React 프로젝트 만들기 1.1 NVM Node Version Manager Node.js의 버전 관리자 node를 설치하는 툴 CLI 명령어 # nvm 버전 확인 nvm --version # node.js 설치 nvm install [설치할 버전] # nvm 으로 설치한 노드 버전 리스트 확인 nvm ls # 노드 버전 확인 명령어 node -v # 노드 버전 바꾸기 nvm use [사용할 노드 버전] 1.2 npm, yarn NPM(Node Package Manager : third-party 패키지를 활용할 수 있다. yarn 또한 패키지 매니저 프론트엔드 의존성을 관리하기 위한 패키지 매니저들 패키지 : 누가 만들어 놓은 코드 npm으로 yarn 설치하기 # 옵션은 필요한 경우에 적기 # ..
[항해99 1기] [Chapter3-1] 주특기 기본 - 프론트의 꽃 리액트 (1) (2021.3.19) 1. 웹과 DOM 1.1 웹의 동작 개념 브라우저가 하는 일 서버가 만들어 놓은 API라는 창구에 미리 정해진 약속대로 요청 받은 파일을 그려주기 서버가 하는 일 데이터를 클라이언트에게 전달 JSON형식으로 전달 1.2 서버리스 미리 설정이 된 서버를 빌려다 쓰는 것 ex. aws의 EC2 서버의 사양, 네트워크 설정이 미리 되어있으므로 인프라 작업을 하지 않아도 된다. 백엔드 리스가 아니다. 1.3 DOM html 단위 하나 하나를 객체로 생각하는 모델 div, p, h1, h2, span 트리구조 2. JavaScript 문법(ES6) ES6: 자바스크립트 표준 문법 중 하나로 가장 보편화된 것 2.1 Class 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 함수를 정의하는 일종의 틀 객..

티스토리툴바