Frontend 개발자 - hyo.loui

📝 WIL: Weekly I Learned Work done this week 이번 주 한 일! Project : Codefolio = 프로젝트 진행중 ( 1.0.0 > 1.1.0 version 배포 ) Project review 기획 & 디자인 회의를 하며.. 사실 우리의 mvp가 잦은 변동이 생기고 타겟(고객)층이 명확하지 못한 문제점이 제기되어 긴 기획 회의 끝에 의견을 좁히는 과정이 순탄하지는 않았다. 하지만 이것 또한 충분한 경험이라고 생각한다. 디자이너 관점, 기획자 관점, 개발자 관점을 두루 생각하게 되는 계기가 되었고, 또 의견 조율하는 과정에서의 커뮤니케이션과 기획 의도를 명확하게 전달하는 부분에서의 시행착오를 겪게 되었다. 이후 페이지 작업에 돌입해서 각자 컴포넌트별로 작업하여 나누었던..

🎯목적 : 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/ 장점 ..