본문 바로가기

반응형

전체 글

(356)
WIndow 환경에서 Open SSH 로 접속 및 AWS EC2 인스턴스와 연결하기(+ 번외: SCP 사용해서 EC2 인스턴스로 파일 전송하기) 들어가는 말2024.06.19 바로 내일이죠.  NextJS 배포 자동화를 구축하기 전에 기초 환경을 설정하기 위해 지나온 과정을 정리한 글 입니다. 다만 과정이 생략된 부분이 없지 않아 있어서 필요한 부분을 참고하시고 나머지 부분은 검색을 통해서 추가적으로 알아가시면 좋은 참고가 되실거라 생각합니다.  그럼 시작해보겠습니다. WSL 설치하기해당 사이트(https://learn.microsoft.com/ko-kr/windows/wsl/install) 에 접속하여 WSL2 를 설치해줍니다.사실 설치를 하지 않아도 최신 PowerShell 에서는 OpenSSH 설치를 지원해주기 때문에 리눅스 가상환경을 윈도우 환경에서 접속하게 해주는 WSL 이 꼭 필요하지 않을 수 있습니다. 다만 저의 경우에는 문제가 있었..
[나만의 명언집] AWS CodeDeploy 로 CI/CD 구축하기[2024.06.19 작업 예정] 보호되어 있는 글입니다.
[나만의 명언집] 트러블 슈팅 모음집 3편 해당 포스트는이 포스트는 NextJS 14 버전 이상의 리액트 메타 프레임워크를 사용하여 개발한 프로젝트인 나만의 명언집 사이트 개발 중 발생한 문제와 그 문제를 개선한 과정과 결과를 정리하는 포스트 입니다. 로그인 액세스 토큰 재발급 시 과도한 HTTP GET 요청이 발생하는 문제문제상황액세스 토큰 재발급을 위해 자동화 로직을 구현하는 로직에서 HTTP GET 요청시 비정상적으로 이루어지는 문제가 발생했습니다. 아래와 같이 동시에 GET 요청이 대량으로 발생했습니다.  서버 측에서 해당 요청에 대해 어떻게 처리하는지 확인해보니 한 번에 32개의 요청을 받은 것을 확인할 수 있었습니다.  만일 실제 많은 유저를 받아서 운영하는 사이트였다면,  불필요한 리소스 낭비로 인해 서버가 마비되거나 유지보수 비용이..
HTML/CSS/JS 를 이용하여 블랙홀 애니메이션 구현하기[작성예정] 미리보기이번 과정을 따라 오시면 아래와 같은 블랙홀 애니메이션을 구현하실 수 있는 능력을 갖추게 됩니다. 참고로, 블랙홀 주위를 보면 파장이 퍼져 나가는 부분이 보입니다.
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..

반응형