Front-End78 [React] Route 라우터 SPA란 Single Page Application (싱글 페이지 어플리케이션) 의 약자입니다. 말 그대로, 페이지가 1개인 어플리케이션이란 뜻입니다. 전통적인 웹어플리케이션의 구조는, 여러 페이지로 구성되어있습니다. 유저가 요청 할 때 마다 페이지가 새로고침되며, 페이지를 로딩 할 때 마다 서버로부터 리소스를 전달받아 해석 후 렌더링을 합니다. 요즘은 웹에서 제공되는 정보가 정말 많기 때문에 속도적인 측면에서 문제가 있었고, 이를 해소하기 위하여 캐싱과 압축을 하여 서비스가 제공되는데요. 이는 사용자와 인터랙션이 많은 모던 웹 어플리케이션에서는 충분하지 않을 수도 있습니다. 렌더링하는것을 서버쪽에서 담당한다는것은, 그 만큼 렌더링을 위한 서버 자원이 사용되는것이고, 불필요한 트래픽도 낭비되기 때문입니다.. 2021. 6. 3. [React] react-async 라이브러리 react-async는 요청 상태 관리를 위해서 사용하는 라이브러리입니다. 먼저 라이브러리를 설치합니다. $ yarn add react-async 해당 라이브러리의 README를 보면 많은 내용들이 들어가 있습니다. import React from "react" import { useAsync } from "react-async" const fetchPerson = async ({ id }, { signal }) => { const response = await fetch(`https://swapi.co/api/people/${id}/`, { signal }) if (!response.ok) throw new Error(response.status) return response.json() } const.. 2021. 6. 1. REST API 간단 정리 클라이언트와 서버가 소통하는 방식이다. 클라이언트와 서버는 여러가지 방법으로 소통을 한다. 이를 HTTP 메서드를 사용해서 구분을 합니다. HTTP 메서드는 여러가지가 있는데 가장 대표적으로 GET, POST, PUT, DELETE이 있습니다. GET 데이터 조회 POST 데이터 등록 PUT 데이터 수정 DELETE 데이터 제거 위와 같이 각 메서드마다 역할이 조금씩 다릅니다. GET /users 를 호출하면 모든 사용자 계정을 반환합니다. GET /users/1 뒤에 특정 아이디를 넣어주면 아이디가 1인 계정을 찾아서 반환합니다. POST /articles 특정 게시물 정보를 등록하는 API GET /articles 모든 게시물 정보를 불러오는 API GET /articles/1 아이디가 1인 게시글을.. 2021. 6. 1. [mongoDB] 몽고DB NoSQL Not only SQL의 약자입니다. 기존의 RDBMS(관계형 데이터베이스)의 한계를 극복하기 위해 만들어진 새로운 형태의 데이터베이스입니다. 관계형 DB가 아니므로 RDBMS처럼 고정된 스키마(테이블의 틀) 및 JOIN문이 존재하지 않습니다. NoSQL을 사용하는 이유 가장 큰 이유는 성능 때문입니다. 관계형 데이터베이스는 시스템의 신뢰도를 높이는데 필요한 장치를 많이 가지고 있습니다. SQL문을 읽고 실행하는데 많은 리소스를 사용하며 성능이 떨어지는 경우가 많습니다. 반대로 NoSQL은 성능을 최우선으로 생각하여 실시간으로 처리해야 할 경우나 대용량 트래픽을 감당할 수 있는 메시징 시스템 등에 활용됩니다. 회원정보등의 DB는 SQL쪽이 좋고 글을 적고 지우고를 많이하는 SNS같은 곳에서는 .. 2021. 5. 22. [알고리즘] 문자열 압축 ❓문자열 압축 알파벳 대문자로 이루어진 문자열을 입력받아 같은 문자가 연속으로 반복되는 경우 반복되는 문자 바로 오른쪽에 반복 횟수를 표기하는 방법으로 문자열을 압축하는 프로그램을 작성하시 오. 단 반복횟수가 1인 경우 생략합니다. ▣ 입력설명 첫 줄에 문자열이 주어진다. 문자열의 길이는 100을 넘지 않는다. ▣ 출력설명 첫 줄에 압축된 문자열을 출력한다. ▣ 입력예제 1 KKHSSSSSSSE ▣ 출력예제 1 K2HS7E 💡문제풀이 function solution(s) { let answer = ""; let cnt = 1; s = s + " "; for (let i = 0; i < s.length - 1; i++) { if (s[i] === s[i + 1]) { cnt++ } else { answer.. 2021. 5. 22. [알고리즘] 가장 짧은 문자거리 구하기 ❓ 입력받은 문자열과 문자가 있을 때, 문자를 기준으로 하는 가장 짧은 거리를 구하시오 한 개의 문자열 s와 문자 t가 주어지면 문자열 s의 각 문자가 문자 t와 떨어진 최소거리를 출 력하는 프로그램을 작성하세요. ▣ 입력설명 첫 번째 줄에 문자열 s와 문자 t가 주어진다. 문자열과 문자는 소문자로만 주어집니다. 문자열의 길이는 100을 넘지 않는다. ▣ 출력설명 첫 번째 줄에 각 문자열 s의 각 문자가 문자 t와 떨어진 거리를 순서대로 출력한다. ▣ 입력예제 1 teachermode e ▣ 출력예제 1 10121012210 💡 문제풀이 function solution(s, t) { let answer = []; let p = 1000; for (let x of s) { if (x === t) { p =.. 2021. 5. 22. [GitHub] React 프로젝트 github 배포하기 github에 레포지토리를 생성하고, git push 작업까지 해준다. 깃을 처음 사용한다면 아래 링크를 참조해보세요 :) https://meanbymin.tistory.com/7?category=929768 Git, GitHub 사용하기 Git 이란 ? 버전 관리 시스템의 한 종류입니다. 버전 관리 : 여러 파일을 하나의 버전으로 묶어 관리하는 것을 말합니다. 버전 관리 시스템의 종류 1. 클라이언트 - 서버 모델 하나의 meanbymin.tistory.com git push가 끝났다면, npm을 사용해 gh-pages 패키지를 설치합니다. $ npm install --save gh-pages push가 된 자신의 깃 레포지토리로 들어간 후 settings를 클릭한다. settings안에 있는 Page.. 2021. 5. 21. [React] class형 컴포넌트 우리는 class컴포넌트와 함수형 컴포넌트 둘 다 사용할 수 있는데, 리액트에서도 함수형 컴포넌트 사용을 추천하고 있다. 허나 이전에 만든 프로젝트가 있다면 class컴포넌트를 사용했을 것이고, 그것을 유지보수 하기위해서는 class컴포넌트도 알아야 유지보수가 가능하다. import React, { Component } from "react"; class CounterClass extends Component { //첫번째 방법 // constructor(props) { // super(props); // // bind작업을 하면 만약에 이 함수에서 this를 가르키게 된다면 constuctor에서 this를 가르키게 해라라는 의미 // this.handleIncrease = this.handleIncr.. 2021. 5. 21. [React] Immer를 사용한 불변성 지키기 immer를 사용하면 불변성을 해치는 코드를 작성해도 대신 불변성 유지를 해줍니다. 우리는 보통 배열을 변경할 때 합칠때는 concat, 찾거나 뺄 때는 filter, 리스트를 뿌릴 때는 map을 사용하여 불변성을 지켜주면서 배열을 수정합니다. 허나 immer를 사용하면, push나 직접적인 값 설정이 가능해집니다. 먼저 immer를 설치해줍니다. $yarn add immer 또는 $npm i immer 그리고 상단에 import produce from "immer"; 를 작성해주고 immer로 사용해도 되지만, 보통 produce로 많이 사용합니다. produce 함수를 사용 할 때에는 첫번째 파라미터에는 수정하고 싶은 상태, 두번째 파라미터에는 어떻게 업데이트하고 싶을지 정의하는 함수를 넣어줍니다. .. 2021. 5. 20. 이전 1 2 3 4 5 ··· 9 다음
