지금부터가 반전

CS 스터디에서 sorting에 대해서 얘기를 하던 중, java에서는 sort 내장 메서드가 merge sort를 사용한다는 얘기를 들었다. JavaScript에서도 sort는 매우 자주 사용하는 메서드라, 어떤 정렬 알고리즘을 사용하는지 궁금해져 찾아보았다. 그 결과 JavaScript는 놀랍게도, 엔진에 따라서 다른 정렬 알고리즘을 사용한다는 사실을 알게되었다. ECMAscript 에 어떤 알고리즘을 써야하는지 특정하지 않았기 때문에, 브라우저마다 다른 정렬 알고리즘을 사용하는 것이다. 그래서 각 엔진은 어떤 정렬 알고리즘을 사용하는지 궁금해져 정리해보고자 했다. 1️⃣ V8 엔진 출처 - v8 기술 블로그 제일 먼저 알아볼 것은 Chrome 브라우저와 nodeJS 의 V8 엔진이다. v8 엔진은 ..

코딩을 하면서 놓치고 갈 수 없는 부분 중 하나가 바로 '재사용성'이다. 재사용성을 높이면 반복되는 코드를 줄일 수 있을 뿐만 아니라 확장성까지 높일 수 있어 추후에 작업을 해나갈 때 매우 편리하다. 이번 프로젝트를 하면서 재사용 가능한 컴포넌트 단위를 만들어서 사용 해보는데, 한 번은 그대로 재사용하였고, 한 번은 컴포넌트를 확장하여 사용하였다. 각각 어떻게 사용했는지 이 글에 적어 놓고자 한다. 여기서는 React, TypeScript, Styled-Components를 사용하였다. ✅ 1. 컴포넌트 재사용하기 위의 네 가지 버튼을 언뜻 보면 배경색이나 내부 컨텐츠가 매우 다르게 생겼다. 배경 색도 제각각이고, 내부 컨텐츠에도 어떤 것은 text만 들어있고, 어떤 것은 text와 image 도 함께 ..

프로젝트에 댓글을 정렬할 때 사용할 토글 버튼이 필요했다. 그래서 디자이너 님께서 주신 디자인을 바탕으로 슬라이드 토글 버튼을 만들어보았다. 여기서는 React, TypeScript, Styled-Components 를 사용했다. 🔥 우선 tsx 코드 부터! const ToggleButton = () => { const [latestSort, setLatestSort] = useState(true); const toggleHandler = () => { setLatestSort((prev) => !prev); }; return ( ); }; - 기본값을 '최신순' 정렬으로 할 것이므로 latestSort 라는 이름으로 state를 만들었다. - toggleHandler 함수는 latesSort의 stat..

🤔 1. redux-persist를 사용한 이유 프로젝트 중 로그인 기능을 구현하는데, 서버로부터 받아온 회원정보를 저장해야했다. 예를 들어 로그인한 유저의 username, email 등은 프로젝트 전반에 필요한 정보이다. 그렇다는 말은 데이터를 전역적으로 관리할 필요가 있다는 뜻이기도 하다. 이번 프로젝트에서는 Redux-toolkit을 사용하기로 정했기 때문에 Redux의 store에 유저정보를 저장하여 전역적으로 값을 관리하기로 하였다. 그런데 하나 문제가 생겼다. 로그인 API request에 대한 response에 담겨있는 유저 정보를 store에 저장했을 때, 직후에는 값이 관찰되지만, 새로고침을 하거나 다른 페이지로 이동했을 때 값이 사라지는 걸 확인했다. 이때 redux-persist를 ..

이번 개인 프로젝트를 진행하면서 headless CMS 인 strapi를 사용하고 있다. 백엔드 서버와 데이터베이스를 손쉽게 구축하고 관리할 수 있기 때문이다. strapi는 endpoint를 이용하여 자동으로 API를 만들어 제공하지만, 사용하다보면 API를 직접 커스텀해야하는 경우도 생기기 마련이다. 나같은 경우는 회원가입 진행 시, username과 email 의 중복 검사를 진행하기 위해 API를 커스텀하여 만들었다. 기존의 register API 에서도 중복되는 email이나 username으로 회원가입 시도 시, 다음과 같은 응답을 보내며 회원가입을 막고있다. 하지만 이렇게 되면 사용자는 회원가입 버튼을 누른 후에야 중복여부를 알 수 있어 매우 불편한 상황이 생긴다. 이 방법이 아니라면 모든 ..

🔮 1. React-DOM React는 UI를 구축하기 위한 자바스크립트 라이브러리로, React의 핵심은 바로 컴포넌트이다. UI를 구축하기 위해서 바로 이 컴포넌트를 이용하기 때문이다. 컴포넌트를 통해 사용자 인터페이스를 구성하고, 업데이트 역시 컴포넌트를 통해서 한다. React는 컴포넌트와 상태 객체를 관리하고 업데이트가 일어나면 변경 전후의 상태를 확인한다. 그리고 React는 화면에 표시되어야할 모든 정보를 React-DOM 에게 전달하고, React-DOM이 DOM을 업데이트(렌더링 및 리렌더링) 한다. //index.js import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; const r..