VamosDev의 개발 브이로그

css 속성 linear-gradientbackground-image의 속성 값으로 적용. 활용법 background-image: linear-gradient(색상1, 색상2);=> 위에서 아래 방향으로 색상1, 색상2가 그라데이션으로 채워짐.ex) background-image: linear-gradient(rgba(255, 255, 255, 1), white) background-image: linear-gradient(각도, 색상1, 색상2);=> 각도 입력 시 해당 각도만큼 회전, 예를 들어 90도 설정시 좌에서 우 방향으로 색상1, 색상2가 그라데이션으로 채워짐.ex) background-image: linear-gradient(90deg, rgba(0, 0, 0, 1), rgba(0, 0, ..

문제gsap timeline 진행 중 state 변경 시(useState로 상태 값 변경 시) 애니메이션이 끊기고 요소가 사라지는 현상이 발생. 해결timeline을 useRef를 사용하여 변하지 않도록 저장한다.

GSAP ScrollTrigger pin 설정시 모든 요소가 사라지거나CSS가 완전히 들어져버리는 오류가 발생했다. 대표적인 오류 원인은 아래와 같다.1. pin 대상이 position: absolute 또는 fixed인 경우원인: pin은 내부적으로 position: fixed 또는 relative를 쓰는데, 이미 절대 위치로 배치된 요소는 고정 시 의도한 위치를 벗어납니다.현상: pin 시 요소가 화면 밖으로 날아가거나, 전혀 보이지 않음.해결: pin할 요소는 static 또는 relative여야 하며, 절대 위치는 제거. 필요하면 pin 전용 래퍼를 만들어 그걸 고정.2. pin 대상의 상위 요소에 transform, filter, perspective가 있는 경우원인: CSS transform ..

"정적 페이지"라면 GitHub pages로 무료 호스팅을 이용할 수 있다.특별히 공부할 것이 없어서 쉽게 이용할 수 있으니, 초보에게 추천한다.또, 해당 브랜치에 푸시를 하면 자동으로 웹사이트 내용이 업데이트 되므로 편리하다. 완성한 웹사이트 코드를 우선 빌드해둔다. 1. GitHub에서 배포할 코드를 올릴 repository를 새로 만든다.이 때, Configuration > Choose visibility 는 "Public"으로 설정한다. 만약 이미 만들어서 사용하고 있던 repository를 사용한다면, 메뉴에서 Settings > General 페이지의 가장 하단 Danger Zone에서 Change repository visibility를 수정한다. 2. Settings > Pages..

cafe24 도메인일 경우를 전제로 하였다. 목표 origin.co.kr 로 접속 시,destination.co.kr로 페이지가 이동되길 바랐다. 1. 포워딩하기 가장 간편한 방법.두 도메인이 모두 cafe24의 네임서버를 사용하고 있는 경우라면 가능하다.해당 origin 도메인은 다른 어떤 호스팅에 연결되어 있지 않고, 어떤 이미 포워딩되고 있는 상태가 아니어야 한다. * 만약 네임서버가 cafe24가 아닌 타기관의 서버라면,호스팅센터 페이지 > 나의 서비스 관리 > 도메인관리 > 네임서버 변경에서 cafe24 서버로 먼저 변경을 해주어야 한다.반영되는 데에는 24~48시간이 걸린다고 한다. 호스팅센터 페이지 > 나의 서비스 관리 > 도메인관리 > 도메인 포워딩 관리에서 origin 도메인을 선택 ..

DNS(Domain Name System)의 핵심 구성요소 중 하나로,'도메인 이름'을 ''IP 주소"로 매핑해주는 역할을 합니다. 예를 들어 eumproperty.co.kr 로 접속하려 할 때, 브라우저는 먼저 네임서버에 “이 도메인이 어느 서버(IP)에 연결되어 있나요?”라고 묻고, 응답받은 IP로 실제 웹 서버에 접속하게 됩니다. * 두 개의 도메인이 하나의 사이트로 연결되도록 하는 방법 (카페24 사용 경우) 1) 멀티 도메인을 사용하여 처리, 2) 하나의 도메인을 리디렉션 시켜서, 해당 도메인 접속 시 다른 도메인으로 이동되도록 함. https://vamosdev12.tistory.com/84 cafe24 리디렉션(포워딩) 하기 / 한글 도메인 오류 해결cafe24 도메인일 경우를 전제로 하였..

구글 드라이브에 파일을 올린 후 해당 링크를 다운로드 링크로 수정한다. 1. 구글 드라이브에 파일 업로드 2. 파일 설정(우측 점 세개) > 추가정보 > 파일정보 > 보안 제한사항 > 액세스 관리 > '링크가 있는 모든 사용자'로 설정 3. 파일 설정(우측 점 세개) > 공유 > 링크 복사 [다운로드 링크 만드는 법]공유 링크의 구조는 아래와 같다.링크에서 "파일 ID"를 찾아 그 아래 '다운로드 링크'의 파일 ID 부분에 넣는다. (따옴표 제외)공유 링크 >> https://drive.google.com/file/d/" 이 부분이 파일 ID "/view?usp=drive_link다운로드 링크 >> https://drive.google.com/uc?export=download&id="파일 ID" 4...

안드로이드 기기에서 모바일 웹페이지를 디버깅하는 대표적인 방법들1. PC의 Chrome DevTools로 원격 디버깅하기모바일에서 개발자 옵션·USB 디버깅 활성화설정 → 휴대전화 정보 → 소프트웨어 정보 → “빌드 번호”를 7회 터치 → 뒤로 가기 → “개발자 옵션” → “USB 디버깅” 켜기USB 케이블로 PC에 연결Android 기기를 USB로 PC에 연결하면, 휴대폰 화면에 “USB 디버깅 허용” 대화 상자가 뜹니다. 허용하세요.PC의 Chrome에서 디바이스 선택PC Chrome 주소창에 chrome://inspect/#devices 입력“Discover USB devices”가 켜져 있는지 확인연결된 기기의 브라우저 탭 목록이 보이면, “inspect” 버튼을 눌러 DevTools를 엽니다모바..

ts project에 .js 형식 파일이 있을 경우tsconfig.json의 첫번째 꺽쇠에서 아래와 같은 오류가 .js 파일 개수만큼 발생.dev 모드 실행은 정상적으로 되나 build는 안되는 상황.(VS Code에서 확인함) 오류 메시지>Cannot write file {경로} because it would overwrite input file. 오류 해석 >"내가 변환한 결과물을 src/index.js에 덮어쓰려 했는데, 이건 입력 파일이라 위험해서 안 돼" 🔍 언제 발생하나요?이 오류는 보통 아래 경우에서 발생합니다:Babel, TypeScript, Webpack, tsc 등 빌드 도구가 src 폴더를 직접 덮어쓰려 할 때예를 들어 tsc 명령어로 TypeScript를 컴파일할 때 outD..

[문제 상황]리스트의 값을 .map()하여 자식 요소를 여러개 렌더링함.리스트의 값을 하나만 변경해도 해당 원소가 아닌 다른 원소를 참조하는 모든 값,즉, 그 리스트를 참조하는 모든 자식 요소가 리렌더링 되는 상황 발생.memo도 적용되지 않음. [원인]'자식 요소'는 '부모 요소' 안에서 선언되어 있었고, useSate()로 관리되는 변화가 있는 '부모 요소'의 값을 직접 사용하였다.그대로 '부모 요소' 안에 선언해둔 채로 직접 '부모 요소'의 값을 사용하지 않고 props로 받도록 수정하였는데 그래도 의미가 없었다. [문제 해결]1 .자식요소를 별도의 파일로 만들어 컴포넌트화 함.2. 부모요소에서 해당 자식 요소를 import 함3. 필요한 모든 부모의 값들을 props로 자식요소에 전달=> 즉, 자..