분류 전체보기41 Frontend를 위한, Socket과 WebSocket 들어가기 Web Socket.. 많이 들어봤지만, 들을 때마다 친구들의 곡소리가 끊이지 않던 친구였다. 그래서인지 괜히 '웹소켓'이라는 말을 들으면 지레 겁부터 먹었었다. 한 번 공부해보고 싶은 주제였지만, 지금껏 딱히 사용할 기회가 없었기도 해서(변명변명).. 웹소켓은 점점 더 멀어져갔다. 그런데! 이번에 레벨3 팀 프로젝트 중, 피터가 제안한 '태그 기반의 게임 팀 매칭 서비스'에서 채팅을 메인으로 다룬다고 했다. 서비스 자체도 재미있을 것 같았고, 웹소켓에 대한 알 수 없는 도전정신이 나를 지배해 이 팀에 지원하게 되었다. 지원한 결과, 감사하게도 뽑기 신께서 도움을 주셔서 Babble 팀에 합류할 수 있게 되었다. 후헹헹ㅎㅎ 이제 Babble 프론트엔드 팀이 채팅을 구현하면서 WebSocket에 .. 2021. 8. 26. NGINX 다중 서버 upstream 설정 summary 기존 Web-server (Reverse-proxy) 역할로 사용자와 WAS(Web Application Server)간 통신을 이어주던 NGINX에서 소나큐브 서버도 통신을 지원하도록 설정하고 싶었다. 그림으로 표현하자면 아래와 같다. nginx.conf 설정 # nginx.conf events {} http { # -------------------- spring-boot WAS -------------------- upstream app { server 192.168.1.20:8080; } # Redirect all traffic to HTTPS server { listen 80; server_name api.babble.gg; return 308 https://$host$reques.. 2021. 8. 25. 프론트엔드 배포 일지 언젠가는 배포에 관해 공부를 해야겠다고 생각을 했다. 하지만 자바스크립트 공부만 하기에도 너무 바빴기 때문에 미루고 미뤘었다. 만약 우테코가 아니었더라면 취업하기 전에 배포를 직접 만져볼 일이 있었을까 싶기도 하고. 맨 땅에 했더라면 굉장히 막막했을텐데, 같은 팀의 백엔드 크루인 '현구막'이 도와줘서 수월하게 마칠 수 있었다. 이전 포스팅에서도 말했듯이, 디스코드로 화면공유하면서 거의 아바타 소개팅처럼 배포를 진행했던 기억. 기존에는 배포할 일이 있어도 조그마한 토이프로젝트 정도였기 때문에 그냥 Netlify에다가 올려놓기만 했었다. 그래서 이번에도 처음에는 빠른 배포를 위해 Netlify를 사용했는데, 프로젝트의 사이즈가 점점 커지기도 하고 캐싱, 최적화 세팅 등등 설정할 세부사항들이 많아져서 마냥 N.. 2021. 8. 24. @NotNull vs @Column(nullable = false) 앞서 읽으면 좋은 글 - @NotNull 어노테이션 예외처리 핸들링 summary lombok에서 지원하는 @NonNull 어노테이션을 통해 엔티티의 필드를 검증하던 중, javax.validation.constraints의 @NotNull 어노테이션도 엔티티에 붙여 사용할 수 있음을 알게 되었다. @NotNull과 @Column(nullable = false)의 차이 엔티티 필드의 null을 검증하기 위해서 대표적으로 사용되는 어노테이션이 @Column(nullable = false)이다. @NotNull과 어떤 차이가 있을까? 어떤걸 사용해야할까? 우선 @Column(nullable = false)을 사용할 때와 마찬가지로 @NotNull 역시 테이블 생성시 NOT NULL DDL이 입력된다. 이는 .. 2021. 8. 24. @NotNull 어노테이션 예외처리 핸들링 summary lombok에서 지원하는 @NonNull 어노테이션을 통해 엔티티의 필드를 검증하던 중, @NonNull 어노테이션이 필드에 Null 값이 주입될 경우 NullPointerException이 던져지는 것을 발견했다. 프로젝트의 ControllerAdivce 구조상 RuntimeException을 한꺼번에 처리하고 있었기 때문에, RumtimeException을 상속한 NullPointerException 대신 custom exception이나 별도의 exception이 던져지길 원했다. (꼭 @NonNull이 아니어도 충분히 다른 이유에서 NullPointerException이 던져질 수도 있었다.) @RestControllerAdvice public class BabbleAdvice { .. 2021. 8. 24. React에서의 querySelector, 잘 쓰고 있는 걸까?(feat. Ref) 들어가기 Vanilla JS를 사용하면서, DOM을 조작하기 위해 정말 많은 DOM Selector들을 쓰곤 했다(querySelector, getElementById, getElementByClassName 등). 하지만 React를 사용하게 되면서 querySelector를 쓰는 일은 거의 사라졌다. React에서 제공하는 Virtual DOM을 사용하게되면서 굳이 Real DOM에 직접 접근할 상황이 필요하지 않았기 때문이다. 하지만 이런 상황이 아예 오지 않는 것은 아니다. 리액트를 사용하는 프로젝트에서도 Real DOM을 직접 선택해야하는 상황이 종종 발생하곤 한다. input에 focus를 주거나, 특정 DOM의 크기, 스크롤 위치 등을 설정해야 할 때 등이 있다. React에서는 Real D.. 2021. 8. 24. 프론트 배포를 위한 잡다한 사전 지식 얼마 전까지만 해도 프론트 배포라고 하면 Netlify밖에 떠오르지 않았다. (놀랍게도 실화) 하지만 프로젝트를 진행하면서 S3 + Cloudfront로 배포를 진행해야하는 상황이 발생했다. 백엔드 크루의 도움을 받아 배포를 진행하면서도 웹 관련 기본 지식이 부족했기 때문에 무슨 아바타 소개팅마냥 하라는 대로 하면서 필기만 하는 수밖에 없었다. 사실 Netlify를 통한 배포는 별도의 공부를 하지 않고도 정말 편하게 배포할 수 있다는 장점이 있지만 그 말은 곧, 인프라와 관련해서 배울 수 있는게 전혀 없다는 말이기도 했다. (근데 나중에 알고보니 Netlify도 S3보단 제한적이지만, 설정할 수 있는 옵션들이 굉장히 다양하더라.) 최근 들어 프론트엔드가 백엔드와 완전히 분리되기 시작하면서, 더 이상 배포.. 2021. 8. 23. 브라우저 렌더링 과정을 알아보자! 들어가기 Babble 페이지를 제작하면서, 프론트엔드 팀은 페이지 곳곳에 여러가지 애니메이션을 넣어 유저에게 재미를 주고자 했다. 우리 사이트에서 제공하는 페이지나 기능이 여타의 사이트들에 비해 많은 편이 아니었기에, 제공하는 디테일에 신경쓰고 싶었다. 어떻게 보면 정신없어 보이기도 하지만, 유저가 페이지를 단순히 이용한다기보다는 페이지와 티키타카 한다는 느낌을 받을 수 있으면 좋겠다는 생각이었다. 트위치와 같은 게임 관련 사이트들에서도 둘러보다보면 유저에게 재미를 주는 애니메이션을 곳곳에서 발견할 수 있었다. 그렇게 여러 사이트들을 둘러보다보니, 궁금한 점이 생겼다. 트위치만 해도 영상을 메인으로 하는 사이트이기 때문에 일단 사이트의 로딩에 대한 최적화가 필요할텐데, 어떻게 애니메이션과 자동재생 영상들.. 2021. 8. 23. Github-actions 작업간 독립성 summary 스프링부트 서버 빌드와 소나큐브 서버 빌드를 하나의 workflow.yml 파일로 관리하던 중, 소나큐브 서버 빌드시 동작하는 jacoco가 스프링부트 서버 빌드에서 진행되는 테스트코드 결과물(부산물)을 필요로 한다는 걸 깨닫고 스프링부트 서버 빌드가 소나큐브 서버 빌드보다 먼저 실행되도록 needs 키워드를 통해 의존성을 부여했다. ...(생략) jobs: deploy-build: runs-on: deploy steps: - uses: actions/checkout@v2 - name: Set up JDK 8 uses: actions/setup-java@v2 with: java-version: '8' distribution: 'adopt' - name: gradlew 권한 변경 workin.. 2021. 8. 23. 이전 1 2 3 4 5 다음
