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

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

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..

CRA(create-react-app)로 만든 프로젝트 / Storybook 7 버전에서 절대 경로를 설정하는 방법 (with craco) / jest 절대 경로 설정하기 0. 이 글을 적게 된 계기 스토리북 절대 경로를 설정하지 않아 발생한 에러가 났습니다. Module not found: Can't resolve "@" Field 'browser' doesn't contain a valid alias configuration CRA로 만든 프로젝트에서 절대 경로 설정하는 방법은 많이 있으나 스토리북 7 버전 환경에서 절대 경로를 설정한 예시를 찾기가 어려워 나중에 제가 다시 볼 목적으로 글을 작성하게 되었습니다. 그리고 이러한 정보가 필요한 사람들에게 도움이 되었으면 좋겠습니다. CRA(create-..

설치 npm install @apollo/client graphql Get started with Apollo Client Hello! 👋 This short tutorial gets you up and running with Apollo Client. If you're using a React sandbox from CodeSandbox and you encounter a TypeError, try downgrading the version of the graphql package to 15.8.0 in the Dependencies panel. If you encou www.apollographql.com 설정 graphQL을 사용하는 서버의 주소를 uri로 설정합니다. client.js import..