profile
안녕하세요. 홍성표입니다.
post-thumbnail

SPA vs MPA

SPA 는 한 개의 Page 로 구성된 application 이다.SPA 는 웹 애플리케이션에 필요한 모든 정적 리소스를 최초 한번에 다운로드한다.그 이후 새로운 페이지 요청이 있을 경우, 페이지 갱신에 필요한 데이터만 전달받아 페이지를 갱신한다.어떤 링크를 클린한다고

약 16시간 전
·
0개의 댓글
post-thumbnail

observable

데이터 흐름에 맞게 알림(Based on Observer Pattern)을 보내 Subscriber가 데이터를 처리할 수 있도록 한다Observable은 옵저버 패턴을 구현한다. 객체의 상태 변화를 관찰하는 관찰자 목록을 객체에 등록하고,상태 변화가 있을 때마다 메서드

4일 전
·
0개의 댓글
post-thumbnail

optimistic-ui

우리가 자유게시판에서 좋아요 버튼을 누를 때 환경에 따라 좋아요의 수가 올라가는 속도가 다르다.좋아요 버튼을 누르게 되면 백엔드에 likeBoard라는 api에 요청을 보내게 되고, 백엔드는 DB에 요청을 하게 된다.그럼 DB는 좋아요의 수를 올려두고 올린 좋아요 수를

4일 전
·
0개의 댓글
post-thumbnail

https vs http

HTTP(Hyper Text Transfer Protocol)란 서버/클라이언트 모델을 따라 데이터를 주고 받기 위한 프로토콜이다. 즉, HTTP는 인터넷에서 하이퍼텍스트를 교환하기 위한 통신 규약으로, 80번 포트를 사용하고 있다.따라서 HTTP 서버가 80번 포트에

5일 전
·
0개의 댓글
post-thumbnail

Domain, DNS, Hosting

인터넷에 연결되어 있는 장치(컴퓨터, 스마트폰, 타블릿, 서버 등등)들은 각각의 장치를 식별할 수 있는 주소를 가지고 있는데 이를 ip라고 한다.ex) 115.68.24.88, 192.168.0.1ip는 사람이 이해하고 기억하기 어렵기 때문에 이를 위해서 각 ip에 이

5일 전
·
0개의 댓글
post-thumbnail

@media , Responsive Design

사이트는 크게 반응형 사이트와 적응형 사이트 두가지로 나뉘게 된다.적응형 사이트의 대표적인 예로는 네이버가 있다.크기를 줄였을 때 사이즈가 같이 줄어들지 않고 덮이는 것을 적응형사이트라고 한다.반면에 배달에 민족같이 크기에 따라 이미지도 줄어드는것을 반응형 사이트라고

5일 전
·
0개의 댓글

memoization

불필요한 렌더링을 줄이기 위해 memo 를 사용한다.react 에서 제공하고 있다.이렇게 memo 를 사용해주시고 state카운트 를 클릭해보시면 프리젠터는 렌더링이 되지않아 콘솔도 찍히지 않을 뿐더러 리액트 툴에도 보이지 않는다.자식컴포넌트는 memo 를 사용해 불필

5일 전
·
0개의 댓글

LazyLoad vs PreLoad

페이지를 읽어들이는 시점에 중요하지 않은 리소스 로딩을 추 후에 하는 기술이다.하지만 스크롤이 내려가면서 필요한 때가 되면 로드가 되어야 한다.예를 들어 이미지가 10장이 넘는 페이지가 있다고 가정해보자.이미지를 모두 다 로드가 될 때까지 기다리게 된다면, 페이지의 로

6일 전
·
0개의 댓글

Promise all

위의 함수는 result1 이 실행되고 난 후에 result2가 실행이 되고, result2가 실행된 후에, result3이 실행된다.따라서 onClickPromise 함수의 경우 약 6초의 시간이 소요된다.Promise.all() 의 경우에는 Promise.all()

6일 전
·
0개의 댓글

reduce

reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환한다.리듀서 함수는 네 개의 인자를 가진다.누산기 (acc)현재 값 (cur)현재 인덱스 (idx)원본 배열 (src)리듀서 함수의 반환 값은 누산기에

2022년 6월 18일
·
0개의 댓글

token, XSS, CSRF

JWT에는 Access Token, Refresh Token 두 가지 종류의 토큰이 있다.Access Token을 통해서 민감한 정보에 접근할 수 있으며 두 가지 토큰 중에서 실제 권한에 접근하는 토큰이다.짧은 유효기간을 가지며 Refresh Token을 통해서 만료된

2022년 6월 18일
·
0개의 댓글
post-thumbnail

callback

함수의 인자로 들어가는 함수특정한 API 요청이 끝난 뒤, 그 결과 값을 가지고 다른 요청을 실행시켜야 하는 상황을 가정해보자.그럴 때 이런 식으로 callback 함수를 사용해서 요청을 실행할 수 있다.async/await나 promise 문법이 아직 존재하지 않았던

2022년 6월 17일
·
0개의 댓글

flatten, unflatten

자바스크립트에서 array 구조 안에 또 다른 array 를 인덱스로 가질 때, array 를 평평하게 만드는 작업을 flatten 이라고 한다.flat() 메서드는 모든 하위 배열 요소를 지정한 깊이까지 재귀적으로 이어붙인 새로운 배열을 생성한다.반환 값 : 하위 배

2022년 6월 17일
·
0개의 댓글
post-thumbnail

Recursive Functions

함수가 함수 내부에서 자기 자신을 호출하는 함수를 재귀 함수 (Recursive function) 라고 한다.이러한 재귀 함수는 재귀 호출을 이용해 간단하게 문제를 해결할 수 있는 특정 경우에 사용된다.반복문재귀함수

2022년 6월 13일
·
0개의 댓글

React Currying

인자가 여러개인 함수의 일부 인자를 고정시키는 새로운 함수를 만드는 기법.2개의 인자를 받는 함수.커링 기법을 적용한 방식.화살표 함수로 변형.커링 기법을 적용할 때는 인자의 순서가 매우 중요하다.변동 가능성이 적은 인자는 앞에, 변동 가능성이 높은 인자는 뒤에 배치해

2022년 6월 13일
·
0개의 댓글
post-thumbnail

React HOC vs HOF

HOC는 상위에 있는 컴포넌트로 다른 컴포넌트보다 먼저 실행되는 컴포넌트라고 생각하면 된다.다른 컴포넌트보다 먼저 실행되게 하려면 어떻게 해야할까?권한 분기에서 사용자에 따라 다른 페이지를 보여주고 싶다 했을 때 예를 들어 로그인을 한 유저와 하지 않은 유저가 있을 때

2022년 6월 13일
·
0개의 댓글

JS Closure

함수 안에서 함수로 리턴하는 함수데이터를 보존할 수 있다.클로저 함수는 외부 함수의 실행이 끝나더라도 외부 함수 내 변수를 사용할 수 있다.클로저는 이처럼 특정 데이터를 스코프 안에 가두어 둔 채로 계속 사용할 수 있게하는 폐쇄성을 갖는다.정보의 접근 제한 (캡슐화)‘

2022년 6월 13일
·
0개의 댓글

권한 분기

함수 안에서 함수로 리턴하는 함수사용자에 따라 보여주는 페이지가 다르다.이를 위해 권한에 분기를 주는 컴포넌트를 만들고 이를 이용해 사용자에 권한에 따라 보여주는 페이지를 다르게 주는 것을 권한 분기라고 한다.useEffect 안에서 accessToken 이 있는지 확

2022년 6월 13일
·
0개의 댓글

Cookie, Session, Local Storage

브라우저에 데이터를 저장할 수 있는 3개의 공간expiration data 는 각 테이터마다 설정된 기간동안으로 지정된다.4KB 이하의 저장공간을 가진다.Server-Side 에서 사용되는 데이터를 주로 저장한다.매 api 요청마다 함께 전송된다.httpOnly 플래그

2022년 6월 13일
·
0개의 댓글

Regular Expression

정규 표현식, 또는 정규식은 문자열에서 특정 문자 조합을 찾기 위한 패턴이다.JavaScript에서는 정규 표현식도 객체로서, RegExp의 exec()와 test() 메서드를 사용할 수 있다.String의 match(), matchAll(), replace(), re

2022년 6월 7일
·
0개의 댓글