목록강의 (62)
NOW OR NEVER
리액트 API 연동 redux는 API 연동 필수적인 요소가 아니다. API 연동 기본 npx create-react-app > yarn add axios axios 라이브러리 : rest api를 요청하게 될 때 프로미스 기반으로 처리할 수 있게 해주는 라이브러리(rest api 쉽게 요청 가능) import axios from ‘axios’; 요청 방법 : axios.HTTP메서드(요청 api 주소와 (정보)) ; rest api : 클라이언트와 서버가 소통하는 방식 중 하나(HTTP 메서드(GET, POST, PUT, DELETE)를 통해 구분) HTTP 메서드 : GET(데이터 조회), POST(데이터 등록), PUT(데이터 수정), DELETE(데이터 제거) 컴포넌트에서 api 요청하는 방법 a..
리액트 컴포넌트 스타일링 Styled-components Styled-components 라이브러리는 CSS in JS(자바스크립트 안에 CSS 작성)와 관련된 것이다. CSS in JS 라이브러리 중 가장 인기 많음, emotion도 유명함 Tagged Template Literal 문법 속성을 활용해서 구현이 되어 있다. 설치 : yarn add styled-components style 적용하고자 하는 파일 상단에 import styled from "styled-components"; 작성 확장 프로그램 vs code-styled-components 설치시 색상 지원, 자동완성지원 사용 시 ${props => props.컴포넌트props이름 && csswidth : 10rem; height : 10..
리액트 컴포넌트 스타일링 Sass 문법적으로 짱 멋진 스타일 시트 스타일시트의 재사용성, 코드 가독성 높여줌 반복되는 코드는 @mixin 활용 사용시 props 이름만 설정시 true 값을 갖는 것과 동일 라이브러리 설치 yarn add node-sass로 node-sass 라이브러리 설치(프로젝트에서 sass 사용 가능해짐, sass로 작성된 코드로 css로 변환해주는 역할) classnames 라이브러리 : 조건부로 class name 적용시 굉장히 쉽게 가능, yarn add classnames 문자열, 객체, 배열 등을 사용해서 다양한 옵션으로 조합해 classname으로 생성 가능 falsy한 값(false, null, 0, undefined) 무시 사용 : 사용하려는 파일 상단에 import ..
리액트 입문 class 형 컴포넌트 기존 컴포넌트는 함수형으로 만들었었다. 클래스 컴포넌트는 또 하나의 컴포넌트 선언방식 클래스 컴포넌트는 요즘 자주 사용하지는 않음 클래스 컴포넌트 유지 보수 하거나 함수형 컴포넌트로 해결하지 못하는 부분이 두개 정도 있기 때문에 익히기 앞으로 컴포넌트는 함수형으로 만드는 것이 좋고 클래스 컴포넌트는 꼭 필요할 때 혹은 옛날 컴포넌트를 유지 보수 하는 경우에만 사용 hooks라는 게 생기면서 클래스 컴포넌트는 뒷전이 됨 만드는 방법 상단에 Component 불러오기 : import React, {Component} from ‘react’; class 키워드로 컴포넌트 만들기 : class 컴포넌트이름 extends Component { } class 형 컴포넌트는 ren..
리액트 입문 Hook 함수 useReducer 이전에는 컴포넌트 상태 업데이트 시 useState를 사용해서 새로운 상태를 설정해주었는데 useState말고도 useReducer를 가지고도 상태를 업데이트를 해줄 수 있다. useState와 차이 : useState는 설정하고 싶은 다음 상태를 직접 지정해주는 방식으로 상태를 업데이트하는 반면에 useReducer은 action이라는 객체를 기반으로 상태를 업데이트 한다. useReducer 함수 사용시 컴포넌트 상태 업데이트 로직을 컴포넌트 밖으로 분리시킬 수 있다. 심지어 다른 파일에 작성 후 불러와서 사용도 가능 action : 업데이트할 때 참조하는 객체 type: 어떤 업데이트를 진행할 것인지 명시할 수 있다. 이름 직접 설정 가능 diff : ..
리액트 입문 리액트가 만들어진 이유 Javascript를 사용한 DOM 변형 DOM : 각 html element 정보를 지니고 있는 JS 객체 Ember, Backbone, AngularJS 등의 프레임워크는 작동방식이 다르지만 자바스크립트 특정 값이 바뀌면 특정 DOM 속성도 바뀌어서 업데이트 하는 작업을 간소화해주는 방식으로 웹개발의 어려움을 해결해줌 리액트는 어떠한 상태가 바뀌었을 때 DOM을 어떻게 바꿀지 규칙을 정하는 것이 아니라 아예 다 날려버리고 처음부터 모든 걸 새로 만들어 보여주면 어떨까라는 아이디어에서 시작된 라이브러리이다. 그러면 업데이트를 어떻게 해야할 지를 전혀 고민할 필요가 없어지기 때문에 개발이 정말 쉬워질 것이다. 리액트는 Virtual DOM을 사용해 성능은 유지하되 업데..
Javascript 비동기(Asynchronous) 처리 비동기 처리의 이해 동기적(Synchronous) 처리 : 작업이 끝나야 비로소 다음작업을 실행, 작업이 끝날 때까지 기다리는 동안 중지 상태가 돼서 다른 작업을 할 수 없다. ex) 1번 작업이 끝날 때까지 2번 작업 수행 못하고 2번 작업이 끝날 때까지 3번 작업을 수행하지 못함 작업을 비동기적 처리 할 때는 코드 실행 시 흐름이 멈추지 않는다. 그래서 동시에 여러가지 작업 처리 가능, 기다리는 과정에서 다른 함수를 호출도 가능 비동기 처리 예시 Ajax Web API 요청: 서버 쪽에서 데이터를 받아와야 할 경우에는 요청을 하고 서버에서 응답을 할 때까지 대기를 해야 하기 때문에 주로 비동기 처리를 함 파일 읽기 : 주로 서버쪽에서 파일을 읽..
Javascript 유용한 문법 단축 평가 논리 계산법(Short-circuit evaluation) 논리 연산자를 사용해서 코드를 더 짧게 쓰는 것을 의미 논리 연산자 사용 시 무조건 true 혹은 false 값을 사용하지 않아도 됨 리액트 사용하는 경우 이 문법을 사용해서 조건부 랜더링을 할 수 있다. falsy한 값들 : null, undefined, ‘ ‘, 0, NaN &&(AND 연산자) 주로 특정 값이 유효할 때만 어떤 값을 조회해야 되는 상황에 사용(ex)값이 객체일 수도 있지만 객체가 아닐 수도 있는 상황) &&의 왼쪽에 위치한 값이 true나 truthy한 값이면 오른 쪽에 위치하는 값이 연산 결과가 된다. && 왼쪽에 위치한 값이 false혹은 falsy한 값일시 연산 결과 값은 &&..
Javascript 입문 배열 한 변수 혹은 한 상수 안에 여러가지 정보를 담기 위함이었다면 배열은 여러 개의 항목들이 들어있는 리스트와 같다. 배열 생성 방법 배열을 만들 땐 [ ] 대괄호 사용하고 넣고 싶은 원소(아무거나 가능를 넣어준다. 배열 안 원소들은 ,로 구분 여러가지 종류를 나열해서 넣을 수 있는 것 자바스크립트의 배열은 배열 안에 있는 모든 원소들이 똑 같은 형태(숫자, 문자열, 객체, key: value 형태, 또다른 배열 등)일 필요 없다. 객체이름[n]: n번째 항목 조회 가능(0부터 시작, 즉 배열에서 첫번째 항목은 0번째) 객체의 정보 받아오기 key 값들을 배열 형태로 받아올 때 : Object.keys(객체이름) value 값들을 배열 형태로 받아올 때 : Object.valu..
Javascript 입문 자바스크립트는 무엇인가 브라우저에서 사용하려고 만든 언어 웹 브라우저 상에서 유저 인터페이스를 동적으로 표현하기 위해 사용 브라우저에서 사용하려고 만든 언어이지만 최근에는 다양한 영역(런타임(api 개발 ex. node), 데스크탑 애플리케이션, 모바일 애플리케이션(react, native 등))에서 사용되고 있다. react와 native 두 프레임워크의 특징은 단순히 웹 뷰를 모바일 앱에 띄워서 웹을 앱처럼 하는 것이 아닌 진짜 native ui를 자바스크립트로 할 수 있게 해줌 node.js를 통해서 자바스크립트를 사용할 수 있기 때문에 iot도 가능 개발자 도구에서 console에서 자바스크립트를 써볼 수 있다. 가장 기본적인 문법은 consol.log이다. 이것은 특정 ..