내배캠TIL

본 캠프 개강.팀 소개 페이지를 만드는 미니 프로젝트 과제가 주어졌다.Git 오랜만에 사용하려니 헷갈리는 부분도 있어서 구글링의 도움을 받았다.앞으로 매일 입력할 것들... 아직 캠프에서 다루지는 않았지만 미리 정리브랜치 생성, 전환

강의 정리개발 단계 정리하루 회고 (프로젝트를 하는데 소통 오류가 있었다. 느낀 점과 개선 점 등)문제 해결 과정 (권장!!! 꼼꼼하게 이렇게 작성하는 게 좋음)원인, 가설 세우기, 문제 파악, ...느낀 점, 개선 방안프로젝트 회고!!! 회사에서 많이 본다. 중요Co

id값을 가리키는 a태그를 만든다. a태그 클릭 시 가리키는 곳으로 이동.자바스크립트 사용해서 모달 띄우고 닫기제이쿼리 사용해서 외부영역(배경) 눌러도 모달이 닫히도록 하기

기존의 코드를, 각 프로필 카드 클릭 시 해당 팀원의 모달이 나오도록 변경.팀원들과 함께 각자 코드 소개, 어려웠던 점, 해결한 과정을 나누어 정리했다.내가 작성한 부분이 아니면 사실 같은 프로젝트 안이어도 코드를 전부 이해하기 어려운데, 이렇게 코드 설명을 듣고 공부

회고를 바탕으로, 다음 스텝으로 나아가보세요.실제로 많은 회사들이 프로젝트가 종료될 때마다 회고를 진행하고, KPT회고 방법론을 아주 많이 적용한답니다!공부한 것, 배운 것 보다는 "협업"을 하며 느낀 점, 앞으로 더 잘 하고 싶은 점과 관련된 이야기를 많이 나누어주시

JavaScript 문법 종합반 1주차 3항 연산자 > 스코프. 전역변수 / 지역변수 스코프: 영역 전역변수: 전체영역에서 선언 지역변수: 함수 내부에서 선언

문제 1. > 풀이 문제 2. > 풀이 이번주 목표 자바스크립트 종합반 1차례 완강 수요일: 과제 러프하게 끝내기 목요일: 과제 기능 끝내기 금요일: 과제 보완해서 미리 제출

2015년도에 대규모 문법 향상이 일어남.화살표 함수, let과 const 등의 문법 변경이 있었다.이전에는 var만 사용됨let=변수, const=상수원래는 함수를 선언하는 방법이 두 가지가 있었다. 함수 선언문과 함수 표현식.화살표 함수삼항 연산자 구조conditi

함수 형태 알고리즘 문제 풀이 방법 뼈대를 생각해보고 작성주석으로 로직을 단계적으로! 적자. 한번에 전부 생각하는 것은 지양로직 하나씩 코드 안에 붙여보기잘 모르겠으면 연습장, 노트에 손으로 필기하는 등의 방법도 활용문제 1.주어진 문자열을 뒤집어서 반환하는 함수를 작

1) Top 20 영화 정보를 TMDB의 오픈 API를 통해 불러와서 카드 형식으로 배치들어가야 하는 내용: 제목, 소개, 평점, 포스터 이미지2) 제목 검색창 구현3) 카드 클릭 시 영화의 id 값이 alert 창으로 뜨도록 구현https://www.them

필수 기능은 저번주에 마쳤기 때문에, 디자인 수정과 추가적으로 하고 싶었던 기능을 구현해보려 노력했다.하고 싶었던 것: 별점을 숫자(8.56/10)가 아닌 별 다섯 개로 표현하기검색을 통해서 방법을 찾아보고 챗지피티도 사용해봤는데 구현을 아직 못 해서 더 찾아봐야 할

보완할 점 (1대1 피드백)1\. querySelector 중복 제거2\. 객체 구조 분해 할당 사용해 코드 간결화3\. 별점마다 다른 파일을 만드는 방법 제안1\. querySelector 중복 제거똑같은 querySelector여도 function마다 새로 작성해야

영화 카드 인기순, 제목 오름차순, 최신 개봉순, 평점 오름차순 정렬.addEventListener("change", (event) => {})선택 옵션이 변경될 때 발생하는 이벤트. 사용자가 입력 폼의 요소(예: input, textarea, select)의 값을 변

우리가 한 세팅: 코드리뷰를 두 명 이상이 작성해야 merge 할 수 있도록 설정레포지토리 Settings -> Branches -> Branch protection rules Add rule우리는 처음 시작할 때 dev 브랜치에서 merge를 하도록 정했고, 이번에

1. JavaScript 문법 종합반 - Map Map, Set의 목적: 데이터의 구성, 검색, 사용을 효율적으로 처리. 기존의 객체 또는 배열보다. > Map key / value 페어를 저장 key에 (객체와는 다르게) 문자 뿐이 아닌 어떤 데이터 타입도 다 들어갈

식별자 / 변수식별자 = 변수명 / 변수 = 데이터스택 vs 큐콜 스택 (call stack)자바스크립트의 \*\*실행 컨텍스트\*\*는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체다. 자바스크립트는 어떤 실행 컨텍스트가 활성화되는 시점에 다음과 같은 일을 한다.

저번에 이어서 리더를 맡았고 자연스레 발표까지 맡게 되어서, 오늘은 내일 있을 발표 준비를 하였다. 대본 작성하고 피드백을 받고.대본 작성하면서 쭉 페이지를 검사해보니 그 전에 안 보이던 몇 가지 수정할 부분이 보여서 수정하였고, 최종 수정사항까지 적용하니 21시가 다

오늘 TIL에는 발표 피드백을 받으면서, 그리고 팀원들과 같이 프로젝트 KPT 회고를 작성하면서 느낀 점과 기억하면 좋을 메모를 적어보려 한다.프로젝트 루트 지정.배포를 하면 기본적으로 index.html을 띄워주는데, 특정 페이지를 홈, 메인으로 띄워야 한다면 꼭 루

코테 풀면서 메모 > 제곱과 관련된 Math.sqrt & Math.pow 문법 > 숫자의 자리수들로 배열을 만드는 방법 > 응용해서 코테 문제풀이 함수 solution은 정수 n을 매개변수로 입력받습니다. n의 각 자릿수를 큰것부터 작은 순으로 정렬한 새로운 정수를

분반 수업 (스탠다드) 베이직, 스탠다드, 챌린지 세 개로 나누어서 일주일에 두세번 수업을 진행해주신다. 수준별 수업을 듣고 과제를 하고. 나는 스탠다드 반에 지망했고, 오늘 첫 수업을 들었다. 이해 못 했던 부분들을 차근차근 이해가 쉽게 설명해주셔서 굉장히 도움이 많

리액트와 친해지면서 간단한 구현을 해보는 과제.이름, 나이를 useState로 받아서 사용자 리스트를 띄워주고filter를 이용해 삭제 버튼 클릭 시 id값이 일치하는 줄을 삭제이름 나이 둘 중 하나라도 입력이 안 되어있으면 alert창이 뜬다과제 최종본을 배포해서 보

1) 작업할 폴더에서 터미널 열기2) 리액트 패키지 세팅yarn create react-app 프로젝트이름위의 방법은 CRA. CRA 방법보다 Vite가 더 좋다. 패키지 세팅이 훨씬 빨리 되고 다른 장점도 있다 하는데 어쨌든 요즘은 Vite를 많이 쓴다고 기억하면 좋

이번 과제의 CSS 초기 세팅.layout은 다른 컴퍼넌트를 감싸는 컴퍼넌트의 classNamejsx에선 class="" 대신 className="" 을 사용한다id는 똑같이 id=""클래스명을 isWorking=true/false 여부에 따라 변경해준다.TodoCon

VSCode 플러그인vscode-styled-components 이 플러그인을 설치하면 styled-components 안에서 스타일 코드를 편하게 작성할 수 있다.설치yarn add styled-components

GlobalStyles "전역적으로 스타일을 지정해준다". styled-components는 component 안에서만 적용됨. GlobalStyles 적용 방법 GlobalStyles.jsx 파일 생성 GlobalStyles.jsx 내용

이전 상태에 의존하면서 (이전 값을 참조할 때) 상태를 업데이트 할 때 함수형 업데이트로 쓰는 것에 익숙해지자그러지 않으면 불안전한 코드다이전 상태에 의존하지 않을 때는 굳이 쓸 필욘 없다setState는 비동기적 함수다. 동기적인 함수를 실행한 다음에 마지막으로 실행

두 단어가 애너그램인지 확인문제 정의:두 단어 A와 B가 주어졌을 때, A의 알파벳 순서를 바꾸어 B를 만들 수 있는지 확인하라. 가능하다면 true, 아니라면 false를 반환하라.조건:대소문자를 구분하지 않는다.공백은 무시한다.두 단어의 길이는 같아야 한다.예시:입

문제: 일관된 문자열의 개수 세기문제 요구사항 (정의)주어진 문자열 allowed와 문자열 배열 words가 있습니다.allowed 문자열은 서로 다른 문자들로 이루어져 있습니다.각 words 배열의 문자열이 allowed에 있는 문자들만 포함하고 있을 때, 그 문자열

https://www.npmjs.com/package//uuid1\. 설치yarn add uuid2\. 사용3\. 예시똑같은 레이아웃의 Container 여럿. 안의 내용을 감싸주는 스타일컴퍼넌트를 따로 만들어서 재사용해보자.Container 컴퍼넌트의 가장

전역 관리 대상을 새 컨텍스트 파일로 빼준다.=> records, setRecordssrc/contexts/RecordContext.jsx가장 상위 컴퍼넌트를 만든 Provider로 감싸준다.사용해야 할 부분에서만 불러와준다.props는 사용하든 안 하든 계속 전달-전

문제 정의:주어진 두 문자열에서 첫 번째 문자열이 두 번째 문자열에 포함되는지 여부를 확인하시오. 포함된다면 true, 포함되지 않는다면 false를 반환하시오.단, 'include' 함수는 사용하지 마시오.예시:입력: "abc", "aabcc"출력: true입력: "

Reduxyarn add react-reduxyarn add @reduxjs/toolkitredux는 상태 변경, 상태 관리를 위한 공간!유효성 검사 같은 건 여기로 빼지 말기.유효성 검사는 Custom Hook 같은 거로 관리해도 됨.context는 내부 저장소, r

문제 정의:nums 배열이 주어졌을 때, 앨리스와 밥이 게임을 합니다. 매 라운드마다 앨리스는 nums에서 최소 요소를 제거하고, 그 다음 밥이 같은 작업을 합니다.밥은 제거한 요소를 결과 배열 arr에 추가하고, 그 다음 앨리스가 제거한 요소를 추가합니다. 이 과정을

https://daisyui.com/처음에 시간 단축을 위해 확장자를 사용해보자! 하고 팀원분한테 여러가지를 추천받았다. 같이 골라보는 시간을 가졌고, 여러가지 중에서 우리는 daisyUI 를 사용하기로 결정했다.설치 방법은 좌측 install 들어가면 나와

프로젝트 이름 설명 간단하게 한줄로 얘기하고 바로 시연으로 넘어간 다음에 보고서 내용 말하면 좋다react-toastify, sweetalert 등으로 사용자 친화적인 ui를 하는 게 좋다카드리스트 flex 대신 grid로 통제하면 더 효율적으로 할 수 있으니 grid

yarn 사용 시yarn add @reduxjs/toolkityarn add react-reduxor 한번에yarn add @reduxjs/toolkit react-reduxnpm 사용 시npm install @reduxjs/toolkitnpm install react

https://moneyfulpublicpolicy.co.kr기존과 동일, axios 추가yarn add axiosornpm install axios

immutable 메소드immutable = 새로운 원본을 만들어낸다는 뜻.ex) 배열을 filter 하면 filter 된 값으로 새 주소를 가진 배열이 만들어짐Representational State Transfer서버와 클라이언트 간의 통신을 위한 아키텍처 스타일서

새벽 5시 29분배포까지 모두 성공했다.VITE_REACT_APP 이런 prefix를 반드시 붙여야 한다.const 저장할변수명 = import.meta.env.아까지은url키gitignore에 .env 파일과 로컬에서 임시로 사용했던 db.json 파일을 추가해준다.

queryFn이 실행되어 값을 반환하는 즉시, 그 값이 QueryClient 의 서버상태로 설정된다.라이브러리 v5 부터 isLoading 의 명칭이 isPending 으로 변경됨.isPending 은 QueryClient에 아직 데이터가 없고 쿼리가 아직 실행 대기중

KAKAO MAP API 사용하여 지도 화면에 띄우기Tanstack Query로 supabase DB에서 필요한 데이터만 fetchDB에서 가져온 정보를 지도에 마크업 하기카카오 맵 API를 사용해 지도를 불러와야 하는데 역시 혼자서는 무리고 이미 비슷한 작업을 해본

내 위치 정보 불러와서 지도에 마크업마커 누르면 색 바뀌는 상태 변경 주기마커 누르면 리스트에 포커스 된 항목으로 스크롤 되도록 구현로딩 중 UI 예쁘게 바꾸기튜터님 피드백) 마커 클러스터러 활용GeoLocation 사용 - 코드 분리 전Issue이전에는 GeoLoca

../public/images/ 이런 폴더에 있는 파일을 코드에 쓸 때 public 안에 있는 건 그냥 images/ 이런 식으로 url 넣어야 배포해도 작동됨. 이건 상황에 맞게 입력해보고 로컬에서 잘 돌아가면 배포했을 때도 다 잘 표시되는지 확인 한 번 거치자. 에

프로젝트 기획 단계에서 하고자 했던 기능들을 다 구현했고 이외에 로그인/회원가입 및 북마크 구현, 리팩토링까지 시간 내에 마무리했던 점프로젝트 리딩, 시작과 마무리가 완벽히 되었다 (리딩 해주신 분들 감사합니다)타임라인을 늘어지지 않도록 여유있게 구성해 짧은 시간 내에

TypeScript는 Microsoft에서 개발한 오픈 소스 프로그래밍 언어JavaScript의 단점을 상쇄하기 위해 세상에 등장실행 시간에 결정되는 변수 타입약한 타입 체크너무나도 물렁물렁한 객체실행 시간에 결정되는 변수 타입 → 이제는 컴파일 시간에 변수의 타입을

특정 프로그래밍 언어가 정적 언어로서의 정체성을 유지할 수 있게 하는 도구. 언어를 다른 언어로 변환해주는 도구타입 검사 수행, 타입 관련 오류를 미리 발견할 수 있게 해줌코드 변환 해줌에러 메시지의 해석에 도움코드 최적화 도움booleantrue / falsenumb

enum -> 간단한 상수 값의 경우 적합object literal -> 복잡한 구조 + 다양한 데이터 타입이 필요한 경우에 적합enum의 각 멤버는 상수였기 때문에 number, string 타입의 값만 대입할 수 있음하지만, 객체 리터럴에서는 어떤 타입의 값도 대입

yarn create vite 만들프로젝트이름 --template react-tsyarngit initgit remote add origin 깃허브주소git add .git push origin main

프레임워크: 개발자가 기능 구현에만 딱 집중할 수 있도록 필요한 모든 프로그래밍적 재원을 지원하는 기술의 조합.Spring Framework : Java 기반의 웹(백엔드) 프레임워크FE까지 가능한 full stack coverage frameworkJSP, Thyme

npx create-next-app@latestoryarn create-next-app@latest위의 명령어 입력 후 엔터 치고 프로젝트 이름 입력하고 엔터 치고, 물어보는 거 다 yes 해주면 세팅 완료.원하는 디렉토리로 cd 해주고code .1) Static ro

page 컴포넌트에 use client 쓰는 거 지양use가 들어있는 것들, useEffect, useState etc. = 거의 브라우저 환경, client component에서만 동작!이미지 컴포넌트 - next.js를 vercel로 배포하면 비쌈.그래서 image

편한 것 같긴 한데, 아직 더 익숙해져야 함고정값 말고 내가 직접 설정하는 방법: \[] 안에 넣기ex. className="max-w-40rem bg-\[router 설정이 굉장히 편하고 효율성 좋은 것 같다!폴더로 경로 설정이 된다는 점이 간편하고동적 라우팅도 그냥

위로 / 아래로 버튼을 눌러서 순서 변경!!수정 -> 수정 화면으로 변경위로 / 아래로 버튼을 눌러서 순서 변경완료 -> 변경된 순서로 저장취소 -> 수정 누르기 전 상태로 되돌아감지금 작은 사이드 프로젝트 기획 중인데, 딱 적용하기 좋은 문제였다.사이드 프로젝트에선

하루종일 회의했던 날...낮밤이 바뀌어서 두 시간 정도 자고 왔는데, 몽롱한 상태로 하루종일 계속 소통하니까 예쁘고 부드럽게 말하는 걸 신경쓰지 못 한 것 같다...내일부터는 다시 좋은 팀원이 되도록 노력해보자..!!내일의 계획지금 맡은 파트 빨리 끝내기빨리 끝내서 다

방법 정리..

홈 페이지에서 생성하기 누름 -> 기본 정보 입력 모달 -> 모달의 생성하기 누르면 지도 불러오는 페이지로 이동위와 같은 과정에서, 지도 불러오는 페이지로 이동했는데 지도가 로드 되지 않는 문제가 발생했다.새로고침을 하면 작동이 되는데, 페이지에서 페이지로 넘어갈 때

우리는 Figma에서 작업하다가 좀 더 구조 그리기 편한 걸 써보자! 해서 Figjam으로 넘어가게 됐다. 진작 그럴 걸.피그잼으로 오니까 이렇게 화살표 그리는 것도 간편하고, 스탬프를 활용해 누가 어떤 파트를 작업할지 나누어 놓는 것도 쉽게 가능해졌다.컴포넌트 구조:

와이어프레임 피드백세부 기능, 로직, 플로우 정리디자이너 미팅채팅 생성:chat 테이블에 컬럼 생성채팅 목록:chat 테이블 데이터 가져옴상태에 저장, 목록 렌더링이름 클릭하면 chat/id 로 이동메시지 전송:해당 chat과 연결된 messages 리스트를 상태에 저

오늘 한 일 (같이) 디자이너님과 회의 와이어프레임 피드백 및 플로우 정리 각자 의사코드 공유, 다같이 회의 거쳐서 수정 DB 완성 채팅 구현 플로우 홈 의사코드 1. 배너 trips 테이블에서 get trips.tripmaster || trips.tripm

프로젝트 세팅디자이너 님과 미팅맡은 파트의 항목 별 진행 및 마감일 계획 세우기개발 시작메인 페이지 컴포넌트 파일 분리 및 UI 구현 시작팀원 분들이 해결해주신 트러블 슈팅인데 나도 새롭게 배운 부분.git clone 받은 다음 코딩 시작하기 전에 팀장님이 알려주신 세

-4094 에러 (Internal Server Error)Next.js 를 사용하기 시작하고 나를 계속 괴롭힌 에러.간단한 CSS 수정을 하든 뭘 하든 뭘 안 하든 짧게는 몇십초 길게는 몇분 내에 꼭 저 에러가 뜨면서 랜더링이 멈추고, yarn dev를

메인페이지, 탭메뉴 컴포넌트 보다 더 세분화, 재사용성 고려헤더, 탭메뉴 ui 수정이번 프로젝트 첫 PR, 첫 mergechat 페이지 (채팅 목록) 스켈레톤 작성chat 페이지 구현 시 레이아웃 구성 관련 고민, 레퍼런스 서치모바일에서는 chat(목록)과 chat(i

첫 모의 기술 면접채팅 목록 페이지 모바일 ui 작업채팅 페이지 모바일 ui 작업기술 면접 공부채팅 페이지 ui 작업 초안 완성채팅 목록, 채팅 페이지 데스크탑 작업채팅 기능 조금이라도 시작실제 기술 면접처럼 컬쳐핏, 협업, 기술 질문들로 구성.컬쳐핏, 협업 질문은 잘

초반 기획 단계 회의 시간에 한 번 supabase.ts 의 Database의 public의 Table의 message... 이런 식으로 안 쓰고 저렇게 Tables<'messages'>만 써도 된다고 리더님이 설명 해주셨었다. 좋은 정보.types 폴더 안에 넣

어제 강의를 들어봤는데, 두려워 했던 것보다 어렵지 않아 보였다.이번주에 MVP 발표까지 해야 하는 구현 사항을 마쳐야 하기 때문에... 우선 realtime으로 해 놓고 MVP 발표 이후 웹소켓 활용하여 리팩토링 작업해볼까 하는 새 계획이 생겼다.본래 웹소켓을 도전

어렵게 생각했는데 생각했던 것보다 간결하다!현재 supabase를 이용한 실시간 채팅 구현에서 메시지는 정상적으로 불러와지지만, 프로필 사진은 새로고침을 해야만 로드된다. 즉, 프로필 사진 데이터가 컴포넌트의 마운트 시점에만 로드된다. 실시간으로 추가된 메시지의 유저

현재 supabase를 이용한 실시간 채팅 구현에서 메시지는 정상적으로 불러와지지만, 프로필 사진은 새로고침을 해야만 로드된다. 즉, 프로필 사진 데이터가 컴포넌트의 마운트 시점에만 로드된다. 실시간으로 추가된 메시지의 유저 프로필 사진은 로드되지 않고 있다.데이터 f

부모 요소 (레이아웃) : overflow-hidden, 하위 요소 센터로 배치자식 요소 (이미지 자체) : object-cover자주 필요한 이미지 설정인데 한번 기록해 놓아야 좋을 것 같아서 기록한다!

채팅 목록 & 채팅 페이지 pc 버전전체적으로 리팩토링tanstackquery 사용컴포넌트 분리, atoms까지 분리!messages 테이블에 unread column 추가하는 것 관련해서 의견 내기알림 목록 페이지 만들기알림 기능 구현기술면접 공부남은 2주 동안 gi

notifications 페이지 UI 작업trips 페이지에서 Alarm 아이콘 누르면 notifications 페이지로 이동탭메뉴 글씨 추가, 컬러 변경채팅 목록에 안 읽은 메시지 숫자 표시하는 방법에 대해 고민안 읽은 메시지 숫자 표시하는 방법에 대해 고민. =>

그동안 빠르게 approve, merge 하느라 PR마다 코드리뷰를 거의 안 달고 확인 댓글만 짧게 남겼었는데, 한 번 쭉 다같이 코드리뷰를 해보자는 팀장님&부팀장님의 의견에 따라 코드리뷰를 해 보았다.코드를 전체적으로 검토해보면서(기술적인 부분은 거의 그냥 넘겼지만.

1) 실시간 채팅 기능2) 실시간 알림 기능 일부3) home 페이지, 헤더, 탭메뉴, 기능 일부zustand 사용해 count 전역 상태 관리 : 코드가 복잡하지 않으며 사용이 편리하고 유지보수에 용이supabase realtime 활용한 실시간 인터렉션supabas