용용it

저번에 인스턴스를 만들었으니 몇 가지 설정을 더 해보자 라이트세일은 서버를 재부팅하면 IP가 바뀔 수 있으니 고정 IP를 생성하자 네트워킹 > 고정 IP 생성으로 가면 고정 IP를 생성해 준다그다음으로 방화벽 세팅으로 하자 ssh 22번 포트http 80번 포트https 443번 포트IPv4, IPv6 둘 다 설정해 준다 인프라 생성 및 고정 IP, 방화벽 설정은 완료되었으니 SSH로 접속하여 Git 코드 당겨오고 런타임 환경 세팅을 해보자 PEM은 매우 매우 중요한 열쇠니 노출 및 유출 안되게 관리 잘할 것vscode 확장앱인 remote-ssh를 설치하고 .ssh\config 파일을 수정하자 (라이트세일에서 다운받은 PEM 키 경로를 config에 잘 지정해 주자) 운영체제 리눅스 선택하..

갑자기 메짱에 접속하니 HTTPS가 작동되지 않았다최근에 따로 만진 건 없으니 원인을 찾아보자1. HTTPS를 사용하지 않는다는 경고문이 나왔으니 HTTPS 연결이 되지 않는다2. AWS Certificate Manager를 사용하여 인증서를 받았으니 AWS Certificate Manager에 접속3. ACM 유효기간 확인 > 만료 확인 4. 새 인증서 생성 > 여기서 문제 발생 기존 인증서를 확인해보자 계속 검증 대기중이 뜬다 그래서 www.mezzang.com 도메인이 갱신 상태가 검증이 되지 않았기에 만료되었구나..!이유가 뭘까 ? route53 으로 가서 호스팅 영역으로 가보자 www.mezzang.com 이 있는 레코드를 찾아서 살펴보니 틀린 부분이 있었던 것. 올바른 레코드 이름? 기..

API 호출만으로도 꽤 괜찮은 웹사이트를 만들 수 있지만API가 제공하는 정보는 제한적이기 때문에 상황에 따라서는 추가적인 데이터 수집과 가공 전략이 필요해진다. 이때 많이 거론되는 개념이 크롤링이다. 크롤링 ? 크롤링(crawling)은웹사이트를 순회하면서 공개된 정보를 수집하는 행위를 말한다.수집한 데이터는 목적에 따라 다음과 같은 형태로 저장·활용된다. .csv엑셀로 바로 열 수 있는 가장 기본적인 형식간단한 통계·분석에 적합.jsonAPI 형태로 재활용 가능웹 서비스 간 데이터 교환에 적합.db (SQLite, MySQL 등)대규모 데이터 저장 및 장기 운영에 적합.txt테스트·디버깅용 임시 저장이런 형식의 파일들로 데이터를 저장한다. 크롤링을 바로 시작하기 전에해당 웹사이트가 어떤 범위까지 ..

문제상황 로컬에서 작업 후 github에 올린 후 다른 브랜치에서 pull을 했더니 이미지가 엑박으로 깨져서 나오는 현상 시도해본 경우의 수 1. 정상적인 이미지 파일을 다시 push 후 pull 해보기2. GitHub에서 이미지 파일이 잘 올라갔는지 확인해보기2.1 GitHub에 이미지 미리보기가 안 나오고 Invalid image source 에러가 나는 것을 확인2.2 다른 브랜치에서 push 해봤지만 여전히 똑같음2.3 여기서 다른 브랜치에서 push해서 모든 이미지가 깨져서 GitHub에 올라가고 그걸 다시 pull 땡겨서 모든 이미지가 로컬에서도 안 보임....3. 경로 문제인가 싶어서 확인해봤지만 아니었음4. LFS문제인가 싶어서 봤더니 본인은 LFS를 쓰고 있지 않음 원인 분석 여태까지 ..

서버를 24시간 관리하는 인원이 없는 이상 서버가 에러 때문에 동작하지 않는 경우,예기치 못한 자동화 에러로 인한 pm2 프로세서 중단을 대비하여 pm2에서 에러 발생 시 알림을 오게하는 기능을 알아보자 다양한 웹훅 지원 app(slack)들도 많지만 디스코드를 많이 이용하는 주인장은 디스코드를 이용하여 Webhook을 만들어 보도록 한다. 먼저 원하는 채널 우클릭서버 설정 좌클릭 연동 클릭 요렇게 웹후크를 발견할 수 있다. 웹후크 만들기 클릭 이렇게 이름, 채널, 프로필 이미지도 바꿀 수 있다. 나중에 알림이 올때 요녀석한테 알림이 온다. 이 URL이 알림을 보낼 주소니까 꼭 기록해두자.이걸로 나중에 curl로 알림 보낼 거임. # Discord Webhook URLWEBHOOK_U..

오늘은 버전 관리에 대해서 알아보자 npm 명령어에는 버전 관리 명령어가 있다. npm version major # 1.2.3 → 2.0.0 npm version minor # 1.2.3 → 1.3.0 npm version patch # 1.2.3 → 1.2.4 여기서 각각의 규칙이 있다. major : 큰 변화 (기존 기능과 호환되지 않는 변경) minor : 새로운 기능 추가 (호환성 유지) patch : 버그 수정, 작은 개선 !!) npm version 명령어를 실행하면 package.json 파일의 "version" 필드가 자동으로 수정된다 ! 의문 왜 npm version major 를 하면 1.2.3에서 2.2.3이 아니라 2.0.0가 되는가 ? 위에서 규칙에서 ma..

주인장이 운영 중인 사이트(https://www.mezzang.com/random-class)에서 "랜덤 직업 뽑기" 기능을 만들었는데, 뽑기 버튼을 처음 누르면 이미지 렌더링이 덜 되어 카드의 기본 배경(background)만 잠깐 보이는 문제가 발생했다.한 번 뽑고 나면 모든 이미지가 캐시되면서 이런 문제가 사라졌다.  시도  처음엔 React의 useEffect를 사용해 이미지를 프리로드하는 코드를 작성했다:콘솔 로그를 확인해보니 모든 이미지가 로드 완료되었다고 나오는데도, 왜 첫 뽑기에서 렌더링 오류가 생길까?    일단 프리로드의 한계를 알아보자useEffect에서 new Image()로 프리로드한 방식에는 몇 가지 한계가 있었다.  프리로드의 한계브라우저 캐시에만 저장: new Image()는..

handleLevelChange("hard")} level={level}> HARDconst Hard = styled.button` ${({ level }) => level === "hard" && `background: ${colors.main.dark0}; color: ${colors.main.white0};`}`;const Hard = styled.button` ${(props) => props.level === "hard" && `background: ${colors.main.dark0}; color: ${colors.main.white0};`}`; 먼저 코드부터 보자, Hard 컴포넌트는 level이라는 props를 받고 있으며, styled-components를 활용..

문제 상황 import { ContainerBox } from "../../common/searchCharacter/ContainerBox"; const handleMouseLeave = () => { if (!clicked) { setSelectedItem(null); } }; return ( );}; containerBox 컴포넌트에 onMouseOut 이벤트를 넣어서 컴포넌트를 벗어나면setSelectedItem(null)로 초기화 시키는 작업을 하려고 했는데 전혀 적용이 안되는 문제가 생겼다.    해결 과정 제일 먼저 정공법인 console.log를 사용하여 함수 호출 여부를 확인한다.const handleMouseLeave = () => { conso..

오늘은 React-Helmet에 대해 알아보자 react-helmet은 React에서 HTML의 태그를 쉽게 관리할 수 있게 해주는 오픈 소스 라이브러리이다.주로 웹 애플리케이션의 페이지 제목(title), 메타 태그(meta tags) 등을 동적으로 설정하거나 변경할 때 사용된다. react-helmet 장점SEO(검색 엔진 최적화): 웹사이트의 메타 정보를 동적으로 설정함으로써 검색 엔진이 페이지를 더 잘 인식하도록 도와준다.동적 제목 변경: 페이지마다 제목과 메타 정보를 다르게 설정할 수 있어서, 웹 애플리케이션이 더 유연하게 관리된다.    예시네이버 웹툰으로 예시를 들어보면,각 탭들의 title이 다른 걸 볼 수 있다. 이렇게 되면 사용자 입장에서도 한 눈에 어떤 탭인지 명확하게 알 수 있다...