-
브라우저에서 비동기요청을 수행할 때 도움이 될 수도 있는 글 (api wrapping)
API 서버와의 통신 웹 개발 환경이 여러모로 다양해지면서 REST API 서버를 별도로 두고 클라이언트(브라우저)에서 특정 endpoint를 호출해 CRUD를 수행하는 모델이 속속 등장하고 있습니다. 이러한 개발을 진행하다 보면 자연스레 소위 AJAX(Asynchronous JavaScript and XML) 라고 불리우는 기법을 클라이언트단에서 활용하게 됩니다. AJAX 를 이용하기 위해서는 여러가지 방법이 있을 수 있는데, 먼저 js 네이티브단에서 지원하는 XMLHttpRequest (XHR이라고도 불리는)객체를 활용한 방법이 있겠습니다. XMLHttpRequest const xhr = new XMLHttpRequest(); xhr.onreadystatechange = () => { // 콜백은 간략화 if (xhr.status ===...
-
객체의 복사에 대하여 (Shallow copy / Deep copy)
java는 Pass by value 일까? reference 일까? 자바를 처음 배울 즈음, 메소드 인자(parameter)로 사용되는 객체는 value가 아닌 reference를 전달한다는 교과서 구문을 읽고 이게뭐야 하고 가볍게 흘려넘긴 기억이 있다. 말도 안되는 코드지만 다음 코드의 결과를 예측할 수 있었을까?? Person p = new Person("noname"); setAgentName(p); System.out.println(p.getName()); // 1 p = setAgentName(p); System.out.println(p.getName()); // 2 private Person setAgentName(Person p) { p.setName("firepizza"); return p; } 물론 모두 예상했겠지만 1,2 모두 ‘firepizza’가 출력된다. 그럼 이건 어떨까? Person p = new...
-
[JS] 행복한 신기능
ES2020, ES2021 모던 스크립트 기법을 나누는 분기점이 되었던 ES6(ES2015)가 발표된지 어느덧 6년째가 되었습니다. 작년말에는 ES12(ES2021)가 발표되었고, 그간 업데이트 된 추가 기능 중 흥미로운 기능들이 있어 몇가지 소개하고자 합니다. Optional Chaining (?.) 예전에 웹뷰 기반의 앱 서비스를 하던 때 처음으로 iOS 개발자분과 협업을 할 수 있는 기회가 있었고, bridge통신이 중요했기에 서로 코드를 공유하며 일했던 적이 있었습니다. 그때 처음으로 swift 라는 언어를 접할 수 있었고, 당시 자바개발에만 푹 빠져있던 저에게 충격적으로 다가왔던 문법이 있었는데요, 그건 바로 nil...
-
NPM 번외편 - npm에 내 라이브러리 등록하기
나만의 라이브러리를 만들어 보자. 오픈소스… 라이브러리… 말은 많이 들어 봤지만.. 그런건 정말 대단한 슈퍼개발자들이나 하는 거 아닌가? 라는 생각을 어렴풋이 가지고 있었던 것 같다. (물론 지금도 어느 정도는 벽을 느끼고 있지만.) 그런데 아래와 같은 경험을 하며 그 진입장벽중 꽤나 큰 부분이 허물어졌던(?) 기억이 있어, 이 글을 읽은 분들이라면 한번쯤은 도전해 보셨으면 하는 마음에 주제를 선정해 보았다. 개발을 하다 보니 유틸리티성을 띄는 js모듈을 별도로 만들어 작업하는 경우가 있었다. 그런데 이런 유틸성 모듈들은 또 다른 프로젝트에서도 사용하고...
-
Webpack 입문하기-2/4 (NPM과 친해지기)
Webpack 입문하기 4부작 [1] node와 npm [2] NPM과 친해지기 (현재 글) [3] Webpack [4] Webpack과 친해지기 이번 글의 목차 0. 단어 뒤집기 프로그램 1. 랜덤뉴스 사이트 지난 글에 이어 이번에는 NPM을 실제로 활용하는 간단한 예제들을 실습해 보겠습니다. 0. 단어 뒤집기 프로그램 NPM으로 패키지를 관리하는 node.js 프로그램을 하나 만들어 보겠습니다. 단순히 문자열을 입력받아 해당 문자열을 반대로 뒤집어 출력해 주는 프로그램 입니다. 먼저 적당한 디렉토리에서 npm init 명령어를 통해 NPM 으로 관리되도록 프로젝트 세팅을 해 줍니다. 패키지를...
-
Webpack 입문하기-1/4 (Node와 NPM)
Webpack 입문하기 4부작 [1] node와 npm (현재 글) [2] npm과 친해지기 [3] Webpack [4] Webpack과 친해지기 이번 글의 목차 0. npm start? 그래서 그게 뭔데요? 1. Node.js 설치 2. Node.js란 무엇인가 3. NPM 4. npm이 왜 필요할까? 0. npm start? 그래서 그게 뭔데요? 제가 다닌 첫 회사에서 운영중인 서비스는 Spring boot로 구성된 MPA 사이트였고, 프론트에서는 js파일만 따로 모아 webpack번들링을 통해 배포하고 있었습니다. webpack은 커녕 npm도 몰랐고, 프로그래밍이라곤 java, spring과 jsp를 사용해 본 게 전부였던 제가...
-
babel 이란 무엇인가?
들어가며 최근에 react 프로젝트와 typescript 프로젝트를 거치면서 webpack 을 자주 써보고 세팅해보게 되었습니다. 처음에는 동작의 원리보다 요즘 잘나가는 프론트엔드 개발 환경 만들기라는 목표로 세팅 하였으나 점점 처음부터 차근 차근 만지면서, 내가 이걸 몰랐구나 이게 이런 뜻이었구나 새삼 느끼게 되었습니다. webpack 에 대한 설명은 이미 많이 있으니 이번에는 babel 에 대해서 글을 적어보도록 하겠습니다. babel 이란? 먼저 공식 사이트 소개를 가져오자면 아래와 같습니다. Babel is a JavaScript compiler. 그렇습니다. 바로 자바스크립트 컴파일러 입니다. 왜 인터프리터 언어에...
-
자바스크립트 콜백지옥 탈출기 - 3.async/await
async/await 지금까지 콜백지옥을 탈출하기 위해 Promise를 사용하여 적극적으로 해결해 보았습니다. 지난시간에는 제가 마주했던 트위치 API를 사용한 팔로우/언팔로우 기능을 Promise를 이용해 구현했는데요 마지막에 우리는 한가지 의문을 갖게 되었습니다. 바로 아래와 같은 코드로 마치 동기처리를 하듯이 비동기처리를 순차처리할 수 없을까? 하는 것입니다. const userId = getUserId(); const isFollowing = getIsFolowing(userId); toggleFollow(isFollowing); const msg = isFollowing ? "언팔로우 성공" : "팔로우 성공"; console.log(msg); 그러나 아시다시피 getUserId 라는 함수는 내부적으로 트위치 API서버와 비동기 통신을 하고 있고, getIsFollowing과 toggleFollow 역시...
-
자바스크립트 콜백지옥 탈출기 - 2.Promise의 활용
Promise 지난 시간에는 콜백지옥 이라는 문제에 좌절했다가, Promise를 리턴하는 함수의 체이닝을 통해 문제를 해결해 보았었습니다. 그렇다면 이번에는 조금 더 적극적으로 Promise를 활용하는 방법에 대해 알아보겠습니다. 현실의 문제 최근에 트위치 API를 활용해 특정 스트리머를 팔로우/언팔로우 하는 기능을 개발했을 때 만났던 문제인데요, 어떻게 해결할 수 있을지와, Promise를 통해 해결한 방법을 소개해 볼까 합니다. 요구사항은 아래와 같았습니다. ABC 라는 채널을 팔로우중인지 여부에 따라 팔로우/언팔로우 요청을 보내야 함 팔로우여부를 먼저 알아내고.. 해당 여부에 따라 각기 다른 API호출을 해야 함....
-
자바스크립트 콜백지옥 탈출기 - 1.영원한 사랑
Callback hell 비동기 호출이 자주 일어나는 프로그램을 짜다 보면 반드시 한번쯤은 마주할 수 밖에 없는 문제가 있습니다. 그것은 소위 콜백헬 이라고 불리는 것인데요. 콜백장풍을 받아라 저의 경우는 주로 다음과 같은 요구사항을 해결하려다 보면 어느순간 콜백헬이 만들어져 있었던 것 같습니다. 하나의 비동기 요청이 완료된 뒤, 완료로 인해 얻어진 값을 사용해 다음 비동기요청이 이루어짐. 여러 번의 비동기 호출이 이루어지는데 각 처리는 비동기로 이루어지나, 각 비동기호출간의 실행순서는 동기적이었으면 함. 여러분은 어떤 경우에 이 친구를 만나보셨나요? 어찌되었던, 비동기 프로그래밍을...
-
axios와 vue를 이용한 분할 업로드
들어가며 파일 업로드 구현이야 많이들 해보셨겠지만 용량이 커진다면? 생각보다 신경쓸게 많아집니다. 분할 업로드를 구현했을 때 얻을 수 있는 이점들은 생각보다 꽤 많습니다. 가령… 낮은 서버 대기 시간 느린 클라이언트에게도 축복을 또한 멋진 업로드 매니저도 구현이 가능하구요 오늘은 axios 라이브러리를 활용하여 resumablejs 라이브러리 메뉴얼을 참고하여 분할 업로드 기능을 구현해보도록 하겠습니다. 원리 원리는 정말 간단합니다. 파일을 그냥 짤라서 서버에 던지고, 서버에서는 파일을 합치면 됩니다. 물론 말은 쉽겠지만 코드로 이야기 하겠습니다. 백엔드 먼저 이 글의 중점은 프론트엔드이므로, 기존...
-
ESnext, 내일의 자바스크립트
시작하며 이 이야기는 “ECMAscript 무엇이며, 표준은 어떻게 만들어지는가?” 라는 궁금증으로 부터 시작한다. 우선 위키에 정의된 ECMAscript란 이렇다. ECMA스크립트(ECMAScript, 또는 ES[1])는 Ecma 인터내셔널의 ECMA-262 기술 규격에 정의된 표준화된 스크립트 프로그래밍 언어이다. 자바스크립트를 표준화하기 위해 만들어졌고 지금도 자바스크립트가 제일 잘 알려져 있지만, 액션스크립트와 J스크립트 등 다른 구현체도 포함하고 있다. Ecma 인터내셔널의 여러 기술 위원회(Technial Committee, 이하 TC) 중 TC39 라는 위원회가 이 명세를 관리한다. JavaScript 표준을 제정하는 기술 그룹인 TC39 현재는 9th Edition - ECMAScript 2018 까지...