내일배움캠프/Today I Learned47 [TIL 2023.08.16] 최종 프로젝트 시작! ❓발생한 이슈/고민 최종 프로젝트 주제선정 및 기획 팀 컴벤션, 기술스택 선정, Ground Rule 정하기 💡해결과정 소개팅 어플을 벤치마킹 한 개발자 매칭 서비스를 만들기로 하였다. 사용자의 정보 카드 (자기소개, 깃헙 레포지토리 리스트, 자랑하고픈 코드 등)을 보고 마음에 안 드는 사람은 좌우로 스와이프 해서 카드를 넘겨서 없애고 마음에 드는 경우 하트를 눌러 매칭을 신청하는 방식 팀 컨벤션의 경우 타입스크립트 / 네이밍 / css 작성 순서 / 컴포넌트 내부 코드 작성 순서 / 커밋 컨벤션에 대한 정의. 사용할 기술 스택은 TypeScript NextJS React-Query Zustand Emotion Supabase 를 사용하기로 결정했다. 🧐궁금점과 부족한 내용 목적성에 대한 고민으로 팀원들.. 2023. 8. 16. [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. [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. [TIL 2023.08.01] 자바스크립트로 만든 투두리스트 타입스크립트로 바꾸기 ❓발생한 이슈/고민 지난번에 만든 투두리스트를 타입스크립트로 고쳐보았다. 고려해야할 사항은 타입 스크립트 환경에서 정적 이미지 파일 사용하기 react-router-dom 사용하기 redux 사용하기 💡해결과정 정적 이미지 파일 사용하기 원래 자바스크립트 환경에서는 export { default as all } from "./all.png"; export { default as culture } from "./culture.png"; export { default as game } from "./game.png"; 이미지 폴더 안에 index.js 파일을 하나 생성해서 export해서 사용할 수 있었다. 그런데 이걸 타입스크립트로 하려하니 빨간줄이 쫙쫙 그이면서 난리가 난 것. 이럴때에는 /src/@ty.. 2023. 8. 1. [TIL 2023.07.31] 타입스크립트 generic 💻오늘 배운 내용 Generic 타입을 함수의 파라미터처럼 사용한다. (선언 시에는 타입 파라미터만 적어주고, 생성하는 시점에 사용하는 타입을 결정) 함수의 인자로 어떤 타입이 들어갔고 어떤 값이 반환되는지는 알 수 없을 때 유용하다. 예시코드 function getSize(arr:number):number{ return arr.length; }; const arr = [1, 2, 3]; getSize(arr); //3 getSize라는 함수가 있고, 호출 시 인자로 숫자배열을 넣어준다고 치자. 파라미터의 타입은 넘버, 함수의 타입도 배열의 길이를 반환하기 때문에 넘버가 된다 하지만 여러 형태의 배열에서 쓰인다면 어떨까? function getSize(arr : number[]): number { ret.. 2023. 7. 31. [TIL 2023.07.28] 타입스크립트 객체 지향 프로그래밍 💻오늘 배운 내용 클래스 객체를 만들기 위한 틀(template) 객체들이 공통으로 가지는 속성(attribute)과 메서드(method)를 정의 - 속성: 객체의 성질 - 메서드: 객체의 성질을 변화시키거나 객체에서 제공하는 기능들을 사용하는 창구 ❓객체: 클래스를 기반으로 생성. 클래스의 인스턴스(instance) 사용예시 class Person { name: string; age: number; constructor(name: string, age: number) { this.name = name; this.age = age; } sayHello() { console.log(`안녕하세요! 제 이름은 ${this.name}이고, 나이는 ${this.age}살입니다.`); } } const person.. 2023. 7. 31. [TIL 2023.07.27] 헷갈리는 용어들 개념 정리 (절차적 프로그래밍 vs 객체지향 프로그래밍 / 정적언어 vs 동적언어 / 함수 vs 메서드 / Parameter vs Property vs 인자 vs 생성자) 🧐궁금점과 부족한 내용 오늘따라 공부하다가 유독 용어가 헷갈리는 게 많았다. 요것들은 나중에 따로 포스팅 해둘 필요가 있을 듯 절차적 프로그래밍(PP) vs 객체지향 프로그래밍(OOP) 절차적 프로그래밍(Procedural Programming) 객체지향 프로그래밍(Object-Oriented Programming) 정적언어 vs 동적언어 정적언어 = TypeScript 작성자가 소스 코드를 보고 변수 타입을 직접 작성하는 언어이다. 정적타입 언어에는 C, C#, C++, Java 등의 언어가 있고, 이들 언어는 변수에 들어갈 값의 형태에 따라 자료형을 지정해주어야 한다. 컴파일 시에 자료형에 맞지 않은 값이 들어있으면 컴파일 에러가 발생한다 동적언어 = JavaScript 코드를 실행할 때 알아서 변수.. 2023. 7. 27. 이전 1 2 3 4 다음
