2023년 3월 프론트엔드 주요 기술 소식 정리

네이버 FE News는 네이버 FE 엔지니어들이 엄선한 양질의 FE 및 주요한 기술 소식들을 큐레이션 해 공유하는 레포입니다. 소식 중에 읽어볼 만한 내용을 요약 정리했습니다. - 그래서, core-js의 다음은 어디죠? https://github.com/zloirock/core-js/blob/master/docs/2023-02-14-so-whats-next.md 구형 브라우저에서 최신 자바스크립트 기능을 사용할 수 있도록 하는 데 사용되는 오픈소스 자바스크립트 라이브러리인 Core-js는 개발자 데니스 푸쉬카레프(Denis Pushkarev) 한 명에 의해 유지되고 있습니다. 최근 푸쉬카레프는 GitHub에 재정적 지원을 요청하는 글을 남겼습니다. core-js는 Apple, Netflix, Spotify와 같은 인기 웹사이트에서 널리 사용되고 있습니다. 한 달에 250,000,000번의 다운로드와 190만 개의 GitHub 레포지토리와 종속성이 있음에도 불구하고 많은 개발자가 Babel이나 다른 트랜스파일러를 통해 core-js를 간접적으로 사용하고 있다는 사실에 대해서는 잘 알지 못합니다. 푸쉬카레프는 매일 core-js를 유지보수하는 데 많은 시간을 쓰고 있으며, 새로운 메인테이너를 찾는 데 어려움을 겪어 풀타임 근무를 중단하고 러시아로 돌아가 단기 일자리를 통해 생계를 유지하면서 프로젝트 작업을 계속하고 있다고 합니다. - 공식 문서에 Create React App 대신에 Vite를 권장하자는 PR이 올라왔다 https://github.com/reactjs/reactjs.org/pull/5487#issuecomment-1409720741 React의 공식 문서의 추천 도구로 시대에 뒤처진 CRA 대신 Vite로 대체하자는 PR이 올라왔습니다. 이에 대해 리액트 메인테이너 Dan Abramov의 답변에서 Create React App의 미래에 대한 다섯 가지 옵션을 제시합니다. 이 옵션에는 처음부터 새로운 프레임워크를 만드는 것, Create React App을 더 이상 사용하지 않고 Vite 템플릿을 유지하는 것, Create React App을 강조하지 않고 React 프레임워크를 제안하는 것, Create React App에서 단일 프레임워크를 사용하도록 하는 것, Create React App을 권장 프레임워크 목록을 제안하는 런처로 전환하는 것 등이 있습니다. 저자는 팀이 옵션 5로 기울고 있으며 계획을 구체화하기 위해 더 자세한 제안을 할 것이라고 얘기합니다. 앞으로의 계획은 Create React App을 런처로 전환하여 선별된 프레임워크 목록을 제안하는 동시에 이전 워크플로를 위한 탈출구(기존 CRA 방식)를 남겨두는 방식을 고려중이라고 합니다. - 2023 UX/UI 디자인 트렌드 https://medium.com/@kirantomake.9/2023-ux-ui-design-trends-e38523604c0b 아래는 2023년 UX/UI 디자인 트렌드에 대한 예시들입니다. 흥미로운 점은 트렌드의 일부가 2021년의 트렌드와 비슷하며, 이는 트렌드를 발표하는 주체마다 해석이 다르기 때문입니다. 새로 추가된 내용과 작년에 비해 변화된 흐름을 파악하는 것이 중요합니다. 예시는 다음과 같습니다. Dark-Anti Modes, Custom and Animated Cursors, Mobile First Design/Approach, Advanced Micro-Interactions, 90s Retro Style, Minimalism, Immersive Parallax Scrolling, 3D Interactive Objects. - CSS 네스팅을 경험해 보세요 https://webkit.org/blog/13813/try-css-nesting-today-in-safari-technology-preview/ 작년 12월경에 CSS Working Group에서 CSS 네스팅(중첩) 문법에 대한 의견을 받았었는데요. 크롬과 사파리에서 가장 투표를 많이 받은 세 번째 옵션을 기반으로 구현을 완료했으며 현재 프리뷰를 진행중이라고 합니다. 프리뷰는 Safari 기준으로 Safari Technology Preview 162 버전에서 확인해볼 수 있습니다. 새 옵션에 대한 내용을 요약하면, CSS 중첩은 Sass와 동일하게 동작하지만, 중첩된 셀렉터가 항상 기호(., #, :, *, +, >, ~ 등등)로 시작해야 한다는 한 가지 규칙이 붙습니다. Sass와 달리 이러한 제한이 붙는 이유는 브라우저 파싱 엔진의 한계 때문이라고 합니다. - 정렬이 보기보다 어려운 이유 https://www.getgrist.com/blog/why-sorting-is-harder-than-it-seems/ ``` [10, 2, 'x'].sort() ``` 위 코드의 결과를 예측해 보실수 있으신가요? JavaScript의 정령른 적절한 정렬 함수(comparator function)을 필요로 합니다. 위 실행 결과를 통해 왜 그러한지를 알 수 있습니다. 참고로, 위 코드의 실행 결과는 실행 전과 후가 동일합니다. 이 글은 단순해 보이지만, 올바른 정렬이 보장되게 하기 위해 고려해야 할 사항들을 비교 함수를 통한 예제를 통해 설명해줍니다.