TIL(Today I Learned)
1.23.11.21 TIL(Today I Learned) - HTML, CSS, Bootstrap
클라이언트 : 똑똑 naver.com 자료좀 주세요서버 : 자료 줄게요준비해둔 자료 : HTML, CSS, JSHTML : 뼈대CSS : 꾸미기JS : 움직이기html:5 약어로 html문서의 큰 틀을 바로 작성html에서 가장 중요한 부분!<head> : 제목,
2.23.11.22 TIL(Today I Learned) - JS, JQuery, fetch
JS웹페이지에 움직임을 줄때 씀(추가, 없어짐 등의 움직임, 서버와 통신 등)왜 JS인가?브라우저, 랜더링 시스템 등 JS에 맞춰 짜여져 있음JS를 쓴지 오래돼서 표준이 됐기 때문CSS는 보이는거에만 사용됨JS는 서버를 만드는데 쓰이기도 함문법 외울 필요 없음!JAVA
3.23.11.23 TIL(Today I Learned) - 실습(추억앨범, 스파르타플릭스)
<추억앨범 실습>값을 입력하는 박스라고 무조건 input group이 아니고 floating labels도 있음!div 안의 배경이미지를 '이미지'라고 생각하니까 '이미지는 div를 따로 줘야했나..?' 하면서 계속 헷갈렸는데 그냥 backgroung-color쯤
4.23.11.24 TIL(Today I Learned) - CDN정리, JQuery 문법(실습), fetch, firebase
JQuery CDNBootstrap CDN와 혼자힘으로 toggle 해냈다..!!! ㅠㅠㅠ<과정>1\. JQuery CDN head안에 추가2\. postbox에 id 지정(처음에 누르는 버튼에다가 id 지정하는 바람에 버튼 누르니까 버튼이 사라짐 ㅋㅋㅋ)3\.
5.23.11.27 TIL(Today I Learned) - SQL, 테이블 선언, 데이터 타입, SQL문법, Sakila
관계형 데이터베이스에 정보를 저장하고 처리하기 위한 프로그래밍 언어정보를 표 형식으로 저장SQL언어 사용하여 데이터베이스에서 정보를 저장, 업데이트, 제거, 검색 및 검색할 수 있음Query = 코드, 언어Python : 컴퓨터에 명령 내리는 언어SQL : 데이터베이스
6.23.11.28 TIL(Today I Learned) - firestore, Github 배포, SQL(Sakila, 문법)
<파이어스토어란?>구글의 클라우드 기반 NoSQL 데이터베이스!데이터베이스 서비스로 데이터를 저장하고 관리할 수 있는 기능을 제공(데이터 모아두는 꾸러미)Firebase > 빌드 > Firestore Database > 데이터베이스 만들기asia Seoul선택 >
7.23.11.29 TIL(Today I Learned)(1) - VSC, CSS, 웹폰트, Bootstrap
HTML, CSS, Bootstrap 배우기로그인 페이지, 추억앨범 만들기브라우저의 역할?: 가져온 데이터를 그대로 보여주기만 하는 것요청하는쪽 : 클라이언트주는쪽 : 서버달라고하는 데이터 종류HTML 뼈대CSS 디자인JS 움직임작성한 html파일 웹페이지로 열어보기
8.23.11.29 TIL(Today I Learned)(2) - Bootstrap 실습, JS, JQuery
HTML, CSS, Bootstrap 복습스파르타플릭스 만들어보기Javascript, JQuery 배우기❗❗ Bootstrap 쓸땐 CDN 불러오는것 잊지 말자!!Q. 애매하게 기억하고 있어서 어렵다ㅠ 분명 Examples 들어가서 우클릭 검사로 킹덤 메인 부분이랑 같
9.23.11.30 TIL - JQuery문법, fetch, API
.toggle(), .val();, fetch, document골격, API혼자 해보기 실패id값을 준 다음에 $(' ❗❗JQuery는 id값 줘야되는것 명심!!(' 혼자 해보기 실패입력한 값 변수 지정을 어떻게 해야하는지에서 막힘=>각 항목의 input태그 안의
10.2023.12.01 TIL - Firebase addDoc, getDoc / Github 배포 방법
Firebase, Firestore, 데이터 넣기addDoc & 가져오기getDoc 구글 기반, 웹에서 데이터베이스 저장할수있게 해줌데이터베이스: 데이터 저장, 관리하는 데이터 모음(관계형 데이터베이스 SQL vs 비관계형 데이터베이스 NoSQL)ex) 형식이 정해진
11.2023.12.04 TIL - JS Handbook(변수, 자료형, 연산자, 조건문, 배열, 반복문, 함수)
📖 오늘의 공부 📖Javascript Handbook Part 01. Hello World이름이 붙은 저장소!
12.2023.12.05 TIL - JS handbook(함수, 객체), Toyproject, React(맛보기)
📖 오늘의 공부 📖JS handbookPart 04. 함수Part 05. 객체 기본문법Part 06. 객체 심화문법문법함수 선언문 : 주요 코드 흐름 중간에 독자적인 구문 형태로 존재 함수 표현식 : 주요 코드 흐름 중간에 독자적인 구문 형태로 존재 언제 함
13.2023.12.12 TIL - 1~3주차 3회독, json viewer, fetch 골격, document ready함수
📝 오늘 공부한 내용 📝1주차~3주차 3회독1) 버튼 2개를 함께 가운데 정렬 시키기(박스 하단의 '기록하기', '닫기' 버튼 두개를 함께 가운데 정렬)시도 : 버튼 두개를 같은 div 로 묶어서 class 준 다음 width를 줄이고 margin을 양쪽 auto로
14.2023.12.13 TIL - 4~5주차 3회독(firebase), CSS 레이아웃(flex box)
4주차~5주차 3회독(파이어베이스, Firebase 프로젝트 생성웹 앱에 Firebase 추가빌드 > Firestore Database 선택데이터베이스 만들기 > 프로덕션 모드에서 시작 > 위치 seoul로 변경firestore database 생성 후 규칙 수정규칙
15.2023.12.14 TIL - flex box 복습, grid
flex box 복습grid토이프로젝트(모바일 청첩장) 수정
16.2023.12.15 TIL - CSS Grid
CSS Grid : 드림코딩 - grid토이프로젝트(모바일 청첩장) 수정CSS Grid의 구성 : grid, grid celldisplay: grid;grid-template-columnsgrid-template-rowsgrid-template-areasgrid-gap
17.23.12.16 TIL - CS지식(운영체제 OS, 커널, 쉘, 시스템콜, API)
CS지식 훑어보기 - 운영체제 핵심 정리기술면접에서 주로 나오는 질문 예시💡 참고 \- 잔재미코딩 youtube \- 운영체제 익힐 때 전공자들이 많이 보는 '공룡책'(OPERATING SYSTEM CONCEPTS)언제 멀티 프로세스를 사용하고, 언제 멀티
18.2023.12.17 TIL - 토이프로젝트 수정(모바일 청첩장)
💡 CSS 내용이 너무 많아져서 파일을 따로 분리할 필요성을 느낌 < CSS파일을 만든 후 HTML에 첨부하는 방법> 1\. html파일 내 <head>태그 안에 아래 내용 넣어주기 참고) 맥에서 파일경로 복사하는 방법복사 : Command + Op
19.2023.12.18 TIL - 토이프로젝트 수정(모바일 청첩장)
해결 \- 부트스트랩으로 가져온 floating box 안에 기존에 있던 클래스들이 너무 많아서 class 중복 문제 해결 \-기존) css파일 첨부 경로를 repository 이름으로 하면 되는거였음!!변경 전) 내 컴퓨터 상의 경로를 그대로 올림변경
20.2023.12.19 TIL - 복습(flex box, grid), CS지식(자료구조, 알고리즘)
flexbox 복습 with flexbox froggy(https://flexboxfroggy.com/- grid 복습 with grid garden(https://cssgridgarden.com/- ⭐️ 중요한 포인트flex에서는 가로 row / 세
21.2023.12.20 TIL - CS지식(하드웨어, 자료구조, 알고리즘)
하드웨어 - PC부품 역할 알아보기(참고 : 댕테크 youtube)자료구조, 알고리즘(참고 : 노마드코더 youtube)< 6가지 기본부품 >1\. CPU(중앙처리장치)인간의 뇌트랜지스터의 집합체성능표에서 체크해보아야할 3가지동작 속도(클럭) : 트랜지스터가 얼마
22.2023.12.21 TIL - 첫 팀프로젝트 시작, Git 명령어 특강
드디어 본캠프 시작! OT 진행 및 팀 편성첫 팀프로젝트 시작팀 이름 정하기, 팀원 간 자기소개 with MBTIFigma를 활용한 와이어프레임 협업 작성Git hub 팀 repository 생성연습용 : https://github.com/jigico/mini
23.2023.12.22 TIL - git 명령어 복습, 팀프로젝트 제작(역할분담, 담당 영역 코드작성)
git, git hub 복습☠️ 오류 (1)git 설치 중 오류homebrew 코드를 터미널에 복붙했더니 password 하고 열쇠모양이 나왔는데 아무리 키보드를 눌러도 비밀번호 입력이 안되는 것이다!!오류 메시지 구글링 아무리 해도 나같은 경우는 안보이는 것 ㅜㅜ🖥
24.2023.12.24 TIL - 팀프로젝트 트러블 슈팅(a태그 새로고침,id유일성),object-fit, OBS
팀프로젝트 수정오류 및 해결 정리
25.2023.12.26 TIL - 팀프로젝트 트러블 슈팅(git 동기화, fatal오류), fbase 문서id 가져오기
팀프로젝트 및 트러블 슈팅다른 팀원분께서 본인 branch에는 Push를 하셨는데 막상 내 컴퓨터에서 checkout 하여 팀원분 브랜치를 열면 코드가 최신화가 안됨git remote update : 작성 시 오류는 없는데 최신화는 안됨git pull : 오류git p
26.2023.12.27 TIL - KPT회고/ z-index, header 고정, target blank 제거/ OBS
📘 오늘의 공부 팀 프로젝트 트러블슈팅 새로운 지식 정리 header 고정하기 🏹 트러블 슈팅 ☠️ 오류 (1) 헤더를 고정하고 스크롤을 내려보니 부트스트랩으로 가져온 카드가 겹친다?! 해결 헤더 css에 추가하니 해결! (헤더에게 z축으로의 쌓임 맥락 우
27.2023.12.28 TIL - git과 local 연동 방법 / velog 표, 글자색/ button태그 링크연결
git과 local을 연동하는 첫 단계 알아보기팀프로젝트 발표 및 소감📝 참고 : zangsu velogcd .. : 뒤로가기cd 폴더명 : 더블클릭과 같음pwd : 현재 디렉토리 확인해당 폴더가 아닌 바탕화면 등 다른 폴더에서 진행하면 내 컴퓨터의 경로가 git에
28.2023.12.29 TIL - JS 강의 1주차(변수, 데이터 타입, 형변환, 연산자, 함수, 스코프, 조건문, 객체, 배열)
JS 문법 강의 1회독 - 변수, 데이터 타입, 형변환, 연산자, 함수, 스코프, 조건문, 객체, 배열
29.2024.01.03 TIL - 알고리즘, sort(오름차순, 내림차순)
알고리즘 1일차! (특강 요약, 오늘의 문제)js sort 문법 (오름차순, 내림차순)js 문법 강의 1회독 (3주차~5주차 강의)1\. 자료구조와 알고리즘의 관계자료구조 : 요리 도구알고리즘 : 음식 만드는 방법 자체2\. 알고리즘을 공부해야 하는 이유문제 해결의 힘
30.2024.01.04 TIL - 알고리즘(두 수의 곱), 알고리즘 풀이 특강
알고리즘 특강 (알고리즘 풀이법 기초)알고리즘 문제풀이 (두 수의 곱)JS 문법 강의 2회독차1\. 알고리즘 풀이에 필요한 기초 js지식1) 변수, 상수데이터 저장하기 위한 공간보조 기억 장치 활용ex) 연습장에 써서 문제풀기(다 기억할 수 없어서)와 같은 맥락let
31.2024.01.05 TIL - 알고리즘(시간복잡도, 배열 / 몫 구하기)
알고리즘 특강(시간복잡도, 배열)알고리즘 문제풀이(몫 구하기)js 문법 강의 2회독시간복잡도 : 최악의 경우를 기준으로 계산해야함문제해결 거리는시간과 입력 함수의 관계알고리즘 구현시 짧은시간 가능하게함수행성능을 최악의상황을 가정하여 정량화하는 방법공간복잡도중요도 높지
32.2023.01.06 TIL - github 원격저장소 연결끊기/ hr태그(수직선)/ git push 에러
github 원격저장소 연결 끊기(참고 : 좌충우돌 프론트엔드 생존기)연결되어있는 원격저장소 확인하기git remote -v연결된 원격저장소 연결 끊기git remote remove origin연결 해지가 잘 됐는지 다시 한 번 확인git remote -v새로운 원격저
33.2024.01.08 TIL - 배열 메소드, prettier 설치
배열 메소드 정리
34.2024.01.09 TIL - 알고리즘, git 2차 특강 정리(branch 생성, 이동, 삭제, 확인 / Pull Request/ 협업가이드)
알고리즘(Math.trunc, reduce) git(git branch, switch-c, checkout-b / merge, Pull Request / git fetch/ 실전가이드)
35.2024.01.10 TIL - 알고리즘, 팀프로젝트 시작(영화검색 사이트)
알고리즘 Code Kata팀프로젝트 시작(목표 설정, 개발환경 세팅, 역할분담)문제 : 배열의 평균값정수를 담고 있는 배열 arr의 평균값을 return하는 함수, solution을 완성해보세요.제한사항arr은 길이 1 이상, 100 이하인 배열입니다.arr의 원소는
36.2024.01.11 TIL - 알고리즘, 트러블슈팅
알고리즘 Code Kata팀프로젝트 트러블슈팅문제 1. 약수의 합문제 설명정수 n을 입력받아 n의 약수를 모두 더한 값을 리턴하는 함수, solution을 완성해주세요.제한 사항n은 0 이상 3000이하인 정수입니다.풀이 : for문으로 약수구해서 더하기풀이 이유 :
37.2024.01.12 TIL - 알고리즘, 트러블슈팅(select박스 option에 click이벤트 주는법)
알고리즘 코드카타팀프로젝트 - select박스에 click이벤트 연결시키기트러블슈팅문제<문제 설명>함수 solution은 정수 x와 자연수 n을 입력 받아, x부터 시작해 x씩 증가하는 숫자를 n개 지니는 리스트를 리턴해야 합니다. 다음 제한 조건을 보고, 조건을
38.2024.01.13 TIL - 웹팩, dotenv, gitignore, 동기/비동기(promise, async, await)
웹팩 개념 이해, 설치 및 사용env파일이란? (dotenv)gitignore1/12 js 특강 정리(동기/비동기 - promise, async, await)1\. 웹팩이란?팀원들끼리 이것저것 깔아놓은 외부 패키지를 하나의 파일로 합쳐주는(번들링) 착한 친구 -> 모듈
39.2024.01.14 TIL - 알고리즘(map, reverse, Math.sqrt, Math.pow, toLowerCase, match, split)
알고리즘문제 : 자연수 뒤집어 배열로 만들기문제 설명자연수 n을 뒤집어 각 자리 숫자를 원소로 가지는 배열 형태로 리턴해주세요. 예를들어 n이 12345이면 5,4,3,2,1을 리턴합니다.제한 조건n은 10,000,000,000이하인 자연수입니다.내 풀이 (실패) -
40.2024.01.15 TIL - 알고리즘(join), 팀프로젝트(웹팩 용량 줄이기, readme 작성)
알고리즘 코드카타팀프로젝트(웹팩 용량 줄이기, readme 작성)문제 : 정수 내림차순으로 배치하기<문제 설명>함수 solution은 정수 n을 매개변수로 입력받습니다. n의 각 자릿수를 큰것부터 작은 순으로 정렬한 새로운 정수를 리턴해주세요. 예를들어 n이 11
41.2024.01.16 TIL - 알고리즘(reduce), js 2회독(데이터 할당 과정, 실행 컨텍스트, This), 팀프로젝트 KPT 회고
📘 오늘의 공부 알고리즘 코드카타 js 강의 2회독 팀프로젝트 KPT 회고 (본 프로젝트의 자세한 내용이 담긴 회고는 아래 링크로!) 팀프로젝트 - 'TMDB를 활용한 영화 검색사이트' 회고 📝 알고리즘 문제 : 하샤드 수 > 양의 정수 x가 하샤드 수이려면 x의
42.2024.01.17 TIL - 알고리즘(Math.min, Math.max, push), 리액트 입문(SPA, 컴포넌트, JSX, Props)
알고리즘 코드카타리액트 시작! - 입문 1주차 강의 수강문제 : 두 정수 사이의 합<문제 설명>두 정수 a, b가 주어졌을 때 a와 b 사이에 속한 모든 정수의 합을 리턴하는 함수, solution을 완성하세요.예를 들어 a = 3, b = 5인 경우, 3 + 4
43.2024.01.18 TIL - react 입문(map, filter, add, delete), VSC(extensions, 단축키)
리액트 입문 강의 1회독 완강!(주요 개념 : map, filter, add, delete)VSC 특강 - VSCode 단축키, 유용한 확장프로그램 정리JSX에서 style을 넣는 2가지 방법jsx에서 태그 안에 style 객체 넣기style 객체를 변수로 넣으면 코드
44.2024.01.19 TIL - 알고리즘(findIndex, indexOf, replace, join), 리액트 개인과제
알고리즘 코드카타개인과제 시작!(todo list 만들기)문제 : 서울에서 김서방 찾기<문제 설명>String형 배열 seoul의 element중 "Kim"의 위치 x를 찾아, "김서방은 x에 있다"는 String을 반환하는 함수, solution을 완성하세요.
45.2024.01.20 TIL - 알고리즘(Math.max, min, filter) / 개인과제(onKeyPress)
알고리즘 코드카타리액트 개인과제문제 : 제일 작은 수 제거하기<문제 설명>정수를 저장한 배열, arr 에서 가장 작은 수를 제거한 배열을 리턴하는 함수, solution을 완성해주세요. 단, 리턴하려는 배열이 빈 배열인 경우엔 배열에 -1을 채워 리턴하세요. 예를
46.2024.01.21 TIL - 알고리즘(repeat), 리액트 입문강의(구조분해할당)
알고리즘 코드카타 - repeat() 메서드리액트 입문강의 2회독 - 구조분해할당문제 : 수박수박수박수박수박수?<문제 설명>길이가 n이고, "수박수박수박수...."와 같은 패턴을 유지하는 문자열을 리턴하는 함수, solution을 완성하세요. 예를들어 n이 4이면
47.2024.01.22 TIL - 개인과제 트러블슈팅(github 배포, gif파일 삽입), 리액트 props 개념정리
🏹 트러블 슈팅 github 배포 오류 (readme 출력) 깃헙 배포 사이트주소 눌렀더니 리드미 나옴... Why?!?!!?!? 해결 참고 : https://rosedaily101.tistory.com/81 원인 : 리액트 진행 시 다른 폴더 내에 있어서 해당
48.2024.01.23 TIL - 개인과제 트러블슈팅, 과제 후기
리스트를 working -> done으로 이동시키려는데 2개씩 이동되는 버그 발생원인 : 중복되는 id값 생성처음에는 id: box.length + 1 로 했는데, 리스트를 삭제하면 length도 함께 변하므로 length에 단순히 1을 더하면 같은 id를 가진 리스트
49.2024.01.24 TIL - 리액트 숙련(styled components, React Hooks(useState, ...)
1강 ~ 11강 중 주요내용 정리1\. Styled Components 란? CSS in JS : js코드로 css 작성하기 -> css 작성하는데 if, 삼항연산자 등 활용 가능!2\. 설치 및 사용 방법1) 설치 방법VSC plug in 설치 & \`npm inst
50.2024.01.25 TIL - 리액트 숙련(Redux, 비동기, promise, REST), 알고리즘(유클리드 호제법)
redux란 : 중앙 State 관리소, 전역 상태관리 라이브러리useState는 props 필요 -> prop drilling 발생\-> 이를 방지하기 위해 등장한 Redux!어떤 컴포넌트에서든지 state 접근, 제어 가능redux 설치yarn add redux r
51.2024.01.26 TIL - 알고리즘(radix, reverse), Vite 설치방법, input(type="date")
📝 알고리즘 문제 풀이 (풀이 참고 : 3진법 뒤집기) 사용된 메서드 Number.toString(radix) radix - 진법 Number.toString() : 숫자를 문자열로 반환 인자로 radix 넣어주면 해당 진법의 수로
52.2024.01.29 TIL - 트러블슈팅(styled components 실행 오류, CRA 생성)/ 조건부 스타일링, 절대경로, hover
📘 오늘의 공부 개인과제 트러블슈팅 styled-components 오류 🏹 트러블 슈팅 > ### 1. styled-components 오류 문제 : styled components 작성 전에는 npm start로 브라우저 잘 실행시키고 있었는데, styl
53.2024.01.30 TIL - 트러블슈팅(날짜순 정렬, htmlFor 오류, $조건부 스타일링) / json server(fake API)
문제 : '연월일' 형식으로 받아온 데이터를 sort((a,b)=>b-a) 정렬하려 했더니 yyyy-mm-dd 형식이 아니라서 정렬 못함 -> new Date()로 재가공 하려해도 안됨원인맨 처음 받아온 날짜데이터가 원래 'yyyy-mm-dd' 형식이었음 -> 얘를 렌
54.2024.01.31 TIL - 트러블슈팅(props 컴포넌트 관리)/ React Router Dom, Dynamic Route, useParams, Link/ GlobalStyle
원인 : navButtons.jsx(상위의 버튼들)에 '멤버이름 배열', '버튼 onClick 함수'가 들어있었고, 같은 라인의 컴포넌트에게 정보를 전달하려다 보니 <NavButtons /> 를 통해 정보를 받아오니까 버튼이 2개가 생겨버린것....'같은 라인'에
55.2024.02.01 TIL - react router Link에 style 적용, 리액트 UD(수정 삭제), window.confirm, uuid, box-sizing
(참고 : react-router-dom의 Link를 styled-components로 꾸미기)시작점지금까지 styled-components는 jsx 태그에만 걸어줬는데, Link는 react-router-dom에서 import 해온 컴포넌트...?!이런 리액트 컴포넌
56.2024.02.02 TIL - 리액트 Context API, Redux(설치, 개념, 작동원리, action type, payload, action creator)
리액트 useContext(): Context API 사용하기 Redux 사용하기 1) 설치하기 yarn add redux react-redux : redux, react-redux 설치하기 2) 폴더 구조 설정하기 redux 폴더구조 설정하기 : 이해보다는 그냥
57.2024.02.03 TIL - Vite 프로젝트 생성 시 reset.css 적용하기, Redux 핵심 정리
reset.css 내용(출처 : CSS Tools: Reset CSS)위 내용의 reset.css 파일을 App.jsx에 적용하고 싶은데, export import를 해야하는건지... reset.css 파일을 App.jsx에 적용을 어떻게 해야하는건지 도저히 모르겠어서
58.2024.02.05 TIL - form태그의 특징
form태그의 특징 button (type = submit) : enter키로도 제출 가능 onClick, onChange 얘네 둘을 form태그에 onSubmit으로 한번에 가능! onSubmit : event를 받음, event.preventDeault();
59.2024.02.06 TIL - 트러블슈팅(git ignore 오류)
상황.git ignore 파일을 작업폴더 root 경로에 생성함node_modules 라고 내용 넣어줬는데도 계속 node_modules를 트랙킹함시도 : 구글링해보니 캐시를 지우고 처리하면 된다고 해서 시도해봄 - 실패원인git clone 하는 과정에서 작업중인 폴더
60.2024.02.07 TIL - 팀프로젝트 초기세팅(Travel Vibe)
내 게시물을 포함한 모든 게시물을 볼 수 있는 공간→ 블로그, 커뮤니티, SNS 모두 될 수 있음(뉴스를 보여주는 사이트가 아님!)프로젝트 컨셉 잡기뉴스피드 컨셉 : 여행 블로그필수 기능로그인, 회원 가입Authentication 에서 제공하는 api를 이용하여 아래
61.2024.02.08 TIL - 모달창 만들기!, react icons, 트러블슈팅(manifest, input password)
모달창 만들기 css로 모달창 만들기 참고 : https://cocoder16.tistory.com/84 https://velog.io/@fearofcod/React-modal%EC%B0%BD-%EB%A7%8C%EB%93%A4%EA%B8%B0 https://velog.
62.2024.02.11 TIL - regex 정규표현식(이메일, 비밀번호의 형식 제한)
이메일 형식을 제한하는 정규 표현식 위 정규표현식이 따르는 규칙 이메일 주소는 @ 기호를 포함해야 합니다. @ 기호 앞에는 영문 대소문자, 숫자, 밑줄(_), 마침표(.), 퍼센트 기호(%), 플러스 기호(+) 또는 하이픈(-)이 올 수 있습니다. @ 기호
63.2024.02.13 TIL - 트러블슈팅(form태그 warning), enter키로 버튼실행, prettier 기본설정
🏹 트러블슈팅 form태그 warning 원인 : form태그의 중복 사용 참고 : https://ghksals0904.tistory.com/100 새로운 지식 enter키로 버튼 실행하기 로그인 상태 유지하기 참고 : https://velog.io/@cyo
64.2024.02.14 TIL - 트러블슈팅(firebase collection()오류, authentication 로그인 로직
firebase collection()오류에러 메시지 : FirebaseError: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFir
65.2024.02.15 TIL - firebase authentication 정리, 팝업/모달 차이
(이미지 출처)firebase에서 제공하는 로그인, 회원가입 등의 인증 UI로그인, 회원가입 로직을 아주 간편하게 구현할 수 있다는 장 점 !!🔗 firebase authentication 공식 문서firebase 프로젝트 > 빌드 > authentication에서
66.2024.02.15 TIL - 리액트 비동기 호출(fetch)
fetch : 가져오다 (take와 유사)\-> api 주소를 '가져오다' 정도 따라서, fetch('https://api.example.com/items') \-> url을 가져오겠다!fetch('url') : response를 가져옴\-> respon
67.2024.02.16 TIL - 리액트 심화(redux toolkit, slice, json server, axios, interceptor, thunk, 리액트쿼리, throttling, debouncing, 인증/인가, JWT토큰)
Redux Toolkit toolkit : tool(편하게 쓰기 위한 도구), kit(도구를 간편하게 쓰기위한것) = 도구모음 패키지 yarn add @reduxjs/toolkit npm install @reduxjs/toolkit store 구성, action
68.2024.02.19 TIL - json server, JWT(회원가입, 로그인, 정보수정), 로컬스토리지
json-server 구축하기 json-server 패키지 설치 npm i json-server yarn add json-server root경로에 db.json 파일 생성 -> http://localhost:5002/letters (1번 id에 접근하려면 : ht
69.2024.02.20 TIL - 트러블슈팅(로그인 401, 리듀서 state수정 오류, 로그인상태 유지, 이미지 preview 및 업로드)
문제 : 로그인시 토큰 전달하여 유저정보를 GET하려는데 토큰 전달이 제대로 안됨(비동기 통신에서 처리 순서의 문제)로직 : 로그인 시 3가지를 실행JWT 서버에 POST 메서드로 로그인 Request 보내기(Response로 유저정보 들어옴 - token, id, n
70.2024.02.21 TIL - 트러블슈팅(JWT 회원정보수정 - 이미지변경 오류, 토큰의 일시적 유효성, thunk, Date.now)
문제 : 프로필정보중 이미지와 닉네임을 변경하면 닉네임만 변경되고 이미지는 JWT서버로 PATCH가 제대로 이뤄지지 않음문제의 코드원인 : 프로필정보를 변경할때는 PATCH로 정보를 넘겨주는것 뿐만아니라 추가적인 과정이 더 필요함!accessToken이 유효한 경우,
71.2024.02.22 TIL - 개인프로젝트(팬레터함 심화) 회고, Redux thunk
회고 사용한 기능 : Redux toolkix, axios, json server, JWT 인증/인가 기능별 회고 redux toolkit 처음엔 리덕스 자체도 제대로 이해하지 못한 상태에서 작성되어있는 리덕스 코드를 리덕스 툴킷으로 바꾸려니 뭐가 뭔지도 모르겠
72.2024.02.23 TIL - 아웃소싱 팀프로젝트 시작(초기세팅)
기업이나 조직이 자체적으로 처리하기 어려운 작업을 외부 업체나 개인에게 위탁하여 수행하는 것지도 API, 유튜브 API, 설문조사 API 등을 사용할 수 있음ex) 사람인, 전기차 충전소 찾기, 지역별 축제 찾기 등프로젝트 주제 : 광고주가 자신의 상품 광고에 적합한
73.2024.02.24 TIL - firestore Vite에서 사용하기, swiper로 slider 만들기
기존 CRA혹은 yarn으로 만든 리액트 프로젝트에서 firestore를 쓰려면 env파일에서 이렇게 쓰면 됐는데,Vite으로 프로젝트를 생성한 경우에는 이렇게 앞에 VITE\_ 이렇게 붙여줘야함config.js에 하던 설정 중 = process.env; 이 부분도
74.2024.02.26 TIL - swiper, slick 비교(slider 리액트 라이브러리)
이번 과제하며 느낀 swiper와 slick 비교장점header의 배너처럼 간단하고 단순하게 넘어가는거 만들기엔 쉬움공식문서가 잘되어있어 처음 접하더라도 쉽게 사용할 수 있음(예시로 보여주는것까진 없지만 비교적 친절한 편)단점자율성이 좀 떨어지는 느낌을 받았음섬세한 작
75.2024.02.27 TIL - youtube API키 발급하기, dotenv 오류, props validation 오류, session storage, firebase 로그인, 소셜로그인, firestore 문서id 지정
youtube API 키 생성하기새 프로젝트 생성검색 > 'youtube data api' > v3 api 찾기 > '사용' 선택프로젝트 > '사용자 인증 정보' > '사용자 인증 정보 만들기' > API키생성중 '키 제한'에서 'Youtube Data API v3'
76.2024.02.28 TIL - 팀프로젝트 회고(Utrend)
이번 프로젝트는 수준 별 수업 중 베이직반 수강생들이 모여 팀을 이루었는데, 처음에는 우리끼리도 잘 할 수 있을까 걱정이 되었습니다. 그런데 걱정에 비해 다들 본인이 할 수 있는 최대한을 구현하려 적극적으로 노력하는게 느껴졌고, 결과물 또한 걱정에 비해 긍정적으로 나
77.2024.02.29 TIL - Redux Toolkit 사용법, React query(tanstack)정리, mutation 사용법 2가지, mutation.isPending, firebase(firestore, storage), vercel 오류
✅ 방식 1. mutation으로 정의 후 mutation.mutate()로 사용✅ 방식 2. mutation에 이름 붙이기, 붙여준 이름으로 mutation사용하기https://medium.com/marlinelee2/react-firebase-storage
78.2024.03.01 TIL - useRef(모달창 배경 클릭시 닫힘), axios instance, axios
useRef란?리액트에서 특정 DOM요소를 지정하고 싶을 때 유용하게 사용됨ex 1) 화면 렌더링 시 input태그에 커서를 focusing 시키고 싶을 때ex 2) 모달창 배경 클릭 시에도 모달창 닫고 싶을 때DOM 요소 접근방법으로서의 useRef : 특정 DOM요
79.2024.03.02 TIL - form태그의 활용!, tanstack-query(todo list), 한 컴포넌트에서 mutate 2개 쓰는법
const TodoForm = ({ onSubmitTodo }) => { const handleSubmit = (e) => { e.preventDefault(); // form태그는 제출 시 자동으로 새로고침되는 특성이 있음 // ⭐️ 새로고침 방지
80.2024.03.03 TIL - createBrowserRouter로 라우터 설정하기, outlet, GlobalStyles
createBrowserRouter outlet GlobalStyles
81.2024.03.04 TIL - Typescript 강의 정리
(3-2강)boolean - 참, 거짓 (true, false)조건문, 비교 연산 등에서 주로 사용2가지의 상태를 표현하고 싶을 때 사용(3가지 이상의 상태는 enum, string을 사용)numbertypescript에서는 정수, 실수, n진수 등 까지 전부를 num
82.2024.03.05 TIL - typescript 트러블슈팅(form태그 input type오류, styled-components props type오류, setState props내려주기, RTK useSelector type오류)
문제 : form태그의 자식요소 input 값을 e.target.title.value 이런식으로 지정했는데, EventTarget형식에 속성이 없다는 에러가 나온다.시도 1 : target 대신 currentTarget 사용(참고 : https://nuhend
83.2024.03.06 TIL - nwitter 클론코딩(fb auth github로그인), 비동기 함수 type, react query에서 type, form태그의 ts활용
firebase authentication에서 github 활성화 클릭!\-> github application 정보가 필요함github에서 new OAuth application 생성하기https://github.com/settings/developersHo
84.2024.03.07 TIL - 트러블슈팅(tanstack-query mutation queryKey부분 오류, new Date type오류), 캐싱된 query 사용하기, custom hook생성
오류 메시지 : "todos"유형에 'InvalidateQueryFilters'유형과 공통적인 속성이 없습니다.react-query 3.xx 버전 쓰는 다른 분과 비교해보니 그 분은 이런 Type에러가 안생기고 있었다...! 뭔가 이상하다문제의 코드원인 : tansta
85.2024.03.08 TIL - JWT 로그인 로직, 트러블슈팅(JWT 로그인시 session storage 확인 안됨)
로그인 비활성화시 로그인, 회원가입 페이지에만 접근 가능로그인 활성화시 홈, 디테일 페이지에 접근 가능로그인 상태는 session storage내의 token 유무로 판별문제 : 로그인하면 바로 session storage를 확인해서 토큰이 있으면 홈화면으로 넘겨줘야하
86.2024.03.11 TIL - Next js 강의 정리
CSR : Client Side Rendering지금까지 공부한 리액트로 웹페이지 구축하기SSR : Server Side Rendering 전통적 웹페이지 : SSR + MPA 구축CSR(Client Side Rendering)build -> Static Server
87.2024.03.12 TIL - 트러블슈팅(Next.js thunder client 요청 오류)
오류 메시지 : write EPROTO 1340032638144:error:100000f7:SSL routines:OPENSSL_internal:WRONG_VERSION_NUMBER:../../third_party/boringssl/src/ssl/tls_record.c
88.2024.03.13 TIL - Next.js(query provider)
리액트 쿼리 사용 시 app.jsx에서 QueryClientProvider로 감싸줬던것과 똑같음!provider.tsx 파일 따로 만들고, 거기서 children을 props로 받아 children을 QueryClientProvider로 감싸주는 방식.root layo
89.2024.03.14 TIL - 트러블슈팅(SSG 데이터 가져오기 오류, 구조분해할당 오류, CSR map오류, useRouter 오류), Dynamic Route Segments(route handler로 Delete, toggle하기), next.js에서 이미지넣기
🏹 트러블슈팅 SSG 데이터 가져오기 오류 문제 1. 내부 서버에서 json-server의 db를 가져오고, 내부 서버에서 클라이언트로 데이터를 반환해서 전달해주는 로직을 짰는데, db를 수정했는데도 자꾸 수정 전 데이터가 들어왔다. 원인 cache: forc
90.2024.03.15 TIL - dynamic route에 같은 메서드를 두번 써야할땐?!, custom hook에서의 상태관리(feat.zustand)
📝 \[id] route에 이미 todo의 isDone 상태를 toggle하는 PATCH api가 존재하는 상황에서, todo의 내용을 수정(update)하는 로직의 PATCH도 만들고 싶었는데, 같은 route파일에서는 PATCH를 한번만 선언할 수 있다?!이럴땐
91.2024.03.18 TIL - editor 라이브러리, git협업(organization, issues, milestones), supabase 세팅하기
그림판 라이브러리 tldraw https://github.com/tldraw/tldraw https://www.tldraw.com/ excalidraw https://github.com/excalidraw/excalidraw https://excalidraw.com
92.2024.03.19 TIL - next.js 프로젝트에서 src없이 폴더 분리하기, 트러블슈팅(supabase에서 data가 빈배열일때 - RLS policy, api로 불러온 배열data의 type오류)
Next.js - src없이 폴더 분리하기 > 📝 프로젝트 생성시 'src폴더를 사용하시겠습니까?'하고 물었을때 No라고 답하면 src폴더 없이 root에 app폴더가 생성된다. 그런데 components, assets등 폴더들을 별도로 관리하고 싶어서 src를 수
93.2024.03.20 TIL - supabase에서 배열값에 해당하는 데이터 불러오기
코드 설명위의 코드는 Supabase를 사용하여 주어진 그림 ID 배열에 해당하는 그림들의 URL을 가져오는 함수입니다.getDrawingUrls 함수는 비동기 함수로, 그림 ID 배열을 매개변수로 받습니다.함수 내부에서는 Supabase의 from 메서드를 사용하여
94.2024.03.20 TIL - 좋아요 로직 구상해보기, supabase에 배열의 값과 일치하는 테이블의 값 가져오기
아직 이 로직이 맞는지 몰라 일단 구현하는 과정을 담아보기 위해 정리해본다.화면 렌더링시 좋아요 하트에 색채울지 확인( = 로그인한 유저가 이미 좋아요한 그림인지 먼저 체크해야 한다.)1) 로그인한 유저의 email을 가지고 users에서 해당하는 email의 draw
95.2024.03.21 TIL - 좋아요 로직 (Next.js Palette Ground 프로젝트)
화면 렌더링시 1 : 로그인 상태일때, 유저가 좋아요한 그림인지 체크하기(좋아요한 그림이면 하트 색 채워놓기)화면 렌더링시 2 : 해당 그림의 좋아요 개수 조회좋아요 클릭시 1 : likes테이블에 해당 user email과 그림 정보(id, url) row 추가좋아요
96.2024.03.22 TIL - textarea 속성 동적으로 설정하기, 트러블슈팅(query키를 동시에 여러개 무효화하기 - prefix), supabase 열에서 특정 값 빼고 불러오기, 쿼리값 재정렬 후 업데이트하기
로그아웃 상태인 경우 해당 textarea에 readOnly 속성을 주고, placeholder 문구도 "로그인이 필요합니다"로 변경하고 싶다.textarea에 동적으로 속성을 주고 싶을 때의 방법은 다음과 같다.
97.2024.03.21 TIL - 트러블슈팅(유저가 그린그림 가져오기 로직변경, 좋아요 로직변경)
유저가 그린 그림 가져오는 로직 변경기존 : users테이블의 drawings_array에서 id배열 가지고와서(인자로 받음), 그 id들과 일치하는 url들을 posts에서 가져오기변경 후 : posts에서 그림주인 email과 일치하는 drawing_url들을 가져
98.2024.03.24 TIL - header의 프로필 이미지 변경 로직, enabled와 isPending 예시 참고 (Palette Ground 프로젝트), supabase 각 메서드 샘플 코드
header의 프로필 이미지를 현재 로그인한 유저의 프로필 이미지로 업데이트로그인 상태일때의 ‘로그아웃’, ‘프로필 이미지’ 부분을 컴포넌트로 분리함header-loggedIn.tsx (컴포넌트 이름 : LoggedIn)header 내의 LoggedIn 컴포넌트에서 u
99.2024.03.26 TIL - 최종프로젝트 1일차(아이디어 기획, 디자이너 포함 첫 팀회의)
10:10 ~ 10:30 (발제)최종프로젝트 진행 방식, 일정, 작성해야 할 문서안내 등 발제10:30 ~ 13:00 (오전 회의)최종프로젝트 방향성, 일정 이야기 나누기각자 프로젝트 주제, 아이디어 조사하기새로운 팀원이 들어올 수도 있다는 긴급 회의원장 튜터님과 1:
100.2024.03.27 TIL - 최종프로젝트 2일차(디자이너 포함 회의, 초기 와이어프레임 제작)
styled-components vs tailwindCSS 기술적 의사결정styled components 사용하고싶은 이유 : css in js 조건부 렌더링 용이, 유지보수, 가독성이 좋음tailwind css 사용하고싶은 이유단 : 코드 지저분css modules
101.2024.03.28 TIL - 최종프로젝트 3일차(데이터베이스 설계, 와이어프레임 수정, 디자이너 회의)
\-> supabase에서 foreign key로 연결 예정10:10 ~ 13:45 : 와이어프레임 내용 추가 회의, 페이지 구성 수정, 역할 분담어제 각자 몇몇 페이지씩 맡아서 와이어프레임을 작성했는데, 작성하면서 들었던 의구심이나 논의해볼만한 사항이 있는지 페이지별
102.2024.03.29 TIL - 최종프로젝트 4일차(데이터베이스 설계 및 foreign key 연결, github 협업 준비, 프로젝트 셋업, api명세서, 트러블슈팅)
supabase DB - foreign key로 연결10:10 ~ 13:00 : 데이터베이스 설계 총 정리 완성, 튜터님 피드백어제 엑셀파일에 정리해놓은 데이터베이스 테이블을 foreign key까지 설계해서 정리튜터님 피드백 : 다중 이미지를 테이블에 업로드할때, 배
103.2024.03.30~03.31 TIL - 최종프로젝트 5,6일차 (레이아웃, nextUI 초기설정, 이미지 미리보기, 다중 이미지 스토리지 업로드, 텍스트 formData table업로드)
individual actioin add페이지 레이아웃 완성community 레이아웃 대강 완성community 디테일 페이지 고민✅ 페이지 url은 바뀌는데 배경에는 이전페이지가 흐리게 보이고, 이동한 페이지는 모달창처럼 이전페이지의 위에 보여지는 그런 기능을 구현하
104.2024.04.01 TIL - 최종프로젝트 7일차(스토리지에서 다중이미지 url 배열받기, url배열 테이블로 insert) / 첫 오프라인 회의!
'이미지 스토리지 업로드 & url가져오기' 로직 수정 원래는 스토리지에 이미지 업로드하는 api따로, 파일들 url 가져오는 api 따로 하고싶었는데, 이미지 파일명을 알고있어야 스토리지에서 이미지 url을 가져올수 있어서 하나의 api로 합쳤다...! (파일명을 u
105.2024.04.02 TIL - 최종프로젝트 8일차(트러블슈팅-formData, nextUI 드랍다운 타입에러), 커뮤니티 게시글 등록, 커뮤니티 게시글 상세 모달창
문제 : formData를 인자로 받아 supabase 테이블에 insert하는 과정에서 계속 '이 호출과 일치하는 오버로드가 없습니다' 타입 오류 발생시도inputData의 타입을 지정해주는 FormDataType 만들어보기 : null일수도 있다고 지정하는건 좋은
106.2024.04.03 TIL - 최종프로젝트 9일차 (트러블슈팅(useQuery시 같은값만 들어올때, 모달창 띄우기 전에 useQuery 실행될때, img_url 타입에러), foreign key 연결된 값 함께 불러오기)
문제 : 커뮤니티 리스트 페이지에서 카드 클릭하면 모달창에 post_id를 props로 넘겨줘서 그 post_id에 해당하는 정보를 불러와서 모달창에 띄워주도록 하는 로직을 구현하고 있었다.그런데 나중에 수정, 삭제 하고나면 mutation해서 쿼리키 무효화까지 하고싶
107.2024.04.04 TIL - 최종프로젝트 10일차 (기존 데이터 불러와서 수정 update -다중 이미지 포함 )
기존에 작성되어 있던 데이터 불러오기페이지에서 params로 action_id를 받아오고, 해당 action_id와 일치하는 id column의 데이터를 individual_green_actions 테이블에서 가져온다.이때, 외래키로 연결해놓은 green_action_
108.2024.04.05 TIL - 최종프로젝트 11일차 (커뮤니티 글 수정 - 단일 이미지 포함 update, queryKey 2개 동시 무효화, next auth로 리팩토링)
새롭게 업로드한 이미지 file 있으면 - 스토리지 업로드 + url 반환 -> formData + url을 updatefile 없으면 - url없이 텍스트 formData만 updateformData update (url은 있으면 넣고 없으면 말고) -> 없으면 부분
109.2024.04.07 TIL - 최종프로젝트 13일차(최신순, 좋아요순 정렬)
기존 api 수정 - 외래키로 연결된 likes 테이블의 post_id 가져오는 로직 추가하기useQuery로 가져온 communityList를 가지고 정렬 구성하기페이지 렌더링시 + '최신순' 클릭시 - sortedLatestCommunityList를 map,'좋아요
110.2024.04.08 TIL - 최종프로젝트 14일차(이미지 드래그 앤 드롭, 디자이너 회의)
참고 : https://guiyomi.tistory.com/148기존에 있던 이미지 미리보기, 이미지 삭제 로직드래그, 드롭 로직 추가드래그 상태를 useState로 관리, 드래그 중, 드래그 멈췄을 때, 드롭 했을 때 를 모두 함수로 관리하고, event를
111.2024.04.09 TIL - 최종프로젝트 15일차 (tailwind 속성 sticky, gradient / 트러블슈팅(로그인user_uid가 없을때 로직처리, 댓글 리스트 CRUD시 리스트 최신화 오류), 오늘의 이슈-디자인 가이드 1920px )
sticky댓글 입력칸을 댓글리스트 하단에 고정시켜달라는 디자이너의 요청...!시도 : absolute - relative, fixed 시도해봤으나 원하는대로 그림이 나오지 않음. 모달창 안에서 고정되질 않고 브라우저 하단에 고정된다거나...(fixed에는 relati
112.2024.04.10 TIL - 최종프로젝트 16일차 (디자이너 디자인 반영)
커뮤니티 글쓰기, 수정하기 모달디자인 수정✔️ 글씨색, 버튼색 수정✔️ 게시글 모달창 크기 키우기 ✔️ 취소버튼 없애기✅ (해결 안된 부분)x, 배경 클릭시 ‘작성을(수정을) 취소하시겠습니까?’ confirm작성된 내용 없이 ‘작성완료’ 클릭시 모달 안닫히게..?ㅠㅠㅠ
113.2024.04.11 TIL - 최종프로젝트 17일차 (디자인.......... header의 relative와 absolute 구성 싹 다 바꾸기, 반응형 디자인........ / 트러블슈팅(git graph, tailwind.config 'backgroundImg'))
about페이지에서 헤더를 넣으려는데 이미지 위에 겹쳐 뜨도록 만들려고 시도하고 있었다. 그런데 이미 이미지와 글자, 아래 내용들 전부다 relative와 absolute의 향연이었기 때문에.... 헤더 하나 넣고 이미지에 absolute를 주기에는 이미 이미지에 re
114.2024.04.12 TIL - 최종프로젝트 18일차 (반응형에 대한 연구-window.innerWidth, "resize", useEffect clean up함수, zustand활용 / mode에 따른 포인트 업데이트 / 공용 모달창 생성)
문제상황 : about페이지에서 화면이 줄어도 늘어도, 변해야 할 내용들이 그냥 1920 기준 픽셀 혹은 1020 기준 픽셀로 고정되어 있는 상황 발생원인 : const isDesktop = window.innerWidth >= 1920;이런식으로 선언해서는 화면 사이
115.2024.04.13~04.14 TIL - 최종프로젝트 19,20일차 (중간발표 ppt 준비, custom confirm modal창 적용 시도)
중간발표 ppt 준비custom confirm modal 적용 시도 (시도중)다른 팀원분이 모든 컴포넌트에서 사용할 수 있도록 confirm창을 custom해서 올려주셨는데 막상 적용해보니 잘 안됐다. ㅠ다른 컴포넌트에서 적용해본 분이 있어서 어떻게 적용했나 코드 리뷰
116.2024.04.15 TIL - 최종프로젝트 21일차 (트러블슈팅(모달창 '확인'클릭시 페이지 이동시키기), MVP 중간발표 회고, lighthouse, 디자이너 회의, realtime 조사)
📝 오늘 한 일 서비스 아키텍처 구상 및 발표자료 업데이트 모달창 '확인'클릭시 페이지 이동시키기 - 이슈 해결 🏹 트러블슈팅 모달창 '확인'클릭시 페이지 이동시키기 문제 : '로그인이 필요한 페이지 입니다' 모달창 띄우고, '확인'버튼 누르면 페이지 이동되게
117.2024.04.16 TIL - 최종프로젝트 22일차 (supabase realtime 실시간 채팅 - 로직 구상, db설계, 1:1 채팅방 구현)
첫 성공 참고 : https://www.restack.io/docs/supabase-knowledge-supabase-realtime-chat#clpzmyodr0m47vh0vntenah01 코드 작성한 메시지가 이렇게 바로 콘솔로 들어온다. 활용 시도 payl
118.2024.04.17 TIL - 최종프로젝트 23일차 (supabase realtime - 1:1 채팅 로직 수정, 단체 채팅방 구현 / 트러블슈팅(vercel build에러))
1:1 채팅방 로직 전면 수정 (테이블이 3개로 바뀌어서 전면 수정함) 메시지 리스트 가져오기 hook으로 분리개인액션 등록시 단체방 생성하도록 로직 추가단체방 컴포넌트 추가, 로직 구현 단체 채팅방 테스트 성공! 단체방 입장로직 전면 수정 (모집상태 자동 변경하도록,
119.2024.04.18 TIL - 최종프로젝트 24일차 (채팅방 목록 불러오기....)
useQuery - action_id에 해당하는 room id들 전부 가져와서 배열에 넣기(useState)useEffect 안에서 map으로 room id들 map해서 전부 다 구독하기 + 채팅방 rooms_info 테이블도 같이 구독하기(새로운 채팅방 추가될때 바로
120.2024.04.19~04.20 TIL - 최종프로젝트 25~26일차 (안읽은 메시지 카운팅, 참여중인 1:1 채팅목록 불러오기, 채팅방 및 리스트 디자인)
121.2024.04.22 TIL - 최종프로젝트 28일차 (마지막 주차 일정 정리, 그룹채팅방)
(월,화 - 기능 마무리, desktop디자인 마무리)(수 - laptop, mobile 디자인, 스켈레톤 Ui)개인채팅방 입력란 고정스크롤 아래에서부터 시작새창으로 열리게 수정화살표 누르면 개인액션 정보 나오게(링크로 이동한다하면 새 창으로 열어야할지?)채팅 수정,삭
122.2024.04.23 TIL - 최종프로젝트 29일차 (트러블슈팅, 그룹채팅방 목록 불러오기)
(팀)순규 피드백도 전달하기 데일리 스크럼 잘 되고 있나? 다들 뭐 남았나 들어보고 내 이번주 계획 전달해보기 ✅ 사용량 초과 어떻게 처리(내꺼)그룹채팅방 상대방 프로필들도 보여줘야됨 참여인원 띄우기 디자인 헤더 그룹채팅방 목록 불러오기 디자인 (월,화 - 기능 마무리
123.2024.04.24 TIL - 최종프로젝트 30일차 (next ui tab 리팩토링, 채팅방 리스트에서 '오늘/이전 알림' 분리, 헤더 채팅리스트 laptop, mobile 디자인)
기존 : next ui 탭 사용 -> 커스텀 극악 난이도...수정 : 기본 div, useState로 탭 구현처음엔 Next ui 에서 tab을 가져와서 사용하고 있었는데, 막상 디자이너의 디자인으로 커스텀하려니까 너무 복잡했다. next ui에서 가져온 컴포넌트 안에
124.2024.04.25 TIL - 최종프로젝트 31일차 (채팅방 - laptop/mobile디자인, 액션 문의리스트 - 오늘/이전 알림 분리, 디자인 전반, light house 체크, next Image태그 넣는법)
오늘 local host에서 light house 성능 체크를 해봤는데... 14점????? 도저히 믿을 수 없어서 계속 다시 해봤는데 ㅠㅠ ㅋㅋ이상하게 계속 점수가 바뀌더라..!점수가 바뀌던 원인 중 파악된 건 일단 반응형 디자인 중 브레이크 포인트 별로 점수가 다르
125.2024.04.26 TIL - 최종프로젝트 32일차 (트러블슈팅 - useEffect로 인한 리렌더링, 기술적 의사결정 종합, supabase 사용량 초과)
스크롤 및 화면 resize에 변화가 있을 때마다 브라우저가 리렌더링 됨🖥️ 페이지 별로 파악해 본 결과 메인페이지 : 스크롤 움직일 시, 화면 resize 시에 계속 화면 리렌더링about 페이지 : 위와 동일기타 페이지 : 화면 resize시 화면 계속 리렌더링
126.2024.04.28 TIL - 최종프로젝트 34일차 (read me 작성 - 스택 배지 추가, 폴더구조 tree 생성/ 시연영상 촬영 / supabase 플랜 업그레이드...)
리드미에 배지로 스택 넣는법참고 : https://cocoon1787.tistory.com/689https://velog.io/@fejigu/Github-Github-README%EC%97%90-%ED%91%9C-%EC%9E%91%EC%84%B1-%E
127.2024.04.29 TIL - 최종프로젝트 35일차 (gabia 도메인 구매 및 vercel 연결 / 성능최적화 - 이미지 용량 줄이기, 스크롤 throttling 적용, 웹폰트를 import로 변경)
128.2024.04.30 TIL - 최종프로젝트 마지막날 (채팅방 내부모달 트러블슈팅 해결, 발표준비)
오늘 한 일✔️ 주석 제거 폰트 import버전 Light house 넣어놓기 로딩스피너 삭제, 스켈레톤으로 수정 (단체 채팅방)✔️ - 제목 - 길어지고있음 생략필요 ✔️ - 상대 프로필사진 이미지 찌그러짐✔️ - 제목, 그리너 간격 좁히기 다시 시도해보자 ✔️ -
129.2024.05.22 TIL - 파이썬 기초 강의
const, let같은게 필요없음python = 1이런식으로만 해도 변수지정 가능Numeric (숫자형)type(변수) -> <class 'int'> 이렇게 타입을 알 수 있는 함수String (문자열)1)여러줄인 문자열 변수지정하기my_str = """제스퍼토미
130.2024.06.07 TIL - 코딩테스트 강의 시작
데이터를 저장하고 관리하는 방식데이터를 체계적으로 저장, 메모리를 효율적으로 사용할 수 있게 함빠르고 안정적인 데이터 처리메모리 알고있어야 함선형 자료구조, 비선형 자료구조문제 해결, 방법자주 쓰이는 문제 해결 방법이 있음 -> 패턴화(BFS, DFS, Binary S
131.2024.06.12 TIL - SEO에 관하여
개인프로젝트를 고민하던 중 실 사용자를 받아보는 경험을 할 수 있는 프로젝트를 진행하여 내 경쟁력을 높이고 싶다는 생각이 들었다.실 사용자를 받으려면 일단 검색 시 무조건 상단에 떠야하는데... 그러기 위해 필요한게 바로 SEO 검색 엔진 최적화인거다!SEO(검색 엔진
132.2024.06.13 TIL - 개발자는 맥북이지! 새 맥북 초기세팅하기 (homebrew, nvm, npm, yarn, node 설치 등)
👍 새 노트북 구매시 설치할 것들!1\. homebrew, node, nvm, npm, yarn2\. VScode3\. 크롬4\. 크로마캠5\. zoom6\. 슬랙기타 등등공식 홈페이지 : https://brew.sh/ko/설치방법 블로그 : https&#x
133.2024.06.13 TIL - SQL 강의 (기본개념 정리, select, from)
SQL, Query, 데이터베이스의 기본 개념 정리DBeaver 설치SQL SELECT, FROM 문법 실습SQL이란? : 데이터베이스와 대화하기 위한 언어 (문법)Query : SQL과 같은 말 (언어 그 자체)SQL을 작성한다 === Query를 작성한다DBeave
134.2024.06.14 TIL - SQL 강의 (조건 필터링 where절(between, in, like), 숫자 연산(sum, avg, count, min, max), group by, order by)
모든 컬럼이 아닌 특정 컬럼 지정하여 가져오기컬럼 이름 바꾸기 (= 컬럼에 별명 주기)컬럼에 별명 주는 방법컬럼1 as 별명1컬럼2 별명2한글, 특수문자인 경우 큰따옴표 ("") 필수(영문은 안붙여도 됨)원하는 데이터만 불러오기 (엑셀에서의 필터기능) : whereex
135.2024.06.18 TIL - SQL 강의 (replace, substr, concat)
replace : 특정 문자로 바꿔줘where : 'Blue Ribbon'이 들어간 데이터만 조회해줘 (조건절)like : 비슷한 데이터를 뽑아주는 구문substr() : 특정한 문자를 뽑아주는 구문(substring 써도 됨)1 : 어디서부터 뽑아올지 (첫번째 문자부
136.2024.06.19 TIL - SQL 강의 (조건문 if, case 예시 모음)
if문 예시cuisine_type 컬럼의 값이 Korean인 경우 컬럼 값을 '한식'으로, Korean이 아닌 경우는 '기타'라고 보여줘.if(조건, 조건 충족할 때, 조건 충족 못 할 때)
137.2024.06.25 TIL - SQL 강의 (조건문 심화, 데이터타입 변환)
1\. 지역과 배달시간을 기반으로 배달수수료 구하기 (식당 이름, 주문 번호 함께 출력) (지역 : 서울, 기타 - 서울일 때는 수수료 계산 \* 1.1, 기타일 때는 곱하는 값 없음 시간 : 25분, 30분 - 25분 초과하면 음식 가격의 5%, 30분 초
138.2024.06.26 TIL - SQL 강의 (Subquery, Join)
Subquery > 여러 번의 연산을 한 번의 SQL 문으로 수행하기 Subquery 기본문 예시 1 음식 주문시간이 25분보다 초과한 시간을 가져오기 예시 2 음식점의 평균 단가별 segmentation 을 진행하고, 그룹에 따라 수수료 연산하기 (수수료
139.2024.06.30 TIL - SQL 강의 (join | subquery 실습, 없는값 제외(null처리 - if, where), null 대신 다른값 사용(coalesce), Pivot view 구조, window함수(rank, sum), date())
문제 : 식당별 평균 음식 주문 금액과 주문자의 평균 연령을 기반으로 Segmentation 하기평균 음식 주문 금액 기준 : 5,000 / 10,000 / 30,000 / 30,000 초과평균 연령 : ~ 20대 / 30대 / 40대 / 50대 이상두 테이블 모두에
140.2024.07.22 TIL(1) - 모바일 first와 반응형 웹 디자인의 차이점, 디자인 시스템 사용 이유
지난번 최종프로젝트 때는 1920px 웹 뷰 먼저 만들고, 그 이후에 1240px, 360px 순으로 작은 사이즈 화면을 진행했더니 반응형 웹을 만들면서 많은 시행착오가 있었다. ( 지난번엔 useEffect로 화면 크기를 인식해서 많은 문제가 있었기에 이번엔 같은 실
141.2024.07.24 TIL(2) - punycode 에러 해결, tailwind css 미디어 쿼리 시작하기
에러 원인 : node 버전이 너무 최신꺼라서 punycode가 삭제된 버전이라고 한다... 이전 버전으로 돌려줘야 했다. 해결 : node 18버전으로 다운그레이드하여 해결! > 참고 : https://velog.io/@leesin1040/TIL-punycod
142.2024.08.15 TIL - JS 강의 재수강 (1주차 정리)
1주차 자료형, 삼항연산자, 화살표 함수, 배열 메서드, 반복문 
2주차 ~ 3주차 강의 정리 구조분해할당, 데이터 타입, 메모리, 실행컨텍스트, 콜스택, VE, LE, this binding 
4주차 ~ 5주차 강의 정리 콜백함수, 동기 비동기, DOM, 클래스, 인스턴스, 클로저 
몫 구하기 풀이 double tilde 문제 풀이
146.2024.08.16 TIL - 프로그래머스 풀이 (누적값 구하는법, reduce 초기값, 문자를 숫자로 바꾸기)
프로그래머스 풀이 짝수의 합 내 풀이 : 누적값구하기는 무조건 reduce라고 생각했다. 오류 해결 처음엔 reduce에 초기값을 설정하지 않았더니 실행 결과 중 '런타임 에러'가 발생하며 오답처리가 되었다. 원인은 초기값을 세팅하지 않아서 발생한 문제였다.
147.2024.08.16 TIL - 프로그래머스 풀이 (누적값 구하는법, reduce 초기값, 문자를 숫자로 바꾸기)
내 풀이 : 누적값구하기는 무조건 reduce라고 생각했다. 오류 해결처음엔 reduce에 초기값을 설정하지 않았더니 실행 결과 중 '런타임 에러'가 발생하며 오답처리가 되었다.원인은 초기값을 세팅하지 않아서 발생한 문제였다.❓ reduce 메서드에서 '초기값'이란?