본문 바로가기

분류 전체보기235

[Recoil] Persist 데이터 구조가 도중에 바뀌면 어떻게 해야 할까? 안녕하세요 :)저는 사용자의 편의성을 위해 데이터를 로컬 스토리지에 남겨두어 사용자가 재방문하거나 일시적으로 인터넷이 끊겨도 불편하지 않도록 어플을 만드는 편입니다. 이렇게 되면 데이터 구조를 짜고 업데이트하는 등 추가적인 작업이 많아지지만 결과적으로는 서버의 통신 부하를 줄이고 더 빠른 사용자 경험을 제공할 수 있어서 단점보다는 장점이 많다고 생각합니다.오늘은 사이드 프로젝트를 진행하다 아래와 같은 에러 창이 뜨는 것을 보았습니다. 오잉? 하던 와중에 생각해 보니 로컬 스토리지 데이터 구조를 바꾸었던 것이 생각났습니다.  현재 저의 로컬 스토리지에는 기존의 데이터가 남아있기 때문에 자바스크립트 코드가 기존의 데이터를 사용하면 프로토타입이 달라져 발생하는 문제였습니다. 사용자가 아무도 없는 서비스라면 단.. 2024. 8. 20.
[HTML_CSS] 파일 업로드 버튼 만들기 안녕하세요 :)오늘은 사실 간단해 보이는 ui인데 꽤 고민을 하게 만든 파일 업로드 버튼 ui에 대해 포스팅하려고 합니다. react와 tailwind를 사용하는 프로젝트라 아래와 같이 컴포넌트를 만들었습니다. 여기서 저는 업로드 아이콘에서 꽤 애를 먹었는데요, 아이콘이 이벤트 버블을 일으키지 않아서 아이콘 위를 클릭하면 아무런 일이 발생하지 않는 문제가 있었습니다. 찾아보니 css에 pointer-events: none이라는 스타일 속성이 있더라구요. 해당 스타일은 어떤 상황에서 그래픽 엘리먼트가 이벤트의 타깃이 될 수 있는지를 결정할 수 있는 속성입니다. 여기서 저는 none값을 줘서 svg 아이콘이 이벤트 타깃이 아니니 그 뒤에 있는 이벤트를 트리거 시키도록 했습니다. {label && {.. 2024. 5. 10.
[HTML_CSS] table에 유연한 ellipsis 적용하기 안녕하세요 :) 포스팅을 올릴 때마다 저의 밑바닥을 보이는 것 같아 부끄럽지만... 저랑 같은 어려움을 겪고 계신 분들을 위해 포스팅을 올려봅니다. 사실 저는 ellipsis를 적용할 때마다 긴장합니다. ellipsis '...' 표시는 일상에서 자주 접하는 문자 overflow 처리 방식인데 이게 아무렇게 사용한다고 "쨘"하고 적용되지는 않습니다 ㅠㅠ block 요소인지 그리고 너비가 있는지 등 함께 적용되어야 하는 스타일이 있습니다. 자세한 내용은 다른 블로그에 자세히 설명되어 있으니 살펴보시길 바랍니다. 저도 매번 찾아보고 있습니다. 오늘은 table 컴포넌트 작업중이었는데요, Saas 웹애플리케이션이다 보니 테이블이 지원해야 하는 기능들이 꽤 많이 있습니다. 그리고 유저 특성상 많은 데이터를 살펴.. 2024. 4. 19.
[HTML_CSS] height 속성 애니메이션 적용할 때 주의사항 안녕하세요 :) 오늘은 아래와 같이 버튼을 누르면 높이가 늘어났다 줄었다 하는 애니메이션 작업을 했습니다. 처음에는 그저 hegiht 값을 변경하면 되겠지~ 생각했는데요, 스무스한 애니메이션이 아닌 딱딱 끊기는 높이변화만 적용되었습니다. 원인을 찾아보니 height 값이 auto로 설정되어 있다면 애니메이션이 적용되지 않는다고 합니다. auto 값이란 가변적인 값이기 때문에 애니메이션 연산이 어려운 모양입니다. 자세히 알고 싶었지만 자세한 설명은 찾지 못했습니다 ㅠㅠ 여하튼 중요한 포인트는 height 값이 아닌 max-height 값을 변경해서 이 문제를 해결할 수 있었습니다. 저는 gsap을 이용해 애니메이션을 구현했는데요, 엘리먼트를 펼칠 때의 maxHeight 값을 어떻게 넣으면 좋을지 고민하다가.. 2024. 4. 9.
[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.
[JS] Nested 객체 다루기 안녕하세요 :) 사이드 프로젝트로 간단한 캘린더 어플을 만들고 있는데요. 날짜 데이터가 은근히 다루기가 까다롭네요 ㅠㅠ 날짜(+ 약속) 데이터를 어떻게 하면 잘 정리된 상태로 보관하면 좋을지 생각을 해보다가 아무래도 중첩 객체 형태로 데이터를 다루는 게 좋겠다고 생각했습니다. {"year": { "month: { "date": [] } } } 이렇게 데이터를 보관하면 탐색과 저장 속도가 빠르고 서버와의 소통에도 장기적으로 용이하다고 생각했기 때문입니다. 문제는 배열의 경우 물음표 식별자를 통해 "undefined" 처리를 하기가 쉽지만 객체에서는 꽤나 까다로운 부분이 있었습니다. 키값이 있는지 없는지 확인을 해야하기 때문에 if문이 줄줄이 늘어나는 문제가 있었습니다. 그래서 객체의 중첩된 내부객체 값을 .. 2024. 2. 29.
[Three] Curious about the mind of AI Hello guys :) Today, I tried an interesting experiment. Recently, I've been studying AI and I've become interested in "embeddings". Here, embeddings refer to the artificial intelligence interpreting characters, images, or videos according to its own criteria and representing them as vectors. For example, when reading the character "Love," it transforms into numerous vectors like the following: [.. 2024. 1. 19.
[Three] AI의 머릿속이 궁금하다 안녕하세요 :) 오늘은 재밌는 실험을 해보았습니다. 최근 AI를 공부하면서 임베딩에 관심이 생겼습니다. 여기서 임베딩이란 어떤 문자나 사진 영상을 인공지능이 나름의 기준으로 해석해 벡터로 표현하는 것을 의미합니다. 예를 들어 "Love"라는 글자를 읽으면, 아래와 같이 무수히 많은 벡터로 변형하게 됩니다. [1.2472897123532, -2.1258931740124, 0.02148483, ...] 이 숫자가 무엇을 의미하는지 그리고 왜 이렇게 만들었는지는 그 누구도 알지 못합니다. 말로만 듣던 인공지능의 블랙박스인 것이죠. 따라서 인공지능 A 모델이 임베딩한 벡터는 다른 인공지능이 이해할 수 없습니다. 오로지 같은 모델만이 위의 벡터를 읽고 의미가 "Love"인 것을 알게 됩니다. 여기서 재미있는 생각.. 2024. 1. 19.
[Highcharts] "removePoint" 에러 해결 안녕하세요 :) 오늘은 하이차트 작업 중에 위와 같은 에러가 발생했습니다. 필터를 선택하면 필터에 따라 위의 플래그가 나타나는 기능을 구현 중이었습니다. 이런저런 실험을 진행해 보니 아무래도 차트를 리렌더링 하는 과정에 문제가 발생하는 듯합니다. 정확한 원인을 파악하지 못했지만, 이전에 하이차트가 기존의 데이터를 캐싱해 발생하는 문제를 겪어본 경험이 있어 관련 문제라 짐작하고 해결을 시도해 보았습니다. 저의 경우 리엑트를 사용하고 있기 때문에 리엑트 라이브러리에 관련 옵션이 있는지 살펴보았고 아래와 같은 설정이 가능하다는 것을 발견 했습니다. immutable Boolean no false Reinitialises the chart on prop update (as oppose to chart.updat.. 2024. 1. 17.
[git] 프로젝트 파일명 변경 후 cicd에 실패한다면 안녕하세요 :) 오늘 리펙토링을 진행하면서 파일과 폴더명을 변경했는데요, 분명 로컬에서는 실행에 문제가 없었는데 푸시를 하려고 하니 아래와 같은 에러가 반복해서 발생했습니다. 한참을 삽질하던 중에 git에서는 파일 및 폴더명의 대소문자 구별을 하지 않는다는 글을 읽게 되었습니다. 로컬에서 "Column" 파일을 "column"으로 바꾸고 해당 모듈을 임포트 하는 코드를 수정했어도, git에서 관리되는 코드에서는 파일명은 그대로 유지되고 임포트 하는 코드만 수정이 된 것이죠. 그 결과 cicd 환경에서는 임포트에 실패하며 에러가 발생한 것이었습니다. 해결방법은 간단했습니다. 아래의 명령문으로 git한테 대소문자 구별을 하라고 설정을 바꿔주면 됩니다. git config core.ignorecase false 2023. 12. 19.
[Cookie] 브라우저가 쿠키 저장에 실패한다면 안녕하세요 :) 하루종일 쿠키문제로 시달리다가 겨우겨우 문제를 해결했네요 ㅠㅠ 혹시나 관련해서 문제를 겪고 있는 분들에게 도움이 되길 바라며 포스팅을 올립니다. 분명 서버로부터 Set-Cookie에 쿠키가 담겨 응답이 왔는데 브라우저 개발자 도구에서 쿠키가 보이지 않는다면, 아래처럼 오른쪽에(크롬기준) 경고 표시가 없는지 살펴보시길 바랍니다. 경고 표시 위에 커서를 올리면 자세한 설명이 나오는데요, 저의 경우 아래와 같은 경고문이 나왔습니다. This Set-Cookie header didn't specify a "SameSite" attribute and was blocked because it conform a cross-site repsonse which was not the response to .. 2023. 12. 13.
[TS] Type vs Interface 타입과 타입변수 type은 타입스크립트에서 데이터의 모양을 규정하는데 쓰는 키워드입니다. 타입스크립트에서 기본 타입으로는 아래와 같습니다: String Boolean Number Array Tuple Enum Advanced types 각각의 타입은 고유의 역할과 기능이 있고 개발자는 목적에 알맞게 사용하게 됩니다. 타입스크립트에서 타입변수는 "어떤 타입의 이름"을 의미합니다. 기존에 존재하는 타입을 위한 새로운 타입 이름을 만들어 낼 수 있도록 하죠. 타입변수가 새로운 타입을 정의하는 것은 아닙니다. 대신에 기존에 존재하던 타입 이름에 별도의 이름을 제공합니다. 타입변수는 원시 타입을 포함해 유효한 타입스크립트 타입을 type 키워드를 통해 생성할 수 있습니다. type MyNumber = number.. 2023. 11. 24.

티스토리툴바