Axios는 전 세계에서 가장 사랑받는 HTTP 클라이언트 라이브러리다. Axios는 Vue에서만 사용되도록 만들어진 라이브러리가 아닌 자바스크립트 라이브러리이기 때문에 한번 사용법을 익혀둔다면, Vue로 작성된 프로젝트뿐 아닌 다른 프로젝트에서도 유용하게 사용할 수 있기 때문에 익혀놓는 것이 좋다. Vue CLI를 사용하여 프로젝트 진행시, npm 을 사용하면 간단히 Axios를 설치할 수 있다. npm install axios --save **Bower는 FE웹개발에 사용되는 패키지 관리 도구로, FE패키지 설치와 관리에 중점을 둔다. 반면, NPM은 Node.js 생태계에서 사용되는 패키지관리 도구로, 서버측 Javascript 개발에 사용되는 패키지를 설치하고 관리하는 데 중점을 둔다. Axios..
JWT (JSON Web Token)는 인증과 정보 교환을 위한 토큰 기반의 인증 방식입니다. 그러나 JWT에는 몇 가지 단점이 있을 수 있습니다: 토큰 크기: JWT는 페이로드에 인증 및 클레임 데이터를 포함하므로 토큰의 크기가 상대적으로 크게 될 수 있습니다. 이는 네트워크 대역폭을 낭비하고, 요청 및 응답 시간을 증가시킬 수 있습니다. 토큰 저장: JWT는 클라이언트 측에서 토큰을 저장하는 것이 일반적입니다. 이로 인해 토큰이 취약한 저장소에 노출될 수 있으며, 토큰을 안전하게 관리해야 합니다. 토큰을 탈취당하면 해커가 해당 토큰을 사용하여 인증되어 보안 위험이 발생할 수 있습니다. 세션 관리: JWT는 토큰 자체가 상태 정보를 포함하므로, 서버 측에서 세션을 관리하지 않아도 된다는 장점이 있지만,..
jQuery는 로 설치한 곳 하단에서 사용 가능 거의 모든 자바스크립트 라이브러리는 끝나기 전에 넣는 것 권장_ 페이지 로드 성능때문
class 부착식으로 개발하는 것 - 애니메이션 추가가 쉬움 - 나중에 재사용 편리 - 버튼 한번 더 누르면 숨기기? - 버튼 누를 때 show가 있으면 제거해주셈~ or 버튼을 짝수번 누르면 해당 class 제거해주셈~ 등으로 짜면 됨 cnt=0; document.getElementsByClassName('navbar-toggler')[0].addEventListener('click', function(){ cnt++; if(cnt%2===1){ document.getElementsByClassName('list-group')[0].classList.add('show'); }else{ document.getElementsByClassName('list-group')[0].classList.remove(..
Why Function Component? class component가 유행처럼 쓰이고 있다가, 갑자기 function component가 대두됨 함수형으로 만드는 게 좀 더 직관적 예전에는 왜 함수형 컴포넌트를 사용하지 않았음? LifeCycle 컴포넌트가 화면에 렌더링되고, 빠져나오는 것 화면 내에서 컴포넌트의 변화를 캐치해야함 Component Render 시점, re-render 시점을 고려하는 게 거의 불가능했음 React Hooks a라는 action이 실행될 때 a와 같이 실행되는 함수를 지정하는 것. 함수형 컴포넌트가 실행되는 속도가 좀 더 빠름 단순히 장황하다의 문제가 아니라, 안정적인 코드를 만들어나가는 데에 도움이 됨 Hooks는 함수로 뺄 수 있음 useEffect 하나의 비즈니스..
why React? 렌더링, MSA 아키텍처처럼 큰 단위의 FE개념에 대해 접근 요즘 유행하는 기술들 리액트를 왜 씀 ? 대부분의 기업에서 리액트를 씀 강력한 커뮤니티: 단순히 사용자가 많은 것 뿐만 아니라, Facebook이 사용중 > 본인들의 서비스를 만들 때 React를 쓰기 때문에 망하진 않을 것이다. 확장성 고려 가능: React를 사용한 3rd-party Library 많음 Next Gatsby 등 React Native의 존재 React 문법으로 되어있음 React만 배워도 React Native(앱)까지 할 수 있음 React 시장 자체를 확장시킴 경쟁 상대의 부재 Angular, React, Vue, Svelt Angular(Web Application 자체에 포커싱) 관점 자체가 Rea..
MSA : 서비스 단위로 나오는 것 MFA > MSA > WEB /APP 1. 웹에서 사용하는 포맷, 앱에서 사용하는 포맷 모두 다름 MSA들이 MFA를 직접 가리키는 게 아니라, API를 가리킴 만들어준 형태대로만 API를 사용 서비스 단위로만 제품을 만듦 MFA, BFF BFF: 서비스들 여러 개 찌르면서, 서비스 구현하기 위해 필요한 API converting들 수행 100만이라는 데이터를 줬는데, 웹에서 보여줄 때에는 포매팅을 해서 보여줘야함 MSA에서 포매팅 해서 내려준다. 여러 서비스에 걸쳐서 내려줌 web에서 포매팅해줄 수도 있고, API에서 포매팅 해줄 수 있음 API가 굳이 포매팅을 해줄 필요는 없음 field를 숫자, string 둘다 만들면 API가 관리해야하는 값이 더 늘어나는 격 ..
격리 각 서비스가 살든 죽든 각자 도생하는 것 MSA에서 가장 중요한 포인트 결제 상품 장바구니 결제 페이지 => 결제, 상품, 장바구니 모두 찌르면, 한 도메인에서 사고가 나면FE 전체가 죽는 사고가 발생함 FE는 API 없이 예외처리가 힘들기 때문 FE도 결제, 상품, 장바구니를 각각 만들자! MFA 결제 FE 상품 FE 장바구니 FE FE도 배포 주기가 많아짐 > 단점 결제했으면 결제에만 영향이 가지, 상품이나 장바구니엔 영향X 결제페이지 구성: 다양한 방법 iFrame 사용하면 좋음 Page.html > iframe이용해서 결제/상품/카드 가져올 수 있음 문제 UX적인 측면 결제 페이지에 들어갔는데 결제가 죽어서 안되는 상황에서, 결제 페이지에 상품, 카트 페이지가 뭔 소용인가? 개발자가 많이 필..
Micro Service Architecture 1. MSA라 부르는 아키텍처를 왜 사용? 반의어: 모놀리틱 아키텍처 한 서비스 안에 모든 게 다 들어가 있음 상품상세 상품 정보 결제 장바구니 기타 등 구현의 속도는 빠른데, codebase가 커짐. 스파게티 코드들이 많아질 가능성 높음 결제를 어디까지 봐야돼? 이미 이해할 수 없는 수준으로 커짐 결제를 구현한 사람이 퇴사를 하면, 결제는 blackbox가 되어버림 어디까지가 결제 영향권인지 모름 A가 죽으면 b, c, d 전체가 다 죽음 초기 스타트업에 적합 => MSA에 비하면 훨씬 빠름 MSA 상품 서비스 결제 서비스 장바구니 서비스 기타 서비스 장점 관심사 분리 Layer 별로 격리가 됨 서비스 사이의 인터페이스가 필요하지만, 기본적으로는 인터페이..
서버 > 클라이언트 > 유저: 타이밍 중요 뉴스 기사, 상품 소개페이지 : 자주 바뀌지 않고, 자주 업데이트 되지 않고, 한번 컨텐츠가 나오고 나면, 계속해서 렌더링 하는 것. => 자주 update됨 API > DB 접근 자체를 줄일 수 있는 방법이 있지 않을까? > SSG 탄생: 사이트를 빌드하는 시점에 미리 html을 생성함 html을 다 만들어놓고 미리 만들어놓은 정적 사이트를 유저에게 전달함으로써 사이트를 사용하게 됨 API 접근하는 비율: 사이트 생성 시에만 접근하게 됨. 다른 방식보다 API 접근에 대한 부하 자체가 줄어듦 빌드 > html, css, js > s3, cdn에 올림 > user에 그대로 내려줌 이미지, 비디오 같이 정적 컨텐츠 내려줄 때 cdn내려줌 > 컨텐츠 딜리버리에 초점..
CSR SSR 기준 : 콘텐츠를 어디서 만들어 내느냐 클라이언트 서버 용도 웹컨텐츠가 많을 때 과정 html > js해석 > dom > render tree > layout > layout > paint > render server > db > api > data > html 장점 실시간성 보장 특정 부분에서 재렌더링 가능 SSR가 훨씬 빠름_컴퓨팅 파워가훨씬 좋기 때문 next.js node template engine csr 브라우저에서 js파싱 > dom 그림 > google 검색엔진이 체감하는 속도대로 상위노출을 시켜주기 때문에 SSR을 이용할 경우, 성능에 이점이 있는 SEO 전략에 좋다. React React DOM : React + dom 연결 React Hydrate 사용해야 함 NEXT...
npm i -g @vue/cli npm notice npm notice New major version of npm available! 8.19.3 -> 9.2.0 npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.2.0 npm notice Run npm install -g npm@9.2.0 to update! npm notice npm ERR! code EACCES npm ERR! syscall mkdir npm ERR! path /usr/local/lib/node_modules/@vue npm ERR! errno -13 npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/..