본문 바로가기

전체 글

 (351)
[css] position: relative, absolute의 차이점 (질&답 형식) position: relative 의미? ChatGPT "position: relative"는 CSS (Cascading Style Sheets)의 속성으로, HTML 요소의 위치를 상대적으로 설정하는 데 사용됩니다. 이 속성은 해당 요소를 기본 흐름에서 상대적으로 이동시킬 수 있게 해주며, 다른 요소들과의 상호작용을 가능하게 합니다. "position: relative"를 사용하면 해당 요소는 원래 위치를 기준으로 상대적으로 이동됩니다. 이동은 "top", "bottom", "left", "right" 속성을 사용하여 지정할 수 있습니다. 예를 들어, 다음과 같은 CSS 코드를 사용하면 요소가 원래 위치에서 오른쪽으로 20픽셀, 아래로 10픽셀 이동합니다. css Copy code .element { ..
[JSX] 자바스크립트 꿀팁 {addPackageMaps?.length > 0 && ( {'패키지'} {addPackageMaps?.map(({ brandName, partsName, partsCode, typeId }) => { return isServiced[typeId] === false ? ( {`${brandName} / ${partsName} / ${partsCode}`} ) : ( {`${brandName} / ${partsName} / ${partsCode}`} ); })} )} .map 같은 매서드를 써서 순회하면서 return을 하려고 할때 위에 처럼 분기 처리할 수 있다. const [isServiced, setIsServiced] = useState({}); if (addPackageMaps !== undefi..
[Githib Action]CI / CD 자동 배포 정리 (질 & 답 형식) 루트 경로에 ci / cd 지정할 파일 생성 /.github/workflows/.yml .yml 파일은 GitHub Actions에서 실행되는 작업의 집합을 정의하는 워크플로우 파일의 확장자입니다. 이 파일은 YAML (YAML Ain't Markup Language) 형식으로 작성되며, GitHub Actions에서 워크플로우를 구성하는 데 사용됩니다. q . development.yml 실행되는 원리가 무엇이지? 깃허브에서 머지된이후 어떤 과정을 걸쳐서 머지되는지 알려줘. a. development.yml은 GitHub Actions 워크플로우 파일의 이름입니다. 워크플로우 파일은 특정 이벤트(예: 푸시, 풀리퀘스트 등)가 발생할 때 GitHub Actions에서 실행되는 작업의 집합을 정의합니다. ..
[Web]아이폰 datePicker 확대되는 현상 해결 코드 옵션에 user-scalable=no 추가하면 된다.
[Next.js] 4장 - 코드 구성과 데이터 불러오기 (학습 중 메모 정리 - 나중에 할것) USER getaddrinfo ENOTFOUND api.rwnjs.com? ChatGPT "getaddrinfo ENOTFOUND api.rwnjs.com" 에러 메시지는 일반적으로 DNS(Domain Name System)에 의해 도메인 이름 "api.rwnjs.com"을 IP 주소로 변환할 수 없다는 것을 나타냅니다. 이는 네트워크 연결 문제, 올바르지 않은 DNS 서버 구성 또는 도메인 이름 자체의 문제로 인한 것일 수 있습니다. 이 문제를 해결하기 위해 다음과 같은 단계를 시도해 볼 수 있습니다: 인터넷 연결을 확인하고 안정적인 연결을 보장합니다. DNS 서버가 올바르게 구성되어 있는지 확인합니다. User Request URL: http://localhos..
vscode prettier setting Ctrl + S 를 눌렀을 때 소스코드가 자동 정렬되는 방법을 알려드립니다. 적용 안되는 경우 3,4번 항목을 체크해보세요. 1. VSCode에 Extensions 창(Ctrl + Shift + x)에서 Prettier를 다운받아준다. 2. File - Preferences - Settings 에 들어간다. (Ctrl +,) 3. 'Format on Save' 검색 후 아래 캡처와 같이 설정 체크박스에 체크가 없으면 자동정렬 안된다. 4. 'Default Formatter' 검색 후 아래 캡처와 같이 설정 디폴트 포맷터를 Prettier로 설정해야한다.
테일 윈드 정리 max-w-sm Tailwind CSS는 다양한 화면 크기에 대응하는 반응형 CSS 유틸리티 클래스를 제공합니다. 일부 클래스는 아래와 같습니다. sm: 640 픽셀 이상의 작은 화면 (스마트폰 가로모드) md: 768 픽셀 이상의 중간 화면 (태블릿 가로모드) lg: 1024 픽셀 이상의 큰 화면 (노트북, 데스크탑) xl: 1280 픽셀 이상의 매우 큰 화면 (큰 모니터) 2xl: 1536 픽셀 이상의 매우 매우 큰 화면 이러한 반응형 CSS 유틸리티 클래스를 사용하면, 화면 크기에 따라 레이아웃이 자동으로 조정되어 모바일에서부터 데스크탑까지 다양한 디바이스에서 좀 더 일관성있는 UI를 구현할 수 있습니다. 예를 들어, lg:max-w-xl과 같은 클래스를 사용하면, 노트북 크기 이상의 화면에서만 최..
타입스크립트 설명 1. 타입스크립트 개요 TypeScript는 JavaScript에 타입을 추가한 슈퍼셋(Superset) 언어입니다. TypeScript는 Microsoft에서 개발하고 관리하며, JavaScript의 기능을 확장하고 개선하여 JavaScript 개발자들이 타입 체크를 수행하고 오류를 더 쉽게 잡을 수 있도록 돕습니다. TypeScript는 JavaScript와의 호환성이 높으며, TypeScript로 작성된 코드는 JavaScript로 변환할 수 있습니다. 또한 TypeScript는 대부분의 개발 도구에서 지원되며, 코드 에디터에서 타입 체크와 코드 완성 기능을 지원합니다. TypeScript의 주요 기능은 다음과 같습니다. 1-1. 주요 기능 * 타입 시스템(Type System): TypeScrip..
728x90

티스토리툴바