frontend

UI / UX에 대해 아직 제대로 모르는 것 같아 정보들을 찾아 간단히 정리해보고자 한다. 간략하게 말하자면 UX는 경험이고, UI는 이 경험을 실현시키는 수단이다. 카카오톡은 채팅이란 경험들 제공한다. 채팅이란 경험을 제공하기 위해 App이라는 수단을 사용한다.

'디자이너가 같은 시안을 주더라도 개발자마다 UX의 정도가 다를 수 있다. 디자인 시안을 바꾸지 않고 UX를 향상 시키는 방법에는 어떤 것들이 있을까요?'면접 때 받은 질문이다. 나는 제대로 답을 하지 못 하였다. UX에 대해 많은 생각을 해보지 않았기 때문이다. 프론

이 글은 적고 나서 더 찾아보니 별로인 글인 것을 알았습니다.... 제가 한 방식은 아주 조금의 성능 향상 밖에... 없을 것 같고 해당 글을 참고 하시면 진짜 답을 얻을 수 있을 것 같습니다.'ES5를 사용하는 사용자들을 위해 ES5로 트랜스파일 해버리면 ES6 사용

브라우저에는 엄청나게 많은 event가 있다. (change, click, mouseover 등등)이런 event가 발생 했을 때 이렇게 처리해주겠다~ 하는 것이 event handler 이다. = event listener = event 콜백 함수addEventLis

캡쳐고 버블이고 안 됐으면 좋겠다. 할 때 쓰는 것전파의 순서 등을 막을 순 없지만 자신 이후로 전파 하는거를 막을 수 있다. 즉 버블을 막을 수 있다.황당한 케이스도 있을 수 있다. div, body, html 이 다 있으면div에 클릭이벤트 발생해서 body가 실행

IntersectionObserver API에 대해 알아보려고 한다. 무한 스크롤을 구현할 때 주로 scroll event와 throttle을 사용하여 구현했었다. 하지만 scroll event는 main thread에서 돌아가기 때문에 성능에 좋지 않다는 글을 보았다

직역하면 나무 흔들기, 모듈을 번들링할 때 사용하지 않는 코드를 제거하는 최적화 과정을 말한다.이 용어를 처음 최적화 개념에 사용한건 rollup.js이다. Webpack 4 부터 대단히 영리한 최적한 빌드를 보여준다.Webpack의 optimization에서 prov

요즘 개발 환경에서 번들링을 이용해서 모든 코드를 하나의 번들로 묶어서 만들게 된다. 앱이 비교적 간단한 편이라면 크게 문제가 되지 않지만, 프로젝트가 커지면 전달해야 하는 파일도 커지고, 유저의 브라우저가 파싱해야하는 정보도 많아지기 때문에 퍼포먼스 문제들이 생길 수

요즘 웹사이트에서 찾아보면 하나의 페이지만 있고, 상단의 네비게이션 바를 통해 화면을 이동하는 방식을 볼 수 있다. 이러한 페이지는 어떻게 구현하는 것일까? 물론 스크롤을 하나하나 계산해서 이동시킬 수도 있겠지만, element의 메소드인 scrollIntoView를

Document Type의 약자로 HTML이 어떤 버전으로 작성되었는지 미리 선언하여 웹브라우저가 내용을 올바로 표시할 수 있도록 해준다. <!DOCTYPE> 을 선언하지 않으면 호환모드(quirks mode)로 동작하는데, 호환 모드의 경우 각 브라우저마다 문서

제가 면접 보면서 질문 받았던 면접 질문들을 총정리 합니다. 여러 IT 대기업들 그리고 여러 스타트업들의 내용들을 정리하였습니다.DOCTYPE 이란 무엇인가요?여러 meta 태그들에 대한 질문시맨틱 태그란 무엇인가요?position에 대해 설명해주세요.display에

회사에서 커스텀 스크롤을 만들 일이 있었다. 다른 라이브러리를 사용해서 구현해보고자 했지만, 내가 원하는 대로 되지 않아 직접 만들기로 하였다. (예를 들어 스크롤 위아래로 마진을 주는 기능이 없다던가…)직접 만든 스크롤은 -webkit- 전용 css 속성이 많아서 모

기본적인 이미지가 있고, 해당 이미지에 마우스를 hover할 시에 이미지가 변경이 되었어야했다. 처음엔 그냥 hover시 css에서 background-url을 변경해주었다. 그러자 배포서버에서 이미지가 깜빡이는 경우가 발생하였다. 네트워크를 확인해보니, hover시에

axios를 timeout을 주고 특정 시간이 지나면 에러가 나도록 사용하고 있었다. 분명 axios에서 에러가 나면 error.response 값을 활용해서 에러처리를 하고 있었는데 빈 error message가 뜬다는 현상이 가끔 CS로 올라왔다.한참을 못 찾다가

브라우저의 콘솔에서 new Date() 를 입력하면 사용자의 시간대에 맞게 날짜가 나오는 것을 볼 수 있다.만약 서버에서 타임존이 없이, 2024-01-29 라는 값을 내려줬을 때, 나라마다 모두 29일을 new Date('2024-01-29') 만으로 바로 표시할 수

우리는 다른 AWS의 EKS 와 비슷한 다른 클라우드의 서비스를 사용하여 배포를 하고 있는데, pod을 2개 이상으로 유지하게 되면 pod 이 1개는 유지되고, 1개씩 배포되기 때문에 js 요청에 404 not found 에러가 나는 현상이 있었다. 1개는 이전 버전