가수면

https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=ko SEO 기본 가이드: 기본사항 | Google 검색 센터  |  문서  |  Google for Developers검색엔진 최적화의 기본사항에 관한 지식만으로도 눈에 띄는 효과를 얻을 수 있습니다. Google SEO 기본 가이드에서 기본적인 검색엔진 최적화에 관해 간략히 알아보세요.developers.google.com여기만한 데 없었다..

MySQL과 Docker 기반으로 배포된 데이터베이스 데이터 이전 방법 정리기존 데이터베이스 덤프 생성docker exec 기존_컨테이너_이름 mysqldump -u 유저이름 -p비밀번호 --all-databases > 저장할_경로/backup.sql 우분투에서 로컬 컴퓨터로 덤프 파일 복사복사하고자하는 경로에서 아래 명령어 실행scp promartians@192.168.40.202:저장된_경로/backup.sql ./backup.sql 새로운 데이터베이스 도커 컨테이너에 복사docker cp /path/to/backup.sql test-db:/backup.sql 데이터 이전// 컨테이너 접속docker exec -it test-db /bin/bash// 데이터 이전 (단일 테이블)mysql -u roo..

버전 관련 오류내 os에 설치된 yarn의 버전과 기존 프로젝트에서 사용되고 있는 yarn의 버전이 불일치했을 때 버전을 동기화시키는 과정에서 발생할 수 있는 오류와 방법들을 정리한다. 다운그레이드 해야하는 경우내 os에 설치된 버전이 프로젝트보다 버전이 높아 다운그레이드해야 하는 경우.이 경우 yarn을 삭제 후 재설치 하는 방법이 있겠으나, 그냥 기존에 설치했던 방법에서 버전만 수정하는 방법을 권장한다.그 이유는 yarn을 설치하는 방법이 homebrew, npm, 기본 corepack 등 다양하므로 기존에 설치해서 진행하던 프로젝트들과 yarn 명령어 사용하는 부분에서 충돌을 일으킬 수 있다. 오류 예시) error This project's package.json defines "packageMa..

- JPA -기타 DB 조작 SQL 쿼리https://jhchoi1182.tistory.com/272 MySQL스프링 부트에서 MySQL 도커로 실행했을 때의 환경으로 정리 의존성 설치 // Spring Boot 3.1 이상 com.mysql mysql-connector-j // Spring Boot 3.0 이하 mysql mysql-connector-java 설정 // application.properties spring.datasource.urjhchoi1182.tistory.com@EntityGraph다대일이나 일대다가 설정된 속성을 지정해주면 조인 연산을 수행한다.선언적으로 사용하기 쉬우며, 연관 엔티티들을 한 번의 쿼리로 가져올 수 있다.public interface PostRepository ..

상태 관리Svelte는 let 변수가 변경될 때마다 이를 사용하는 모든 부분이 그냥 자동으로 업데이트된다.예시 코드1) Clicked {count} times예시 코드2)name 변수가 변경될 때마다 greeting 변수도 자동으로 업데이트 됨{greeting}전역 상태 관리writable을 그냥 export해서 사용하면 됨 import { writable } from 'svelte/store';export const count = writable(0);사용법.set(): 스토어의 값을 설정합니다..update(): 현재 값을 기반으로 새로운 값을 설정하는 함수를 받습니다..subscribe(() => {}): 스토어의 값이 변경될 때마다 호출될 콜백 함수를 등록합니다.get(상태값): 스토어의 ..

Vercel 프로세스 ※ 일부 Vercel 내부에서 사용되는 기술적 세부사항은 추측으로, 이해하기 쉽도록 예시를 드는 것으로 한다. 배포 프로세스 1. 배포 트리거 2. 프로젝트의 코드와 파일 업로드 프로젝트의 코드와 파일이 데이터 저장소(Amazon S3와 같은)에 POST 요청으로 업로드된다. 3. 검증 및 권한 부여 Vercel의 내부 API에 의해 POST 요청으로 vercel.json, 유저 권한 등에 대한 검증이 이루어지고 성공 시 배포 권한이 주어진다. 4. 배포 대기열 추가 배포가 준비되었다는 메세지를 배포 대기열(Amazon SQS 추측)에 추가한다. ※ Amazon SQS (Amazon Simple Queue Service) MSA나 분산 서비스에 자주 사용되는 큐 방식의 대기열 데이터..

게시글을 조회할 때마다 조회수가 늘어나는 것을 원치 않는 상황에서 시도할 수 있는 여러 방법들에 대해 소개한다. 아래의 경우엔 데이터베이스에 직접 저장하는 방법으로 가정했기 때문에 Redis를 이용하면 해당 단점을 상당히 완화할 수 있다. 방법론 게시글 클릭 이벤트 시에만 조회수 증가하는 api 요청 보내기 - 장점 - 1. 이미 조회한 게시글에 대해 새로고침, url을 직접해 유입하는 경우 조회수가 증가하는 어뷰징을 방지할 수 있다. - 단점 - 1. 요청 api를 사용자가 수동으로 보내는 경우 조회수 어뷰징이 발생할 수 있다. 2. 이미 조회한 게시글에 대해서 클릭할 때마다 여전히 조회수가 증가한다. 요청하는 유저의 아이디를 DB에 저장해 검증 db 상의 게시글에 조회한 아이디와 그 시간을 기록해 요..

기본 쿼리SELECT데이터를 조회할 때 사용기본 형태 - SELECT column1, column2 FROM table_name;SELECT name, age FROM users; //users 테이블에서 name과 age 컬럼을 조회INSERT새로운 데이터를 삽입할 때 사용기본 형태 - INSERT INTO table_name (column1, column2) VALUES (value1, value2);INSERT INTO users (name, age) VALUES ('John Doe', 30); //users 테이블에 새로운 사용자를 추가UPDATE기존 데이터를 수정할 때 사용기본 형태 - UPDATE table_name SET column1 = value1, column2 = value2 WHER..

쿠키에 보안 설정을 해주게 되면 서버로부터 받은 쿠키는 XSS, CSRF 공격에 대한 대비와 함께 클라이언트(웹 브라우저)가 자동으로 저장하고 관리하게 되므로 중요한 정보에 대한 보안을 강화할 수 있다. 그리고 withCredentials: true로 설정된 요청에서는 이러한 쿠키를 자동으로 서버에 전송하게 된다. 개발자가 직접 쿠키를 저장하거나 요청에 포함시키는 작업을 하지 않아도 되므로 개발 편의성도 증가한다. 프론트 프론트에서 Axios에 withCredentials 설정을 해주게 되면 서버에 CORS 요청을 할 때 쿠키, HTTP 인증 헤더 등을 자동 포함시켜 보내 사용할 수 있게 된다. 따로 interceptors를 설정해주지 않아도 말이다. (fetch에선 credentials: 'includ..

개발 환경 설정 문서는 다음 과정을 따른다. Dockerfile을 생성해 도커 내부로 파일을 옮긴 뒤 도커 이미지를 생성하고, Docker Compose로 컨테이너를 실행한다. (도커 컴포즈를 사용하지 않고 각각 실행하는 법은 후술) 실행이 완료되는 것을 확인하면 EC2에 적용한다. 예제는 스프링 부트와 Mysql을 포함한 예제를 사용한다. + Next 도커 배포 방법 추가 준비물: 1. 도커 설치 2. 도커 허브 회원가입 3. 스프링 부트 프로젝트 도커에서 실행시키기 위한 프로젝트 빌드 준비 1. jar 파일 이름 변경 스프링 부트의 빌드를 위해 편의상 jar파일의 이름을 app.jar로 변경한다. build.gradle에 아래 코드 추가 후 리프레쉬 bootJar { archiveFileName = ..

프로젝트 내 단어 찾기:Windows/Linux: Ctrl + Shift + FmacOS: Cmd + Shift + F 프로젝트 내 파일 찾기:Windows/Linux: Shift 두 번macOS: Shift 두 번 프로젝트 내 클래스(타입) 찾기:Windows/Linux: Ctrl + NmacOS: Cmd + O 코드 라인 복사:Windows/Linux: Ctrl + DmacOS: Cmd + D 코드 라인 이동:Windows/Linux: Alt + Shift + Up/Down ArrowmacOS: Option + Shift + Up/Down Arrow 안 쓰는 Import 정리:Windows/Linux: Ctrl + Alt + OmacOS: Cmd + Alt + O 코드 정렬Windows/Linux: ..

200 - 요청 성공: 요청이 성공적으로 처리됨.201 - 생성 성공: 요청에 따라 새로운 리소스가 성공적으로 생성됨.204 - 콘텐츠 없음: 요청은 성공했지만, 보내줄 콘텐츠가 없음.301 - 영구적 이동: 요청한 리소스가 영구적으로 새 위치로 이동됨.302 - 임시적 이동: 요청한 리소스가 임시적으로 다른 위치로 이동함.400 - 잘못된 요청: 서버가 요청을 이해할 수 없음(유효성 문제 등).401 - 인가 오류: 요청이 인증되지 않음.403 - 금지됨: 서버가 요청을 이해했으나 승인을 거부함.404 - 리소스가 없음: 요청한 리소스를 찾을 수 없음.405 - 메소드 허용되지 않음: 요청한 메소드가 서버에서 허용되지 않음.409 - 충돌: 서버가 요청을 처리하는 과정에서 충돌이 발생422 - 처리할 ..

스프링 부트에서 MySQL 도커로 실행했을 때의 환경으로 정리 의존성 설치 // Spring Boot 3.1 이상 com.mysql mysql-connector-j // Spring Boot 3.0 이하 mysql mysql-connector-java 설정 // application.properties spring.datasource.url=jdbc:mysql://localhost:3306/todos// 데이터 베이스 이름 spring.datasource.username=todos-user spring.datasource.password=dummytodos spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MySQL8Dialect// mysql..

하이퍼 기반의 가상화 vs 컨테이너 기반 가상화 하이퍼 기반의 가상화 또 하나의 가상 서버를 실행하는 기술 호스트 = 물리서버 게스트 = 가상서버 하이퍼바이저 = 서버 가상화 기술로서 호스트 서버에 설치되고 호스트와 게스트를 나누는 역할을 수행 각각의 게스트는 하이퍼바이저에 의해 관리되며 시스템 자원을 할당받게 됨 게스트os에서 실행되는 애플리케이션이 호스트 자원을 사용하기 위해서는 반드시 게스트 os를 거쳐야하기에 속도가 느릴 수 있음 컨테이너 기반 가상화 격리된 환경에서 프로세스를 실행하는 기술 애플리케이션은 도커 엔진을 통해 자원을 사용할 수 있고, 구조적으로 게스트os가 없기 때문에 가벼움 도커 도커 허브 도커에서 제공하는 이미지 저장소 도커 이미지 응용 프로그램을 실행하는 데 필요한 모든 것이 ..

z-index를 사용함에 있어 조건과 규칙을 정리한다. 1. Stacking Context 생성 먼저 z-index를 적용하기 위해선 relative, absolute 등과 같은 position속성을 지정해 Stacking Context를 생성해줘야 한다. Stacking Context 생성 그러면 Z축 공간을 사용할 수 있게되며, 해당 페이지에 생성된 Stacking Context의 z-index를 비교하여 순서대로 합성하게 된다. 이때 position의 속성의 상하 관계는 없다. 2. 자식 요소들은 생성된 부모 Stacking Context에 종속된다. A컴포넌트 - z-index: 20 B컴포넌트 - z-index: 10 이 경우 A컴포넌트가 위로 올라오게 된다. (아래 예시에서는 형제 요소로 했지..

애니메이션 순서 animation-name 예: slideIn, fade, bounce animation-duration 예: 2s, 500ms animation-timing-function (애니메이션 속도 곡선) 예: linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier(...), steps(...) animation-delay 예: 1s, 300ms animation-iteration-count (반복) 예: 1, 2, 5, infinite animation-direction (애니메이션의 재생 방향) 예: normal, reverse, alternate, alternate-reverse animation-fill-mode 예: none, forw..

프론트 1. mkcert설치 https://github.com/FiloSottile/mkcert#installation GitHub - FiloSottile/mkcert: A simple zero-config tool to make locally trusted development certificates with any names you'd lik A simple zero-config tool to make locally trusted development certificates with any names you'd like. - GitHub - FiloSottile/mkcert: A simple zero-config tool to make locally trusted developmen... githu..

리팩토링 핵심 1. 기본 원칙 목표 코드의 가독성 향상 복잡성 감소 유지보수성 향상 확장성 향상 지향점 누구나 잘 알아볼 수 있는가 (성능 최적화 신경쓰지 않고 코드를 다루기 쉽게 만드는 것(가독성)에 집중.) 한 가지 역할만 수행하는가 재사용 가능한 단위인가 기능의 원하는 부분만 수정할 때 용이한가 너무 미래 지향적인 코드 x (점진적 확장) 매개 변수로 불리언 타입 받아 분기 처리하는 함수 지양 되도록 매개 변수 없는 함수 지향 모듈 간 독립성 유지 - 변수(어떤 데이터) / 함수(어떤 일) / 모듈(어떤 책임) 명확한 분리 리팩토링 중 피해야 할 행동 기능의 변경이나 추가: 기능 변경이나 추가는 리팩토링 과정에서의 핵심 목표가 아닙니다. 리팩토링은 코드의 내부 구조를 개선하는 것에 초점을 맞추어야 ..

https://docs.github.com/ko/actions/using-workflows/about-workflows 워크플로 정보 - GitHub Docs 트리거, 구문 및 고급 기능을 포함하여 GitHub Actions 워크플로에 대한 개략적인 개요를 알아봅니다. docs.github.com Next에서 Jest를 이용한 깃허브 액션 설정 1. 루트 경로에 .github/workflows 폴더 생성 2. 이름.yml 파일 생성 3. 워크 플로우 설정 // .github\workflows\main.yml name: CI on: [push, pull_request] // 워크플로우 트리거 이벤트 설정 jobs: build-and-test: runs-on: ubuntu-latest// ubuntu 최신 ..

모노레포란 한 저장소 안에 여러 개의 프로젝트 혹은 여러 개의 package.json이 존재하는 레포지토리를 말한다. 예시 1) 프로젝트 이름/ |-- 부속 라이브러리/ | |-- node_modules/ | |-- ... | |-- package.json |-- node_modules/ |-- public/ |-- src/ |-- ... |-- package.json 예시 2) 저장소 이름/ |-- 프로젝트1/ | |-- node_modules/ | |-- ... | |-- package.json |-- 프로젝트2/ | |-- node_modules/ | |-- ... | |-- package.json 이 경우 배포를 진행하면 클라우드가 루트 경로에 위치한 package.json만 인식해 설치하기 때문..