TIL

미니프로젝트

firebase를 통해 코멘트 데이터를 저장하니 데이터가 순서가 마음대로 저장되었다.기존 코멘트만 저장했으나 순서를 정해주기 위해 new Date를 활용하여 타임 스탬프를 찍어주었다.하지만 이후 타임스탬프 순으로 가져오는 것 또한 문제였다.이번에는 튜터님의 조언을 받

한글날 연휴동안 코멘트 박스 색 칠하기를 구현해 보았다.이전에 튜터님께 조언 받을때 각 p태그(코멘트의 태그)들에 index를 부여하여 이 값을 홀 짝으로 분류하면 내가 하고 싶은것을 구현 할 수 있을 것이다 이야기 해주셨다.어떻게 해야할지 고민을 해보았지만 번쩍 떠오

오늘은 두가지 할 일이 있었다.하나는 index 중복의 오류 이고 하나는 코멘트를 삭제하는 버튼을 만드는 것이었다.index는 생각지도 못한 방법으로 해결되었다.그동안 forEach라는 메서드가 array에 대한 element와 이를 처리할 함수만 매개변수로 받는다고

개발공부를 하며 강의를 보고 마냥 따라서 코드를 쳐서 웹페이지를 만드는 것이 아닌 내가 구현하고 싶은 기능들을 구현해 본 첫 프로젝트이자 첫 협업 프로젝트 였다.많은 것을 배우고 또 많이 부족함을 느꼈다.발표를 마치고, 이번 프로젝트에 대한 평가를 해보았다.솔직히 이번

버전 관리 도구, 형상 관리 도구(소프트웨어의 변경사항을 체계적으로 추적하고 통제하는 것)하나의 폴더 내에서 코드의 변경점을 기록하기 위해 git을 사용백업과 공유가 가능한 온라인 코드 저장소git init : git이라는 폴더가 생성, 코드변경을 git에서 추적git

어제 미니프로젝트 발표와 함께 내배캠 첫번째 chapter가 끝났다.오늘부로 팀이 재편성 되었고 새로운 강의를 지급받으며 본격적으로 JavaScript를 학습하게 되었다.변수 선언은 var, let, const 3가지로 가능하며 var는 재선언,재할당이 가능하고 let

let : 재할당이 가능한 변수const : 재할당이 불가능한 상수}let add = function(){}let add = () => { return 1;}let add = () => 1; //return값이 1개일때 {}생략가능let add = x => 1;

어제 한달전에 다친 발목이 낫질않아 병원을 다녀왔다.뼛조각 때문에 수술을 할 수도 있다고 하더라.예상못한 소리에 멘탈 나가서 하루를 그냥 버린것 같다.덕분에 TIL 쓸게 없더라.오늘부터 다시 파이팅!문자열s 내의 p와 y의 개수를 비교하여 개수가 같으면 true 다르면

웹이란 공간에서 제공되는 서비스이를 설계,제작,관리 하는 것이 웹 서비스 개발자(웹 개발자)하드웨어측면 : 웹 서버의 소프트웨어와 website의 파일들을 저장하는 컴퓨터인터넷에 연결되어 웹에 연결된 다른 기기들이 웹 서버의 데이터를 주고 받을 수 있도록 해줌소프트웨어

일단 과제에서 필수로 요구하는 사항들은 한 가지를 빼고 다 구현했다.그 중 어려움을 겪은 상황들은 다음과 같다.이번 과제의 조건은 Jquery없이 순수 바닐라 자바스크립트만으로 개발하는 것이었다. 덕분에 저번에 겪었던 append 부분을 다시 경험했다.Jquery.ap

아~ 어제 퇴실체크를 깜빡했다....중간 인증도 안해서 얄짤없이 결.석.이제 저녁시간에 중간인증 한번 하고 9시되면 칼같이 퇴실체크 해야겠다!오늘은 preserve 3d랑 싸우다가 하루가 다간 것 같다.저번 팀소개 프로젝트에서 팀원분이 구현해주셨던 코드를 참고하여 구현

filter 메서드를 사용하기 위해 고군분투하며 하루를 보냈다.이미 검색하는 코드는 만들어 놨기 때문에 filter를 할 수 있는 배열만 만들면 되었다.처음 든 생각은 제목이 담긴 title class에서 제목만 담아 배열을 만들어 filter를 통해 영화를 찾아보는

display:none을 이용하여 토글 방식으로 한/영버전을 만드는건 실패했다.언어 버전별로 class를 연결하려니 css도 엉망이고 너무 하드코딩을 할 것 같았다.그래서 한 페이지로 만드는 것을 포기하고 html 파일을 하나 더 생성했다.html 파일 복사해서 한 개

오늘부터 팀과제 시작이다.다음 주 월요일까지 팀원 중 한 명의 개인과제 사이트를 토대로 필수 요구사항들을 포함한 추가적인 기능을 구현을 하는 게 이번 과제이다.우리는 과제에 들어가기 앞서 협업을 위해 github을 공부하였다.저번 미니 프로젝트에서도 github을 사용

이번 개인과제때 나는 colums를 1fr씩 5개로 강제로 할당하여 코드를 작성했다.반면 해설강의에서는 좀 더 반응형에 가깝게 하는 방법을 배울 수 있었다.이렇게 코드를 작성할 경우 브라우저 화면의 크기에 맞게 카드 갯수를 조절할 수 있다.html parser가 문서를

이번 팀과제에서 상세페이지 상단부 개발을 맡았다.기본적인 골격 작성 후 javascript로 fetch에서 받은 데이터들을 보여주면 된다.내가 맡은 부분의 기술적 개발은 끝나고 css 다듬는게 남았다.여기서 처음 당면한 문제는 글자의 위치이다.수평 가운데로는 정렬 되었

오늘은 가져온 영화 데이터들을 평점순 이름순 개봉 날짜순으로 정렬을 해봤다.처음에는 페이지에 print된 영화들을 querySellectorAll을 통해 코드를 작성해 보려고 했다.하지만 가져온 값들은 단순한 string이었고 이를 통해 영화를 재배열 시킬 방도가 떠오

팀과제 주말간 영화를 기준에 맞춰 정렬하는 sort.js를 추가했다. 근데 정렬된 영화에서는 search 기능이 작동하지 않는 오류가 발생했다. 디버깅 최초 오류를 발견한 팀원분이 코드를 수정하여 sort 후에도 search가 가능하게 수정을 해줬다. 팀원분이 찾

UI를 표시하는 최소 단위특정 부분이 어덯게 생길지 정하는 선언체JavaScript 함수와 유사import와 export를 활용하여 컴포넌트를 가져오거나 내보낼 수 있음return 아랫부분에 JavaScript와 Html을 합한 JSX 문법을 통해 화면에 보여질 코드

한번 생성된 원본의 데이터를 변경시키지 않는것데이터 변경이 필요한 경우 새로운 원본을 생성불변성을 지키지 않으면리랜더링이 안될 수 있다.=> 리액트는 state 변경 전 후를 얕은비교하여 다른 경우에만 리랜더링예상치 못한 부작용이 발생 가능하다.=> 컴포넌트의 stat

리액트 스탠다드반 강의를 듣다가 배열의 내용을 수정하지 않고 순서대로 찍어내는데 map을 사용하길래 문득 이런 생각이 들었다.굳이 따로 가공하지 않고 출력하는데 forEach를 사용하면 되지 않을까?렌더링이 안되길래 콘솔로 한번 찍어 봤다.처음에는 forEach가 불변

금요일에 react 입문주차 개인과제 발제가 있었다.이번 과제는 react를 활용하여 todolist를 만드는 것이다.주말에 걸쳐 만들고 수정하고 컴포넌트 분리를 했다.과제 중 어려웠던 점은 컴포넌트를 분리하는 것이었다.분리할 컴포넌트에 대해 다른 대원분에게 조언을 구

css-in-jsJs코드를 사용하여 컴포넌트의 css를 꾸밈장점 : css에 조건문 사용 가능 => 조건부스타일링프로젝트 전체를 아우르는 스타일css를 효율적으로 사용하기 위해 만든 언어동일 코드를 복붙하는걸 줄여줌=> HumanError 감소코드의 재사용성을 높이고

리액트 숙련 useContext react context의 필요성 props를 계속 넘겨주면 prop drilling 현상 발생 =>prop의 깊이가 깊어지면 어떤 컴포넌트에서 prop이 왔는치 파악이 힘듬 =>어디서 오류가 발생했는지 추적이 힘들어 문제해결이 늦

문서(document) : 컴포넌트로 구성된 웹페이지엘리먼트(element) : 페이지를 이루는 컴포넌트Dom TREE : 엘리먼트들을 tree 형태로 표현한 것실제 DOM과 완벽히 동일한 복사본이를 객체의 형태로 메모리에 저장하여 실제 DOM보다 빠르게 조작가능리액트

JSX란?JavaScript를 확장한 문법으로 JS의 모든 기능이 포함되어 있으며 ReactElement를 생성하기 위한 문법SPA와 MPA의 개념 및 특징SPA(Single Page Application)개념단 하나의 페이지로 로딩되며 사용자와의 상호작용에 따라 필요

리액트 숙련주차 개인과제 주말간 props-drilling을 끝내려 했지만 사정상 코딩을 못했다... 일단 오늘은 styled-components를 적용하고 react-router-dom을 이용하여 상세페이지를 만들어 보기로 했다. styled-components

리액트 숙련주차 개인과제 상세페이지로 state 가져오기 과제 진행중 상세페이지에서 코멘트를 수정하고 삭제하는 기능을 구현하기 위해 펜레터들이 들어있는 state인 fanletters와 setFanletters를 상세페이지로 가져올 필요가 있었다. 문제의 발생 처

state코드 리팩토링 조건부 스타일링 white-space: nowrap; //줄바꿈제어 overflow: hidden; text-overflow: ellipsis;

이번 팀프로젝트에서 홈페이지 및 상세페이지 부분을 담당하게 됐다.와이어 프레임을 만들며 홈페이지 메인에 그리드를 사용하여 게시글들을 보여주는 것으로 정했다.먼저 12개의 카드들이 그리드를 이루도록 css를 작성했다. (grid-template-areas 안의 숫자는 갯

팀 프로젝트가 끝나고 심화주차가 시작됐다.이번 주차의 주된 내용은 서버와의 통신인것 같다.그러면서 따라오는 비동기...지금 제일 고생하고 있는 부분이다.aixos를 통해 서버에 데이터를 요청했다.하지만 그 결과 제대로 된 데이터를 받지 못했다.그 이유는 서버에 요청을

리액트 심화과정을 들어오며 개인과제가 시작됐다.과제는 숙련주차때 만들었던 팬페이지에 인증서버를 통해 회원가입과 로그인 기능을 구현하고 JSON-server와 통신을 하며 비동기 처리를 하는게 핵심이다.과제 요구사항중 하나로 Redux를 사용했던 전역관리를 Reduxto

query : 데이터에 대한 요청mutation : 데이터에 대한 변경query invalidation : 쿼리를 무효화 시킴 => 무효화 후 최신화useQuery("쿼리키",쿼리함수)리액트 쿼리를 설치provider를 이용하여 프로젝트에 리액트 쿼리 주입쿼리에 담을

Typescript 왜 타입스크립트를 써야하는가? 자바스크립트의 약점 runtime에 결정되는 변수 타입 => 개발자의 실수로 인한 오류를 찾아내기 힘듬 약한 타입 체크 => 변수/상수를 구분하는 정도만 지원 타입스크립트 comfile때 변수의 타입 체크 => 코드입력시 실시간으로 vscode에 에러메시지 타입스크립트의 강점 코드의 안정성과 가독성이 높...

Partial< T >T타입 객체의 속성을 선택적으로 활용=> 기존 타입의 일부 속성만 제공하는 객체 생성 가능Required< T >T타입 객체의 모든 속성이 정의돼야함.ex) name?:string 과 같은 선택적 속성 불가 Readonly< T >

여러분 TIL 제출하러 갑시다~

리액트 심화 프로젝트에서 게시글 작성 페이지와 프로필 페이지를 맡았다.오늘은 게시글 작성 페이지에서 wysiwyg 에디터를 만들기 위해 라이브러리를 찾아봤다.draft, quill, jobit, toast-ui/editor 등 다양한 라이브러리가 있었지만 다운로드 수가

Quill과 react-quill은 모두 텍스트 편집기 라이브러리로서, 사용자가 서식 있는 텍스트를 만들 수 있게 도와주는 도구입니다. 그러나 Quill은 원래 JavaScript 라이브러리이고, react-quill은 React 컴포넌트로 Quill을 감싼 것입니다

원하는 기능 구현 각자 열심히 다한 부분!러닝커브가 높더라도 도전한 부분Firebase Auth를 사용하여 이메일 회원가입 및 SNS 로그인을 지원 서비스 이용사용자들의 TIL 일자를 시각화하여 한 눈에 보여주는 부분게시글, 에디터 등 다양한 라이브러리를 사용한 부분팔

부트캠프의 꽃 최종 프로젝트가 시작됐다.최종 프로젝트인 만큼 해보고 싶은 기능도 많고 주제 선정에도 심혈을 기울이게 된다.

최종프로젝트에서는 supabase를 사용하기로 했다.supabase는 관계형 DB이므로 각 테이블 마다 관계를 잘 정해줘야 한다.관계형 DB에서는 테이블이 가지는 키와 해당 키를 외래 키로 받는 테이블이 있으면 간단하게 해당 테이블의 정보를 가져올 수 있다.또한 파이어

NEXT.js 사용이유서버컴포넌트를 활용하여 SSR=>preview로 확인가능apikey를 나눠서 관리하여 보안 증가Supabase쿼리문 작성방법

서버컴포넌트와 라우트핸들러수파베이스조인

서버에서 데이터를 불러오는 React Server 컴포넌트를 사용하는 경우, API 계층을 건너뛰고 데이터베이스 비밀을 클라이언트에 노출할 위험 없이 데이터베이스를 직접 쿼리할 수 있습니다.waterfall => 동기적parallel data fetching 병렬로 한

vercel => originserver서버보다 가까움 CDN(정적파일들 다 걸림 => 캐싱) 활용하면 빠르게 접근가능정적파일만 캐싱해줌/\\dynimic CDN(edge) DB,api 접근가능=>넥제middleware.ts 모든 리소스가 통과요청clientpreren

1

2

d

supabase rpc 함수를 적용하여 원하는 데이터를 가져오는데 성공하였다.하지만 최초 검색 후 재검색시 리렌더링이 일어나지 않고 새로고침을 해줘야 새로운 검색결과가 반영됐다.원일을 찾기위해 데이터를 가져오는 서버컴포넌트부터 props를 내려주는 하위컴포넌트들을 따라

피드백정리

마운트 => add 붙고 언마운트돼야 => remove기본적으로 layout 언마운트가 안됨디펜던시 달면useEffect가 새로 발동하니까일단 언마운트로 remove발생하는데 다시 마운트돼서 add 붙는게 아닌가?useEffect를 통해 addEventListener