티스토리

study with happyso

검색하기

블로그 홈

study with happyso

nyeongnyeong.tistory.com/m

happyso 님의 블로그입니다.

구독자: 4

방명록 방문하기

주요 글 목록

[React] VSCode React Debugging 1. VSCode Extension 설치 (JavaScript Debugger) 2. .vscode/launch.json 파일에 아래와 같이 설정 { "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Launch Chrome against localhost", "url": "http://localhost:3000", "webRoot": "${workspaceFolder}" } ] } 3. yarn/npm 명령으로 프로젝트 실행 후 F5 클릭 새로운 크롬 페이지로 설정한 url 페이지가 열린다 이제 디버깅 포인트를 잡아 디버깅을 할 수 있다 공감수 0 댓글수 0 2024. 2. 8.
[React] Form Validation (Formik VS React Hook Form) Validation 이란? 서버에 데이터를 제출하기 전에 양식이 올바른지 확인하는 과정 사용자가 데이터를 목적지로 보내기 전에, 올바를 데이터를 입력했는지 유효성을 체크해주는 것. Client Validation react form validation은 client validation check에 해당 1. 사용자에게 편리함을 제공하기 위함 클라이언트 측에서 유효성 체크를 하지 않을 경우, 데이터가 서버까지 다녀온 뒤에야 잘못된 데이터임을 알 수 있다. 시간이 오래걸려 사용자도 불편함을 겪고, 서버도 너무 많이 일을 혼자 하게된다. 2. 이상한 데이터가 들어와 공격당하는 일이 없도록 하기 위한 보안조치 사용자가 의도적으로 이상한 데이터를 넣어 공격을 하는 것을 맊을 수 있다. 하지만 클라이언트 유효성 체.. 공감수 0 댓글수 0 2021. 11. 6.
[React] memo의 효과_컴포넌트를 어떻게 분리하는게 리렌더링이 효율적으로 될까? [의문 : 왜 컴포넌트를 하나가 아닌 두개로 분리하였을까?] [결과물 화면] const TagList = React.memo(({ tags }) => ( {tags.map((tag) => ( #{tag} ))} )); 이와 같이 한번에 해결할 수 있는데 왜 나눴을까 의심이 들었다. 어차피 tag값이 바뀌면 둘다 렌더링 되는건 똑같지 않나? 라고 생각했지만 다르다. // React.memo를 사용하여 tag 값이 바뀔 때만 리렌더링되도록 처리 const TagItem = React.memo(({ tag }) => #{tag}); // React.memo를 사용하여 tags 값이 바뀔 때만 리렌더링되도록 처리 const TagList = React.memo(({ tags }) => ( {tags.map((t.. 공감수 1 댓글수 0 2021. 5. 15.
[React] hooks에서 최적화 hooks에서 최적화 useMemo(callback, [변경되는값]); 두번째 배열이 바뀌기전까지 값을 기억 함수 컴포넌트는 매번 함수가 새로 그려지며 실행되기 때문에 한번만 실행되면 되는 함수도 계속 호출되는 문제 발생 변경되는 값이 없다면 한번만 실행후 값을 보관하는 역할로 쓸 수 있다. useRef()와 useMemo() 차이점 useRef : 클래스로 치면 멤버변수 혹은 dom객체 처럼 특정한 '값'만 기억해야 할 때 useMemo : 복잡한 함수의 'retur값'을 기억해야 할 때 useCallback(callback, [변경되는값]); 두번째 배열이 바뀌기전까지 함수 자체를 기억 함수 생성 자체가 오래걸리는 경우 쓰면 최적화에 도움됨 변경되는 값이 없다면 state 값을 맨처음 값만 기억(co.. 공감수 0 댓글수 0 2021. 5. 7.
[React] JWT를 통한 회원 인증 시스템 구현 1. JWT의 이해 jwt은 JSON Web Token의 약자로, 데이터가 JSON으로 이루어져 있는 토큰을 의미한다. 두 개체가 서로 안전하게 정보를 주고받을 수 있도록 웹 표준으로 정의된 기술 1.1. 세션 기반 인증과 토큰 기반 인증의 차이 [세션 기반 인증] 서버가 사용자가 로그인 중임을 기억하고 있다는 뜻 서버는 세션 저장소에 사용자의 정보를 조회하고 세션id를 발급한다. 발급된 id는 주로 브라우저의 쿠키에 저장 그 다음 사용자가 다른 요청을 보낼 때마다 서버는 세션 저장소에서 세션을 조회한 후 로그인 여부를 결정하여 작업을 처리하고 응답한다. 세션 저장소는 주로 메모리, 디스크, 데이터베이스 등을 사용한다. 단점 서버를 확장하기 번거로워질 수 있다. 만약 서버의 인스턴스가 여러 개 된다면, .. 공감수 1 댓글수 0 2021. 2. 1.
[React] mongoose를 이용한 MongoDB 연동 실습2 6. MongoDB Compass의 설치 및 사용 MongoDB Compass는 MongoDB를 위한 GUI 프로그램. 데이터베이스를 쉽게 조회하고 수정할 수 있다. Window의 경우 MongoDB설치할 때 자동 설치 7. 데이터 생성과 조회 7.1. 데이터 생성 [src/api/posts/posts.ctrl.js] import Post from '../../models/post'; export const write = ctx => {}; export const list = ctx => {}; export const read = ctx => {}; export const remove = ctx => {}; export const update = ctx => {}; 기존 PUT 메서드에 연결했던 repl.. 공감수 0 댓글수 0 2021. 1. 29.
[React] mongoose를 이용한 MongoDB 연동 실습1 1. 소개하기 관계형 데이터베이스 한계 데이터 스키마 고정적 확장성(RDBMS는 처리해야 할 데이터양이 늘어나면 여러 컴퓨터에 분산시키는 것이 아니라, 해당 데이터베이스 서버의 성능을 업그레이트 해야 한다.) MongoDB는 이런 한계를 극복한 문서 지향적 NoSQL 데이터베이스 유동적 스키마 확장성(여러 컴퓨터로 분산하여 처리 가능하도록 쉽게 설계) MongoDB가 무조건 좋은 것은 하니다. 상황별로 적합한 데이터베이스가 다르다. 까다로운 조건으로 데이터를 필터링 또는 ACID특성을 지켜야 한다면 RDBMS가 유리 1.1. 문서란? 여기서 말하는 문서(document)는 RDBMS의 레코드와 개념이 비슷하다. 문서의 데이터 구조는 한 개 이상의 키-값 쌍으로 되어 있다. 문서의 예시 { "id": Ob.. 공감수 0 댓글수 0 2021. 1. 26.
[React] 백엔드 프로그래밍: Node.js의 Koa 프레임워크 1. 소개하기 1.1. 백엔드 서버를 만들어 데이터를 여러 사람과 공유한다. 데이터를 담을 때 여러 가지 규칙이 필요 사용자 인증, 데이터 종류 구분, 데이터 검증 등 어떤 종류의 데이터를 몇 개씩 보여줄지 백엔드 프로그래밍 다양한 언어로 구현 가능 PHP, 파이썬, Golang, 자바, 자바스크립트 자바스크립트로 서버를 구현할 수 있는 Node.js를 사용해보자 1.2. Node.js 처음엔 자바스크립트를 웹 브라우저에서만 사용했다. 시간이 지나면서 자바스크립트는 계속 발전했으며, 구글이 크롬 웹 브라우저를 소개하면서 V8이라는 자바스크립트 엔진도 공개했다. 이 자바스크립트 엔진을 기반으로 웹 브라우저뿐만 아니라 서버에서도 자바스크립트를 사용할 수 있는 런타임을 개발했다. 이것이 바로 Node.js이다.. 공감수 0 댓글수 0 2021. 1. 25.
[React] 서버 사이드 렌더링 1. 서버 사이드 렌더링의 이해 UI를 서버에서 렌더링하는 것 CRA로 프로젝트를 생성하고 개발 서버를 실행해 본다. $ yarn create react-app ssr-recipe $ cd ssr-recipe $ yarn start root 엘리먼트가 비어있다. 즉, 이 페이지는 처음에 빈 페이지 그 이후에 자바스크립트가 실행되고 리액트 컴포넌트가 렌더링되면서 우리에게 보이는 것 서버사이드 렌더링을 구현하면 사용자가 웹 서비스에 방문했을 때 서버 쪽에서 초기 렌더링을 대신해 준다. 그리고 사용자가 html을 전달받을 때 그 내부에 렌더링된 결과물이 보인다. 1.1. 서버 사이드 렌더링의 장점 구글, 네이버, 다음 등의 검색 엔진이 우리가 만든 웹 애플리케이션의 페이지를 원활하게 수집할 수 있다. 리액트로.. 공감수 6 댓글수 0 2021. 1. 24.
[React] 코드 스플리팅 코드 스플리팅이란 리액트 프로젝트 : 빌드 거친 뒤 배포 주석, 경고 메시지, 공백 등을 제거하여 파일 크기 최소화 브라우저에서 JSX 문법이나 다른 최신 자바스크립트 문법이 원활하게 실행되도록 코드의 트랜스파일 작업 정적 파일 존재 -> 경로 설정됨 -> 웹팩담당 웹팩에서 별도의 설정을 하지 않으면 프로젝트에서 사용 중인 모든 자바스크립트 파일이 하나의 파일로 합쳐지고, 모든 CSS 파일도 하나의 파일로 합쳐진다. CRA로 프로젝트를 빌드할 경우 최소 두 개 이상의 자바스크립트 파일 생성 CRA의 기본 웹팩 설정에는 SplitChunks라는 기능이 적용되어 node_modules에서 불러온 파일, 일정 크기 이상의 파일, 여러 파일 간에 공유된 파일을 자동으로 따로 분리시켜 캐싱의 효과 극대화 파일 이.. 공감수 0 댓글수 0 2021. 1. 20.
[React] 리덕스 미들웨어를 통한 비동기 작업 관리 리액트 프로젝트에서 리덕스를 사용하고 있으며 이러한 비동기 작업을 관리해야 한다면, '미들웨어'를 사용하여 매우 효율적이고 편하게 상태 관리를 할 수 있다. 1. 작업 환경 준비 $ yarn create react-app learn-redux-middleware $ yarn add redux react-redux redux-actions [modules/counter.js] import {createAction, handleActions} from 'redux-actions'; const INCREASE = 'counter/INCREASE'; const DECREASE = 'counter/DECREASE'; export const increase = createAction(INCREASE); export.. 공감수 0 댓글수 0 2021. 1. 18.
[React] 리덕스를 사용하여 리액트 애플리케이션 상태 관리하기 리액트 애플리케이션에서 리덕스를 사용하면, 상태 업데이트에 관한 로직을 모듈로 따로 분리하여 컴포넌트 파일과 별개로 관리할 수 있으므로 코드를 유지 보수 하는데 도움이 된다. 여러 컴포넌트에서 동일한 상태를 공유해야할 때 매우 유용 실제 업데이트가 필요한 컴포넌트만 리렌더링되도록 쉽게 최적화해 줄 수 있다. 리액트 애플리케이션에서 리덕스를 사용할 때는 store인스턴스를 직접 사용하기보다는 주로 react-redux라는 라이브러리에서 제공하는 유틸 함수(connect)와 컴포넌트(Provider)를 사용하여 리덕스 관련 작업을 처리 1. 작업 환경 설정 프로젝트 생성 미치 라이브러리 설치 $ yarn create react-app react-redux-tutorial $ cd react-redux-tut.. 공감수 0 댓글수 0 2021. 1. 16.
[React] 리덕스 라이브러리 가장 많이 사용하는 리액트 관련 상태 라이브러리 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜 더욱 효율적으로 관리할 수 있다. 컴포넌트끼리 똑같은 상태를 공유해야 할 때 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트할 수 있다. 전역 상태를 관리할 때 효과적 미들웨어 기능을 제공하여 비동기 작업을 훨씬 효율적으로 관리할 수 있다. 1. 개념 1.1. 액션 상태에 어떠한 변화가 필요하면 액션이란 것이 발생 다음과 같은 형식으로 이루어져 있다. { type: 'TOGGLE_VALUE' } 액션 객체는 type 필드를 반드시 가지고 있어야 한다. 이 값을 액션의 이름이라 생각하면 된다. 그 외의 값들은 나중에 상태 업데이트를 할 때 참고해야 할 값이며, 작성자 마음대로 넣을 .. 공감수 0 댓글수 0 2021. 1. 14.
[React] Context API 전역적으로 사용할 데이터가 있을 때 유용한 기능 ex) 사용자 로그인 정보, 애플리케이션 환경 설정, 테마 등 리액트 관련 라이브러리에서도 많이 사용 ex) 리덕스, 리액트 라우터, styled-components등 1. Context API를 사용한 전역 상태 관리 흐름 이해하기 컴포넌트 간에 데이터를 props로 전달하기 때문에 여기저기서 필요한 데이터가 있을 때는 주로 최상위 컴포넌트인 App의 state에 넣어 관리 기존엔 최상위 컴포넌트에서 여러 컴포넌트를 거쳐 props로 원하는 상태와 함수를 전달했지만, Context API를 사용하면 Context를 만들어 단 한 번에 원하는 값을 받아 와서 사용할 수 있다. 2. Context API 사용법 익히기 2.1. 새 Context 만들기 [co.. 공감수 0 댓글수 0 2021. 1. 14.
[React] 외부 API를 연동하여 뉴스 뷰어 만들기 1. 비동기 작업의 이해 동시에 여러 가지 요청을 처리할 수 있고, 기다리는 과정에서 다른 함수도 호출할 수 있다. 서버API를 호출할 때 외에도 작업을 비동기적으로 처리할 때가 있는데, 바로 setTimeout함수를 사용하여 특정 작업을 예약할 때 이다. 콜백함수 자바스크립트에서 비동기 작업을 할 때 가장 흔히 사용하는 방법 콜백 안에 콜백을 넣어 구현할 수 있는데, 너무 여러 번 중첩 되면 '콜백 지옥' 이라 한다. Promise 콜백 지옥 같은 코드가 형성되지 않게 하는 방안으로 ES6에 도입된 기능 여러 작업을 연달아 처리한다고 해서 여러 번 감싸는 것이 아니라, then을 사용하여 그다음 작업을 설정하기 때문에 콜백 지옥이 형성되지 않는다. async/await Promise를 더욱 쉽게 사용할.. 공감수 0 댓글수 0 2021. 1. 12.
[React] 리액트 라우터 부가 기능 1. history 라우트로 사용된 컴포넌트에 match, location과 함께 전달되는 props중 하나 이 객체를 통해 컴포넌트 내에 구현하는 메서드에서 라우터 API를 호출할 수 있다. 예) 특정 버튼을 눌렀을 때 뒤로 가거나, 로그인 후 화면을 전환하거나, 다른 페이지로 이탈하는 것을 방지해야할 때 [HistorySample.js] import React, {Component} from 'react' class HistorySample extends Component{ // 뒤로가기 handleGoBack = () => { this.props.history.goBack(); }; // 홈으로 이동 handleGoHome = () => { this.props.history.push('/'); };.. 공감수 1 댓글수 0 2021. 1. 9.
[React] 서브 라우트 라우트 내부에 또 라우트를 정의하는 것 [Profiles.js] import React from 'react'; import { Link, Route } from "react-router-dom"; import Profile from './Profile'; const Profiles = () => { return ( 사용자 목록 : velopert gildong 사용자를 선택해 주세요} /> ); }; export default Profiles; - 첫번째 Route 컴포넌트에는 component대신 render라는 props를 넣너 주었다. - 컴포넌트 자체를 전달하는 것이 아니라, 보여주고 싶은 JSX를 넣어 줄 수 있따. - 지금처럼 따로 컴포넌트를 만들기 애매한 상황에 사용해도 되고, 컴포넌트에 .. 공감수 0 댓글수 0 2021. 1. 9.
[React] URL 파라미터와 쿼리 파라미터 예시 : /profile/velopert 특정 아이디 혹은 이름을 사용하여 조회할 때 쿼리 예시 : /about?details=true 어떤 키워드를 검색하거나 페이지에 필요한 옵션을 전달할 때 URL 파라미터 - url파라미터를 사용할 때는 라우트로 사용되는 컴포넌트에서 받아오는 match라는 객체 안의 params 값을 참조한다. - match객체 안에는 현재 컴포넌트가 어떤 경로 규칙에 의해 보이는지에 대한 정보가 들어았다. [Profile.js] import React from 'react'; const data = { velopert: { name: '최수녕', description: '리액트를 좋아하는 개발자' }, gildong: { name: '홍길동', description: '.. 공감수 0 댓글수 0 2021. 1. 9.
React 배우기 백엔드 개발자가 다음과 같이API를 남겼다고 가정 프론트엔드 부분 세팅 npm | build amazing things Build amazing things We're npm, Inc., the company behind Node package manager, the npm Registry, and npm CLI. We offer those to the community for free, but our day job is building and selling useful tools for developers like you. Take your JavaScript devel www.npmjs.com 코드를 깔끔하게 하고싶고, 여러사람과 함께 코딩을 한다면 아래 두가지를 추천함 .eslintrc - 컴퓨터가.. 공감수 0 댓글수 0 2021. 1. 5.
[React] 기본개념 리액트를 다루는 기술 https://velopert.com/3613 create-react-app 설치 C:\> mkdir react C:\> cd react C:\react> npm install -g create-react-app hello-react 프로젝트 생성 C:\react> create-react-app hello-react hello-react 프로젝트를 실행 C:\react> cd hello-react C:\react\hello-react> npm start > hello-react@0.1.0 start C:\react\hello-react > react-scripts start https://velopert.com/3626 JSX 에서 유의할 사항 태그는 반드시 닫아야 한다. … 하나의.. 공감수 0 댓글수 0 2020. 11. 4.
[JavaScript] 기본 개념 정리2 참고 ⇒ https://poiemaweb.com/ 매개변수(parameter) 나머지 매개변수 (rest parameter) 명명된 매개변수 (named parameter) 화살표 함수 (arrow function) 공감수 0 댓글수 0 2020. 11. 3.
[JavaScript] 기본 개념 정리 https://www.w3schools.com/js/DEFAULT.asp C:\Users\myanj> cd / C:\> cd serverless C:\serverless> mkdir js-tutorial C:\serverless> cd js-tutorial c:\serverless\js-tutorial> npm init -y Wrote to C:\serverless\js-tutorial\package.json: { "name": "js-tutorial", "version": "1.0.0", "description": "", "main": "index.js", "devDependencies": {}, "scripts": { "test": "echo \"Error: no test specified\" && .. 공감수 0 댓글수 0 2020. 11. 2.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.