TIL

하나의 폴더 내에서 코드의 변경점을 기록하기 위해 git을 사용\--> 이러한 특징으로 git을 버전 관리 도구, 형상 관리 도구라고 한다.1\. 내 코드를 온라인 저장소에 백업을 할 수 있다.2\. 팀원과 협업할 때 내 코드를 공유할 수 있다. -> 함께 작업이 가능

자바스크립트에서 소스코드들은 4가지의 종류가 있다.1\. 전역 코드 -> 전역 실행 컨텍스트2\. 함수 코드 -> 함수 실행 컨텍스트3\. eval 코드 -> eval 실행 컨텍스트4\. 모듈 코드 -> 모듈 실행 컨텍스트각각의 소스코드들은 평가되고 실행되면서 각각의

객체를 깊은 복사할 때 그 안에 배열이 있다면 어떻게 복사할 것인가?

typing 효과를 표현하는 다양한 방법

typing 효과 구현

this에 대한 이해

typing 효과. 문제점 확인, 분석, 해결의 과정.

sql 문법 간단 정리

팀 프로젝트를 진행하면서 회고록 및 구현 내용

원격 저상소 브랜치에 push 하거나 pull할 때 잘 확인을 해야 한다.로컬 상 브랜치라고 해서 로컬 파일들이 가만히 있는 것이 아니라 브랜치 별로 커밋되어있는 최신 파일들로 수정이 된다. 이를 잘 확인 해야 한다.자바스크립트 프로그램을 필요에 따라서 가져올 수 있는

무한루프는 재귀를 통해서만 발생하는 것이 아니다! 반복문에서도 발생한다!!!!

card-flip effect, z-index, position, rotate를 이용한 구현부터 backface-visibility, 3d등을 이용한 구현

알고리즘을 작성하는데 있어서 항상 특정 알고리즘이 정답이라고 할 수 없다

kmp 알고리즘... 초기 공부한 내용

상황 팀원 중 한 분이 MUI Custom css를 만들 수 있는 사이트에서 다같이 컬러를 정하고 .zip파일로 css파일의 모음을 다운 받아서 사용하기로 했다. 그리고 그 파일들을 공유하기 위해서 Github에 레포지토리를 생성하고 push해서 다같이 공유하기로 했다

깃헙 주소팀 프로젝트에서 구현해야하는 내용은 TMDB에서 영화 데이터를 가지고 와서 메인 페이지에서 카드 리스트 형태로 영화들의 정보를 보여주고 그 카드를 클릭하면 별도의 상세페이지가 등장해서 더 자세한 영화 정보를 보여줄 수 있게 구현해야 했다.상세 페이지와 메인 페

velog 크롬 확장 프로그램을 만들기 위해서 크롬 확장 프로그램 개발을 어떻게 하는 것인지 공식 문서를 참고해서 공부한 내용을 작성하려고 한다.크롬 확장 프로그램들은 추가적인 기능과 기술들을 크롬 브라우저에 제공함으로써 브라우징 경험을 강화 시키는 프로그램이다. 아래

크롬 확장 프로그램을 개발하면서 이벤트에 대해서 더 자세하게 알아야 할 필요가 있다는 것을 느끼고 이벤트에 대해서 조금 더 자세하게 공부를 하려고 한다. 이벤트란? 이벤트(event)란 프로그래밍하고 있는 시스템에서 일어나는 사건(action) 혹은 발생(occur

리액트에서는 부모로부터 받는 데이터를 props라고 한다. 특정 부모 컴포넌트에서 하단에 있는 자식 컴포넌트까지 데이터르 넘기기 위해서는 자식까지 이어지는 모든 컴포넌트들에게 해당 데이터를 props로 전달을 하여야 한다.이것의 한계를 극복하기 위해서 나온 라이브러리로

이벤트 버블링 캡처링... 이벤트 위임....

리덕스에서 미들웨어란 디스패치 함수를 결합해서 새 디스패치 함수를 반환하는 고차함수이다.미들웨어는 함수 결합을 통해 서로 결합할 수 있는데 이는 액션을 로깅하거나, 라우팅과 같은 부수 효과를 일으키거나, 비동기 API 호출을 일련의 동기 액션으로 바꾸는데 유용하다.각각

useEffect를 다 안다고 생각했지만 막상 다른 사람에게 useEffect를 설명하는데 한계를 느꼈다. 그래서 이번 기회에 useEffect에 대해서 남들에게 설명할 수 있게 정리를 하려고 한다. useEffect? 리액트에서 useState와 같은 훅 중에 하나로

DOM이란 Document Object Model의 약자로 HTML, XML 문서의 프로그래밍 인터페이스다. 문서(document)를 트리 구조로 구조화하여 표현돼 있으며 DOM에서 제공하는 API를 이용하여 각 노드에 스타일, 구조, 내용 등을 변경할 수 있다. 트리

리팩토링, 함수

useEffect 당신은 도덕책...

이전의 Todo List 개인과제를 마치고 이번에는 새로운 과제인 팬레터 콜렉션 웹 페이지를 과제로 하게 됐다.위 사진의 기능을 수행할 수 있는 웹 페이지를 만드는 것이다. 이때 각 단계가 있는데 Props 드릴링만 이용해서 구현하는 방법 그리고 Context API를

template literals, 백틱, styled-components 이게 다 연관이 있었다고??!

Gatsby? 아 ~ 위대한 개츠비? RGRG

Gatsby 맛보기어제에 이어서 오늘도 Gatsby 공식 문서를 읽으면서 Gatsby의 동작하는 방식에 대해서 공부를 하였다.사실 정말 맛만 보고 그만둘려고 했는데 막상 읽고 따라해보니까 꽤 재미있게 동작한다Gatsby에는 data layer라는 강력한 기능을 가지고

HOC? 이게 맞나

Gatsby 공식 문서에서 제공하는 튜토리얼을 통해서 어느정도 알아봤고 정적인 사이트를 만드는데 굉장히 좋은 도구라는 것을 충분히 알았기에 Gatsby로 나만의 블로그를 만들어 볼 생각이다. Contentful cms 블로그 포스팅을 위한 정적인 데이터를 만들기 위해서

이번에 새로 시작하게된 팀 과제에서 커뮤니티에서 사용하는 뉴스피드를 구현하는 과제를 받았다. 해당 과제를 수행하기 위해서 firebase를 이용해서 데이터를 저장하거나 불러올 수 있도록 하는 것이 구현 과제 중 하나이다.해당 과제를 수행하기 전에 Firebase에서 사

다들 .env 보세요 두번 보세요

ref..ref..ref......

SA와 와이어 프레임(피그마)를 통해 전체적인 구조 및 데이터 흐름 시각화 하는 것이 좋았다.매일 오전 팀 회의 시간에 진행 사항을 공유함으로써 매일 해야할 일, 앞으로 남은 일을 팀 전체가 인지하고 본인의 일의 진척도를 알 수 있었던 것이 좋았다.과제 발표할 때 필요

redux-thunk 이해

로그인 이제는 알았다.

개인과제를 작성하던 중에 모달을 리듀서로 사용하여 전역으로 사용할 수 있는 modal을 만들려고 하는데 modal이 confirm type일 때, onConfirm 이라는 상태값에 함수를 넣어서 진행을 했더니 제목과 같은 내용의 에러가 나왔다.원하는대로 실행도 되지 않

기본적으로 react-router-dom을 이용하여 SPA에서도 페이지 전환하는 것마냥 보여질 수 있게 할 수 있다.페이지를 넘기기 위해서는 useNavigate를 사용하거나 a태그와 비슷한 기능을 하는 Link라는 컴포넌트를 이용하여서 페이지 전환을 할 수 있다.라우

컴포넌트를 분리하는 기준과 방법에 대한 아티클을 읽고 남긴 ... 정리 및 독후감(?)

자. 이제 시작이야 팀과제

react query 딱ㄷ ㅐ

오늘은 챌린지 반 수업에서 React 커스텀 훅에 대해서 배웠다. 여러 예제를 통해서 커스텀 훅에 대해서 배웠고 내가 느낀 커스텀 훅은 2가지 정도의 역할이 있는 것 같다.반복되는 로직을 줄여서 재사용성을 높여주는 역할다른 컴포넌트에 책임(기능)을 가져오는 역할아마도

팀 과제를 진행하던 중에 좋아하는 음식에 대한 설문조사를 받아서 사용자에게 해당 음식을 좋아하는 연령대와 나이대를 알려주는 기능 구현을 목표로 하고 있다. 마음에 안들어 처음에는 사용자의 연령대와 성별, 그리고 좋아하는 음식의 3가지의 input을 받아야 했다. 그래

오늘부로 Typescript에 대해서 공부를 시작하게 됐다.Typescript는 javascript라는 동적 언어의 한계를 뼈저리게 느낀 개발자들이 정적인 언어의 모습을 흉내내기 위한 컴파일러라고 느껴졌다.앞으로 typescript를 많이 쓸 예정이니... 간단하게 T

Typescript로 투두리스트로 만들면서 각 단계별로 기능들을 하나씩 추가해나가면서 만들어 나가는 과제 중에 redux를 이용해서 구현을 하는 단계에서 고민이 하나 생겼다.todo 상태값과 관련된 로직들은 reducer(/modules/todo/todoSlice.ts

Redux에서도 React query 처럼 data fetching 그리고 caching을 위한 강력한 툴을 제공한다. 항상 Redux를 사용할 때 Redux Thunk가 있기 때문에 굳이 React query라는 라이브러리까지 사용을 해야 하나?라는 생각을 가지면서

오늘은 팀에서 같이 Typescript에 대해서 조금 더 다양한 예제를 통해서 공부를 하기로 하고 Typescript Exercise 사이트에서 3일 동안 총 15문제를 6, 5, 4문제씩 풀기로 했다. 5번 문제까지는 할만 하네~ 5번 문제까지는 할만 했다. 문제는

nextjs로 진행하면서 익숙하던 styled-compoennts를 냅두고 tailwind css냐 module.css냐를 고민하다가 vanilla-extract라는 라이브러리를 알게되서 이번에 한번 사용해보기로 했다. 어차피 css 라이브러리라 러닝커브가 낮을 것

Typescript Exercise(https://typescript-exercises.github.io/문제를 요약을 하자면 기존 oldAPI를 promise화를 시키고 싶은 것이다위와 같은 코드가 있을 때 함수 promisify의 내부 구현과 타입을 만드는

next js를 이용하여 개인 블로그를 만드는 과제를 진행하던 중에 Contentful이라는 CMS를 이용해서 블로그 글이나 작업물에 대한 데이터를 만들고 또 여기에서 데이터를 가져와서 웹 애플리케이션에 보여주려고 한다.nextjs 공식문서에서는 data fetchin

NextJS의 App Router를 이용하여 블로그를 만들었다. 아직 부족한 기능이나 구현하지 못한 기능들은 시간을 들여서 더 만들어 나갈 예정이고, 블로그의 기본적인 기능은 작동할 수 있도록 구현하였다.블로그 주소블로그의 내용을 어떻게 저장하고 관리할 수 있을까에 대

리액트 쿼리는 훌륭한 라이브러리지만 사용하는 컴포넌트마다 useQuery라는 함수를 이용해서 서버 상태값을 가져와야 한다는 점이 있다.이 로직은 그 컴포넌트에서만 사용할 경우에는 별로 상관이 없어 보이지만 다른 여러 컴포넌트에서 해당 쿼리를 사용을 해야한다면 중복되는

useQuery에 대해서 간단한 정도만 사용했는데 여러 옵션들이 많았고 최근에 사용한 옵션에 대해서 기록을 해야 겠다고 생각했다.tanstack-query에서 제공하는 useQuery의 옵션은 공식 문서에서 아래처럼 나와있다.굉장히 많은 옵션들이 있었고, 이 옵션에 대

Toast UI Editor를 React에서 사용하던 중에 만족감있게 사용하고 있었는데 사용자가 이미지를 넣고나서 해당 이미지를 나중에 보여주기 위해서 Supabase Storage에 등록을 해야 했다.어떻게 동작하는지 공식 문서에서 어느정도 나와있긴 했는데 실 사용이

이번 심화 프로젝트를 진행하면서 editor에 대한 구현을 맡아서 진행을 했다.거의 원하는 기능들은 얼추 구현을 완료한 상태이다.에디터 라이브러리를 이용한 에디터 기능 제공mention 기능이 포함된 co-author 등록 기능포스트 썸네일 등록 기능포스트 요약 등록

어제는 blocking에 대해서 어떤 식으로 구현을 해야 하나에 대해서 찾아봤다면 이번에는 실제로 구현하는 방법에 대해서 실제 코드로 작성을 해봤다.내가 구현하고자 하는 내용은 SPA에서 페이지 전환이 발생했을 시 그 전환을 막는 것을 구현을 하고 싶다.다양한 곳에서

get, post는 일반적으로 사용되는 HTTP 메서드 이다.http는 Hypertext Transport Protocol의 약자로 인터넷을 통해서 데이터를 전송하는데 사용되는 기본 프로토콜이다.이때 프로토콜이란 통신을 하는데 필요한 약속이다. 정해진 방식대로 통신을

next.js는 ssr을 통해서 페이지를 제공할 때 css-in-js는 클라이언트단에서 실행되기 때문에 중간에 깜빡이는 현상이 발생한다. 이를 해결하기 위해서는 pages router에서 \_\_document.tsx파일을 아래와 같이 코드를 작성하여 해결할 수 있다.

문제 정의매 1분마다 실행되는 함수 생성함수는 호출될때마다 온도 값이(num) 인풋된다함수는 호출될때마다 지금까지 받은 온도의 평균 온도 값을 내보낸다.호출은 무한으로 호출된다.디비에 값 저장 불러오기 X자바스크립트 또는 타입스크립트로 실행setInterval로 실행되

최종 프로젝트를 진행하면서 throttle과 debounc를 사용할 일이 생겼다.lodash에서 throttle과 debounce 메서드를 제공하고 있어서 쉽게 사용할 수 있는데 이 외에는 사실 쓸 일이 없어서 lodash를 그것만을 위해서 넣는 것은 불필요한 종속성을

최종 프로젝트에서 zustand부분의 코드를 한번 더 정리하기 위해서 zustand 코드를 어떤 패턴으로 코딩하는 것이 좋은지에 대해서 공식문서를 쓱 한번 봤다.zustand는 굉장히 편리하고 간단한 상태 관리 라이브러리로, redux에 영감을 받아서 만들어졌다고 한다

최종 프로젝트를 진행하면서 팀원이 구현하던 코드를 보던 중에 forwardRef라는 함수를 사용했다. 이 함수가 어떤 행위를 하는지 몰라서 찾아봤다.리액트 공식문서에서는 forwardRef는 특정 컴포넌트의 부모 컴포넌트에게 ref와 함께 DOM node를 노출시킨다고

프로젝트를 진행하면서 2개 이상의 컴포넌트에서 같은 로직이 사용되기 때문에 커스텀 훅으로 로직을 분리했던 경우가 많았다. 이러한 경우에 항상 헷갈렸던 내용을 정리하기 위해서 블로그 글을 작성한다. 로직 분리 예를 들어서 useInput과 같은 커스텀 훅을 만들어 본다

이벤트 위임은 상위 부모 엘리먼트에 자식 엘리먼트에서 사용하는 이벤트 핸들러를 등록하여 이벤트 버블링으로 이벤트를 캐치해서 한번의 이벤트 핸들러를 등록하여 각각의 자식 엘리먼트에 이벤트를 등록한 것과 같은 효과를 볼 수 있다.이 개념을 Typescript에 적용을 어떻

일반적으로 focus, blur는 이벤트 버블링이 발생하지 않는다.focusin, focusout은 이벤트 버블링을 발생한다.리액트에서는 모든 브라우저에서 이벤트를 동일하게 처리하기 위해 사용하는 이벤트 래퍼 합성 이벤트(SyntheticEvent)객체를 이용하여 Fo