STUDY61 [TypeScript] TypeScript 할때, DT와 TS의 차이! (별로 쓸데없음 주의) DT 와 TS 의 차이 DT this package has typescript declarations provided by @types/000 이 패키지에는 @types/000 에서 제공하는 타입스크립트 형식이 따로 있다 라는 얘기다. DT로고를 한번 더 클릭해주면 해당 types 패키지 파일로 이동을 할 수 있다. 두개의 패키지를 내려받아야 한다. $ yarn add bcryptjs @types/bcryptjs TS this package conyains built-in TypeScript declarations 해당 패키지에는 기본적으로 ts가 선언 되어있다. 라는 뜻이다. 추가적인 패키지를 내려받을 필요가 없다. $ yarn add class-validator 이상 쓸데 없는 지식이었다고 한다. 2023. 1. 2. 복합 컴포넌트 패턴(Compound Components Pattern) | 리액트 디자인 패턴 복합 구성요소 패턴(Compound Components Pattern) 이란? 프롭 드릴링(prop drilling) 없이 하나의 컴포넌트를 구성하는 State를 공유하도록 작성하는 컴포넌트 패턴이다. view를 구성하는 코드에 커스터마이징이 용이하다는 장점이 생긴다. import React, { useState } from "react"; const Test = () => { const [_value, _setValue] = useState("value2"); const optionChangeValue = (event) => { _setValue(event.target.value); }; return ( {_value} Label1 Label2 Label3 ); }; export default Test.. 2022. 12. 31. 속성 제어 패턴 (Control Props Pattern) | 리액트 디자인 패턴 속성 제어 패턴 (Control Props Pattern) 이란? 컴포넌트를 제어 컴포넌트(Controlled Component)로 변환한다. 외부 상태는 사용자가 컴포넌트의 기본 동작을 변경할 수 있도록 사용자 지정 로직 삽입을 허용하는 SSOT(Single Source Of Truth)로 사용된다. 컴포넌트를 제어 컴포넌트 란? component 의 상태를 제어할 수 있는 컴포넌트를 의미한다. SSOT 란, 정보와 스키마를 오직 하나의 출처에서만 생성 또는 편집하도록 하는 방법론입니다. 장점 더 많은 제어권을 부여 메인 state 가 컴포넌트 밖으로 드러나기 때문에 사용자는 직접적으로 그 컴포넌트를 제어할 수 있다. // app.jsx import "./styles.css"; import input .. 2022. 12. 31. 하이퍼 텍스트 전송 프로토콜 (HTTP, Hyper Text Transfer Protocol) 하이퍼 텍스트 전송 프로토콜 (HTTP, Hyper Text Transfer Protocol) 이란? 웹 브라우저와 서버 사이에 HTML 문서와 같은 리소스 들을 주고 받을 수 있도록 해주는 통신 프로토콜 이다. 모든 데이터 교환의 기초이며, 클라이언트 - 서버 프로토콜이다. HTTP에서는 클라이언트가 서버에 요청 메세지를 보내고 서버는 클라이언트의 요청에 대한 응답을 반환한다. 연결 상태를 유지하지 않는 비 연결성 프로토콜이며, 요청과 응답(request, response) 방식으로 동작한다. 연결 상태를 유지하지 않는다는 말은 서버는 응답 메시지를 반환한 후에 클라이언트의 상태를 저장하지 않는다는 것입니다. 때문에 HTTP 프로토콜은 상태가 없는 프로토콜, 무상태성(stateless)라고도 불립니다... 2022. 12. 28. 교차 출처 리소스 공유 (CORS, Cross-Origin Resource Sharing) 교차 출처 리소스 공유 (CORS, Cross-Origin Resource Sharing) 란? HTTP 헤더 기반 메커니즘으로 브라우저가 리소스 로드를 허용해야 하는 자체 출처 이외 모든 출처(도메인, 스키마 , 포트)를 서버가 표시 할 수 있도록 한다. , , , 태그 → 기본적으로 Cross-Origin 정책을 지원함 태그의 href 에서 다른 사이트의 .css 리소스에 접근 하는 것이 가능 태그의 src 에서 다른 사이트의 .png .jpg 등의 리소스에 접근하는 것이 가능 태그의 src 에서 다른 사이트의 .js 리소스에 접근하는 것이 가능 (type = “module” 속성은 제외) XMLHttpRequest, Fetch API → 기본적으로 Same-Origin 정책을 따름 다른 도메인에게 .. 2022. 12. 28. 클라이언트 사이드 렌더링(CSR, Client Side Rendering) 클라이언트 사이드 렌더링(CSR, Client Side Rendering) 이란? 클라이언트(브라우저) 가 렌더링을 처리 하는 방식이다. 서버에서 받은 데이터를 통해 클라이언트인 브라우저가 모든 처리를 하게 된다. 사용자들의 PC성능의 향상으로 많은 처리 동작 들이 무리 없이 수행 할 수 있게 되며, 자바스크립트의 표준화가 잘 되어짐에 따라 React, Vue와 같은 CSR 프레임워크 라이브러리들이 나타나게 된다. 사이트에 접속 한다. 서버에서 index 파일을 받아온다 ( HTML 파일이 아무것도 없기 때문에, 빈 화면 ) html 파일에 링크되어 있는 모든 로직이 담겨있는 js 파일을 클라이언트로 요청한다. 받아온 js 파일로 인해 동적으로 html 사용자에게 보여지고 클릭 할 수 있게 된다. CSR.. 2022. 12. 28. 서버 사이드 렌더링(SSR, Server Side Rendering) 서버사이드 렌더링(SSR, Server Side Rendering) 이란? 클라이언트에서 모든 것을 처리하는 방식이 아닌 서버로부터 html 파일을 받아와 페이지 전체를 렌더링 하는 방식이다. (JSP/Servlet 아키텍쳐 방식) 사이트에 접속 한다. 서버에서 이미 만들어진 index 파일을 받아오게 되고, 사용자가 볼 수 있다. ( js를 받아오지 않아서 동적으로 제어 할 순 없다) ( TTV ) 자바스크립트 파일을 서버에서 받아온다. 동적인 구현 클릭이나 인터랙션이 가능하게 된다. ( TTI ) 사용자가 사이트를 볼 수 있는 시간과 인터랙션을 할 수 있는 시간에 대한 공백이 존재하는 편이다. 장점 첫번째 페이지에 해당하는 문서만 브라우저에 우선 전달하여 렌더링을 하기 때문에 첫 페이지 로딩 속도가 .. 2022. 12. 28. 검색 엔진 최적화 (SEO, Search Engine Optimization) 검색엔진 최적화(SEO) 란? 검색 엔진은 웹 사이트 나 페이지의 데이터나 기능들을 봇이 읽어(크롤링)가서, 홈페이지의 구조와 기능을 파악하여 포털(검색엔진) 사이트에 노출을 시키게 된다. 이 과정에서 홈페이지의 구조와 페이지를 검색 엔진이 이해하기 쉽도록 개발하여, 상위에 노출 시킬 수 있도록 하는 작업을 검색엔진 최적화라 한다. 검색엔진 봇은 데이터를 크롤링 하는 과정에서 JavaScript 파일을 해석하지 못하고, html 문서 기준에서 정보를 수집해 가기 때문에 구조적 설계를 잘 해줘야 한다. CSR(Client-Side Rendering) 방식의 페이지 들의 경우 JS를 읽어 페이지를 구성해주는 형식이기에, JS를 사용하지 못하는 상태에서는 HTML문서에 아무것도 나타나지 않아, 검색 엔진이 제.. 2022. 12. 28. 아토믹 디자인 (Atomic Design) 개요 물질 순서로 화학의 개념을 웹에 적용하여, 인터페이스를 세분화한 디자인 시스템을 만드는 방법론 [출처] - Atomic Design Methodology 1. Atoms (원자) 원자는 모든 물질의 기본 구성 요소다. 각 원소마다 고유한 특성을 가지고 있으며, 더 이상 분해 할 수 없다. (가장 작은 단위) 2. Molecules (분자) 원자가 모인 원자의 그룹이다. 원자의 조합은 고유한 특성을 가지며, 원자보다 더 유동적인 작동이 가능하다. (원자의 그룹) 3. Organisms (유기체) 하나의 기능을 하는 분자들의 집합체이다. 이러한 유기체는 단순한 기능부터 매우 정교하고, 복잡한 기능이 있는 유기체에 이르기까지 다양하다. (분자의 그룹) 과학에서 나타나는 원자 - 분자 - 유기체 까지 의 .. 2022. 12. 27. 이전 1 2 3 4 5 ··· 7 다음 728x90
