전체 글 검색 결과

해당 글 110건

[SCSS] 반응형에 height도 사용가능할까?

고민한 이유?반응형 웹을 만들 때 대부분 width를 기준으로 media query를 작성하는 경우가 많다.개발하는 중에 일정 height에서 메뉴 아이콘을 줄일 수 있지 않을까? 라는 생각에 찾아보게 되었다. 일반적으로 쓰는 반응형@media (max-width: 768px) { // 모바일 스타일}위는 일반적으로 쓰는 반응형의 형태이다. 그런데 가끔은 화면의 세로 길이(height)를 기준으로 스타일일 적용해야 할 때가 있다.예를 들어, 화면의 높이가 너무 작으면 어떤 요소를 숨기거나, 글자를 더 작게 보여주고 싶을 때이다.그럴 땐, 어떻게 해야할까? height를 media query에서 쓴다SCSS에서도 다음과 같은 방식으로 height를 사용할 수 있다.(정확히는 CSS3에서)@media (m..
STYLESHEET/SCSS 2025. 8. 5. 17:00

[Node] COEP 설정 때문에 S3 이미지 차단

File System API 활성화 후 발생한 이미지 로딩 차단 문제 해결 문제 상황File System API를 위해 COEP 설정을 추가한 뒤,S3에 저장된 이미지가 태그에서 로딩되지 않고 차단되는 문제가 발생.콘솔 에러 메시지:net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 원인 분석Cross-Origin-Embedder-Policy: require-corp는 교차 출처 리소스를 반드시 CORS 허용 또는 동일 출처로 제한한다.하지만 S3의 기본 응답은 Access-Control-Allow-Origin이 없기 때문에 브라우저가 이미지 로딩을 차단했다.즉, 파일 시스템을 위해 넣은 보안 설정이 다른 기능..
JavaScript/실무 2025. 8. 5. 16:32

[Node] 배포 환경에서 File System API 활성화(오류 발생으로 인한)

COEP/COOP 보안 헤더 설정으로 File System Access API 사용 문제 상황로컬 개발 환경에서는 File System Access API (예: window.showSaveFilePicker)가 잘 동작했다.하지만 배포 환경(HTTPS 서버)에서는 브라우저가 보안 에러를 발생시키며 파일 시스템 접근을 막음. 원인 분석File System Access API는 보안 정책상 cross-origin isolation이 필수 조건이다.즉, 아래 두 헤더를 설정해야 브라우저가 해당 API를 허용한다.Cross-Origin-Opener-Policy: same-originCross-Origin-Embedder-Policy: require-corp이 두 가지를 설정하지 않으면,브라우저 콘솔..
JavaScript/실무 2025. 8. 5. 16:04

[Git error] cannot lock ref 해결 방법

git fetch 나 git pull 중 'cannot lock ref' 오류 해결 방법(SourceTree & CLI 정리) 📌 문제 상황최근 작업 중 git pull 또는 fetch 명령어를 실행했을 때, 다음 과 같은 오류 메시지를 마주했다.error: cannot lock ref 'refs/remotes/origin/Hotfix/Common/API': 'refs/remotes/origin/Hotfix/Common' exists; cannot create 'refs/remotes/origin/Hotfix/Common/API'error: some local refs could not be updated; try running 'git remote prune origin' to remove any o..
git 2025. 8. 4. 16:08

[js] 시간 formatting 하기

날짜를 필요한 형식 (YYYY-MM-DDTHH:MM:SS)으로 변환/** * NOTE: 날짜를 필요한 형식(YYYY-MM-DDTHH:MM:SS)으로 변환 * @function formatToSimpleISOString * @param {string} dateString - 날짜 문자열 * @returns {string} - 변환된 날짜 문자열 */const formatToSimpleISOString = (dateTimeStr) => { const date = new Date(dateTimeStr); const year = date.getFullYear(); const month = String(date.getMonth() + 1).padStart(2, '0'); const day =..
JavaScript/실무 2024. 12. 18. 16:05