IT
16. boilerplate - 로그인 페이지 (1)
boilerplate 유튜브 강의 시리즈 Blog ReactJS NodeJS #23 LOGIN PAGE (1) 1. 로그인 컴포넌트를 위한 파일 생성 components > RegisterLogin 폴더 생성 > index.js, register.js 파일 생성 2. 로그인 페이지 라우터 추가 App.js > /login 경로에 로그인 컴포넌트 연결 import React from 'react'; import {Route, Switch} from 'react-router-dom'; import About from './about'; import Login from './RegisterLogin'; function App() { return ( ); } export default App; 3. 로그인 페이..
15. boilerplate - redux 세팅
boilerplate 유튜브 강의 시리즈 Blog ReactJS NodeJS #22 Setting up REDUX redux란? 필요한 이유? 기본 개념 --> 여기에 잘 나와있다.. 아래 글은 학습하는 과정에서 혼자 이해한 내용을 정리한 것이니 참고만.. react는 컴포넌트 기반으로 구성되어 화면(UI - user interface)을 구성하는 것을 좀 더 편리하게 다룰 수 있다. 각각의 컴포넌트들은 state를 가지는데 이 state를 기반으로 변화가 발생한 컴포넌트만 변경되는 로직이 수행된다. 즉, state를 통해 view를 관리한다. 또 하나의 특징으로 react의 데이터흐름은 단방향으로만 진행된다. 그래서 컴포넌트가 많아지게 되면 최상위 컴포넌트에서 최하단 컴포넌트까지의 데이터 전달이 복잡해..
14. boilerplate - proxy 설정 및 concurrently 적용
boilerplate 유튜브 강의 시리즈 Blog ReactJS NodeJS #21 Proxy Concurrently 참고 create react app 문서 - proxying 리액트 기본 포트가 3000포트 이기 때문에 백엔드 포트를 3000 -> 5000으로 변경했다. 따라서 현재 프로젝트는 프론트는 3000번, 백엔드는 5000번 포트를 사용한다. 1. proxy 설정 프론트에서 백엔드의 api를 사용할 때 다른 호스트나 포트로 리다이렉션 할 필요 없이 proxy 설정을 해놓으면 편하게 사용할 수 있다. http-proxy-middleware 를 설치한다. npm install -D http-proxy-middleware client 루트에 setupProxy.js 파일을 생성하고 아래 코드를 작..
13. boilerplate - react router dom
boilerplate 유튜브 강의 시리즈 Blog ReactJS NodeJS #20 REACT ROUTER DOM React-Router-DOM 이란? 리액트 라우터는 리액트의 서드파티 라이브러리로 화면전환을 도와주는 역할을 한다. 일반적인 웹에서 a태그를 이용해 다른 페이지로 이동했었다면, 리액트에서는 리액트 라우터를 통해 Link 태그를 사용하여 화면을 전환한다. 리액트는 변화가 있는 컴포넌트만 업데이트하여 효율적으로 성능을 관리하는 구조로, 페이지 이동 시에도 굳이 화면 전체를 새로고침 할 필요가 없기 때문이다. 사실 리액트 라우터 없이도 컴포넌트 업데이트를 통해 화면전환을 할 수 있다. 그럼에도 리액트 라우터를 사용하는 이유는 사용자에게 새로고침, 뒤로가기, 즐겨찾기 등의 기능을 제공하기 위함이다..
12. boilerplate - axios 설치 및 react 구성파일
boilerplate 유튜브 강의 시리즈 Blog ReactJS NodeJS#18 AXIOS Blog ReactJS NodeJS #19 about page axios는 브라우저와 node.js를 위한 프로미즈 기반의 HTTP client 이다. 프론트에서 사용할 것이기 때문에 client 폴더 내부에서 아래 명령어를 실행해야 한다. npm i axios --save 리액트 생성시 기본적으로 생성됐던 구조는 아래와 같다. 여기서 사용하지 않는 App.css, App.test.js, logo.svg 는 지우고 src 폴더에 components 폴더를 생성하고 App.js를 옮긴다. 그리고 index.js에서 App.js 파일의 경로를 불러오는 부분을 수정한다. 모두 완료하면 아래와 같다. 그리고 App.js..
프로그래머스 - 짝지어 제거하기(c++)
문제 설명 짝지어 제거하기는, 알파벳 소문자로 이루어진 문자열을 가지고 시작합니다. 먼저 문자열에서 같은 알파벳이 2개 붙어 있는 짝을 찾습니다. 그다음, 그 둘을 제거한 뒤, 앞뒤로 문자열을 이어 붙입니다. 이 과정을 반복해서 문자열을 모두 제거한다면 짝지어 제거하기가 종료됩니다. 문자열 S가 주어졌을 때, 짝지어 제거하기를 성공적으로 수행할 수 있는지 반환하는 함수를 완성해 주세요. 성공적으로 수행할 수 있으면 1을, 아닐 경우 0을 리턴해주면 됩니다. 예를 들어, 문자열 S = baabaa 라면 b aa baa → bb aa → aa → 의 순서로 문자열을 모두 제거할 수 있으므로 1을 반환합니다. 제한사항 문자열의 길이 : 1,000,000이하의 자연수 문자열은 모두 소문자로 이루어져 있습니다. ..