Developer, Jiyong Kim

프로젝트를 진행하면서 로컬에서는 아무런 문제가 없었는데, 꼭 서버에 올리기만 하면 아래와 같은 Websocket 에러가 발생했다. 심지어 Websocket을 쓰지도 않는데 말이다. 우선 Websocket을 쓰지도 않는데 Websocket 에러가 발생하는 이유부터 알아보자. Create React App(CRA)으로 프로젝트를 생성했건, Vite를 통해서 했건 둘 다 해당 에러가 발생할 것이다. 그 이유는 바로 두 경우 모두 HMR(Hot Module Replacement) 기능을 제공하기 때문이다. HMR은 개발 중에 코드 변경 사항을 즉시 반영하여 페이지를 새로고침하지 않고도 변경된 내용을 확인할 수 있게 해주는 기능을 말하는데, CRA는 Webpack 번들러를 통해서, Vite는 자체 개발 서버를 통..

Development/Frontend 2024. 7. 15. 15:40

React로 페이지 코드를 작성하다 보면 가장 자주 쓰는 훅 중에 하나가 바로 useNavigate다. useNavigate는 보통 아래와 같이 navigate함수를 초기화한 후 페이지 이동을 위한 함수를 정의해서 사용자를 특정 경로로 이동시키며, 코드가 직관적이라 구조를 파악하거나 작성하기가 쉽다. import React from 'react'; import { useNavigate } from 'react-router-dom'; const Example = () => { const navigate = useNavigate(); const handleNavigate = (path) => { navigate(path); }; return ( handleNavigate('/home')}> 홈페이지로 이동 ..

Development/Frontend 2024. 3. 17. 12:16

Font Awsome 라이브러리를 직접 호출해서 사용하는 것도 좋지만, 한 번 패키지를 설치해서 사용해보고 난 후로는 이 방식이 더 편하다. 다만 매번 검색하고 적용하는 것이 번거로워서 아예 글을 작성해두려고 한다. 우선 기본 패키지를 설치한다. 이 때 Fontawsome이 아니라 Fortawsome이라는 점에 주의하자. 패키지 이름은 Fortawsome이다. npm i @fortawesome/fontawesome-svg-core 다음은 아이콘 관련 패키지를 설치한다. Font Awsome 아이콘은 카테고리별로 나뉘는데, 그 중에서 나는 Solid와 Regular만 설치한다. 만약 Light나 Brands 카테고리를 사용하려면 얘네도 같이 설치해주면 된다. npm i @fortawesome/free-so..

Development/Frontend 2024. 3. 14. 01:09

Bootstrap은 컴포넌트 기반의 CSS, JS 프레임워크이고, Tailwind CSS는 Utility-First 컨셉의 CSS 프레임워크이다. 무슨 차이인가 하면, 아래 코드를 보면 한 눈에 알 수 있다. 클릭하세요 위 코드에서 보이는바와 같이 Bootstrap은사전에 정의된 클래스를 사용하여 컴포넌트 위주의 스타일을 빠르게 적용할 수 있다. 클릭하세요 Tailwind CSS는 이런식으로 Utility 클래스를 조합하여 개별적인 속성에 대해 스타일을 지정하기 때문에 더 유연하고, 커스텀 하기가 용이하다. Bootstrap이 익숙하고 편해서 계속 사용하고 있었는데, 예시 코드를 보니 Tailwind CSS가 더 활용성이 높은 것 같다. 시간이 없고 디자인이 크게 중요하지 않은 프로젝트라면 Bootstr..

Development/Frontend 2024. 3. 12. 22:14

아토믹 디자인이란, UI를 구축할 때 작은 컴포넌트(Atoms, Molecules, Organisms)부터 시작하여 이를 조합해 Templates를 만들고, 마지막으로 Templates 위에 실제 컨텐츠를 넣어 Pages를 구성하는 방식을 말한다. 우선 각 요소에 대해 살펴보자. Atom The basic building blocks로 정의되며, 예를 들어 Input Text field와 Button이 있다. Molecule Groups of atoms, The smallest fundamental units로 정의되며, 예를 들어 Input Text field와 Button을 조합하여 Search Form이라는 Molecule을 만들거나, Logo Icon과 Button들을 조합하여 Navigtion ..

Development/Frontend 2024. 3. 12. 20:15