ETC
유닉스 커맨드 라인과 그 밖에 유용한 TIP들을 공유합니다.
-
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..
Cafe24 API 인증받고 API 호출까지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..
2023.03.18 -
👉🏻 환경: 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..
localStorage에 5분동안 caching캐싱 처리히기👉🏻 환경: 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..
2023.02.18 -
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..
JavaScript - 배열의 하위 배열 까지 합치는 방법 flatMap()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..
2023.02.12 -
안녕하세요 TriplexLab입니다. vue3에서 추가된 setup function을 이용한 composition API에 대해서 살펴 보겠습니다. [링크참고] 바로 아래 예시를 보면 될것 같습니다. vue3에서 추가되었다고 하지만 vue2(^2.6.14)에서도 사용가능 합니다. 👉🏻setup() 먼저 composition API본격적으로 알아보기 전에 setup에 대해서 살펴보도록 하겠습니다. setup함수 인자로는 props로 상위 컴포넌트에서 데이터를 받을수 있습니다. 그리고setup함수안에서 가공된 데이터를 리턴하면, 다른 함수(메소드)에서 접근이 가능합니다. {{ collectionName }}: {{ readersNumber }} {{ book.title }} incresement 중요한 차이..
vue3 composition API안녕하세요 TriplexLab입니다. vue3에서 추가된 setup function을 이용한 composition API에 대해서 살펴 보겠습니다. [링크참고] 바로 아래 예시를 보면 될것 같습니다. vue3에서 추가되었다고 하지만 vue2(^2.6.14)에서도 사용가능 합니다. 👉🏻setup() 먼저 composition API본격적으로 알아보기 전에 setup에 대해서 살펴보도록 하겠습니다. setup함수 인자로는 props로 상위 컴포넌트에서 데이터를 받을수 있습니다. 그리고setup함수안에서 가공된 데이터를 리턴하면, 다른 함수(메소드)에서 접근이 가능합니다. {{ collectionName }}: {{ readersNumber }} {{ book.title }} incresement 중요한 차이..
2023.01.21 -
2022년 회고 안녕하세요 TriplexLab입니다. 오늘 2022년 제게 특별한 1년이었습니다. 2021년 12월 경에 잘 다니던 회사를 퇴사하고 항해 99의 부트캠프를 다니겠다는 다짐과, 그 외에 다른 커뮤니티 들도 참여해서 다양한 프로젝트를 경험했던 한해였습니다. 그리고 약 4개월간의 취업준비도 하면서 면접에서 여러 번 탈락을 맛보아서 낙심한 경험도 했고요🤣🤣 지금은 웃으면서 이야기할 수 있지만 그 당시에는 정말 힘들었습니다. 사람이 좋아하는 일이 있다는 게 참 감사한 일 같습니다. 그리고 나이 먹어도 내가 좋아하는 일을 지속가능하게 할 수 있는 것은 지루한 루틴에서 작은 성취감들을 느끼는 것. 그리고 그 작은 성취감을 느끼려고 끊임없이 노력하는 것. 이것이 내가 좋아하는 일을 포기하지 않게 하는 ..
2022년 회고2022년 회고 안녕하세요 TriplexLab입니다. 오늘 2022년 제게 특별한 1년이었습니다. 2021년 12월 경에 잘 다니던 회사를 퇴사하고 항해 99의 부트캠프를 다니겠다는 다짐과, 그 외에 다른 커뮤니티 들도 참여해서 다양한 프로젝트를 경험했던 한해였습니다. 그리고 약 4개월간의 취업준비도 하면서 면접에서 여러 번 탈락을 맛보아서 낙심한 경험도 했고요🤣🤣 지금은 웃으면서 이야기할 수 있지만 그 당시에는 정말 힘들었습니다. 사람이 좋아하는 일이 있다는 게 참 감사한 일 같습니다. 그리고 나이 먹어도 내가 좋아하는 일을 지속가능하게 할 수 있는 것은 지루한 루틴에서 작은 성취감들을 느끼는 것. 그리고 그 작은 성취감을 느끼려고 끊임없이 노력하는 것. 이것이 내가 좋아하는 일을 포기하지 않게 하는 ..
2022.12.24 -
✅네이버 OPEN API 사용 안녕하세요 TriplexLab 입니다. 이번시간에는 네이버 OPEN API를 사용하는 예시를 살펴보도록 하겠습니다. 그리고 CORS에 관한것도 해결해보도록 하겠습니다. 👉🏻쇼핑인사이트 분야별 트렌드 조회 저는 쇼핑인사이트 분야별 트렌드 조회를 해보도록 하겠습니다. 👉🏻환경 Front: vite, react, typescript, axios back: express, body-parser 👉🏻그림으로 이해하기 그림으로 설명하면 다음과 같습니다. 브라우저 서버, Node 서버, naver 서버 3개가 있다면 처음에 브라우저 서버에서 → Node 서버에게 요청을 보내고 → naver 서버에 요청을 또 보내어서 DB에서 데이터를 가지고 naver 서버에 응답하고 → Node 서버에..
네이버 OPEN API 사용✅네이버 OPEN API 사용 안녕하세요 TriplexLab 입니다. 이번시간에는 네이버 OPEN API를 사용하는 예시를 살펴보도록 하겠습니다. 그리고 CORS에 관한것도 해결해보도록 하겠습니다. 👉🏻쇼핑인사이트 분야별 트렌드 조회 저는 쇼핑인사이트 분야별 트렌드 조회를 해보도록 하겠습니다. 👉🏻환경 Front: vite, react, typescript, axios back: express, body-parser 👉🏻그림으로 이해하기 그림으로 설명하면 다음과 같습니다. 브라우저 서버, Node 서버, naver 서버 3개가 있다면 처음에 브라우저 서버에서 → Node 서버에게 요청을 보내고 → naver 서버에 요청을 또 보내어서 DB에서 데이터를 가지고 naver 서버에 응답하고 → Node 서버에..
2022.12.07 -
✅사이드 프로젝트 React.tsx 안녕하세요 TriplexLab입니다. 지금 저는 항해 99 7기를 끝내고 팀원 4분과 함께 사이트 프로젝트를 진행하고 있습니다. tsx으로 사이드 프로젝트를 진행하고 있는데 TS를 프젝트를 진행하는 것은 이번이 처음입니다. 지금까지 진행하면서 시행착오를 겼었는데요. 좀 정리를 해볼까 합니다. 👉🏻 tsx와 styled-components interface로 타입을 정의할 때 "옵션널한 값" 또는 "필수 값"으로 정의 할수 있습니다. 그래서 다음 같이 "옵션널한 값"으로 변경을 해줬더니, isCose 값만 props로 넘길 수 있게 되었습니다. 타입 스크립트 인강을 볼 때는 아 저런 것이 있구나 정도만 알고 있었는데, 직접 해보니 이렇게 쓰이는구나를 깨닫는 순간이었다. ..
사이드 프로젝트 React.tsx✅사이드 프로젝트 React.tsx 안녕하세요 TriplexLab입니다. 지금 저는 항해 99 7기를 끝내고 팀원 4분과 함께 사이트 프로젝트를 진행하고 있습니다. tsx으로 사이드 프로젝트를 진행하고 있는데 TS를 프젝트를 진행하는 것은 이번이 처음입니다. 지금까지 진행하면서 시행착오를 겼었는데요. 좀 정리를 해볼까 합니다. 👉🏻 tsx와 styled-components interface로 타입을 정의할 때 "옵션널한 값" 또는 "필수 값"으로 정의 할수 있습니다. 그래서 다음 같이 "옵션널한 값"으로 변경을 해줬더니, isCose 값만 props로 넘길 수 있게 되었습니다. 타입 스크립트 인강을 볼 때는 아 저런 것이 있구나 정도만 알고 있었는데, 직접 해보니 이렇게 쓰이는구나를 깨닫는 순간이었다. ..
2022.11.23 -
👉🏻Next.js + Typescript + Styled-components 직접 세팅 최근에 NextJS 공부를 시작했습니다. Next.js + Typescript + Styled-components를 한번 직접 세팅을 해보면서 궁금했던것들을 정리한 글입니다. 브이로그 잘 찾아보면 그냥 세팅하는 방법들은 잘 나와있습니다. 이 글은 NextJS 내부적으로 어떻게 돌아가는지 살펴본 글입니다. yarn create next-app --typescript 프로젝트 터미널에서 다음과 같이 명령을 작성합니다. yarn add styled-components @types/styled-components //rock_paper_scissors/src/pages/_app.tsx import { ThemeProvider..
NextJS 에서 styled-components와 함께 사용하기👉🏻Next.js + Typescript + Styled-components 직접 세팅 최근에 NextJS 공부를 시작했습니다. Next.js + Typescript + Styled-components를 한번 직접 세팅을 해보면서 궁금했던것들을 정리한 글입니다. 브이로그 잘 찾아보면 그냥 세팅하는 방법들은 잘 나와있습니다. 이 글은 NextJS 내부적으로 어떻게 돌아가는지 살펴본 글입니다. yarn create next-app --typescript 프로젝트 터미널에서 다음과 같이 명령을 작성합니다. yarn add styled-components @types/styled-components //rock_paper_scissors/src/pages/_app.tsx import { ThemeProvider..
2022.11.23 -
MacOS 터미널에서 유튜브 동영상 및 유튜브 음악 무료 다운로드 받기 안녕하세요 TriplexLab입니다. 오늘은 MacOS 터미널만으로 (무료) YouTube 4K 영상 다운로드할 수 있는 방법에 대해서 소개해드리겠습니다. 👉참고사이트 GitHub - ytdl-org/youtube-dl: Command-line program to download videos from YouTube.com and other video sites Command-line program to download videos from YouTube.com and other video sites - GitHub - ytdl-org/youtube-dl: Command-line program to download videos fro..
MacOS 터미널에서 YouTube 영상 다운로드하기(youtube-dl)MacOS 터미널에서 유튜브 동영상 및 유튜브 음악 무료 다운로드 받기 안녕하세요 TriplexLab입니다. 오늘은 MacOS 터미널만으로 (무료) YouTube 4K 영상 다운로드할 수 있는 방법에 대해서 소개해드리겠습니다. 👉참고사이트 GitHub - ytdl-org/youtube-dl: Command-line program to download videos from YouTube.com and other video sites Command-line program to download videos from YouTube.com and other video sites - GitHub - ytdl-org/youtube-dl: Command-line program to download videos fro..
2022.11.20 -
[원티드 Weak 1-1 회고] 프리온보딩 프론트엔드 코스 - 7차 👉🏻Weak 1-1 회고 안녕하세요 TriplexLab입니다. 오래간만에 글 작성하는 것 같네요ㅎ 쉴 틈 없이 달리기만 해서 번아웃이 와서 블로그 작성 및 코드 작업 모두 잠시 쉬어 답니다. 최근에는 원티드에서 주체로 하는 '프리온 보딩 프런트엔드 코스 - 7차' 참여하여 1주 차 회고를 작성해 봅니다. 매주 한번씩 회고를 작성해보도록 노력해볼게요ㅎㅎ 👉🏻팀프로젝트 원티드 프리온 보딩 선발 과제 우리 팀 과제 프리온 보딩 과정 중에서는 매번 팀 프로젝트로 기업 과제를 수행해야 합니다. 따라서 커리큘럼에 따라 지난 수업 이후에도 바로 과제가 나왔는데, 선발 시 진행했던 과제에 대한 Best Practice를 만들어오라는 것입니다. 확실히 ..
프리온보딩 프론트엔드 코스 - 7차[원티드 Weak 1-1 회고] 프리온보딩 프론트엔드 코스 - 7차 👉🏻Weak 1-1 회고 안녕하세요 TriplexLab입니다. 오래간만에 글 작성하는 것 같네요ㅎ 쉴 틈 없이 달리기만 해서 번아웃이 와서 블로그 작성 및 코드 작업 모두 잠시 쉬어 답니다. 최근에는 원티드에서 주체로 하는 '프리온 보딩 프런트엔드 코스 - 7차' 참여하여 1주 차 회고를 작성해 봅니다. 매주 한번씩 회고를 작성해보도록 노력해볼게요ㅎㅎ 👉🏻팀프로젝트 원티드 프리온 보딩 선발 과제 우리 팀 과제 프리온 보딩 과정 중에서는 매번 팀 프로젝트로 기업 과제를 수행해야 합니다. 따라서 커리큘럼에 따라 지난 수업 이후에도 바로 과제가 나왔는데, 선발 시 진행했던 과제에 대한 Best Practice를 만들어오라는 것입니다. 확실히 ..
2022.10.29 -
🙋🏻React Query 리액트 쿼리 장점 안녕하세요 TriplexLab 입니다. React Query에 대한 이야기를 다시한번 해보도록 하겠습니다. (지난번에 트러블슈팅 글을 작성했었는데 링크 참고하세요) 최근에 nomadcoder에서 "React JS 마스터클래스"라고 하는 인강을 듣고 있는데 여기서 나오는 이야기가 다음 밑에있는 코드블럭을 React Query를 쓰면 자동으로 해준다. 이 모든 것들을 우리를 위해 숨겨준다. 라고 하고 있습니다. function Coins() { useEffect(() => { (async () => { const response = await fetch("https://api.coinpaprika.com/v1/coins"); const json = await res..
React Query 리액트 쿼리 장점🙋🏻React Query 리액트 쿼리 장점 안녕하세요 TriplexLab 입니다. React Query에 대한 이야기를 다시한번 해보도록 하겠습니다. (지난번에 트러블슈팅 글을 작성했었는데 링크 참고하세요) 최근에 nomadcoder에서 "React JS 마스터클래스"라고 하는 인강을 듣고 있는데 여기서 나오는 이야기가 다음 밑에있는 코드블럭을 React Query를 쓰면 자동으로 해준다. 이 모든 것들을 우리를 위해 숨겨준다. 라고 하고 있습니다. function Coins() { useEffect(() => { (async () => { const response = await fetch("https://api.coinpaprika.com/v1/coins"); const json = await res..
2022.09.23 -
🙌형태의 변환 안녕하세요 TriplexLab입니다. 이번 시간에는 객체 혹은 문자열을 원하는 형태로 변환하는 것에 대해서 살펴보도록 하겠습니다. ✅ 객체를 문자열로 변환하기 const cartItems = [ {id: 1, item: '핸드밀', price: 40000, discount: 0,}, {id: 2, item: 'A4용지', price: 4000, discount: 0,}, {id: 3, item: '수영복', price: 120000, discount: 0,}, {id: 4, item: '색연필72색', price: 150000, discount: 0,}, ]; 👉🏻첫 번째 문제 풀이 const carItemsArray = []; for(const item of cartItems){ cons..
형태의 변환🙌형태의 변환 안녕하세요 TriplexLab입니다. 이번 시간에는 객체 혹은 문자열을 원하는 형태로 변환하는 것에 대해서 살펴보도록 하겠습니다. ✅ 객체를 문자열로 변환하기 const cartItems = [ {id: 1, item: '핸드밀', price: 40000, discount: 0,}, {id: 2, item: 'A4용지', price: 4000, discount: 0,}, {id: 3, item: '수영복', price: 120000, discount: 0,}, {id: 4, item: '색연필72색', price: 150000, discount: 0,}, ]; 👉🏻첫 번째 문제 풀이 const carItemsArray = []; for(const item of cartItems){ cons..
2022.09.17