profile
프론트엔드개발

Next.js Data Fetch

nextjs의 서버사이드 렌더링에서 data를 fetch하는 방법을 알아보자페이지에서 getServerSideProps함수를 리턴하는 경우에는 해당 함수가 리턴하는 props를 통하여 컴포넌트가 렌더링되기 이전에 pre-rendering 한다.서버측에서만 실행되고 클라

약 4시간 전
·
0개의 댓글
·

bit 연산자 & shift연산자

비트연산에 대해 공부해보자컴퓨터는 메모리에 데이터를 1, 0형태로 저장한다.이는 전기가 흐르는지 흐르지않는지에 따라 결정된다만약 한글, 영어, 일어, 게임, 음악 이라는 언어와 카테고리로 필터링을 한다고 가정했을때,3개의 언어 \* 2개의 카테고리 = 6가지의 경우의

어제
·
0개의 댓글
·

Tmux

여러개의 터미널화면을 분할해서 사용할수있는 "Terminal multiplexer"에 대해 공부해보자Tmux는 세션, 윈도우, 팬이라는 3가지 개념이 있다세션 : tmux에서 가장 큰 실행단위고 attach/detach로 사용된다. detach한 세션은 종료되지않고 백

어제
·
0개의 댓글
·

Next.js 기본

새로 갈 회사에서 Next.js를 주로 사용하기때문에, 한번 정리해보자 Next.js ㄱ

2일 전
·
0개의 댓글
·

Next.js 구동방식

Next.js 공부를 하기앞서, Next.js가 어떤식으로 동작하는지 알아보자 Next 서버로 요청이 들어오면 Next서버에서 요청이 들어온 페이지에 들어갈 데이터를 Fetch하고 (서버측에서 Fetch를 한다는점이 기존과 다르다) Html을 구성하여 Client로 보

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

유클리드 호제법 (최대공약수, 최소공배수)

알고리즘 단골 질문인 유클리드 호제법을 정리해보자최대공약수를 구하는 쉬운 방법은 2부터 min(A,B)까지 모든 정수로 나누어보는 방법이다.최대공배수를 구하는 쉬운 방법은 변수 lcm을 +1 하면서 A, B를 lcm으로 나누었을때 나머지값이 0이 되는 수를 찾는다A를

2022년 9월 22일
·
0개의 댓글
·
post-thumbnail

React Portal

react에서 모달을 만드는작업이 많았는데, react portal이라는 기능이 있어 정리해보자react에서 부모 컴포넌트의 DOM 계층 밖에 DOM노드로 자식을 렌더링 하는방법.위 코드에서 출처 : https://dev-bomdong.tistory.com/2

2022년 9월 13일
·
0개의 댓글
·
post-thumbnail

Jest

테스트 주도 개발인 TDD에 관심이 생겼다. 기존에 typescript를 사용하였지만 함수의 검증이 필요하여 테스트를 도입하고자 공부해보자. Jest None Config로 config파일 없이 사용가능하다. unit test, intergration test, E2

2022년 8월 14일
·
0개의 댓글
·
post-thumbnail

MessageChannel

qbot 프로젝트를 분석하다가 발견한 API이다.iframe을 통해서 통신을 가능하게 하는? API인듯한데.. 자세히 알아보자2개의 클라이언트 사이에서 양방향으로 메시지를 주고 받을 수 있는 메시지 채널을 생성하는 웹API이다즉 1대1 통신일때 사용하는 API인거같다w

2022년 8월 5일
·
0개의 댓글
·

filtering할때 all조건 거는법

filter걸때 state를 조건에 넣어줬는데, el.status가 "ALL"인 경우는 없어서 난감했다.갓도경이 도움을 줬는데 아래 코드를 참고하자statusFilter === "ALL" || el.status === "statusFilter"

2022년 8월 4일
·
0개의 댓글
·
post-thumbnail

react-query

react-query에 대해 공부해보자react-query는 서버의 값을 가져오거나, 캐싱, 값 업데이트, 에러핸들링과 같은 비동기작업을 편리하게 도와준다.캐싱 핸들링fetch 데이터에 대해 update를 하면 자동으로 fetch를 시행한다데이터가 오래 되었다고 판단되

2022년 7월 2일
·
0개의 댓글
·
post-thumbnail

타입검사 / undefined&null

typeof는 프리미티브타입 검사시에는 적절한데 레퍼런스타입 검사시에는 오류가 있음 null과 undefined를 비교하면? null은 false가 아니지만 !null은 true를 반환한다. !undefined는 true를 반환한다 null은 수학적 계산시에 0

2022년 6월 12일
·
0개의 댓글
·

let보다 const를 사용해라?

주로 오브젝트 값을 바꾸기위해 let키워드를 많이 사용했었는데, 아래처럼 const로 선언 하더라도 객체의 값을 바꿀 수 있다.const는 재할당"만" 금지된다!또한 배열일때도 push로 추가가능

2022년 6월 12일
·
0개의 댓글
·

서버에 이미지 보내기 multi-formdata / blob

컴포넌트를 캡쳐한 이미지를 서버로 보내는 업무를 맡았다. 이미지를 서버로..?? 바이너리 개념인 Blob과 서버에 보내는 방식중 multi-formdata에 대해서 알아보자Blob(Binary Large Object)란 바이너리 형태중에서도 큰 객체를 뜻하는데, 주로

2022년 5월 29일
·
0개의 댓글
·

렌더링 이후시점만 catch 하는법

useEffect를 쓰면 의존배열에 data값을 넣어주어도, 최초렌더링(mount시) + data가 변할시 리렌더링이 된다.나는 최초 렌더링시와 data가 변할시를 구분해주고싶었는데, useRef를 이용하여 렌더 전후를 구분하는 방법을 알아보자useRef의 curren

2022년 5월 26일
·
0개의 댓글
·

craco

프로젝트 작업을 하는데 무수한 상대경로 작성으로 지쳐버렸다.. 디렉터리 구조를 절대경로로만 사용할수있는 방법이 없을까? CRACO를 알아보자CRA프로젝트를 사용시, 복잡한 webpack설정을 할 필요없이, craco.config.js 추가로 간편하게 설정가능하다!npm

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

유틸리티 타입

ts의 유틸리티 타입정리해보기대괄호로 객체를 접근하는 타입인덱스 시그니처에서 사용하지 못하는 문자열 리터럴을 허용함

2022년 4월 29일
·
0개의 댓글
·
post-thumbnail

redux-toolkit

회사에서 redux-toolkit을 쓰길래 한동안 기존 코드를 따라 사용했는데 이제 조금 이해가 되어 패턴을 정리해보자기존의 복잡한 리덕스를 좀 더 편리하게 사용하기위한 툴킷.기존의 리덕스는 redux외에 여러가지 모듈들을 추가로 설치해줘야했는데, RTK는 필요한 모듈

2022년 4월 29일
·
0개의 댓글
·
post-thumbnail

replace, replaceAll

string타입을 조작해야하는 업무를 하게됐는데, 특정 값을 추출해서 변경하는 replace를 알아보자

2022년 4월 29일
·
0개의 댓글
·
post-thumbnail

정규표현식

문자열 치환작업을 하는도중 정규표현식의 필요성을 느끼게 되어 공부하였다..^ : 줄의 시작에서 일치$ : 줄의 끝에서 일치. : 임의의 한 문자와 일치a|b : a또는 b일치\* : 0회이상 반복되는 문자와 가능한 많이일치\+ : 1회이상 반복되는 문자와 가능한 많이

2022년 4월 17일
·
0개의 댓글
·