일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
- sprinkles
- react-native
- 기초
- react server component
- 자바스크립트
- 리액트쿼리
- 쓰레드
- 개발자
- React
- 기본
- 비동기
- 동기
- react-query
- Critical Rendering Path
- amplify
- SWC
- 최적화
- 캐쉬
- next.js
- 컴포넌트
- MSW
- Babel
- mockoon
- CSS-in-JS
- thread
- Concurrent Mode
- front-end mocking
- 아키텍처
- 리액트
- 리액트네이티브
- next hydration
- Basic
- async
- 목킹
- JavaScript
- mock service worker
- link
- vanilla-extract
- Cache
- styled-component
- Today
- Total
목록기타 (6)
Don’t worry about failures

Mockoon이란 프런트를 개발하다보면, Mocking을 모르면 서버에서 아직 개발이 되지않은 api를 마냥 기다려야하나? 그 전까지 목 데이터를 하드 코딩으로 관리를 해야하나? 기본 고민을 해왔을 것이다. 이러한 고민을 해결해 주는 몇몇 가지가 있다. 앞서 MSW에 이어 이번엔 Mockoon에 대해 알아보고자 한다. Mockoon을 간단하게 사용해보면,, 너무 편하고 좋다. 라는 생각을 많이 가지게 된다. 일단 MSW와 다르게 내부 라이브러리를 사용하지않고, 별다른 코드 작업을 하지않아도 된다. 또한, GUI가 제공되면, CLI를 통해도 사용이 가능하다. Mockoon은 OS에 application으로써 설치하여 사용할 수 있다. 각 OS별로 install package를 제공한다. ( install..

개념 이진 데이터를 문자열로 인코딩하는 방법 중 하나. 이진 데이터를 테스트 형식으로 변환하거나 전송하거나 저장할 때 사용. 64개의 ASCII 문자로 이루어진 문자 집합을 사용. A-Z, a-z, + / 로 이루어진 문자. 변환 방식 binary data를 6 bit씩 자른 뒤 값을 아래의 해당되는 문자로 치환. 예) Man의 문자를 ascii 코드로 변경하고 그 코드를 binary로 변경하면 위와 같다. 이를 6bit로 묶으면? 010011 / 010110 / 000101 / 101110 => 19 / 21 / 5 / 46 => 이를 위의 표대로 다시 치환하면 => T / W / F / u 가된다. 결과를 보면 Man => TWFu가 된다. 특징 위에서 살펴보았듯이 Base64로 인코딩한다는 것은 기..
태그를 통해 리소스 우선순위를 제어할 수 있는 속성들이 존재한다. 이를 정리해보자. 1. rel 속성 - preload : 리소스를 사전로드하여 페이지 로딩 성능을 개선한다. - prefetch : 리소스를 사전로드하지만 현재 페이지 로딩에 직접적으로 필요하지 않을 때 사용. 지정된 리소스의 다운로드를 백그라운드에서 진행. 저장된 리소스를 캐시에 저장하며, 페이지 전환 시에 사용된다. - stylesheet : 스타일시트 파일을 지정 - icon : 페이지 아이콘을 지정. favicon 지정 - dns-prefetch : 도메인의 DNS를 사전 로드 - preconnect : 서버와의 연결을 사전 설정 2. as 속성 - script : 스크립트 파일로 처리 - style : 스타일시트로 처리 - ima..

webpack만을 공부 및 테스트 하기 위해 간단하게 프로젝트를 생성해 나아가보자. 1. 빈 프로젝트에 package.json 생성 npm init -y 2. 웹팩 관련 라이브러리 설치 및 lodash 설치 npm i webpack webpack-cli -D 3. index.html 생성 스크립트는 밑에서 생성할 예정. 4. src/index.js 생성 function component() { const btn = document.createElement("button"); btn.innerHTML = "Click me"; return btn; } document.body.appendChild(component()); 5. package.json 내용 추가 "script" : { "build" : "we..
시멘틱 웹의 개념을 봐보자. 현재의 인터넷에서 리소스에 대한 정보와 자원 사이의 관계를 온톨로지 형태로 표현해서, 기계가 처리하도록 하는 프레임워크 이자 기술. 개념상으로는 이해가 너무 어렵다. 우선, 개념 설명에 나온 온톨로지에 대해 이해를 해보자. 온톨로지란? 지식 공학 및 정보 과학 분야에서 사용되는 개념적인 도구로, 현실 세계의 객체, 개념 그리고 그들 간의 관계를 형식적으로 정의하는 것을 의미. 즉, 온톨로지라는 것은 어떠한 개념을 표현하기 위한 도구라고 생각하면된다. 예를 들어보자 자동차를 생각해보자. 자동차라는 개념은 엔진의 힘을 이용하여 바퀴를 굴러가게하여, 땅위를 움지기게 하는 탈 수 있는 것으로 개념이 표현이 된다. 조금 더 자세히 파보면, 엔진 + 바퀴를 통해서 개념을 표현한다. 이처..
회사에서 진행하는 프로젝트 특성상 영상을 많이 다룬다. 이에 따라 영상을 최적화하는 작업이 많이 필요하다. 처음에는 단순히 size, bitrate 값만 조절하며 보여줄 때 괜찮아 보이는 수준으로만 맞추도록 하고, 최소한의 용량을 가지도록 시도했다. 실제로 서비스에 올려서 강력한 테스트를 하지않아. 이정도면 되겠지? 라는 생각을 가졌지만, 다른 개발자분과 이야기를 나누면서 그거 뿐만 아니라 ffmpeg를 통해서 영상을 다뤄봐라. 라는 미션 아닌 미션을 듣고 스터디를 시작했고, 이를 기반으로 글을 남겨본다. 영상 업로드 관련에서부터 시작해보자. 영상 업로드 시 여러가지 방법이 있지만, base64와 multi-part에 대해 찾아봤다. base64같은 경우 8비트 이진 데이터를 문자 코드에 영향을 받지 않..