보투게더 프로젝트 홈 화면에서 할 수 있는 기능으로는 글쓰기, 위로 가기, 공지사항 보러 가기, 랭킹보기, 알림 , 카테고리 변경 등 다양한 동작이 있습니다. 그리고 게시글을 보는 방식이 무한 스크롤로 구현되어 있는데요. 시각 장애인이 게시글을 밑으로 계속 내리다가 글쓰기 동작 혹은 알림, 랭킹 등을 보고 싶다면 어떻게 해야 할까요? 이전 탭 인덱스를 보는 단축키를 많이 눌러서 올라가거나 새로고침을 해야 할 것입니다. 이렇듯 무한 스크롤에서는 웹 접근성을 망가지기 일쑤인데요. 프로젝트에서 해결한 방법 공유하려고 합니다. 문제 해결 1. 무한 스크롤이 시작되는 곳에 최상단이라는 것을 알릴 수 있는 버튼을 생성합니다. 버튼으로 생성한 이유는 포커스 기능을 이용해야하기에 버튼을 했습니다. 또한 무한 스크롤이 ..
터미널 커스터마이징 하기 전 터미널 커스터마이징 하고 난 후 시작 먼저 터미널에서 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..
- Total
- Today
- Yesterday
- 프리온보딩
- 북클럽
- 윤성우 열혈C프로그래밍
- React
- CLASS
- TopLayer
- NextRequest
- electron
- createPortal
- 스토리 북
- javascript
- 프론트앤드
- jest
- nodejs
- 아차산
- 노개북
- Storybook
- 원티드
- nextjs
- C언어
- env
- error
- 우아한테크코스
- WSL2
- import/order
- NextApiRequest
- 초보
- 위코드
- 노마드코더
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |