YG - 96년생 , 강아지 있음, 개발자 희망

보투게더 팀 블로그에서 작성한 글을 가져왔습니다. Dialog 태그 위로 토스트 보이도록 하기 (feat.TopLayer, createPortal) html dialog 태그로 만든 Drawer에서 에러가 났을 때 토스트가 보이지 않는 상황이 있었습니다. 이유는 dialog는 최상위 계층 (Top layer)으로 열리기 때문인데요. topLayer는 페이지의 다른 모든 콘텐츠 레 velog.io 문제가 되는 상황 html dialog 태그로 만든 Drawer에서 에러가 났을 때 토스트가 보이지 않는 상황이 있었습니다. 이유는 dialog는 최상위 계층 (Top layer)으로 열리기 때문인데요. topLayer는 페이지의 다른 모든 콘텐츠 레이어 위의 존재하는 레이어입니다. 그래서 토스트가 TopLaye..

fetch를 추상화한 기존의 코드 import { ACCESS_TOKEN_KEY } from '@constants/localStorage'; import { getLocalStorage } from './localStorage'; import { silentLogin } from './login/silentLogin'; const headers = { 'Content-Type': 'application/json', }; export const makeFetchHeaders = () => { const accessToken = getLocalStorage(ACCESS_TOKEN_KEY); if (!accessToken) { return headers; } return { ...headers, Authori..

순열 순서가 존재하고, N개 중 K개를 선택하는 경우 순열이라고 합니다. visited로 0부터 N까지 방문했는지 확인하고 매번 0부터 N까지 반복문을 동작하여 반환합니다. Permutation const visited = Array.from({ length: N }, () => false); const combi = (num, arr) => { if (num === 0) { console.log(arr); return; } for (let i = 0; i < N; i++) { if (visited[i]) continue; visited[i] = true; combi(num - 1, [...arr, i]); visited[i] = false; } }; /** * N은 전체 개수, K는 뽑고자 하는 개수 ..

개발자가 사용할 때 자유도가 높은 컴포넌트를 npm에 배포하고 싶었습니다. 원하는 동작은 아래와 같았습니다. 1. styled-component의 as 기능을 지원하고 싶었습니다. 2. forwardRef를 통해 ref를 받도록 지원하고 싶었습니다. 3. 추가적인 스타일을 사용하고 싶을 때, 인라인 스타일을 지원하고 싶었습니다. 1. as를 지원하기 styled-component에서 as 기능을 그대로 사용하여 구현하였습니다. styled-components: API Reference API Reference of styled-components styled-components.com 예시) as를 사용하는 예시, div를 button으로 사용하고 싶을 때 import styled from 'style..

1. vite 설치하기 Vite Vite, 차세대 프런트엔드 개발 툴 ko.vitejs.dev npm create vite@latest 저의 경우 React를 사용하기에 React를 선택했습니다. 타입스크립트를 설정해 줍니다. 기본과 swc 둘 중 어느 것을 선택해도 상관없습니다. 2. src를 만들고 패키지로 만들 코드를 보관할 폴더인 lib를 만들어줍니다. 패키지가 여러 개라면 다음과 같이 작성했습니다. src/lib/index.tsx export { default as Container } from './Container'; export { default as Flex } from './Flex'; export { default as Grid } from './Grid'; export { defau..

보투게더 팀 블로그에서 작성한 글을 가져왔습니다. 보투게더 사용성 개선하기 (3) - 이미지 클릭 시 이미지 자세히 보기 이미지가 작아서 확대해서 보고 싶은 마음이 들었습니다.다른 사이트에서 이미지를 누르면 보통 확대된 이미지가 나오는데요. 보투게더 사이트에서 사용자가 예상한 동작이 작동하지 않으면 velog.io 구현하게 된 계기 이미지가 작아서 확대해서 보고 싶은 마음이 들었습니다. 다른 사이트에서 이미지를 누르면 보통 확대된 이미지가 나오는데요. 보투게더 사이트에서 사용자가 예상한 동작이 작동하지 않으면 불편함을 느낄 것이라고 생각이 들었습니다. 원하는 동작 이미지를 누르면 이미지를 자세히 볼 수 있는 확대 창이 나온다. 구현 방법 웹 접근성을 위해서 dialog 태그로 구현했습니다 dialog를 ..

보투게더 팀 블로그에서 작성한 글을 가져왔습니다. 보투게더 사용성 개선하기 (2) - 게시글, 댓글 작성 시 링크 첨부 게시글, 댓글의 경우에 링크 넣기 버튼을 눌른 후 \[ ] 사이에 사용자가 직접 괄호 사이에 링크를 넣고 저장 버튼을 눌러야 했습니다. 그러나 게시글이나 댓글 기능을 사용하면서 링크 첨부를 하 velog.io 문제점 게시글, 댓글의 경우에 링크 넣기 버튼을 누른 후 [[ ]] 사이에 사용자가 직접 괄호 사이에 링크를 넣고 저장 버튼을 눌러야 했습니다. 그러나 게시글이나 댓글 기능을 사용하면서 링크 첨부를 하는 방식이 불편하다고 느꼈습니다. 해결 방법 본문 링크 삽입 시 [[ ]] 을 붙여주고 있는데, 이걸 작성자에게 붙이도록 하지 않고 렌더링 시 http | https | www로 시작..

보투게더 팀 블로그에서 작성한 글을 가져왔습니다. 보투게더 사용성 개선하기 (1) - 이미지 복사 붙여 넣기 업로드 게시글 작성 시 이미지를 올릴 때 너무 불편하다.이미지 업로드가 불편해서 이미지 업로드 기능을 잘 사용하지 않게 된다.다른 커뮤니티 게시글 작성처럼 이미지 복사 붙여 넣기로 이미지를 올 velog.io 문제점 게시글 작성 시 이미지를 올릴 때 너무 불편하다. 이미지 업로드가 불편해서 이미지 업로드 기능을 잘 사용하지 않게 된다. 해결 방법 다른 커뮤니티 게시글 작성처럼 이미지 복사 붙여 넣기로 이미지를 올릴 수 있으면 편하겠다는 생각이 들었다. 구현 방법 ClipboardEvent 이벤트를 이용하여 클립보드의 파일이 있는지 확인한다. 파일이 있다면 이미지 타입인지 또 한 번 확인한다. in..