목록Project (23)
Frontend 개발자 - hyo.loui
🤢 문제 내용 : supabase 사용 시 필요한 키를 .env 에 입력했으나, 인식을 못하고 에러 발생.. 🎈 문제 해결 방법 : 기존 NEXT_PUBLIC_SUPABASE_API_KEY로 설정되던 값을 예약어인 NEXT_PUBLIC_SUPABASE_ANON로 변경해주었습니다. AS-IS # .env.local NEXT_PUBLIC_SUPABASE_URL=URL NEXT_PUBLIC_SUPABASE_API_KEY=API_KEY TO-BE # .env.local NEXT_PUBLIC_SUPABASE_URL=URL NEXT_PUBLIC_SUPABASE_ANON=API_KEY ✨ 알게된 것 라이브러리를 사용 할때에는 예약어를 기본값으로 가지고 있는지 확인해야 합니다. 또한 사용 전 공식문서를 꼼꼼하게 읽어야..
🎯목적 : 프로젝트 - 라이브러리 결정사항 정리 라이브러리 선정 1. Text Editor 📌 TOAST UI 결정 과정 TOAST 데모 https://ui.toast.com/tui-editor 장점 역사와 전통이 있고 다른 사람의 자료를 참고할 수 있습니다. 한국 커뮤니티가 발달되어 있습니다. 단점 react-editor wrapper의 react 18 미지원 SSR 미지원 → Next.js의 장점을…Advanced Features: Dynamic Import | Next.js Next.js 에 toast ui Editor 을 같이 사용하는 방법 (짱쉬움) 글자 크기 상세 조정 미지원 이미지 사이즈 선택 불가 TINY 단점 : 유료 react-quill 데모 https://quilljs.com/ 장점 ..
🎯목적 : 프로젝트 S.A - 첫 회의 결정사항 정리 1. 프로젝트 개요 💡 포트폴리오가 필요한 직군을 위한 포트폴리오 공유 사이트 2. 프로젝트 와이어프레임 개발팀 와이어프레임 https://www.figma.com/file/tmnp8NbXbZhnVFD1DeYYdc/Untitled?node-id=0%3A1&t=cOmM5hYm6OYmRpgV-1 Figma Created with Figma www.figma.com 3. 주차별 구현 기능 1차 구현 기능 (23.02.11 달성) 1.0.0 배포 Auth 회원 기본 정보 이름 성별 이메일 출생년도 자기 소개 프로필 사진 업무 관련 정보 포지션 경력 비공개 가능 연봉 정보 contact가능한 연락처 사용 가능한 기술 스택? 프로젝트 github 프로젝트 참여비..
🎯목적 : 타입 스크립트 리펙토링 과정 정리 🤢 트러블 슈팅 : Comment 타입 overlap 에러 1. typescript 환경 세팅 Develife 프로젝트는 리액트로 다 작성되어 배포까지 마친 상태였다. 처음 진행 해야하는 작업은 typescript의 패키지를 설치해야 한다 npm install typescript @types/node @types/react @types/react-dom @types/jest dependenci에 설치가 완료 된 후, tsc --init 명령어로 tsconfig.json 파일이 생성되었는지 확인한 후, jsx를 인식 못하는 오류를 방지하기 위해 주석처리 되어있는 16번째 라인의 주석을 해제하며, "JSX": "preserve", >> "JSX": "react" ..
🎯목적 : Git hub : Pull request 개념 정리 적용 : Pull request 활용, 팀원들과 코드 리뷰하기 1. PR은? 프로젝트의 Contribute로 등록되지 않는다면 Fork 하여 repository를 복사해 나의 깃허브 repo로 가져오는 방법이 있지만. 해당 포스팅 내용에서는 팀원으로써 같이 프로젝트에 참여 한다고 가정한다. 우리는 contributor 가 되어 프로젝트를 클론하여 작업한 후 주된 기능이 모여있는 dev 나 develop 브랜치로 '내 작업 내용을 반영해 주세요' 하고 요청하는 것 이다. 이렇게 요청하는 것이 Pull Request 를 보낸다, 날린다고 한다 PR을 통해 코드 충돌을 최소화하고, push 권한이 없는 오픈소스 프로젝트에 기여할 때 많이 사용하며,..
🎯목적 : Youtube API 활용 (비동기)서버통신 : React-Query 적용 response 로 UI구성 🤢 트러블 슈팅 : filter 메서드 문제 해결 1. react query Youtube API 활용에 있어 서버통신의 생산성을 위해 react-query 적용을 기획했다. api.js에서 데이터를 가져오는 함수를 관리하는 파일을 따로 분리했고 중복되는 url 과 api key는 따로 변수선언을 해주었다. 필요한 component에서 react-query를 연결해 위 함수를 사용하도록 import 했다. 별칭을 붙여 데이터의 목적을 정확하게 명시했다. 2. UI 생성 위에서 react-query로 가져온 AllPlayList 라는 배열형 데이터는 map 메서드로 하나씩 돌며, 이미지태그의 ..
왕초보 mz완성 (react-native app) https://github.com/hyoloui/MZL GitHub - hyoloui/MZL: mz-language 100 day's compelete mz-language 100 day's compelete. Contribute to hyoloui/MZL development by creating an account on GitHub. github.com KPT 회고 Keep: 유지해야할 것 커밋컨벤션 지키기 그라운드 룰 잘 지키기 모르는 것 공유하기 지속적이고 원활한 소통하기 프로젝트를 전반적으로 잘 정리하기 Problem: 개선해야 한다고 느끼는 지점 문제 및 해결방안 Task 세분화, 관리 >> 첫 기획부터 칸반보드, 계획표를 작성해 마감기한이 설..
🎯목적 : 마이페이지에 구현한 로직과 authentication API 복습, 🤢 오류 해결 : 로그아웃 후 마이페이지, 게시글쓰기 component 이동 시 에러 (useEffect 와 useFocusEffect 에서 발생한 에러 해결) 1. 닉네임 수정 UI 부분에서 삼항연산자로 수정 버튼이 onPress되어 onPressUpdate()함수가 실행이 되면 setState가 되어 onEdit이라는 state는 불리언타입이며 토글(true or false)이 된다! 이후 onEdit의 상태에 따라서 false가 된다면 기존에 있는 닉네임을 감싼 태그가 TextInput으로 바뀌게 되고 수정버튼도 완료버튼으로 바뀌게 된다! 완료버튼이 가진 함수는 onSubmitEdit()으로 updateProfile AP..