Frontend 프론트엔드

리액트를 사용하는 이유 React 는 웹개발,앱개발(native), pc앱개발(electron) 에 사용되는 가장 인기있는 컴포넌트 기반의 개발 도구이기 때문이다.컴포넌트와 복붙의 차이점? 컴포넌트는 사용자 인터페이스 ( 아이콘 같은 요소나 특정 기능 ) 를 구성하는 독립적이고 재사용이 가능한 코드의 단위이다.  코드를 복사 붙여넣기 하면 코드의 수정시 모든 코드를 고쳐야 하지만 컴포넌트는 한번만 수정하면 된다는 점에서 차이를 갖는다. 컴포넌트를 만드는 2가지 방법 함수형 컴포넌트는 어떻게 탄생한걸까? Hooks 를 통해 클래스형 컴포넌트를 대체 할 수 있게 되면서 문법적으로 쉬운 함수형 컴포넌트를 많이 쓰게 되었다.

JWT 토큰을 어디에 넣어서 보낼까 ? 데이터 요청은 요청 헤더, 요청 바디 ( payload ) 가 존재한다. 응답도 응답 헤더와 응답 바디가 있다. 로그인 정보는 일반적으로 요청 헤더에 넣어서 보낸다. 왜냐하면 요청 바디에 넣을 경우 모든 요청 마다 AccessToken을 매번 넣어줘야 하는데 비효율적이기 때문이다. 쿠키 HTTP 요청시 따로 설정하지 않아도 자동으로 전달된다. HttpOnly : 자바스크립트로 쿠키에 접근할 수 없게 해서 보안을 강화한다 Secure : http 에서는 전송하지 않고 https 사이트에서 전송을 허용해 보안을 강화한다 웹 스토리지 ( localStorage, sessionStorage ) 자동으로 서버에 전송되지 않는다. 따라서 쿠키의 트래픽 문제를 해결한다. loc..

메모리 세션 사용 한계 : 사용자가 많아지면 scale-up ( 메모리 사양 업그레이드 ) 이나 scale-out ( 추가 백엔드 서버 설치 )을 해야한다. 극복방안 : scale- out 방식 사용 scale-out 방식 한계 : 로그인한 유저가 다시 접속했을 때 다른 백엔드 서버로 연결된다면 로그인 정보가 없어서 로그인이 풀린다. ( stateful 상태 ) 극복방안 : 데이터베이스에 세션 테이블을 만들고 저장한다 ( stateless 상태 ) 세션 테이블 ( stateless ) 한계 : DB의 병목현상이 발생한다 ( aka. 느려진다 ) . Scale-out 방식은 너무 복잡하다 해결방안 : scale-up 방식을 사용하거나 샤딩 방식을 사용한다 샤딩은 수평 파티셔닝의 일종이다 수평적 파티셔닝 :..

flex 속성들 정리하기 flex-direction : row main axis 는 아이템의 크기만큼 차지한다. cross axis 는 가장 높이가 높은 아이템의 크기와 일치하게 설정된다. 단, flex-container의 높이가 정해져 있으면 그 크기로 cross axis 의 크기가 정해진다. flex-direction : column main axis는 아이템의 크기만큼 차지한다. cross axis는 container 의 너비로 크기가 정해진다. flex 는 display : block 속성 요소이므로 container의 width를 정해주지 않으면 기본적으로 전체 너비가 된다. flex-flow flex-direction 과 flex-wrap ( default 값은 nowrap 이다 ) 을 한꺼번..

다음의 그림을 기존의 CSS 방법, CSS-IN-JS 방법으로 각 각 만들어 보세요. CSS-IN-JS 방법 아이디, 비밀번호 글씨를 재활용하고, 아이디 비밀번호를 입력하는 박스를 재활용하기로 했다 내 코드와 결과 // css-in-js 코드 import styled from "@emotion/styled"; export const LoginContainer = styled.div` height: 400px; width: 500px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border: 1px solid violet; ` export const LoginName = styled.h1` width: 100px; m..

JSX ( Javascript eXtensible Markup Language ) 원래는 JS 안에서 HTML을 쓸 수 없지만, React 라이브러리 전용으로 HTML을 사용할 수 있게 만들어 주는 JS 문법이다. CSS-IN-JS React 의 인기있는 CSS 방식 중 하나이다. CSS도 JS로 만든다 나만의 태그를 만들어 사용할 수 있다 효과

기존 웹페이지 HTML, CSS , JS 와 REACT 비교하기 이미지들은 public 폴더로 들어간다. html 파일들은 js와 합쳐져서 하나의 js 파일로 만들어진다. 모든 페이지의 공통 설정등은 __app.js 안에 적는다 NEXT 폴더 구조의 특징 localhost:3000/qqq next는 디렉토리 ( 폴더 ) 하나가 하나의 url 페이지를 만든다. 위의 그림을 예시로 들면 qqq 라는 디렉토리는 하나의 url 주소를 생성한다.

Node.js 와 NPM 브라우저에서만 실행가능하던 javascript 를 다른 언어들처럼 브라우저 외에서 실행하기 위해 만든 실행환경 ( 프로그램 ) 이 node.js 이다. 다른 프로그래머들이 미리 만들어 놓은 코드모음을 다운받을 수 있는 프로그램이 NPM 인데, 요즘은 node.js를 설치하면 자동으로 같이 설치된다. npm 과 같은 기능을 하지만 보다 빠른 프로그램인 yarn 도 있다. yarn 프로그램을 사용하려면 npm 을 통해서 yarn을 다운로드 받아야 한다. npx npx create-react-app 리액트 프로젝트를 시작하기 위해서 위의 명령어를 입력하면 리액트 설치가 완료된다. 여기서 npx 명령어가 있는데 이는 npm에서 제공하는 ( 5.2 버전 이상부터 ) 또다른 도구로서 최신 ..