Nuxt에서 발생하는 "Hydration completed but contains mismatches." 오류는 서버에서 렌더링된 HTML과 클라이언트에서 렌더링된 HTML이 서로 다를 때 나타나는 문제입니다.즉, SSR(Server Side Rendering) 과 클라이언트 렌더링(Client Side Rendering) 결과가 일치하지 않을 때 이 오류 메시지를 브라우저 콘솔에서 확인할 수 있습니다.이 문제를 해결하려면, SSR과 CSR의 출력이 왜 달라졌는지를 파악해야 하며, 일반적으로는 아래와 같은 원인들이 많습니다.💡 오류 메시지: Hydration completed but contains mismatches."Hydration completed but contains mismatches."N..
앱링크, 딥링크 개념 및 적용
앱링크, 딥링크 개념 및 적용앱링크는 모바일 앱의 컨텐츠에 딥 링크하기위한 개방형 옴니 채널 솔루션입니다. 라고 페이스북 공식문서에 설명이 나오지만 뭔 소리인가 싶다앱링크, 딥링크는 링크를 클릭 하였을 때 앱이 설치 되어 있으면 앱으로 연결이 되고 그렇지 않을 경우에는 URL로 설치 할 수 있게끔 하는 설계 방식.앱링크와 딥링크의 큰 차이는 custom scheme 을 사용하냐 안하냐의 차이이며 앱링크는 http와 https로만 앱링크가 연결이 가능하고 딥링크는 custom url shceme 으로도 가능하다. 또한 앱링크는 안드로이드 6.0 이상 부터 지원이 가능하지만 딥링크의 경우에는 직접 안드로이드의 URL과 매핑하기 때문에 어느 기기에서든 가능하다. 안드로이드와 iOS 연결하는 방식은 다르다.앱링..
프론트엔드 개발자 기술면접 인터뷰 질문 모음(v2024.05.13)
프론트엔드 기술면접 실제현업 질문 모음최근 1년 간 프론트엔드 면접을 7번 정도 본 것 같다. 국내 IT 대기업 N사만 여러번, K사, 온라인쇼핑몰 C사 등등 여러군데를 면접을 진행했으며 비록 떨어졌지만 여러모로 좋은 경험을 하였습니다. 프론트엔드 엔지니어를 꿈꾸는 시니어 주니어 엔지니어들에게 면접을 진행하기전 필수적으로 알아야 할 질문과 마음가짐에 대해서 공유해보려고 합니다. 다른 프론트엔드 기술면접 관련된 글도 많지만 너무 많아서 조금 요약을 해보려고 합니다. 면접관으로 들어가시는 분들께서도 어떤 질문을 할지 모를 경우에는 참고하셨으면 좋겠습니다.Frontend 필수 언어중요도설명★★★★★프론트 엔지니어를 꿈꾼다면 정확하게 알고 있어야 하는 것들이며 하나라도 모르면 떨어진다고 봐도 무방하다. 꼭 알고..
robotjs npm, yarn install 오류 해결방법(prebuild-install || node-gyp rebuild)
라이브러리 패키지는 일반적으로 다른패키지의 의존성을 많이 가지기 때문에 설치 도중 의존성 패키지가 적합하지 않는다면 설치가 제대로 되지 않는 경우가 많다. robotjs 라이브러리 설치하면 아래와 같은 오류를 많이 만날 것이다. Mac에서는 오류가 잘 안나지만 Windows계열에서 오류가 잦아 이번에 포스팅을 해보고자 한다. prebuild-install warn install no prebuilt binaries found (target=14.17.0 runtime=node arch=x64 libc= platform=win32) prebuild-install || node-gyp rebuild 위와 같이 오류메세지가 출력되면서 설치가 되지 않는다. 위의 이미지는 인터넷에 떠돌아 다니는 일반적인 오류메시..
React Native Expo 2달 사용 후기 및 설치 및 배포 방법
앱을 간단하게 개발하고 싶었는데 Flutter를 사용할 지 Javascript에 익숙한 React Native를 선택할지 고민이 많았지만 결국 React Native로 선택을 하였고 현재도 아직 잘 사용중이다. Expo의 선택은 아직까지는 후회가 없으며 실무에서도 또한 도입하려고 계획 중에 있습니다. React Native를 사용해서 개발을 하게되면 Expo라는 오픈소스 플랫폼이 나오는데 생각보다 라이브러리가 많았고 개발하기 쉽게 만들어져 있었다. 본인은 Vue 로 개발하는 것을 선호하였지만 React Hook을 1달가량 사용해보고 큰 무리 없이 React Native로 전향하였습니다. 그만큼 사용하기가 쉬웠고 프론트엔드 개발자라면 바로 가능합니다. https://docs.expo.io Introduct..
Vue cli 3 + vuetify + IE11 babel-polyfill 적용(Promise 해결)과 꼼수들
Vue cli 3에서 IE11 적용방법에 대해서 공유를 합니다. 그래도 IE11까지는 지원을 하자는 마음에 babel-polyfill을 설치하여 작업을 하는데 제대로 동작이 되지 않아 하루 종일 삽질을 하였다. vue-excel-xlsx 라이브러리는 IE 익스플로러를 지원하지 않으니 참고하면 된다. 프론트엔드를 지난 몇 년간 개발을 해오면서 ES6를 ES5로 변환하기 위해(익스플로러 브라우저를 지원) 단순히 babel-polyfill 만 적용하면 될 줄 알았다. 사실 프로젝트를 세팅하는 초기에는 작동이 잘 되긴 한다. Promise를 만나기 전까지는 말이다. 그래서 대부분 해결되었다는 블로그를 봐도 내 프로젝트 소스에는 작동이 되지 않았다. 이미 운영서버로 배포가 되어 있는 상황이고 몇몇 라이브러리를 사..