본문 바로가기
반응형

웹개발7

리액트 학습에 대한 회의가 밀려온다 리액트는 굉장히 자유롭다는게 장점이다. 그리고 가장 큰 단점이기도 하다. 리액트라는 라이브러리 자체는 사실 몇 가지 주요 개념만 이해하면 어느정도 간단한 것들을 만들 수 있다. 익숙해지면 꽤 쉽다, 편하다는 느낌도 받을 수 있다. 그런데 이게 컴포넌트가 좀 많아지고, 페이지를 넘나들면서 상태를 공유해야 한다거나, 스타일을 입히더라도 CSS-in-JS를 사용할 것이냐, 순수하게 CSS만 사용할 것이냐 혹은 tailwindcss와 같은 것을 사용할 것이냐 등등 선택지들이 발생할때 굉장히 힘들어진다. nextjs로 건너가서 SSR관련하여 다른 라이브러리와 충돌을 겪는 상황에서는 해법도 찾기 어렵거니와, 아예 라이브러리를 뜯어서 해결하라는 식으로 내주는 답은 따라갈 엄두가 안난다. 완벽한 것은 없고 뭐든지 장단.. 2022. 8. 31.
블로그 키워드는 본문에 몇 번이나 반복되는 것이 좋은가? 블로그 키워드에 신경을 쓰기 시작한지 얼마 안되다보니, 이런 저런 내용들을 찾아보면서 얼마나 자주 언급되는 것이 좋은지에 대한 이야기들이 자주 보였습니다. 그런데 무언가 정답처럼 내세워지는 것들이 항상 보면, 그때는 맞고 지금은 틀리다로 귀결되는 경우가 많아서 이걸 무조건 수용하기에도 좀 무리가 있다고 느껴지는게 사실입니다. 1,000~1,500자 기준 4~5회 정도 반복되는 것이 좋다고 하는데, 문제는 지금도 계속해서 검색엔진들의 알고리즘은 바뀌고, 이게 지금은 맞을 지 몰라도 나중엔 어떨지 모른다는게 문제겠죠. 그래도 본문에서 너무 과도하게 키워드가 언급되는 것은 어뷰징으로 간주될 수 있어서 조심해야하는 부분인건 맞습니다. 그런 부분에서 제가 쓴 원고가 어뷰징으로 오해받지 않으려면 어떻게 해야할까 고.. 2022. 8. 18.
컬러 팔레트를 만들어주는 도구 - Smart Swatch 컬러 팔레트는 최근에 웹을 만들때 사용 빈도가 제법 높기때문에, 생성을 도와주는 편리한 도구들이 많이 나와 있습니다. 피그마를 사용할때도 컬러 팔레트를 생성해주는 플러그인들이 많아서 요긴하게 사용하곤 했었죠. 그런데 막상 디자인 작업이 끝나고 퍼블리싱을 할때 일일이 컬러 팔레트를 변수로 만들거나 그럴때 좀 번거롭죠. 물론 Tailwindcss나 Bootstrap같은 CSS 프레임워크를 사용하게 된다면, 이미 잘 만들어진 컬러 팔레트들이 있기 때문에 해당 부분만 잘 활용해도 무난하게 퍼블리싱 작업을 진행할 수 있습니다. 하지만 그런 컬러 팔레트들을 직접 손쉽게 생성할 수 있다면 얼마나 좋을까요? 저는 tailwindcss를 좋아하긴 하지만, 주어진 컬러 팔레트만 사용하다보면 아무래도 색상이 좀 성에 안찰때.. 2022. 8. 16.
헤드리스 커머스(Headless Commerce) ,헤드리스 CMS 새로운 커머스 트렌드, 헤드리스 커머스 많은 브랜드들이 쇼핑몰을 구축하기 위해서 카페24, 메이크샵, 고도몰, 쇼피파이와 같은 쇼핑몰 솔루션을 이용하고 있어요. 솔루션을 기반으로 하기 때문에 쉽고 빠르게 쇼핑몰을 만들 수 ... www.i-boss.co.kr 아이보스에서 Headless Commerce라는 개념을 들고와서 소개하는 글을 보았는데, 사람들이 생각보다 관심을 많이 갖고 있는 것 같습니다. 표현이 거창해서 그렇지 백엔드와 프론트엔드를 왜 분리하는지에 대해 생각해보면 쉽습니다. 예전에는 그냥 서버에서 HTML 문서를 만들어서 뿌리는 방식으로 서비스해도 무리가 없었지만, 이제는 핸드폰으로도 봐야되고, 스마트 워치, 인공지능 스피커 등 다양한 디바이스를 통해서 서버의 자원을 끌어다 써야합니다. 메세.. 2022. 8. 9.
Next.js 삽질 후기 - Toast UI Editor, TipTap, Quill 에디터 실패기 웹퍼블리싱만 하던 놈이 개발을 해보겠다고 호기롭게 덤빈 것이 후회되는 상황이 많이 발생하고 있는데, 그 중에 제일 장벽이 크게 느껴지는게 텍스트 에디터를 삽입하려다 실패한 것들입니다. Next.js는 SSR이 장점인 동시에, SSR때문에 초래되는 문제들이 있습니다. 리액트는 보통 CSR을 기본으로 돌아가고 있다보니 텍스트 에디터들이 굳이 SSR을 지원할 이유도 없고, 그러다보니 Next.js에 쉽게 붙이기가 어렵습니다. Dynamic import는 물론이고 이미지 업로드 기능이라도 붙여볼라치면 아주 지저분해지기 쉽상이죠. 이미지를 붙이는 가장 쉬웠던 방법은 Cloudinary 플러그인입니다. How to Serve Videos in Next.js Web Apps With Cloudinary Learn h.. 2022. 8. 3.
Hover, Active, Focus, Disabled 상태에 따른 CSS 버튼 디자인 보통 CSS 프레임워크들을 사용할 경우 버튼에 대한 상태를 다양하게 준비하고 있어서 별도로 만들 필요가 없는 경우가 많습니다. 하지만, 직접 버튼을 만듦으로써, 각 상태에 따라 어떤 애니메이션이나 기능적인 부분들을 재현할 수 있는지 볼 수 있다는 점이 학습에 도움이 되기때문에, 한 번쯤 만들어보는 것이 좋다고 생각합니다. 최근엔 모바일에서 사용이 많아진 관계로 버튼은 기본적으로 화면상에서 최소한 7mm x 7mm - 이건 조사하는 곳마다 다른데 10mm x 10mm을 기준 잡는 곳도 있고 천차만별 - 크기를 차지해야한다고 하는데, 이 크기를 px로 변환하면 대략 44px 정도의 크기를 권장합니다. 버튼 높이가 대략적으로 44px 이상이면 터치하는데 큰 무리가 없다는 이야기죠. 버튼을 디자인 할때 단순하게.. 2022. 8. 2.
반응형