캠프

post를 전송하던 와중 post 409 conflict가 생김 구글링을 하다보니 동일한 값을 넣고 회원가입 버튼을 눌러서 생긴 문제였음. 실제로 아이디, 패스워드, 닉네임을 다르게 해서 넣어보니 문제 해결 이젠 다른 문제가 생김 post를 전송하던 와중 post 401 unauthorized가 생김 마찬가지로 구글링을 하다보니 위와 동일한 문제? 줄바꿈 문제였다.... 또 nav에서 오류가 나서 살펴보니, useContext();안에 아무것도 넣어주지 않아서 문제가 생기는 것이었다. 그러면 useContext안에는 무엇을 넣어야할까? 살펴보니 UserContext라는 파일을 만들고 임포트 한 뒤에 넣어줘야했다. 그러면 UserContext안에는 무엇이 들어갈까? UserContext에 항목을 넣어주니 ..

supabase연결하는 작업을 진행했다. (사실 어제 진행했어야 하는 거지만,,,) notion에 나온대로 코드를 따라 쳤더니 supabaseUrl is required 이라는 오류문구가 떴다. supabase에 대해 잘 모르는 나는 무엇이 문제인지 구글링을 진행했지만, 아무리 진행해봐도 env과 관련있다는 것밖에 알아내지 못했다. 그러던 와중 이전에 팀원 중 한 분이 supabase연결과 관련해서 질문했던 것이 생각나 찾아봤고 역시나 내가 파일 하나를 만들지 않아서 일어난 문제였다.작업 파일 제일 상단 루트에 .env 파일을 만들어서 넣고 supabaseClient작업 해주신 분이 더 보내주신 코드를 그곳에 붙여넣는 것이었다.그리고 노션을 보며 코드를 따라치고 어떤 부분이 어떤 역할을 하는지 이해했다...

sidebar 앞서 superbase의 데이터를 가져오기 전에 내가 알아야 한는 것 2가지가 있었다. 바로 useEffect과 superbase인데, 큼,,,,안타깝게도 2차시에는 공부한 것이 별로 남아있지 않다,,,,코드더보기import React from 'react';import styled from 'styled-components';import { useNavigate, Link } from 'react-router-dom';import logo from '../img/logo.png';import '../css/main.css';const SIDE_CONTAINER = styled.div` position: fixed; height: 100%; background-color: #fea10..

서론뉴스피드를 만들기 전 개인 과제를 명시된 조건에 맞춰서 기능들을 구현하는 것을 진행하였다.아직 나는 모르는 것도, 배운 것도 많이 없기에 막막했지만, 기존의 개인 프로젝트를 따라가는 것이라고 생각했기 때문에 이전에 했던 것들을 바탕으로 진행하였다. 페이지 이동 기능은 그 자리에서 처음으로 구현하는 기능이었는데, 예제를 보며 진행하니 생각보다 수월하게 진행되었다.간단하게 react-router-dom의 useLocation 을 이용하여 구현하는 것이었다.import React from 'react';import MOCK_DATA from '../mock';import '../css/main.css';import { useNavigate, useLocation } from 'react-router-dom..

하.................. 시작하기 앞서, 작성해둔 글이 다 날라갔기에 작성해둔 것 중에서 중요하다고 생각했던 부분들만 정리할 예정이다.React 시작하기리액트 파일을 만드는 방법은 간단하게 2가지가 있다. CRA와 VITE인데, 우린 여기서 VITE를 사용할 것이다.왜냐하면 만들어지는 속도도, 용량도 VITE가 낫기 때문이다. yarn create vite 파일명 --template reactcd 파일명yarnyarn dev (vs code 터미널에서) 이 순서로 명령어를 입력해주면 된다.컴포넌트 컴포넌트를 통해 UI를 재사용이 가능한 개별적인 여러 조각으로 나누는 것이다. 개념적으로 js함수와 유사하다. 리액트에서 컴포넌트를 표현하는 방법 1. 함수형 컴포넌트 정말 쉬운 컴포넌트로, 사용을 ..

화살표 함수 화살표 함수에서 리턴문이 한 줄이라면 리턴과 중괄호를 없애도 된다. 콘솔 로그를 돌리기 위해서는 리턴과 중괄호를 넣은 상태로 돌려야한다. 조건 연산자 = 삼항 연산자 if, else문을 좀 더 간결하게 하기 위해 사용. 조건문 ? 참 : 거짓  이렇게 사용한다. 단축평가 논리 연산자(||, &&)를 활용해서 로직들을 단축하는 것. 1. 논리합연산자( || ) falsy : false, 0, "", null, undifined, NaN 이 외의 것들은 truthy 마찬가지로 if else문을 더 간결하게 사용할 수 있다. if (!user.name){ return "신원미상"};이게 너무 길어서 위 코드가 들어있는 함수의 리턴에 return user.name || "신원미상";이렇게 사용할 수..