시리즈

💪 매일 기록

1.240710 파이어베이스

신기하고 재밌다 🤨

2024년 7월 10일

2.240713 숫자 기억 게임

챗 GPT 처음 써봤는데 똑똑하다 🤗

2024년 7월 13일

3.240715 메뉴랜더링

data- 속성을 처음 써봤는데 유용하다 😨😨!! 알기 전에는 아래처럼 썼음ㅋㅋㅋㅋㅋㅋㅋㅋㅋ😅 쓰다보니 뭔가 더 깔끔하게 쓸 수 있을 거 같은데..하다보니..😶 클래스명 여러개 쓸 수 있다는 것도 (이제서야) 알게되고 유익한 하루였다!!!😣

2024년 7월 15일

4.240715 필수 리눅스 명령어

🚩

2024년 7월 15일

5.240715 Git 명령어

git initgit addgit commitgit statusgit loggit pushgit clonegit pull코드 관리 시작프로젝트 시작 전 딱 한 번만 입력정확한 경로에서 입력 (pwd 혹은 입력창 우측에서 확인)"initialized empty Git r

2024년 7월 15일

6.240716 TO DO LIST - 트러블 슈팅

TO DO LIST 에서 완료 된 목록을 DONE LIST로 옮기고 싶었는데 여기서 멘붕이..ㅠ

2024년 7월 16일

7.240716 (내가)자주 쓸 것 같은 VSCode 단축키

💤튜토리얼

2024년 7월 17일

8.240717 버킷리스트

💫버킷리스트 classList로 클래스 값을 변경하는 부분이 신기했다!

2024년 7월 17일

9.240718 null vs. undefined

null 의도적으로 값이 없다는 것을 지정해서 표현할 때 사용하는 값 undefined 코드를 실행할 때 값이 없다는 것을 확인할 수 있는 값 값이 주어지지 않은 변수는 undefined cosole.log(null == undefined); => true co

2024년 7월 18일

10.240718 복합 할당 연산자 / 증가, 감소 연산자

자주 쓰이는 연산을 좀 더 간략하게 쓸 수 있다.변수의 값을 1씩 증가/감소 시킬 때 간략하게 쓸 수 있다.

2024년 7월 18일

11.240718 return 의 두 가지 역할

1. 결괏값을 돌려줌 2. 함수의 실행을 중단

2024년 7월 18일

12.240718 옵셔널 파라미터

내 이름은 김민수이다.나이는 20살이고,미국 출신이다.내 이름은 김민수이다.나이는 20살이고,한국 출신이다.💡 옵셔널 파라미터는 선언을 할 때, 제일 뒤 쪽에 선언해줘야한다.⭕ person(name, age, country = '한국')❌ person(name, co

2024년 7월 18일

13.240719 HTTP 상태 코드 / HTTP 메소드

HTTP 상태 코드404 Not Found서버는 요청받은 리소스를 찾을 수 없습니다. 브라우저에서는 알려지지 않은 URL을 의미합니다. 이것은 API에서 종점은 적절하지만 리소스 자체는 존재하지 않음을 의미할 수도 있습니다. 서버들은 인증받지 않은 클라이언트로부터 리소

2024년 7월 19일

14.240720 변수의 scope, 유효 범위

블록문 내에서 로컬 변수->글로벌 변수 순으로 확인

2024년 7월 19일

15.240720 상수(constant)

원주율의 값은 변하지 않는 고정 값이며, 이런 값을 상수라 한다.let 대신 const로 선언해준다.처음 값을 설정해주지 않거나, 값을 재할당 하려고 하면 오류가 발생한다.이름을 지을때 변수와 구분하기 위해 대문자와 밑줄로 작성해주는 암묵적인 규칙이 있다.myNumbe

2024년 7월 19일

16.240720 switch문

if : 코드가 짧음. 범위를 만족하는 조건식을 만들 때 주로 사용. 등호 세 개를 사용해 일치 비교를 해야한다.switch : 코드가 길지만 가독성이 좋음. 특정값을 만족하는 조건식을 만들 때 주로 사용. 값들을 비교할 때 자료형을 엄격하게 구분.

2024년 7월 19일

17.240720 for 반복문 / while 반복문

초기화 부분 : 초기 딱 한 번만 실행됨 // 여기서 생성한 변수는 for문의 로컬 변수조건 부분 : true로 판단이 되면 동작부분을 실행추가동작부분 (필수x) : 동작부분을 실행 후 추가적으로 실행

2024년 7월 19일

18.240721 메소드 (Method)

다른 함수의 이름 중복을 피할 수 있다.객체에 집중해서 함수의 동작을 작성할 수 있다.사용 시 객체의 고유한 동작으로 구분할 수 있다.

2024년 7월 20일

19.240722 형 변환

1. 암시적 형 변환 의도x 자동으로 변환 2. 명시적 형 변환

2024년 7월 22일

20.240722 삼항 연산자

조건 true인 경우 반환 false인 경우 반환

2024년 7월 22일

21.240722 화살표함수

화살표 함수 ES6 신 문법신기하고만

2024년 7월 22일

22.240722 객체 생성/접근/메소드

객체 란 key와 value의 페어로 하나의 변수에 여러개의 값을 넣을 수 있다.

2024년 7월 22일

23.240722 배열 생성/접근/메소드

1\. 생성1-1. 기본 생성1-2. 크기 지정2\. 요소 접근3\. 배열 메소드3-1. push ( 맨 뒤에 요소 추가 )3-2. pop ( 마지막 요소 삭제 )3-3. shift ( 첫번째 요소 삭제 )3-4. unshift ( 맨 앞에 요소 추가 )3-5. spl

2024년 7월 22일

24.240722 배열 메소드 forEach/map/filter/find

(1) forEach(2) map기존의 배열을 가공해서 새로운 배열을 생성 항상 원본 배열의 길이만큼만 return 된다.(3) filter기존의 배열을 필터링해서 새로운 배열을 생성 (4) findfilter와 비슷하게 조건에 맞는 값을 가져오지만 첫번째 값만 반환

2024년 7월 22일

25.240723 구조분해할당 (Destructuring)

객체 안에 있는 각각의 속성들을 분해해서 변수에 할당 배열의 경우객체의 경우객체를 새로운 이름으로 할당

2024년 7월 23일

26.240723 단축 속성명 (property shorthand) / 전개 구문 (spread operator) / 나머지 매개변수 (rest parament)

단축 속성명 (property shorthand)전개 구문 (spread operator)나머지 매개변수 (rest parament)

2024년 7월 23일

27.240723 일급 객체로서의 함수

다른 객체들이 일반적으로 적용 가능한 연산을 모두 지원하는 객체.자바스크립트에서 함수는 일급 객체이며, 여러가지 방식으로 유연하게 다룰 수 있다.일반 객체와 달리 함수는 특별한 능력이 있는데 . . .❔(1) 변수에 함수를 할당(2) 함수를 인자로 다른 함수에 전달(3

2024년 7월 23일

28.240726 for...in

for...in 문을 활용하면 객체 내부에 있는 모든 프로퍼티들을 하나씩 다룰 수 있다소괄호 내부에서 특정한 변수를 만들고 in 키워드 다음에 반복될 객체를 넣어줌객체에 프로퍼티 네임이 변수에 할당 객체에 프로퍼티 개수만큼 반복 동작정수형 프로퍼티 네임객체는 정수형 프

2024년 7월 26일

29.240727 객체 Date()

// Date let myDate = new Date(); // new Date(milliseconds) let myDate = new Date(1000); // 1000 밀리초만큼 지난 객체가 만들어짐 // new Date('YYYY-MM-DD') let myDa

2024년 7월 26일

30.240728 this

여기까지는 잘 출력됨. 그러나 다른 객체에도 적용하고 싶어서 함수 외부에 분리하게 되면 다음과 같은 문제가 발생한다.user2.getFullName()가 Misun Bong이 아닌 Zzangu Shin을 출력이런 상황에서 this 가 유용하게 사용된다.함수 내의 use

2024년 7월 28일

31.240729 try...catch...finally 문

실행 가능한 코드 내에서 발생한 에러를 다룬다는 점에서 예외 처리 라고도 부른다. 출력 결과에러 전짱구에러 후❕ try 블록 내 에러가 발생한 시점 후의 코드는 실행되지 않는다. (age 출력 x)출력짱구 철수 유리 훈이 맹구 에러지롱 치타 철벽 준호 광태 미리

2024년 7월 29일

32.240730 flex

🎪 flex 게임 justify-content > 다음의 값들을 인자로 받아 요소들을 가로선 상에서 정렬 ex ) justify-content: flex-end 는 요소를 오른쪽으로 이동시킨다. flex-start : 요소들을 컨테이너의 왼쪽으로 정렬. fle

2024년 7월 30일

33.240731 모던한 프로퍼티 표기법

프로퍼티 네임

2024년 7월 30일

34.240801 옵셔널 체이닝

일반적인 객체 프로퍼티 접근법(점 표기법) 과 달리 옵셔널 체이닝 연산자(?.)를 통해 접근

2024년 8월 1일

35.240802 동기 vs 비동기

Promise async/await

2024년 8월 2일

36.240805 DOM 트리

ㅎㅎ

2024년 8월 6일

37.240806 요소 노드 프로퍼티

해당 요소를 포함한 전체 HTML 코드를 문자열로 리턴(\* 줄바꿈이나 띄어쓰기도 모두 포함)새로운 HTML값으로 교체 => 기존 선택한 요소 삭제innerHTML과 유사<HTML> 태그 부분을 제외 시킨 값만 리턴특수문자도 텍스트로 출력

2024년 8월 6일

38.240807 let, const, var

ReactJS 기초주차 let, const, var 분류방법 (1) 스코프에 따른 분류 변수는 선언위치에 따라 다른 스코프(유효 범위)를 가진다 자바스크립트의 주요 스코프 유형은 글로벌 스코프, 블록 스코프, 함수 스코프 이다. 글로벌 변수는 전체 코드에서 접근

2024년 8월 7일

39.240808 객체 복습

리액트는 변수(state)에 값을 저장(추가/수정/삭제)할 때 이런식으로 사용하지 않는다! 😨 (이거 쓰려고 또 객체 글 썼다.)=> 불변성을 유지해서 새로운 객체/배열을 생성해서 값을 변경하는 방식을 사용=> 위의 코드는 불변성이 깨진 상태

2024년 8월 8일

40.240808 reduce

배열의 각 요소에 대해서 주어진 함수를 실행하고 결과물을 누적해서 반환위의 코드를 실행하면 다음과 같이 출력된다.최초 누적된값은 배열의 첫번째 요소인 '1'로 세팅 일반값 은 배열의 두번째 요소인 '2'로 세팅 reduce는 \[배열길이 -1] 만큼 순회한다.다음은 위

2024년 8월 8일

41.240808 배열의 정렬 sort

💢 새로운 배열을 반환하는 map, filter와 달리sort는 원본 배열 내부의 값 자체를 바꿔버린다.sort 사용 전 원본 배열====>: 'Banana', 'Orange', 'Apple', 'Mango' sort 사용 배열====>: 'Apple', 'Ban

2024년 8월 8일

42.240808 Spread Operator 전개 구문

💡 배열이나 객체의 요소를 개별 요소로 확장할 때 사용.객체의 속성을 다른 객체로 복사/확장할 때 사용.Spread Operator 없이 그냥 냅다 복사하려고 하면 아래와 같은 상황이 발생한다. 불변성이 또 깨져버렸다. 😨 이같은 일을 피하기 위해 아래처럼 써줘야한

2024년 8월 8일

43.240808 rest operator

💡 rest operator 는 spread operator 와 유사spread operator 와 동일하게 ...변수명 을 사용spread operator 배열, 객체를 복사하거나 합칠 때 사용rest operator (1) 함수의 매개변수 (2) 객체 분해 할당

2024년 8월 8일

44.240809 단축 평가 (Short Circuit Evaluation)

💡 단축평가란 ? 논리 연산자를 사용하여 조건문을 처리할 때, 전체 표현식을 평가하지 않고 최소한의 평가로 결과를 도출하는 방식 (1) 논리 합 연산자 (||) 논리합 연산자 ||는 좌변의 피연산자가 falsy 값 (false, 0, "", null, undefin

2024년 8월 9일

45.240809 Modules

✔️ 모듈은 재사용 가능한 코드 조각을 캡슐화💊 하고 다른 자바스크립트 파일에서 쉽게 재사용할 수 있게 해준다.💊 캡슐화 ? 자바스크립트 모듈은 관련된 함수, 변수, 객체, 클래스 등을 하나의 파일로 그룹화하고, 이를 모듈이라 함. 기능적으로 연관된 코드들을 묶어

2024년 8월 9일

46.240809 promise, async, await

💡 async, await 비동기 처리의 현대적 패턴이다.기존의 복잡한 프로미스 체인을 간결하고 동기적인 흐름으로 작성할 수 있게 도와준다.Promise는 비동기 작업의 최종 완료 또는 실패를 나타내는 객체비동기 작업이 수행될 때 그 결과값을 나중에 받기 위한 약속으

2024년 8월 9일

47.240809 React 소개

🚨 ReactJS > UI Library인 React.js란 무엇인가 ❓ 1. 공식홈페이지에서 소개하는 React.js (1). 웹과 네이티브 UI를 위한 라이브러리 UI를 만들기 위한 라이브러리라고 소개하고 있다. (2). 공식 홈페이지 https://ko.re

2024년 8월 9일

48.240811 React 컴포넌트와 JSX

컴포넌트를 통해 UI를 재사용이 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다.개념적으로 컴포넌트는 JavaScript 함수와 유사.“props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를

2024년 8월 10일

49.240811 React Props

Propertys (속성) 에서 나온 Props모든 토글을 열고 닫는 단축키Windows : Ctrl + alt + tMac : ⌘ + ⌥ + t 부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터즉, 컴포넌트 간의 정보 교류 방법 이다.props는 반드시 위에서 아래 방

2024년 8월 10일

50.240811 React state

State란 컴포넌트 내부에서 바뀔 수 있는 값을 의미합니다.(UI(엘리먼트)로의 반영을 위해서)const name = "훈이"이 값이 바뀌어야하는 정보라면 state로 생성State를 만들 때는 useState()를 사용 (훅)const value, setValue

2024년 8월 11일

51.240812 React 컴포넌트 및 렌더링

리액트에서 개발할 모든 애플리케이션은 컴포넌트라는 조각으로 구성컴포넌트는 UI 구축 작업을 훨씬 쉽게 만들어줌UI 요소를 표현하는 최소한의 단위이며 화면의 특정 부분이 어떻게 생길지 정하는 선언체 컴포넌트를 생성하고 보여지고자 하는 UI 요소를 컴포넌트 내부에서 JSX

2024년 8월 11일

52.240813 리액트 개인과제를 마치고

2024년 8월 13일

53.240816 Styled-components

자바스크립트 코드로 CSS 코드를 작성하여 컴포넌트를 꾸미는 방식. CSS-in-JS 방식을 사용하기 위해서는 새로운 패키지 사용장점style 적용 시 조건문,변수등 다양한 로직 사용 가능📢 리액트에서 CSS-in-JS 방식으로 컴포넌트를 꾸밀수 있게 도와주는 패키지

2024년 8월 16일

54.240816 React useState 좀 더 알아보기

👽 state를 업데이트 할 수 있는 두 가지 방법?!( ) 소괄호 안에 수정할 값 대신 함수 를 넣는다.함수의 인자에서는 현재의 state를 가져올 수 있고,{ } 중괄호 안에서는 이 값을 변경하는 코드를 작성! 일반 업데이트 방식 : setState 3번 명령하던

2024년 8월 16일

55.240818 React useEffect

💡 useEffect란? 리액트 컴포넌트가 렌더링 된 이후마다 특정 작업을 수행하도록 설정할 수 있는 Hook 이다.컴포넌트가 렌더링 된 이후 실행된다. 이게 바로 useEffect 핵심 기능.어떤 컴포넌트가 화면에 보여졌을 때 내가 무언가를 실행하고 싶다면? 또는

2024년 8월 17일

56.240818 React useRef

01. useRef란? > 📚 값을 저장하고 활용하는 방법 중 하나 ( useState 랑 비슷? ) (1) useRef hook 소개 > Re-rendering과 상관없이 값을 기억하기 위해 사용되는 것 💨 자바스크립트 DOM API를 직접사용하지 않고 DOM

2024년 8월 17일

57.240818 React useContext

prop drilling의 대항마 😎useContext hook 을 통해 전역 데이터를 관리할 수 있게 되었습니다. 감사합니다.출처createContext : context를 생성useContext : context를 구독하고 해당 context의 현재 값을 읽음Pr

2024년 8월 17일

58.240818 React 메모이제이션 - memo, useCallback

2024년 8월 17일

59.240819 React 메모이제이션 - useMemo

(5) 주의사항

2024년 8월 17일

60.240819 React Custom Hooks

내 맘대로 만드는 나만의 hook 😎위 코드는 input을 구현하고 useState로 각 input의 value를 관리하는 친숙한 코드이다. 하지만, input의 개수가 증가하면 useState와 이벤트핸들러도 같이 증가하고 그로 인해 코드의 중복이 생긴다.📢 이를

2024년 8월 19일

61.240819 React Redux 1

📢 State를 공유하고자 할때 부-모 관계가 아니어도 되고, 중간에 불필요한 전달책이 필요없다! \`컴포넌트에서 컴포넌트로 State를 보내기위해서는 반드시 부-모 관계가 되어야 함조부모 컴포넌트에서 손자 컴포넌트로 값을 보내고자 할때도 \*\*반드시 부모 컴포넌트

2024년 8월 19일

62.240820 React Redux3 - payload, ducks

액션을 만드는 생성자. 액션 객체를 만드는 함수?액션객체의 value를 변경할 일이 생긴다면 어떨까 PLUS_ONE ,MINUS_ONE 이라는 value 대신 이 액션객체가 counter 모듈안에 있다는 것을 강조하기 위해서 counter/PLUS_ONE, counte

2024년 8월 20일

63.240902 supabase 와 싸워서 이겼다

스토리지 업로드가 안된다...? 그냥 무조건 폴리시 버튼 한 번 누르면 끝난다..SQL문이고 뭐고 구글링하고 머리굴리고 따로 추가할 필요도 없음.........익명으로 INSERT할 때 한 번, 회원으로 INSERT할 때 한 번 도합 두번이나 속았다.버킷이 PUBLIC

2024년 9월 2일

64.240903 supabase ,,,,

2024년 9월 3일

65.240904 팀 프로젝트를 마치고

1-1 . supabase.auth.signUp 를 사용하여 이메일/비밀번호로 회원 가입1-2. 이메일/비밀번호 외의 다른 정보를 저장하고 관리하기 위해 USER 테이블에 INSERT1-3. supabase.storage를 이용하여 업로드 한 이미지 저장1-4. use

2024년 9월 4일

66.240911 TIL 개인과제(MBTI 프로젝트) 마무리

JWT 인증서버를 사용하여 구현정해진 메소드에 따라 입력하면 로그인/회원가입이 끝난다회원가입로그인로그인 전 메뉴로그인 후 메뉴프로필 수정MBTI 테스트를 진행하고 결과를 확인할 수 있음 나의 테스트 결과 모두의 테스트 결과

2024년 9월 12일

67.240912 팀 프로젝트 몽글로드 1

✨ 카카오 지도 API지도, 유튜브, 설문조사 API 중 하나를 선택해서 아웃소싱 프로젝트를 만들어야한다.우리팀은 카카오 지도 API를 이용해 반려동물 관련 앱을 만들기로 했다.메인페이지서비스의 주요 기능 소개 및 지도 랜더링지도 검색 페이지반려동물 관련 장소 검색 및

2024년 9월 12일

68.240913 팀 프로젝트 몽글로드 2

🌏 카카오 맵 API - 선의 거리 계산하기🌏 리액트 카카오 맵 API - 선의 거리 계산하기마우스 우클릭 시, 선 그리기가 종료되고 오버레이가 뜨게 되는데 그 과정을 거치지 않고 ESC로 리셋하고 싶었다.사실 이런식으로 버튼을 달아서 저장을 할 수 있게 하고 싶었

2024년 9월 13일

69.240915 팀 프로젝트 몽글로드 3

맵에 선을 그리는 도중 이런식으로 클릭한 좌표가 겹치면이런 에러가 뜨기 시작했다. 콘솔 로그를 보니 같은 자리에 찍힌 좌표가 같은 'key'값을 가지고 있어서 생기는 오류인 것 같았다. (API 사이트에서 테스트할 때 이런거 없었는데 왜ㅠㅠ)튜터님들이 처음 프로젝트 기

2024년 9월 15일

70.240919 팀 프로젝트 몽글로드 4

컨트롤제트 사용하기 e.key === "ctrlKey" 댓츠노노 e.ctrlKey 이렇게 해야 돌아간다

2024년 9월 19일

71.240920 팀 프로젝트 몽글로드 5 - 선 색상 변경

이렇게 해서 맵으로 돌려줬더니 빨간색, 파란색 버튼만 화면에 보인다. (애국)혹시 테일윈드 문제인가 싶어서 찾아보니까, 테일윈드는 콘플라워블루 이런거 취급안한단다. 내 최애 색인데.

2024년 9월 20일

72.240923 TS - 타입스크립트란?

npm create vite@latest 프로젝트이름 -- --template react-ts정적 타입 시스템은 타입 시스템 중에 프로그램이 실행되기 전에 모든 변수와 표현식의 타입을 확인하고 고정하는 방식=> 이를 이용해 프로그램의 많은 오류를 미리 발견할 수 있다.

2024년 9월 23일

73.240924 TS - 타입을 선언하는 방법

타입은 값이 가진 프로퍼티와 메서드 등을 참조하는 방법.=> 즉, 이 값이 어떤 속성을 가지고 있는지 표현하는 방법이다.string, boolean처럼 이미 정해진 타입(원시타입) 말고도 우리가 타입을 직접 정의해 줄 수도 있다.변수 sum을 number가 아닌 str

2024년 9월 24일

74.240925 - Next.js 소개

Next.js 성능 (Performance): 서버 사이드 렌더링 (SSR) 및 정적 사이트 생성 (SSG) 기능을 제공 하여 초기 로드 시간을 단축 코드 스플리팅 및 이미지 최적화와 같은 기능으로 런타임 성능을 향상 > Next.js는 코드 스플리팅을

2024년 9월 25일

75.240926 Next.js - 주요 랜더링 패턴

전통적인 서버 사이드 렌더링 방식인 MPA로부터 프론트엔드 웹 개발이 시작되었습니다.페이지 이동 시 및 렌더링 시 깜빡거리는 현상이 있고 컨텐츠의 양에 따라서 페이지별 편차가 심해지게 됩니다. 결국에는 UX가 저하됩니다.이러한 문제 때문에 React, Angular,

2024년 9월 26일

76.241002 Next.js 개인과제 진행 01 - 트러블 슈팅

로테이션 페이지를 위해 필터를 해주려고 했는데 이상한 오류가 뜨기 시작했다.

2024년 10월 2일

77.241007 Next.js 개인과제 진행 02 - 트러블 슈팅

2024년 10월 7일

78.241010 팀 프로젝트 구단주주총회 01

새로운 팀 프로젝트의 시작 😄 시작은 항상 뭐든 설렌다. 팀프로젝트는 항상 첫날(기획)/발표전날이 제일 정신없는 것 같다. 팀프로젝트 목표 > 아래 기술을 적용하여 어느 도메인의 어느 환경에 취업을 하든 활용이 가능한 형태의 웹 애플리케이션을 개발 Next.js를

2024년 10월 10일

79.241012 팀 프로젝트 구단주주총회 03

메소드 오류가 발생했다. 원인을 찾아봤다.서버에서 허용하지 않는 HTTP 메소드를 사용하면 이 에러가 발생할 수도 있다고 한다. GET을 지원하는 것 같다. 패스!서버 설정 오류API 앤드포인트 문제URL 오류vscode에 뜬 오류로그를 보니, export쪽 문제인 것

2024년 10월 11일

80.241014 팀 프로젝트 구단주주총회 06 Image 컴포넌트 설정 에러

Image 컴포넌트를 통해 선수 이미지를 가져오려 했으나 오류 발생.https://nextjs.org/docs/messages/next-image-unconfigured-hostnext.config.js를 수정해주라고 한다.1차 수정2차 수정 \->여전히 같은

2024년 10월 14일

81.241015 팀 프로젝트 구단주주총회 07

특정 선수의 경우 서버에 이미지가 존재하지 않아서 엑박이 뜬다. 잔루이지 돈나룸마씨.....😥https://nextjs.org/docs/app/api-reference/components/imageImage 컴포넌트의 onError 속성을 사용해서, 이미지가

2024년 10월 15일

82.241018 팀 프로젝트 집밥도감 01

레시피 알려주는 서비스 🧑🏻‍🍳 레시피 안내 서비스 요리를 하고싶은데 어떻게 해야할지 모르는 사용자들을 위한 레시피 사용 API https://www.foodsafetykorea.go.kr/api/openApiInfo.do?menugrp=MENUGRP31&men

2024년 10월 18일

83.241022 Supabase 01 기본세팅

Supabase 오픈 소스 백엔드 플랫폼이다.Supabase는 복잡한 서버 관리, 확장성, 보안 등의 문제를 해결해 주어 개발자가 핵심 로직에 집중할 수 있도록 돕는다.데이터베이스 관리: PostgreSQL 기반의 데이터베이스를 제공하여 안정적이고 강력한 데이터 관리를

2024년 10월 22일

84.241024 팀 프로젝트 집밥도감 04 - 트러블 슈팅

invalid input syntax for type uuid: "28" 그게뭔데 post_id의 타입을 uuid->bigint로 바꿔주려고 하니까 또 오류남 supabase에서 외래키로 다 엮어놔서 그런가 싶어서 일단 외래키 설정한거 다 풀어줌여전히 같은 오류 나서

2024년 10월 24일

85.241026 팀 프로젝트 집밥도감 05 - 리액트 훅 폼 동적 추가

레시피 추가하기 버튼을 눌렀을 때 추가가 되긴 하지만, 추가 전에도 1개는 기본으로 있으면 한다.그럴 땐 이런식으로 폼마다 기본값을 설정해주면 된다.

2024년 10월 26일

86.241027 팀 프로젝트 집밥도감 06 - 트러블 슈팅

supabase에 요리 타입과 방식을 저장하는데 onefood면 '일품'이 들어가야하고, frying이면 '튀기기'가 들어가야 했다.하지만 DB에 저장된 값은 이렇다...! 새로 매핑을 해줘야하나, 아니면 랜더링할 때 바꿔줘야하나 고민했다.이렇게 만들어둔 부분을 그대로

2024년 10월 26일

87.241028 팀 프로젝트 집밥도감 07 - 트러블슈팅

객체 에러

2024년 10월 28일

88.241029 팀 프로젝트 집밥도감 08 - 트러블슈팅

(추한 UI 주의)지금 API 데이터에서 불러오는 건 매뉴얼마다 앞에 숫자+'.'이 붙어있는데 이걸 전부 지우고싶다.(만약 글중간에 숫자+'.'가 있는 경우에는 그대로 두기로)DB에는 일단 이런식으로 넣어놨는데 넣을 때 다시 넣어줘야할 것 같다..😁

2024년 10월 28일

89.241030 팀 프로젝트 집밥도감 09 - 트러블슈팅 (object Object 그게 뭔데)

코드를 수정하는 과정에서 일반 배열=>객체 배열로 수정하면서 이런 문제가 나타났다.참고 티스토리.text로 수정해줬더니 해결되었다 😁

2024년 10월 29일

90. 241031 팀 프로젝트 집밥도감 10 - 댓글 관련 트러블슈팅

댓글 수정 기능을 구현하는데 댓글 작성창과 같은 제출폼을 썼더니 두개가 섞이는 현상이 발생했다. 아예 코드를 새로 다 짜기에는 너무 많은 길을 (내 기준) 걸어왔다.결국 댓글 작성과 댓글 수정 제출폼을 나눠서 관리하기로 했다.기존 하나의 폼에서 관리하던 것을 두개로 분

2024년 10월 30일

91.241101 팀 프로젝트 집밥도감 11 - 트러블슈팅

상세페이지 좋아요 버튼을 작업하고, 리스트 페이지에도 붙였는데 버튼을 누르면 좋아요와 동시에 상세 페이지 안으로 이동하는 현상이 발생링크태그 안에 좋아요 버튼이 들어있는 컴포넌트가 위치해 있어서 그런 것 같았다.ndm 문서- Event.stopPropagation()전

2024년 10월 31일

92.241102 팀 프로젝트 집밥도감 12 - 트러블슈팅

https://shape-coding.tistory.com/entry/TypeScript-ReactFC%EC%97%90-%EC%82%AC%EC%9A%A9%EC%97%90-%EB%8C%80%ED%95%B4-%EC%83%9D%EA%B0%81%ED%95%B4%EB%

2024년 11월 2일

93.241103 팀 프로젝트 집밥도감 13 - 형식의 인수는 ~ 형식의 매개변수에 할당될 수 없습니다.

아마도 많이 봤을 에러 빈값을 대비해 ""를 넣어주면 끝!

2024년 11월 3일

94.241105 팀 프로젝트 집밥도감 14 - SQL 관련, Enum 키-밸류 찾기

https://atotw.tistory.com/302

2024년 11월 5일

95.241111 팀 프로젝트 집밥도감 15 - 트러블슈팅

상세페이지 특정 게시물에 들어가면 오류가 발생했다. 단서가 저것뿐이라 뭔가 헤매다가, 코멘트 컴포넌트를 주석처리하니 잘 접속이 되는 것을 발견하고 코멘트 컴포넌트에서 원인을 찾기로 한다.뭐가 null이라는걸까? 해당 게시물에 달린 댓글들을 테이블에서 찾아보기로 한다.노

2024년 11월 11일

96.241112 팀 프로젝트 집밥도감 16 - 타입 에러

https://medium.com/@yujso66/%EB%B2%88%EC%97%AD-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%97%90%EC%84%9C-%EC%A0%84%EB%AC%B8%EA%B0%

2024년 11월 12일

97.241118 팀 프로젝트 집밥도감 17 - supabase 랜덤 행 가져오기

supabase에 SQL 에디터 켜고 작성해준다. 그냥 냅다 쓰고싶었는데 안됐음 ㅠ 참고 사이트 : https://community.weweb.io/t/query-random-item-s-from-database-supabase/1159가져와서 쓴다 깔끔해졌다

2024년 11월 18일