블로그

https://ui.toast.com/weekly-pick/ko_20210603 자바스크립트에서 switch (true) 패턴 사용하기 | TOAST UI :: Make Your Web Delicious! 자바스크립트에서 switch (true) 패턴 사용하기 원문: Sean Barry, https://seanbarry.dev/posts/switch-true-pattern 잘 알려져 있진 않지만 훌륭한 패턴이 있다. 필자는 Vortexa의 애플리케이션 개발팀(채용 중)에 합 ui.toast.com switch문의 식을 true로 주게 되면, 문자열이 아닌 표현식의 성립 여부로 조건을 검사할 수 있다는 내용이었다. 알아만놓고 딱히 사용하지 않은 패턴이었다. 왜 그런가 생각해보니 if / else를 가독성을..

https://ui.toast.com/weekly-pick/ko_20201110 이번에 코드스쿼드에서 투두리스트 미션을 진행하며, 초기 로딩 시 잠깐 지연이 발생하는 시간 동안 로딩 UI를 보여주면 어떨까라고 생각했었는데 생각만으로 그쳐버렸다. 하여 다음 미션에라도 구현을 해보자고 생각하며 찾아보던 중 스켈레톤 UI를 알게되고 여차해서 토스트의 포스팅까지 도달하게 됐다. 스켈레톤 UI는 프로그레스바, 로딩 UI 등을 콘텐츠를 불러오는 동안 사용자의 지루함을 줄여주는 목적을 가지고 있는 UI를 의미한다. 읽으면서 문득 이전 회사에서 간단한 스피너를 만들어서 사용했던 기억이 떠올랐다. 몇몇 API의 응답 시간이 길었기에 개선 기간 동안 잠시 사용하려던 UI였지만 막상 만들고 나서 적용했더니 클라이언트가 예상..

리액트 useEffect: 개발자가 알아야 할 네가지 팁 React useEffect: 4 Tips Every Developer Should Know 리액트 Hook에서 useEffect 함수를 어떻게 작성하면 좋을 지에 대해 짤막한 네 개의 팁을 공유하는 포스팅이다. 1. 단일 목적의 useEffect 먼저 useEffect는 단일 목적의 함수로 분리해야 한다. function App() { const [varA, setVarA] = useState(0); const [varB, setVarB] = useState(0); // 이렇게 하면 안된다! useEffect(() => { const timeoutA = setTimeout(() => setVarA(varA + 1), 1000); const tim..