TIL

1.첫 팀 프로젝트 시작 : 팀 소개 페이지 제작 ~ 배포 2.특강 : TIL

Today 하루종일 자습 1.자바스크립트 개념 selector, EventHandler querySelector와 getElementById? nodeList와 HTMLCollection? 튜터님께 물어보러 갔지만 여전히 혼잡해서 이것저것

git, markdown

프로젝트 발표

JavaScript 기초 강의

function goal() { if (todayStepCount >= 15000) { goToBed(); } else { run(); } }

# Today ## 1. 알고리즘 - [알고리즘 개념 정리] (https://velog.io/@kgh9393/20240424-01) - [최댓값 구하기] (https://velog.io/@kgh9393/20240424-02) <br> ## 2. [자바스크립트 강의]

처음으로 프로그래머스 사이트에 가입해서 문제를 풀어봤다.크롬에서 백준 허브 라는 확장 프로그램을 쓰면문제 푸는 즉시, github와 연동되는 것이 재미있어서 푸는 재미가 있다.현재 진행 사항1\. 와이어 프레임 구상웹사이트 뼈대 제작API 연동추후 진행 사항배치 수정검

최댓값, 최솟값, 절댓값, 제곱근, 거듭제곱 반환반올림, 올림, 내림, 버림랜덤진행한 것은 많이 없지만 생각보다 많은 트러블 슈팅들이 있었다..일단 진행사항을 보자면.. 기능 구현포스터 호버링: 영화정보 구현결론적으로 다하긴 했는데 며칠전 강의에서 들었던이게 왜 되지?

개인 프로젝트 제출오늘 드디어 제출은 했다. 아직 피드백을 받은 것이 아니라 수정요소가 많겠지만... 개인 프로젝트 진행 간 헤맸던 구간이 있어서 아래 정리를 해봤다.CSS 절대 단위 정리처음에는 CSS에서 단위라고는 px밖에 몰랐다.줄이거나 늘리면 아 이렇구나 하는

아직 덜 정리 했다.. reduce의 개념이 난해해서 여전히 해매는중..1\. 명령어생성 : git branch 브랜치이름생성 여부 확인 : git branch이동 명령어git switch 브랜치이름git checkout 브랜치이름한 번에 생성 & 이동git switc

주제 : 개인 프로젝트 중 하나를 발전시켜 웹페이지 구현필수 요구사항 \- TMDB 또는 영화진흥위원회 오픈 API 이용 \- 영화정보 상세 페이지 구현 \- 상세 페이지 영화 리뷰 작성 기능 구현 \- github PR(=Pull Request) 사용한 협업

Today 1. 팀 프로젝트 내가 맡은 분업은 아니었지만 내가 맡은 부분을 다 해서 localStorage를 이용 리뷰를 저장하고 불러오고, 삭제하는 기능을 만들어 봤다.. 하지만 저장하고 불러오는 것까지만! ok 삭제버튼은 여전히 작동을 안한다🥲 2. 알고리

Today Learn 주절주절

Today 1. 문자열 메서드 Learn 주절주절 간만에 밖에서 뛰어야 겠다.

팀 프로젝트 피드백

1. 코드 카타 2. 자바스크립트 종합문법 다시 복습

Today Learn 자바스크립트 문법을 복습하고 있는데 아직 익숙하지 않은 개념이 많다.. Promise, 구조분해할당, this바인딩, 인스턴스 등등.. 이해할때까지 복습하자 표현식이다 === 변수에 할당 할 수있다. 주절주절 수요일.. 쉬는 날인데 월,화

Today 1. React에서 쓰이는 JS(2)! 화살표 함수 조건 연산자 = 삼항연산자 단축평가 논리 연산자를 활용(||, &&, ?., ??) truthy, falsy 논리합연산자(||) falsy : false, 0, "", null, undefined, N

⚠️vite 프랑스어로 "빠르다(Quick)"를 의미, 발음은 /vit/ 비트 바이트

Component 분리, 재사용진행하면서 느꼈다.. 이건 무조건 필요하다!73줄 짜리가 33줄이 되어버리는 마법👉아래 코드 띄어넘기수정 전수정 후sweetalert2 사용 \- 설치 : 터미널에 npm install sweetalert2입력 \- 사용 : 1)

내가 작성한 코드결과값이 이상하게 나타난다.뭔가 이상하다..Trouble Shooting 1todolist를 작성하던게 습관이 되었는지 자연스럽게 배열을 적어버렸다.해결Trouble Shooting 1 onClick을 실행하기 위해 함수를 넣어야 하나, 함수를 바로

과제등을 하다보니 clone 받아오고 내 레포지터리에 올리는 경우가 많아져서 찾아봤다.어느순간부터 VSCode에서 변경사항이 10k(10000개)라고 계속 뜨길래 찾아봤다..이유작업을 하려는 폴더가 아닌 바탕화면 등에서 .git을 만들어 놓고 여러 작업을 하다보니 그

Today 1. Material Icon Theme 설치(VSCode extensin) 필요성 기존에는 바닐라 자바스크립트로 하던 프로젝트들이 리액트로 넘어오면서 패키지를 통해 계속 설치하니까 관리해야 할 파일들이 너무 많아졌다.. 현재상황 사실 얼마 안되는 것 같

오늘부터 다시 시작

일관된 문자열의 개수 세기터미널 환경에서 프로젝트 생성패키지 설치github 연결 github 레포지터리 생성 VSCode 터미널에서 명령어 입력git init git remote add origin “url” git add . git commit -m “fir

\- 상세화면 이동 구현\- 상세화면 CRUD 적용\- Context 적용바뀐 것은 별로 없지만 시간은 많이 들어갔다..이제 redux만 적용하면 끝!월별로 내역이 없다면 컴포넌트 표시를 하는데서 문제가 생겼다.컴포넌트에 조건식을 걸어 컴포넌트를 보여주려고 하는데 표

Redux

프로젝트 github일주일 동안 진행했던 프로젝트를 끝냈다.사실 기능만을 구현 했던 것은 1~2일차에 끝나긴 했는데만들어서 props-drilling => Context => redux(RTK)로 Refatoring하면서 시간이 조금 오래걸렸다.추가적인 기능들을 넣어보

피드백을 받아보니 내가 프로젝트를 진행하면서 어떠한 점을 놓쳤는지 명확히 이해가 갔다..이번 프로젝트에서 놓친 점을 기록해두고 다시 실수를 하지말자사용자 경험 : 수정 후 홈화면으로 이동css내 grid를 사용하여 레이아웃 설정변수명, 객체의 key 이름을 신경써서 추

Today 1. 뉴스피드 project 2. [git commit convention] (https://velog.io/@kgh9393/20240531-01) 3. 코드카타 타임어택 가장 긴 팰린드롬 Learn 깃 커밋 규칙 주절주절 내일 오랜만에 한라산에

페이지네이션 기능 구현👉 페이지네이션 구현 과정supabase를 이용해 데이터 저장 및 읽어오기Custom Hook=> - Supabase 아직 수업을 들어도 무슨 말인지 모르겠다. 언제 복습하고 써먹지 주말에 페이지네이션을 어떻게 구성 할 지 머릿속으로 생각은 해봤

Today 1. 자바스크립트 연산자 2. 알고리즘 코드카타 Learn 주절주절

\- 게시글의 작성날짜가 오늘인지 확인 후 오늘이면 시간을 나타내는 기능코드는 아래서 정리\- 팀원들과 supabase를 합치고 최종적으로 github를 통해 merge, 충돌 해결사실 while문을 통해 푸는 내용인데 중간에 못 읽고 for문을 통해 어찌 저찌 해결추

배포 중 오류프로젝트 github결과물클릭 시 nav바가 나타나는 형식깔끔한 UI모달 창 구현드래그 앤 드롭무한 스크롤(인터섹션 옵저버 라이브러리)Quill에디터발표 자료 및 기타PPT 작성이 깔끔 함.별도의 유저테스트트러블 슈팅개선과제를 남겨서 추후에도 해결하려는 자

\- 비동기\- json server추후 들어야 할 목록axiostanstack queryzustandux향상기법 : https&#x3A;//velog.io/@kgh9393/20240610-01인증 인가 : 개념, 쿠키, 세션, 토큰tailwind반응형 웹react

피보나치 수json-server? axios 머릿속으로 들어가고 있긴 한데아직 확실히 자리잡는 느낌은 아니고 뭐랄까 그냥 희미한 기억정도..?이것을 여러번 반복해서 써보고 복습을 해야하는데..이번에 배운것을 토대로 개인 및 협업 프로젝트에서 열심히 써먹어서 내것으로 만

팩토리얼\- 지출 관리 시스템에 회원가입 / 로그인 기능 구현로그인 페이지로그인 후 메인 페이지(홈)json-server를 이용 지출 데이터 CRUD구현API 호출 시, fetch 대신 axios를 필수적으로 사용지출데이터 관련 API 통신 시 TanstackQuery

문자열 뒤집기 ver2(재귀적 호출)\- 지출 관리 시스템에 회원가입 / 로그인 기능 구현\- json-server를 이용 지출 데이터 CRUD구현\- API 호출 시, fetch 대신 axios를 필수적으로 사용\- 지출데이터 관련 API 통신 시 TanstackQu

새로운 팀 프로젝트 시작프로젝트 주제 선정 => 와이어 프레임 => 기능 분담 순으로 진행프로젝트 명 : eat site seoul소개 : 카카오맵 API를 활용한 맛집 공유 사이트맛집 조회 및 검색 기능맛집 댓글 & 별점 달기 기능지도 API / Youtube AP

현재까지 진행사항기본적인 UI그리기(와이어프레임 베이스)캐러셀 구현 => 라이브러리 swiper사용 공식문서 참고해당 코드 보기모달형식 구현사실 원래는 라우터 돔을 이용하여 디테일 페이지로 이동해야 하는데 회의 간 헤더가 애매해져서 다시 메인페이지에서 구현하는 것으로

Today Learn 주절주절

개발 프로세스를 정리하다가 우리 프로젝트에 맞는 서비스 아키텍처를 그려보았다.문제사항프로젝트 진행 간 메인 페이지에서 사이드바에도 이미지를 넣고 사용하기 위해 여러 고민을 하다가 만들어 둔 캐러셀을 다시 재사용 해서 넣어 보았다.원인기존에 모달창에 사용하던 이미지 크기

우리가 달린 리뷰를 바탕으로 평점을 계산해서 그려줘야 하는 부분을 내가 담당했다.리뷰를 다는 팀원분께서 supabase 내 comments 테이블에 해당 가게의 id값과 평점을 넣어주셨기 때문에 활용하기로 했다.평점 불러오기useGetAverageRating에서 데이터

TypeScript를 공부해야 하지만 넘어가기 전에배웠던 내용을 다시 복습하고 넘어가야 할 것 같다.그 중 아직도 생소한 개념인 Tanstack Query서버 상태를 관리하는데 유용한 라이브러리React에서 데이터 페칭, 캐싱, 동기화 및 서버 상태 업데이트를 쉽게 할

객체의 속성에 접근할 때 해당 속성이 존재하지 않은 경우 에러를 발생시키지 않고 undefined를 반환하도록 하는 문법기본 문법 : ?.객체나 배열, 함수 호출 등에 사용옵셔널 체이닝을 활용해서 코드 작성 간 오타나 없는 속성 등으로 인해 오류를 내뿜던 것을 어느정도

\[TypeScript] 왜 사용 하는가?\[TypeScript] 타입과 기본 문법TypeScript를 사용하면 코드의 오류를 사전에 방지한다.(런타임 환경 x 컴파일 시점 o)사실 아직 익숙하지 않고 새로운 문법을 배우는 단계지만, TypeScript를 사용하면 할

Typescript, Next.js 적용redux 외의 클라이언트 전역상태관리 라이브러리 적용 (recoil, zustand, zotai 중 선택 권장)supabase 를 사용하여 서버 및 DB 구현인증/인가 적용 (supabase authentication)모든 ap

TIL과의 다른점 하루하루 지나쳐 가는 수많은 고민의 흔적을 남김활용 : 추후 비슷한 기록들을 모아 하나로 엮어 정리 가능이번 협업 프로젝트에서 npm을 사용하기로 했는데 습관적으로yarn을 사용하게 되면서 저번에 튜터님이 알려주신 내용을 그대로 적용해서 파일의 캐시

이중 부정(double negation) : !! SSG 서버 컴포넌트에서 route handler 호출은 빌드 실패의 원인Tanstack Query with Next.js 패턴: prefetching, dehydrate, and hydrateparallel route

쿠키사용자 테스트 : 로그인 \*문제 발견 : 아래에서 기술..새로고침 할 경우 로그인이 된 상태로 변경=> 로그인 상태인 경우 헤더에 있는 로그인 버튼이 마이페이지/로그아웃버튼으로 변경되도록 조건부 렌더링의 문제가 생김새로고침 할 경우 유저정보를 저장하는 로직이 있

setTimeout, clearTimeout\[github] Pull Request와 이슈 연결하기카운트다운 타이머모달남은 것예약 관련 날짜 지정무엇인가 정신없는 하루 였지만 오늘도 운동은 해야한다.반드시

quill 에디터 사용캘린더 구현상세페이지 UI 폼 등optimistic updategithub문화열차로딩페이지 로딩이 다른 조보다 길었지만 심심하지 않게 제작공연 마감일 계산 등 디테일최종 프로젝트에서 alert창 다른 것 구현 필요디테일 페이지 조건부 렌더링

주제 : 음식 메뉴 추천 및 금액에 맞는 숙소, 방문 장소 추천 제공 플랫폼기능 :소셜 로그인, 좋아요, 음식/숙소/명소 추천 등발도장 기능: GPS 기반으로 방문 위치 체크북마크/댓글/채팅 등의 커뮤니티 기능검색/해시태그 기능숙소 예약, 여행 코스 짜기 등 편의 기능

프로젝트 명 : 호랑이 Horang (가제)소개한 줄 정리 : 개인 취향 별 여행 및 먹거리 추천 정보 제공 플랫폼내용 : 취향에 따른 선택지를 취합해 추천 여행지 및 식당 추천.MVP서치 기능소셜 로그인, 소셜 공유상세페이지 (정보, 리뷰, 댓글, 좋아요) - ap

Korean JSON와이어 프레임레퍼런스 찾기사실 기획회의를 이렇게 오래 하는게 처음이다.회의가 길어져서 팀원분들 모두 지치는 것 같기도 하고..그래도 팀원 분들 한분 한분 의견 제시해주시고 해서 마무리까지 화이팅 해야지기획 보다 코드 치는게 더 쉬울 줄 이야오늘 운동

Today 1. 정리 fetch Learn 주절주절

원하는 문자열 찾기업로드중..코드공용 컴포넌트(모달) 모달 상태 관리 : zustand오랜만에 해본 코드 카타오늘 풀었던 것은 사실 프로그래머스 제일 낮은 단계이지만 그래도 프로그래밍 언어에 있는 메서드를 잊지 않고 사용해본다는 의의가 있어서 한번씩 풀어보면 기억에

마이페이지 내 정보 관리✔️supabase에서 로그인 된 사용자에 대해 비밀번호 변경공식문서✔️사용자 정보 변경(실제 메타데이터가 아닌 유저테이블 내용 업데이트)마이페이지 와이어프레임 변경에 따른 수정별도로 회의록을 작성할 곳이 없어 임시로 만들었다.지난 주 기록들은

리스트 자르기✅ 로딩, 에러, 없는 페이지 제작파일 위치 : (app라우팅 방식) app폴더 바로 아래loading.tsx, error.tsx, not-found.tsx✅ 마이페이지 : supabase likes 테이블에 있는 내용 불러오기클라이언트 사이드 요청서버 사

20240725 알고리즘 연습\[TypeScript] supabase에서 테이블 타입 가져오기미리보기스토리지 저장 후 url 가져오기마이페이지 기능 구현이 끝났고 refatoring 과정에서 고민이 생겼다. (비교는 Learn부분에서)fetchaxios기존에 axios

Today 1. 알고리즘 [20240726 알고리즘 코드 카타 ](https://velog.io/@kgh9393/20240726-01) 2. 정리 [Editor] VScode Extension 3. 프로젝트 튜터님의 리뷰를 받고나서 코드 리팩터링이 필요하다 코드 리팩

Next.js 복습atom(maybe store???)provider설정 및 사용(예시)useRecoilStateuseRecoilValue\[프레임워크] Tailwindcss피그마와 맞춰서 디자인 디테일 작업zustand를 사용하여 store를 만들 때 ModalSto

코드 표기법(카멜 / 파스칼 / 스네이크 / 케밥)2차 기획(커뮤니티, MBTI별 유형 분류, 여행지 추천, 채팅 기능)레퍼런스 조사 및 와이어 프레임채팅 기능 관련 공부역시 기획은 힘들다오늘은 운동 잠깐 쉬고 친구랑 카페 갔다가 pc방 1~2시간 정도 즐길 예정

supabase로 채팅을 구현하기 위해 하루종일 자료를 찾거나 공부를 했다.✔️추후 자세히 정리 필요Realtime 정독 필요문서는 중요하다..아직 어렵다..

\[API] randomuser.me로딩 페이지사용자 정보 변경 로직 수정비밀번호 변경 없이 닉네임과 이미지만 변경할 수 가능하도록 수정채팅 구현진짜 하다가 너무 힘들었다. 아직 이해를 잘 못하는 부분도 있고 supabase realtime에 대해 조금 더 알아봐야 겠

20240802 모의 면접8.5.(월) 중간발표를 위해 현재까지의 기능들만 종합하고 배포하기로 함.✅사이트 배포 및 기타 오류 수정 등 🔗사이트수정사항페이지공통유효성 검사 등 (alert 부분 바꾸기)헤더 - 커뮤니티? 이름 바꾸기(호랑이 모임)로딩 컴포넌트 교체로딩

커스텀 훅(Custom hooks)관광지 추천에 대한 메커니즘반응형 고려 필요(pc화면, 모바일)alert 수정 필요페이지 파일 : use client / 서버 컴포넌트의 장점(seo 등)을 살리기 어려움디테일페이지 : props를 넘길 때 요소 재정의 후 넘기는 것

전역관리 라이브러리 통합(Recoil => zustand)반응형 웹페이지로 변경 중제목 그대로 매너리즘이다..무엇인가 삶에 변화가 없이 오늘도 똑같은 하루가 반복되고 있다.성취감이, 발전이 없어서 그런가..인터넷에서 매너리즘 테스트를 해보았다.무려 8개 살려줘앞으로 이

모바일 반응형 작업 중Tailwind CSS 프레임워크 사용sm (small): 작은 화면 (예: 모바일) - 일반적으로 640px 이하md (medium): 중간 화면 (예: 태블릿) - 일반적으로 768px 이하lg (large): 큰 화면 (예: 데스크탑) - 일

반응형 웹페이지(모바일 - 채팅)채팅 메세지를 표시하려는데 현재 시간이랑 맞지 않아서 supabase 테이블을 확인 한 결과9시간이 차이가 나게 기록시간대 설정 : 기본적으로 JavaScript의 Date 객체는 UTC를 기준으로 작동한국 시간(UTC+9) 차이서버에

채팅 목록 : 마지막 메시지 렌더링마이페이지 : 모바일 작업Invalid Hook Call Warning 에러 공식 문서위 공식문서에 따르면 이러한 에러는 3가지 이유를 갖고 있다.You might have mismatching versions of React and

좋아요 한 글 불러오기팀원분이 주말에 커뮤니티 좋아요 작업을 진행하여 마이페이지에서도 불러올 수 있게 작업서버액션을 만들고 해당 함수를 usequery로 불러와서 읽어내는 방식 사용alert, confirm 교체윈도우 기본적으로 쓰던것을 모달형식으로 변경자체 유저테스트

브로셔 제작호랑 브로셔 보러가기❓브로셔(brochure)브로슈어(Brochure), 또는 안내서는 기업의 이념 및 현황, 계획 등의 기업 소개, 제품 소개 등을 수록한 책자이며, 보통 팸플릿이나 전단지의 대용으로 활용위키백과브로셔를 제작하면서 만든 사이트 하나하나 세심

화면 리사이징 전체 화면이 너무 크다는 의견이 있어서 사이즈 변경 1920 => 1280 / 1440 => 960공통 레이아웃 챗 / 스크롤 투 탑 버튼 넣기분명 프로젝트를 만들 때 피그마에서 본 화면 크기는 괜찮은 것 같은데픽셀단위 어느정도 크기를 갖고 있는지 잘

유저 피드백(채팅 목록 로딩 속도 개선)기존Person 컴포넌트를 하나 하나 그릴 때 마다 API를 호출하여 마지막 메시지를 읽어오는 것변경유저 목록을 그려주는 곳에 전 메시지를 읽어오는 API 호출을 하여 마지막 메시지를 찾아 해당 유저 목록 Person 컴포넌트에

오랜만에 들어와본 블로그.지난 글 들을 읽어보며 내 개발 의지를 다시금 불태우고자 마음 먹었다.최종 프로젝트 이후 이력서를 썼지만 아직 내 개발 능력이나 경험이 많이 부족하다는 것을 깨닫고 2개월간의 방황이 있었지만 다시금 개발자로서 나아가고자 선택했다.내일부터 할 일