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

터미널 커스터마이징 하기 전 터미널 커스터마이징 하고 난 후 시작 먼저 터미널에서 shift를 누르고 설정을 눌러줍니다. 그러면 vscode에서 settings.json에 들어갈 수 있습니다. 그리고 wsl 확장자를 깔아줍니다. Name: WSL Id: ms-vscode-remote.remote-wsl Description: Open any folder in the Windows Subsystem for Linux (WSL) and take advantage of Visual Studio Code's full feature set. Version: 0.81.8 Publisher: Microsoft VS Marketplace Link: https://marketplace.visualstudio.com/it..

VSCode 설치하기 https://code.visualstudio.com/ 제가 자주 사용하는 확장자 1. Community Material Theme Name: Community Material Theme Id: Equinusocio.vsc-community-material-theme Description: The official community maintained Material Theme with 'legacy' color schemes you love! Version: 1.4.6 Publisher: Equinusocio VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-community..

시작하기 전 가상화가 켜져있는 지 확인합니다. 저의 경우 꺼져있었기 때문에 바이오스 설정을 해주었습니다. 컴퓨터 다시시작 버튼 누르기 -> f2, del 버튼 누르고 cpu 셋팅에서 svm 모드 혹은 가상화 모드를 켜주면 됩니다. WSL2 설치하기 https://learn.microsoft.com/ko-kr/windows/wsl/install WSL 설치 wsl --install 명령을 사용하여 Linux용 Windows 하위 시스템을 설치합니다. Ubuntu, Debian, SUSE, Kali, Fedora, Pengwin, Alpine 등 원하는 Linux 배포판에서 실행되는 Windows 머신에서 Bash 터미널을 사용할 수 있습니 learn.microsoft.com 1. PowerShell을 관리..

보투게더 팀 블로그에서 작성한 글을 가져왔습니다. 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..