스파르타 내배캠 TIL

구글이 제공하는 클라우드 기반 NoSQL 데이터베이스인 Firebase를 이용해서 백엔드 구축 없이 핵심 기능 CRUD를 사용해보자!

flex-direction, justify-content, align-items 속성만 많이 사용했었는데, 새로운 속성들을 알게 되었다!출력 순서를 변경할 때 사용기본값은 0이고, 작은 값이 있는 요소부터 출력한다음수도 가능개별 요소에 적용할 수 있는 속성align-i

와이어프레임 제작헤더 제작팀원 별 프로필 동적으로 구현 profile.js추가 스타일링 작업팀원들의 정보가 담긴 객체를 members 변수에 저장한다.mbti, 강점, 태그, 블로그, 깃허브, 한마디 정보를 저장한다블로그 정보는 없을 수도 있다url 끝에 paramte

오늘 대망의 팀 소개 페이지 발표날이 다가왔다.이번주 월요일(04/15)부터 진행된 팀 소개 페이지!!튜터님의 피드백을 정리하여 다음부터는 피드백 내용을 잘 지킬 수 있도록 하자 😻깔끔한 디자인깔끔한 코드코드양 ↓각 페이지 별 필요한 라이브러리만 다운로드 (jquer

오늘은 Javascript 문법 강의를 봤다. 변수, 데이터타입, ... 까지 봤다. 보다가 궁금한 점이 생겨 검색해 본 것들을 정리해보자! substr() vs substring() vs slice() 문자열을 자르는 방법으로 substr과 slice 함수를 배웠

오늘은 ES6 문법들과 일급 객체로서의 함수, 자료구조 Map과 Set과 더불어 각 데이터 타입 별 메모리 저장 방식에 대해 알아보았다. 이 글에 정리할 내용은 메모리 저장 방식이다. 이것은 이론적 개념으로 잘 사용하진 않지만 알아두면 좋은 부분이므로 간단하게 정리해

오늘은 강의 듣기가 너무.. 싫어서 힘들어서개인 과제만 진행했다.맨날 flex만 사용해왔어서 카드 리스트도 flex로 구현했는데, space between을 이용하여 구현하니 마지막 줄의 카드가 꽉 채워져 있지 않을 때자꾸 이런식으로 됐다. 하지만 내가 원했던 레이아웃

변수는 메모리에 어떤 방식으로 저장될까?메모리에 할당되는 방식은 변수의 데이터 타입에 따라 나뉜다.데이터 타입에는 두 가지가 있다. 기본형과 참조형!기본형에는 우리가 자주 사용하는 number, string, boolean, null, undefined, Symbol이

실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다.함수가 호출되면, 콜스택에 실행 컨텍스트가 push 된다.함수가 종료되면, 종료되면 콜스택으로부터 pop 된다.최상단에 있는 컨텍스트가 활성화된 컨텍스트이다.가장 아래에는 항상 전역 컨텍스트가 담긴다.실행 컨텍스트는

오늘은 콜백지옥에 대한 정리를 해보았다.콜백지옥이 무엇인지와 콜백지옥을 해결하기 위한 방법인 비동기 작업의 동기적 표현 3가지 'Promise, Generator, async/await'에 대해 알아보았다.Promise와 async/await는 좀 접해봤는데, Gene

오늘은 영화 검색 사이트 과제 해설 영상과 튜터님이 해주신 내 과제에 대한 피드백을 바탕으로 리팩토링과 버그픽스를 진행하였다.짜잘한 커밋부터 대공사까지 다양한 커밋들 허허허강의를 들으며 알게된 것들이 좀 있어서 정리해보자~!나는 media-query를 이용하여 여러 줄

조금 늦은 TIL ^ 0 ^ git switch git checkout 브랜치명으로 브랜치를 변경하는 방법 대신 git switch 브랜치명을 사용할 수도 있다는 것을 알게 되었고, 사용해보았다. 새로운 브랜치를 만듦과 동시에 그 브랜치로 이동하기 위해서는 원래 g

맡은 기능이었던 영화 검색 query의 유효성 검사 구현을 완료하고, 깃 협업을 잘하기 위해 브랜치 룰을 설정했다.settings > branches 에 들어가서Add branch protection rule 버튼 클릭!나는 Default branch인 dev로 설정해

오늘은 영화 검색 팀 프로젝트에서 추가 기능인 영화 정렬을 구현했다.라디오 버튼을 만들어준다. css는 기존에 존재하던 버튼이랑 똑같은 것을 사용했다.option 태그는 css가 잘 안 먹어서 열 받는 것 같다..정렬 기준은 4개로 잡았다.switch 문과 sort 함

오늘은 영화 장르 필터를 구현했다. 구현 방법

기존에는 리뷰 작성 시 관람평에 대한 비속어 검사와 아이디 검사만 존재했었다.리뷰 수정 시에도 관람평에 대한 유효성 검사를 하도록 함영화 별로 리뷰 개수 카운트한 후, 리뷰 없을 시 메시지프롬프트 창에서 취소 누르는 경우 바로 returndev 브랜치를 파서 진행한 프

오늘은 새로운 팀원들과 친해지는 시간을 가졌다. 각자 팀원 카드를 만들고 확인하며 스몰토크를 하다보니 뭔가 엄청 가까워진 기분이다 ㅎ\_ㅎ..그리고 어쩌다보니 챌린저라는 이유로 냅다 리더가 되어버렸다... 하지만 오히려 좋아..! 저번 팀에서 아쉬웠던 부분을 채워봐야겠

오늘 알게 된 것 ^0^함수에서도 optional chaining(?.)을 쓸 수 있었다.바로 이런 식으로..! function?.()Javascript에서 비동기 작업에 대해 배웠다.내가 Promise에 대해서는 약간 모호하게 알고 있었던 것 같은데 이제! 좀 확실히

오늘 배운 것 1. 리액트는 라이브러리 리액트가 프레임워크가 아니라 라이브러리라니!!

오늘은 투두리스트 추가 기능 좀 구현했다커서에 우파루파 추가했다 ㅎㅎㅎ엄청 귀여운데 간단한 작업이다커서 이미지 url을 넣어주면 된다 ㅎㅎㅎ근데 너무 큰 이미지를 넣으면 안 나오니 주의!! ⚠️챌린지 수업 과제를 하는데간단할 줄 알았던 작업이내 맘대로 되지 않고...s

useState를 이용해서 coord를 지정해주고useEffect를 다음과 같이 작성했다handleKeyDown은 setCoord 함수를 이용하여 좌표를 옮겨주는 함수였다.그런데, 쉬울 줄 알았던 이 과제가... coord가 계속 같은 값이 나오면서 어려워졌다.튜터님이

// 잔디는 useMemo를 사용하여 리렌더링을 막는다. 컴포넌트를 분리하는 이유 재사용 응집성 / 가독성 높이기 불필요한 리렌더링 막기 (state가 꼭 필요한 곳에 있도록) 피카츄는 동적이고 앱은 정적인데 앱에서 모든 것을 처리하면 최상단인 앱이 계속 리렌더링

오늘은 알고리즘 심화반 과제인 FixedArray 구현을 완료했다.생성자와 push, pop, getLength, stringify 함수를 구현했다.잘 작동하니 기분이 좋았다.딱히 막히는 부분은 없었는데throw Error() 랑 throw new Error() 가 둘

오늘은 강의 3개? 4개? 를 듣고챌린저 반에서 스타일링 강의와 Redux 강의도 들었다. (Redux Toolkit은 아님)플러스로 국취제 상담과 서류 전형 작성 방법 영상 강의까쥐 들었다~오늘 정리한 것은 총 3가지이다.스타일링 방법 중 하나인 Styled Comp

오늘은 하루종일 가계부? 과제만 했다.하면서 발생한 오류가 있는데 정말 쉬우면서 찾기 어려웠던 오류였다... (상상도 못했다 🥺) 결국 구글링을 했더니 해결됐다.입력값을 입력하면 1번만 입력되고 바로 focus가 풀려버리는 문제가 발생했다. console에는 Inpu

오늘도 역시 cashbook 과제 만들기 킵고잉~ 했다과제 필수 요구사항에 Input을 Ref로 구현하라고 되어있었다.나는 항상 Input의 값을 state로만 관리했었기 때문에 이게 무슨말이지...🥺 했었는데value 값을 ref로 관리하라는 말이었다React에 제

RTK에 대해 정리하였다.

useContext도 하나의 전역상태관리 방법이다.리액트에 내장되어있다.createContext를 이용하여 Context를 생성한 후 export 한다.상태를 사용할 컴포넌트들의 상위 컴포넌트에서 <Context.Provider>를 만들어준다.value 속성에 C

Zustand에 대해 정리하였다

React에서 서버로부터 정보를 받아오는 방법인 fetch와 axios를 배웠다.baseURL을 설정할 수 있어서 반복적으로 host를 작성할 필요가 없다.인스턴스화 해서 사용할 수 있다.인터셉터를 사용할 수 있다.자동으로 JSON을 JS 객체로 변환해 준다.HTTP

컴포넌트 내에서 변경 가능한 값이 필요하며 그 값의 변화에 따라 리렌더링될 때 사용하는 훅컴포넌트의 생애 주기 또는 데이터의 생애 주기에 따라 특정 코드를 실행시키고 싶을 때 사용하는 훅useEffect: 화면이 실제로 업데이트 된 이후에 비동기적으로 실행이 되는 특징

Supabase 안정성이 높은 관계형 데이터베이스 (Firebase는 NoSQL) 실시간 기능 지원 확장성, 보안, 오픈소스 커뮤니티 BaaS (Backend as a System) 클라우드 기반 백엔드 시스템. 백엔드 시스템 관리가 필요없으므로 프론트에 집중할 수

오늘은 계속해서 뉴스피드 프로젝트 완성을 위한 기능 구현을 했다.redux를 이용한 로그인 상태 여부 저장을 하였다.원래는 안에 user 값을 넣어주려 했는데, 팀원이 여부만 필요하다고 해서 그냥 그렇게 했다.하지만 좀 더 내 의견을 표출해볼 걸 아쉬움이 들었다.(나도

6월 6일은 정말 힘든 날이었다....금요일 제출 전 ppt도 만들고.. 버그 픽스도 하고... 레이아웃도 수정해드리고...새벽 7시에 참다참다 2시간 자고 일어나서...너무 스트레스 받아서 예병수 튜터님한테 갔다가 나와서 눙물이 와라랄ㄹ라라라라이런 적은 처음이라 신기

갑자기 우리 팀에서 회원 정보 수정 후에 404 에러가 뜬다는 제보가 들어왔다. 발표 얼마 안 남았었는데 ㅠㅠㅠㅠㅠㅠㅠㅠㅠ 결국 발표 때는 404 뜬 채로 은근슬쩍 넘어가게 되었다... ㅋㅋㅋ 처음에 멘붕와서 못 고쳐서 냈는데 알고보니 엄청 간단한 문제였다.vite v

웹 개발을 하면서 브라우저 동작 원리도 모른다면 안되겠죠? [코딩 알려주는 누나] 웹개발자면서 이것도 모름? | DOM과 CSSOM, 렌더링 과정를 보면서 정리해보겠습니다 ⭐ 웹 브라우저 구조 웹 브라우저 구조 사용자 인터페이스 말 그대로 브라우저의 UI이다. 웹 페

HTTP(HyperText Transfer Protocol)는 웹에서 데이터를 주고받기 위한 프로토콜, 즉 규칙이다. 클라이언트가 서버로 요청을 보내면 서버는 그에 따른 응답을 다시 클라이언트로 보내준다. HTTP Status 1xx: 정보 100 Continue

문제 로그인 화면 시작 로그인을 했을 때, 성공 시 메인화면으로 이동 메인화면에서 액세스 토큰을 확인하는 로직에서 401(Unauthorized) 에러가 떠서 로그인으로 다시 이동됨 login 성공 시 setAccessToken을 해줬는데 헤더에 Authorizati

React Query에 대해서 정리하였다

리액트는 다른 화면을 보여줄 때새로운 페이지를 로드하는 것이 아니라하나의 페이지에서 url에 따라 데이터를 렌더링 해주는 SPA(Single Page Application)이다.이를 구현하기 위해 사용하는 라이브러리가 React Router이다.App.js에 다음의 내

불변성 메모리에 있는 값을 변경할 수 없는 것 > 불변성 O : 메모리에서 값이 바로 바뀌지 않고 새로운 주소에 값을 저장한 후 그 주소를 가리키도록 함 불변성 X : 메모리에서 값이 바로 바뀜 리액트에서 불변성 유지가 중요한 이유 useState는 주소값의 변경을

항상 헷갈려왔던 개념이지만 처음 찾아봤다;; ` 같은 태그를 사용해서 작성된 노드 Text : 텍스트 Comment : ``를 사용해서 작성된 주석 등등 노드의 종류에 Element가 포함된다.

가상 DOM 가상 돔은 실제 돔은 아니지만 실제 돔 구조와 거의 유사하지만 더 가볍기 때문에 더 빠르게 조작할 수 있는 객체이다. DOM 조작 과정 인스타 그램에서 좋아요를 누른다고 가정하자. 좋아요 버튼을 누르면 좋아요 버튼이 빈 하트에서 빨간색 하트로 변하게 된다

아웃소싱 프로젝트로 만든 데이트 코스 정하기 페이지의 회고를 해보자. 내가 맡은 것은 지도 API 부분이었다. 사용자가 코스의 경로를 입력하면 지도에 바로바로 표시해주는 부분이었다. 경로를 입력하는 부분은 다른 팀원들이 맡았기에 소통이 많이 필요했다. 셀프 칭찬 기능

JavaScript + 타입컴파일 시에 타입 오류를 발견할 수 있음 + 에러 메시지가 명확함프로젝트 사이즈가 커지면 자유도 & 유연성은 독이 됨 → TypeScript는 타입을 엄격히 검사JavaScript의 SuperSet이므로 JavaScript와 완벽하게 호환in

useState useRef useContext tanstack query (1) useQuery tanstack query (2) useMutation Event Handler

throttle 일정 시간 동안 요청을 단 1번만 실행하는 것 ex. 스크롤 이벤트 debounce 일정 시간이 지난 경우에만 요청을 1번 실행하는 것 ex. 일정 시간 입력이 없는 경우에 검색되는 검색창 lodash 라이브러리를 쓰면 편하게 구현할 수 있다.

intent, size, variant prop값들에 따라 버튼의 스타일을 다르게 하고 싶은 경우 다음과 같은 방법으로 코드를 작성할 수 있다. 삼항연산자 clsx cva 여기서 cva를 이용하면 가독성 좋고 재사용성이 높은 컴포넌트를 만들 수 있다. 설치 사용법

깃 컨벤션, 코드 컨벤션, 폴더 구조, 프로젝트 주제 정하고 기능 나열해보기..! 헬스 트래커 앱 → 스트리밍 앱 + 기타 → 헬스 트래커 앱…. 돌고돌아 돌아옴 끄아아아아ㅏㅇ아악

주제를 운동 트래커?로 확정하고 와이어프레임 작성을 완료했다..! 너모 힘들엉

API 호출 시 Route Handler를 무조건 쓸지 필요한데서만 쓸지 결정하였다. 그리고 레퍼런스를 조사하였다.나는 PlanFit이라는 앱의 운동/몸무게 기록 등록 기능과 운동 분석 기능에 대해 조사하였다.또한, 리액트에서 사용가능한 토스트 라이브러리에 대해서도 조

이번 프로젝트에서 스토리북을 사용해보는 것으로 결정이 되었다!그리고 내가 맡은 기능에 필요한 API들의 명세서를 작성하였다.date나 userId를 query Parameter로 써야할지 url path로 써야할지 고민이 많이 됐다..!서기가 되었다.. 이 사람들이 자

이번 프로젝트에서 스토리북을 사용하지 않는 것으로 결정이 되었다..MVP..식단 등록 페이지 supabase 업로드까지 마쳤다..!supabase 업로드를 하면서 약간? 아니면 조금 많은? 트러블 슈팅이 있었지만 해결을 완료했다 효효효 =v=formDataroute h

supabase post 하는 부분을 tanstack query의 useMutation을 사용하는 것으로 변경했다!식단 작성 기능 PR 링크

변수 생성 단계 : 선언 -> 초기화 -> 할당 호이스팅은 코드 실행 전에 변수와 함수 선언을 실행하여 초기값을 메모리에 저장하므로 선언이 스코프(scope)의 최상단으로 올려져 실행되는 것처럼 보이는 현상을 의미합니다.이로 인해 선언 전에 사용하는 경우 오류가 발생할

https://velog.io/@15724/supabase-%ED%8A%B9%EC%A0%95-%EB%82%A0%EC%A7%9C-%EB%B2%94%EC%9C%84-%ED%95%84%ED%84%B0%EB%A7%81%ED%95%98%EA%B8%B0

supabase type supabase의 테이블 구조를 변경했다. 그 중에서 dietType 식단타입 (아침 | 점심 | 저녁)을 기존에는 '아침'처럼 text로 저장했었는데 아침 -> 점심 -> 저녁 순서로 정렬하기 위해서 number(각각 0, 1, 2)로 저장

데이터도 잘 들어오고 supabase 오류도 안 뜨는데 계속해서supabase의 데이터가 변경되지 않는 문제가 발생했다.원인은 Policy 였다. INSERT, SELECT 권한밖에 없었다.UPDATE 권한은 supabase에서 제공해주지 않아서 만들어야 했다.DELE

state를 사용하는 이유 - 리렌더링 대상 컴포넌트를 확인하기 위해서 (state 변경 === 리렌더링)state 관리 방법 - depth가 2-3인 경우 props-drilling, zustand, tanstack-query동기: 순차적으로 실행. 1 - 2 - 3

OOSIE 프로젝트를 하던 중 **`useQuery` 요청을 특정 이벤트가 발생했을때마다** 보내는 기능을 구현하고 싶었다. 정확히는, 음색 검색 Input에 값을 바꿀 때마다 음식 검색 api를 호출하고 싶었다. 내가 아는 Tanstack Query의 useQuer

https://medium.com/@kthamodaran/react-8-best-practices-folder-structure-5dbda48a69e 한달인턴 과제로 쓸 리액트 폴더 아키텍처를 좀 조사하려고 React package structure라고 검색했는데 자

Json Web TokenJson 형태의 데이터를 네트워크를 통해 서로 다른 장치끼리 안전하게 전송하기 위해서 사용header: 어떤 알고리즘으로 서명했는지 (alg = algorithm)payload: 내용signature: 서명. 서명에는 여러가지 방법이 존재함JW

axios 반복되는 throw 코드 interceptor로 분리 https://velog.io/@dishate/axios-interceptor%EB%A1%9C-401-%EC%B2%98%EB%A6%AC%ED%95%98%EA%B8%B0 근데 또 문제 401일때 log