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/..
eclipse와 달리 마침표로 구분되지 않으므로, 폴더 안에 폴더를 만들고, 또 폴더를 만들기를 권장
성공한 사람들은 어떻더라에 대한 일반화를 하는 것을 별로 좋아하진 않지만 서울에 집을 구하면서 문득 이렇게 살면 훨씬 발전적이겠다는 생각이 들었다. 회사까지의 거리, 집 상태, 돈.. 등 고려해야할 게 많지만 어느 것 하나는 적정선을 두고 꼭 포기해야하는 덜 중요한 가치들이 생긴다. 이때의 거의 유일한 해결책은 돈을 더 버는 것임에도 불구하고, 고만고만한 데서 더 나은 게 없을까를 고민하다보니 비본질적인 데에 소비하는 시간이 훨씬 길어지게 된다. 남들이 보기에 '왜 저런 데다 집을 구했지?' 싶은 친구가 있었는데, 한 번 집을 구했으면 더이상 집에 대해 별 고민을 안하고, 그 집에서 자기가 뽑아낼 수 있는 가치를 창출하는 것이 훨씬 더 발전적인 삶이라는 생각이 들었다. 비결은 '나는 어떤 기준에 대해 이..
마지막으로 미안하다 보고싶었다 손을 잡아주셨을 때 괜찮아지셨구나, 15년간 그래왔던 것처럼 다시 각자의 위치에서 서로 남으로 돌아간 일상이 반복되기를 희망했다. 그 순간 다른 어른들의 얼굴도 보았다. 때가 되었다는 생각. 그래서 그 분에 대한 연민이 더 들었다. 죽을 고빈데 적극적으로 병원 데려가는 사람이 하나도 없었구나. 한 차례 시간이 지나고 나라도, 지금이라도 119를 부를까 말까 했을 때 난 응급상황이 아닐 때 돈이 얼마나 드는지를 찾아봤다. 풍을 생각 못하고 더 작은 병일 수도 있는 노로바이러스를 의심했기 때문이다. 어른들이 더 지켜보겠다, 넌 방으로 들어가라 했을 때 그 말을 듣기 보다는 내가 더 밀어붙였어야 했다. 의사인 P에게 물어보면서 저혈당이 의심된다며 '그럼 어떻게 해야되냐, 꿀물이 ..
흔히 써있는 settings > build automatically 말고 edit configuration에서 다음 찾을 것
필기를 풀땐 평이해서 잘봤단 생각했는데, 실기는 예상대로 한문제도 못풀었다. 객관식 풀 때는 일단 할 만하다고 느꼈다. 제대로 준비를 못한 것 치고는 1, 2과목의 점수는 잘나온 것 같은데, 이건 당연해야 하는 일이다. SQL자격검정노트 이게 좀 많이 도움이 됐던 것 같고, 역시 헷갈리는 문법들을 잘 정리하고 있어야함을 느꼈다. 그리고 시간이 부족한 느낌은 절대 아니었다. 많은 후기들과 달리, 이번이 쉬운 시험에 속해서 그런건진 모르겠는데, 일찍 나가는 분도 꽤 있었고, 점수가 높은 건 아닌데 객관식을 다 푸는데 30분밖에 안됐던 것 같고 꼬아내는 느낌들은 아니었다. 다른 회차 시험은 다를 수도 있겠지만... 3과목, 4과목 점수는 처참한데 예상을 하긴 했으니... 일단 고급 문법을 잘 정리하고, 튜닝이..
