# front end
Class 형 vs Function 형 컴포넌트
React를 사용하여 UI/Life cycle 등 프론트 개발을 할 때 두 가지 방법으로 컴포넌트를 선언가능 하다.클래스형 컴포넌트와 함수형 컴포넌트의 역할은 동일하다컴포넌트의 기능: 데이터가 주어졌을 때 이에 맞추어 UI를 만들어 주는 기능을 하는 것은 물론, 라이프
Atomic component 설계
atomic 디자인아토믹 디자인은 원자(Atoms), 분자(Molecules), 유기체(Organisms), 템플릿(Templates), 페이지(Pages)로 효과적인 인터페이스 시스템을 만든다.atoms:버튼, 제목, 텍스트 입력 필드와 같은 가장 작은 구성 컴포넌트
디자인 패턴 - component 관련
자주 사용하는 설계 패턴을 정형화 해서 이를 유형별로 가장 최적의 방법으로 개발할 수 있도록 정해둔 설계. 명확한 답은 없다.객체를 생성하는 것과 관련된 패턴으로, 객체의 생성과 변경이 전체 시스템에 미치는 영향을 최소화 하고, 코드의 유연성을 높여준다프로그램 내의 자
Template Literals
템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴.템플릿 리터럴은 표현식/문자열 삽입, 여러 줄 문자열, 문자열 형식화, 문자열 태깅 등 다양한 기능을 제공함.템플릿 리터럴은 런타임 시점에 일반 자바스크립트 문자열로 처리/변환됨.프론트엔드에서는 HTML을 데이터와
Content-Security-Policy 카카오톡 공유
카카오톡 공유 기능을 만들었는데 보안 이슈 때문에 메타태그를 추가했다.이 메타 태그를 넣고 잘되던 카카오톡 공유가 에러를 뿜어내며 안되기 시작했다.because it appears in neither the child-src directive nor the defaul
Import & Export
코드가 너무 길어져 다른 파일로 쪼개서 연결시키고 싶을 때 사용할 수 있는 import/exportdata.js 라는 파일의 변수, 데이터 등을 App.js 로 보내려면1\. data.js에서 원하는 데이터를 export 하고2\. App.js에서 그 데이터를 impo
1. JSX
JSX란?JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장한 문법이다.JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다.브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다
useEffect에 대하여
useEffect를 렌더링 후 한번 그리고 배열 안 변수의 값이 변할 때마다 실행: Dependency를 지정해주어 지정된 변수의 값이 변했을 때만 실행스크린샷 2022-03-23 오후 4.51.15.png⇒ component 는 대문자로 생성
ES6+ 문법
let과 const가 추가: const는 var보다 강력하고 일단 사용되면 변수를 다시 할당할 수 없습니다. var가 hoisting이기 때문에 변수를 재할당하지 않으려면 항상 상수를 사용하는 것이좋다.var는 문제가 또, 옛날 문법은 변수선언을 다해놓으면 중간부분에l
Virtual DOM
서버와의 데이터 통신과는 별개로 DOM(https://namu.wiki/w/JavaScript보여지는 데이터의 잦은 변경이 필요한 웹앱의 경우이러한 방식을 통해 성능을 크게 향상시킬 수 있다. 실제 동적인 웹일수록 Angular 등과 비교해서 성능이 훨씬 더
UseCallback, UseMemo에 대하여
기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법memoization을 적절히 적용하면 중복연산을 피할 수 있어 메모리를 더 쓰더라도 어플의 성능을 최적화할 수 있다.메모이제이션된 ‘값’을 반환한다.dependency가
SSR vs CSR
server side rendering 의약자서버 쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식UntitledUser가 Website 요청 보냄 → Server는 ‘Ready to Render’ 즉시 렌더링 가능한 html 파일을 만든다.→ 클라이언트에
웹에 들어갔을 때의 구조
웹 어플리케이션 동작사용자가 www.xxx.com 사이트에 접속을 요청한다.ip 주소로 서버에 접속해야 하지만 도메인 이름으로도 접속 가능웹 브라우저는 DNS(Domain Name Server)에 매핑된 ip주소를 요청하고 DNS는 웹 브라우저에게 매핑된 ip주소를 전
SPA vs MPA
이름처럼 한개의 Page로 구성된 Application이다.서버에서 HTML을 생성하고 브라우저는 출력하기만 하는 전통적인 형태가 아니라, 서버가 하던 대부분의 작업을 브라우저에서 처리하는 웹 애플리케이션 개발 방법이다. 즉, SPA에서는 서버가 처리하던 HTML 생성