profile
제가 아는 모든것을 설명할 수 있는 개발자가 되고 싶습니다.
post-thumbnail

우리 서비스는 왜 느릴까?

파일 사이즈 줄여서 최적화하기

4일 전
·
3개의 댓글

lighthouse 최적화 점수 기준

lighthouse의 perfomence 부분에는 6가지 기준이 있습니다.first contentful paintFirst Contentful Paint marks the time at which the first text or image is painted.첫번째 t

2021년 3월 19일
·
0개의 댓글

html canvas context

html canvas는 html element들로만 표현하기 힘든 애니메이션이나 도형들을 그릴 때 사용하는 말 그대로 "그림판"입니다.canvas를 사용하기 위해서는 drawing context라는 것을 HTMLCanvasElement.getContext('contex

2021년 3월 15일
·
0개의 댓글

iterator와 generator에 대한 고민

이 글은 2년차 예비 프론트엔드 개발자가 쓴 글로, 틀린 부분이 있을 수 있습니다.그런 부분은 댓글이나 메일로 알려주시면 감사하겠습니다.프론트엔드 개발자라면 redux-saga라는 redux middleware를 본 적이 있을 것이다.이 때 generator라는 문법을

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

html canvas 다각형 hover event 구현

서론 cavas에서 다각형 그리기 다각형 hover event 구현하기 결론

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

Vue.js 에서 enter, leave transition 사용하기

회사에서 vue를 사용하게 되어서, vue에 대해서 공부해 보게 되었다.vue 공식문서를 읽는게 가장 설명이 잘 되어있을 것 같아서, 한번 읽어보고 있었다.그곳에서 진입/진출 그리고 리스트 트랜지션 이라는 부분에 대해서 읽게 되었다.이 부분은, react에서 구현하기

2021년 1월 19일
·
2개의 댓글
post-thumbnail

[HTML] meta tag

what is meta tag? meta tag는 뭘까요? head tag 안에서 사용하는 link, base, style, title등으로는 표현할 수 없는 meta data를 설정하기 위한 tag입니다. > meta data는 가장 단순한 정의는 데이터를 설명하는

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

[CSS] viewport란?

viewport는 브라우저에서 사용자에게 보이는 부분을 viewport라고 한다.우리가 사용자의 경험을 증진시키기 위해서 신경써야 하는 부분 중 하나이다.만약 사용자가 우리 웹사이트의 컨텐츠보다 작은 화면을 가지고 있다면, viewport보다 content가 더 크기

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

axios intercepter로 error handling 하기

error handling은 언제 해야 할까요?대체적으로 프론트엔드에서는 에러 핸들링을 해야 할때는, api server와 통신할 때 자주 해야 합니다.프론트엔드 개발자라면, api server와 통신할 때, 특정 error에 대응해주어야 할 때, 코드 중복이 자주 발

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

npm install 과 버전 문제

npm install을 사용할 때 발생하는 협업 문제점 그리고 그 해결책

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

js 이벤트 발생 경로

js에서는 html에서 발생하는 event를 인식할 수 있는 event handler가 있다.이 때, event handler가 event를 인식할 때, 특별한 형태로 event가 발생하게 되는데, 이에 대해 알아보자.다음과 같은 html이 있을 경우에, 밑과 같이 e

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

forwardRef, useImperativeHandle

reference를 다른 곳으로 넘겨주기 위해서 사용하는 methodforwardRef의 문제점은 Parent에서 ref에 무엇이 들어가던지, 무조건 그에 관련된 코드를 실행시킬 것이다. 만약에 Child에서 ref를 설정하지 않았다면? Parent에서 ref가 Nul

2020년 12월 31일
·
0개의 댓글
post-thumbnail

CSS 용어 정리

CSS 용어 정리 CSS(Cascading Style Sheet) Box Model box model은 css가 레이아웃을 설정하는데 사용하는 모델로써, reset CSS float z-index image sprite media query css 전처리기 displa

2020년 12월 30일
·
0개의 댓글
post-thumbnail

html, 브라우저 용어 모음

html, 브라우저 용어 정리. 생각나는대로 적어서 양이 별로 없습니다. 댓글로 채워주시면 감사하겠습니다.

2020년 12월 27일
·
0개의 댓글
post-thumbnail

마이스터고 개발자의 하소연

마이스터고등학교를 다니면서, 제가 겪었던 감정, 제가 했던 생각들을 그냥 풀어보려고 합니다.

2020년 12월 21일
·
2개의 댓글

css pseudo element ::after, ::before 안먹을때

우선 당신의 ::after와 ::before가 content를 포함하고 있는지 확인하라.빈칸이어도 상관 없다.빈칸이라도 가지고 있다면, width와 height를 주었는지 확인해라, 만약 주었다면, display: inline-block으로 만들어라.2-1. ::aft

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

adapter pattern

내가 이 어뎁터 패턴을 알아보게 된 이유는, client에서 서버에서 받아오는 data를 내 나름의 DTO로 변경하기 위해서 만들었던 함수가 있었다.그 함수를 친구들이 봤을 때, 이거 adapter pattern 아님? 이라고 말했을 때, 궁금해서 알아보게 되었다.세상

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

HOC(Higher Order Component)

내가 이 HOC에 대해서 알게 된 이유는, 단지 코드의 중복을 줄일 수 없을까? 라고 생각하던 도중에 동기 중 1명이 이것에 대해 알려 주었는데, 비슷한 동작이 여러번 반복되는 컴포넌트가 있을 때, 다른 함수로 여러번 빼지 않고 한개의 컴포넌트로 묶을 수 있게 되므로,

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

Box Model

Box Model이라는 것을 매우 오랜만에 들어보았다.후배가 나에게 질문을 했을 때 단지 대답을 하면 되는 것이였지만, 난 그러지 못했다.생각해보니 css, html에 대해서 제대로 공부해 본적이 없는 것 같다. 만약 면접 질문에 이런게 나오면 난 어떻게 대답해야 하는

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

css block formatting context

프론트엔드 면접 질문 모음집을 보다가 BFC라는 것에 대해서 알게되었다.옛날에는 이녀석으로 자주 개발을 했다고 들어서, float와 bfc에 대해서 알아보자.알아보니 float 요소를 그릴 때 사용하는 박스와 같은 녀석이다. BFC(block formatting con

2020년 11월 20일
·
0개의 댓글