티스토리

Testorian

검색하기

블로그 홈

Testorian

23life.tistory.com/m

큰 목표보다는 작은 반복, 완벽보다는 개선.

구독자: 10

방명록 방문하기

728x90

반응형

주요 글 목록

반대 뒤에 붙어야 하는 것 스타트업은 항상 불확실성 속에서 살아간다.불확실성은 '언제나 옳은 정답' 이 존재하지 않음을 의미한다. 상대방의 주장이 맞을 수도, 틀릴 수도 있다.내 주장이 맞을 수도, 틀릴 수도 있다. 그렇기 때문에, 상대방과 반대 의견을 낼 때는, 항상 그 대안을 얘기해야 한다.그 대안이 완벽할 필요는 없다. 아이디어 수준에 그쳐도 괜찮다. 중요한 것은 → 반대로 인해 논의가 종료되는 것이 아니라, 문제를 해결하기 위한 새로운 시각의 시발점을 제시하는 것! 공감수 0 댓글수 1 2024. 12. 4.
24.11.25~24.12.02 업무 공유비밀번호 찾기 기능 개발스테이징 테스트 후 프로덕션 배포까지 완료! SDK 로그 미수집 기능 개발SDK로 가이드 실행 시 로그가 수집되고, 해당 로그에 대한 통계를 제공하고 있다.그런데 이로 인해 고객사 내부 테스트를 프로덕션에서 진행하지 못하는 문제가 발생했다.(로그가 섞이기 때문) 일반적인 방법은 통계 수집 시, 제외한 IP를 설정할 수 있게 하는 것이지만그렇게 우선순위가 높지는 않음 + 설정한 IP 이외 테스트용 접속을 필터링하지 못함 의 문제가 있었고,따라서 SDK 가이드 실행 함수 옵션에서 로그 미수집 기능을 제공해, 고객사에서 직접 로그 수집 여부를 코드로 제어할 수 있게 만들었다. 멤버 초대 기능 개발이전까지는 담당자에게 개별적으로 멤버 초대 기능을 알려 팀원들이 가입하게끔 안내한 .. 공감수 0 댓글수 0 2024. 12. 2.
24.11.18~24.11.25 업무 공유비밀번호 찾기 기능 개발자체 회원가입 기능 개발이 이뤄지면서, 이와 연관된 비밀번호 찾기 기능을 구현했다.기능 자체는 별다른 예외 상황이 없는 일반적인 기능이라 별다른 어려움이 없었다.비밀번호를 찾을 수 있는 메일을 BE에서 전송했는데, 메일을 전송할 때마다 스팸 메일로 분류되는 문제가 있었다.원인을 찾는 과정에서 SPF(Sender Policy Framework), DKIM(DomainKeys Identified Mail) 등을 통한 이메일 발송 인증에 대해 학습할 수 있었다! 추가적으로, 이전에 회원가입/로그인을 개발하면서 각 기능들을 개별 feature로 분류했는데,이렇게 설계하다 보니 동일 요소(이메일, 비밀번호 등)에 대한 유효성/에러 문구 로직을 처리하기가 까다로웠다.(회원가입, 로그.. 공감수 0 댓글수 0 2024. 11. 25.
싱글톤 패턴 단위 테스트를 작성하는 3가지 방법 Backgrounds싱글톤 패턴(Singleton Pattern)이란?싱글톤 패턴은 애플리케이션 내에서 특정 클래스의 인스턴스가 단 하나만 생성되도록 보장하는 디자인 패턴입니다. 데이터베이스 연결, 설정값 관리, 공통 서비스 제공 등 애플리케이션 전역에서 공유되어야 하는 리소스를 관리할 때 자주 사용됩니다.class Singleton { private static instance: Singleton | null = null; private constructor() {} static getInstance(): Singleton { if (!this.instance) { this.instance = new Singleton(); } return this.instance; }}.. 공감수 0 댓글수 0 2024. 11. 19.
24.11.10~24.11.18 업무 공유타겟 요소 조회 알고리즘 개선현 서비스의 핵심 로직 중 하나인, 타겟 요소 조회 알고리즘을 개선했다. 타겟 요소 조회 알고리즘은 사용자가 선택한 요소를 가이드 실행 시 얼마나 정확하게 찾아가는지 를 의미하는데,서비스 극 초창기 때 작성한 로직을 지금까지 사용하고 있었다. 당시만 하더라도, 서비스의 정확한 컨셉이나 사용 기업이 확정되지 않은 상태로우연찮게 POC가 이뤄진 B사의 요구사항을 구현하는데 급급했다. Azure, GCP 등 외부 서비스에서 사용자가 선택한 요소를 식별해야 했기 때문에일반적인 식별자(대표적인 예시가 id)를 사용할 수 없었고이로 인해 최대한 많은 예외 케이스를 고려해야만 했다. 하지만 점차 POC 기업이 늘어나면서기존 알고리즘이 고려했던 예외 케이스로 인해, 오히려 조회 결.. 공감수 0 댓글수 0 2024. 11. 18.
server action으로 cookie 설정 시, server component reload 버그 Backgrounds회원가입 후, 백엔드에서 반환한 access, refresh 토큰을 cookie에 저장해야 했습니다.// SignUpFormconst SignUpForm = () => { const handleSubmit = async () => { try { // 회원가입 성공 시 AT, RT 반환 const { accessToken, refreshToken } = await signUpApi(form); setAuthCookies(accessToken, refreshToken) router.replace("/") } catch (e) { setErrors(e); } }; return (...)} 위 코드에서처럼.. 공감수 2 댓글수 0 2024. 11. 15.
24.10.27~24.11.10 업무 공유체크리스트 기능 프로덕션 업데이트약 1주일 만에 체크리스트 관리 기능 개발을 완료했고, QA 후 수정사항을 반영한 뒤 프로덕션 업데이트를 진행했다.미팅 이후 이탈했던 기업들에게 추가적으로 안내 + 신규 기업들에게도 함께 해당 기능을 안내하는 중! 가이드 문서 제작이전에는 서비스 사용 방법을 미팅 과정에서 안내하고, 관리자 페이지에 가이드 탭을 추가해 알려줬었다.하지만 기능들이 하나 둘 추가되면서, 단순한 페이지 하나에 모든 내용을 담기는 불가능해진 상황! gitbook을 활용해 공식적인 가이드 문서를 제공해야 했고,이 중 개발자 가이드 파트를 전담해 SDK 설치 및 함수 사용 방법과 예제를 담은 가이드 문서를 작성했다. 자체 회원가입 기능 개발무료 체험 기간이 종료되는 12월 전까지, 팀의 목표.. 공감수 1 댓글수 0 2024. 11. 10.
You Might Not Need a Dispatch<SetStateAction> Type. BackgroundsFE 개발자 단톡방에 이런 질문이 올라왔습니다.결론부터 말하자면...You Might Not Need a Dispatch Type.해당 타입 사용을 선호하지 않는다기 보다, 사용할 필요가 없다 란 답이 가장 적절하다고 생각했습니다. 그 이유가 무엇일까요?언제 사용되는가?Dispatch은 React에서 useState 훅을 사용할 때 반환되는 상태 업데이트 함수의 타입입니다. 상태 값을 업데이트할 때 사용하는 setState 함수의 타입을 정의하며, React 상태 관리에서 매우 일반적으로 사용되죠. 그렇다면, 해당 타입 정의가 왜 필요할까요? 가장 대표적인 예시는 자식 컴포넌트에 Props로 전달할 때입니다. 부모 컴포넌트에서 useState로 상태를 관리한 뒤, 자식 컴포넌트에서 상.. 공감수 1 댓글수 1 2024. 10. 29.
24.10.20~24.10.27 업무 공유체크리스트 관리 기능 개발여러 채널들로 유입된 기업과 미팅을 진행한 결과, 현재 제품이 제공하는 가치인 '온보딩'이 크게 두 가지로 나뉨을 확인할 수 있었다.→ 1) 고객이 가치를 느낄 수 있는 아하 모먼트까지 안내 2) 필수 세팅 과정 안내 및 지원 이 두 가지 케이스 중 1)에 해당하는 기업들은 활발하게 미팅이 이뤄지고, 실제 도입으로 이어졌다.하지만 2)의 니즈에 해당하는 기업은, 얼마 지나지 않아 이탈하는 경우가 많았다. (사실은 전부 이탈했다) 이를 해결하기 위해 사용자가 해야만 하는 일을 시각적으로 제시할 수 있는, 제크리스트를 구현하기로 결정! 실제 체크리스트를 고객사 화면에 띄울 SDK와, 체크리스트 내부 요소를 GUI로 편집할 수 있는 관리자 페이지 기능 개발이 필요했고,그중 관.. 공감수 3 댓글수 2 2024. 10. 28.
24.10.13~24.10.20 업무 공유SDK 실행 옵션 추가실행한 가이드가 종료되었을 때, 고객사 측에서 정의한 동작을 실행하고 싶다는 요구사항이 발생했다.→ 이미 상정되었던 상황! SDK를 통한 가이드 실행 시, 완료 시 실행될 콜백 함수를 주입받는 걸로 빠르게 구현할 수 있었다. 이때 다시 한번 느낀... 도메인 중심 사고의 중요성! 이번의 경우 가이드 완료 시에만 입력받은 콜백이 실행되어야 했는데,이를 도메인 개념에 따라 완료 / 중간 이탈 / 종료로 나누었던 것이 추후 빠른 요구사항 반영을 이끌어 낸 원동력이 되었다. 툴팁 텍스트 에디터 적용역시 고객사 요구사항 발생!문구에 강조, 크기 조절, 색상, 링크 등을 추가하고 싶다는 고객사 요구사항이 발생했다. 직접 구현할 수도 있었지만, 해당 기능이 서비스에 미치는 영향력을 고려.. 공감수 0 댓글수 0 2024. 10. 22.
물리적 지속 가능성 무언가를 꾸준히 지속하기 위해서는, 무엇이 필요할까? 치과용품 관련 회사에 다니는 어머니는 예전부터 가족들의 잇몸 건강에 관심(과 걱정)이 많으셨다.단순히 양치를 꼼꼼히 하는 것뿐만 아니라, 양치 후 잇몸 청결까지 신경 쓰길 바라셨다.덕분에 집에는 희한하게 생긴 칫솔, 치실, 치간 칫솔 등이 쌓여갔다. 그러던 어느 날, 난생처음 보는 물건을 회사에서 사 오신 게 아닌가.난생처음 들어보는 이름, 구강 청소기되시겠다. 잇몸 마사지 + 이물질 제거에 탁월해 하루에 한 번이라도 꾸준히 하라 강조하신 어머니.그리고... 1달이 지난 후 가족들 중 이를 사용하는 사람은 아무도 없었다. (심지어 그녀조차도!) 그리고 몇 달이 지난 뒤, 어머니는 또 희한한 물건을 사 오셨다.똑같은 구강 청소기였지만, 다른 점이 하나 .. 공감수 6 댓글수 2 2024. 10. 18.
24.10.06~24.10.13 업무 공유통계 조회 기능 개발실행한 가이드의 통계를 보고 싶다는 요구사항이 생겼다.이전 기업과의 POC 과정에서 로그 수집 기능을 추가한 덕에, 로그 데이터 자체는 이미 존재하는 상황.따라서 관리자 페이지에서 수집된 로그를 보여주기만 하면 되었다. 필요한 정보는 1) 어떤 가이드의 2) 어떤 스텝이 3) 몇 번 실행되었는지 정도.크게 복잡한 데이터도 아니고, 이를 차트 형태로 풀어내기에는 스텝의 이름을 한눈에 알아보지 못해 오히려 불편하단 생각이 들었다.그래서 일단 테이블 형태로 노출 수와 이탈률을 보여주자는 결론을 냈고, 이를 구현했다. 통계 테이블 자체는 크게 어려움이 없었다.특정 버전에 대한 스텝 노출 수가 매핑된 데이터를 BE에서 반환하면이를 FE에서 버전 내 스텝에 연결 짓고, 노출 수 / 이.. 공감수 6 댓글수 3 2024. 10. 13.
지속 가능한 프론트엔드 단위 테스트 작성법 1. 프론트엔드는 테스트가 필요 없다?!프론트엔드 단위 테스트는 항상 논쟁의 중심에 있습니다. 프론트엔드 애플리케이션의 복잡성과 중요성이 증가하면서 단위 테스트의 필요성을 주장하는 목소리가 점점 늘어나고 있습니다. 하지만 자주 변경되는 UI와 그로 인해 쉽게 깨져버리는 테스트 코드들을 보며 프론트엔드에서의 단위 테스트가 불필요하고 비효율적이라는 비판도 여전히 거셉니다. 저는 여러 프론트엔드 프로젝트 경험을 바탕으로 단위 테스트는 반드시 필요하다는 결론에 도달했습니다. 단위 테스트는 코드를 안전하게 리팩토링하고, 코드 품질을 유지하며, 오류를 사전에 예방할 수 있는 중요한 수단입니다. 코드베이스가 커지고 협업 인원이 늘어날수록 단위 테스트를 통해 코드 수정 시 발생할 수 있는 문제를 사전에 방지해야만 하며.. 공감수 6 댓글수 2 2024. 10. 9.
24.09.29~24.10.06 업무 공유허브 기능 개발고객사에서 생성한 가이드들을 통합 관리하는 허브 기능을 개발했다.정확히는 허브 내에 들어갈 가이드 버전을 제어하고, 선택하는 기능!제법 복잡한 데이터 상태를 관리해야 했는데, 각 도메인 feature별 util 함수로 이를 제어했다.즉, 각 상태를 제어하는 사용처에서 도메인 논리를 구현하는 것이 아닌해당 feature내에 업데이트 함수들을 작성하고(순수함수 형태), 이를 사용처에서 불러와 작성하는 형태. 이때 util 함수들은 외부에 대한 의존성이 존재하지 않는 순수함수 형태로, 오직 도메인 정책(비즈니스 로직)만 구현한 형태였는데단위 테스트를 작성하기도 좋고, 사용처에서 사용하기도 쉽고 간단해 좋았다. 버전 덮어씌우기 오류 수정신규 고객사에서 각 가이드 별로 수집된 통계를 빠르고.. 공감수 1 댓글수 1 2024. 10. 7.
24.09.08~24.09.29 업무 공유버전 관리 기능 개발여느 Saas와 마찬가지로, 우리 서비스의 고객사들 역시 실제 프로덕션 환경에서의 안정성을 무엇보다 중시했다.대부분 제품 도입 전 자신들의 개발 환경에서 테스트(QA)를 진행하고 싶어 했는데...도입 전에는 필요가 없지만, 한번 우리 서비스를 도입한 이후 변경사항이 발생한 경우에는, 이 변경사항이 프로덕션 환경에는 반영되지 않아야만 했다. 이전 script 형태로 제공하던 버전에서는 이러한 환경 별 구분을 위해 "실행 환경"이라는 개념을 추가했었다.관리자 페이지에서 각 고객사 별로 자신들의 실행 환경을 추가하고, 해당 실행 환경 별로 변경 사항을 차례차례 적용할 수 있는 구조. 하지만 가이드 구조 개선과 함께, 제공 방식을 SDK로만 우선적으로 제한하면서 기존의 실행 환경 개.. 공감수 1 댓글수 4 2024. 9. 29.
next.js에 FSD 폴더 구조 패턴 적용하기 Backgrounds최근 Next.js 프로젝트에 Feature-Sliced Design(FSD) 패턴을 도입하게 되었습니다. FSD는 프론트엔드 프로젝트에서 모듈들의 레이어(layer)를 명확히 구분하고, 상위 레이어와 하위 레이어 간의 의존성 방향을 명확히 하여 모듈 간 결합도를 낮추고 변경 사항이 어디까지 영향을 미칠지 예측 가능하게 만들어줍니다. 이를 통해 유지 보수성이 크게 향상된다는 장점이 있습니다.(자세한 설명은 이전 글을 참고해주세요) 하지만 Next.js와 FSD 패턴을 함께 사용하다 보니, 일부 컨벤션에서 충돌이 발생하게 되었고, 그 과정에서 몇 가지 문제점과 해결책을 찾아야 했습니다. 이번 글에서는 제가 겪었던 문제들과 이를 해결한 방법을 공유하려 합니다. 1. app 폴더 네이밍 충.. 공감수 0 댓글수 1 2024. 9. 24.
24.09.01~24.09.08 업무 공유패키지 배포 시, 캐싱 적용사내 프로젝트에서 공통으로 사용하는 패키지가 존재한다.git action을 통해 PR 병합시 배포될 수 있는 자동화 시스템을 구축해둔 상태인데...의존 모듈 설치 단계에서, 매번 지나치게 시간이 오래 걸리는 문제(약 24s)가 발생했다. 사내 공통 패키지다보니, 존재하는 외부 모듈의 수가 그리 많지도 않고, 새로운 패키지가 추가될 가능성도 낮아 보였기 때문에git action 실행 시 cache를 생성하고, 적용하는 단계를 추가해 새로운 패키지가 추가되지 않은 경우에는 캐싱된 파일을 사용할 수 있게 변경했다.yarn.lock 파일이 변경되지 않았고, cache된 파일이 존재하는 상황에서는 캐시 파일을 사용함으로써→ 의존 모듈 설치에 아무런 시간이 소요되지 않게 만들 수.. 공감수 0 댓글수 0 2024. 9. 8.
FrontEnd 개발자가 가장 빠르게 서비스를 구축하는 방법 Introduction웹 애플리케이션을 구축하는 것은 복잡한 작업이 될 수 있지만, 최근 몇 년간 등장한 기술 스택 덕분에 개발 속도를 크게 향상할 수 있는 방법들이 많아졌습니다. 프론트엔드 개발자들은 주로 JavaScript 또는 TypeScript에 익숙한데, 최근에는 서버와 클라이언트 모두 JavaScript로 통합할 수 있는 환경이 마련되면서 프론트엔드 개발자가 웹 전체를 빠르게 구축할 수 있는 강점을 갖추게 되었습니다. 실제로 얼마 전, 저는 부산 지역의 사설 도서관들의 도서 관리 서비스를 구축해야 했습니다. 각 사용자 별 계정을 생성하고, 해당 계정이 속한 도서관에 접근해 도서를 추가하고 삭제할 수 있어야 했으며, 사용자들이 저장된 도서 정보들을 검색할 수 있어야 했죠. 즉 웹 애플리케이션의 .. 공감수 4 댓글수 5 2024. 9. 8.
[고민하다] 를 영어로 하면?! 한국어의 "고민하다"는 다양한 상황에서 사용될 수 있는 표현입니다. 하지만 이를 영어로 표현하려고 하면 마땅한 단어가 떠오르지 않죠. 예를 들어, 직장을 옮길지 고민하는 상황을 영어로 어떻게 표현할 수 있을까요? 이번 글에서는 "고민하다"를 영어로 표현할 때 사용할 수 있는 몇 가지 기본적인 표현들을 정리해 보겠습니다. 1. Think about"Think about"은 가장 기본적인 표현으로, 어떤 주제에 대해 생각하고 고민하는 상황을 나타냅니다. 비교적 가벼운 고민부터 깊이 있는 생각까지 두루 사용할 수 있는 표현입니다.I'm thinking about changing jobs.(직장을 옮길지 고민 중이야.) 이 표현은 일상에서 자주 사용되며, 큰 부담 없이 고민 중이라는 상태를 나타낼 때 적합합니다.. 공감수 2 댓글수 3 2024. 9. 2.
24.08.25~24.09.01 업무사용 로그 기능 개발각 가이드 별 실행 횟수를 알고 싶다는 고객사 요구사항이 발생해, 이를 구현했다. 기본적으로 사용자가 가이드를 진행할 때마다 각 단계를 저장하면 되었는데,이때 중요한 점은 → 다양한 사용처별로 로깅 여부가 달라진다는 것! 따라서 가이드 실행 패키지 내부에 로깅 모듈 인터페이스, Base Logger 정도만 정의한 뒤패키지를 사용하는 곳에서 세부 모듈을 구현하게 만들었다. 덕분에 개발 도중 사용처마다 로깅 api가 달라져야 하는 변경사항이 발생했을 때, 이를 쉽게 반영할 수 있었다.(객체지향 만세) 자동 모니터링 시스템 구축역시나 고객사 요구사항!매번 고객사 QA팀에서 가이드 동작 여부를 테스트하는 것이 번거롭다는 의견이 제시되었다.자동 모니터링 시스템의 경우 POC 초기부터 얘기가.. 공감수 0 댓글수 0 2024. 9. 2.
24.08.18~24.08.25 업무신규 기능 개발 (help-hub)help-hub라는, 새로운 기능을 추가했다.고객사 측에서 원하는 타이밍에, 원하는 형태의 help-hub를 띄워야 했고,이를 위해 웹 SDK를 배포 → 고객사에서 SDK를 다운로드하여 사용할 수 있게 만들었다. SDK의 경우 1) 고객사 페이지 내 보안 관련 이슈 2) 고객사 개발자들이 사용하기 좋은 형태로 제공을 신경 써야 했고이를 위해 다른 IT 기업들의 공식 문서를 참고하고, 우리 서비스에 맞도록 수정한 뒤 반영했다. 가이드 생성 과정 개선가이드를 생성하는 것에서부터 서비스가 시작되기 때문에,이 과정에서 무엇보다 부드러운 사용자 경험을 제공해줘야 한다고 생각했다. 이전 단순한 기능 구현에 그쳤던 가이드 생성 과정에1) 적절한 애니메이션 적용2) 캡처 이미지 추.. 공감수 0 댓글수 0 2024. 8. 25.
VCP를 통해 Next.js ↔ AWS RDS 안전하게 연결하기 BackgroundsNext.js를 사용하여 애플리케이션을 개발한 후, AWS Amplify를 통해 배포하는 과정을 진행했습니다. 이 과정에서 RDS(Relational Database Service)를 사용하여 데이터베이스를 설정하고, Next.js의 서버 컴포넌트에서 데이터를 조회하고 생성하는 기능을 구현했습니다. import React from 'react'; import { Pool } from 'pg'; const pool = new Pool({ user: process.env.DB_USER, host: process.env.DB_HOST, database: process.env.DB_DATABASE, password: process.env.DB_PASSWORD, port: process.env.. 공감수 0 댓글수 1 2024. 8. 25.
지시는 명확하게, 도움은 적극적으로 오늘 이런 일이 있었다.여느 때와 다름없이 개발을 하던 어느 날. 동료 개발자에게 업무를 할당할 일이 생겼다.특정 모듈에서 발생한 버그성 이슈를 처리하는 것이었는데, 해당 팀원은 이전에 이 모듈을 작업했던 담당자였다. 크게 복잡한 문제도 아니었고 해결 방법도 간단해 보였다.한 30분 정도 소요되겠거니 생각하면서, 자리로 돌아와 내 업무를 진행했다. 하지만...30분, 1시간, 2시간이 지나도 코드 리뷰 요청(PR)이 오지 않았다.예상 시간보다 한참이 지난 후에야 리뷰 요청이 왔고, 그제야 뭔가 잘못되었음을 알게 되었다. 그가 작성한 코드들은 내가 생각했던 해결 방안과 전혀 달랐다.복잡했고, 의도가 명확하지 않았으며, 결정적으로 다른 모듈에까지 불필요한 의존성이 전파되어 있었다.(심지어 코드를 작성한 본인.. 공감수 0 댓글수 0 2024. 8. 19.
24.08.11~24.08.18 업무POC 기업 요구 사항 개선본 제공2주 전, P사와의 POC 미팅이 있었다.12일까지 개발 완료 → staging 환경 내부 테스트 → 14일에 개선본 제공 을 목표했었다. 지난 2주간 P사에서 요구했던 기능을 구현했고,일정대로 내부 테스트 후 P사에 V2 버전의 익스텐션을 제공했다. Help-Hub 기능 개발P사 제공 후, 단기 로드맵 관련 회의를 진행했다.→ 결론은 9월까지 베타 버전 기능 개발을 완료하는 것! 이를 위해 1) help-hub 기능 개발 2) 가이드 생성 과정 개선 작업을 진행하기로 했고그중 help-hub와, 이를 SDK를 통해 고객사에서 제어할 수 있는 기능을 구현했다. 공감수 0 댓글수 0 2024. 8. 18.
24.08.04~24.08.11 업무템플릿 테마 기능 개발각 Step 별로, 내부 구성 요소에 대한 스타일을 커스텀할 수 있었다. 배경색, 글자색 등의 CSS 요소를 고객사 서비스의 톤&메너에 맞게 적용할 수 있어야 했고, 이를 위해 고객사에서 생성한 가이드 Step마다 일일이 스타일을 지정해 줬다. 하지만 이 때문에, 고객사에서 생성한 모든 가이드의 모든 Step에 대한 동일 스타일을 손수 입력하는 불편함이 있었다! 따라서 고객사 별로 공통적으로 적용될, 기본 공통 템플릿 테마 기능을 구현했다. SDK를 통한 가이드 실행기 기능 개발POC 중인 P사에서는 특정 가이드를, 특정 시점에, 특정 사람에게만 실행시키고 싶어 했다. (ex 신규 유저 중, 해당 페이지에 처음 접속하는 사람에게만 보이는 가이드) 유저 세그먼트를 설정하고, 실행 .. 공감수 0 댓글수 0 2024. 8. 11.
[chrome extension] 이미지 파일 안전하게 불러오기 Backgrounds일반적인 웹개발 환경에서는, 아래와 같이 이미지를 불러올 수 있습니다.import someImg from "./some-img.png";만약 이 상황에서 해당 경로에 파일이 존재하지 않는다면, 빌드 시 Module not found 발생합니다.대부분의 번들러들은 소스코드를 분석할 때 require, import로 참조된 모든 모듈과 자원을 탐지하며,이 덕분에 존재하지 않는 파일을 불러오는 등의 실수를 미연에 방지할 수 있습니다. chrome extension에서는 이미지를 불러오기 위해 조금 다른 방법을 사용해야 합니다.익스텐션의 content_scripts는 현재 실행되는 웹페이지를 기본 context로 가지기 때문에위와 같이 작성할 경우, 현재 웹페이지/some-img.png 경로.. 공감수 0 댓글수 0 2024. 8. 9.
[next js] app directory에서 token 저장하기 - (2) Backgrounds2024.02.13 - [source-code/Next JS] - [next js] app directory에서 token 저장하기 [next js] app directory에서 token 저장하기next js 13 버전에서 app directory가 등장하면서, app directory내 모든 컴포넌트들은 기본적으로 server component로 동작하게 되었습니다. https://nextjs.org/docs/app/building-your-application/rendering/server-components Renderi23life.tistory.com결론적으로, 아래 방법을 사용해 app directory에서 token을 관리하기로 했습니다.1) server action을 통.. 공감수 2 댓글수 1 2024. 8. 5.
24.07.28~24.08.04 업무B사 다국어 지원 기능 개발 및 테스트B사의 다국어 지원 관련 기능 중, 외부 가이드 관련 미비 사항을 발견해 추가 구현 및 테스트를 진행했다. v2용 기능 개발지난 스프린트 때 설정한 방향을 바탕으로, 추가 기능을 구현했다. 그 과정에서...core package의 경우, 이전 헥사고날 아키텍처로 애플리케이션을 구성했는데그 과정에서 내부적으로 여러 가지 문제점과 개선사항이 나왔었다.→ 이를 해결하기 위해 새로운 아키텍처가 필요하다고 판단!2024.08.03 - [source-code/FrontEnd] - Feature-Sliced Design(FSD) 도입기 Feature-Sliced Design(FSD) 도입기최근 사내 core-package의 FE 파트 폴더 아키텍처에 Feature-Sliced.. 공감수 0 댓글수 0 2024. 8. 4.
Feature-Sliced Design(FSD) 도입기 최근 사내 core-package의 FE 파트 폴더 아키텍처에 Feature-Sliced Design(FSD)를 도입했습니다. 해당 FE 서비스는 1) 전통적인 React 폴더 구조 → 2) 클린 아키텍처(헥사고날 아키텍처) → 3) FSD 지금까지 이렇게 총 3번의 구조 변경을 겪었으며, 각 단계에서 느꼈던 문제점과 해결 방안을 공유하고자 합니다. 1. 전통적 폴더 구조처음 프로젝트를 구성할 당시, 가장 일반적이고 전통적인 폴더 구조 형태를 따랐습니다.src/├── api/│ ├── userApi.ts│ └── productApi.ts├── components/│ ├── Header.tsx│ ├── Footer.tsx│ ├── UserProfile.tsx│ └── ProductLi.. 공감수 0 댓글수 0 2024. 8. 3.
Drag&Drop 컴포넌트에서 클릭 이벤트와 드래그 이벤트 분리하기 BackgroundDrag&Drop이 가능한 div 컴포넌트를 구현해야 했습니다. Drag&Drop의 기본 로직은 단순합니다.해당 요소의 위치 상태를 관리하면서요소를 누르면 Drag가 시작되고, 마우스를 움직이면 위치 상태를 변경하고, 마우스를 떼면 Drag를 멈추면 되겠죠.import { useState, useEffect, useRef } from 'react';interface Props { initialTop: number;}const useVerticalDrag = ({ initialTop }: Props) => { const [isDragging, setIsDragging] = useState(false); const [top, setTop] = useState(initialTop); /.. 공감수 1 댓글수 1 2024. 8. 1.

728x90

반응형

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.