본문 바로가기

전체 글

 (36)
[프론트 개발일지 2️⃣] 왜 리액트를 사용하는건데? 요즘 프론트엔드 하면 다들 리액트, 리액트 하는데요. 사실 리액트도 결국 수많은 기술 중 하나일 뿐입니다. 그럼 왜 굳이 리액트여야 할까요?? 제가 지금 참여하고 있는 프로젝트를 예시로 한번 정리해보겠습니다. 제가 회사에서 하고 있는 프로젝트는 앱 리뉴얼 프로젝트인데요 이 회사에서 앱이 없었냐??> 아뇨 기존에 사용하고 있던 앱이 있고 나름 잘 사용하고 있습니다. 그럼 기능을 대폭 갈아엎냐??> 아뇨. 대부분의 AS-IS 기능을 유지합니다. 상위 카테고리를 조금 바꾸고, 업무 단위를 잘게 나누는 개별화 정도입니다. 그럼 왜 리뉴얼을 하는거야?? 라는 질문에 다음과 같은 가장 큰 이유가 있었습니다.> 현재 AS-IS는 jsp 방식인데, 이걸 TO-BE에서는 앱과 웹 모두 리액트와 스프링부트로 분리시키려는 ..
[프론트 개발일지 1️⃣] 동기는 뭐고 비동기는 뭔데 회사에서 제가 맡은 프로그램 목록 중에 고객 맞춤 추천을 위해 ai 를 호출하는 부분을 구현해야하는 막중한 임무를 맡았습니다.그래서 빨간날임에도 불구하고... 월요일에 있을 미팅 준비를 위해 출근해 가이드 문서를 살펴보던 중에 "이 방식은 비동기(Promise)입니다~~" 라는 말을 보고 비동기?? 동기랑 비동기랑 차이가 뭔데? 하는 생각에 찾아보기 시작했습니다. (리액트 개발 3개월차...) 일단 결론부터 말을 하자면 다음과 같습니다.비동기 호출은 "일은 시켜 놓고, 끝날 때까지 기다리지 않고 다음 일을 하는 방식"반대는 동기호출 "일을 시키고 끝날 때까지 기다렸다가 다음 일을 하는 방식" 이해가 쉽게 비유를 들어보겠습니다!동기 방식은 카운터에서 커피를 주문하고, 커피가 나올 때까지 그 자리에 서서 ..
점프와 순간 이동 [역방향으로 생각하기] https://school.programmers.co.kr/learn/courses/30/lessons/12980?language=java 프로그래머스SW개발자를 위한 평가, 교육의 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr💡 핵심 아이디어건전지를 가장 적게 사용하려면 한 칸 이동은 최대한 적게 하고, 순간이동을 최대한 많이 해야 한다.순간이동은 현재 위치의 2배로 이동하기 때문에, 0에서는 순간이동을 해도 계속 0이다.따라서 시작할 때는 최소 한 번 1칸 이동해야 한다.목적지에서 거꾸로 생각하면 간단하다.짝수라면 → / 2 → 순간이동으로 온 것홀수라면 → - 1 → 순간이동으로는 홀수가 될 수 없으므로 한 칸 이동해서 온 것따라서 목적지에서 시..
[Spring Framework] Post 요청에 멱등키 적용하기 제가 진행하고 있는 프로젝트에서 멱등키라는걸 사용해보려고하는데요.멱등키를 적용해야겠다고 생각한 문제 상황은 다음과 같습니다. 멱등키를 사용해야겠다고 생각한 문제 상황postman 으로 요청을 보내던 도중 응답이 좀 느려서 Send 버튼을 미친듯이 눌렀더니 DB 에 Id 값만 다른, 다른 데이터는 모두 동일한 데이터가 미친듯이 추가되어 있는 것을 확인했습니다.이게 실제 상황이라면 같은 데이터가 같은 유저에게서 한번만 요청이 와야하는데 여러번 오면 이제 결제와 같이 금융적인 민감한 상황에서는 클라이언트의 의도와는 다르게 여러번의 결제가 일어나게 되는 엄청난 상황이 발생하게 될 지도 모릅니다! 이걸 어떻게 해결할까 하다가 멱등키라는 것을 알게돼서 '게시글 생성' 부분에 멱등키를 적용해보고자 했습니다. 먼저 멱..
[리펙토링]인덱스로 쿼리 실행시간 줄이기 내가 하고 있는 프로젝트는 소셜로그인을 진행하고 클라이언트로 Json 을 넘겨주는 과정에서 단순 성공/실패 만의 정보를 넘겨주는 것이 아니라, 굉장히 많은 정보를 넘겨주고 있다.실행 로직은 잠시 설명해보자면,1. 깃허브 소셜로그인을 진행한다.2. 넘겨받은 깃허브 id 로 우리 데이터베이스를 순회하며, 해당 깃허브 아이디를 가진 유저가 있는지 찾는다.3. 있다면 엑세스/리프레시 토큰을 반환하고, 없다면 빈 값으로 응답한다. 데이터베이스를 mySQL 을 사용하고 있는데, 일반적으로 인덱스를 생성하지 않았을 때에는 primary 로 지정해두었던 id 값이 자동으로 인덱스 적용되어 검색할 때 사용하곤 한다. 그치만 마음에 걸렸던 부분은 나는 member_id 로 검색하는 것이 아니라 String 값은 githu..
Spring 서버 HTTPS 로 배포하기 지금까지 배포하고 사용하고 있던 서버는 http 였는데, 소켓 통신을 시작하면서부터 프론트와 쿠키로 정보들을 주고받으려면 https로 변경해야한다고 해서 변경하는 작업을 진행해보겠습니다..! 가비아에서 도메인 이름 사기 먼저, 가비아로 가서 도메인을 구매해줍니다!원하는 도메인 이름을 검색하셔서 원하는 가격의 도메인 을 구매해줍니다. 저는 1900원짜리 도메인을 구매해보았습니다.. 호호 DNS 설정하기 도메인 이름을 구매했다면 DNS 를 설정해보겠습니다.`가비아 홈페이지` -> `My가비아` -> `DNS 관리툴` 로 이동합니다. 그러면 구매한 도메인이 들어있는 것을 확인할 수 있습니다!오른쪽에 있는 `설정`을 누르고, `레코드 수정` 을 눌러줍니다. 값/위치에는 AWS EC2 IP 주소를 넣어주시면 됩니..
WebRTC offer 와 answer 가 뭐지 WebRTC 에 대해서 구현하려고 여러 블로그를 살펴보다가 offer 와 answer 라는 개념이 나오는데.. 너무 헷갈려서 한번 정리를 해보려고 합니다! 먼저 간단하게 다시 말해서 WebRTC 란 ?Web Real - Time Communication 의 약자로, 말 그대로 브라우저 간 실시간 음성, 영상, 데이터 통신을 가능하게 하는 기술입니다. webRTC 의 피어 간 연결 설정 과정을 이해하기 위해서는 "offer" 와 "answer" 에 대한 이해가 필수적입니다. WebRTC 에서 클라이언트가 서로 통신하기 위해서는 세가지 주요 과정을 거치게됩니다.1. 신호 교환(Signal Exchange) : 연결에 필요한 정보를 교환합니다.2. 네트워크 설정(NAT Traversal) : 피어가 서로의 I..
Mediasoup 초기 시작 세팅하기 지금 졸작에서 진행하고 있는 프로젝트에서 화면 공유 기능이 필요해서 WebRTC 를 사용해야했습니다!WebRTC 를 사용하기 위해서 백엔드에서는 미디어 서버라는 것을 구축해야하는데요.저는 미디어 서버들 중에서도 MediaSoup 이라는 것을 사용하기로 했습니다.먼저, WebRTC 가 무엇인지부터 설명하겠습니다. WebRTC 는 뭐야? WebRTC(Web Real-Time Communication)는 브라우저 간에 실시간 통신을 가능하게 하는 오픈 소스 기술입니다.이 기술은 사용자들이 별도의 플러그인이나 소프트웨어 설치 없이 웹 브라우저 또는 모바일 앱에서 직접 음성, 비디오 및 데이터 스트림을 주고받을 수 있게 해줍니다. WebRTC는 주로 화상 통화, 화면 공유, 파일 전송 등의 실시간 통신 기능을 구..

티스토리툴바