본문 바로가기
728x90
반응형

TIL147

react 왜 쓰나요 사실 단순 웹사이트를 만드려면 html 과 css js 만으로도 가능하다. 그렇다면 왜 react를 사용할까? 현대 웹은 단순한 페이지가 아닌 웹 애플리케이션이다. 수 많은 상태관리와 DOM요소를 직접 관리하고 코드를 정리하는 일은 매우 번거로운 일이다. 웹 개발을 할 때 DOM(Document Object Modal, html, head, body 같은 태그들을 js가 사용할 수 있는 객체) 관리 상태값 업데이트를 최소화 하며 기능 개발과 사용자 인터페이스를 구현하는 데 집중할 필요가 있었고 이에 react Angular Vue 가 등장하게 되었다 REACT 1. Virtual Dom 의 사용 SPA는 dom의 변경이 있을 때마다 렌더트리를 재생성하고 레이아웃을 만들고 페인팅하는 과정을 반복해야하는데 .. 2023. 3. 16.
react) public 폴더 src 폴더 🗂 public 컴파일시 필요하지 않은 것들 절대경로 사용 가능 (import 시 "./파일명" 이렇게 가져올 수 있음) 사용자가 웹브라우저상에서 볼 수 있는 정적파일들 (image) 이 담김 🗂 src 개발하면서 컴포넌트 안에서 쓰이는 파일을 넣음 public 파일 가져올 때 단점 웹팩으로 처리되지 않고 원본이 빌드됨 -> 파일이 경량화 되지 않음 -> 파일 경로 잘못 입력시 컴파일 단계가 아니라 사용자가 접근할 때 404 오류를 받음 const url = process.env.NODE_ENV === 'development' ? `./${domain}/image/img` : 'image/img'; // 보통 이렇게 처리하는 듯 경량화를 위해서라도 src에 이미지 파일 넣는게 맞겠네! ☺️ 판단 후 여러.. 2023. 3. 10.
상태관리 useReducer 간단한 상태일 경우엔 useState만을 쓰는게 간편하지만 관리할 상태가 많고 서로 의존하고 있고 조작할 동작이 여러 개일시 useReducer를 쓴다 상태가 변하는 로직을 reducer에 몰아넣고 상태 간의 관계를 case로 보여주기 때문에 한번에 파악하기 용이하다 예시 기존 코드 import { useState } from 'react'; const Reducer = () => { const [num, setNum] = useState(0); const plus = () => { setNum(prev => prev + 1); }; const minus = () => { setNum(prev => prev - 1); }; return ( {num} 더하기 빼기 ); }; export.. 2023. 3. 6.
Node.js ) import/export 사용 기존 commonJs 문법은 require을 사용해 전체 모듈을 불러오고 module.exports 객체에 모듈 전체를 치환하여 내보낸다. 불필요한 모듈이 로드되기도 하고 모듈에서 어떤 부분을 사용했는지도 확인할 수 없다는 단점 그래서 Es6 문법에서는 import / export 방식으로 모듈을 불러오고 내보내는데 userRouter.js import { Router } from 'express'; 요렇게 express 모듈에서 router만 가져오는 형식이다 하지만 node.js 가 모듈 시스템으로 commonJs 를 채택했기 때문에 그냥 사용시 syntax 에러와 함께 import를 읽지 못한다는 문구를 볼 수 있다. import/export 사용시 따로 설정이 필요함! package.json "t.. 2023. 3. 4.
인증 인가 Session vs Token Based Authentication 인증 자격 증명 정보 데이터를 사용하여 누군가 또는 시스템이 실제로 그 누구인지 또는 시스템인지 확인하는 과정 인가 인증 과정을 통해 자격이 증명된 사용자에게 특정 리소스 또는 기능에 대한 액세스 권한을 부여하는 과정 인증의 유형 SFA (단일 요소 인증) -> id, qw 를 요구하는 방식 -> 비밀번호, 아이디만 알아도 보안에 쉽게 문제가 생김 2FA -> SFA에서 로그인 시도시 모바일 기기를 통해 사용자에게 부여하는 고유 코드, 지문 같은 추가적인 인증 요소를 요구해 인증을 강화함 MFA -> 2FA 유형에서 보안을 강화하기 위해 사용자가 직접 답변헤야하는 질문을 자격증명 정보에 추가하여 3개 이상의 요소를 인증에 사용하는 것 웹 환경에서 사용자와 시스템 간에 데이터를 교환하게 위해 http 방식.. 2023. 3. 2.
promise - catch / async await (try-catch) ⚠️ 콘솔은 리액트로 찍음..! 동기 function test(value: number) { if (!value) throw new Error('someError'); return value; } const caller = () => { const func = test(1); console.log('func', func); const func2 = test(); console.log('func2', func2); }; caller(); func2는 인자를 아예 넣어주지 않았더니 fun2 밑으론 실행이 안되어서 콘솔이 찍히지 않는다 try-catch 사용시 function test(value: number) { if (!value) throw new Error('someError'); return valu.. 2023. 2. 28.
Layered Pattern이란? Layered Pattern이란? Presentation Layer / Business Layer / Persistence Layer Presentation Layer 해당 시스템을 사용하는 클라이언트와 직접적으로 연결되는 부분 백엔드 API에서 엔드포인트 부분 API의 엔드포인트를 정의하고 전송된 http 요청들을 읽는 로직을 구현한다 실제 시스템이 구현하는 비즈니스 로직은 Business Layer에서 담당! Business Layer 비즈니스 로직을 구현하는 부분 회원가입 / 로그인 유효성 검증 로직 등이 있다 Persistence Layer 데이터베이스 관련된 로직 구현 부분 데이터 생성 / 수정 / 읽기 등을 처리하여 데이터를 저장, 수정, 읽어 들이는 역할을 합니다. Layered 아키텍처의 .. 2023. 2. 27.
my SQL 데이터베이스 객체(Database object)란 데이터베이스 내에 실체를 가지는 것을 말하며, 2차원 테이블(Table), 뷰(View), 인덱스(Index) 등이 있습니다. 스키마(Schema)는 데이터베이스 내의 객체(table, view, index)를 담는 컨테이너입니다. SQL의 DDL(Data Define Language)은 Schema 내의 객체를 정의하고 관리할 때 사용되는 쿼리문을 의미합니다. MySQL 에 원하는 데이터베이스를 생성하는 명령어는 CREATE DATABASE {database_name}; 입니다. 생성된 데이터베이스에 접근하는 명령어는 USE {database_name} 입니다. 데이터베이스 내부에 테이블을 생성하는 명령어는 CREATE TABLE {table_name}.. 2023. 2. 26.
next.js 왜 사용하나요 요즘 프론트엔드 개발자 필수템 next.js 어떻게 저떻게 사용은 했지만 프리렌더링과 html 파일 만들어져서 빠르고 SEO 좋다~ 하는 점만 두리뭉실하게 알았지 딱히 뭘 알고 쓴다는 느낌은 없었다 그래도 next 왜 쓰는지 뭐가 좋은지 는 정확히 알아야하지 않을까... 🤔 싶어 시작한 글 React.js : Html과 JS파일을 한꺼번에 보내고 클라이언트가 js 코드를 통해 웹 화면을 렌더링 Next.js : Pre-Rendering된 웹 페이지를 클라이언트에게먼저 보내고, React가 번들링된 자바스크립트 코드들을 클라이언트에게 전송함. SSR vs CSR SSR 서버사이드 렌더링 CSR 클라이언트 사이드 렌더링 👆 SSR 클라이언트가 데이터에 요청하면 프->백->데이터베이스->백->프->브라우저 순.. 2023. 2. 26.
728x90
반응형

티스토리툴바