하수도키의 성장일기

개발일기/Nuxt.js

[Nuxt] Nuxt란? (Nuxt 메인 페이지 분석)

열심히 글 쓴 게 날아가서 후다닥 씁니다... 후아... Nuxt3 정식 배포된 기념으로 튜토리얼 형식으로 공식문서 격파 포스팅! 여기부터 Nuxt 메인 페이지에 있는 내용들 정리(구글 번역, 심각한 수준의 의역) 틀린 거 있으면 알려주세요! https://nuxt.com/ Nuxt: The Intuitive Web Framework Global Maintainers Summit Event 2021 globalmaintainersummit.github.com nuxt.com Nuxt란? 직관적인 웹 프레임워크라고 공식 홈페이지에 대문짝 하게 걸려있다. Build your next Vue.js application with confidence using Nuxt. An open source framewor..

개발일기/Javascript

[Javascript] 값과 변수(Values, Variables)

이번 포스팅에는 값(Value)과 변수(Variables)에 대한 차이점을 살펴보고, 원시 값과 참조 값에 데이터 할당되는 과정을 살펴보자. 원시 값과 참조값에 대한 설명은 이전 포스팅을 참조 2021.11.14 - [개발일기/Javascript] - [Javascript] 데이터 타입 정리(Data type, Primitive Value, Reference Value) [Javascript] 데이터 타입 정리(Data type, Primitive Value, Reference Value) 자바스크립트 처음 공부해보면 데이터 타입이 가장 처음에 나온다. 원시값(Primitive Value), 참조값(Reference Value)으로 데이터 타입을 나눈다. 원시값, 참조값에 대해 알아보기 타입 체크하기 크..

개발일기/Javascript

[Javascript] 데이터 타입 정리(Data type, Primitive Value, Reference Value)

자바스크립트 처음 공부해보면 데이터 타입이 가장 처음에 나온다. 원시값(Primitive Value), 참조값(Reference Value)으로 데이터 타입을 나눈다. 원시값, 참조값에 대해 알아보기 타입 체크하기 크게 2개의 챕터로 나눠서 포스팅을 진행하겠다. 기본적으로 값(Value)은 내 코드에서 사용할 순 있지만 내 코드에는 존재하지 않습니다. 이미지 참고 원시값(Primitive Value) String, Numbers, Undefined, Null, Boolean, Symbol로 이루어져 있다. 최근 BigInt도 추가되었다. Symbol, BigInt는 아직 많이 사용하진 않는다. 이 원시값들은 자바스크립트에서는 영구적인 부분이다. 즉, 가져다가 사용할 수 있지만 변경하거나 삭제할 순 없다 ..

개발일기/CSS

[CSS, 책리뷰] 새로운 CSS 레이아웃 - 살펴보기#1 (CSS LAYOUT, float, flex-box, BFC, grid)

CSS 전체를 다루는 책이 아닌 CSS 레이아웃에 대한 책이다. 지인 추천과 목차를 보고 마음에 들어 구매하게 되었다. http://www.yes24.com/Product/goods/60715949 float, flex, grid 등을 다루면서 CSS 레이아웃 과거부터 현재 그리고 미래를 다룬다. 목차 순서대로 리뷰해보겠다. 이번 포스팅은 1장, 2장 3장을 정리했다. 제1장 우리가 지나온 길 float 문제 .cards li { float: left; width: calc(33.333333333% - 20px); margin: 0 10px 20px 10px; background-color: darkorange; } card1 테스트입니다.테스트입니다.테스트입니다.테스트입니다. card2 테스트입니다.테..

개발일기/Next.js

[Next.js] ChunkLoadError: Loading chunk node_modules_next_dist_client_dev_noop_js failed

최근 백오피스 프로젝트를 맡게 되어서 next.js 를 도입했다. 인증 작업이 필요해 AWS cognito를 연동 도중에 에러가 발생했다. 에러 처음에는 Hosting UI 가 나오지 않고 잘못된 요청이라고 에러를 뿜어냈다. aws-cognito-next 라이브러리를 설치 후 에러가 발생한것 같아서 문서 보면서 차근차근 따라가보면서 살펴봤다. https://www.npmjs.com/package/aws-cognito-next aws-cognito-next Authentication helpers to enable usage of [AWS Cognito](https://aws.amazon.com/en/cognito/) in [next.js](https://nextjs.org/) applications. w..

개발일기/Javascript

JavaScript - DOM이란?

DOM 이란 뭘까? HTML 태그? JavaScript로 접근 하는 것? Node? 트리구조? 등등 용어만 들었을뿐 정확히 설명을 못했다.(이것뿐만 아니라 공부한 모든것들을 설명할 수가 없어 차근차근 정리해볼 계획이다.) DOM 정의(MDN 참조) 문서 객체 모델(Document Object Model)은 JavaScript Node 개체의 계층화된 트리다. DOM은 HTML, XML 문서의 프로그래밍 API이다. 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공한다. 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM이 뭘까? HTML 파일이 쓴 것들이 DOM인가? No 소스보기에 보여지는 것들이 DOM인가? No 크롬 개발자 도구에서 보여주는 것..

개발일기/CSS

[CSS] CSS로 삼각형, 꺽쇠(체크박스), 화살표, 스피너, 햄버거 메뉴 그리기

개요 작업하다 보면 아이콘으로 버튼, 로딩, 메뉴 등을 표현해야 하는 경우가 있다. 예전에는 대부분 포토샵 또는 이미지 파일로 backgroud-image 속성 또는 img 태그를 이용해 작업을 했다. 하지만 CSS 스킬이 발전함에 따라 CSS로 대체 가능한 아이콘들이 생겼다. CSS로 대체하면 image를 로딩해야 하는 리소스, 용량 등에 대한 부담이 줄어들어 퍼포먼스 향상에 도움이 된다. 작업하면서 필요한 아이콘 5개 추려서 정리해봤다. CSS로 도형 그리기 삼각형 만들기 삼각형 만들기 코드를 보면 border 관련 속성들만 사용해서 만들었다. 40px보더를 적용하고 색상은 모두 투명으로 적용했다. 그다음 원하는 화살표 방향에만 red 색상을 적용해 화살표를 만들었다. 꺽쇠 만들기 꺽쇠 만들기 이미지..

개발일기

[앱 개발 방식] 네이티브 앱, 모바일 웹, 모바일 웹앱, 하이브리드 앱, 웹앱이란?

웹 개발을 하다 보면 웹앱, 하이브리드 앱, 웹뷰 등 여러 가지 용어를 듣는다. 단순히 웹만 하면 될 줄 알았는데 웹을 모바일에서 가져가는 순간 용어도 웹앱, 웹뷰, 하이브리드 등 그때 부르고 싶은 대로 부르는 경향이 있었다. '아 웹을 모바일앱에서 볼 수 있게 해주는거구나'하고 이해하고 지나갔다. 이번에 UI/UX 디자인 책을 보면서 관련 설명이 있길래 보면서 정리해보겠다. 네이티브 앱(Native app) 간단하게 모바일에서 설치되어 있는 앱이라고 생각하면 쉽다. iOS는 app store, Android는 google play에서 앱을 검색해서 다운로드하여 설치하면 우선 네이티브 앱이라고 생각하자. (하이브리드 앱있을 수도 있는데 이건 뒤에 설명하겠다.) 웹 개발자 없이 앱 개발자가 만든 거라고 생..

개발일기/Javascript

Javascript timezone, language 구하기(타임존, 언어, 국가)

이번에 살펴볼 내용은 타임존, 언어 구하기이다. 다국어 사이트 작업 또는 이 사람이 어떤 언어를 사용하고 있는지에 대한 데이터를 얻고자 할 때 필요한 내용이다. 타임존, 언어, 국가 코등 등 검색을 할 텐데 여기서는 서버, 클라이언트에서 구하는 방법을 몇 개 살펴보겠다. 서버에서 구하기 Accept-Language 모던 브라우저에서 언어를 설정한다면, HTTP 요청할때 header에 Accept-Language을 포함시켜 보낸다. 보통 Accept-Language: en-Ca, ar-Eg:q=0.5 이런 식으로 보낸다. 여기서 q 값은 가중치이다. 명시적으로 적지 않으면 기본값은 1.0 이다. 위 예를 살펴보면 사용자가 en-CA(Canadian English) 를 1.0으로 선호하고 그다음 ar-EG(..

개발일기/Vue.js

[Vue.js] 이벤트 전파(버블링, 캡쳐링) 살펴보기

오랜만에 쓰는 포스팅이다. 이번에는 Vue에서 이벤트 전파에 관련된 포스팅을 쓰고자 한다. 자바스크립트 이벤트 버블링, 캡쳐링, 위임, 전파 등 여러 가지 아마 살펴봤을 걸로 기억한다. 면접이나 기술 질문에도 대부분 포함되는걸로 알고 있다. 그럴 때마다 공부하고 이해하고 다시 까먹고 반복 중이다. 이해가 안 되거나 잘 모르겠으면 우선 외우는 게 중요한 것 같다. 여기까지 온 사람이라면 아마 우선 외워야 할 것 같다. 개요 Vue를 통해 이벤트 Phase를 알아보기 버블링, 캡쳐링 살펴보기 Vue event modifier (prevent, self, stop) 살펴보기 예제 코드 Outer first Inner Inner 예제는 어떤 포스팅에서 보고 테스트한 거 같은데 출처를 잃어버렸다. 우선 이벤트에 ..

개발일기/Javascript

[Javascript] URL페이지를 Location, Redirect, Reload 통해 살펴보자.

Javascript를 통해 URL 페이지를 관리할 때 loaction.load, location.href 등을 많이 사용했다. 사용할 때마다, 자연스럽게 손에 익어 타자를 치고 실행을 했지만 정확하게 살펴본 적이 없었다. 운 좋게 미디엄 포스팅에서 관련 내용이 있어서 한번 의역 위주로 번역해보았다. 원문은 아래 링크를 참고 https://betterprogramming.pub/redirect-refresh-and-access-the-url-of-the-current-page-in-javascript-3d9160e8317e Redirect, Refresh, and Access the URL of the Current Page in JavaScript JavaScript’s location object be..

개발일기/Vue.js

[Vue.js] Vue 애니메이션(Animate) #3 - GSAP 3

[Vue.js] Vue 애니메이션(Animate) #3 - GSAP 3 이번 포스팅은 Vue 애니메이션에 대해 알아보자. 애니메이션을 이용해 사용자 경험을 향상할 수 있다. 버튼 같은 곳에 마우스 호버 상태 일 때 클릭률을 높이거나 강조해야 되는 문구, 영역 등에 애니메이션을 적용해 집중력을 높일 수 있다. 목차 Transition Page Transition Transition Group Javascript Hooks + Velocity GSAP(이번 포스팅) 개요 이전 포스팅에서는 Velocity.js 라이브러리를 사용했다. 이번 포스팅에선 GSAP(Green Sock Animation Platform) 강력하고 인기 있는 애니메이션 라이브러리를 Vue 에 적용하고 사용하는 법을 알아보자. GSAP이..