새벽 2시의 디버깅 새벽 2시의 디버깅

서론실무에서 주로 프론트엔드 개발자 관점에서 소셜 로그인을 구현을 했었다. 솔직히 말하면, 프론트엔드 개발자로 일할 때는 OAuth가 그렇게 복잡한 개념인지 몰랐다. redirect URI만 잘 설정하고, 백엔드 분들이 code를 달라고 하면 넘겨주면 그만이었으니까. 그런데 백엔드를 공부하면서 직접 소셜 로그인을 구현해보니, 얼마나 많은 고민과 보안 장치들이 숨겨져 있는지 알게 됐다. 오늘은 백엔드 관점에서 다시 마주한 OAuth와 그 구현 과정에 대해 이야기해보려고 한다. OAuth가 뭔데?OAuth는 'Open Authorization'의 약자로, 한 서비스가 다른 서비스의 사용자 정보에 접근할 수 있는 권한을 부여하는 개방형 표준 프로토콜이다. 복잡한 말은 뒤로하고, 쉽게 말해 '비밀번호를 직접..

서론지난 멋쟁이사자처럼 13기 전국연합해커톤에서 백엔드 개발자로 참여했습니다. 이번 해커톤에서는 파이브클라우드에서 제공하는 AWS EC2 서버를 활용하여, 단일 서버 안에서 Spring Boot 애플리케이션과 MySQL 데이터베이스 그리고 Nginx를 이용한 프론트엔드 를 배포하고 운영하는 경험을 쌓았습니다.이번 글에서는 제가 EC2 서버를 활용해 백엔드와 DB를 배포하고, 프론트엔드 정적 파일을 Nginx로 서비스한 과정을 상세히 설명하며, 이번 해커톤에서 사용되는 구조와 실제 서비스에서 주로 사용하는 구조를 비교하고자 합니다. 1. EC2 서버 환경 구성파이브클라우드에서 제공받은 EC2 인스턴스는 Ubuntu 기반이었고, SSH로 접속해 환경을 구성했습니다. (자바 등 필요한 소프트웨어 설치과정은 ..

문제 웹뷰 프로젝트를 진행할 때 로그인 후에 유저에 대한 정보를 서버에서 통신하여 데이터를 받아오고 있었다. 이때 많은 로직을 async/await로 처리하여 불필요한 지연이 발생하였고, 이를 해결하기 위해서 Promise.all 도입이 필수적이었다. Promise.all 이란? javaScript에서 비동기적으로 다수의 Promise를 동시에 처리하고 모든 Promise가 완료될 때까지 기다리는 메서드이다. Promise.all은 배열 Promise들을 인자로 받고, 해당 Promise의 결과를 배열로 반환한다. Promise all은 여러개의 비동기 작업을 병렬적으로 처리할 때 유용하게 사용된다. 즉, 모든 작업이 완료될 때까지 대기할 필요가 없고, 작업들 간의 순서가 서로 연관되지 않은 경우 유용하..

문제 지도 기반 탐방로 하이브이드앱 웹뷰 개발 과정 중 다음과 같은 문제들이 발생하였다. 1. 지도 초기 렌더링이 너무 느림 초기 렌더링 속도는 사용자가 체감이 될 정도의 느린 속도임 실제 렌더링 시간 1700ms (1.7초) 2. 지도 이동 시 버벅거리는 현상이 자주 발생함 (지도 렉) 개발자도구의 performance를 보면 장기 작업 이슈가 발생 지도에서 홀링 후 이동할 때 버벅거림이 존재한다. (랜더링 이슈) 문제 분석 1. 지도 초기 렌더링이 너무 느림 2. 지도 이동 시 버벅거리는 현상이 자주 발생함 (지도 렉) 위 두 문제가 발생하였는다. 1. 우선 첫 번째 문제는 구글 자체에서 제공하는 polyline 등의 용량이 크고 받아오기까지 시간이 오래 걸리게 된다. 따라서 런타임에서 성능 개선하는..

동기 하이브리드앱 프로젝트를 하던 중 네이버, 카카오, 티맵과 관련한 길찾기 기능이 필요하였고, URI scheme을 사용하여 편리하게 구현하였다. 관련 내용이 유용한 정보라 기록하고자 글을 적게 되었다. URI scheme이란? URI scheme은 특정 유형의 식별자를 구성하는데 사용되는 체계를 정의하는 개념이다. 앱에서 특정 유형의 식별자를 구분한다는 개념이 와닿지 않을 수 있다. 웹페이지에서 https://naver.com으로 브라우저에 입력하면 네이버 홈페이지 창으로 가게된다. 이와 같이 앱에서 유사한 기능을 하는것이 '딥링크'이다. 딥링크는 특정 주소를 입력하면 앱이 실행되거나 앱의 화면으로 이동하는데, 앱이 설치되어 있지 않다면 앱의 설치를 유도할 수 있다. 따라서 마케팅적인 측면에서 필수적..

동기 하이브리드 앱 프로젝트 과정에서 카메라에 접근하여 사진을 촬영해야 하는 기능이 있었다. 네이티브에서 구현하기엔 번거로워, 웹뷰에서 구현하고 싶었다. HTML태그 하나로 쉽게 구현이 되었고, 매우 간단한 방법이라 기록하려고 한다. 스마트폰 카메라에 접근 가능한 HTML 태그는 바로 " " 이다. 사용법 사용법은 input태그에 속성값을 "file"로 지정하면 된다. 카메라에 바로 접근하는 방법 카메라와 갤러리 등 선택하는 방법 위에서는 input태그의 타입을 file로 하고, accept, capture속성에 값을 정의했다. accept 속성 - 허용되는 파일 유형을 지정 따라서 ‘accept=”image/*”는 모든 종류의 이미지 파일을 허용 capture 속성 - 카메라 또는 기타 입력 장치를 사..

배경기본적인 비동기처리, 콜백함수, promise객체, async/await의 개념에 대해서는 알고 있었다.하지만 회사에서 일을 할때 비동기 처리에 관한 지식부족으로 인해 다음과 같은 문제가 발생하였다.비동기처리를 하지않아 undefined로 인한 에러가 발생,내가 작성한 코드 await을 사수님이 Promise.all로 리팩토링 하시는 과정에 대한 이해부족. 위 두가지는 내가 실무에서 비동기처리에 대한 지식부족으로 생겼던 대표적인 문제들이다.이제 자바스크립트의 비동기처리에 대한 내용을 정리하겠다.   동기(Synchronous)란?코드가 순차적으로 실행되는 것을 동기(Synchronous)라고 한다. 기본적으로 자바스크립트 언어 자체는 싱글 쓰레드 언어이므로, 한 번에 하나의 ..

SPA (Single Page Application) 단일 페이지 어플리케이션: 웹 어플리케이션에 필요한 모든 정적 리소스를 최초에 한 번 다운로드 하고, 이후 새로운 페이지 요청 시 페이지 업데이트에 필요한 데이터만을 전달받아 페이지를 업데이트 함 브라우저에서 최초 한 번 서버에 요청하여 페이지 전체 로드 후 특정 변경 일어나는 부분만 axios, ajax 등의 기술을 사용하여 데이터를 바인딩한다. (axios등을 이용하여 주로 서버(백엔드)에서 전달한 json데이터를 주고받는다.) 현재 사용하는 프론트엔드 UI라이브러리 (React), 프레임워크 (Vue)를 이용해 프로젝트를 진행하는 경우 대부분 SPA형식을 따른다. 모던 프론트엔드 기술(React, Vue, Angular)등의 등장으로 SPA방식이..