분류 전체보기 (399) 썸네일형 리스트형 [나만의 명언집] 트러블 슈팅 모음집 ③ | 14 ~ 16 해당 포스트는해당 포스트는 나만의 명언집 프로젝트에 대한 트러블 슈팅을 정리한 포스트 입니다. 전체 1,2,3 버전이 있고 현재 포스트는 3에 해당합니다. 로그인 액세스 토큰 재발급 시 과도한 HTTP GET 요청이 발생하는 문제※ 해당 문제는 AcessToken을 자동 재발급하는 로직에서 한번에 최소 10번 이상의 GET 요청이 발생하여, 서버측에서도 과도한 요청 처리가 발생하여 심각성을 느꼈던 문제였습니다. AWS EC2 의 모니터링 도구에서 네트워크 요청이 짧은 시간 안에 그래프가 큰 폭으로 상승하는 것이 규칙적으로 발생하는 것을 확인하여 이상함을 느꼈고, 이를 네트워크 탭에서 확인해보니 해당 문제가 발생하고 있음을 인식하였던 문제입니다.문제상황액세스 토큰 재발급을 위해 자동화 로직을 구현하는 .. HTML/CSS/JS 를 이용한 스트리밍효과 토글 UI 만들기 이전 애니메이션 CSS, JS를 이용한 웅장한 N-S(자석) 애니메이션 제작[이전 애니메이션] 3D 카드 회전 애니메이션 HTML,CSS 를 사용한 3D 카드 회전 애니메이션 만들기미리보기이번에 만들어볼 애니메이션은 원의 중심축을 기준으로 카드가 회전하는 애니메이션을 3Dduklook.tistory.com 미리보기이번 과정을 따라오시면 아래와 같이 스트리밍 되는 듯한 토글 애니메이션을 구현하실 수 있게 됩니다. HTML마크업은 크게 추가할 것은 없습니다. 아래와 같이 두 가지 요소만 만들어주면 됩니다. 나중에 box 태그 내부에 스트리밍 효과의 span 태그를 추가할 예정입니다. CSSCSS 기본 여백 제거우선 브라우저에 기본 적용된 여백을 제거하고, 콘텐츠의 길이와 높이를 계산 시 margi.. [푸드피커] 프로젝트 발자취 - 첨부된 영상이 보이지 않는다면 새로고침 하시면 해결이 됩니다.- 기존에 잡담 항목이 있었는데, 괜히 불필요한 글이 길어지는 것 같고, 글의 일관성을 무너뜨린다고 판단하여 제외하였습니다. 들어가기전해당 프로젝트는 2023 년 7월 경 부터 약 1달 가까이 만들어 졌습니다. 그리고 2024년 5월 24일 경에 재개발에 들어 갔습니다. 이번 회고는 2024년 5월 24일 이전과 이후를 통틀어 지나온 발자취를 동라보는 시간이 될 것 같습니다. 따라서 프로젝트에 대한 간략한 소개와 어떤 페이지 혹은 기능으로 구성되어 있는지, 어떤 변화가 있었는지 어떤 어려움이 있었는지 등에 대해서 정리해보는 시간을 가져봅니다. FoodPicker 프로젝트 개요 FoodPicker 는 다양한 음식관련 정보를 조회할 수 있는.. Vite + React 환경에서 test 파일 제외하려면 참고하세요. 보호되어 있는 글입니다. a 태그의 텍스트가 길고, 모바일에서 레이아웃이 깨지는 문제를 경험했다면 이런 상황에 직면했다면기본적으로 a 태그에 입력한 텍스트는 너무 길면 개행이 되어서 문제될 일은 없습니다. 다만, CSS Reset 등의 도구를 사용하여 CSS 설정을 초기화한 경우, 아래와 같이 개행이 되지 않고 레이아웃이 깨지는 문제가 발생할 수 있습니다. 이 문제를 개선할 수 있는 CSS 속성에 대해서 소개하고자 합니다. 참고로, 아래에서 언급하는 두 가지 방법은 모두 동일하게 동작합니다. word-break 가 표준이 아닌 당시에 처음 나왔던 방식이라면 그 후 표준화되어 통일한 명칭이 overflow-wrap 입니다. 즉, 이 두 방식은 동일한 기능을 수행합니다. 해결방법 1 | overflow-wrap : break-word or anywherea {overflow-wrap: break-wor.. [푸드피커 프로젝트] 트러블 슈팅 1 - 5 들어가기 전푸드피커(https://foodpick.co.kr/)라는 거창한 이름과 달리 짤막한 프로젝트 재개발을 들어가기 전과 후에 경험했던 문제들을 정리한 포스트 입니다. 리액트과 익스프레스를 사용해서 개발이 되었고, 초기 개발 시(2023년 7월) 에는 문서 정리를 제대로 하지 않아서 비교적 최근 기점(2023년 12월 이후, 2024년 5월 기점)으로 정리된 내용이 들어 갔습니다. 사소한 문제일지라도 해결에 어려움을 겪고 있거나, 우연히도 동일한 문제를 경험하는 분이 있다면, 언제가 되었든 참고할 수 있는 그런 글이 되기를 바라며 기록으로 남겨봅니다. 다만, 포스트의 퀄리티는 보장하지 못합니다. 부족한 부분은 계속해서 개선해 나가보도록 하겠습니다. 페이지네이션을 통한 페이지 변경 시 레이아웃 깨짐.. [푸드피커] Github Actions 를 활용한 NodeJS 백엔드 배포 CI/CD 구축(With 국내 클라우드 플랫폼 Cloudtype ) 들어가기 전 | 배포 방향과 클라우드 타입 내부 동작 원리저번 시간에는 Github Actions 을 이용한 프론트엔드 배포를 시도하였습니다. 이번 시간에는 NodeJS Express 기반의 백엔드를 배포하려고 합니다. 배포에 사용되는 도구는 Github Actions 를 사용합니다. 배포 클라우드 플랫폼은 국내에서 활발하게 활동 중이고 가파르게 성장중엔 Cloud Type 을 이용할 예정입니다. 참고로 클라우드타입은 내부적으로 도커 컨테이너를 사용합니다. 깃허브 레포지토리에서 소스파일을 받아온 후 해당 파일을 도커 이미지로 만들고 생성된 컨테이너를 서버에서 실행하는 방식으로 동작합니다. 백엔드 레포지토리의 경우에는 공개된 저장소가 아닌 비공개 저장소에 접근하여 프로젝트를 배포 합니다. 이렇게 하는 이유.. [푸드피커] Github Actions 을 통한 AWS S3+CloudFront 배포 자동화 구축 [이전 포스트] AWS S3 + CloudFront 를 사용한 정적사이트 배포 [푸드피커] AWS S3 + CloudFront 를 활용한 정적사이트 배포시작에 앞서이번에 푸드피커 사이트를 S3와 Cloud Front 를 사용하여 배포를 해보았는데, 이에 대한 정리를 나름 간략하게 정리해보았습니다. 해당 포스트의 내용은 AWS 공식 문서와 유튜브의 배포duklook.tistory.com 들어가기 전 저번 시간에는 수동으로 S3 + CloudFront 배포를 진행했습니다. 이번에는 깃허브 액션을 통해 전 과정을 자동화하는 작업을 시도해 봅니다. 이 부분은 건너 뛰어도 문제 없습니다. 작업을 들어가기 전에 개념을 정리해보는 부분 입니다. 이번에는 이전 포스트에 배포한 리액트 프로젝트를 CI/CD 를 .. 이전 1 ··· 5 6 7 8 9 10 11 ··· 50 다음
