👉🏻스크롤 메뉴(Scroll Menu) 구현해보기 안녕하세요 TriplexLab 입니다. 이번에는 흔하게 많이들 작업하시는 스크롤 메뉴에관해서 살펴보도록 하겠습니다. 👉🏻참고링크 먼저 내 글중에서 마우스 이벤트 위치 관한글이 있는데 이것 보시고 이이서 글 보시면 이해하는데 도움이 될것 같습니다. MouseEvent 위치프로퍼티 정리 🖱 Event 위치프로퍼티 정리 안녕하세요 TriplexLab 입니다. 마우스 이벤트(MouseEvent) 객체에는 마우스 포인터의 위치와 관련된 다양한 프로퍼티들이 있는데요. 주로 아래와 같은 프로퍼티들이 자주 triplexblog.kr // scrollMenu.js class ScrollMenu { constructor(el) { this.el = el; this.$$ =..

👉🏻image를 Blob 객체 url로 바꾸어 img 띄우기 오늘은 Blob 객체를 local window에서만 사용하는 url로 바꾸어 html의 img 태그의 src 속성에 사용해보는 시간을 가져보겠습니다! 👉🏻createObjectURL Blob 객체를 url로 만들때는 URL.createObjectURL() 이 메소드를 사용합니다. URL.createObjectURL() 메소드는 주어진 객체를 가리키는 URL을 DOMString으로 변환하는 기능을 합니다. 해당 URL은 자신을 생성한 창의 document가 사라지면 함께 사라집니다. 👉🏻revokeObjectURL createObjectURL를 통해 만들어진 url는 해당 브라우저가 존재한 상태에서 revokeObjectURL 메소드로 url을 ..

Web Component 는 복잡해진 마크업 요소들을 코드의 충돌없이 재사용 가능하고, 캡슐 화 시키기 위한 목적으로 만들어 졌습니다. WebComponent 의 장점으로는 아무래도 웹표준을 따르는 만큼 어떤 FE 프레임워크나 라이브러리를 사용하더라도 공유, 조합이 가능하다는 것 입니다. 캡슐화 되어있는 Web Component 는 현재 사용중인 테마, 프레임워크로 부터컨텐츠를 보호 할 수 있으며, 잘 만들어진 디자인 시스템으로 무장된 Web Component 는 재사용 할 기회가 굉장히 많아 집니다. 단점으로는 현재 나와있는 수 많은 프레임워크와 라이브러리의 데이터 관련 API 작성과 비교해서 Web Component 를 순수하게 만들때는조금 장황하고 복잡할 수 있습니다. 그런 부분을 해결하기 위해 l..

Sequelize MySQL 작업을 쉽게 할 수 있도록 도와주는 라이브러리가 있는데, 바로 시퀄라이즈(Sequelize)이다. Sequelize를 사용하는 이유 시퀄라이즈를 쓰는 이유는 자바스크립트 구문을 알아서 SQL로 바꿔주기 때문이다. 따라서 SQL 언어를 직접 사용하지 않아도 자바스크립트만으로 MySQL을 조작할 수 있고, SQL을 몰라도 MySQL을 다룰 수 있게 된다. sequelize 설치 👉🏻Sequelize를 사용하기 위해 필요한 패키지들 설치 npm install mysql2 sequelize sequelize-cli sequelize-cli는 Sequelize로 데이터베이스 작업을 하기 위한 필수 요건은 아니지만 이 패키지가 제공하는 다양한 명령어를 사용해서 프로젝트를 세팅하는 것이 ..

Cafe24 restAPI docs 참고하기 Cafe24를 활용해야 할 상황이 왔다. 정보가 아무것도 없기에 Cafe24 API를 익히는 것이 우선이라고 판단하여 천천히 API 호출 테스트를 시도해보려고 한다. 문서를 살펴보면, 대부분 api를 호출하는데 "Authorization"이라는 헤더정보가 필수적이다. 앱 생성 부터 Authorization인증, API 호출까지 진행해보자. 👉🏻앱 생성 https://www.cafe24.com/ 대표운영자 회원가입 https://developers.cafe24.com/ 로그인 앱 관리 - 앱 등록 4. 정보 입력 App URL과 code를 확인할 Redirect URI를 넣어주고, 확인할 API의 권한을 선택해준다. 5. 하단에 인증정보탭에 있는 Client I..

👉🏻 환경: vue2 + axios 👉🏻 API : jsonplaceholder[참고링크] 간단한 TEST를 위해서 jsonplaceholder API를 사용하겠습니다. 다음과 같은 컴포넌트가 있고 /posts에 get 요청을 하고 있습니다. // src/components/home.vue {{ item.title }} 👉🏻로컬스토리지에 5분동안 캐싱하기 이렇게 API 호출해서 받아온 데이터를 로컬스토리지에 저장하고 5분동안 캐싱해보도록 하겠습니다. {{ item.title }} 로컬스토리지에 caching하기위해서 정의한 함수들 // src/lib/storageCaching.js import http from '@/api/index'; // apis호출 메소드 모음. const apis = { post..

JavaScript - 배열의 하위 배열 까지 합치는 방법 flatMap() flatMap는 배열 내부의 하위 배열을 쉽게 합칠 수 있는 유용한 메서드입니다. 이것은 API연결시 데이터가 2중배열, 3중배열으로 값들이 들어올때 유용하게 가공할수 있는 메소드 입니다. 👉🏻예시1) const alphabets = ['a', 'b', 'c']; const fruits = ['apple', 'banana', 'cherry']; const flatMappedWord = alphabets.flatMap((alphabet, index) => [alphabet, fruits[index]]); console.log(flatMappedWord) // [ 'a', 'apple', 'b', 'banana', 'c', 'che..

안녕하세요 TriplexLab입니다. vue3에서 추가된 setup function을 이용한 composition API에 대해서 살펴 보겠습니다. [링크참고] 바로 아래 예시를 보면 될것 같습니다. vue3에서 추가되었다고 하지만 vue2(^2.6.14)에서도 사용가능 합니다. 👉🏻setup() 먼저 composition API본격적으로 알아보기 전에 setup에 대해서 살펴보도록 하겠습니다. setup함수 인자로는 props로 상위 컴포넌트에서 데이터를 받을수 있습니다. 그리고setup함수안에서 가공된 데이터를 리턴하면, 다른 함수(메소드)에서 접근이 가능합니다. {{ collectionName }}: {{ readersNumber }} {{ book.title }} incresement 중요한 차이..

2022년 회고 안녕하세요 TriplexLab입니다. 오늘 2022년 제게 특별한 1년이었습니다. 2021년 12월 경에 잘 다니던 회사를 퇴사하고 항해 99의 부트캠프를 다니겠다는 다짐과, 그 외에 다른 커뮤니티 들도 참여해서 다양한 프로젝트를 경험했던 한해였습니다. 그리고 약 4개월간의 취업준비도 하면서 면접에서 여러 번 탈락을 맛보아서 낙심한 경험도 했고요🤣🤣 지금은 웃으면서 이야기할 수 있지만 그 당시에는 정말 힘들었습니다. 사람이 좋아하는 일이 있다는 게 참 감사한 일 같습니다. 그리고 나이 먹어도 내가 좋아하는 일을 지속가능하게 할 수 있는 것은 지루한 루틴에서 작은 성취감들을 느끼는 것. 그리고 그 작은 성취감을 느끼려고 끊임없이 노력하는 것. 이것이 내가 좋아하는 일을 포기하지 않게 하는 ..

✅네이버 OPEN API 사용 안녕하세요 TriplexLab 입니다. 이번시간에는 네이버 OPEN API를 사용하는 예시를 살펴보도록 하겠습니다. 그리고 CORS에 관한것도 해결해보도록 하겠습니다. 👉🏻쇼핑인사이트 분야별 트렌드 조회 저는 쇼핑인사이트 분야별 트렌드 조회를 해보도록 하겠습니다. 👉🏻환경 Front: vite, react, typescript, axios back: express, body-parser 👉🏻그림으로 이해하기 그림으로 설명하면 다음과 같습니다. 브라우저 서버, Node 서버, naver 서버 3개가 있다면 처음에 브라우저 서버에서 → Node 서버에게 요청을 보내고 → naver 서버에 요청을 또 보내어서 DB에서 데이터를 가지고 naver 서버에 응답하고 → Node 서버에..

📱 모바일 웹 앱에서 100vh이 가진 문제(윈도우창 리사이즈) 안녕하세요 TriplexLab 입니다. 오늘은 모바일 웹 앱에서 100vh이 가진 문제에 대해서 살펴보도록 하겠습니다. 이 글은 아래 글들을 참고했습니다. Avoid 100vh On Mobile Web Viewport units in CSS sound great. If you want to style an element to take up the full screen height, you can just set height: 100vh and voila - you have a perfect fullscreen element, which resizes as the viewport changes! Sadly, this is not the cas..

👉🏻반응형 이미지 비율 유지하기 바로 코드를 보면서 설명하겠습니다. padding-top에 calc을 사용해서 계산 식을 넣어서 비율 계산할수 있습니다. 참고: aria-label은 웹에 더 정확한 정보를 전달하기 위해서 사용하는 속성 & 스크린 리더를 통해 웹을 사용하는 사용자들에게 전달해야 하는 정보를 제공하고 싶을 때 사용합니다.!! 👉🏻유튜브와 같은 iframe 영상 비율도 유지 이번에는 유튜브와 같은 iframe 태그 영상 비율도 유지해보도록 하겠습니다.