티스토리

lurgi

검색하기

블로그 홈

lurgi

lurgi.tistory.com/m

커피를 좋아하는 디지털 노마드 개발자

구독자: 5

방명록 방문하기

반응형

주요 글 목록

[성수 카페 추천] 성수동 본지르르 카페 리뷰, 조용한 지하 공간과 카공 가능한 감성 카페 성수에는 다양한 개성을 지닌 카페들이 많지만, 본지르르 성수점은 공간 그 자체가 중심이 되는 곳이다. 지하 1층부터 2층까지 총 세 개 층으로 구성된 이곳은, 각 층마다 다른 분위기를 지니고 있어 방문 목적에 따라 선택의 폭이 넓다.입구를 지나면 가장 먼저 눈에 들어오는 것은 식물들이 가득한 외부 전경이다. 콘크리트 외벽과 어우러진 초록 식물들이 무심한 듯 조화롭게 배치되어 있어, 번화한 성수 거리 안에서도 한 템포 쉬어갈 수 있는 인상을 준다. 1층은 주문 공간이자 가장 활기가 느껴지는 층으로, 테라스 좌석이나 오픈형 창가 자리에 잠시 머물다 가는 손님들이 많았다.애견 동반이 가능한 점도 이곳의 특징 중 하나다. 조금 더 조용한 분위기를 원한다면 지하나 2층을 추천한다. 지하는 조도가 낮고 소파 중심의.. 공감수 3 댓글수 2 2025. 4. 14.
[잠실 카페 추천] 직접 로스팅한 커피와 페이스트리까지 완벽한 앙데띠 잠실에서 우연히 발견한, 기대 이상으로 완벽했던 공간. 대형 도로변에 위치해 있어서 그냥 흔한 인테리어 카페겠거니 했는데, 안에 들어서는 순간 분위기가 완전히 달라진다. 카페 이름은 ‘앙데띠’외관부터 모던하지만 딱 들어서면 여백이 있는 미니멀한 인테리어에 식물과 조명, 그리고 다양한 좌석 구성까지…자리가 넓고 탁 트여서 그런지, 사람이 많아도 시끄럽지 않게 느껴지는 묘한 분위기가 있다. 1층은 다소 협소해서 바 테이블만 있고, 2층이 본 공간이라고 보면 된다. 소파석, 2~4인 테이블, 벽면 콘센트 좌석까지 다양하게 마련되어 있고, 실제로 노트북 작업하는 사람들도 꽤 보였다.와이파이도 빠르고, 콘센트는 벽 안쪽 테이블에 준비되어 있어서 짧은 시간 집중 작업에도 무리 없다.로스터리를 직접 운영하는 카페답게.. 공감수 5 댓글수 1 2025. 4. 9.
[신논현 카페 추천] 카공 가능한 감성카페, ‘가배도 신논현점’ 솔직 리뷰 강남 한복판, 신논현역 근처에 이런 분위기의 카페가 있을 거라고는 생각도 못했다.프랜차이즈 카페들로 가득한 강남역 사이에서, 고즈넉한 분위기와 클래식한 인테리어로 독보적인 분위기를 자랑하는 곳.이곳은 바로 가배도 신논현점이다.가배도는 수도권 중심으로 몇몇 매장을 운영하고 있는 프리미엄 카페 브랜드인데,신논현점은 2층과 3층으로 나뉘어 있는 구조로 넓은 좌석 구성과 함께 조용한 분위기에서 카공 가능한 카페를 찾는 이들에게 최적의 장소다.2층은 비교적 손님이 많아 북적이는 편이지만, 3층은 전혀 다른 분위기를 자랑한다.전통적인 오브제, 우드톤의 무게감 있는 가구, 은은한 조명, 그리고 창문 사이로 스며드는 자연광이 어우러져 사진도 잘 나오고 머물기도 편안한 공간이었다.바 테이블과 소파석, 2~4인 테이블이 .. 공감수 1 댓글수 0 2025. 4. 7.
[신내 카페 추천] 신내역 감성 카페 추천, 카공 가능한 만조커피 방문 후기 신내역 근처에서 조용히 작업할 수 있는 감성 카페를 찾다가 ‘만조커피 (MANJO Coffee)’를 알게 됐다. 서울 중랑구에 위치한 이 카페는 인테리어부터 음악, 커피까지 사장님의 취향이 그대로 녹아 있는 공간이었다. 위치는 신내역 4번 출구에서 도보 1분 바로 길 건너편이다. 겉보기엔 그냥 평범한 교회 건물 1층이지만, 안에 들어서면 우드톤 가구와 식물, LP와 책들로 채워진 따뜻한 분위기가 펼쳐진다.특히 어항과 창가 바 테이블이 있어 햇살 좋은 날에는 정말 기분 좋게 앉아있을 수 있다.내부는 아주 넓진 않지만, 혼자 조용히 시간을 보내기에 알맞은 구성이다.카공이 가능한 자리도 있고, 와이파이도 빠르다. 콘센트는 바 테이블에만 있어서 자리 잡을 때 참고하면 좋다.중랑구에서 조용한 카페, 카공 가능한 .. 공감수 4 댓글수 0 2025. 4. 5.
[망우 공유오피스] 비욘드스페이스 망우점, 작업하고 싶은 공간 여기는 카페는 아니고 프리워커들을 위한 작업공간인데, 4월 15일까지 무료 개방 중이라고 해서 바로 들러봤다.오늘은 집 근처에 새로 생긴 코워킹 스페이스, ‘비욘드스페이스 망우점’에 다녀왔다. 운영시간은 오전 9시부터 자정까지.아침 일찍 나와 하루를 길게 보내고 싶은 사람이나, 늦은 시간까지 작업하고 싶은 사람 모두에게 적합하다.공간은 3층과 4층으로 나누어져 있다.3층은 개인 작업자를 위한 공간으로, 노트북 펼치고 조용히 일할 수 있는 테이블들이 마련돼 있었다.4층은 소규모 사무실 혹은 팀 단위 입주를 위한 공간으로 보였고, 회의실처럼 활용될 수 있는 룸들도 있는 듯했다.먼저 말하자면, 이곳 인테리어는 정말 내 취향을 제대로 저격했다. 전체적으로 화이트와 우드톤이 중심이 된 깔끔한 공간에 감각적인 조명.. 공감수 2 댓글수 2 2025. 4. 2.
[종로 카페 추천] 넓은 감성 공간, 번트 서울에서 여유롭게 카공한 하루 오늘은 종로에서 카공하기 좋은 대형 카페, 번트 서울에 다녀왔다.근처 우래옥에서 든든하게 밥을 먹은 후, 자연스럽게 카페를 찾아 걷다가 도착한 곳이다.‘번트 서울’은 무려 3층 규모로 이루어진 꽤 큰 카페다. 종로구 일대에는 보통 작은 규모의 카페들이 많아서, 작업이나 공부할 공간을 찾기 힘든데, 이곳은 넓직한 테이블과 높은 천장 덕분에 확실히 쾌적한 느낌이 들었다. 공부하기 좋은 자리는 아주 많다고 보긴 어렵다. 콘센트가 전부 있는 것도 아니고, 구조적으로 테이블보다는 편히 쉬는 좌석 중심의 구성이다. 하지만 일찍 오면 눈치 보지 않고 넉넉한 공간에서 작업할 수 있다는 점이 가장 큰 장점이었다. 혼자 오기에도 부담 없는 분위기다. 무엇보다 인테리어가 정말 예뻤다. 콘크리트와 우드톤이 섞인 미니멀한 무드.. 공감수 1 댓글수 0 2025. 4. 1.
[선릉 카페 추천] 공부하고 영감받기 좋은 대형 카페, 테라로사 포스코센터점 후기 요즘은 공부하거나 작업할 때 집 근처 말고 새로운 공간을 찾아보는 편이다. 이번에는 지인이 “선릉역 근처에 조용하고 분위기 좋은 카페가 있다”고 추천해줘서 테라로사 포스코센터점에 다녀왔다.테라로사는 강릉에서 시작된 1세대 스페셜티 커피 브랜드로, 커피에 관심이 있는 사람이라면 한 번쯤 들어봤을 이름이다. 하지만 개인적으로는 예전에 방문했을 때의 인상이 조금 올드하게 느껴졌어서 자주 찾지는 않았었다.하지만 이번 포스코센터점은 그런 기억을 완전히 바꿔놓았다.카페는 포스코센터 1층과 2층을 사용하는 굉장히 넓은 규모의 매장이었다. 생각보다 훨씬 크고, 잘 정돈된 공간 안에 사람들이 여유롭게 앉아 있는 모습이 인상적이었다.1층에는 커피 바와 함께 텀블러, 드리퍼, 원두, 티 등 다양한 굿즈를 판매하는 공간이 마.. 공감수 0 댓글수 0 2025. 3. 30.
[종로 카페 추천] 드립커피만 파는 골목 속 조용한 공간, 아마츄어 작업실 광장시장점 후기 최근 자주 가는 공간이 있다. 종로5가역 근처 골목길 안쪽에 숨어 있는 카페 아마츄어 작업실 광장시장점이다. 간판이 크지 않아 처음엔 잘 안 보이는데, 오래된 건물 1층과 2층을 그대로 살린 독특한 구조 덕분에 한 번 방문하면 쉽게 잊히지 않는다. 이곳은 가장 특이한 점이 있다. 바로 에스프레소 기반 메뉴가 없고, 오직 드립커피만 판매한다는 것이다. 메뉴판을 보면 선택의 폭은 넓지 않지만, 각각의 드립커피 이름이 개성 넘치고 원두 정보가 함께 적혀 있어 고르기가 재밌다. 이번에 내가 주문한 메뉴는 이름부터 인상적인 “내일이 휴일이라면”. 가격은 6,500원이었다. 사용된 원두는 에티오피아 구지 우라가. 에티오피아답게 산미가 있을 줄 알았는데 생각보다 고구마처럼 달달하고 묵직한 향이 오래 남았다. 고소하면.. 공감수 1 댓글수 0 2025. 3. 28.
[광진구 카페 추천] 독일 로스터리 감성, 보난자커피 방문 후기 서울 광진구에 위치한 감성 카페, 보난자커피(Bonanza Coffee)에 다녀왔다. 요즘 조용한 공간에서 혼자 생각을 정리하거나 노트북 작업을 할 수 있는 카페를 찾는 중이었는데, 광진구 근처에서 분위기 괜찮은 곳을 발견했다. 보난자커피는 독일 베를린에 본사를 둔 스페셜티 커피 로스터리 브랜드로, 전 세계 커피 애호가들 사이에서도 인지도가 있는 곳이다. 국내에서는 흔히 보기 힘든 해외 로스터리 카페로, 원두의 품질과 브루잉 방식에서도 확실한 차이를 느낄 수 있었다. 광진구 대로변에 위치해 있지만, 바로 앞에 어린이대공원이 있어 비교적 한적하고 여유로운 분위기를 느낄 수 있었다. 입구에 들어서자 은은한 커피 향과 함께 따뜻한 분위기가 감돌았다. 내부 인테리어는 우드 톤이 중심이 되었고, 전체적으로 감성을.. 공감수 4 댓글수 1 2025. 3. 26.
Next.js Server Action와 React useActionState 알아보기 🚀 Next.js 15v의 Server Action1. Server Action이란?Next.js 15버전에 새롭게 도입된 Server Action은 서버에서 직접 실행되는 함수로, 클라이언트와 서버 간의 복잡한 데이터 요청 흐름을 단순화하는 기능을 제공합니다. 이를 통해 서버에서 처리해야 할 작업들을 클라이언트 코드에서 분리하고, 클라이언트에서 서버 함수 호출을 간편하게 할 수 있습니다.2. Server Action이 해결하는 문제들복잡한 데이터 요청 로직: 기존에는 클라이언트에서 데이터를 fetch하거나 서버와 통신하기 위해 여러 API 호출 코드를 작성해야 했습니다.클라이언트-서버 분리: 클라이언트 코드에서 서버 로직을 분리함으로써 코드의 유지보수성과 가독성을 향상시킵니다.직접적인 서버 실행: S.. 공감수 0 댓글수 0 2025. 1. 3.
좋은 팀이란 무엇일까? (feat. 무엇이 1등 팀을 만드는가? - 애디 오스마니) "한빛미디어 활동을 위해서 책을 제공받아 작성된 서평입니다."올해 처음으로 팀 프로젝트를 경험하며, 단순히 코드를 작성하는 것을 넘어 팀워크의 중요성을 몸소 느꼈습니다. 특히 애자일(Agile) 프로세스를 경험하면서, 팀의 성공은 개인의 기술적 역량만으로 이뤄지지 않는다는 깨달음을 얻었습니다.팀의 화합과 조화를 통해 사용자에게 더 나은 서비스를 제공하기 위한 프로세스를 만들어내는 것, 그 기반에는 기민함(Agility)과 효율성, 효과성, 생산성의 균형이 있었습니다.이번 글에서는 제가 고민했던 "좋은 팀워크란 무엇인가?"라는 질문에 대한 답을 정리하고, 에디 오스마니의 책 [무엇이 1등 팀을 만드는가]를 통해 얻은 통찰을 공유하고자 합니다.기민함이란 무엇인가: 단순한 빠름이 아닌 유연한 적응력기민함은 .. 공감수 1 댓글수 2 2024. 12. 30.
SSR로 사용자 경험 향상시키기 ❓SSR은 무엇일까요?SSR(Server-Side Rendering)은 서버에서 HTML을 생성하여 클라이언트에 전달하는 렌더링 방식입니다. 이는 브라우저가 자바스크립트를 실행하기 전에 사용자가 완전한 HTML 문서를 받을 수 있도록 도와줍니다.기존 CSR의 문제점CSR(Client-Side Rendering)은 자바스크립트가 클라이언트에서 실행되기 전까지 빈 HTML 파일이 로드되는 방식입니다. 이로 인해 발생하는 주요 문제는 다음과 같습니다:SEO 문제검색 엔진 크롤러는 자바스크립트를 실행하지 못하는 경우가 많아, CSR에서는 빈 페이지를 읽게 됩니다.이로 인해 SEO 최적화가 어려워질 수 있습니다.느린 초기 로드(FCP)클라이언트가 화면에 콘텐츠를 표시하기 전에 자바스크립트 번들을 다운로드하고 실행.. 공감수 2 댓글수 0 2024. 12. 28.
Paint 이전 Macro Task가 실행될 가능성과 React의 useEffect 이전 아티클에서 useEffect는 macro Task를 통해 Paint 직후 실행됨을 시사하는 아티클을 작성하였습니다. [React] useLayoutEffect와 useEffectuseLayoutEffect와 useEffect를 사용하면서 느꼈던 의문을 해결하기 위해서 파보기로 했습니다.우선 브라우저의 렌더링 과정에 대해서 간략하게 알아보겠습니다. 크게 4가지로 나눌 수 있습니다.파싱lurgi.tistory.com 추가적으로 부족한 부분을 공부해보면서 Paint 이전 useEffect의 콜백이 실행될 가능성에 대해서 공부해보려 합니다!!! useEffect sometimes fires before paintuseEffect should run after paint to prevent blocking .. 공감수 4 댓글수 1 2024. 11. 28.
[Apollo Basic] Apollo Client를 이용하여 Supabase GraphQL 요청 보내기 이전 아티클에서는 Supabase와 Apollo Client의 기본적인 Setting에 대한 글을 작성하였습니다.이번 아티클과 내용이 이어집니다!! 참고하실 분들은 아래 링크를! ⤵️ [Settings] GraphQL과 Supabase, Apollo Client 설정1️⃣ GraphQL이란? GraphQL | A query language for your APIEvolve your API without versions Add new fields and types to your GraphQL API without impacting existing queries. Aging fields can be deprecated and hidden from tools. By using a single evolvilur.. 공감수 1 댓글수 2 2024. 11. 27.
[Settings] GraphQL과 Supabase, Apollo Client 설정 1️⃣ GraphQL이란? GraphQL | A query language for your APIEvolve your API without versions Add new fields and types to your GraphQL API without impacting existing queries. Aging fields can be deprecated and hidden from tools. By using a single evolving version, GraphQL APIs give apps continuous access to new featgraphql.orgGraphQL은 Facebook이 개발한 데이터 쿼리 언어이자 API를 설계하는 방식입니다. 클라이언트가 필요한 데이터만 요청하고 받을 수.. 공감수 2 댓글수 0 2024. 11. 26.
크루루 서비스의 PopOverMenu 컴포넌트 개선기(1), createPortal과 합성 이벤트 문제 해결 React에서 createPortal을 활용해 팝오버 메뉴(Popover Menu)를 구현할 때는, 스타일과 이벤트 처리에 대한 고려가 필요합니다. 이번 포스트에서는 기존 CSS hover를 사용하는 코드에서, React 상태(useState)로 이벤트를 관리하는 코드로의 전환 과정을 소개하고, createPortal 사용 시 발생하는 이벤트 버블링 문제 해결 방법을 다룹니다.기존 서비스에서 Popover Menu는 특정 요소에 종속되지 않고 자유롭게 위치하도록, createPortal을 활용해 body에 렌더링했습니다. createPortal을 사용하면 overflow: hidden과 같은 부모 요소의 스타일 영향을 받지 않아, Popover Menu가 자유롭게 표시될 수 있습니다.import { Pr.. 공감수 1 댓글수 1 2024. 11. 23.
[React] useLayoutEffect와 useEffect useLayoutEffect와 useEffect를 사용하면서 느꼈던 의문을 해결하기 위해서 파보기로 했습니다.우선 브라우저의 렌더링 과정에 대해서 간략하게 알아보겠습니다. 크게 4가지로 나눌 수 있습니다.파싱레이아웃페인트컴포지팅해당 과정에 대해서 자세히 알고 싶으시다면 제가 발표한 테코톡 참고해주세용~ 기본적으로 useLayoutEffect 와 useEffect 훅은 해당 렌더링 과정에 관여하는 훅입니다.useLayoutEffect는 Layout단계 직후 실행됩니다.useEffect는 Paint 단계 직후 실행됩니다.저는 여기서 해당 훅들이 어떻게 렌더링 타이밍을 정확하게 감지하는지에 대한 의문이 생겼습니다.1️⃣ useLayoutEffect가 Layout 직후 실행되는 방법React는 가상 DOM(Vi.. 공감수 1 댓글수 1 2024. 11. 22.
Tanstack Query의 useQuery 캐싱 매커니즘 분석하기 크루루 서비스에서 알 수 없는 에러가 발생했습니다. 조사 결과, 원인은 TanStack Query의 Error 데이터 캐싱으로 판단되었습니다. 이 과정에서 몇 가지 의문이 들었고, 이를 탐구하면서 알게 된 내용을 공유하고자 합니다.❗️ 문제 상황우리 서비스는 TanStack Query의 staleTime을 0으로 설정하여 사용하고 있었습니다. 그러나, 에러가 발생했을 때 여전히 캐싱된 에러 데이터를 사용하고 있었고, 이를 다시 throw하는 동작을 관찰할 수 있었습니다.staleTime이 0이라면 데이터가 즉시 "stale" 상태로 간주되어야 하므로, 새로운 데이터를 요청해야 한다고 생각했지만, 실제 동작은 다르게 이루어졌습니다.❓ 왜 TanStack Query는 Error 데이터를 캐싱할까?TanSta.. 공감수 0 댓글수 0 2024. 11. 21.
가비지 컬렉션 정리 가비지 컬렉션(Garbage Collection, GC)이란, 자바스크립트 엔진이 메모리를 자동으로 관리하는 시스템으로, 프로그램이 더 이상 사용하지 않는 객체를 메모리에서 해제하는 것을 의미합니다.GC가 메모리를 해제하는 시점은 명확히 프로그래머가 제어할 수는 없지만, 참조(references)를 기준으로 동작합니다GC가 메모리를 해제하는 조건GC는 특정 객체가 도달 불가능(garbage)하다고 판단될 때 해당 객체를 메모리에서 제거루트에서 도달할 수 없는 객체는 가비지로 간주되어 메모리 해제 대상이 됩니다.let obj = { key: "value" };obj = null; // obj가 더 이상 참조되지 않음 → 가비지로 간주됨위를 정리하면 다음과 같다.obj는 변수로, 객체({ key: "valu.. 공감수 0 댓글수 0 2024. 11. 21.
크루루 서비스의 PopOverMenu 컴포넌트 개선기(2), 자식 요소 컴포넌트 렌더러 만들기 크루루 | 쉽고 간편한 리크루팅 솔루션크루루는 대학 연합동아리 및 스타트업 리크루팅에 최적화된 지원자 관리 솔루션입니다. 공고 제작, 지원자 관리, 평가 등 리크루팅의 모든 단계를 크루루와 함께 해결하세요.www.cruru.kr우리 서비스 크루루에서 PopOverMenu는 다양한 자식 요소를 지원해야 했습니다. 특히, 메뉴 항목 내부에서 하위 메뉴를 트리거하는 SubTrigger 요소가 필요하다는 점을 인지하게 되었고, 이를 구성하기 위해 고민한 내용을 공유합니다.기존 PopOverMenu는 단일 레벨의 메뉴를 지원했으나, 단계적으로 이동하는 메뉴를 복합적으로 구성할 필요성이 제기되었습니다. 특히 사용자가 메뉴를 통해 여러 옵션을 계층적으로 탐색하는 상황에서, 하위 트리거(SubTrigger)를 제공하여.. 공감수 2 댓글수 4 2024. 11. 16.
[디버깅] 크루루 서비스의 자동 로그인 문제와 Tanstack Query 캐싱 이슈 해결기 이번 스프린트에서 크루루 서비스는 자동 로그인 기능을 구현했습니다. 하지만 정상적으로 동작하지 않았고, 정확한 원인을 파악하기 어려운 상황이었습니다. 클라이언트 측에서 에러가 던져졌으나, 네트워크 요청은 200 응답을 보이는 이상한 현상이 발생했습니다. 서버와 클라이언트 중 어디서 문제가 발생했는지 알 수 없었기 때문에, 여러 방법을 통해 디버깅을 진행했습니다. APIClient를 직접 점검했지만, 별다른 문제는 보이지 않았고, 심지어 에러를 throw하는 코드 주변에 console.log를 추가해도 아무것도 찍히지 않았습니다. 이처럼 이상한 증상을 기반으로 저는 Tanstack Query의 캐싱 메커니즘이 원인이 아닐까 생각했습니다. Tanstack Query Dev Tool을 활용해 데이터를 확인한.. 공감수 1 댓글수 0 2024. 11. 13.
Next.js vs Remix 뭐가 더 좋을까? 서론Next.js와 Remix는 무엇인가?현대 웹 개발에서는 사용자 경험과 성능을 최적화하기 위해 다양한 프레임워크들이 사용됩니다. 그 중에서도 Next.js와 Remix는 React 기반의 프레임워크로, 각각 고유한 방식으로 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 그리고 클라이언트와 서버 간의 데이터를 효율적으로 관리하는 방식 등을 제공합니다.Next.js는 Vercel에서 개발한 풀 스택 웹 프레임워크로, React 애플리케이션의 서버 사이드 렌더링과 정적 사이트 생성 기능을 쉽게 구현할 수 있도록 해줍니다. 파일 기반 라우팅, 이미지 최적화, API 라우팅 같은 기능을 제공해 성능 향상과 SEO 최적화에 유리한 옵션으로 알려져 있습니다.Remix는 풀 스택 웹 프레임워크로, 데이.. 공감수 9 댓글수 2 2024. 10. 31.
React 서비스 SEO 성능 개선하기 (feat. SSR) 저희 서비스의 SEO를 개선시키기위해 논의를 하였는데요, 이와 더불어 React-Helmet이란 라이브러리를 인지하게 되었습니다.리액트 라이브러리인 React-Helmet을 이용하여 meta태그를 주입할 수 있다는 것을 알았는데요, 이를 이용하여 SEO를 개선할 수 있는 작업에 대해서 살펴보고, 우리 서비스는 어떤 선택을 할 것인지에 대해서 이야기 해보려 합니다.SPA 서비스의 경우 index.html파일이 하나이기 때문에, 라우트 별로 meta태그를 설정하는 것이 까다롭습니다.SPA의 경우 다음과 같은 특징을 가지는데요,SPA의 특성상 중요한 컨텐츠가 자바스크립트 로딩 후에 나타난다.SPA는 URL이 동적으로 변경되기 때문에 크롤러가 URL변화를 완벽히 감지하지 못한다.구글 크롤러의 경우, 자바스크립트.. 공감수 4 댓글수 1 2024. 9. 22.
[React] Drag & Drop (DnD) 직접 구현하기 (2). Mouse Event와 상태관리를 사용하여 구현하기 기존에 Drag Event를 통해 드래그 앤 드롭 기능을 구현했지만, 페이지 레이아웃이 변경되거나 요소가 다시 렌더링되는 Reflow 상황에서 이벤트가 중단되었습니다. 이로 인해 드래그 중이던 요소가 예상치 못한 위치에 놓이거나, 드래그 자체가 취소되는 문제가 발생했습니다.이 문제를 해결하기 위해 Mouse Event를 사용하여 드래그 기능을 다시 구현하기로 결정했습니다. Mouse Event는 Reflow의 영향을 받지 않아 안정적인 이벤트 처리가 예상했으나, event.dataTransfer 객체를 사용할 수 없다는 점이 문제가 있었습니다.event.dataTransfer는 Drag & Drop 과정에서 데이터를 전달하는 데 사용됩니다. Mouse Event로 전환하면서 이 객체를 사용할 수 없게 되.. 공감수 1 댓글수 0 2024. 9. 17.
[React] Drag & Drop (DnD) 직접 구현하기 (1). Drag Event를 사용하여 구현하기 크루루 서비스는 기획 단계에서 부터 칸반 형식으로 지원자들을 보여주는 걸 선택했습니다.우리 서비스의 핵심 가치 기능은 ‘지원자의 관리’라고 생각했습니다. 따라서 우리는 ‘지원자가 어떤 단계에 있는지 한 눈에 볼 수 있는 대시보드’가 우리 서비스의 핵심 기능이라고 생각했습니다.초기 단계 우리는 시중에 서비스되고 있는 ATS(Applicatn Tracking Service)에서 칸반 형식을 채택하고 있는 것을 확인하였습니다. 따라서 검증된 방식이라 판단하였습니다.따라서 칸반 보드 형식을 결정한다면 “한 눈에 볼 수 있는”의 기능을 충족시킬거라 생각하였습니다.그러나 우리는 사용자 테스트(UT)에서 이러한 칸반 형식을 바탕으로 많은 사용자들이 ‘드래그’를 직접 해보려고 시도하는 과정을 지켜봤고, 우리는 ‘Dra.. 공감수 2 댓글수 0 2024. 9. 15.
[FE] 디자인 시스템에 아토믹 디자인 패턴 도입하기 크루루 서비스는 리액트 웹 어플리케이션으로 Emotion-Styled를 사용하는 구조를 사용하고 있습니다.서비스 개발 초기 단계에서 우리는 컴포넌트 분리에 대한 명확한 기준을 가지지 않았습니다.이는 서비스 도메인에 따라 컴포넌트 구조가 변경될 사항이 많을 것이라 예상했기 때문입니다. 이러한 이유로 우리는 유연하게 변화에 대응할 수 있는 컴포넌트를 만들고자 했습니다.하지만 서비스가 확장됨에 따라 공통 컴포넌트의 수가 늘어나고, 복잡한 컴포넌트들이 생기기 시작했습니다. 이로 인해 코드의 관리가 어려워졌고, 각 컴포넌트 간의 역할과 책임이 모호해지는 문제가 발생했습니다.우리는 다음과 같은 컴포넌트 구조를 가지고 있었습니다.📦components ┣ 📂appModal ┣ 📂applyManagement ┣ ?.. 공감수 5 댓글수 1 2024. 9. 15.
[웹 최적화] 웹 페이지 번들 사이즈 줄이기 Minify주석 공백, 줄바꿈 등을 삭제하여 소스코드의 사이즈를 줄이는 것을 말합니다.가독성에는 문제가 생기지만, 단순히 불필요한 코드를 제거하는 것이므로 코드 구조는 변하지 않습니다.// Before minificationfunction add(a, b) { return a + b;}// After minificationfunction add(a,b){return a+b;}Uglify코드의 크기를 줄이는 것뿐만 아니라, 변수명 축약과 같은 난독화 과정을 포함합니다.코드를 읽기 어렵게 만들어서 보안성을 강화하는 동시에 파일 크기를 더 줄이기 위한 목적으로 사용됩니다.// Before uglificationfunction addNumbers(a, b) { return a + b;}// After.. 공감수 1 댓글수 1 2024. 9. 8.
[React] 이미지 로딩, 렌더 사이 깜박임 현상 해결하기 기본적인 skeleton을 구현한다면, 이미지를 불러오는 동안 (로딩 되는 동안) 스켈레톤 UI가 잘 작동 하지만, 이미지를 불러오고 나서, 렌더되는 사이에 오른쪽에서 왼쪽으로 버벅거리며 렌더되는 현상이 있습니다.Image의 src를 Control할 수 있게 state로 변경하여, 이를 개선해보고자 합니다.import { useEffect, useState } from 'react';import styles from "./index.module.css";function ImageComponent(props) { const [imageBlob, setImageBlob] = useState(null); const [isLoading, setIsLoading] = useState(false); useEf.. 공감수 0 댓글수 0 2024. 9. 5.
스토리북 조금 더 잘 사용하기. Auto Docs, decorators, play function. feat Storybook 8.2 글쓰고 있는 현재 스토리북은 8.2버전까지 출시되었습니다. 이번 업데이트를 통해서 다양한 테스트 툴에서 사용되고 있는 jasmine 스타일의 테스트 코드로써 스토리를 작성할 수 있게끔, 러닝 커브를 줄이려는 모습을 보여주고 있다는 생각도 들고, 다른 테스트툴과의 연결성을 신경쓰는 듯한 모습을 보여주고 있어서 추후 더 기대되는 툴이라고 생각되어 글을 작성하게 되었습니다!스토리북을 처음 사용하시는 분들을 위한 글로 처음부터 차근차근 정리하는 식으로 글을 구성하였습니다.이 글은 스토리북을 사용하여 리액트 컴포넌트를 테스트하는 방법을 다룹니다. 우선 스토리북이 무엇인지 부터 알아가보도록 하죠!1️⃣ 스토리북(Storybook)이란 무엇인가?스토리북은 UI 컴포넌트 개발을 위한 오픈소스 도구입니다. 이를 사용하면.. 공감수 0 댓글수 2 2024. 8. 19.
[개발 상식] 쿠키의 HttpOnly, Secure, SameSite HTTP 통신 중 사용자의 중요 정보를 담고 있는 쿠키를 보호하기 위한 방법으로, 여러 쿠키 플래그가 있습니다. 그 중에서도 HttpOnly, Secure, 그리고 SameSite 플래그에 대해 자세히 알아보고자 합니다.1. HttpOnly 플래그의 역할HttpOnly 플래그는 웹 어플리케이션에서 쿠키를 더 안전하게 관리할 수 있게 도와주는 설정입니다. 이 플래그가 설정된 쿠키는 클라이언트 사이드 스크립트, 즉 자바스크립트를 통한 접근이 차단됩니다.사용자가 웹 페이지에 접속할 때 서버에서 HttpOnly 플래그를 포함한 쿠키를 전송하면, 해당 쿠키는 브라우저에 저장되지만 document.cookie를 통한 직접적인 접근은 불가능해집니다.이러한 특성 덕분에, HttpOnly 쿠키는 Cross-Site Sc.. 공감수 0 댓글수 0 2024. 8. 15.

반응형

문의안내

티스토리
로그인
고객센터

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