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

순열 순서가 존재하고, 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..

에러가 나게 된 과정 MSW와 같이 사용하려는 목적으로 api/route.tsx를 통해 모킹 데이터를 내보내서 SSR(서버 사이드 렌더링)을 시도하였습니다. Error occurred prerendering page.라는 에러가 나오게 되었고, 많은 인터넷 검색을 통해 이유를 알게 되었습니다 이유 빌드 중에는 Next.js API 경로를 사용할 수 없습니다. 외부 url에서 데이터를 가져오십시오. 해결 방법 api/route.tsx를 통해 MSW와 같이 모킹 하여서 SSR을 할 수 없는 상황이었습니다. 그래서 외부 주소인 개발 서버의 api 주소를 통해 데이터를 가져와 보여주게 되었습니다 app/api/category/route.tsx import { MOCK_CATEGORY_LIST } from '@m..

보투게더 팀 블로그에서 작성한 글을 가져왔습니다 사용자가 업로드 한 이미지 압축하여 서버로 보내기 (feat.Browser Image Compression, Upload Images Converter, 이미지 압축 패키지 비교 (23.10.04 기준) Browser Image Compression https://www.npmjs.com/package/browser-image-compression 다운로드 수 : 137,399 번들 사이즈 : 55.51KB 마지 velog.io 이미지 압축 패키지 비교 (23.10.04 기준) 이미지 성능 최적화 사용자가 서버로 보내는 이미지의 용량을 줄여서 서버의 용량도 절약해 주고, 사용자가 이미지를 불러올 때 가볍게 불러올 수 있도록 하려고 했습니다. 그래서 사용자가..