본문 바로가기

분류 전체보기33

React 17에서 React 18로 업그레이드하기 (프로젝트 ver2.0 만들기) 이제 때가 되었다 웹사이트를 배포한 지 어느덧 2년이 되어가고 있습니다. 2년이란 시간은 꽤 길었습니다. 새로운 버전인 React18도 출시되고, 최근에는 Next.js13까지 세상에 나왔네요. 라이브러리의 버전을 업그레이드하는 동시에 나타날 수많은 에러와 마주하기 싫은 마음에 미루고 미뤄왔는데요. 더 늦어지기 전에 프로젝트를 업그레이드해줘야 할 것 같습니다. 버전을 업그레이드하는 김에 코드를 개선하는 작업도 하려고 합니다. 언젠가 해야지 생각만 해두었던 작업들을 나열해 보았습니다. 큼지막하다고 생각하는 것들은 아래 세 가지 정도 되네요. 한꺼번에 하기보다는 시간차를 두고 하나씩 해보려고 합니다. React17에서 React18로 업그레이드하기 - 오늘 진행할 작업입니다. 부디 너무 힘들지 않기를.. N.. 2022. 11. 12.
프론트엔드 개발과 디자인 사이 - UX 엔지니어 UX 엔지니어라고? 흔한 용어는 아니지만 짐작은 가지 않는가? 이름으로 미루어보아 대략 UX 디자인과 프론트엔드 개발이 연관돼 있을 것 같다. 그게 맞다. UX 엔지니어는 디자인과 엔지니어링의 가교 역할을 하는 프론트엔드 개발자다. 이를 처음 접하게 된 것은 구글 UX 엔지니어 김종민님 덕분이다. 유튜브에서 그의 작업물을 접한 날은 머리를 한대 얻어맞은 기분이었다. 웹으로 이런 것까지 가능하구나, 이런 사람도 있구나 지평을 열어준 계기였다. 터치 디자이너(TouchDesigner)라는 소프트웨어로 인터랙티브한 애니메이션을 만든 경험이 있다. 사용자의 터치, 움직임 등의 인터랙션이 디자인을 완성시키고 동적으로 만드는 것은 참 매력적이다. 그렇지만 당시 나는 개발을 막 시작한 초심자로써 배워야 할 것들이 많.. 2022. 10. 14.
객체 지향 CSS(OOCSS, Object Oriented CSS) 애플리케이션의 규모가 커질수록 CSS를 유지하는 게 어려워질 수 있다. 간결하고 유지하기 쉬운 CSS를 작성하는 것이 필요하다. 객체 지향 CSS는 CSS 작성을 위한 방법론 중에 하나다. SMACSS, BEM과 같은 다른 방법론과 결합하여 사용할 수도 있다. Nicole Sullivan이 2008년도에 제안하였다. Java와 Ruby의 객체 지향 프로그래밍의 디자인의 원리를 적용하여 CSS의 재사용성, 확장성, 유지보수성을 향상시키고자 하였다. 단일 책임 원칙, 관심사의 분리 원칙과 같은 OOP의 컨셉을 적극적으로 도입하였다. 페이지에서 반복적으로 사용되는 비쥬얼 패턴을 객체로 정의하고 사용하는 것이 목적이다. OOCSS에는 두 가지 원칙이 있다. 구조와 외형을 분리 (Seperation of stru.. 2022. 9. 29.
Headless CMS, Strapi를 적용해본 소감 아래의 요구사항을 만족하는 서비스를 혼자서, 가능한 빠른 시일 내에 개발해야 한다면 어떻게 하겠는가? 단, 백엔드에서 처리해야 할 비즈니스 로직이 복잡하지는 않지만 어느 정도의 커스텀은 필요하다. 관리자페이지, 백엔드 개발, 커스텀 프론트엔드 프론트엔드 개발자로서 내린 결론은 Headless CMS를 도입하는 것이었다. 아직 국내에 많이 알려지진 않은것 같지만, 지난 3개월 간 Headless CMS를 도입하여 개발 및 운영을 해보니 본 프로젝트에 적합한 선택이었다는 생각이 든다. Headless CMS라는 개념을 처음 접하게 된 것은 작년쯤 Jamstack이라는 개발 트렌드를 접하게 되면서이다. 프론트엔드 개발자로서 백엔드 개발의 부담을 덜어주는 컨셉이나 서비스는 항상 관심이 간다. Jacstack도 .. 2022. 9. 28.