일단해보는거지

💡 스토리북의 디자인시스템 튜토리얼을 진행하고 오시는 것을 추천합니다. 튜토리얼을 진행하고 오셨다면 예제로 사용할 소스코드가 있을 것입니다. 해당 코드들 위에서 아주 간단한 Input 컴포넌트를 타입스크립트로 작성하고 Rollup으로 빌드하도록 하겠습니다. 01. Typescript 셋팅하기 (tsconfig) 먼저 타입스크립트 패키지를 설치합니다. npm install -D typescript​ tsconfig.json 파일을 루트에 생성합니다. // tsconfig.json { "target": "ES5", "lib": [ "DOM", "DOM.Iterable", "ESNext" ], "jsx": "react-jsx", "jsxImportSource": "@emotion/react", "module"..

회사에서 운영하는 서비스가 늘어갈수록 UI에 대한 반복작업은 점차 많아지게 됩니다. 곧 디자인시스템의 필요성이 나타는데요. 여러가지를 아우르는 디자인시스템에서 개발자들은 특히 UI 컴포넌트 라이브러리에 책임을 두고 있습니다. 도입하게 된다면 각 서비스에서 UI에 관한 코드를 작성하는 효율도 높아지고 유지보수도 간단해질 것입니다. 다음 기술들과 함께 시작해보겠습니다. Typescript, React Emotion: CSS in JS 라이브러리로 컴포넌트의 모든 스타일에 적용합니다. Rollup: 모듈 빌드와 트리쉐이킹에 특화된 빌드툴을 사용합니다. NPM: 빌드된 코드를 어디서든 사용할 수 있게 배포합니다. Storybook: 테스팅, 협업, 문서화 등의 기능으로 디자인시스템 구축을 쉽게 시작할 수 있습니..

사용자의 세션처리는 회원가입과 로그인이 있는 프로젝트에서는 언제나 중요한 관문으로 만나게 됩니다. 일반적으로는 서버에서 전달받은 토큰을 쿠키에 저장하고 사용자의 HTTP요청에 응답하는 방법으로 진행하게 됩니다. 하지만 이번에는 앱과 웹뷰의 환경 속에서도 같은 방법으로 세션과 HTTP 통신을 할 수 있는 사례를 공유해보겠습니다. 목차 프로젝트 환경 Flutter, Webview(Nextjs)에서 쿠키로 세션관리하기 서버사이드와 클라이언트에서 효율적으로 Axios 라이브러리 사용하기 1. 프로젝트 환경 현재 진행중인 프로젝트는 webview중심으로 구현된 앱 프로젝트입니다. Flutter로 앱의 껍데기를 만들고 대부분의 주요 기능은 내부의 Webview를 통해서 제공하는 형태입니다. Webview에 띄워진 ..

00. 직면한 문제 아마존 S3서버에서 JSON파일을 받아 수정하고 다시 업로드를 해 조회하는 작업을 수행해야해습니다. 그러나 저장하고 업로드했는데도 이전 파일의 결과만을 받을 수 있었습니다. S3의 콘솔에 직접가서 확인해보니 변경사항은 잘 적용되어 있었는데도요! 어떻게 하면 새로 업로드한 파일을 가져올 수 있을까요? 01. 캐시 때문에 그렇습니다. 브라우저의 네트워크탭을 한번 확인해보겠습니다. 새 파일을 받아야하는 곳의 size of a file이 '(disk cache)'라고 나타는데요. 일반적으로는 네트워크 응답을 통해 다운로드한 파일의 크기가 표시되는 곳입니다. 즉 네트워크 응답으로 파일을 받은게 아니라 disk cache로 부터 파일을 받았다는 것을 알려주고 있습니다. 03. 디스크캐시 캐싱은 ..

드디어! 오랜 문제를 해결했습니다. 절대로 해결하지 못할 것 같던 문제를 해결하고 공유하게 되어서 기쁘네요 ㅎㅎ 어쩌다 이런일이? 도커환경에서 nginx를 사용하여 여러 서버들을 운용하고 있었는데, Vue 또한 그랬었죠. 도커의 Node 버전을 올림에 따라 Vue의 버전도 2.5.x에서 2.6.x 버전으로 그에 맞추어 업그레이드 해야만했습니다. 그리고 문제를 만나버렸습니다. 다른 것들은 괜찮았는데 HMR(Hot Module Replacement)가 제대로 동작하지 않았고 브라우저 콘솔에는 "WebSocket Connection to 'ws://some_ip/ws' failed~" 에러메시지만 나타났을 뿐이였습니다. 개발환경과 설정 Mac OS Docker and Nginx Vue 2.6.x (using ..

I will record what I learned when I have to write several counts in several conditions with SQL. There were two ways to do that. 01. Use Function Count and if clause. It's simple we will combine function 'COUNT' with 'if' clause. You can omit 'GROUP BY' clause depend on your needs. COUNT(expression) FROM table_name GROUP BY column_name; if(condition, value for true, value for false) Here is a ex..

Recently I needed to upload JSON data which was written from front-end side at Amazon S3 server. There were two requirement that I didn't know exactly. Writing and reading JSON file with Nodejs. Uploading JSON file to S3 Server. After looking over how to send json data from front-end side, I'm gonna show you another step by step. 01. Send JSON data to backend side. It's just simple example for s..

I will follow Fast API's official document tutorials to learn fastly Python and Fast API itself. Let's begin with set up Fast API project. STEP1. Install Fast API. Run the below codes on terminal. pip install "fastapi[all]" 'pip' is a package manager for tons of Python dependencies. 'all' in the middle of square brackets means including all of optional dependencies and features when install Fast..