profile
개발자여서 행복한 Jev 😙 FE DEVELOPER JEV

⚒️ 프론트엔드 리팩토링 방법론

고민의 발단 나는 SI회사에 1년 가까이 재직중이고 여태까지 5~6개의 프로젝트를 경험한 것 같다. 프로젝트들 중 처음부터 시작한 프로젝트들도 있으며 프로젝트 중간에 투입한 적도 있고 프로젝트 유지보수를 한 경험들이 있다. 최근들어 드는 고민은 프로젝트 중간에 투입

약 7시간 전
·
0개의 댓글
·
post-thumbnail

next.js 14 에서 실시간 채팅 구현(with firebase)

최근에 사이드 프로젝트를 시작했고 메인 기능은 채팅이다.사이트 프로젝트에서 사용하는 기술 스택은 백엔드 없이 nextjs로만 사용하고 있다.nextjs내에서 prisma를 통해 mysql DB와 통신하여 데이터 통신을 하는 방식으로 진행하려한다.여러 프로젝트를 했지만

2일 전
·
0개의 댓글
·
post-thumbnail

내가 만든 npm 패키지가 import가 안되는 이슈 (feat. tsconfig.json & pacakge.json)

회사 프로젝트들을 하다 보니 프로젝트에서 공통적으로 사용되는 함수들을 있어 이를 라이브러리로 구성하면 어떨까라는 생각을 했다. 그래서 helper,hooks 등 함수들을 라이브러리로 구성하여 npm 배포를 연휴동안 해보았다.npm으로 배포하는 과정은 여러 레퍼런스들이

2024년 1월 1일
·
0개의 댓글
·

nestjs 실행했을 때, entity대로 테이블이 생성되지 않을 때(이슈)

기존에는 mysql과 nestjs를 연결하여 nestjs내에서 엔티티만 만들어준다면 엔티티를 토대로 자동으로 mysql 테이블을 만들어줬었다.하지만 다른 컴퓨터에서 nestjs 애플리케이션을 실행시켜려했을 때, 설정해둔 엔티티 코드를 토대로 mysql 테이블을 생성해주

2023년 12월 16일
·
0개의 댓글
·

서버에서 모든 도메인 cors 허용했음에도 불구하고 Cors 오류가 발생하는 이유?

클라이언트 설정 코드위와 같이 클라이언트쪽에서 axios 설정이 되어있어도 서버쪽에서 모든 도메인에 대해 cors를 허용해준다고 하여도 Cors오류가 발생하는 이슈가 발생했다.Credentials 이란 쿠키, Authorization 인증 헤더, TLS client c

2023년 12월 9일
·
0개의 댓글
·

Record Type

Record 타입이란 객체 데이터의 타입을 지정할 때,사용한다.Key : 객체의 키에 대한 타입을 지정Type : 객체의 값에 대한 타입을 지정위의 예시에서 Record를 사용한 경우는 key값에 대한 제한 범위 string으로 제한 범위가 크다.name과 email로

2023년 11월 12일
·
0개의 댓글
·

multipart/form-data(Content-type)

프론트쪽에서 서버에 데이터를 보낼 때, 데이터 중 파일 객체 데이터가 포함되어있다면 특정 작업들을 추가적으로 해줘야한다. 특정 작업들이란 크게 두가지이다. 헤더의 content-type을 mulitpart/form-data로 변경 요청 데이터를 formData로 변

2023년 11월 11일
·
2개의 댓글
·
post-thumbnail

로그인 유지 (로컬스토리지[localStorage]와 세션스토리지[sessionStorage])

사내 프로젝트 중 로그인을 구현하고 있다.로그인 유지 기능이 있어 구현을 해야하는데 조건은 다음과 같이 정의할 수 있다.체크시, 브라우저창을 닫거나 탭을 닫아도 다시 들어올 때에도 로그인이 유지되어야함.체크를 안할시, 브라우저창을 닫거나 탭을 닫으면 다시 들어왔을 때

2023년 10월 21일
·
0개의 댓글
·
post-thumbnail

파일 인풋에서 선택한 이미지 파일 객체를 이미지로 나타내기 (feat. URL.createObjectURL)

파일을 선택할 수 있는 파일 입력창에서 선택한 이미지를 미리볼 수 있게 해보자.전체적인 코드는 다음과 같다.<input type="file"/>을 사용하면 사용자의 디바이스에 접근하여 사용자의 파일을 선택할 수 있게 해준다.이 때 <input type="fi

2023년 6월 1일
·
0개의 댓글
·

axios 인스턴스 생성과 헤더 설정

axios를 사용할 때, 서버 통신을 위해 해당 서버와 통신할 인스턴스를 만드는 사용되는 옵션들을 알아보자.axios.create라는 메서드를 통해 특정 서버에 대한 인스턴스를 생성할 수 있다.위와 같이 옵션이 설정되어있다고 했을 때 각 옵션에 대하여 살펴보자.base

2023년 5월 29일
·
0개의 댓글
·
post-thumbnail

http 서버에서 헤더를 굳이 설정해주는 이유는?

브라우저에서 응답받을 문서에 대하여 알아서 인식하는데도 불구하고 http 서버에서 응답보낼 문서에 대한 헤더를 설정해줘야하는 이유가 뭘까요?다음 코드를 살펴봅시다.with headerres.wrieHead : 서버에서 클라이언트에게 응답해줄 데이터(body)에 대한 헤

2023년 3월 20일
·
0개의 댓글
·

쿠키와 세션(feat. 로그인 처리)

로그인을 구현하기 위한 방법으로는 쿠키와 세션이라는 2가지 방법이 있습니다.로그인을 구현할 때 쿠키와 세션을 모두 사용할 수 있습니다. 둘 다 클라이언트와 서버 간의 인증을 관리하기 위해 사용되며, 보안적인 이슈와 편의성 등의 차이가 있습니다.쿠키는 클라이언트의 브라우

2023년 3월 15일
·
0개의 댓글
·
post-thumbnail

var,let,const의 차이

var,let,const는 2가지 맥락에서 차이가 있습니다.소스 코드 평가 과정에서 선언 단계와 초기화 단계의 차이함수 레벨 스코프와 블록 레벨 스코프의 차이var와 let와 const 차이를 설명하기 전에 우선 자바스크립트가 소스 코드를 실행하기 위한 단계를 알아야합

2023년 3월 15일
·
0개의 댓글
·
post-thumbnail

동기와 비동기,블로킹과 논블로킹의 차이

동기와 비동기 개념과 블로킹과 논블로킹의 개념은 서로 다른 개념입니다.동기와 비동기의 차이는 작업 완료 여부에 대하여 신경을 쓰냐,안쓰냐 여부의 차이입니다.a,b,c라는 함수가 차례대로 호출되고 있다고 가정했다고 해봅시다.동기 처리 같은 경우에는 a,b,c가 차례로 실

2023년 3월 15일
·
0개의 댓글
·
post-thumbnail

이벤트 버블링과 이벤트 캡처링

DOM 트리 상에 존재하는 DOM 요소 노드에서 발생한 이벤트는 DOM 트리를 통해 전파됩니다.이를 이벤트 전파라고 하는데요.생성된 이벤트 객체는 이벤트를 발생시킨 DOM 요소인 이벤트 타켓을 중심으로 DOM 트리를 통해 전파됩니다.이벤트 전파 방향에 따라 이벤트 버블

2023년 3월 12일
·
0개의 댓글
·

리덕스(redux)에서 미들웨어(middleware)를 사용하는 이유

미들웨어와 이를 활용한 리듀서미들웨어(middleware)란 무엇일까요?두 개의 개체 사이에서 원만히 통신할 수 있도록 돕는 역할을 합니다.리덕스 미들웨어는 액션을 디스패치했을 때 리듀서에서 이를 처리하기에 앞서 사전에 지정된 작업들을 실행합니다.즉, 리덕스 미들웨어는

2023년 3월 12일
·
0개의 댓글
·

상태 관리 라이브러리를 사용하는 이유(Feat 리덕스[redux])

상태 관리 라이브러리를 사용하는 이유

2023년 3월 11일
·
0개의 댓글
·

순수 함수와 리액트의 관계

리액트는 순수 함수를 이용하여 UI를 렌더링합니다. 즉 , 컴포넌트를 순수 함수로 구성하려합니다. 그렇다면 순수 함수는 무엇이고 왜 컴포넌트를 순수 함수로 구성하려하는 것일까요? 순수 함수 순수 함수는 동일한 인수를 전달하면 항상 동일한 결과를 반환하는 함수입니다

2023년 3월 11일
·
0개의 댓글
·

리액트에서 state가 불변성을 유지해야하는 이유?

리액트에서 state에서는 불변성을 유지해야한다는 말은 많이 들어보셨을 것입니다.그렇다면 불변성이라는 성질은 무슨 말이고 이를 유지한다는 것은 어떤 의미일까?불변성이란 불(아닐 불) 변(변할 변)으로써 변하지 않는 성질을 말합니다.그러면 무엇이 변하지 않으면 될까요?할

2023년 3월 11일
·
0개의 댓글
·