분류 전체보기

바닐라 자바스크립트를 이용해 이벤트 등록할 때 실수하기 쉬운 부분들

이벤트 리스너에서 실수하기 쉬운 부분 개발자가 만든 DOM 요소가 브라우저의 이벤트에 반응하게 만들기 위해서 이벤트 리스너를 등록한다. 이벤트 리스너는 웹사이트 이용자가 DOM 과 상호작용 가능하게 만들기 위해 필수적인 부분이다. 이벤트 리스너를 등록하는데는 잘 살펴보면 2가지 방법이 있다. EventTarget.addEventListener() 를 이용하는 방법 HTML DOM 의 onclick 프로퍼티 를 이용하는 방법 두 방식은 약간 다르다. EvnetTarget.addEventListener() 를 이용하는 방법 장점 하나의 이벤트에도 여러 개의 콜백 함수 등록이 가능하다. ex) onclick 시에 연쇄적으로 여러 개의 함수가 호출되게 만들 수 있다. 단점 여러개의 이벤트 등록이 가능한만큼 이벤..

HTML Element 에 바인딩된 이벤트 가져오기

개요 개발하다보면 간혹 해당 버튼에 어떤 이벤트가 들어있는지 알고 싶을 때가 있다. 하지만 아쉽게도 브라우저에서 제공하는 Native API 로는 알 수 있는 방법이 없다. 그러나, JQuery 를 통해 혹은 Chrome Dev tools 를 통해 알 수 있다. Jquery 를 이용한 방법 Jquery 는 내부적으로 엘리먼트에 대한 이벤트 정보를 저장하고 있어 이렇게 이벤트를 확인하는 것이 가능하다. $._data($("#엘리먼트_아이디")[0], "events"); 위와 같은 코드를 실행하여 해당 엘리먼트에 걸린 이벤트를 볼 수 있다. [0] 을 해주는 이유는 Jquery Object 에서 Standard Html Element 로 타입을 변환하기 위해서이다. 참고로 위의 결과로 나오는 내용은 Jque..

코드의 매직 넘버 (Magic Number) 란 무엇일까?

매직 넘버란? 개발서적 등을 읽다보면 '매직 넘버(Magic Number)' 라는 말이 나온다. 이 말의 뜻은 무엇일까? 간단히 설명하자면, '의미 있는 이름의 상수로 대체될 수 있는 숫자' 를 말한다. 이를테면, 은행에서 이자를 구하는 프로그램 코드 중간에 2.7182818 이라는 숫자가 등장했을 때, 수학을 좀 아는 사람은 이를 자연 상수(Euler's number) 로 생각할 것이다. 그런데 사실 작성자의 의도는 그냥 은행 정책에 따른 이율을 구하기 위해 필요한 숫자를 그냥 넣은 것이었다면? 이 경우 왜인지 추측하기 굉장히 헷갈리고 결국 이 코드를 작성했던 사람에게 가서 물어보는게 가장 정확하다. 이미 퇴사했다면 아마 진정한 의미는 영영 알 수 없을지도 모른다. ..

자바스크립트 fetch API 알아보기 (feat. ajax)

개요 네트워크에서 HTTP 통신을 이용하여 리소스를 가져오는(fetch) 역할을 한다. Fetch API 이전에는 XMLHttpRequest 와 Ajax 가 있었다. 다만, XMLHttpRequest 는 스펙 자체가 사용하기 조금 불편하다는 단점이 있었고, Ajax 는 JQuery 의존성이 걸려있다는 단점이 있었다. 이러한 문제들을 해결한 유연하고 강력한 API 가 fetch API 이다. 특징 요청으로 Request 인터페이스를 이용하고 반환 값으로 Response 오브젝트를 이용하는데, 응답은 비동기이기에 이를 resolve() 하여 Promise 형태로 반환한다. Promise 에 대한 설명 fetch() 의 결과로 반환되는 Promise 객체는 오직 네트워크 에러가 발생했을 때만 reject 를 ..

자바스크립트 Promise 알아보기

개요 Promise 객체는 비동기 작업을 코드로 깔끔하게 표현하기 위해 사용되는 포장지같은 것이다. 아직 결정되지 않은 값에 대한 유연한 처리를 제공하여 비동기 코드가 잘 녹아들 수 있게 해준다. The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value. 상세 Promise 는 Promise 가 생기는 시점에는 불가피하게 알 수 없는 값(not necessarily known)에 대한 프록시이다. 이를 통해 비동기 작업의 최종 성공으로 도출되는 값이나 실패에 대한 이유 처리를 담당하는 핸들러를 구성할 수 있다. 이를 이용해 비동기 메서드를 동기 메서..

자바스크립트 XMLHttpRequest 알아보기

개요 XMLHttpRequest 객체는 브라우저에서 서버와 통신하기 위해 사용된다. 페이지의 전체 새로고침 없이 새로운 데이터를 가져올 수 있어서 유용하다. 사용자가 현재 하는 일을 방해하지 않고 웹페이지를 일부 업데이트하는 것을 가능하게 한다. JQuery 사용자가 많이 쓰는 AJAX 는 XMLHttpRequest 를 사용하기 편하게 만들어놓은 것일 뿐이다. 이름과 달리 XMLHttpRequest 는 XML 데이터 이외에도 다양한 데이터를 주고 받는 것이 가능하다. 서버로부터 이벤트 데이터 혹은 메시징 데이터를 받는 것이 통신에 포함되어 있다면, EventSource 인터페이스를 통한 server-sent event 를 사용하는 것을 고려하자. 완전한 양방향 통신의 경우는 WebSockets 가 보통은..

next.js 의 Dynamic Routes (동적 라우트)

개요 미리 정의된 URL 주소로만 라우팅하는 것이 아니라 사용자가 접근한 경로 혹은 상황에 따라 동적인 라우팅을 제공하고 싶을 때 사용할 수 있는 방식이다. 이를테면, /my-profile/ 뒤에 이름을 주어서 회원들의 프로필을 표현하고 싶다면? /my-profile/ray-kim 페이지에서는 ray-kim 의 프로필을 제공하고, /my-profile/jake-seo 페이지에서는 jake-seo 의 프로필을 제공하고 싶을 때 사용할 수 있다. Next.js 에서는 [param] 과 같이 페이지에 존재하는 컴포넌트 파일명에 괄호를 씌우는 것으로 가능하다. 이를테면 pages/my-profile/[name].js 와 같이 경로를 구성하면 위에서 예로 들었던 /my-profile/jake-seo 와 같은 UR..

Next.js getServerSideProps 서버사이드 렌더링 알아보기

Next.js 의 getServerSideProps 란? Next.js 의 Pre-render 에서 알아보았듯 Next.js 는 Create React App 으로 만든 리액트 프로젝트와 다르게 JS 파일을 이용해 어느정도 기본 HTML 파일을 만든 뒤 해당 파일에서 자바스크립트가 동작할 수 있도록 하는 Hydration 이라는 과정을 거쳐서 렌더링을 한다. Next.js 에서 getServerSideProps() 라 불리는 함수를 함수를 export 하면, API 에서 가져오는 데이터까지 Next.js 의 Pre-render 내용에 포함시킬 수 있다. 혹은 클라이언트에서 민감한 정보를 공개하고 싶지 않을 때 getServerSideProps 를 이용해 서버에서 처리하고 클라이언트에서는 어떤 일이 일어났..

next.js 내부 next.config.js 파일에서 할 수 있는 일들

next.config.js 파일에서 설정 가능한 것들 next.config.js 는 next.js 프로젝트를 생성하면 자동으로 생성되는 설정파일이다. 이 파일에 내용을 더하는 것으로 다양한 next.js 기능을 이용할 수 있다. Redirect Redirect 기능은 A 라는 페이지에 방문하면 자동으로 B 라는 페이지로 이동시켜주는 기능을 말한다. module.exports = { async redirects() { return [ { source: '/about', destination: '/', permanent: true, }, ] }, } next.config.js 에 async redirects() 메서드를 작성하면 redirect 기능을 이용할 수 있다. sourc..

Next.js 에서 Hydration 이란 무엇인가?

Next.js 에서 자주 등장하는 Hydration 이란 무엇일까? Next.js 를 공부하다보면 Hydration 이라는 말을 많이 볼 수 있다. Hydration 이라는 말이 많이 나오는 이유는 Next.js 가 기본적으로 서버사이드 렌더링을 지원해서이다. Hydration 이란, 정적 호스팅 혹은 서버사이드 렌더링을 통해 받은 HTML 웹 페이지를 동적인 웹페이지 로 만드는 과정을 말한다. 보통은 이벤트 핸들러 같은 것들을 붙여서 동적인 웹페이지를 만들곤 한다. Next.js 는 Hydration 과정에서 리액트가 작동하는데 필요한 데이터를 모두 넘겨준다. 그래서 서버사이드 렌더링 이후에 우리의 앱을 부드럽게 리액트로 연결시켜 SPA 처럼 동작하게 만들어준다.

6월 3주차 기술 회고

자바스크립트 typeof 의 남용 나는 typeof 를 보통 undefined 를 확인하기 위해서 사용하는 버릇이 있다. 그런데, 다음과 같은 경우에는 typeof 보다 더 좋은 방법이 존재했다. Object 에 해당 프로퍼티가 존재하는지 확인할 때 함수의 Optional 한 파라미터가 들어왔는지 확인할 때 Object 에 해당 프로퍼티가 존재하는지 확인할 때 const obj = { a: 10, }; object.hasOwnProperty("a"); // true object.hasOwnProperty("b"); // false 함수의 Optional 한 파라미터가 들어왔는지 확인할 때 function foo(bar) { if (typeof bar === "undefined") { console.log..

6월 3주차 주간 회고

회고에 대해서 게임에서 계속 똑같은 전략에 당하면, '넌 왜 이렇게 학습능력이 없냐' 라는 소리를 듣는다. 회사에서도 계속 같은 실수를 하면 마찬가지일 것이다. 회고를 작성하는 것은 같은 실수를 반복하지 않도록 도와준다. 물론 회고를 작성하고 내 실수에 대해 인지했다고 해서 또 다시 같은 실수를 하지 않으리란 보장은 없지만 그래도 한번 더 생각해볼 수 있고 다짐을 통해 바뀔 기회를 얻을 수 있다고 생각한다. 다시 한번 생각해보는 일은 내 단기 기억이 장기 기억으로 넘어가는 일을 도와줄 것이다. 운영 환경에서의 코드 운영환경에서의 코드는 지속적으로 관리되어야 할 관리대상이며, 살아있는 유기체처럼 계속 변화한다. 이러한 특성을 고려하여 어떻게 해야 가장 효과적으로 작성할 수 있을지 한줄한줄 고..