전체 글

들어가기 React를 처음 공부하면서 프로젝트를 만들었을때 생긴 의문점이였다.vite.svg 파일은 public에 들어가있고 react.svg 파일은 src/assets 에 위치해 있었다.그래서 이번에는 해당 내용에 대해서 개념적으로 공부하면서 정리해보고자 한다. public 폴더의 특징public 에서는 정적 파일을 다루게 된다. 직접 URL 접근예를 들어 처음 react 프로젝트를 만들었을때를 가정해보자App.tsx 파일에서 다음과 같이 불러오게 된다.// 실제 코드에선 import 로 파일을 넣어준 다음 src={viteLogo} 를 사용// 아래 코드에선 풀어 쓴 내용 이렇게 사용하게 되면 다음과 같이 직접적인 URL을 통해서 접근할 수 있다.경로는 프로젝트 루트 / 를 기준으로 한다.빌드 후에 ..

패스트 캠퍼스 강의를 보면서 Vite 기반 React 프로젝트에서 Path Alias 설정하는 부분에 대해서 조금 다른 부분이 있어 해당 부분에 대해서 작성해보려고 한다. Path Alias 는 왜 사용하는가?Path Alias 는 프로젝트 내부에서 특정 경로를 별칭(alias) 를 설정하여 import 하게 해주는 기능이다.만약 내가 import 해야되는 파일이 src/pages/main/lui/MainPage.tsx 파일이라고 가정해보자그러면 기존의 방법론으론 경우에 따라 다르지만 상대경로 또는 절대경로를 사용하게 된다 그러면 다음과 같이 가독성이 떨어지는 문제가 발생한다.import { MainPage } from "../pages/main-page/ui/MainPage"; 근데 Path Alias..

초보 React 개발자의 세팅 방법이다.사실 기존에 정리된 글은 많은데 Tawilwind CSS 가 4.0 이상 버전에서 기존의 설치 방법과는 다른 부분이 있어 해당 내용에 대해서 정리하려고한다. 1. React + Vite + TypeScript 프로젝트 생성npm create vite@latest react-templete 다음의 명령어를 치고 아래 이미지와 같이 따라하면 된다 React를 사용하므로 React 설정 TypeScript 설정 이렇게하면 React + Vite + TypeScript 의 설정은 끝이다. 2. Tailwind CSS 설치위에서 말했듯이 해당 내용은 4.0 이상 버전의 Tailwind CSS 설치에 대해서 다룬다. 크게 다른건 없는데 설치해야되는 라이브러리, 설정 내용들의..

서론이번에 React를 공부하면서 공부해야될 개념이 있었다.자바스크립트 에서 비동기 처리 방식의 종류와 각 역할에 따라 언제 사용해야 좋을지에 대해서다.강의를 들으면서 어떨때는 Callback 또 어떨때는 Promise 또 어떨때는 async/await을 사용하는 것이다.Flutter 를 사용하면서는 Future, async, await, Stream 만 사용해왔었는데 JavaScript 에서의 비동기 처리를 하는 방법들이 각각 어떤 상황에서 사용해야 효율적인 프로그래밍이 될지에 대해서 알아볼 필요가 있다고 생각해서 이에 대해 정리해보려고 한다. - 비동기 프로그래밍에 대한 예시2025.01.31 - [📱Flutter] - Flutter 에서의 비동기 프로그래밍 Future, async/await F..

들어가기회사에서 사용하는 업무툴중에 네이버 웍스 가 있다.문득 웍스의 UI 를 바라보았는데 1:1 에서 왼쪽의 1과 오른쪽의 1이 다르다는 느낌을 받았다.(지금 보니 티스토리 에디터도 동일하게 미세하게 다르다) 그래서 캡쳐를 해서 확대를 해보았다 픽셀 단위로 바라보았을때 미묘하게 다르다는 느낌을 받았다. 나는 당연히 이건 UI 적으로 오류가 발생했다고 생각했다. 그래서 웍스 팀에 문의 메일을 보냈다. 문의한 답변에 대한 내용이다. 픽셀 차이 없이 동일한 상태라고 한다. 그러면 이런 현상은 왜 발생하는걸까? 라는 의문이 들었다. 서브픽셀 렌더링 LCD 화면에서 하나의 픽셀이 실제로는 세개의 서브픽셀(빨강, 초록, 파랑)로 구성되어 있다. 서브픽셀 렌더링은 이러한 구조를 활용하여 실질적으로 해상도를 ..

이번 글은 초보 개발자가 클린아키텍처를 공부하면서 만나는 의문점들과 그에 대해서 조그맣게나마 공부하고 정리한 내용이다.앞으로도 의문점들이 추가 될때 추가적으로 작성할 예정이다. 이번에 새로운 프로젝트를 시작하기에 앞서해보고 싶은 내용들을 정해봤다.- 클린아키텍처 사용하기- 작게나마 테스트코드 적용하기이렇게 세가지의 조건을 가지고 클린 아키텍처에 대해서 공부하던 중에 생긴 의문점들과 그에 해당하는 답변들을 정리해보려고 한다. 1. DTO ~ Mapper ~ Model 이 효율적인가?일단 지금까지의 내가 해오던 방식은 Model만 정의해서 사용했다.이렇게 사용한 방법은 아래와 같이 옵셔널 하게 미리 정의해 놓고 필요한 값만 꺼내서 쓰는 방식이었다.class User { String? id; String..

주제선정시간이 조금 지났지만 한때 앱의 오류가 발생했던 적이 있다.분명 유저가 채팅방을 생성하면 한번만 생성되어야 되는데 짧은 시간에 여러번 터치하게 되면 여러개의 방이 생기는 문제가 발생했다.물론 유저가 악의적으로 해당 사항을 지속했다면 문제가 됐을것이다.특히 내 도메인이 금융쪽이였으면 엄청난 큰 문제가 발생했을 것이다.항상 만들면서 기능만 개발하기에 급급했던 내 잘못이였다.그래서 이걸 해결하고자 했을때 여러 방법이 있었다.처음에 내가 생각했던 방법은 bool 값을 넣어서 try catch final 로 진입자체를 막는방법 이였지만조금 검색하다보니 Debounce 와 Throttle 이라는 라이브러리가 존재하는것 알았고 해당 라이브러리를 사용해서 고쳤다.그래서 이번에는 해당 개념에 대해서 조금 더 자세..

들어가기2025.02.07 - [Flutter] - Flutter 신용카드 예제 Like 카카오페이 1편 Flutter 신용카드 예제 Like 카카오페이 1편주제 선정 [Flutter] 그라데이션으로 만들어보는 광원 효과빛이 반사되는 효과는 어떻게 만들까?velog.io처음에 위의 글을 보고 애니메이션이 기깔난다고 생각을 하고있었다.문득 카카오페이를 들sj-d.tistory.com 해당 글에 이어서 작성하는 내용이다.우선 이전편에서 카드 생성, 토스카드 모양으로 그리기, 기타 애니메이션 등을 했었다. 이제 DB에 저장된 데이터를 받아와서 하단에서 카드를 보여주고, 상단영역에서는 카드 상세정보를 보여주면서유저의 제스쳐에 따라서 카드의 각도가 변하면서 광원효과를 넣어보려고 한다. 카드 목록 보여주기우선 카드..

도입 배경회사 프로젝트에 언어 선택에 따라서 해당 다국어가 적용되는 방식으로 기본적인 다국어 처리는 적용되어있는 상태이다.하지만 이번에 새로 오픈한 기능중에 유저들끼리 대화를 주고받고 관광지를 추천하게 되는 경우가 있는데 유저들이 한국어로 주고받아도 영어, 앞으로 추가될 일본어, 중국어 등의 사용자가 해당 대화를 번역해서 보여주기를 원하는 상황이였다.크게 Google Translate API, Papago API 이렇게 두개의 선택지가 있었는데, 현재 회사에서는 Naver Cloud Platform 을 사용하고 있기 때문에 관리적인 입장에서 봤을때 Papago 가 더 효율적이라고 판단되어 해당 서비스를 이용해보려고 한다.해당 블로그에서 작성되는 내용은 별도 예제를 위해 만들어서 진행할 예정이다. 25년..

주제 선정 [Flutter] 그라데이션으로 만들어보는 광원 효과빛이 반사되는 효과는 어떻게 만들까?velog.io처음에 위의 글을 보고 애니메이션이 기깔난다고 생각을 하고있었다.문득 카카오페이를 들어가봤는데 밑에 내가 추가한 카드들의 이미지가 뜨고 해당 카드들을 스크롤해서 카드의 정보를 확인할 수 있었다.여기서 또 프론트 병이 생겨 궁금하다 이쁘다 만들어보고싶다 심심한데 이거 두개를 접목시켜서 만들어볼까? 라는 생각에서 시작되었다.사실 이맛에 눈에 보이는 개발을 한다.  생각되는 방식과 이번 구현을 통한 나의 목표는1. 새로운 카드 추가 기능(로컬 스트리지로 기기별 저장)2. 리버팟 사용 연습3. 카드 광원효과 적용4. 카드 스크롤을 통해서 변경된 카드정보 확인(상단 흰색 부분에 카드정보 넣을 예정)5...