혜원의 개발노트

이전글에서 말했지만 나는 슬랙앱 화면을 구성할때 slack-block-builder를 사용했다. 그래서 먼저 slack-block-builder를 설치해준다. npm install slack-block-builder 슬랙앱의 컴포넌트는 계층이 존재한다. 왼쪽이 상위계층이고 오른쪽으로 갈수록 하위 계층이다. 하위계층에 있는 엘리먼트들은 무조건 상위계층안에 존재해야한다! 이 컴포넌트들은 모두 slack-block-builder에서 import해서 사용할 수 있다. 1. Surface surface는 home, modal, message로 나뉘는데, home은 슬랙앱의 메인화면에서 "Home" 탭을 눌렀을때 보여지는 화면이다. 그리고 modal은 말그대로 모달이다! 그리고 메시지는 슬랙앱이 전송하는 메시지 1..

1. Slack API 공식문서 일단 슬랙앱은 내가 완전 커스텀하게 만들수있는게아니라, 슬랙이 정해놓은 규칙안에서 자유롭게 만들 수 있다. 슬랙 앱 내부에서 유저로 인해 특정한 이벤트가 발생하면 슬랙에서 서버로 알려주고, 서버에서 특정한 액션을 하게되면 슬랙앱에 내가 요청한 액션이 발생하도록 할 수 있다. 슬랙이 정해놓은 이벤트와 액션만 사용이 가능한데, 슬랙앱의 웬만한 동작들은 커버가 가능하기때문에 기능 구현엔 큰 무리가 없었다. 개발을 하면서 가장 많이 본 페이지이기도하고, 개발시에는 항상 켜놓고 구현을했음 2. @slack/bolt 나는 자바스크립트로 서버를 만들었는데, 슬랙앱을 쉽게 생성할 수 있도록 지원해주는 라이브러리가 있다!! slack/bolt라는 라이브러리를 사용하면 되는데, 이 라이브러..

회사에서 MVP로 슬랙 앱을 만들어서 시장에 출시하려고해서 기획자 2명 + 디자이너 1명 + 개발자 1명 이렇게 팀을짜서 서비스를 만들었다. 금방만들줄 알았는데, 생각보다 개발기간도걸리고, 기획적으로 정리할것도있어서 2달정도 걸린것같다..! 슬랙앱을 만든건 처음이기도하고, 서버코드도 작성해보면서 만들어서 너무어렵긴했는데, 많은걸 배울수있어서 좋았다!! 프론트에서 당연하다고 생각했던것들이, 서버에서는 당연하지않다는것을 이 앱을 만들면서 배웠당. (예를들면 앱의 글로벌filter값을 어디에서 가지고있을지에대한 여부를 결정해야할때, 프론트에서는 글로벌state로 필터값을 가지도록 하는게 너무 간단한방식이라, 서버에서도 글로벌 값을 가지도록 해야지 되겠다고 생각했었는데, 서버는 각 요청안에 들어있는 정보를 가지..

remix, next등 여러 프레임워크들에 관한 아티클이나 영상을 보면서 메타프레임워크라는 키워드를 종종 봤었다. 그래서 메타프레임워크에 대해 구글링을 하던 중 내가 찾던 답이 잘 정리되어있는 글을 발견해서 정리를 해보려고 한다. https://www.ombulabs.com/blog/javascript/what-is-a-javascript-meta-framework.html What Is a JavaScript Meta-Framework? - The Lean Software Boutique No, not that Meta What most developers call JavaScript frameworks (React, Vue, Svelte, etc) can more accurately be though..

우리 팀에서는 Storybook의 변경사항이 포함된 PR을 생성하면, Chromatic에서 UI Review를 진행하기위해 Storybook을 Chromatic에 배포를 한다. 이 작업을 자동화해놨기때문에, PR이 생성되면 github action이 자동으로 실행되어서 알아서 배포를 해준다. 그런데 한 PR을 올렸는데, chromatic에 배포하는 스크립트에서 에러가 났다. 에러가 발생한 부분을 보니 Pass --allow-console-errors to succeed this command regardless of runtime build errors. 위와같은 설명이 적혀있었다. 구글에 검색을 해봄 https://github.com/chromaui/chromatic-cli/issues/156 Capt..

타입스크립트로 짝수 또는 홀수에 대한 타입을 만들어보는 방법을 찾아보다가 기록하면 좋을것같아서 포스팅해봄 일단 처음엔 어떻게 접근해야할지 감이 잘 안와서 구글에 찾아봄 https://dev.to/tylim88/typescript-odd-number-type-1fj Typescript Odd Number Type Most people: No, you cannot create an odd number type with Typescript Meanwhile me: type... dev.to 그러다가 위 블로그를 보게되었당! Acid Coder선생님 감사합니다ㅜㅠㅜ흐릏그ㅡ 홀수 타입 type OddNumber< X extends number, Y extends unknown[] = [1], Z extends n..

Intersection Observer를 사용해서 무한 스크롤 예시를 만들어보자! Using 1. CRA with typescript 2. react-query 3. randomstring 간단하게 만들어보겠다. 먼저 react-query 사용환경 설정해주기 최상단 컴포넌트에서 QueryClientProvider로 감싸줘야한다. 나는 App.tsx에서 적용해줌 import { QueryClient, QueryClientProvider } from "react-query"; import List from "./List"; const client = new QueryClient(); function App() { return ( ); } export default App; 그리고 데이터를 생성해줄 함수를 간..

회사 프로젝트를 진행하면서 무한스크롤 구현할때 Intersection oberver를 사용해서 구현했다. 그런데 무한스크롤을 구현하는 예시를 보고 참고한거라, 정확한 동작방식에 대한 이해없이 무작정 사용했었기때문에 한번 정리를 해보고자 한다. Intersection Observer 란? 타겟 요소와 상위 요소 또는 최상위 document의 viewport 사이의 intersection 내의 변화를 비동기적으로 관찰하는 방법이다. Intersection Observer는 그들이 감시하고자하는 요소(target)가 다른요소(root)에 들어가거나 나갈때 또는 요청한 부분만큼 두 요소의 교차부분이 변경될때마다 실행될 콜백함수를 등록할 수 있게 한다. 정확히 몇 픽셀이 겹쳐졌는지는 감지할 수 없고, 몇퍼센트정도..

후우...일주일만에 React native 프로젝트를 실행시켜보니 켜지질 않고, 타이틀에 보여지는 에러메시지가 찍힌다. 일주일동안 내가 무엇을했길래 안켜지는것인가...,, 에러 메시지를 구글링해보다가 아래 방법을 찾았다! cd into YOUR_PROJECT/ios and rm -r build, then run again react-native run-ios https://stackoverflow.com/questions/43949607/no-bundle-url-present-react-native

href$로 쓰는 예시를 봤는데 이 문법이 궁금해서 한번 정리해봄 Attribute selectors CSS의 attribute selector는 주어진 속성과 일치하는 엘리먼트를 찾는다. Syntax [attr] 속성의 이름을 가지고있는 엘리먼트를 의미한다. /* elements with a title attribute */ a[title] { color: purple; } 만약 title이라는 어트리뷰트를 가지고있는 a태그에 대해 위 스타일이 적용된다. 나는 태그에 내장되어있는 어트리뷰트 이름만 써야한다고 생각했는데 내가 커스텀하게 만든 어트리뷰트도 사용할 수 있다. 예를들면 아래처럼 작성했을때 custom이라는 attr에 정의한 스타일도 적용된다. 예시로 그려짐 그럼 data-로 추가한 속성들을 선..