분류 전체보기22 AOP로 API 시간 측정하기 로깅은 사용자의 요청을 추적하여 시스템이 애플리케이션이 어떻게 돌아가고 있는지 효율적으로 확인할 수 있는 수단이에요. 그님스 백엔드 팀에서는 모든 API 호출 시, 로그를 남기고 이에 더해 응답 시간을 계산해서 제공하고 있습니다. 목차 1. AOP 살짝 맛보기 2. API 응답 시간 Aspect 1. AOP 살짝 맛보기 AOP는 여러 객체에 공통으로 적용할 수 있는 기능을 분리해서 재사용성을 높여주는 프로그래밍 기법이에요. 이에 대한 자세한 설명은 제가 작성한 블로그에서 확인하실수 있습니다. (스프링5 프로그래밍 입문 - ch7. AOP 프로그래밍 - (2) AOP) API 응답 시간을 남기는 AOP 코드를 보기전에 AOP에 대해 살짝 맛볼게요 (1) @Asepect AOP를 적용할 클래스에 명시합니다... 2023. 4. 1. HTTPS연결 시 404error발생 안녕하세요. 그님스의 프런트 김승주입니다. AWS에 인증서를 받은 후 HTTPS로 연결도 잘 되고 이것저것 테스트를 하다가 네트워크에 404에러가 발생되었습니다. 분명 페이지는 잘 동작이 되는데 404라니?? 알고보니 React의 SPA(Single Page Application)로 인하여 AWS측에서 요구하는 login파일이 없어서 발생했습니다. SPA는 현재의 HTML파일인 index.html을 바탕으로 하나의 페이지에서 동적으로 다시 작성합니다. 즉, HTML, JS 등 필요한 코드를 하나의 페이지에 불러오거나, 동적으로 불러들여서 업데이트를 하는 방식입니다. ReactSPA를 이용하면 HTML파일은 index.html하나 뿐입니다. 하지만 AWS S3, CloudFront에서는 별도의 HTML을 .. 2023. 3. 14. 세번의 실패를 경험한 네이버로그인 검수승인 스토리 입니다!! 사실 네이버로그인기능을 넣기로 결정하기까지 많은 고민이 있었습니다. 네이버로그인은 검색해봐도 자료가 많지 않고, 항해 이전 기수 분들의 작품 중에도 네이버로그인을 넣은 작품이 손에 꼽습니다... 즉, 참고할 자료가 많지 않아요....! 그리고 네이버로부터 검수를 받아서 승인을 받아야 우리의 서비스에 네이버로그인을 넣을 수 있다는 사실!!! 심지어 저희 프론트엔드 삼인방은 소셜로그인은 모두 처음 구현하는 기능이기때문에 저희 모두 우리가 할 수 있을까...? 라며 두려움 그 자체였지만, 이번 프로젝트는 여러가지 도전을 해보자는 생각을 했던 저희 프론트엔드 삼인방 ㅎㅎ.. 기능구현 관련해서는 제가 작성한 글을 참고해주시면 됩니다 :) https://jellajellaangela.tistory.com/48 33.. 2023. 3. 14. 스케줄을 가져올 시 두 번 요청 안녕하세요. 프론트 쪽의 김승주입니다. 저는 Main페이지를 담당하여 작업을 하였습니다. useEffect를 이용하여 처음 랜더링이 될 시 스케줄을 가져와 화면에 띄워주게 했습니다. 하지만 이때 불필요한 데이터 요청을 한다는 사실을 알게 되었습니다. 문제의 코드입니다. const Main = () => { (...) useEffect(() => { const userId = window.localStorage.getItem("userId"); const getnickName = window.localStorage.getItem("nickname"); const getprofilImg = window.localStorage.getItem("profileImage"); const getEmail = wind.. 2023. 3. 14. [FE] github actions 배포용 환경변수파일 생성하기 env 깃헙액션 시크릿활용하기 기존 env는 gitignore에 등록되어있어 깃헙에 올라가지 않도록 설정되어있지요. 그렇다면 배포용 main 레포지토리는 어떻게 환경변수를 관리할까요? 저희 팀은 깃헙의 액션스 시크릿을 활용했습니다! .env파일을 삭제하고 깃헙 액션스 시크릿에 등록하면 코드상 바뀌어야 할 부분은 없는데요, 다음 코드는 process.env를 이용한 예시입니다. export const instance = axios.create({ baseURL: process.env.REACT_APP_BASE_URL, }); axios instance를 적극적으로 이용하고있는 저희 팀은 이렇게 baseURL을 생성했습니다. axios 통신시에 baseurl 뒤에 추가적인 주소를 붙일 땐 templete literal을 이용하여 `${p.. 2023. 3. 14. [Be] 비밀번호 재설정 안녕하세요. 이번 글에서는 Gnims 서비스의 비밀번호 재설정을 할 때 서버에서 어떻게 동작하는지 소개해볼려고 합니다. 목차 비밀번호 재설정 흐름 코드 생성 및 이메일 발송 코드 복붙하기 코드 체크 비밀번호 재설정 추가로 고려한 사안 트러블 슈팅 마무리 (개선할점 등) 1. 비밀번호 재설정 흐름 먼저 비밀번호 재설정 흐름을 소개할려고 합니다. 1) 이메일 날리는 api 호출 2) 코드 생성 및 이메일 발송 2.5) 사용자가 인증 코드를 복붙 3) 인증 코드 확인하는 api 호출 3.5) 비밀번호 재설정하는 페이지로 넘어감 4) 비밀번호 재설정하는 api 호출 2. 코드 생성 및 이메일 발송 먼저 비밀번호 재설정 버튼을 누르면 뜨는 화면입니다. 인증 요청 버튼 클릭 시 해당 api가 호출 됩니다. 이제 해.. 2023. 3. 13. Gnims - 인증 방식 안녕하세요. 이번 글은 그님스 서비스의 인증 방식과 앞으로 인증 방식 관련 개선할 수 있는 사항들에 대해 소개해 보려합니다. 목차 인증 / 인가? 인증 방식? 해결 방안 왜 Jwt 토큰을 사용 했는가? 앞으로 적용해 볼 수 있을 것들! 인증 / 인가? 인증이란 내가 누구인지 인증한다 라고 설명할 수 있습니다 어떤 웹 서비스를 이용한다고 가정할 때 이 웹은 사용자가 누구인지 모릅니다 그래서 로그인을 통해서 내가 누구인지 알려주고, 등록된 회원이면 '인증된 회원' 등록안 된 회원이면 '등록 안 된 회원' 등으로 구분 할 수 있습니다. 인가는 어떤 리소스에 대한 권한이라고 생각하시면 편하겠습니다. 예를 들어, 철수와 맹구라는 아이들이 있고 철수는 매일 비밀 '일기'를 쓰고 있다고 가정하겠습니다. 그리고 맹구는.. 2023. 3. 11. [FE] UT 피드백1-흐릿한 아이콘 문제 FIGMA 피그마 아이콘 svg export 로해결! 저희 팀은 월요일부터 유저테스트를 시작했습니다. 팀장님께서 우리팀이 가장 먼저 배포해서 많은 피드백을 받고 고쳤으면한다고하셔서 기한을 맞추기 위해 다들 최선을 다해서 다같이 노력한 결과 결국 가장 먼저 배포를 해냈어요! 생각보다 많은 분들께서 피드백을 주셨고, 현재 총 74개의 구글폼 응답을 받았습니다! 미리 내부테스트를 많이 해보았고 내부 QA를 받아 지난 주에 빡세게 고쳐보았지만 예상했던 것과 같이 CSS 피드백이 많았어요 🥺 이건 디자이너님께서 따로 작성해주신 디자인 수정할 사항들.. 이중에 몇가지는 담주 월요일까지 해볼 예정이에요. 전 개인적으로 너무나 심각하다고 생각했던,, 네비게이션바 아이콘문제는 가장 먼저 해결하고싶었어요....!!! 흐릿흐릿.. 저..저저 픽셀 깨지는거 좀 보소 분명 PNG.. 2023. 3. 10. [BE] 소셜 로그인 목차 1. 소셜로그인을 도입한 이유 2. OAuth2 인증 이란? 3. 소셜서버와의 연결 과정 4. 엑세스 토큰 얻기 5. 사용자 정보 얻기 6. 아쉬웠던 점 1. 소셜 로그인을 도입한 이유 ○ 제일 큰 이유는 사용자의 편의성이라고 생각합니다. 버튼을 몇번 클릭하는 것만으로도 간편하게 로그인 할 수 있고, 이러한 편의성 하나하나들을 통해서 사용자들이 더 이 서비스를 찾을 이유가 될 수 있다고 생각하기 때문입니다. 2. OAuth2 인증 이란? 소셜 로그인 구현을 구글에 검색하면 OAuth2 인증이 같이 검색이 되는 것을 알 수 있습니다. 그럼 OAuth2 인증이 무엇일까요? ○ OAuth2 인증이란, 요약해서 인증을 소셜서버에 위임하는 것이라고 말할 수 있습니다. 예를 들어, 사용자가 카카오 로그인을 클.. 2023. 3. 9. 이전 1 2 3 다음
