프론트엔드 개발 찔찔이

Composition API를 사용한 반응형 상태 변경#index.tsconst router = createRouter({ routes: [ { path: '/', name: 'home', component: HomeView, }, { path: '/:tag', //쿼리스트링 변수 설정하기 name: 'tag', component: HomeView, }, ],});- tag로 쿼리스트링 변수 설정하기  #자식 컴포넌트.vue /** * 태그 클릭시 url에 파라미터 추가 함수 * ex) www.domain.com/?tag=테스트 * item : 클릭한 태그 */ const addParams = (item: ..

들어가며쇼핑몰을 보면 마우스를 호버했을 때 옆에 확대된 이미지가 뜨는것을 볼 수 있다.마우스를 움직일때마다 확대된 이미지도 함께 움직이는데, 이 플러그인을 찾기 힘들어서 직접 제이쿼리로 구현해봤다.  script  마우스 호버시 보이는 줌 영역 박스는 기존 이미지와 확대 이미지의 비례하여 넓이와 높이값이 정해지도록 했다.이렇게 진행하면 이미지의 크기가 바뀌어도 저절로 영역 크기를 잡아줄 수 있다. 만약 줌 영역 박스를 직접 조절하고 싶다면 /* 줌 영역 박스 크기 지정 */ 부분을 삭제하면 된다. CSS  HTML

기본 미디어쿼리 사용.top-bar{ .con { max-width:1200px; background:lightcoral; @media(1150px >= width > 750px) { max-width:900px; background: lightblue; } @media(750px >= width) { max-width:500px; background: lightgreen; } }}이 방법은 css가 길어질 수록 코드가 반복될 수 있다. 믹스인, 조건문 조합한 반응형 작업@mixin response-con($breakpoint){ @..

css를 코드 블록으로 만들어 해당 블록을 재사용믹스인 정의 및 호출// @mixin : 믹스인 정의@mixin common-btn { width: 150px; height: 50px; background: #afafaf; border: 2px solid black; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: bold; margin-bottom: 10px; &:hover{ text-decoration: underline; text-underline-posi..

설치npm install -g sassCSS컴파일sass style.scss style.cssSCSS 파일 자동 컴파일 설정(선택 사항)sass --watch style.scss:style.css이 명령어는 style.css파일을 감시하여 변경될 때마다 style.css로 자동 컴파일한다.변수#var.scss$bg-color: blue;$bg-hover: lightgreen;@use 'var';div { width: 200px; height: 200px; background: var.$bg-color; &:hover { // & : div로 보면 된다. background: var.$bg-hover; }}💡최신 Sass 버전에서는 @import 대신 @use를 권..

피셔-예이츠 알고리즘function shuffleArray(array) { for (let i = array.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [array[i], array[j]] = [array[j], array[i]]; // 요소 교환 (구조 분해 할당) } return array;}const arr = [1, 2, 3, 4, 5]; console.log(shuffleArray(arr)); // 배열이 랜덤하게 섞인 결과 출력Math.random()0이상 1미만의 난수이다.Math.random() * 4를 하면 0이상 4미만의 난수를 얻을 수 있다. 이것을 Math.floor로 감사면 0이..

1. 변수에 객체 리터럴을 할당한 후 사용하기객체 리터럴을 바로 사용하면 초과 프로퍼티 검사가 발생하지만, 먼저 변수를 정의한 후 타입을 할당하면 초과 프로퍼티 검사를 우회할 수 있습니다. let tempObject = { name: "바둑이", color: "brown", isBark: true, leg: 4, age: 5 // 초과 프로퍼티};let animalDog: Dog & Person = tempObject; // 오류 없음위의 경우 tempObject에 초과 프로퍼티가 있지만, 타입 할당 시에는 초과 프로퍼티 검사가 발생하지 않아서 오류가 발생하지 않습니다.2. 인덱스 시그니처(Index Signature) 사용인덱스 시그니처를 사용하면 초과 프로퍼티가 발생하지 않게 할 수 있습니다..

https://hyjang.tistory.com/entry/React-%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0-%ED%8F%AC%ED%84%B8-%EC%98%A4%ED%94%88-API-%ED%98%B8%EC%B6%9C%ED%95%98%EA%B8%B0Axios-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC [React] 공공데이터 포털 오픈 API 호출하기(+Axios 라이브러리)https://www.data.go.kr/ 공공데이터 포털국가에서 보유하고 있는 다양한 데이터를『공공데이터의 제공 및 이용 활성화에 관한 법률(제11956호)』에 따라 개방하여 국민들이 보다 쉽고 용이하게 공유hyjang.tistory.com이전 게시물..

https://www.data.go.kr/ 공공데이터 포털국가에서 보유하고 있는 다양한 데이터를『공공데이터의 제공 및 이용 활성화에 관한 법률(제11956호)』에 따라 개방하여 국민들이 보다 쉽고 용이하게 공유•활용할 수 있도록 공공데이터(Datasewww.data.go.kr공공데이터 포털사이트에 있는 오픈 API중에 "자전거 사고 다발" 오픈 API를 가져오려고 한다.  먼저 데이터찾기 > 데이터목록에서 "자전거 사고다발"이라고 검색하면 오픈 API 메뉴에 아래와 같이 JSON과 XML 확장자 카테고리의 API가 나온다. 현재는 위와 같이 API 명세서를 swagger에 연결하여 보여주는 듯 하다.API 명세서에 있는 파라미터값들을 모두 추가해줘야한다. 도로교통공단_자전거사고다발지역정보서비스 하단에 있..

기본 타입타입스크립트가 자체적으로 제공하는 타입원시타입(Primitive Type)- 하나의 값만 저장하는 타입 number//numberlet num1: number = 123;let num2: number = -123;let num3: number = 0.123;let num4: number = -0.123;let num5: number = Infinity;let num6: number = -Infinity;let num7: number = NaN;num1.toFixed(); //넘버타입의 메소드만 사용 가능 💡 이때 변수 뒤에 붙는 타입(:number)을  타입 주석 또는 타입 annotation 이라고 한다. string//stringlet str1: string = "hello";let str..