Jeden Tag, aufrichtig und lustig.

기존에 진행한 프로젝트의 성능을 개선 할 수 있는 방법을 찾는도중 디바운싱 개념을 알게되었다. 나중에도 유용하게 사용할 수 있을 것 같아 정리해보았다. 1. 개념 및 사용 이유 디바운싱은 연속적으로 함수 실행 요청을 하는 경우 가장 마지막 요청만 수행하는 것을 의미한다. 디바운싱은 연속적으로 함수를 실행하는 것은 서버에 부담을 줄 수 있기 때문에, 이 부담을 경감하기 위해 사용 될 수 있다. 2. 적용 예시 아래 코드는 계정을 검색 할 수 있게 만들어주는 코드다. useEffect(() => { if (userInput) { getSearchUser(userInput) .then((data) => { setUserArr(data); }) .catch((error) => { console.log(error..

1. axios interceptors란? axios interceptors는 axios가 then 또는 catch로 처리되기 전에 요청과 응답을 가로챌수 있다. 2. 사용하게 된 이유 투두리스트를 리액트로 만들면서 로그인 후 할일 목록이 나타나는 페이지로 이동하도록 하고, axios를 활용해서 할일목록을 get하는 로직을 구성했다. const access_token = localStorage.getItem("signInToken"); export const axiosAuthApi = axios.create({ baseURL: BASE_URL, headers: { Authorization: `Bearer ${access_token}`, "Content-Type": "application/json", },..

1. 발생 상황 평소와 같이 코드파일을 깃허브에 커밋 후 푸쉬하려고 했다. 커밋까지는 정상적으로 완료되었지만, 푸쉬 후 터미널에 아래와 같은 메세지가 안내되었다. remote: fatal error in commit_refs ! [remote rejected] main -> main (failure) error: 레퍼런스를 'https://github.com/내깃헙아이디/푸시하려는레포이름.git'에 푸시하는데 실패했습니다 2. 해결 과정 CLI 방법이 아닌 VSC상에서 클릭으로 할 수 있는 GUI 방법도 활용해서 2~3번 반복적으로 시도해봤지만 동일한 에러 메세지가 발생했다. 챗지피티를 활용하여 에러메세지를 분석해봤다. 여러 발생원인 중 하나가 서버에 문제가 있는 경우 발생할 수도 있다고 했다. 깃허브 ..

state는 리액트에서 많이 사용 된다. 비중 있게 사용되는 만큼 사용 이유와 사용 방법을 정리해 보았다. state 사용 이유 데이터를 저장하는 방법에는 state를 사용하는 방법 외 변수에 저장하는 방법도 존재한다. 하지만 변수는 값이 변경되는 경우 html에 자동으로 반영이 안되는 반면 state는 값이 바뀌면 html이 자동으로 재렌더링을 한다. 이와 같은 차이점으로 자주 변경이 되는 html요소는 state로 값을 저장하여 데이터바인딩을 하는 것이 좋다. state 사용 방법 1. import state는 import를 해야 사용 할 수 있다. 보통 useState 단어를 입력하면 아래와 같이 상단에 자동으로 import 된다. ->import {useState} from 'react' 2. 구..

JSX 문법은 자바스크립트 파일 내에서 html을 표현할 때 사용되는 문법이다. 리액트에서 많이 사용되는 JSX 문법은 아래와 같다. 1. className JSX 문법과 html 문법의 차이점 중에 하나로 class를 부여할 때 'className'으로 카멜케이스를 활용해서 사용 해야 한다. 이를 사용해서 app.js파일에서 클래스 이름을 부여 하면 app.css에서 css하는데 활용 할 수 있다. *css파일은 app.js파일 내에 import 해야 적용할 수 있다. 2. 데이터바인딩시 {중괄호} 활용 리턴 문 밖에서 정의한 변수를 리턴안에서 활용(데이터 바인딩) 하고 싶다면 중괄호 안에 변수를 넣으면 적용 가능하다. 변수는 컨텐츠 내용 넣을 때나 클래스 이름 작명 할 때도 범용적으로 사용가능하다 i..

이전에 리액트를 사용하면서 npm을 사용한 경험이 있다. 이로 인해 npm은 리액트를 사용 할 때만 활용한다고 생각했었는데, JavaScript를 공부하는 와중에 npm을 사용하게 됐다. 이런 경험을 통해 평소 모호하게만 알고 있던 npm에 대해 공부하고 싶어 아래에 정리하게 되었다. 1. NPM이란? NPM은 Node Package Manager의 준말이며, Node.js 기반 패키지(모듈)들을 모아둔 저장소이자 매니저다. npm을 사용하고 싶다면, node.js가 먼저 설치되어야 하는데 node.js와 npm의 버전을 확인하고 npm을 설치하고 싶다면 터미널에 아래와 같이 입력하면 된다. node -v //node 버전 확인 npm -v //npm 버전 확인 npm init // npm 설치 2. N..

자바스크립트를 활용하면서 수 없이 사용하는 array와 object 유형의 데이터는 이미 자바스크립트에 내장된 new Object(), new Array()라는 생성자함수에 의해 인스턴스로서 생성된다. 객체와 배열을 통해 생성자와 인스턴스를 자주 사용하고 있지만, 그 뜻에 대해서는 모호하게 알고 있었고, 일반함수와 다른 점은 무엇인지 궁금하여서 공부하게 되었다. 1. 개념 생성자 함수? 생성자 함수는 생성자를 만드는 함수를 의미 한다. function MakeSong(genre, singer) { this.genre = genre; this.singer = singer; this.introduce = function () { console.log( "이 노래는 " + this.genre + " 장르이고,..

프로젝트를 진행하면서, 사용자의 만족도를 높이기 위해서는 빠른 렌더링 속도가 중요하다는 것을 느끼게 됐다. 렌더링 속도를 높이기 위해서 어떤 것을 고려해야하는지 공부하던 도중 리플로우와 리페인트에 대해 알아보게 되었다. 1. 개념 리플로우는 레이아웃이 변경 될 때 이로인해 영향을 받는 모든 DOM 노드들의 수치가 다시 계산되고, 레이아웃 트리가 재생성되는 것을 의미한다. 레이아웃이 변경 될 때 발생하기 때문에 width, height, padding, margin, float, position 등이 변하면 발생한다. 리페인트는 리플로우가 끝난 후에 발생하는 현상으로, 다시 만들어진 레이아웃 트리를 레이어에 다시 그리는 작업을 의미한다. 또한 리페인트는 가시적인 속성에 의해 발생한다. ex. color,b..

아좌좌

> 12주차부터 14주차에는 리액트에 대해 학습하였고, 15주차부터 프로젝트를 시작하였다. 프로젝트를 본격적으로 시작하기 전, 제주도에 동기들과 함께 다녀왔다! 함께 알고리즘 페어 프로그래밍도 해보고 수업도 함께 듣고 FE의 미래에 대해 의견을 나누며 새로운 인사이트를 얻을 수 있었다. 무엇보다 멘토님, 강사님들께 프로젝트의 방향에 대한 조언도 얻으면서 줌으로만 뵀던 분들을 뵙게 되어 환기가 되었다. 💛 Fact 학습내용 리액트 마무리 파이어베이스 리덕스 프로젝트 시작 ❤️ Feeling 첫 프로젝트라서 잘 해낼 수 있을지 걱정이 된다. 커밋 알람이 커밋을 잊지 않게 해줘서 뿌듯하다. 파이어베이스와 리덕스 이해를 충분히 하지 못해서 어렵다. fork를 활용한 협업 연습을 해보았는데, pull해야 하는 브..