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

보투게더 프로젝트 홈 화면에서 할 수 있는 기능으로는 글쓰기, 위로 가기, 공지사항 보러 가기, 랭킹보기, 알림 , 카테고리 변경 등 다양한 동작이 있습니다. 그리고 게시글을 보는 방식이 무한 스크롤로 구현되어 있는데요. 시각 장애인이 게시글을 밑으로 계속 내리다가 글쓰기 동작 혹은 알림, 랭킹 등을 보고 싶다면 어떻게 해야 할까요? 이전 탭 인덱스를 보는 단축키를 많이 눌러서 올라가거나 새로고침을 해야 할 것입니다. 이렇듯 무한 스크롤에서는 웹 접근성을 망가지기 일쑤인데요. 프로젝트에서 해결한 방법 공유하려고 합니다. 문제 해결 1. 무한 스크롤이 시작되는 곳에 최상단이라는 것을 알릴 수 있는 버튼을 생성합니다. 버튼으로 생성한 이유는 포커스 기능을 이용해야하기에 버튼을 했습니다. 또한 무한 스크롤이 ..

개발자가 사용할 때 자유도가 높은 컴포넌트를 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..

React/Next/Javscript Eslint Import/Order (import 순서) 설정하는 방법 0. 이 글을 쓰게 된 계기 과거부터 지금까지 import를 순서를 관리한다면 일일이 수동으로 알파벳 순으로 맞춰주었었는데 리엑트에서 폴더가 많아지고, 컴포넌트가 많아지다 보니 불편함을 느꼈습니다. 그러던 와중 다른 크루가 import/order에 대해 포스팅 한 글을 보고 적용해 봐야겠다고 마음먹었었고, 새로운 프로젝트를 할 때 어떻게 했는지 기억하기 위해 작성하게 되었습니다. 1. Import 순서를 설정하면 좋은 점 일관성 유지: import 문이 일관된 순서로 작성되면 코드를 이해하기 쉬워집니다. 모듈 경로를 알파벳순으로 정렬하면 모듈 검색이 용이해집니다. 충돌 방지: 일부 모듈은 다른 모..

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

문제 코드 return ( {isLoggedIn && } {isLoggedIn && ( )} ); } 문제 원인 react가 렌더되면서 isLoggedIn 일때가 아닌 !isLoggedIn이 먼저 렌더 되고 그 이후에 isLoggedIn 이 조건이 충족되기 때문에 맨 처음 페이지 렌더 시 이러한 에러 문구가 뜨는 것 같다. 해결 방법 / 코드 조건문에 해당하지 않는 부분을 먼저 리턴해주고 그 뒤에 조건에 해당하는 부분들을 리턴해주면 오류문구가 뜨지 않고 해결이 됩니다. if (!isLoggedIn) { return ( ); } return ( ); }

시작하기 https://firebase.google.com/docs/storage/web/start?authuser=0 웹에서 Cloud Storage 시작하기 | Firebase Documentation 의견 보내기 웹에서 Cloud Storage 시작하기 Firebase용 Cloud Storage를 사용하면 이미지와 동영상 등 사용자 제작 콘텐츠를 업로드 및 공유하여 앱에 리치 미디어 콘텐츠를 빌드할 수 있습니다. 데이터 firebase.google.com 1. getStorage() 하기 import { initializeApp } from "firebase/app"; import { getStorage } from "firebase/storage"; // Set the configuration f..

시작하기 1. 데이터 베이스 만들기 2.데이터 추가하기 addDoc 와 collection , getFirestore 을 사용하여 데이터를 추가할 수 있습니다. //firebase.ts export const dbService = getFirestore(); //Home.tsx const onSubmit = async (e: FormEvent) => { e.preventDefault(); const docRef = await addDoc(collection(dbService, 'messages'), { message, createdAt: Date.now(), }); console.log('Document written with ID: ', docRef.id); }; https://firebase.goog..