본문 바로가기

전체 글

 (154)
[WEB] Multipart/form-data Multipart/form data의 정의 rfc1341 문서에서 multipart content-type을 아래와 같이 정의하고 있다. A "multipart" Content-Type value, which can be used to combine several body parts, possibly of differing types of data, into a single message. 즉, 여러 종류의 데이터를 하나의 메시지로 결합하여 보낼 수 있는 헤더 필드로 공식적인 MIME(Multipurpose Internet Mail Extensions) 타입입니다. Multipart 형태로 요청을 보낼 경우, http 프로토콜의 바디 부분에 데이터를 여러 파트로 나눠서 보내게됩니다. 일반적으로 파일 또는..
[독후감] 쉽게 시작하는 타입스크립트 쉽게 시작하는 타입스크립트 - 예스24 8000명 이상의 수강생이 인정한 인프런 인기 강의를 책으로 만나다!‘캡틴판교’와 함께 타입스크립트를 쉽게 시작해 보자!타입스크립트는 자바스크립트에 타입을 부여한 언어로, 타입 시스템 www.yes24.com 운 좋게 점핏 행사에서 당첨되었고, 캡틴판교님께서 무료로 책을 선물해주셨다. 나는 타입스크립트를 우걱우걱 악으로 깡으로 배웠고, 책을 선물받은 김에 이걸로 꼼꼼하게 읽어보기로 했다. 한줄평 : 처음 시작할 때 너무 좋은 타입스크립트 서적! 좋았던 점 관련된 개념을 가볍게 설명하고 넘어가서 이해하는 데 큰 문제가 없다. `쉽게 시작하는` 이라는 말에 알맞게 쉽고 간략하게 설명되어 있으며 공식문서를 보라는 점을 강조해준다. 현업에서 경험한 고민들이 있는데 에러들이..
[convention] BEM 패턴 BEM 패턴이란?웹 개발에 대한 구성 요소 기반 접근 방식입니다. Block, Element, Modify로 나누며 이를 통해서 CSS를 쉽게 재사용하고 체계적인 관리가 가능합니다.실제 코드 작성 시 Block__Element—Modifier의 형태를 사용합니다.(만약, 이름의 띄어쓰기가 들어가거나 길어질 시에는 -를 하나만 사용하여 구분합니다.)ex). card, card__image, card—yellow, card__title—large, card__title-image—red 실제 예시코드 Normal button Success button Danger button.button { display: inline-block; border-radius: 3px; padding: 7px 12px; bor..
API의 속성이 제한되는 현상 (CORS-safelisted response header, Access-Control-Expose-Headers) API를 받았는데, API의 속성이 제한되는 현상이 일어났다. 하지만, 동료는 정상적으로 API 정보(속성들)가 전달된다한다. 무엇이 문제였을까? 결론부터 말하면, 백엔드에서 Header 설정을 하지 않았다. 좀 더 구체적으로 보자. 문제의 발생 몇 가지 조건이 겹쳤다. 1. 현재 우리는 local Proxy를 이용하여 가볍게 개발중이다. 2. 백엔드에서 cors 에러를 방지하기 위해서 'Access-Control-Allow-Origin: *' 설정을 하여서 예외처리 해두었다. 이 상황에서 나는 테스트 서버로 api 요청을 보내야했고, 이 과정에서 굳이 local Proxy를 사용할 필요가 없다 느껴서 서버 주소를 직접 입력하여서 보냈다. 그리고 아래 사진처럼 제한된 값이 도달했다. 하지만, 네트워크에는..
Konva vs Fabric vs Canvas API 라이브러리 선택과정 Drawing 기능 +@를 구현하기 위해서 canvas 라이브러리를 선택하는 과정에 고민이 생겼다. 이 기능을 제공하는 여러 라이브러리가 있지만, 리액트와 충돌 이슈가 있는 라이브러리를 모두 제외하니 Konva, Fabric, 자체 구현 세 가지 방식이 남았다. 이 중 자체 구현은 기능이 확장 될 때마다 새로 만드는 부분에서 시간적인 효율이 나오지 않는다 생각하여 제외했다. 결론을 먼저 말하면, Konva를 선택하였다. (이후 나올 모든 그림의 순서는 canvas - konva - fabric 순입니다.) 1. 성능 비교 lighthouse 렌더링 성능 비교 lightHouse 성능은 다 고만고만하다. fabric이 미세하게 빠르다. 최적화가 안되어있을 때는 canvas 라이브러리들을 사용하면 SI가 굉..
Monolithic Architecture vs MSA(Micro Service Architecture) MSA 정의 MSA는 1개의 시스템을 독립적으로 배포 가능한 각각의 서비스로 분할한 것입니다. 각 서비스는 API를 통해 데이터를 주고 받으며 1개의 큰 서비스를 구성합니다. Monolithic Architecture(모놀리식 아키텍쳐)의 한계점을 극복하고자 등장하였습니다. 실제로 모놀리식 아키텍쳐가 너무 커졌다면 MSA로 교체하는 것이 이로울 수 있습니다. 대표적으로 넷플릭스, 아마존 등의 기업이 이 구조로 교체하고 서비스 속도 등에서 굉장한 이점을 보았습니다. 모놀리식 아키텍쳐의 장점 손쉬운 배포 - 파일 또는 디렉토리가 하나이기 때문에 쉬운 개발 - 하나의 코드 베이스를 이용하기 때문에 개발이 쉽고 디버깅이 쉽다. 성능 - 단 하나의 API로 MSA의 여러 API가 수행하는 것처럼 기능을 수행할 수..
[WEB] Rest API Rest API(REpresentational State Transfer API)란? 로이 필딩의 박사학위 논에서 웹의 장점을 최대한 활용할 수 있는 Rest 아키텍처가 발표되었습니다. 이 아키텍처 스타일의 디자인 원칙을 준수하는 API를 Rest API 또는 Restful API라 합니다. 2000년도에 발표되어서 이미 보편화가 되어버린 방식으로, 현재는 쉽게 접할 수 있습니다. Restful API는 개발자들에게 비교적 높은 수준의 유연성과 자유를 제공하는 장점이 있습니다. Rest API 디자인 원칙 Rest API는 자유롭고 다양한 지원이 가능하지만, 아래 6가지 디자 원칙을 지켜야합니다. 균일한 인터페이스 : 요청이 어디에서 오는지와 무관하게, 동일한 리소스에 대한 모든 API 요청은 동일하게 ..
[JS] 클로져 클로져란?정의 : 함수와 렉시컬 환경의 조합. 흔히, 본인이 포함된 상위 함수보다 오래 살아있는 중첩함수를 의미하기도 한다.이해를 위해 필요한 개념 : 스코프 체인 : 현재 위치에서 함수에 필요한 변수를 탐색을 하고, 없을 경우 스코프체인을 통해서 상위 함수에서 변수를 찾는다. 끝까지 찾지 못할 시, 참조 에러를 발생시킨다.렉시컬 스코프(정적 스코프) : 함수가 생성(정의)될 당시의 상위 스코프와 그에 따른 외부 변수를 기억하고 생성 이후에도 계속 접근이 가능할 수 있게 하는 스코프 규칙이다. 생성 될 때를 기준으로 하기에, 상위 함수의 생명주기가 끝나도, 상위 함수의 변수의 접근이 가능하다.자유 변수 : 생명 주기가 끝난 상위 함수의 변수를 자유 변수라 한다.실행 컨텍스트 : javascript 코드를..

티스토리툴바