profile
풀스택 개발자를 지향하는 개발자
post-thumbnail

Next js를 알아보자

Next js는 SPA(Single Page Application)으로 구성되어 있는 React의 SSR(Server Side Rendering)을 쉽게 구현할 수 있게 도와주는 프레임워크입니다. React에서도 SSR이 구현이 가능하긴 하나 개발환경을 구현하는 것이

2022년 1월 9일
·
0개의 댓글

GraphQL 이란?

GraphQL은 SQL(Structed Query Language)와 마찬가지로 쿼리 언어입니다.SQL이 데이터베이스에서 저장된 데이터를 효율적으로 가져오는 것이 목적이라면 GraphQL은 클라이언트가 데이터를 서버로부터 효율적으로 가져오는 것이 목적입니다.Rest A

2022년 1월 5일
·
0개의 댓글
post-thumbnail

[React] Recoil을 알아보자

Recoil은 React의 상태관리 라이브러리중 하나입니다.리액트를 개발한 페이스북 개발팀이 만들었고 react를 지원하는 전용 상태관리 라이브러리이기 때문에 react내부에 대한 접근이 가능하고 동시성 모드, Suspense 등을 손쉽게 지원 가능하다는 장점이 있습니

2021년 12월 29일
·
0개의 댓글
post-thumbnail

[React] Jotai넌 누구냐??

React의 상태관리 라이브러리중 하나입니다.jotai는 매우 간단하고 작은 단위로 전역 상태 관리가 가능한데요.recoil과 매유 유사합니다. 주로 많이 쓰는 Redux같은 경우에는 Flux패턴을 사용하여 액션을 통해 앱의 상태를 변화시키고, 컴퍼넌트는 selecto

2021년 12월 23일
·
0개의 댓글

[React] Code Splitting

앱을 개발하고 배포를 하게되면 사용하는 모든 코드들이 하나의 번들로 묶여지게 됩니다.규모가 크지 않다면 그렇게 문제가 되지 않지만 규모가 커진다면 번들을 로드하는데 시간이 오래 걸리게 됩니다.이렇게 번들이 커져 로드하는 시간이 커지게 된다면 초기 렌더링 시간이 길어져

2021년 12월 22일
·
0개의 댓글
post-thumbnail

[Front] 웹 성능 개선하기

웹 페이지의 속도는 사용자에게 매우 중요한 부분이라고 할 수 있습니다.Akamai의 2017보고서를 살펴보면 다음과 같이 나와있습니다.사이트 로딩 속도가 0.1초 지연되면 매출이 7% 감소할 수 있습니다하루에 100만원을 번다고 했을때, 웹 성능 저하가 있을시 7만원을

2021년 12월 20일
·
0개의 댓글

[React] Axios 커스텀으로 jwt토큰 재발급

Axios Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다. axios를 통하여 api 요청을 보내서 응답을 받습니다. jwt 토큰 로그인을 통한 인증을 할때 jwt 토큰을 많이 사용을합니다. 그런데 토큰을 하나로만 인증을

2021년 12월 18일
·
6개의 댓글
post-thumbnail

[React] ReCaptcha 구현하기

ReCaptcha는 고급 위험 분석 엔진과 적응형 과제를 사용하여 악성 소프트웨어가 웹에서 악의적인 활동에 관여하지 않도록 합니다.즉 사람인지 봇인지를 구별하여 봇이라고 판단되는 경우에 웹에서 활동을 하지 못하도록 할 수 있습니다.https://www.goog

2021년 12월 14일
·
0개의 댓글

[React] 함수형 컴포넌트 클래스형 컴포넌트

이번 포스팅에서는 함수형 컴포넌트와 클래스형 컴포넌트의 차이점을 알아보도록 하겠습니다.우선 React를 사용하여 개발을 할 때 클래스형, 함수형 두 가지 방법으로 컴포넌트를 선언할 수 있습니다.예전에는 클래스형 컴포넌트가 많이 사용되었지만 React 16.8v 부터 h

2021년 11월 24일
·
0개의 댓글

JavaScript 정규 표현식

정규 표현식은 문자열에 나타나는 특정 문자 조합과 대응시키기 위해 사용되는 패턴입니다.즉 정규 표현식을 이용하여 특정 패턴에 매칭되는 문자열을 찾아낼 수 있습니다.예를 들어 example@gmail.com 이라는 문자열은 @을 기준으로 앞 뒤로 문자열이 있고 또 뒤의

2021년 11월 22일
·
0개의 댓글

비동기 통신 AJAX

AJAX는 Asynchronous JavaScript and XML의 약자로 비동기 방식으로 데이터를 주고 받기 위해 개발된 자바스크립트 기술입니다.AJAX는 HTML, XML, JSON, 텍스트 파일 등의 다양한 데이터를 주고받을 수 있고 AJAX를 사용하기 위해 X

2021년 11월 21일
·
0개의 댓글

React-Query

React-Query는 React엡에서 비동기 로직을 쉽게 처리할 수 있게 해주는 라이브러리입니다. 이전까지는 Redux와 Saga를 이용해서 비동기 로직을 많이 관리했는데 최근 React-Query를 이용하여 비동기 로직 관리를 많이 사용한다고 하여 포스팅 하게 되었

2021년 11월 16일
·
0개의 댓글

[파이썬]백준 2167 - 2차원 배열의 합

부분합을 구하는 문제인데 dp를 이용해서 풀었습니다.우선 dp 배열의 각 위치에 각 부분합들을 모두 기록을 하고 각각의 좌표(x, y), (i, j)가 들어온다면 dpx - dpi-1 - dpx + dpi-1을 해주면 됩니다.참조https://lmcoa15.t

2021년 11월 14일
·
0개의 댓글

[파이썬]백준 1768 - 찾기

백준 1768 - 찾기KMP 알고리즘은 문자열 검색시 불필요한 문자간의 비교를 없애기 위하여 실패함수를 이용하여 O(n+m)으로 만들어줍니다.실패함수는 KMP알고리즘 실행중 일치하지 않는 문자가 있으면 어디서부터 검색을 할지 알려줍니다.즉 처음부분부터 해당위치까지 접두

2021년 11월 12일
·
0개의 댓글
post-thumbnail

데이터 바인딩

데이터 바인딩이란 UI와 해당 UI가 표시하는 데이터를 연결하는 프로세스입니다.사용자에게 입력을 받을경우 사용자의 입력값이 곧바로 데이터 상으로 적용되지 않습니다. 곧바로 적용을 할려면 임의의 이벤트를 사용하여 이벤트를 통해 화면에 뿌리는 과정이 필요합니다.즉 데이터

2021년 11월 11일
·
0개의 댓글
post-thumbnail

AWS S3

최근 팀 블로그 주제로 프로젝트를 진행하다가 이미지를 어떻게 처리해야하는가? 라는 문제가 생겼습니다.에디터에서 이미지를 업로드하면 base64 방식으로 인코딩이 되어서 정말 긴 문자열로 변환되어 서버로 전송되었습니다.이대로 계속 진행을 하게 된다면 데이터베이스와 서버에

2021년 11월 10일
·
0개의 댓글

JavaScript는 어떻게 여러가지 요청을 처리하는가?

JavaScript는 싱글스레드 언어입니다. 즉 한번에 한가지 일만 처리할 수 있는데요, 동기식 요청은 코드를 한줄 씩 차례대로 실행을 합니다. 그래서 작업에 걸리는 시간에 관계 없이 첫 코드가 실행 되고 그 다음 코드가 실행이 됩니다.하지만 이런식으로 작업이 처리된다

2021년 11월 9일
·
0개의 댓글

Node 이메일 인증 구현하기

회원가입을 할때 이메일 인증을 많이 합니다.가입하는 이메일로 인증코드를 보내서 비교를 하는 방식입니다.우선 저는 Nodejs환경에서 Node mailer를 이용하여 구현을 하였습니다.메일 전송은 Gmail을 이용했습니다.우선 아래 링크들을 클릭하여서 설정을 활성화해야합

2021년 11월 4일
·
0개의 댓글

SEO 최적화

검색엔진 최적화(Search Engine Optimization)은 구글, 네이버등의 검색 엔진으로부터 웹에 대한 트래픽읲 품질과 양을 개선하는 과정입니다. 검색 엔진마다 SEO최적화 방식이 살짝 다르기는 하지만 본 포스팅에서는 구글 검색 엔진을 기준으로 SEO최적화를

2021년 11월 1일
·
0개의 댓글
post-thumbnail

[백준] 4963 - 섬의 개수

DFS(깊이 우선 탐색)을 이용하여 풀 수 있다.주의해야 할 점이앞 뒤 양 옆으로 이어진 섬만이 같은 섬으로 계산하는게 아니라대각선으로 이동할 수 있는 섬들도 같은 섬으로 계산을 해야한다그렇게 이동하기 위해서dx = 1, -1, 0, 0, 1, -1, 1, -1dy =

2021년 10월 27일
·
0개의 댓글