전체 글(145)
-
혼자하는 <모던 자바스크립트 딥 다이브> 스터디 #03장 자바스크립트 개발 환경과 실행 방법
3.1 자바스크립트 실행 환경 모든 브라우저와 Node.js는 자바스크립트를 해석하고 실행할 수 있는 자바스크립트 엔진을 내장하고 있다. 기본적으로 브라우저에서 동작하는 코드는 Node.js 환경에서도 동일하게 동작한다. 단, 이 둘은 용도가 다르다. 브라우저는 HTML, CSS, JS를 실행해 웹페이지를 브라우저 화면에 렌더링하는 것이 주된 목적이지만 Node.js는 브라우저 외부에서 자바스크립트 실행 환경을 제공하는 것을 주된 목적으로 하고있다. (ECMAScript 이외에 추가로 제공하는 기능은 호환되지 않는다.) 3.2 웹 브라우저 구글 크롬은 ECMAScript 사양을 준수하며 시장 점유율도 가장 높다. Node.js에서도 크롬 브라우저의 V8 자바스크립트 엔진을 사용하고 있다. 브라우저의 개발..
2023.04.24 -
Nextjs Image태그 관련 에러 핸들링
nextjs의 Image 태그를 사용하며 겪은 에러 핸들링에 관한 기록을 남겨보려 한다 1. 정적 이미지 Image src로 사용할 경우 Unhandled Runtime Error Error: Failed to parse src '이미지 파일명' on `next/image`, if using relative image it must start with a leading slash "/" or be an absolute URL (http:// or https://) Image 태그에 src로 들어가는 파일명이 'image.png' 이런 형식이었는데, 정적 이미지를 사용할 땐 앞에 / 표시를 붙이거나 상대적인 url이 필요하다는 에러였다. 기존의 Image 태그에는 data?.image 였다면 이를 템플릿레..
2023.04.22 -
혼자하는 <모던 자바스크립트 딥 다이브> 스터디 #02장 자바스크립트란?
2.1 자바스크립트의 탄생 웹 브라우저 시장을 지배하고 있던 넷스케이프에서 웹페이지의 보조적인 기능을 수행하기 위해 브라우저에서 동작하는 경량 프로그래밍 언어를 도입하기로 결정했다. 그래서 탄생한 것이 브랜던 아이크가 개발한 자바스크립트다. 2.2 자바스크립트의 표준화 이에 마이크로소프트는 자바스크립트의 파생 버전인 JScript를 인터넷 익스플로러에 탑재했다 문제는 JScript와 자바스크립트가 표준화되지 못하고 적당히 호환되었다는 것이었다. 이로 인해 브라우저에 따라 웹페이지가 정상적으로 동작하지 않는 크로스 브라우징 이슈가 발생하기 시작했다. 이에 자바스크립트의 파편화를 방지하고 모든 브라우저에서 정상적으로 동작하는 표준화된 자바스크립트의 필요성이 대두되기 시작하였으며, 넷스케이프는 컴퓨터 시스템의..
2023.04.16 -
혼자하는 <모던 자바스크립트 딥 다이브> 스터디 #프롤로그
모던 자바스크립트 딥 다이브 개발 서적으로 여럿이서 스터디 하는 경우를 많이 봐왔다 같이 할 사람을 찾으면 찾을 수는 있겠지만, 혼자 한 챕터씩 읽어가며 블로그에 정리해가는 것도(꽤 오래 걸리겠지만) 괜찮을 것 같다는 생각이 들었다. 그리하여 모던 자바스크립트 딥 다이브로 혼자 하는 스터디를 진행해 보기로 했다 빠밤 자바스크립트는 자바스크립트 엔진 내부에서 암묵적으로 처리해 주는 기능도 많아, 과도하다고 느껴질 만큼 친절한 프로그래밍 언어이다. 이러한 특징은 편리한 경우도 있지만 내부 동작을 이해하기 어렵게 만들기도 한다. 프로그래머의 역할은 요구사항을 기반으로 문제를 해결하기 위한 방안을 고안하고, 이를 코드로 구현하는 것이다 이때 자신이 구현한 코드가 컴퓨터 내부에서 어떻게 동작할 것인지 예측 가능해..
2023.04.15 -
[css] padding 값만큼 scroll 더 이동시키기 (부모 컴포넌트까지 스크롤 이동을 원한다면)
모달 UI 작업하다 발견 한 획기적인 scroll css라 생각하여 정리를 해둬야겠다. 모달 컴포넌트 내부에는 모달 콘텐츠 컴포넌트가 존재한다. 모달 콘텐츠 컴포넌트 하위에 존재하는 버튼을 클릭하면 스크롤은 부모인 모달 컴포넌트의 최상단까지 올라가야 했다. 기존의 로직에서 버튼과 같은 클릭 요소에 이벤트를 주어 스크롤을 내가 원하는 곳에 위치 시키려면 버튼에는 스크롤 관련 이벤트를, 스크롤을 위치 시키고 싶은 곳에는 특정 Id를 주면 가능했다. // scroll 아이디가 존재하는 element로 스크롤 위치를 이동시켜준다 const handleClickScroll = () => { const element = document.getElementById('scroll') if (element) { elem..
2023.04.14 -
[github] 삭제된 브랜치에 branch PR 날리기
A 브랜치에서 작업 후 첫 PR을 날렸고 A 브랜치로 돌아와 재작업을 진행했다. 그러던 중 A 브랜치와 develop 브랜치 merge 후, 원격에선 A 브랜치가 삭제된 상황 원래 pr을 날리면, github 상단에 pr 날리는 배너가 생겨서 클릭만 하면 쉽게 pr을 날릴 수 있는데 이번엔 push를 하여도 배너가 자동으로 생기지 않았다. 삭제된 브랜치를 push 하여도 github에 pr 배너가 뜨지 않는다면 1. New pull request 버튼을 눌러준다 2. develop 브랜치로 pr을 날릴 브랜치를 직접 선택해준다 3. create pull request를 클릭하면 정상적으로 pr을 날릴 수 있다
2023.04.13