프린이의 프론트 정복기 프린이의 프론트 정복기

분류 전체보기

• cssbackground-image 한 클래스에 여러개 넣기

  Html&css 2024. 7. 19. 09:40

  .class { width: 100%; height: 100vh; /* or any other appropriate height */ background-image: url('imges1.png'), url('imges2.png'), url('imges3.png'); background-position: left 0 top 143px, left 0 top 455px, right 0 bottom 0; background-size: 152px 243px, ..

  Read More
• active 되는 border의 px이 다른 경우 width값 유지하는 방법

  Html&css 2024. 6. 25. 13:38

  상황= 글씨에 따라 width가 늘어나야해서 width를 지정하지 못하는 경우.=> border:2px solid #4C71EA; 그대로 넣으면1px이던 border가 active가 붙으면서 2px이 되기 때문에 width가 달라지는 이슈 발생. 해결방법 { border: 1px solid transparent; outline: 2px solid #4C71EA; color: #4C71EA;}border 1px solid에 투명도를 주고 ( border 두께 변경 시 영향을 줄이기 위해 투명하게 설정)동시에 outline에 내가 원하는 두께와 색상을 넣어주면 border은 그대로 1px이 유지 되면서, 색상과 두께가 달라진다 !+outline으로 생기다 보니, 간격이 줄어들 수 있어서 이런 경우 사이사이..

  Read More
• next.js 로 카카오 API 불러오기

  React 2023. 8. 2. 18:25

  1. 카카오맵 API 키 발급: 먼저 카카오맵 API 키를 발급받아야 합니다. API 키는 카카오 개발자 웹사이트에서 발급받을 수 있습니다. 2. 카카오맵 스크립트 추가: 발급받은 API 키를 사용하여 카카오맵 API 스크립트를 웹사이트에 추가해야 합니다. 스크립트를 추가하면 카카오맵 API를 사용할 수 있게 됩니다. 3. 카카오맵 불러오기: 스크립트를 추가한 후에는 원하는 위치에 카카오맵을 불러올 수 있습니다. 불러오는 방법에는 여러 가지가 있으며, 일반적으로는 카카오맵 API를 사용하여 원하는 위치를 지도에 표시하는 방법을 사용합니다. 1.카카오 개발자 웹사이트 https://developers.kakao.com/ 에 접속하여 로그인 합니다. 2. 로그인 후, "내 애플리케이션" 메뉴에서 새 애플리케..

  Read More
• useState, useEffect 사용해서 검색창 만들기

  React 2023. 6. 17. 00:34

  useState, useEffect 는 리액트를 쓰다보면 제일 많이 나오는 React의 Hook 이다. useState: 상태(state)를 관리하는 훅입니다. 함수형 컴포넌트에서 상태를 사용할 수 있도록 도와주며, 상태의 초기값과 상태를 업데이트하는 함수를 제공합니다. 예를 들어, const [count, setCount] = useState(0);와 같이 사용하여 count라는 상태와 setCount라는 상태를 업데이트하는 함수를 생성할 수 있습니다. useEffect: 부작용(side effect)을 관리하는 훅입니다. 함수형 컴포넌트에서 컴포넌트의 마운트, 언마운트, 업데이트 등의 생명주기에 따른 작업을 수행할 수 있도록 도와줍니다. useEffect의 콜백 함수는 컴포넌트가 렌더링될 때마다 실행..

  Read More
• style-components 오류

  React 2023. 6. 7. 23:12

  스타일 컴포넌트를 다운받으려는 와중에 자꾸 이런 오류가 생겼다,, Cannot read properties of null (reading 'edgesOut')오류,,, 열심히 구글링 해 본 결과 'npm과 관련된 내부 문제로 인해 발생할 수 있는 오류이며, 일반적으로 npm 버전 충돌 또는 설치된 패키지의 종속성 문제에 의해 발생합니다.' 해결 방법은 npm cache clean --force 우선 npm 캐시를 정리해 준 후, rm -rf node_modules rm package-lock.json npm install 차례대로 node_modules삭제, package-lock.json 삭제, 다시 npm을 다운 받는 것 이다 (한번에 쓰면 x 한 줄씩 실행 해야함) 다들 이 방법으로 문제 해결 잘 ..

  Read More
• Export / Import

  카테고리 없음 2023. 5. 17. 16:45

  Default (기본) 익스포트/임포트: Default 익스포트는 모듈에서 단일 값을 내보낼 때 사용됩니다. 해당 값은 가져오는 쪽에서 원하는 이름으로 가져올 수 있습니다. Default 익스포트는 export default 구문으로 사용되며, 내보내는 값은 함수, 클래스, 객체 또는 원시 데이터 유형 등 모듈에서 원하는 것일 수 있습니다. Default 임포트는 import 문으로 사용되며, 가져온 값은 가져오는 쪽에서 원하는 이름으로 지정할 수 있습니다. {} 중괄호를 사용하지 않고 가져올 수 있습니다. 예시: 익스포트: export default function Button() {} 임포트: import Button from './Button.js'; Named (이름 지정) 익스포트/임포트: Na..

  Read More
• 유사 배열 객체

  카테고리 없음 2023. 5. 11. 12:52

  유사배열 객체 유사배열 객체란, 배열과 유사한 구조를 갖지만, 실제 배열은 아닌 자바스크립트 객체를 의미합니다. 즉, 인덱스를 갖는 연속된 데이터의 집합이며, 배열에서 제공하는 대부분의 메소드와 속성을 사용할 수 있지만, 배열의 메소드 중 일부는 사용할 수 없습니다. 일반적으로, 유사배열 객체는 배열 메소드를 사용하거나, 배열의 형태로 데이터를 처리하는데 유용합니다. 대표적인 예로는 arguments 객체나 NodeList 객체 등이 있습니다. arguments 객체는 함수 내에서 사용되며, 함수에 전달된 인수들의 정보를 담고 있는 유사배열 객체입니다. NodeList 객체는 웹페이지의 DOM 구조에서 특정 요소를 선택한 결과를 반환하는 메소드(querySelectorAll(), getElementsBy..

  Read More
• split,map,Array,fill

  카테고리 없음 2023. 5. 11. 11:39

  const getStrikes = (number, answer) => { //스트라이크 카운트는 몇개? let strike = 0 const nums = number.split('') nums.map((digit, index) => { if (digit === answer[index]) { strike++ } }) return strike } split() 메서드 문자열을 분할하는 기능을 합니다. 이 메서드를 이용하면 주어진 문자열을 구분자로 나누어서 새로운 배열을 만들 수 있습니다. 위의 코드에서 number 문자열을 split() 메서드로 분할하여 nums 배열에 저장합니다. split() 메서드에는 구분자로 사용할 문자열을 전달하는데, 여기서는 빈 문자열 ''을 구분자로 사용하여 각 자릿수를 분리합..

  Read More