본문 바로가기

Random33

[CICD] Vite로 빌드할 때 yaml 설정 주의사항 안녕하세요 :) 오늘 vite로 빌드한 웹 어플을 github을 통해 cicd 파이프라인을 구축하는 작업을 했습니다. 부끄러운 일이지만 아직 cicd yaml 파일을 작성하는데 서툴러서 이전에 작업한 파일을 복사해 사용하려 했습니다. 그런데 아래와 같은 에러가 발생했습니다. The user-provided path build does not exist. 원인을 생각해 보면서 yaml 파일을 찬찬히 살펴보니 아래와 같이 설정되어 있는 것을 확인했습니다. - name: Sync Bucket env: AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }} AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }} run: |.. 2024. 3. 19.
Local storage vs Cookie 브라우저 환경에서 데이터를 저장해 사용할 수 있는 공간으로 Local storage와 Cookie가 있습니다. 프론트엔드 작업을 하다보면 흔히 Local storage를 이용하는데, 그렇다면 localStorage가 cookie보다 항상 좋은 것일까요? 웹앱이 JWT를 사용하는 경우 토큰을 어디에다 저장해야 하는 걸까요? Local Storage localStorage는 자바스크립트를 이용해 데이터를 읽고 저장할 수 있습니다. localStorage.setItem("data", data) localStorage.getItem("data", data) localStorage는 매우 편리하고 순수 자바크스립트만으로 제어할 수 있다는 것이 장점입니다. 그리고 저장용량이 약 5메가 바이트로 쿠키에 비해 널널한 .. 2023. 11. 15.
node.js 어플리케이션 exe 파일로 컴파일하기 안녕하세요:) 오늘은 문득 nodejs어플리케이션을 어떻게 exe 파일로 컴파일하는지 궁금해 관련된 포스트를 읽어봤습니다. 그중 잘 설명된 글이 있어 아래와 같이 변역해 옮겨 적어봅니다. Compiling a Node.js Application into an .exe File 개발단계에서 개발자는 어플리케이션을 만들고 실행시키기 위해 설치와 코딩과 같은 여러 프로세스를 거치게 됩니다. 하지만 실제 사용자는 그 안의 코드와 프로세스에는 관심이 없고 오로지 실행시키는 데에만 관심이 있죠. 이러한 이유로 운영체제 시스템에서 별다른 조작없이 단순히 실행시키기만 하는 파일이 필요합니다. 이번 튜토리얼에서는 node.js 어플리케이션을 실행파일로 만드는 법에 대해 알아볼 것입니다. 그리고 실제로 자바스크립트 파일을.. 2023. 5. 23.
코드 리팩터링하기 안녕하세요, 개발자 Sean입니다. 소프트웨어 엔지니어링은 다른 공학과는 다르게 무형의 어떤 것을 만들어낸다는 특징이 있습니다. 그렇기 때문에 어플을 만들어 나가는 과정에서 무수히 많은 예상치 못한 결과를 만나기도 합니다. 또한 잘 계획되지 못한 기능 구현은 끔찍한 코드 실타래를 만들어 내고 이는 필연적으로 원인을 알 수 없는 버그와 에러로 이어지죠. 그리고 이번 주에 제가 그런 실수를 범했습니다. 애널리틱스라는 분석 페이지를 제작 중이었는데요, 음... 복잡한 기능인 데다가 개념 이해가 어렵다 보니 일단은 만들고 보자 라는 생각으로 무작정 키보드부터 두드리고 본 결과 약 1천줄의 ... '의미를 알 수 없는 변수명'과 '왜 이렇게 짜인 건지 이해할 수 없는 컴포넌트 구조'로 점철된 코드가 만들어졌습니다.. 2022. 10. 13.
웹앱에 슬랙 연동하기 안녕하세요, 개발자 Sean입니다. 오늘은 개발 중인 웹 어플에다가 슬랙을 연동하는 작업을 했는데요, 슬랙을 연동하게 된 이유는 신규 유저가 들어올 때마다 알림이 필요했는데 메일은 너무 식상하고(아재 냄새나요)... 모든 팀원들이 슬랙을 사용하니 슬랙으로 공유받으면 좋겠다는 이유에서 였습니다. 사실 slack이 굉장히 관련 블로그가 많은 편이라 따로 설명을 하지 않더라도 쉽게 연동방법을 찾을 수 있습니다. 따라서 대략적인 순서만 알려드리자면 아래와 같습니다. 그리고 기억을 더듬으며 작성해서 대략적인 느낌(?)에 의존해서 알려드립니다. 1. slack 어플 만들기 우선은 슬랙안에 어플을 생성해야 합니다. 뭐 거창 한 건 아니구 아래 링크로 가셔서 그냥 어플 만들기 버튼만 누르고 이름 설정하면 끝입니다. h.. 2022. 9. 28.
프론트엔드에서 페이지 로딩 속도 문제 해결하기 안녕하세요, 프론트엔드 개발자 Sean입니다. 만약 개발중인 애플리케이션의 규모가 크거나 빅데이터를 다루는 서비스라면, 다들 페이지 로딩 속도 문제 고민을 해보셨을 것이라 생각합니다. 이는 유저의 경험에 아주 안 좋은 영향을 미치기 때문에 꼭 해결을 해야 하는 문제이기도 하지요. 하지만 위와 같은 상황에서 사실 프론트엔드가 근본적인 해결책을 낼 수는 없습니다. 대부분의 경우 서버의 응답이 곧 페이지 로딩 속도이기 때문이죠. 오늘 포스팅에서는 위와 같은 상황에서 저는 어떤 생각을 했고 어떻게 유저의 경험에 미치는 영향을 최소화했는지 경험을 공유하고자 합니다. 사실 초보 개발자가 짧은 머리로 고민해 만든 일종의 트릭이기 때문에 추천드리지는 않습니다. 그리고 혹시 더 좋은 방법을 아시는 분들은 댓글로 노하우를.. 2022. 9. 19.
DP PX 변환 현재 진행하고 있는 토이 프로젝트에 새로운 UIUX 디자이너가 합류했다. 새 디자이너는 Zeplin 툴을 이용하고 있었는데 디자인을 살펴보다가 처음보는 크기 단위를 발견했다. DP dp가 과연 무엇인지... 그래서 이것저것 조사를 해보니 dp는 안드로이드 개발에서 사용하는 크기단위라고 한다. 토이 프로젝트에서는 웹 개발과 안드로이드 개발을 동시에 진행하는데 안드로이드 디자인을 우선 개발하다 보니 dp 단위를 사용하게 된 것이다. 안드로이드를 담당하고 있는 동료 개발자에게 물어보니 안드로이드 앱에서는 dp를 이용하면 알아서 크기가 조절되면서 다양한 모바일 디스플레이에서도 위화감 없이 화면을 구성할 수 있다고 한다. 문제는 웹 어플리케이션을 담당하고 있는 나였다. 따라서 디자이너가 dp 단위로 어플을 제작하.. 2022. 8. 21.
Presentational and Container Components 리엑트 애플리케이션을 제작할 때 아주 유용한 간단한 디자인 패턴이 있다. 오랫동안 리엑트를 사용해 본 사람이라면, 이미 알고 있을 것이다. 해당 포스팅에서 아주 잘 설명하고 있긴 하지만 몇가지 좀 더 설명하고자 한다. 컴포넌트를 두개의 카테고리로 나눈다면 컴포넌트를 재사용하고 이해하는 데에 아주 쉬워진다는 사실을 알 것이다. 필자는 이를 Container-Presentational이라고 부르는데 Fat-Skinny, Smart-Dumb, Stateful-Pure, Screens-Components라고도 불리기도 한다. 정확히 같은 개념은 아니지만 비슷한 개념을 공유하는 말이다. 필자가 정의하는 presentational 컴포넌트란: 어떻게 보일지를 관여한다. presentational과 container.. 2022. 6. 21.
Argument of type 'string | undefined' is not assignable to parameter of type 'string'. Type 'undefined' is not assignable to type 'string'.ts(2345) 오늘 algolia 환경설정 코드를 작성하다가 아래와 같은 에러코드를 만났다. Argument of type 'string | undefined' is not assignable to parameter of type 'string'. Type 'undefined' is not assignable to type 'string'.ts(2345) 사실 여러 번 봐왔던 오류코드라 대충 짐작이 왔다. 타입 설정 문제였다. 문제가 생긴 코드는 아래와 같다. const algoliaClient = algolia(process.env.REACT_APP_ALGOLIA_appId, process.env.REACT_APP_ALGOLIA_apiKey); process.env에는 string 혹은 undefined의 값이 들어.. 2022. 5. 14.
DB에 쿼리하기 VS 클라이언트에서 데이터 분류하기 바보 같은 질문에도 항상 현명한 답을 주시는 우리 토이 프로젝트 팀원님... 오늘은 sorting 기능을 구현하다가 문득 이런 의문이 들었다. 분류 옵션을 선택할 때 마다 데이터베이스에서 새로운 데이터를 받아온다면, 자원낭비가 아닐까? 만약에 데이터를 한번만 불러와 로컬에 저장하고 분류 옵션을 선택할 때마다 클라이언트에서 저장된 데이터를 분류해서 새로 랜더링 하면 되지 않을까? 바보같은 질문에 팀원님은 아주 좋은 질문이라며 좋아하셨다. 읭? 답변을 정말 상세하게 주셨는데 아래와 같다. A: 제가 생각하기에 분류와 그룹핑과 같은 기능을 데이터베이스 서버에서 실행하는 이유는 다음과 같습니다. 잘 구현된 데이터베이스 서버는 보통 클라이언트의 컴퓨터보다 더 많은 리소스를 가지고 있습니다. 따라서 클라이언트보다 .. 2022. 5. 4.
CSS와 JS 애니메이션 성능향상 팁 웹 애플리케이션의 성능과 관련된 포스팅을 지속하다가 이번에는 CSS와 JS의 성능 향상은 어떻게 해야 할지, 특히나 렌더링에서 많은 연산을 요구하는 애니메이션에 관해 최적화 방법이 궁금해 조사를 해보았다. 아래는 관련해 좋은 글이 있어 번역해 옮겨본다. Tips for Improving CSS and JS Animation Performance 화려한 애니메이션은 웹사이트를 다른 경쟁사보다 눈에띄게 하는 효과가 있지만, 역으로 최적화되지 않은 애니메이션은 성능 문제로 결과적으로 유저를 이탈시키는 결과를 일으키기도 한다. 만약에 애니메이션이 초당 60 프레인 이하로 렌더링 된다면 방문자는 이를 알아차릴 것이고 사용자는 안좋은 경험을 하게 된다. 이 가이드는 어떻게 CSS와 자바스크립트 애니메이션을 스무스하.. 2022. 4. 25.
웹사이트 로드타임 얼마나 빨라야 빠른 것일까? 빠른 웹사이트가 유저 입장에서 좋다는 점은 누구나 다 안다. 그렇다면 과연 빠르다는 건 얼마나 빨라야 빠른 것일까? 아마 어플의 성격과 특징에 따라 다를 것이다. 하지만 적어도 어느 정도의 기준이 있다면 좋을 텐데 말이다... 관련해서 좋은 글이 있어서 번역해 옮겨 본다. Website Load Time in 2021: How Fast Is Fast Enough? 오늘날, 빠르게 변화하는 디지털 세계에서 유저에게 빈틈없는 경험을 할 수 있는 웹사이트를 개발하는 것은 회사에게 아주 중요한 일이다. 회사들은 실시간으로 그리고 지속적으로 웹사이트의 기능을 모니터링하는 도구에 투자를 하고 있다. What Is Website Load Time? 웹사이트 로드 타임이란 웹사이트의 콘텐츠를 완전히 전달받는데 걸리는 .. 2022. 4. 25.

티스토리툴바