Frontend 개발자 - hyo.loui

🎯목적 : Supabase Auth - 로그아웃, 로그인 상태(recoil) 1. recoil + supabase getSesstion() import { atom } from "recoil"; const userLoginCheck = atom({ key: "userLoginCheck", default: false, }); export default userLoginCheck; 전역 상태관리를 위해 프로젝트에서 recoil을 도입했다. 사용법은 다른 전역 상태관리 라이브러리에 비해 너무 간단하다. atom을 import해준 후 useState처럼 사용하면 된다. 타입스크립트로 인해 defaul의 타입을 지정해주고, atom에 전달되는 object는 key와 value로 구성되며 key에 선언할 text와..

🎯목적 : 에디터 기존의 문제점 개선 (사진 업로드 시 뷰어에서 이미지가 string 형식으로 출력되어짐) 개선 : image url과 file name으로 보여질 수 있도록 ** 최종 프로젝트 기간 매우 바쁜 관계로 우선 중요 코드만 적어놓았음** 1. UI tag handleOnEditorChange()} /> hooks 사용하여 addImage 라는 함수를 커스텀하여 만들어 주었다. 2. addImage (이미지 생성 전체 과정) const addImage = async (blob: File, dropImage: HookCallback) => { const img = await compressImg(blob); // 이미지 압축 if (!img) return; const url = await upl..

📝 WIL: Weekly I Learned Work done this week 이번 주 끝낸 일! 티스토리 포스팅 = 매일 TIL 일지 (목표, 오류, 정리로 세분화) Project : 최종 프로젝트 시작 = 최종 프로젝트 시작 ( init ) 챌린지 팀 헤커톤 진행 = 2.10 ~ 11일 ( 24시간 ) Hackathon review 이번 주 가장 인상 깊었던 '헤커톤'에 대해 리뷰 하겠다. 우선 우리는 2월 10일 부터 11일 까지 안양 오피스텔을 대관하여 진행했고, 12시에 모여 간단히 식사 후, 해커톤 장소로 가서 각자 장비 셋업을 끝내니 2시가 다 되었다. 팀장님 주도 하에 디자이너님과 회의를 진행했고, 우선적으로 와이어프레임이 나와서 무난하게 진행 할 수 있을 것 같았다. 또한 우리는 디자이너..

🎯목적 : DropDown componenet 생성 > 개선 PostTitle componenet 생성 1. DropDown Layout 만들기 const DropDown = ({ defaultValue, options, }: DropDownProps) => { const handleChange = (e: React.ChangeEvent) => { e.preventDefault(); }; return ( {options.map((option) => ( {option} ))} ); }; export default DropDown; prop 으로 전달받은 defaultValue / options 를 활용해 select-box로 보여주는 컴포넌트를 작성했다. 처음엔 라이브러리를 가져와서 활용하려고 했으나, t..

🎯목적 : 코드 컨벤션 유지를 위해 ESLint와 prettier를 사용하여 초기세팅, 과정 기록 🤢 오류 해결 (as-is to-be): ESLint function declaration ESLint 적용시 단언문 (!) 경고 메세지 1. ESLint 대부분의 개발자들은 eslint를 사용하지 않고, prettier에 의존하여 코드를 작성한다. eslint 는 코드 퀄리티를 보장하도록 도와준다. 예시로는 react에서 컴포넌트 선언을 arrow function 으로 지정하고, 어떤 파일에서 일반함수로 되어있다면, 에러를 발생시켜 코드 컨벤션이 통일이 되도록 유도한다. 이 과정은 prettier 처럼 '파일 저장' 했을 때와는 다르게 lint 를 run 해야 동작한다. npm install -D esli..

🤢 문제 내용 : 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 프로젝트 참여비..