LazyWon Story

목차들어가며..💡 네이티브 → 웹뷰 호출인증 흐름 및 구현 방법정리    들어가며..웹뷰(Next.js)에서 네이티브 앱(iOS/Android)과 연동하여 인증(Face ID, PIN..)을 처리하는 과정 중 무지함 때문에 주말에 집도 못 가고 새벽까지 붙잡고 있었다.. ㅎㅎ 앱팀에서 정의한 onResult() 라는 함수를 Next.js (React) 코드 내에 정의해 두면 네이티브에서 인증 처리를 한 후 다시 웹뷰로 인증 결과를 onResult()를 통해 전달하는 방식이다.  처음에는 단순히 onResult 함수만 정의하면 네이티브 앱이 해당 함수를 직접 호출할 수 있다고 생각했는데.. 아니었다.    💡 네이티브 → 웹뷰 호출 웹뷰 내에서 실행되는 JavaScript와 네이티브 앱이 서로 다른 실..

목차 프록시 서버란? 프록시 서버를 사용하는 이유? 프록시 서버 종류 프록시 서버란? Proxy는 대리라는 사전적 의미를 갖고 있다. 클라이언트와 서버의 관점에서 중간에 대신 요청을 처리한다 하여 클라이언트와 서버의 중계자 역할을 갖는 것을 프록시 서버라고 한다. 프록시 서버를 사용하는 이유? 보안 클라이언트에서 서버의 IP 주소를 숨기는 것이 가능하기 때문에 프록시 서버를 통해 한 단계의 보안을 더 유지할 수 있다. 따라서 보안상의 이유로 외부와 직접 통신할 수 없는 경우에 프록시 서버를 이용한다. 캐시 사용을 통한 속도 향상 프록시 서버는 프록시 서버에 요청된 내용들을 캐시를 이용하여 저장한다. 따라서 캐시를 사용하여 리소스로의 접근을 빠르게 할 수 있다. 특히 웹 프록시는 웹 서버로부터 웹 페이지를..

들어가기에 앞서, Docker는 OS의 자원을 사용하기 때문에, 기본적으로 root 권한으로 실행해야 한다. 따라서 일반 계정으로 접속 시 sudo를 앞에 붙여주어야 한다. 하지만, 매번 sudo를 입력하기 귀찮고 빠뜨릴 때도 많다. sudo를 입력하지 않는 아래 두 가지 방법이 있다. 1. 처음부터 root 계정으로 로그인하거나 root 계정으로 전환한다. sudo su root 2. 현재 계정을 docker 그룹에 포함한다. sudo usermod -aG docker ${USER} sudo service docker restart 이미지 관련 명령어 Docker Hub에서 이미지 검색 sudo docker search Docker Hub에서 이미지 받기 sudo docker pull : 형식이며, l..

목차 Docker의 탄생 배경 🔎 🐳 Docker란? 간략한 개념은 알고 있었으나, 아직까지 실무에서 내가 직접 다루지 않고 있던 Docker를 이제는 회피할 수 없게 되어 미루고 미루던 도커 공부를 드디어 해보려고 한다. 개발자로서 도커를 잘 다룰 줄 알면 분명 어디엔가 도움이 될 거라 생각한다. 먼저 이번 글에서는 도커의 탄생 배경과 도커의 핵심 개념들에 대해 간단히 알아보고자 한다. Docker의 탄생 배경 🔎 일단 나의 경험상 .. 입사 초기에 회사에서 서비스 사용자수가 늘어나면서 서버를 증설하게 되었다. 그에 따라 새로운 서버에 OS와 컴파일러, 서버 세팅에 필요한 프로그램들을 설치하면서 이전에 운영 중인 서버의 환경과 완전히 동일하게 구성하는 과정에서 각종 오류를 마주하였고, 해결하는데 굉장히..

인터넷 환경에서는 바로 pip install 명령어를 통해 쉽게 설치가 가능하지만, 현재 다니는 회사에서 폐쇄망을 통해 개발하고 있기 때문에 특정 기간 방화벽을 오픈 요청을 하지 않는 이상 오프라인 환경에서 필요한 환경을 구축해야 한다. 온라인 환경 설치 먼저, 인터넷이 되는 온라인 환경에서 설치하고자 하는 파이썬 패키지를 다운로드한다. (pycrypto 패키지를 예시로 들었다. ) PYPI에서 직접 파일을 다운받거나, pip download 명령어를 통해 필요한 파일을 다운로드한다. 만약 여러 패키지를 한번에 설치해야 하는 경우(초기 프로젝트 세팅해야 하는 경우) requirements.txt로 다운로드할 파일 목록을 추출 후 한 번에 다운로드할 수 있다. 다운로드할 파일 목록을 직접 작성할 수도 있지..

블로그 포스트 페이지 내에 Scroll Indicator를 개발하던 중 마주친 Warning과 해결 과정에 대해 남겨두려고 한다. 일단 문제의 그 빨간 글씨의 Warning은 아래와 같다. Unmounted 된 컴포넌트에 대해 상태를 업데이트할 수 없다 ! 해당 작업은 수행되지 않지만, 메모리 누수를 발생시킨다. 고치려면 useEffect의 cleanup function을 이용하라. React에서 window나 document에 addEventListener를 통해 이벤트를 추가할 때, 그냥 사용하게 되면 렌더링 시점이 구분되지 않아 에러가 난다. 따라서 useEffect를 통해 최초 로드 시 이벤트를 추가해 주어야 한다. useEffect(() => { window.addEventListener("sc..

목차 HTTP란? HTTP 변천사 알아보기 😎 HTTP 버전 별 통신 과정 HTTP란? HTTP(HyperText Transfer Protocol Version)는 TCP 연결 기반 위에서 동작하는 프로토콜이다. 다시 말해, 웹에서 클라이언트(브라우저)가 웹 서버(httpd, nginx, apache..)와 통신하기 위한 프로토콜 중 하나이다. HTTP 요청이 발생하면 브라우저는 HTTP 요청 메시지를 생성하고, TCP/IP 프로토콜을 이용하여 웹 서버에 요청을 전달한다. 이후 브라우저는 웹 서버로부터 HTTP 응답을 전달 받는다. HTTP 변천사 알아보기 😎 HTTP/0.9 One-Line Protocol로 불리는 HTTP/0.9는 통신에 필요한 최소한의 기능만 갖추어, 실제 데이터의 전송만을 위해 사..

Next.js를 이용하여 정적 블로그 개발 중 포스팅한 블로그 글 페이지 콘솔에 다음과 같은 warning이 발생하였다. 💡 dangerouslySetInnerHTML란? 현재 블로그 포스팅을 위해 포스팅할 마크다운 파일을 가져와서 `remark-html`로 파싱하여 HTML string 형태로 변환해주고 있다. dangerouslySetInnerHTML은 브라우저 DOM에서 innerHTML을 사용하기 위한 React의 대체 방법이다. 일반적으로 코드에서 HTML을 설정하는 것은 XSS 공격에 쉽게 노출될 수 있어 위험(html 내부 script로 인해 유저의 쿠키 등 개인 정보를 탈취할 수 있기 때문)하다. 따라서 React에서 직접 HTML을 설정할 수는 있지만, 위험하다는 것을 상기시키기 위해 d..

목차 이미지 최적화의 중요성 이미지 종류와 포맷에 대해서 이미지 최적화 방법 알아보기 ⭐ 이미지 최적화의 중요성 회사에서 개발한 이벤트 페이지에 일부 이미지가 로드되지 않는다는 CS건이 들어왔다. 네트워크 통신 장애로 인해 느린 리소스 다운로드 현상이었던 것을 확인하였다. 종종 웹사이트 접속 시 이미지가 느리게 로드되는 것을 확인할 수 있다. 인터넷이 느린 환경이더라도 사용자에게 최대한 빨리 많은 자원이 로드될 수 있도록 해야 한다. (사이트 방문자 40%가 3초 안에 웹페이지가 로딩되지 않으면 떠난다고 한다. ) 그중에서도 웹 페이지(특히 이미지가 중점인 이벤트성의 웹뷰)에서 대부분의 용량을 차지하는 이미지 최적화를 통해 이미지 용량을 줄이고자 한다. 이미지 사이즈를 적절히 줄이고, 렌더링 속도를 빠르..

NextJS로 정적 블로그를 만들어 보고 있다. vercel을 이용하여 배포하던 중, git remote repository에 push를 했는데도 배포한 사이트에 반영이 되어있지 않는 것이다 !! 😱 전 날까지만 해도 잘 배포 되던 것이 어느 순간부터 Build Error가 나고 있었다 .. 로컬 환경에서는 잘만 작동해서 문제없을거라 생각하고 따로 빌드해보지 않았는데 .. Error가 났던 깃 커밋로그를 추적하며 어디서부터 뭐가 잘못된 것인지 살펴보기로 했다.. 로컬에서 빌드 해보았을 때, 아래와 같은 에러가 나왔다. $ npm run build > build > next build info - Linting and checking validity of types info - Creating an opt..