ecsimsw

프론트 앱 서버의 포트가 자동으로 변경된다? 되게 신기한 경험을 했다. Vue (webpack dev server)와 Spring boot (톰캣)를 띄웠는데 이 둘을 실행하는 순서에 따라 webpack dev server가 다른 포트로 뜨고, 작동하지 않는 경우도 있었다. 시나리오는 다음과 같다. 프론트 서버, 백 서버 모두 8080으로 설정한 상태이다. 1. 백 서버를 띄우고 프론트 서버를 띄우면 프론트-백 각각 localhost:8081 / localhost:8080으로 뜨고, 정상 작동한다. 2. 프론트 서버를 띄우고 백 서버를 띄우면 프론트-백 각각 localhost:8080 / localhost:8080으로 뜨고, 프론트 앱 서버가 무시된다. 1번 프론트서버가 8081로 뜬 이유 / Vue c..

대화하기 위한 프론트엔드 공부 Vue를 하나도 모른다. Vue 뿐만 아니라 프론트 앤드 앱이 어떻게 동작하고 배포되는지도 전혀 모르는다. 이런 표현이 맞는지 조차 모르겠다. 우아한테크코스 지원 플랫폼 제작에 참여하고, 코스 안에서 프론트 앤드 크루들과 협업하는 미션을 진행하면서, 프론트 앱이 어떻게 배포되었는지 모른 채로 너무 당연히 넘어갔다. 어떻게 배포했는지, firebase가 뭐고, netflify가 뭔지. 나는 서비스 전체를 제작하고 배포, 운영하고 싶다. 솔직히 직접적인 웹 화면, 모바일 앱 개발까진 아니더라도 적어도 그 파트를 맡는 개발자들의 말을 이해할 수 있는, 서비스의 전체적인 구조는 그릴 수 있는, 한 서비스를 운영하려면 어떤 컴포넌트들이 필요한 지는 알고 주문할 수 있는, 그런 사람이..

Blocked by CORS policy 클라이언트 어플리케이션에서 서버로 요청을 보낼 때 만난 문제이다. CORS 정책에 의해서 요청이 제한되었다는데 CORS가 무엇인지, 어떻게 해결했는지 설명하려고 한다. Access to XMLHttpRequest at 'http://localhost:8080/members/login' from origin 'http://localhost:3000' has been blocked by CORS policy : Response to preflight request doesn't pass access control check : No 'Access-Control-Allow-Origin' header is present on the requested resource. 에..

Load Balancing과 세션 유지로드 밸런싱을 간단히 말하면, 트래픽을 한 서버에서 모두 처리하는 것이 아니라, 다수의 서버에 적절하게 분배해주는 것이다. 보통 여러 대의 WAS 전면에 Web Server를 두고, 요청을 WAS에 적절히 나누는 식으로 사용된다. 이렇게 로드 밸런싱을 이용하면 서버의 부담도 줄일 수 있으면서, 한 서버가 다운되더라도 서비스를 이어갈 수 있다는 장점이 있다. 문제는 세션이다. 세션은 서버에 데이터를 저장한다고 배웠는데, 여러 was에 요청을 분산하면 세션 지속에 문제가 없을까 궁금했다. 해결책먼저 세션 지속을 보장하는 Web Server를 사용할 수 있을 것 같다. 예를 들면 NginX plus는 Session Persistence를 지원하고 있음을 확인했다. (Ses..

WAS에 전면에 Web Server를 두는 이유WAS에서도 정적 자원을 처리할 수 있음에도, 아래와 같이 web server를 was 전면에 두는 꼴의 서버 구조가 보편적인 이유가 궁금했다.왜 WAS와 독립된 Web server를 따로 두는 걸까. 그 이유를 정리해보았다.   정적 요청은 WAS까지 안가도 되잖아?WAS는 바쁘다. 요청을 처리해야하고, DB 서버가 분리되어 있다면 DB 서버와 통신도 해야할 것이다. 정적 자원 요청을 전면 web server에서 빠르게 처리해주면 WAS에 부담이 줄 것이다.     이때 서버에 따라  캐싱을 사용할 수 있을 것이다. (예를 들면 NginX는 정적 컨텐츠의 캐싱을 지원한다.) 요즘의 웹 페이지는 모두 동적이지, 정적인 컨텐츠가 있다면 얼마나 있을까를 고민하는..

내가 공부하는 방법솔직히 공부 방법에 대해 생각해 본 적 없다. 다른 크루들이 뚝딱 본인의 공부 방법을 정리한 것을 보면서 나만 학습 방법에 아무런 생각이 없었나 하는 반성이 들 정도였다. 그래서인지 이번 미션 주제는 더 많은 시간이 필요했다.  1. 일단 설명하기남들 앞에서 설명할 수 있도록 준비하는 것이 정말 좋은 공부 방법이라고 생각한다. 물론 남들 앞에서 설명하는 것이 쉽지는 않다. 다른 사람에게 설명할 수 있도록 준비하는 것은 분명히 많은 시간과 노력이 필요하다. 그 과정이 어렵고 오래 걸리는 것은 사실이지만, 반대로 준비에 필요한 노력만큼 큰 결과물을 얻을 수 있다고 생각한다. 우선 집중력을 끌어올리기 좋다. 자칫 늘어질 수 있는 학습에 새로운 긴장을 만들 수 있고, 발표 일정에 맞춰 준비해야..

HandlerMapping과 HandlerAdapter (@포모) 같이 공부하는 친구가 HandlerMapping과 HandlerAdapter의 차이를 질문해주었다. 내가 모호하게 알고 있었다는 것을 펜을 들고 설명하는 순간 알게 되었다. 혼자 머릿속에서 정리하는 것과 말로 설명할 수 있는 것은 정말 차이가 큰 것 같다. 질문을 받는 것은 정말 감사한 일이다. 아 그리고 부끄럽지만 영어 철자를 좀 제대로 봐야겠다. 안다고 생각했던 단어였는데 칠판에 쓰고 설명하려니 철자가 버벅인 경우도 많았다. 웃어 넘겼지만 평소에 조금 더 신경써서 봐야겠다. HandlerMapping FrontController 패턴으로 모든 요청을 DispatcherServlet이 처리한다. DispatcherServlet은 사용자의..

근데 이제 운동을 곁들인 평소의 나는 혼자만의 시간에서 에너지를 충전했다. 책 읽고, 영화보고, 알고리즘 문제를 풀고, 침대에 누워서 유튜브를 보면서 휴식을 취했던 것 같다. 최근 들어 답답함을 많이 느끼고 있다. 자취를 시작해서 밥 먹는 것도 일이 되었고, 코로나로 나가지 못하니 너무 답답하고 지루하다. 어떤 추가 공부보다도 에너지를 낼 수 있는 동적인 활동이 지금 내게 더 필요하다고 느꼈다. 우선은 내가 하고 싶은 활동 목록을 생각해보았다. 당분간, 적어도 이번 달은 일부러라도 밤 늦게 공부와 정적인 휴식을 줄여볼 생각이다. - 운동하기. 하루 운동을 안했으면, 11시 이후 코딩 금지. - 아침 출근 길 조깅. 아침 밥 꼭 챙겨먹기. - 시원한 맥주마시면서 떠들기.