✅사이드 프로젝트 React.tsx 안녕하세요 TriplexLab입니다. 지금 저는 항해 99 7기를 끝내고 팀원 4분과 함께 사이트 프로젝트를 진행하고 있습니다. tsx으로 사이드 프로젝트를 진행하고 있는데 TS를 프젝트를 진행하는 것은 이번이 처음입니다. 지금까지 진행하면서 시행착오를 겼었는데요. 좀 정리를 해볼까 합니다. 👉🏻 tsx와 styled-components interface로 타입을 정의할 때 "옵션널한 값" 또는 "필수 값"으로 정의 할수 있습니다. 그래서 다음 같이 "옵션널한 값"으로 변경을 해줬더니, isCose 값만 props로 넘길 수 있게 되었습니다. 타입 스크립트 인강을 볼 때는 아 저런 것이 있구나 정도만 알고 있었는데, 직접 해보니 이렇게 쓰이는구나를 깨닫는 순간이었다. ..

👉🏻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..

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..

[원티드 Weak 1-1 회고] 프리온보딩 프론트엔드 코스 - 7차 👉🏻Weak 1-1 회고 안녕하세요 TriplexLab입니다. 오래간만에 글 작성하는 것 같네요ㅎ 쉴 틈 없이 달리기만 해서 번아웃이 와서 블로그 작성 및 코드 작업 모두 잠시 쉬어 답니다. 최근에는 원티드에서 주체로 하는 '프리온 보딩 프런트엔드 코스 - 7차' 참여하여 1주 차 회고를 작성해 봅니다. 매주 한번씩 회고를 작성해보도록 노력해볼게요ㅎㅎ 👉🏻팀프로젝트 원티드 프리온 보딩 선발 과제 우리 팀 과제 프리온 보딩 과정 중에서는 매번 팀 프로젝트로 기업 과제를 수행해야 합니다. 따라서 커리큘럼에 따라 지난 수업 이후에도 바로 과제가 나왔는데, 선발 시 진행했던 과제에 대한 Best Practice를 만들어오라는 것입니다. 확실히 ..

Drag & Drop Vanilla Javascript(JS 드래그 앤 드롭) 안녕하세요 TriplexLab 입니다. 🧑‍🎄🧑‍🎄 오늘은 다음과 같이 Vanilla Javascript로 Drag & Drop기능에 관해서 살펴보도록 하겠습니다. Drag & Drop Vanilla Javascript 👉HTML HTML CSS JavaScript React Vue Next JS 👉CSS body, div { margin: 0; } .container { background-color: #f3f5f7; padding: 2rem; border-collapse: collapse; } .container:nth-child(n+2){ margin-top: 1rem; } .draggable { height: 82px;..

UI/UX 디자인 아이디어 공유 Finance Mobile App by Rijal Finance Mobile App dribbble.com

🙋🏻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..

🙌형태의 변환 안녕하세요 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..

서비스 종료합니다.(2024 / 03 / 10) 그동안에 저의 스킨에 많은 관심과, 사랑을 보내주셔서 감사합니다. 사유: 정상적으로 스킨이 적용이 되어야 하는데 알 수 없는 이 유로 인해 스킨이 적용이 안 되는 이유와, 평소 티스토리 서버의 불안함(잔 버그) 등등의 이유로 인해 저의 스킨에서 문제가 있는가해서 많은 오해를 받았습니다. 이로 인해서 더 이상 유지보수하지 않기로 결정했습니다. 추후에는 다른 플렛폼에서 더 좋은 템플릿을 제작해서 공유하도록 하겠습니다. 😃😃 다시 한번 그동안에 저의 스킨에 많은 관심과, 사랑을 보내주셔서 감사합니다. TriplexLab SKIN(v1.2) TriplexLab 블로그는 2021.10.02(토)에 최초로 리뉴얼 작업이 진행되었고 현재 지금까지 운영해가고 있습니다. ..

지난시간에 이어서 이번시간에는 저번 예시 코드를 보시면 boilterplate(보일러 프레이트)가 굉장히 구조 짤게 많아요ㅠㅠ 이번시간에는 그런 boilterplate(보일러 프레이트)도 줄이고 Redux를 좀 더 편하게 잘 써먹기 위한 도구 한번 배워보겠습니다. 👉🏻Redux Toolkit 바로 Redux Toolkit이라는 패키지 입니다. Redux 를 사용하는데 되게 유용한 패키지들이 많았어요. 예를 들면 - redux-actions을 불변성 보존을 위한 immer - store 값을 효율적으로 핸들링하여 불필요한 리렌더링을 막기 위해 reselect(메모이제이션 기능 지원) - 비동기 작업을 위한 thunk 와 saga 등등 리덕스의 유효한 기능을 사용하기 위해서는 4~5개의 라이브러리를 사용해야..

👉async/await 구문의 실행 원리 이번 시간에는 async 함수가 다른 코드랑 섰여서 실행될때 모습을 살펴보겠습니다. 일단 그전에 알아야 하는 중요한 사실이 있습니다. 그건 바로 await 키워드는 async함수 안에서 사용할수 있다는 사실 입니다. 정말 그런지 한번 살펴 볼게요. 함수 앞에 붙은 async를 지우고 코드를 실행하면 다음과 같이 에러가 납니다. (await함수는 async 안에서만 실행 할수 있다고 써 있네요) 그러니깐 await 키워드는 async함수 안에서 사용할수 있다는 사실 이점 꼭 기억 해주세요. 이제 코드를 본격적으로 수정했습니다. console.log를 넣었고, 1~7까지 숫자를 넣었습니다. 여기써 있는 순서대로 각 console.log 실행 됩니다. 왜 그렇게 실행 ..

React-redux 사용법 2/3 안녕하세요. TriplexLab 입니다. 오늘은 지난시간에 이어서 이번시간에는 React-redux에 관해서 이야기를 해볼게요. 리액트에서 어떤식으로 파일을 배치하느냐 차이만 있지, 사실상 “리덕스의 내부 구조”는 같다고 생각하시면 됩니다. 그렇기 때문에 이전 글을 한번 보고 오시면 좋을것 같습니다. 자, 다음과 같은 폴더 구조를 만들고 시작합니다. 👉🏻설정하기 // src/index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import {Provider} from 'react-redux' import store from './modules..