profile
내가 다시 볼려고 작성하는 블로그

최적화(3) - Intersection Observer

1. Intersection Observer를 이용한 lazy loading 상황 사이트의 첫 메인화면에 영상이 재생이 되고 아래에는 이미지들이 존재. 이미지가 다운로드 다 된 이후에 영상이 다운로드 시작되므로 영상 재생이 조금 늦어질수 있음 해결 방법 이미지를 빠르

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

An invalid form control with name='' is not focusable.

현재 프로젝트를 진행중에 Submit 버튼을 누르니 "An invalid form control with name='' is not focusable." 와 같은 에러가 콘솔창에 떴다. 에러가 뜬 원인은 해당 값이 required 처리가 되어있지만 값이 비어있었고, 그

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

최적화(2) - 애니메이션 최적화

1. 디스플레이의 주사율 일반적인 디스플레이의 주사율은 초당 60 Frame(60FPS) 브라우저의 주사율이 초당 30, 20 Frame 일때 쟁크 발생(애니메이션이 버벅이는 현상) 왜 브라우저가 60Frame을 못 그리는걸까? 먼저 브라우저가 화면을 그리는 과정에

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

최적화(1) - Lighthouse 및 이미지 최적화

1. Lighthouse를 이용한 검사 해당 웹페이지의 성능 검사 및 성능 향상을 위한 가이드를 제공해줌. 결과 페이지에서 성능 점수와 Metrics, 페이지와 로드되는 과정 등을 알려준다. Metrics 왜 점수가 낮게 나왔는지를 보여주는곳 Oppotunities

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

axios interceptor을 이용한 토큰 처리

인증 및 보안에 대해 한번도 배운적없던 나로서는 토큰 처리를 어떻게 하는지 항상 궁금하였다. 국내외 사이트들을 찾아봐도 어떤곳에서는 쿠키를 사용해라 또 다른곳에서는 로컬스토리지를 사용해라 모두가 다른말들을 할뿐이었고 결국 정답은 없다는것을 알겠되었다.(혹시 있다면 댓글

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

window.location

리액트 프로젝트를 하며 페이지를 이동시켜야 할 경우가 많이 있다.Link, navigate등을 사용할 때도 있지만 window.location 을 사용할때도 있는데 이 때 window.location.href 와 window.location.replace의 차이가 무엇

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

[React] TypeError : undefined is not a function

프로젝트를 하던중에 위와 같은 에러를 떴다. 저 에러가 뜨는 이유는 알고있지만 왜 뜨는지는 이해할 수가 없었다. 아래가 처음 작성한 코드이다.axios요청으로 서버에서 댓글을 받아오는데 댓글이 없으면 undefined로 바뀌는것을 확인 할 수 있었다. 내가 알기로 un

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

[React] useEffect

React 컴포넌트는 기본적으로 내부 상태(state)가 변할 때 마다 다시 렌더링을 한다. useEffect 명령형 또는 어떤 effect를 발생하는 함수를 인자로 받는다. 변형, 구독, 타이멍, 로깅 또는 다른 side effect는 함수 컴포넌트의 본문안에서 허

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

[TS] 기본 타입

JS처럼, TS의 모든 숫자는 부동 소수 값이다. 16진수, 10진수, 2진수, 8진수 리터럴도 지원한다" 큰 따옴 표 ' 작은 따옴표 둘다 사용 가능하고 백틱 \` 또한 사용 가능하며 ${} 와 같은 형태로 표현식을 포함 할 수 있다.배열 타입은 두 가지 방법으로

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

[React] Link로 데이터 전달하기

프로젝트를 하며 프로필페이지로 이동할때 현재 로그인한 유저의 정보도 함께 넘겨주어야했다. redux store에 저장해서 사용할수도 있었지만 props처럼 바로 넘기는게 더 효율적일꺼라 생각했다.그래서 프로필 버튼을 누를때 를 사용하여 이동시키는데, 이 때 데이터도 같

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

[redux] middleware

1. 미들웨어란? 액션이 디스패치 되어 리듀서에서 이를 처리하기 전에 사전에 지정된 작업들을 설정한다. 즉,액션과 리듀서 사이의 중간자로가 이해하면 쉽다. 리듀서가 액션을 처리하기전, 미들웨어가 할 수있는 작업들이 여러가지가 있다. 전달받은 액션을 기록 할 수도 있고,

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

[JS] 제너레이터

일반 함수는 하나의 값 혹은 0개의 값만을 반환하지만 제너레이터를 사용하면 여러 개의 값을 필요에 따라 하나씩 반환(yield) 할 수 있다. 제니레이터 함수는 일반 함수와 다르게 호출을 해도 코드를 실행하지 않고, 대신 실행을 처리하는 '제너레이터 객체'가 반환된다.

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

git 명령어 정리

amend : 마지막에 했던 커밋변경사항을 커밋은 하지 않고 잠시 킵해두고 싶을때. 다른 브랜치로 가야할때 현재 브랜치에서 커밋 못한 파일들을 stash처리 하면 됨.git stash : stash에 저장git stash pop : stash에 저장했던것을 빼오기git

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

20 web projects by VanillaJS - 9, 10, 11, 12, 13

09. Expense Tracker Array Methods와 Local Storage를 사용하여 expense tracker 구현 -숫자를 입력하면 지출이 +숫자를 입력하면 수입이 자동으로 입력이 되고 Total이 자동으로 바뀐다. 또한 History 탭에서 각

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

20 web projects by VanillaJS - 8

fetch를 통해 외부 API를 받아와 검색 혹은 랜덤 버튼을 누르면 해당 음식이 검색이 된다.음식 사진을 누르면 modal창으로 해당 음식에 대한 정보 및 레시피가 나타나도록 하였다.event.path / event.composedPath()이벤트가 발생된 노드에서

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

20 web projects by VanillaJS - 7

Hangman Game일정 횟수 내에 정해져 있는 단어를 맞추는 게임이다. 틀린 글자를 입력하면 그 글자가 우측 상단에 표시가 되고 한 번 입력했었던 글자를 또 입력 하면 밑에 팝업창이 뜬다. 팝업창은 translateY 와 setTimeout() 을 사용하여 자동으로

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

20 web projects by VanillaJS - 5, 6

Array Methods 연습 프로젝트API를 통해 자동으로 user정보를 받아오고 랜덤으로 Wealth 값을 주었다.이후에 좌측에 있는 버튼들을 통해 유저 추가, 유저의 돈 2배 증가, 백만장자만 보기, 분류, 계산 각각 map, filter, sort, reduce

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

[Python] all(), any()

1. all() all(iterable)함수는 인자로 받은 반복 가능한 자료형의 모든 요소가 True일때 True를 반환하고 하나라도 False일 때 False를 반환. 2. any() any(iterable) 함수는 인자로 받은 반복 가능한 자료형 중 단 하나라도

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

20 web projects by VanillaJS - 4

자동 환율 계산 시스템두 가지의 화폐 단위를 선택을 할 수 있고, 첫 번째 화폐와 두 번째 화폐 단위의 환율을 자동으로 환산해서 입력값을 나타낸다. 초기에는 USD와 KRW를 기본 selected로 설정하였다.Swap 버튼을 누르면 현재 선택한 두 가지 화폐단위의 위치

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

20 web projects by VanillaJS - 1,2,3

JavaScript를 조금밖에 배우지 못하고 Vue.js로 넘어간것이 아쉽기도 했고, 리액트를 혼자 공부하기전에 결국에는 프레임워크나 라이브러리의 근간이 되는 언어가 중요하다고 생각을 해서 JS를 좀 더 깊게 공부하자고 생각을 하였다!모던 자바스크립트 책으로 이론을 공

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