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

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

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

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

Git 브랜치 - Rebase 안녕하세요 TriplexLab 입니다. 오늘은 Git 브랜치 - Rebase에 관해서 살펴보겠습니다. Rebase는 말 그대로 기준을 다시 설정할수 있는 명령어 입니다. Rebase를 사용하면 중복되는 커밋을 하나로 합칠수도 있고, 커밋 순서도 변경할수 있습니다.😃👏🏻🎯 여기서는 중복되는 커밋 메시지1~3을 합쳐서 하나의 커밋으로 만들어봅시다. 👉🏻 rebase 사용하기 3개의 커밋 메세지를 합쳐줄거라 git rebase -i HEAD~3을 실행한다. 만약에 2개의 커밋만 바꾸고 싶으면 2 를 적으면 된다. git rebase -i HEAD~3 👉🏻 합치거나 편집할 commit 선택 그러면 아래와 같은 vi 창이 뜨는데, 중복된 커밋 메시지 pick => s 로 바꾼다. 위..

API 설계에 대한 중요성 안녕하세요 TriplexLab입니다. 오늘은 API 설계에 대한 중요성 관해서 이야기를 공유하려고 합니다. 이번 글은 항해 99 7기 실전 프로젝트 5주 차를 지나면서 실제로 있었던 에피소드입니다. 먼저 API 설계라는 것은 프론트앤드 개발자와, 백앤드 개발자와의 소통을 하는데 서로 약속을 미리 정해놓는 문서라고 생각하면 됩니다. 그 문서는 다음과 같이 생겼습니다. (간단예시로 회원가입쪽 API만 가져왔습니다.) 👉🏻API를 설계할때 반드시 가독성이 좋은 딕셔너리 구조를 활용해서 만들어야 합니다. 우리팀은 처음에 API 설계를 할때 어떻게 설계를 하면 좋을지 감이 없는 상태였기 때문에 딕셔너리 구조를 사용하지 않고, data: { userName: 'TriplexLab', ge..

React Query 리액트 쿼리 안녕하세요 TriplexLab입니다. 오늘은 React Query 리액트 쿼리에 관해서 이야기를 공유하려고 합니다. 이번 글은 항해 99 7기 실전 프로젝트 4주 차를 지나면서 실제로 있었던 에피소드입니다. 먼저 React Query(리액트 쿼리)에 관한 자세한 내용은 다음 링크를 참고해주세요. [링크 참고] 👉🏻도입한 이유 저희 프론트 팀이 React Query(리액트 쿼리) 기술을 도입한 이유 중에 하나는 React Query에서 제공해주는 다양한 부가 옵션들이 많고, 소스 코드가 간결해서 유지보수에 좋을 것 같다는 판단을 하여 도입하게 되었습니다. 다양한 부가 옵션을 사용하는 입장에서는 잘 알고 사용하면 약이지만 모르고 그냥 사용하면 독이 된다는 사실을 다시 한번 ..

👉JavaScript의 자료형과 JavaScript만의 특성 이번 시간에는 JavaScript의 자료형과 JavaScript만의 특성은 무엇일까?에 대해서 살펴보겠습니다. 🎯느슨한 타입(loosely typed)의 동적(dynamic) 언어 JavaScript는 느슨한 타입(loosely typed)의 동적(dynamic) 언어입니다. JavaScript의 변수는 어떤 특정 타입과 연결되지 않으며, 모든 타입의 값으로 할당 및 재할당 가능합니다. 🎯JavaScript 형변환 자바스크립트는 타입이 매우 유연한 언어이다. 때문에 때로는 자바스크립트 엔진이 필요에 따라 ‘암시적변환’ 을 혹은 개발자의 의도에 따라 ‘명시적변환’ 을 실행한다. 암시적변환 암시적 변환이란 자바스크립트 엔진이 필요에 따라 자동으로 ..

😏Mac OS 환경 세팅 안녕하세요 이번시간에는 맥북, 혹은 IMac을 세로 장만하면 프론트앤드 개발자로서 환경세팅을 어떻게 하는지 처음부터 정리해보겠습니다. ✌️1. Xcode를 다운로드 받자 App Store에서 최신버전을 검색해서 다운받으면 된다. 근데 간혹 옛날 버전의 Xcode가 필요하다면 아래 링크에 들어가서 로그인하고 필요한 Xcode 버전을 검색하여 찾을 수 있습니다. 로그인 - Apple idmsa.apple.com ✌️2.Visual Studio Code 설치하기 Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and available on your favorite platform - Linux, ..

👉실전 프로젝트 3주차 시간이 너무 빠르게 갔다.😭 3주차 MVP개발을 하며 기술을 다뤄봤던 내용을 정리해보려고 합니다. 보통 회사에서는 FE개발자가 인프라 구축에 관해서 전혀 신경쓰지 않고, BE개발자분들이 인프라 구축을 하겠지만 저희는 그런것 구분하지 않고 공부하는 관점과, 새로운것을 경험해보자라는 마인드로 접근하여 FE, BE 모두 같이 진행을 하였습니다. 📌트러블 슈팅(FE) CI CD 적용 👉도입이유 배포 자동화를 통해 효율적인 협업 및 작업 환경을 구축하기 위함 👉문제상항 협업 시 코드 배포를 해야하는 상황이 빈번히 발생 filezila를 통한 수동 배포와 배포 이후 에러 확인되어 재배포하는 일이 잦아짐에 따라 배포에 많은 시간이 소요됨 👉해결방안 1안) Jenkins 2안) Github Ac..

🤟GitHub Action으로 AWS S3에 배포 자동화 안녕하세요 Tripexlab 입니다. 이번 시간에는 GitHub에 Action이라는 기능을 사용해서 AWS S3에 배포 자동화 하는것을 공유해보겠습니다.👍👍👏👏🎉🎉 👉S3에 웹사이트를 호스팅 할 수 있는 경우와 장점 일반적으로는 EC2에 nginx나 apache를 띄우고, static 파일을 업로드하는 식으로 배포를 하는데, 단순히 Vue.js나 React같이 SPA로 된 프로젝트의 경우는 자바스크립트만 동작하면 되기에 서버가 필요없다. 이런 경우, S3 스토리지에 올리면 서버 없이 간단히 프론트 앱을 런칭할 수 있습니다. 금액적인 측면에서도 서버를 운영하는 비용보다, S3에 정적 호스팅하는 비용이 저렴합니다. 👉GitHub Actions 란? A..