분류 전체보기77 React] 모바일 청첩장 만들기 1 ❓ 발생한 이슈/고민 15년 지기 친구의 결혼을 기념하여 모바일 청첩장을 만들어주려고 한다. 청첩장 사면 그냥 주는 모바일 청첩장을 만들려는 이유는 모바일 청첩장은 단순해 보여도 의외로 여러 가지 기능이 들어간다. (캐러셀, 지도 api, 꽃잎 흩날리는 애니메이션, 캘린더, 디데이 카운트 다운, 계좌번호 복사, 메시지 보내기, 전화 걸기, 방명록 CRUD 등..) 되게 얕봤는데 마냥 간단하지만은 않다는 거~그래서 개인적으로 도전해 볼 만한 콘텐츠라고 판단되었다. 💡 해결과정 먼저 구성을 생각해야 하지 않겠는가. 늘 그랬듯 들어갈 내용과 와이어프레임을 설계해 주었다. 기획에 앞서 여러 가지 모청 샘플을 보고 어떤 내용이 들어가야 하는지, 어떤 식으로 구성되어 있는지 파악했는데 대체로 이런 식이었다. 컨텐츠.. 2024. 1. 16. [WIL 2023.08.20] 내배캠 14주차 📝 Situation(상황): 이번주 목표 최종프로젝트 아이디어 기획 기술스택 선정 팀 컨벤션 정하기 와이어 프레임 구상 👀 Task(임무): situation 중 문제들 의견 충돌 생각보다 오래 걸리는 기획단계 🔍 Action(접근방법): 해결시도 자신의 의견에 대한 근거를 바탕으로 팀원에게 설명 어피니티 다이어그램을 통해 추상적이던 개념을 구체화 프로젝트 구조 및 사용자 플로우 설정 📃 Result(결과): action 후 성과 다이어그램을 활용하여 시각적인 자료로 한눈에 확인이 가능해졌다. 2023. 8. 20. [TIL 2023.08.16] 최종 프로젝트 시작! ❓발생한 이슈/고민 최종 프로젝트 주제선정 및 기획 팀 컴벤션, 기술스택 선정, Ground Rule 정하기 💡해결과정 소개팅 어플을 벤치마킹 한 개발자 매칭 서비스를 만들기로 하였다. 사용자의 정보 카드 (자기소개, 깃헙 레포지토리 리스트, 자랑하고픈 코드 등)을 보고 마음에 안 드는 사람은 좌우로 스와이프 해서 카드를 넘겨서 없애고 마음에 드는 경우 하트를 눌러 매칭을 신청하는 방식 팀 컨벤션의 경우 타입스크립트 / 네이밍 / css 작성 순서 / 컴포넌트 내부 코드 작성 순서 / 커밋 컨벤션에 대한 정의. 사용할 기술 스택은 TypeScript NextJS React-Query Zustand Emotion Supabase 를 사용하기로 결정했다. 🧐궁금점과 부족한 내용 목적성에 대한 고민으로 팀원들.. 2023. 8. 16. [WIL 2023.08.13] 내배캠 13주차 📝 Situation(상황): 이번주 목표 둘러보미 페이지 만들기 📓 Point(정리): 이번주 요약 최종 프로젝트 전 마지막 팀 프로젝트를 시작했다. 외부api 선정부터 꼬여서 다사다난했던 일주일이었던 듯... 카카오맵에 경로를 그리는 것이 상당한 시련이었다. 나는 다른분들 api 가져오실동안 회원가입, 댓글, 페이지 상단 이동, 내정보 수정, 에러페이지 등등 유저상태 관리와 동작에 주로 작업했다. 그리고 css작업 쫌쫌따리.. 상당히 힘들었던 한주 였던듯 하다. 2023. 8. 13. [TIL 2023.08.10] 리액트 타입스크립 댓글 수정 및 삭제 ❓발생한 이슈/고민 댓글 추가 및 리스트만 표시되는 상태에서 댓글 수정, 삭제 기능을 맡았다. 해결해야 할 과제는 '가나다라마바사'가 아닌 유저 닉네임이 들어가도록 수정 본인이 쓴 댓글만 '...' 버튼 보이게 하기 댓글 삭제 기능 추가 댓글 수정 기능 추가 댓글작성 시간 추가 isError 설정 ...버튼 클릭시 왼쪽으로 드롭다운 창 표시 (드롭다운 창 내부는 수정과 삭제)" 작성 댓글 유저 닉네임 옆에 프로필 이미지 보이도록 수정 💡해결과정 '가나다라마바사'가 아닌 유저 닉네임이 들어가도록 수정 const { user } = useUserStore(); export type CommentType = { // ... writerEmail: string; } // ... const onSubmitComm.. 2023. 8. 10. [TIL 2023.08.09] 회원가입 프로필 이미지 저장 오류 ❓발생한 이슈/고민 파이어베이스 회원가입 기능을 구현했는데 입력필드는 프로필 이미지, 이메일, 비밀번호, 비밀번호 확인, 닉네임 5가지이다. 그런데 프로필 이미지가 파이어베이스 스토리지에 저장은 되는데 이미지 속성이 png, jpg 등이 아니라 application/octet-stream 유형으로 나오는 것. 심지어 모두 9바이트 사이즈인 것을 보면 그냥 빈문서가 저장되는것 같아보였다. 문제가 되었던 코드 // 회원가입 함수 로직 const onSubmit = async (values: unknown) => { const data = values as SignUpFormData; try { const userCredential = await createUserWithEmailAndPassword(auth.. 2023. 8. 10. [TIL 2023.08.08] 심화 프로젝트 둘러보미 / 회원가입 만들기 ❓발생한 이슈/고민 Ui Library로 Ant Design을, 회원가입 form 유효성 검사 수단으로 react-hook-form을 사용하려고 했었는데 이 부분에서 자꾸 이해할 수 없는 오류가 생겼다. TS2769: No overload matches this call. Overload 1 of 2, '(props: PolymorphicComponentProps): Element', gave the following error. Type '(e?: BaseSyntheticEvent | undefined) => Promise' is not assignable to type '(values: unknown) => void'. Types of parameters 'e' and 'values' are inco.. 2023. 8. 8. [TIL 2023.08.07] 심화 프로젝트 둘러보미 ❓발생한 이슈/고민 심화 프로젝트 주차가 왔다. 이번에는 필수 구현 기능이나 주제, 기술 스택에 제약이 없는 대신 팀원들끼리 충분히 상의해서 어떤 서비스를 만들 것인지, 그에 따른 기술스택은 어떤 것을 사용했으며 그 선정 이유가 확실해야 한다. 또한 발생한 오류에 대한 트러블 슈팅 등을 꼼꼼히 기록할 것! 우리 조는 처음에 한국에 방문한 외국인들을 위한 영문번역 된 음식 소개 및 주변 식당 추천 웹을 만드려고 하였다. 💡해결과정 처음에 기획했던 서울얌(SeoulYum)이다. 나름 아이디어도 괜찮고, 목적성과 구성이 분명해서 비교적 빠르게 프로젝트 개요 및 와이어프레임, API 명세, 기능, 역할 등을 다 작성하고 나눴다. 이제 프로젝트 초기설정 하고서 작업 시작하려는데! 문제가 발생했다. 쓰려고 했던 A.. 2023. 8. 7. [WIL 2023.08.06] 내배캠 12주차 📝 Situation(상황): 이번주 목표 기존에 만들었던 투두리스트를 TS를 이용하여 리팩토링 한다. Next.js 학습하기 👀 Task(임무): situation 중 문제들 기존에 만들었던 투두리스트를 TS를 이용하여 리팩토링 한다. 정적 이미지 파일 사용하기 react-router-dom 사용하기 redux 사용하기 🔍 Action(접근방법): 해결시도 정적 이미지 파일 사용하기 원래 자바스크립트 환경에서는 export { default as all } from "./all.png"; export { default as culture } from "./culture.png"; export { default as game } from "./game.png"; 이미지 폴더 안에 index.js 파일을 .. 2023. 8. 6. [TIL 2023.08.04] Next.js 미니 영화 앱 만들기 💻오늘 배운 내용 Redirect and Rewrite next.config.js Next.js에서 커스텀 설정을 하기 위해서는 프로젝트 디렉터리의 루트(package.json 옆)에 next.config.js 또는 next.config.mjs 파일을 만들 수 있다. -next.config.js는 JSON 파일이 아닌 일반 Node.js 모듈- Next.js 서버 및 빌드 단계에서 사용되며 브라우저 빌드에는 포함되지 않는다. Redirects (URL변경됨) Redirect을 사용하면 들어오는 request 경로를 다른 destination 경로로 Redirect할 수 있다. Redirect을 사용하려면 next.config.js에서 redirects 키를 사용할 수 있다. redirects은 sourc.. 2023. 8. 4. [TIL 2023.08.03] 클린코드에 대하여 💻오늘 배운 내용 "유지보수 하기 쉽게 코드를 작성하고 코드에 의도를 담아라. 6개월 뒤에 그 코드를 다시 보는 사람은 아주 높은 확률로 너다." -로버트 마틴- 클린코드? 유지보수와 디버깅에 용이하고 준수한 성능과 명확한 의도를 가진 코드 코드에 의도를 담고, 그 의도를 다른사람으로 하여금 납득할 수 있게 하는 것 단순히 동작하게 작성하는 것에서 남이 봐도 이해할 수 있도록 작성 코드 컨벤션 팀원 모두 같은 코드를 작성할 수 있게 한다. (한 사람이 짠 코드처럼 느껴지게 하는데에 목적) 사람에 의존적이지 않고 규칙에 의존적인 코드를 짜게 되고 모르는 부분의 코드도 빠르게 파악할 수 있게한다. 코드, 컨벤션만 보고 어떤 의도의 코드인지 파악하기 쉽게 된다. camelCase kebab-case snake.. 2023. 8. 3. [TIL 2023.08.02] Next.js 기본 개념 💻오늘 배운 내용 Library vs Framework 라이브러리와 프레임워크의 주요 차이점은 "Inversion of Control"(통제의 역전)이다. 라이브러리에서 메서드를 호출하면 사용자가 제어할 수 있다. 그러나 프레임워크에서는 제어가 역전되어 프레임워크가 사용자를 호출한다. 라이브러리 사용자가 파일 이름이나 구조 등을 정하고, 모든 결정을 내림 => React 프레임워크 파일 이름이나 구조 등을 정해진 규칙에 따라 만들고 따름 => Next 즉, React와 Next.js의 렌더링 프로세스 차이를 비교하자면.. - React: 주문을 받고 음식을 만들기 시작하는 식당. - Next.js: 음식을 미리 만들어서 바로 내놓는 식당. Next.js nextjs는 React로 만드는 서버사이드 렌더링.. 2023. 8. 2. 이전 1 2 3 4 ··· 7 다음
