AngelPlayer`s Diary

[URL] 구매한 도메인 주소 이전하기 (Cafe24 -> 가비아)

최근 가비아에서 도메인을 몇 개 관리하고 있어서 기존에 카페 24에서 구매한 도메인을 가비아로 이전하여 관리하기 위해 이전 신청을 진행해 보았습니다. (※ 다른 도메인 구매 사이트도 유사한 방식으로 도메인 이전이 가능합니다.)   먼저 가비아 사이트에 로그인하여 상단 탭의 도메인 - 기관 이전을 선택합니다.   다음에 나온 화면에서 이전할 도메인 주소를 입력해줍니다.     입력 결과는 크게 이전 가능과 이전 불가 두 가지 상태로 나타나게 됩니다. 이전 불가의 경우 기존에 사용하던 도메인이 보호(잠금) 상태가 되어 있기 때문에 해당 상태를 변경해야 합니다.   기존 구매 사이트(카페 24)의 호스팅 관리 페이지에 접속하여, 도메인 관리 - 도메인 정보변경 - 도메인 잠금관리 탭을 선택해보시면 현재 구매한..
Web/etc 2024. 11. 7. 09:58

[SEO] 웹사이트 구축 후 검색 엔진 최적화 설정 (Feat. Next.js)

0. SEO(Search Engine Optimization, 검색 엔진 최적화)란?SEO(검색 엔진 최적화)는 웹사이트나 웹사이트 내 콘텐츠가 구글, 네이버와 같은 검색 엔진에서 더 잘 노출되도록 최적화하는 기법과 전략을 의미합니다. 이를 통해 더 많은 사람들이 검색을 통해 자연스럽게 웹사이트를 방문하게 할 수 있습니다. SEO를 수행하는 방법은 다양합니다. 예를 들어, 양질의 콘텐츠를 작성하거나, 사람들이 많이 사용하는 키워드를 콘텐츠에 활용하여 검색 가능성을 높이는 방법이 있습니다. 또한, 사이트 개발 단계에서 최적화를 고려하여 기술적 요소를 관리하는 것도 중요한 방법입니다. 그중에서도 기술 SEO(Technical SEO)는 검색 엔진이 웹사이트를 원활하게 크롤링하고 인덱싱할 수 있도록 돕는 기술..
Web/etc 2024. 10. 16. 08:41

[Vercel] 도메인 주소 변경하기 (Feat. Cafe24)

오늘은 Vercel로 배포한 서비스의 도메인 주소를 변경하는 방법을 알려드리도록 하겠습니다. Vercel로 서비스를 배포하는 방법은 아래 링크를 참고하시면 됩니다.https://angelplayer.tistory.com/543 [Vercel] 웹 서비스 배포하기 (Feat. Next, Github)먼저 Repository를 생성하고, 작성한 리엑트 프로젝트를 업로드합니다. https://vercel.com/ Vercel: Build and deploy the best Web experiences with The Frontend Cloud – Vercel Vercel's Frontend Cloud gives developers the frameworks, worangelplayer.tistory.com  ..
Web/etc 2024. 7. 20. 08:56

[Vercel] 웹 서비스 배포하기 (Feat. Next, Github)

먼저 Repository를 생성하고, 작성한 리엑트 프로젝트를 업로드합니다. https://vercel.com/ Vercel: Build and deploy the best Web experiences with The Frontend Cloud – Vercel Vercel's Frontend Cloud gives developers the frameworks, workflows, and infrastructure to build a faster, more personalized Web. vercel.com 다음 Vercel 페이지에서 로그인을 진행합니다. 로그인을 하시면 프로젝트들을 확인할 수 있는 화면이 뜹니다. 여기서 Import Project를 통해 Github에 있는 Project를 연결해줍니다...
Web/etc 2024. 3. 13. 09:04

[Netlify] 웹 서비스 배포하기 (Feat. Github, React)

웹 서비스를 제작한 후 Github Repository에 업로드하고 이를 Netlify를 통해서 배포하는 방법에 대해서 설명드리겠습니다. Goals - React 프로젝트를 웹 상에 배포 To Do - Github에 React 프로젝트 push - React Repository를 Netlify와 연결 - Netlify를 통해 프로젝트 배포 1. 프로젝트 생성 및 서비스 구현 먼저 배포 테스트를 위해서 Git Repository를 하나 생성하였습니다. 그리고 리엑트를 통해서 간단하게 배포를 확인할 수 있는 화면을 구현한 후 Repository에 push 하였습니다. 2. Netlify 세팅하기 https://app.netlify.com/ Netlify App app.netlify.com Netlify 홈페..
Web/etc 2024. 2. 2. 08:29

[Spring Boot] ERD JPA 코드로 작성하기

ERD를 설계한 후 JPA에서 사용할 수 있게 코드로 작성해 보겠습니다. 코드 작성하기 먼저 패키지 하위에 entity 디렉토리를 만들고, 각각 엔티티에 맞는 클래스를 작성 해줍니다. 1) 기본 클래스 // entity/Member.java @Entity // JPA에서 엔티티 클래스임을 나타냄 @Getter // 해당 클래스의 모든 필드에 getter 메소드 자동 생성 @NoArgsConstructor // 해당 클래스의 기본 생성자를 자동으로 생성 @EntityListeners(AuditingEntityListener.class) // 엔티티 라이프사이클 이벤트를 감지하고 처리하기 위한 리스너를 등록하는데 사용 // AuditingEntityListener : 엔티티의 생성일자와 수정일자를 자동으로 ..
Web/etc 2023. 12. 18. 08:43

[R3F] Drei, 재질 텍스쳐 매핑

https://github.com/pmndrs/drei GitHub - pmndrs/drei: 🥉 useful helpers for react-three-fiber 🥉 useful helpers for react-three-fiber. Contribute to pmndrs/drei development by creating an account on GitHub. github.com MeshReflectorMaterial 반사를 표현 적용 시 사용함 MeshReflectorMaterial 3D에서 주변환경에 대한 이미지 데이터로 HDR 이미지를 주로 사용함 반짝이는 재질 표현시 사용함 MeshTransmissionMaterial 유리재질 표현 시 사용함 MeshWobbleMaterial 흔들거림 애니메이션..
Web/etc 2023. 10. 20. 08:22

[R3F] Geometry, Material

지오메트리 지오메트리 : 메시의 모양을 정의 모든 지오메트리는 버퍼지오메트리 클래스를 상속받음 어트리뷰트를 가짐 버퍼 지오메트리가 가지는 속성 Position : 형상의 3D차원 정점 Nomal : 모델 면에 대한 수직 벡터 Color : 정점 색상 UV : 텍스터 맵핑을 위한 좌표 Vertex Index : 면 구성을 위한 정점 인덱스 모든 재질은 Matreial class를 상속 받음 점 - Point*Matreial 선 - Line*Matreial 면 - Mesh*Matreial r3f는 drei 로 별도의 재질 컴포넌트를 제공 재질 meshBasicMaterial 광원의 영향을 전혀 받지않음 meshLambertMaterial 반사 하이라이트가 없고 반짝이지 않는 표면 모델의 단순성으로 그래픽 정..
Web/etc 2023. 10. 18. 10:19

[R3F] React Three Fiber 설치 & 기본 개념 정리

Vanilla Three의 경우 간단한 3D 도형이라도 생성하고 화면에 띄우기 위해서는 많은 번거로운 작업이 필요하였습니다. https://angelplayer.tistory.com/491 [Three.js] Three.js 설치 및 기본 사용법 Three.js는 기존의 web에서 3D 객체를 띄우기 위한 라이브러리인 WebGL의 불편함을 개선하고 직관적인 코드를 작성할 수 있도록 만들어진 JS 라이브러리입니다. 1. Three.js 다운로드 https://threejs.org/ Three angelplayer.tistory.com R3F(React Three Fiber)는 React에서 three.js를 효과적으로 사용할 수 있도록 해주는 라이브러리입니다. 가령 Three.js는 객체를 생성하기 위해서..
Web/etc 2023. 10. 17. 09:16

[Three.js] Three.js 설치 및 기본 사용법

Three.js는 기존의 web에서 3D 객체를 띄우기 위한 라이브러리인 WebGL의 불편함을 개선하고 직관적인 코드를 작성할 수 있도록 만들어진 JS 라이브러리입니다. 1. Three.js 다운로드 https://threejs.org/ Three.js – JavaScript 3D Library threejs.org Three.js를 사용하기 위해서는 우선 다운로드가 필요합니다. 위 링크로 들어가셔서 Code - Download를 통해 파일을 다운로드합니다. 다운로드 받은 파일을 압축을 푼 후 사용하시면 됩니다. 압축을 풀었을 때 라이브러리 파일이 나타나는 위치를 기반으로 파일을 작성하시면 됩니다. 2. Three의 기본 요소 Scene : 3차원 객체로 구성되는 장면 Render : Scene을 출력장..
Web/etc 2023. 9. 9. 09:27

[Maven] Mvnrepository 사용법 (with Spring)

Java Project(ex. Spring)를 하는 경우 type을 Maven 또는 Gradle로 선택할 수 있습니다. 그중에서 maven으로 프로젝트를 만드는 경우 라이브러리를 추가하기 위해서 Mvnrepository를 이용합니다. https://mvnrepository.com/ 위 사이트에서 필요한 라이브러리를 검색합니다. 검색 결과에서 자신이 필요한 라이브러리를 선택합니다. 사용할 버전을 선택 후 클릭합니다. 버전은 일반적으로 다른 연계된 라이브러리 혹은 프로젝트와 맞는 버전인지 확인이 필요합니다. 화면 하단에 코드 출력부가 Maven으로 선택되었는지 확인 후 xml 코드를 복사합니다. Project 내에 porm.xml 파일의 내부에 복사한 내용을 붙여넣기합니다.
Web/etc 2023. 5. 6. 10:13

[Bootstrap] Footer 화면 하단에 배치(고정)하기

Bootstrap으로 화면 제작 시 데이터 양이 부족하여 페이지를 체우지 못하는 경우 footer(푸터)가 딸려 올라오는 현상이 발생합니다. 일반적인 HTML 코드에서는 css에서 display 속성을 변경하여 수정이 가능하지만, Bootstrap(부트스트랩)이 적용되어 있는 경우 제대로 변경되지 않는 현상이 발생합니다. 대신 Bootstrap의 문법을 이용하여 일반적인 html 코드의 css를 수정하듯이 변경이 가능합니다. - 수정 코드 body class에 [ d-flex flex-column min-vh-100 ] 추가 footer class에 [ mt-auto ] 추가 기본적인 개념은 html에서 footer를 하단에 다는 방식과 유사하다고 보시면 됩니다. body의 display를 flex로 변..
Web/etc 2023. 3. 16. 22:44

[manifest] manifest.json 파일 Key 정리

name : 팝업 배너와 스플래시 스크린에 표기 short_name : 바로가기 아이콘에 표기 description : 웹 크롤러가 사용하는 소개문 scope : 매니페스트에 정의된 내용이 적용될 파일들의 범위를 지정함 start_url : 프로그램을 실행하면 시작될 URL을 루트 경로로 설정 display : 화면의 형태를 설정 fullscreen : 기기의 최대 화면 standalone : 웹 브라우저의 주소, 상태 표시줄을 제거한 화면 minimal-ui : 상단에 주소 표시줄만 추가 browser : 웹 브라우저 형태 (모바일 기기에서 웹으로 인식) -> fullscreen, standalone, minimal-ui는 앱으로 인식함 orientation : 방향 portrait : 세로 lands..
Web/etc 2022. 7. 21. 16:37

[PWA] 프로그레시브 웹 앱이란?

앱의 종류 네이티브 앱 : 스마트폰 OS에서만 작동하는 앱, 스마트폰 최적화 기능 구현 가능, 각 OS별 구현 필요 모바일 웹 앱 : 웹 기술을 이용하여 앱을 구현, 하드웨어 기능 사용 불가, 스토어 업로드 불가, 인터넷 연결 필수 하이브리드 앱 : 웹 앱을 개발 후 프레임워크를 통해 네이티브 앱으로 변환 프로그레시브(Progressive) 웹 앱 : 쉽게 구현하여 네이티브와 유사한 경험을 제공, 오프라인 상태에서도 사용 가능 프로그레시브 웹 앱 핵심 기술 - 서비스 워커 웹 브라우저 안에 존재하며, 항상 실행되는 백그라운드 프로그램 브라우저와 서버 사이의 상태 값 변경을 감시 푸시 알림 기능 오프라인 상태에서도 작동 - 웹 앱 매니페스트 앱 소개 정보, 기본 설정 등을 담은 JSON 파일 (기존 네이티..
Web/etc 2022. 7. 18. 11:44

[HTML / Tistory] 웹 페이지에 수식(기호) 넣기

웹페이지에서 미/적분, 루트 등을 넣기 위해서 별도의 코드를 사용합니다. 스크립트 코드 작성 ... ... head 태그 내부에 아래에 작성된 스크립트 태그를 복사하여 넣어줍니다. 티스토리의 경우 [설정 - 꾸미기 - 스킨편집 - html 편집]으로 들어가 마찬가지로 나타나는 html 코드에 head 태그 부분에 삽입하시면 됩니다. 삽입 후 [적용] 버튼을 누르고 빠져나옵니다. 수식 작성 방법 출력할 내용을 문법에 맞게 $$사이에 작성해주시면 됩니다. - 예제 분수 : $\frac{1}{2}$ 제곱 : $3^{2}$ 미분 : $\displaystyle \lim_{h \to 0}\frac{f(a+h)-f(a)}{(a+h)-a}$ 행렬 : $\frac{\mathrm{1} }{\mathrm{ad-bc}}\be..
Web/etc 2022. 4. 3. 15:05
◀ 1 ▶

티스토리툴바