post-thumbnail

js 리팩토링 2 promise pattern ,blocking

오늘은 최적화 1에서 내가 복사해온 코드를 가져와서 다시 추가로 프로미스 패턴을 사용해 리팩토링 해보겠다.위와 같이 함수를 최대한 분리해서 한가지의 기능만 하도록 하고있다.프로미스패턴을 쓰기전에 프로미스 패턴이란 무엇인가? 부터 공부하면 좋을 것이다.우리는 비동기 작업

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

js 코드 리팩토링

오늘은 유튜브 프롱트 님의 영상을 보다가 내용이 너무 좋아 포스팅을 하려한다.아래 코드는 프롱트님의 예시 코드이고 먼저 영상을 다 보지 않은 상태에서 먼저 리팩토링 해보고 영상이랑 비교하려한다.코드는 위와같다 .먼저 if문의 el를 수정하겠다. 조건문을 하나로 합쳐 아

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

js 기본기 연습

오늘은 간만에 배열접근 , 객체접근의 대한 정확도와 속도를 스스로 체크하기 위해 기본기연습을 하려하고있다. 배열접근은 먼저 위 배열의 333의 값을 666으로 바꾸려면? 위와같은 방법으로 할 수 있겠다. 배열의 데이터 접근은 우리가 늘 익숙해지려 노력해야하는 부

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

next js layout

오늘은 next js layout 잡는 방법에 대해 포스팅해보겠다.방법은 간단하다.먼저 위와같이 헤더와 푸터 컴포넌트를 만들었다면 src 폴더 안에 layout 이라는 폴더를 만들고 layout폴더 내부에 Layout.tsx라는 컴포넌트를 만들어준다.헤더와 푸터는 공통

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

프로젝트 성능 측정

오늘은 반응형 ui작업을 마치고 나서 성능을 개발자도구의 LightHouse를 사용하여 성능을 측정해보았다.성능 66 접근성 90 권장사항 83 검색엔진 최적화 90 으로 측정이 되었는데 생각보다 성능이 낮아 당황스러웠다.아직 함수의 memoization을 사용해 최적

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

styled component

styled-components란 Javascript 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 CSS-in-JS 라이브러리로 React 프레임워크를 주요 대상으로 한 라이브러리이다.자유로운 CSS 커스텀 컴포넌트를 만들 수 있다.inline-style을 사

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

개발을 시작하고 1년이 조금 지난 후의 회고록

나는 고등학교 3학년때부터 음악에빠져 가수라는 꿈에 도달하기위해 여러 고민과 노력을 가지고있었다.나의 입시는 쉽지 않았다.4수끝에 원하는 대학에 합격했고 대학 생활은 내가 생각한 것과 너무나도 달랐다.1년을 그렇게 다녀보고 음악은 취미로 하자. 라는 생각 이상으로 깊어

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

지난 skeleton의 오류와 수정

지난번 react suspense에 대한 포스팅을 올렸을때 원하는대로 동작을 하지않았다.스켈레톤 컴포넌트와 연결돼서 랜더링 되는게 아니라 뚝 뚝 끊겨서 랜더링이 되어서 크게 당황을 했는데 오늘 생각한 방법은 state를 다시 만들어서 결국 해야하나?라는 고민이 커졌다.

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

react lnb이슈기록

이전에 포스팅한 lnb기록에서 지금까지 끙끙앓던 이슈를 해결했다.문제는 간단하게 위와같은 dummy데이터에서 href 부분을 유심하게 보길 바란다.중간과정은 생략하고 문제점에 대해서 먼저 간단하게 정리하겠다.menuTitle은 더미데이터의 href와 aspath를 비교

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

css animation keyframe

오늘은 react suspense를 이용해 skeleton component 불러오고 skeleton component의 대한 css 디자인에 대해 이야기를 나누려고 한다.CSS3 애니메이션은 엘리먼트에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜

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

next getServerSideProps로 게시판 최신화데이터 불러오고 만들기

먼저 위와같이 게시판을 보여줄땐 url로 요청이 들어오는 순간 최신화된 데이터를 사용자에게 제공해야한다.next를 사용하면서 이런 로직에 대한 충분한 고민이 필요하다는것을 실전에서야 느꼈다.위와같이 사용자에게 요청받은 url로 원하는 부분을 추출하고 , DetailPa

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

효율적인 lnb만들기 in React ,ts ,next

오늘은 프로젝트를 진행하던중 피드백받았고 어려웠던점을 적어보겠다.lnb를 만들고 구성하는데 분기처리의 대한 이슈와 효율성의 이슈였다.현재 서비스 영역만 해당되는 네비게이션이다.서브메뉴,중분류 메뉴, 각 서브 분류별 사용되는 메뉴 바이다.기존의 lnb는 로 lnb를 구성

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

react suspense + skeleton component 적용하기

오늘은 react에서의 suspense를 사용하여 스켈레톤 컴포넌트를 적용해보겠다요즘은 블로그 업로드를 잘 하지 못했던게 아무래도 맡고있는 프로젝트때문에 시간이 잘 나지않았지만 다시 꾸준하게 작성해보려고 한다.Suspense라는 React의 기술을 활용하면 컴포넌트의

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

무한스크롤 react 만들어보기

오늘은 지난시간과 다르게 react로 무한스크롤을 구현해보자.소스코드는 다음과 같다위와같이 커스텀 훅을 사용해 만들었다.axios를 통해 데이터를 패칭해오고 여러가지 상태를 만들었다.로딩,에러,더 보여줄건지,데이터를 담아놓을 공간을 말이다.먼저 첫번째 useEffect

2022년 10월 18일
·
0개의 댓글
·
post-thumbnail

react 기본기 useCallback

useCallback은 useMemo처럼 기본적으로 Memoization을 사용한다.useCallback은? useCallback(()=>{return value},item)위에 굵은 글씨로 칠한 부분 즉 콜백함수 자체를 memoization을 한다.useMemo는

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

React UseMemo

오늘은 유즈메모 훅에 대해 공부해보자. 먼저 useMemo에서 Memo는 무엇일까? > 바로 Memoization을 뜻한다. Memoization이란? > 동일한 함수의 값을 리턴하는 함수가 있을 때 , 그 함수를 반복적으로 호출해야 한다면 맨 처음 리턴값을

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

무한스크롤 바닐라 js로 먼저 만들어보기

오늘은 무한스크롤을 만들어볼것이고 dom요소를 간만에 사용해볼것이다.미리 IntersectionObserver의 배경지식을 공부하면 좋은데 링크텍스트 이 블로그를 참고해서 배경지식을 습득하고 아래 예제를 공부해보자.우리가 먼저 IntersectionObserver를 공

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

axios 요청 취소

우리는 axios로 요청을 보내는것이 익숙 할 것이다.물론 fetch를 써서 할 수도 있지만..오늘은 axios의 취소요청을 공부해보자.이러한 취소요청은 왜 쓰는걸까?이전에 포스팅한 useEffect의 클린업 함수와 관련이 있다.위 코드를 간단하게 설명하자면 에러,로딩

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

Parallax Scroll

오늘은 parallax scroll에 대해 공부해보자.먼저 리액트에서 + ts로 구현해볼것인데 useState, useEffect의 대한 공부가 필요하고 clean up함수의 대한 이해가 필요하다.자 구현하면서 차근차근 설명해보겠다.먼저 이 함수들을 이해해보자.useS

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

useReducer 사용

react에서는 useState hook을 이용해 상태를 관리한다.useReducer는 useState hook을 대체 할 수 있는 react hook이다.그렇다면 useState로 관리하면 되는데 왜 useReducer가 등장했을까?useReducer는 한 컴포넌트

2022년 10월 7일
·
0개의 댓글
·