지난 강의 내용에서는 모노레포 환경을 구축하기 였다면, 이번 강의에서는 monorepo 환경에서 코딩 컨벤션과 공통 로직을 공유하는 방법에 대한 주제로 진행되었다. 모노레포는 여러개의 프로젝트를 하나의 레포에서 관리하기 때문에 코딩 컨벤션을 통일해야 한다 tsconfig 설정 공유 base가 되는 tsconfig를 만들어 놓고 각 프로젝트에서 extend 받아 오버라이딩 할 수 있는 구조로 진행할 것이다. root 디렉토리에서 tsconfig.base.json 파일을 생성한다. { "compilerOptions": { "strict": true, "useUnknownInCatchVariables": true, "allowJs": true, "skipLibCheck": true, "forceConsiste..

원티드에서 5월 프리온보딩 챌린지를 진행하여 참가하였다. 이번달 주제는 바로 monorepo와 관련된 것! 평소에 너무 궁금하고 배워보고 싶었는데 이런 기회가 오다니 ! 바로 신청했다. 이번 챌린지는 모노레포인 만큼 실습이 많았는데 환경 세팅하는 과정에서 놓치는 부분이 많았다. 다시보기로 놓친 부분도 공부하겸 블로그에 정리해 놓기로 마음을 먹었다. 모노레포 관련 아티클 사전 미션으로 모노레포와 관련된 아티클을 읽어보라고 추천해주셨는데 너무 재미있고 흥미롭게 읽을 수 있었다. 그러면서 나의 프로젝트를 잠시 회고해 볼 수 있었다. 나는 주로 멀티 레포로만 서비스를 운영했었다. 각 프로젝트가 고유 저장소를 가지므로 독자적으로 빠르게 개발을 가능했고, 각각의 프로젝트를 관리하기엔 가벼웠다. 하지만 같은 도메인의..

[ 문제 발생 ] Flutter 를 디버깅모드로 실행하는 도중에 flutter Permission denied Could not build the application for the simulator. Error launching application on iPhone 14 Pro. 라는 에러가 계속 발생했다.. 권한의 문제인 것 같아서 sudo flutter run을 해줬더니 실행됐음.! 근데 나는 vs code 에서 멋진 기능들을 사용하면서 ,, 시뮬레이터를 돌리면서 실행시키고 싶었기 항상 sudo로 할수 없었고,, 꼭 해결해야 했음!! [ 에러 내용 ] Permission denied flutter/packages/flutter/lib/src/material/bottom_navigation_bar...

WebRTC 란 ? WEB Real-Time Communication 으로 실시간 커뮤니케이션을 가능하게 해주는 기술로 peer-to-peer방식이다. peer-to-peer 방식 ? 소켓은 peer-to-peer방식이 아니다. 상대방과 내가 소켓io로 연결된 상황일 경우, 내가 상대방에게 hello라고 보내면 그 hello는 서버로 보내지고, 서버는 다시 상대방에게 hello를 전달한다. 즉 언제나 서버를 사용해야한다. 나는 상대방에게 메세지를 보내지만 사실 서버한테 메세지를 보내고 서버가 상대방한테 메세지를 보낸다. 이는 peer-to-peer가 아닌 서버에 연결되어 있을 뿐이다. 하지만 webRTC는 더이상 서버가 필요없다. webRTC는 서버가 보내고 받을 필요가 없이, 내 브라우저가 직접 상대방..

개발을 하던 도중에 CORB라는 에러를 발견했다. CORS에러는 많이 들어봤지만 CORB에러는 처음 들어봐서 이참에 공부 해보기로 한다. CORB란 ? Cross-Origin Read Blocking(CORB)의 약자로, 악의적은 의도의 웹 사이트로부터 막기위해 도움이 되는 새로운 웹 플랫폼 보안 기능이다. 민감한 정보가 포함되어 있을 수 있고, 기존 웹 기능에 필요하지 않은 경우 브라우저가 웹 페이지에 특정 교차 출처 네트워크 응답을 제공하지 못하도록 설계되었다. 예를 들어 또는 태그에서 요청한 원본 간 text/html 응답을 차단하고 대신 빈 응답으로 바꾼다. 이는 사이트 격리에 포함된 보호 기능의 중요한 부분이다. CORB가 발생 했을 때 대처 대부분의 경우 차단된 응답은 웹 페이지의 동작에 영향..

swr로 전역적인 상태 관리하기 프론트에서 데이터를 전역으로 저장하고 싶으면 리덕스가 필요하다. 하지만 리덕스에도 단점이 있다. 리덕스는 코드양이 많고, 한번 가져왔던 정보여도 컴포넌트가 마운트 될 때마다 새로 가져와야하며, 지속적으로 리덕스 로컬 스토어의 상태를 서버 상태와 맞추기 위한 동기화 작업이 필요하다. 따라서 리덕스를 사용하지 않고 그 대안으로 swr을 사용해 보고자 한다. SWR은 데이터 가져오기를 위한 React Hooks 라이브러리로 먼저 캐시(스태일)로부터 데이터를 반환한 후, fetch 요청(재검증)을 하고, 최종적으로 최신화된 데이터를 가져오는 전략이다. SWR을 사용하면 컴포넌트는 지속적이며 자동으로 데이터 업데이트 스트림을 받게 되며 그리고 UI는 항상 빠르고 반응적이다. im..

useContext는 context로 공유한 데이터를 쉽게 받아올 수 있게 도와준다. 하지만 컴포넌트 사용성의 재사용이 어려워질 수 있기 때문에 필요할 때만 사용하는것이 좋다. prop drilling을 피하기 위한 목적이라면 component composition컴퍼넌트 합성을 먼저 고려해보자. 그렇다면 리덕스랑 Context? 리덕스는 Context와 비교해서 훨신 더 풍부하고 많은 기능을 제공하기때문에 재사용성 측면 보다는 사용하고자 하는 목적에 대해 더 생각하고 무엇을 사용할지 결정하는게 더 맞는 표현 같아요 Context는 리덕스보다 가볍기 때문에 대부분에 경우 작은 프로젝트들에게 더 잘 어울린다고도 할 수 있겠지만 목적에따라 늘 그렇지 않을수도 있답니다! null이 아닐 때, context/ ..

부트스트랩의 기본 개념 : 홈페이지 전체가 12개의 컬럼으로 구성되어있다. One of three columns One of three columns One of three columns container로 한번 감싸고, row 와 col이 들어간다. 위 코드는 col 이 4개씩 할당 받게 된다. 총 도합이 12개가 된다. 뒤에 숫자를 붙여서 작성할 수 있다. col-sm-8 col-sm-4 col-sm col-sm col-sm sm은 스몰이고 , md, lg, 를 가장 많이 쓴다. 컨테이너 안에는 여러개의 줄이 포함될 수 있다. md를 사용하는 것이 좋다. 사이트 크기를 점점 줄이다가 768px이하가 되면 변화가 일어난다. 네개의 컬럼을 차지한 블럭이 일렬로 밑으로 나오게 된다. 즉 모바일 화면에서 보..