분류 전체보기41 React에서의 setState React에서 Functional Component를 사용하면 useState hook을 정~말 많이 사용하게 된다. 그 중, 프로젝트를 하면서 setState를 사용하면서 들었던 두 가지 의문점과, 이를 해결해나가는 과정 그리고 그에 관한 생각들을 기술해보려고 한다. 🌱 첫 번째 의문 - setState는 어떻게 동작할까? 사실 지금까지 이미 만들어져있는 hook들을 사용하면서, 이 hook들의 세부 동작에 대해서는 크게 고민하지 않고 사용했다. 몇 번 궁금해서 찾아보기는 했으나, 항상 적당한 수준의 이해만 하고 넘어가기를 반복해서 잘 이해했다고 보기는 어려웠다. setState는 비동기로 동작한다. 왜냐하면 React에서 state가 변경될 때마다 매번 바로바로 DOM을 리렌더링하게되면 퍼포먼스 효율.. 2021. 8. 19. React S3, CloudFront에 배포하기 summary babble 팀 서비스를 배포한 후로 새로고침을 할 때나 초기 페이지를 거치지 않고 URL로 직접 페이지를 이동하는 경우 계속해서 403 FORBIDDEN 에러를 마주쳤다. 왜 그런지 이유를 찾던 중, 얼핏 들었던 "React는 HTML 파일을 하나로만 구성해서 개발한다."가 떠올라서 React SPA에 대해 알아봤다. React는 SPA(Single Page Application)를 지원한다. SPA는 하나의 HTML 페이지와 애플리케이션 실행에 필요한 JavaScript와 CSS 같은 모든 자산을 로드하는 애플리케이션이다. 페이지 또는 후속 페이지의 상호작용은 서버로부터 새로운 페이지를 불러오지 않으므로 페이지가 다시 로드되지 않는다. 대게 react-router-dom을 이용해 SPA.. 2021. 8. 19. React에서 setInterval 현명하게 사용하기(feat. useInterval) 들어가기 Babble의 방 목록 페이지에 들어가면 유저가 생성한 방들이 쭉 나열되어 있는 것을 볼 수 있다. (안타깝게도 유저가 없으면 방도 없다ㅜㅜ) 그리고 이 방들은 5초마다 서버에 요청을 보내 새로이 갱신되는데, 어떤 유저가 새로 방을 만들면 다른 유저들에게도 그 방이 생겼다는 것을 보여줘야 하기 때문이다. 현재는 유저가 많이 없기도 하고 또 실시간성을 보여주기 위해 이 방법을 사용하고는 있지만, 서버에 많은 요청이 가는 방법이기 때문에 추후에 새로고침 버튼 등을 이용해 개선하려고 생각중이다. 처음에는 개인적으로 '그래도 유저의 편리함이 우선시 되어야하지 않을까?' 라고 잠깐 생각하기도 했지만 유저가 많아지면 부하가 정말 심해질 것 같아서 이렇게 서버에 짧은 간격으로 요청을 계속 보내는 것은 좋지 .. 2021. 8. 18. 웹팩으로 리액트 개발환경 구축하기 이번에 우아한테크코스에서 진행한 프로젝트의 개발환경을 처음 세팅할 때, 같은 팀 프론트엔드 크루와 함께 기준으로 삼았던 것은 바로 CRA였다. '우리가 CRA를 쓰던 때와 비슷하게, 아무런 불편함 없이 코딩할 수 있을 정도'로 세팅을 하자는 것. 그러면 그냥 CRA를 쓰면 되지, 왜 굳이 처음부터 세팅을 하느냐? CRA를 사용하면 불필요한 기능들까지 한 번에 딸려오기 때문에 가지치기 작업을 해줘야하는데, 그럴바에 차라리 직접 리액트 개발환경을 세팅하면서 공부를 해보자는 것이 공통된 의견이었다. 더불어 CRA를 사용하는 것이 불가능한 조건이었다는 건 비밀. ■ package.json 우선, 당연히 npm init을 통해 package.json을 만드는 것부터 시작된다. npm init 📦 웹팩(Webpac.. 2021. 8. 18. 프론트엔드 웹 로딩 최적화 웹 성능 최적화는 사용자 경험뿐만 아니라, 매출과도 거의 직접적으로 연결이 될 정도로 굉장히 중요하다. 웹 성능 최적화를 위해서 필요한 기본 지식과 함께, 최적화 방법에 관해서도 간단히 알아보도록 하자. 브라우저의 로딩 과정 웹 로딩 최적화를 위해서는, 브라우저의 로딩이 어떤 식으로 이루어지는지 알고있는 것이 도움이 많이 된다. 브라우저의 로딩은 크게 파싱, 스타일, 레이아웃, 페인트, 합성의 과정을 거친다. 좀 더 자세한 내용은 TOAST UI의 '성능 최적화' 글을 참조하길 바란다. 성능 최적화 애플리케이션 성능 최적화는 앱과 웹에서 모두 중요하다. 최근 웹 애플리케이션은 Ajax 통신, 복잡한 UI 등 많은 기능을 담으면서 크고 무거워졌다. 무거워진 웹은 긴 로딩 시간 함께 사용자 경험 ui.toa.. 2021. 8. 16. Github actions self-hosted runner를 EC2에서 동작시키기 Summary 최초 Github actions를 통해 프로젝트를 빌드하고 WAS EC2 인스턴스에 빌드된 파일을 전송하는 구조를 구상했다. 그러나 프로젝트 제약사항으로 등록되지 않은 외부 IP를 통해 AWS EC2 SSH 접근이 불가능하다가 있었고, Github actions 측에서 제공하는 서버로 빌드/배포 과정을 진행하는 방식으로는 완성된 빌드 파일을 보낼 수 있는 방법이 없었다. 코치님께서도 이 제약사항을 풀어줄 수 없다고 완강하게 말씀하셨다. 굳이 Github actions를 써야 겠다면, 몇가지 대안이 생각나긴 하네요. Github actions의 빌드 결과물을 도커로 빌드한후 도커 허브에 올린다. 서버에서는 이 이미지를 활용한다. github action를 self-hosted runner 방.. 2021. 7. 30. 로컬 DB 도커로 마이그레이션 하기 summary "영속성을 가져야할 클라이언 데이터를 도커 위에서 관리한다고?" 라는 생각 때문에 데이터베이스만큼은 절대로 도커 위에 올려선 안되고, EC2 인스턴스 로컬에 설치해서 관리해야한다는 일종의 신념을 가지고 있었다. 그런데 얼마 전 다라쓰 팀이 디비를 도커 위에 올린 것을 보고 '왜 저런 선택을 했을까?' 생각하면서 도커 위의 데이터베이스가 어떻게 동작되는지를 찾아보았다. 도커 컨테이너에서 동작하는 데이터베이스는 클라이언트의 데이터까지 컨테이너 위에서 보관하는 것이 아니라, 볼륨을 이용해서 로컬에 클라이언트의 데이터를 저장하고, DBMS 관련 설정 값들만 컨테이너에서 관리하고 있었다. 이렇게 동작하는 경우 클라이언트 데이터의 영속성은 로컬 DB를 사용하는 것과 동일하게 지킬 수 있고, 오히려 D.. 2021. 7. 26. Nginx 웹 소켓 프록시 설정 Nginx는 버전 1.3부터 WebSocket을 지원하며, WebSocket의 로드 밸런싱 을 수행 할 수 있다. HTTP에서 WebSocket으로 연결 전환시 HTTP의 Upgrade 및 Connection 헤더를 사용한다. WebSocket을 지원할 때 리버스 프록시 서버가 직면하는 몇 가지 문제가 있다. 하나는 WebSocket이 hop-by-hop 프로토콜이므로 프록시 서버가 클라이언트의 Upgrade 요청을 가로챌 때 적절한 헤더를 포함하여 WAS 서버에 업그레이드 요청을 보내야 한다는 것이다. 또한 HTTP의 단기 연결과 달리 WebSocket은 오래 지속되기 때문에, 리버스 프록시는 연결을 닫지 않고 열린 상태로 유지하는 것을 허용해야 한다. Nginx는 클라이언트와 WAS 간 터널(소켓.. 2021. 7. 26. 스프링에서 url 파싱하기 스프링에서 URL 내부의 데이터를 파싱하기 Goal 문자열 형태의 URL 에서 원하는 이용해 데이터를 파싱해봅니다. 직접 정규식을 짜지 않고, 스프링에서 제공하는 api를 이용해 데이터를 파싱해봅니다. AntPathMatcher 를 사용해봅니다. 개요 url에서 원하는 정보를 뽑아야 하는 상황이 발생 web 개발을 하다보면, url에서 원하는 데이터를 파싱해야되는 경우가 잦게 발생한다. 이 문제 사황을 해결하기위해 스프링에서는 많은 기능을 제공해주고 있다. @PathVariable의 경우가 그중 하나의 예시로 볼 수 있겠다. @RestController @RequestMapping("/uri-pattern") public class UriPatternController { @GetMapping("/use.. 2021. 7. 25. 이전 1 2 3 4 5 다음
