Frorong

[JS] Map이 Object보다 빠른가? 그 이유는 무엇인가? 우리 서비스에 문제가 하나 생겼다.실시간 인터렉션에 의하여 데이터들이 화면과 db에서 제거되어야 하는 것이다. 단순이 이런 상황이라면 문제 될 것이 없지만, 다뤄야 할 데이터가 적어도 10만 개 단위란 것이다. 코드가 동작하는 흐름은 대충 이러했다. 제거할 데이터들의 id를 찾는다.id들을 특정 변수에 몽땅 넣고, UI상에서 즉시 제거한다.특정 변수를 delete할 데이터의 id 배열의 형태로 서버에 요청을 보낸다. `deleteIds: string[]`요청 성공 시에 client에 존재하는 상태를 deleteIds 변수와 비교하여 업데이트한다.-> refetch 하여 서버 데이터와 100% 동기화하기엔 데이터 개수가 너무 많다.요청 실패 ..

[React] 전역 상태관리를 효율적으로 사용하기 위한 생각. react에서 가장 중요한 개념 두 개를 꼽자면 컴포넌트, 그리고 상태일 것이다. 여기서 상태는 단순한 값이 아니라, 컴포넌트의 렌더링에 영향을 미친다. 따라서 굉장히 중요하다. 여러 개의 컴포넌트에서 같은 상태를 공유하기 위해서는 prop을 통해 상태를 넘겨주어야 한다.const Component = ({prop1}) => {prop1}; 위 코드와 같은 형태로 말이다. 이제 상태를 좀 더 확장시켜 보자.const Layout = () => { const userInfo: UserInfoType = . . .; return }const Body = ({userInfo}: {userInfo:UserInfoType}) => { ..

[git] git 잘 사용하기. cmd + z는 mac os에서 변경사항을 이전으로 되돌릴 수 있는 단축키이다. 이 단축키 덕분에 무언가를 작성하거나 만들다가 실수를 하여도 되돌릴 수 있기 때문에 걱정이 없다. 우리가 개발을 할 때에도 코드를 작성하다 문제가 생기면 cmd + z, cmd +shift + z를 사용하여 되돌리고, 되돌린 걸 되돌리는 것이 가능하다. 그런데 이렇게 되돌리는 것은 부분적으로만 가능하지, 프로젝트 전체의 형상을 되돌리기는 불가능하다.이런 문제를 해결하기 위해 사용 가능한 것이 git이다. git은 프로젝트의 특정 시점을 저장하고, 원하는 시점으로 이동할 수 있게 도와준다. 마치 4차원 세계의 w 축처럼 말이다. git으로 모든 문제가 해결되었다면 다행이다. 하지만 그렇지 않다...

[AWS] route53. route53route53은 아마존에서 제공하는 확장 가능한 고가용성의 DNS 웹 서비스이다. Route 53는 사용자 요청을 AWS 또는 온프레미스에서 실행되는 인터넷 애플리케이션에 연결한다고 한다. route53으로 도메인을 구매하고 관리할 수 있다. 도메인에 대한 DNS 레코드를 생성하고 관리할 수 있다. 트래픽을 효율적으로 분산시켜준다. 헬스 체크 및 모니터링을 지원한다. 넷플릭스, 슬랙, 맥도날도 등 수많은 기업들이 route53을 사용하고있다. 그런 큰 기업들, 많은 기업들이 route53을 사용하는 이유는 무엇일까? 들어가기에 앞서 DNS에 대해 궁금한 사람은 아래 게시글을 확인하자.https://frorong.tistory.com/entry/CS-DNS%EC%99..

꾸준함의 미학. (feat. 개발자 채용시장) 들어가기에 앞서 이 글에는 필자의 개인적인 생각이 담겨 있으며, 이를 강요하려는 의도는 없음을 미리 밝힙니다.이 글의 목적은 어려움을 겪고 있는 사람들에게 다시 한번 꾸준히 할 수 있는 힘을 전달함에 있습니다.  1년은 365일이다. 1일은 24시간이며, 1시간은 60분, 1분은 60초이다. 1년은 총 31,556,926초에 해당한다. 1초는 매우 짧은 시간으로, 이 짧은 순간에 할 수 있는 극미하다. 그러나 1초가 모여 1분이 되고, 1분이 모여 1시간이 되며, 1시간이 모여 1일이 된다. 결국, 그 1일들이 쌓여 1년이 된다. 1초가 1년이 될 수 있었던 이유는 바로 꾸준함 때문이다. 무슨 일이 일어나도 1초는 흐른다. 미국이 히로시마에 원자폭탄을 투하했..

[JS] .cjs, .mjs 차이가 무엇인가요?  프로젝트를 진행하다가 이런 확장자의 파일을 볼 수 있었을 것이다. .mjs나 .cjs 말이다. 그냥 js면 js지 mjs랑 cjs는 무엇인가? 오늘은 이 의문에 대한 답을 찾아볼 것이다. 사실 이 문제는 모듈에 대해서 알아볼 필요가 있다. module자바스크립트는 초기에는 큰 파일을 필요로 하지 않았다. 자바스크립트의 역할은 웹 사이트에서 약간의 상호작용을 도와주는 정도였다. 하지만 웹의 규모가 커짐에 따라 자바스크립트의 양은 급속도로 늘어났다. 심지어 자바스크립트가 영향을 주는 범위는 브라우저를 벗어나 nodejs 등으로 확산되었다. 때문에 자바스크립트 파일을 필요에 따라 불러와 사용할 수 있는 니즈가 있었고, 현재는 모듈 기능을 사용하게 해주는 많은 ..

[FE] Vercel은 어떻게 내가 만든 서비스를 배포할까? vercel은 현시점 가장 유용한 프론트엔드 어플리케이션 호스팅 서비스이다. vercel의 장점.vercel은 정적 사이트 뿐만이 아니라 SSR이나 SSG, 다양한 프레임워크를 사용한 어플리케이션의 배포도 지원한다. vercel은 github이나 gitlab과도 통합되어 있어 변경사항을 감지하고 CD를 해준다. 분기별로 미리 보기를 제공해 주어 코드 변경사항을 쉽게 테스트할 수 있다. CDN을 통한 자동 캐시와 최적화 기능으로 전 세계 어디에서든 빠른 서비스 로드가 가능하다. vercel은 프론트엔드 호스팅 서비스이지만, 서버리스와 결합하여 풀스택 서비스 구축도 지원한다. 이런 다양한 장점 외에도 vercel은 개발적으로도 많은 지원을 하고있다..

[React] react 19 버전에 대한 고찰 Svelte, Astro, Remix와 같은 js 프레임워크들이 떠오르고 있다. 하지만, React가 근본 프레임워크인 것은 부정할 수 없다. 신규 프레임워크들도 좋은 기술들과 성능들을 갖고 있지만, React의 역사와 유저풀은 결코 무시할 수 없기 때문이다. 지난 2024 04 25일자에 React의 19 버전이 베타 릴리스 되었다. 2022년 6월 14일 출시된 React 18.2.0 버전 이후로 처음이다. React 18 버전에서는 서버 컴포넌트가 공개되며 엄청난 이목을 끌었는데.. 19 버전은 또 얼마나 대단한 업데이트를 가져왔을지 기대되었다. 자, 지금부터 React 19 버전에 대한 변경사항을 알아보겠다. React 19의 새로운 기능Hooks비..