전체 글 (252) 썸네일형 리스트형 styled components 사망 원본 링크 :https://doowiki.site/98.%20%EB%AF%B8%EB%B6%84%EB%A5%98/_Index_of_98.%20%EB%AF%B8%EB%B6%84%EB%A5%98.md개요전 회사에서 열심히 썼던 styled-components가 공식적으로 기능 개발을 중단한다고 발표했다.(사실 4월에 발표했으니 3달이나 지나긴 했다.)CSS-in-JS의 최전선에서 활약하던 라이브러리가 이렇게 막을 내리게 된 것이다. 솔직히, 이미 예견된 일이라고 생각한다.요즘 프론트엔드 생태계는 거의 [[Tailwind CSS]]로 기울어진 운동장이 되었고, CSS-in-JS는 점점 설 자리를 잃어가고 있었다. 이번 기회에 왜 styled-components가 죽어야 했는지, 그리고 요즘 CSS 개발은 어떤 .. 언더커버 사일로 - 토스 챌린저스 감상평 원본 링크 :https://doowiki.site/98.%20%EB%AF%B8%EB%B6%84%EB%A5%98/%ED%86%A0%EC%8A%A4%20%EC%B1%8C%EB%A6%B0%EC%A7%80%20%EA%B0%90%EC%83%81%ED%8F%89.md 개요'언더커버 사일로' 첫 화를 봤다. 토스의 실제 비즈니스 문제를 각 분야 전문가들이 해결해보는 서바이벌 프로그램이라고 해서 기대했는데, 보고 나니 복잡한 감정이 들었다.참가자들의 화려한 스펙을 보면서 살짝 현타가 왔고, 동시에 영상 자체의 아쉬운 부분들도 눈에 띄었다. 솔직한 후기를 써보려고 한다.1. 참가자 스펙에서 느낀 현실참가자 라인업을 보는 순간 "아, 이 정도는 되어야 토스에 가는구나" 싶었다.고2에 토스 PO로 입사한 최형빈AI 마케팅.. 230821 SendBird SDK v3 -> v4 마이그레이션하기 오늘의 할 일 비용 절감을 위해 센드버드 버전 업데이트를 진행하고자 했다. 센드버드는 나름대로 메이저한 솔루션이고, 상세한 가이드 문서가 있어서 솔직히 별로 안힘들 줄 알았다. 그래서 해야할 일은 센드버드 v3 → 센드버드 v4로 바꾸기 이다. 날 두렵게 한 가이드 문서의 글 모든 마이그레이션 작업이 완료되고 모든 오류가 수정될 때까지 센드버드 채팅 SDK v4는 앱이 컴파일되지 않을 수 있습니다. 모든 차단 오류를 수정한 후에는 경고를 제거하고 SDK를 앱과 다시 정렬하는 추가 작업이 필요할 수 있습니다. 이 작업에는 넉넉한 시간을 허용하는 것이 좋습니다. ... 하지만 회사에서 까라면 까야지. 일단 시작 이것이 메뉴얼인데, 살펴봐도 이해가 잘 안되는 것들이 있었다. v3 → v4 마이그레이션은 npm.. 230818 왜 build 후 실행이 안될까 개요 npm run dev로 지금까지 작업한 내용이 정상적으로 동작하는걸 확인했음. 실제 개발서버에 배포하고자 // 빌드 npm run build // 생성된 정적 코드 실행 pm2 reload index 위 작업을 실행했는데 에러 발생 Named export 'useToast' not found. The requested module 'vue-toast-notification' is a CommonJS module, which may not support all module.exports as named exports. 이 오류의 핵심은 이부분이다. 이번에 추가한 toast 라이브러리는 CommonJS 형식의 라이브러리인데, 플러그인에 등록하여 전역으로 사용하고자 했다. 그런데, 웹팩이 빌드되면서, 코.. 230817 nuxt에서 빠르게 기능 추가하기(안빠름) 오늘은 이전에 만들어놓은 임직원 조회 화면에서 추가적으로 이용정지, 이용가능 api를 추가하는 기능을 작업했다. 이용정지, 이용가능 상태값에 따른 ui 변경과 api 호출을 작업했는데, 임직원 조회 화면과 화면의 data-table에서 파생되는 dialog에 거의동일한 기능이 필요했다. vue3특) setup으로 data, method, function, style을 각 기능별로 나눠놓을 수 있음. 이기 때문에, 이용정지에 필요한 로직끼리 모아놓고 빠르게빠르게 복붙할 수 있었다. 다만 생소한 기능(특히 vuetify)으로 개발하느라 검색하는데 시간 많이 때려박아서 딱히 효율은 안나온 것 같다. chatGPT가 없었으면 이 개같은 vuetify로 어떻게 개발할 수 있었을까? 후 그리고 남는 자투리 시간에 .. 230816 nuxt에서 quillJS 이용하여 텍스트에디터 기능 구현하기 개요 현재 전문가 콘솔 편집기 채팅방에서 노션에서 복사한 텍스트를 붙여넣기하면 일부서식이 삭제되는 문제가 있음 원인 현재 편집기 채팅방에서 사용중인 quillJS는 노션의 문단번호, 글머리표를 텍스트가 아닌 서식으로 인식하고, 아래와 같이 서식은 자체적인 규칙으로 생성된 delta object로 처리함 그럼 오늘의 미션 드릴게요. 가장 최근 경험하고 있다고 생각되는 인지적 오류는 무엇인가요? 위의 인지적 오류를 경험하는 상황은 어떤 순간인가요? 어떤 이유로 위의 상황을 인지적 오류라고 생각하나요? 현재 quill Editor에서 허용된 서식은 4가지 list(문단번호, 글머리표)는 허용되지 않았기 때문에, 복사→ 붙여넣기해도 화면에 렌더링 되는 과정에서 삭제됨 해결방법 quillJS에서 list를 허용.. 230814 vue3에서 typescript 사용하기, vuetify 사용하기, 양방향 바인딩 오늘의 해야할 일 이거를 이렇게 만들어야 한다. 어떻게해야하나. 헤더에 버튼을 추가할 컬럼을 추가해야한다. slot 을 이용하여 추가 컬럼을 넣는다. 라익디스 슬롯이랑 컬럼 명을 매핑시켜주면 된다. 일단 버튼은 만들었다. 다음은 버튼에 이벤트를 넣어야 한다. 이벤트는 컴포넌트 기준으로 아래와 같이 동작한다. Button(v-btn) → DataTable(v-data-table-server) → page 처음에는 Button 컴포넌트에 props으로 클릭 이벤트 함수를 전달하여 구현하고자 했는데, 생각해보니 @click 디렉티브는 이벤트 버블링의 규칙이 적용되므로 굳이 함수로 전달하는 과정이 필요하지 않았다. 그냥 상위 컴포넌트에서 @click 디렉티브를 사용하여 이벤트를 구현하면, 자연스럽게 클릭 이벤트.. 토스 - 유난한 도전을 읽다 유난한 도전 책을 읽게 된 계기 회사 동료가 추천해서 읽어보았다. 책의 전체적인 내용 토스의 창업부터 성공, 그 이후까지 토스에 대한 이야기이다. 시작과 실패: 창업자 이승건이 처음에 만든 앱들이 사용자의 니즈에 맞지 않아 실패하고, 대기업과의 경쟁에 지는 등 초기 어려움을 겪음. 간편송금의 아이디어: 8명의 브레인스토밍 이후에 '간편 송금' 아이디어가 탄생. 시작은 기괴한 수작업 송금 방식이었으나 SC 제일은행과 협력하여 성장. 토스와 카카오의 경쟁: 카카오와의 경쟁에서 카카오의 불편함과 문제점을 이용한 전략으로 승리. 토스의 성장과 난관: 계좌 등록의 번거로움, 은행들과의 협력, 오프라인 영업, 실패와 학습을 통한 마케팅 전략 등으로 성장. 바이럴 광고의 성공: 페이스북 광고 실험 중 '9살 차이나는.. 이전 1 2 3 4 ··· 32 다음