프론트엔드 첫걸음

글꼴 및 이미지 최적화 글꼴 Next.js는 빌드 시 글꼴 파일을 다운로드하고 이를 다른 정적 자산과 함께 호스팅 -> 글꼴에 대한 추가 네트워크 요청이 없음 -> 성능향상 웹폰트 사용은 Layout shift 생길 수 있음 fonts.ts //next/font/google module 에서 폰트 가져옴 import { Inter, Lusitana } from 'next/font/google'; // 로드할 Inter의 하위집합 latin export const inter = Inter({ subsets: ['latin'] }); // 서브 폰트 export const lusitana = Lusitana({ weight: ['400', '700']..

URLSearchParams 객체와 URL 객체는 JavaScript에서 URL과 관련된 작업을 수행하는 데 사용되는 두 가지 다른 객체입니다. 각각의 주요 목적과 차이점은 다음과 같습니다: URL 객체: URL 객체는 URL을 파싱하고, 생성하며, 조작하는 데 사용됩니다. URL의 다양한 구성 요소(프로토콜, 호스트, 경로 등)에 접근할 수 있습니다. 주로 웹 주소를 다룰 때 사용됩니다 const urlObject = new URL('https://example.com/path?param1=value1&param2=value2'); console.log(urlObject.protocol); // Output: "https:" console.log(urlObject.host); // Output: "ex..

400에러가 발생했다. 400에러란? https://developer.mozilla.org/ko/docs/Web/HTTP/Status/400 HyperText Transfer Protocol (HTTP) 400 Bad Request 응답 상태 코드는 서버가 클라이언트 오류(예: 잘못된 요청 구문, 유효하지 않은 요청 메시지 프레이밍, 또는 변조된 요청 라우팅) 를 감지해 요청을 처리할 수 없거나, 하지 않는다는 것을 의미합니다. https://extrememanual.net/45867 클라이언트 측에서 요청 메서드(Method)가 잘못된 경우, 요청 헤더가 잘못된 경우, 요청한 본문 구문이 누락된 경우 등이 HTTP 400 Bad Request 오류의 원인이다. 개발자도구를 뒤져보니 "Multipart:..

너무나도 기본중의 기본인데 나처럼 확실하게 모르고 있었던 사람 있으리라 생각하며 기록으로 남긴다. See the Pen hegiht 100%가 필요한 이유 by JEONG (@cona) on CodePen. grandParent에 height 100px을 지정해주었다. parent에 height 100%가 없다면 child는 height 30%해줘도 부모의 height를 모르기때문에 30%가 적용되지 않는다. parent에 height:100% 을 사용하지 않고, child div에서 grandParent div의 높이를 상속받고 싶다면 relative를 사용하면 된다. See the Pen height 100% 없이 relative로 부모 높이 상속받기 by JEONG (@cona) on CodePen..

See the Pen React Accordion 2 by JEONG (@cona) on CodePen. 제목을 저렇게 지은 이유는 transition 으로 펼쳐지는 아코디언을 구현할때 가장 어려웠던 부분이 바로 scrollHeight였기 때문이다. 펼쳐지는 부분 (보통 질문에 대한 답이 있는 부분) 의 높이가 각각 다른데 transition 하는 요소에서 펼쳐졌을때의 height를 100%로 하면 transition이 적용되지 않는다. scrollHeight로 펼쳐졌을때의 px 을 대입해주어야 한다.

body영역 마지막에 script를 넣을 시 "id"직접 불러와 이벤트를 적용할 수 있다. 나만 몰랐나?? See the Pen getElementById 생략 by JEONG (@cona) on CodePen. js코드를 head에서 부르면 window.onload = function() 를 사용해야한다. [출처] https://codejj.tistory.com/8

https://codepen.io/sosuke/pen/Pjoqqp CSS filter generator to convert from black to target hex color Added License 2022-07-15; this is retroactive for whatever help that is. 0-clause Free BSD License Permission to use, copy, modify, and/or distribute... codepen.io 여기 들어가서 내가 바꾸려는 색을 filter로 바꿔줍니다. 그 filter styled을 svg 아이콘의 class명으로 주면 됩니다.

길이가 다른 list item을 중앙정렬 하려면 ! 길이가 다른 list들을 list들의 위치를 지정해주는 div를 설정해서 위치를 잡아주어야한다....!! See the Pen list 가장 긴 item을 기준으로 중앙정렬하기 by JEONG (@cona) on CodePen.

clip-path 생성기 https://bennettfeely.com/clippy/ 클립패스 트랜지션 예시 See the Pen Untitled by JEONG (@cona) on CodePen. 클립패스 애니메이션 예시 See the Pen clip-path animation by JEONG (@cona) on CodePen.

https://stackoverflow.com/questions/13450039/how-to-undo-git-flow-feature-finish [How to undo git flow feature finish? I am learning git-flow and I just did git flow feature finish , which merged my feature branch to develop and removed it. Instead of this, I want to push the feature branch to ... stackoverflow.com](https://stackoverflow.com/questions/13450039/how-to-undo-git-flow-feature-finish..