-
Chart.js 시작하기
안녕하세요, 똑똑한개발자에서 프론트엔드 개발을 하고 있는 Anne입니다. 이번에 프로젝트를 하면서 차트를 그리기 위한 용도로 Chart.js를 사용하게 되었습니다. 워낙에 기능도 많고 괜히 복잡해보여서(구현하려는 기능에 따라 뒤에 복잡한 부분이 분명 있기도 합니다만…😌) 선뜻 시작하기가 어려웠습니다. 뭐든 시작이 제일 어려운 법인데, 이번 시간에는 저처럼 차트를 ‘구현해야만’ 하는 상황에서 Chart.js를 “덜 어렵게” 시작할 수 있도록 Chart.js의 기본 사용 방법 및 커스텀을 위해 제공되는 옵션들에 대해 간단히 소개해드리고자 합니다.😺 설치하기 리액트에서 Chart.js를 사용하려면 chart.js 뿐만 아니라 리액트에서 Chart.js를 렌더링하기 위해...
-
Next.js active link 스타일링
안녕하세요, 똑똑한개발자에서 프론트엔드 개발을 하고 있는 Anne입니다. 메뉴(네비게이션)에서 현재 사용자가 들어와있는 메뉴, 즉 active link를 표시하고 싶을 때 사용할 수 있는 방법에 대해 소개해드리고자 합니다. React Router를 사용할 때는 <NavLink> 컴포넌트의 activeClassName이나 activeStyle을 사용하여 비교적 간편하게 active link를 스타일링할 수 있는데요, 이와 달리 Next.js에서는 아쉽게도 이러한 기능을 따로 제공하지는 않는다고 합니다. 이를 직접 구현할 수 있는 여러가지 방법들 중 제가 사용했던 방법에 대해 정리해보도록 하겠습니다~ 준비물 각 페이지에 공통적으로 들어가는 메뉴 컴포넌트 → MyMenu import...
-
Next.js 11!!!
안녕하세요, 똑똑한개발자에서 프론트엔드 개발을 하고 있습니다. 똑똑한개발자 지난 6월 16일 Next.js conference에서 11버전이 발표되었습니다. 퍼포먼스 최적화는 물론이고, 개발편의성을 위한 몇 가지 기능들이 추가되었는데, 중요한 부분들만 알아보겠습니다. Blog-Next.js 똑똑한개발자 프론트엔드 팀에서는 기본적으로 next.js를 활용하여 빌드하고, 프로젝트를 진행합니다. 리액트로 프로덕트를 빌드하는 방법은 CRA나 Gatsby와 같이 여러가지 방법이 있지만, SSR, SSG, ISG의 필요성 때문인지 next.js를 많이 사용하는 듯 합니다. CRA(Create-React-App), Gatsby, Next.js를 npm trends에서 비교해봤습니다. 당연히, Next.js가 압도적입니다. Next.js 는 단순한 SSR프레임워크에서 점점 SEO최적화 까지 함께 포괄하는 개념의...
-
개발자의 이스터에그, 디자이너의 이스터에그
디자이너랑 개발자가 좋아하는 달걀 레시피를 소개하는 글로 생각하고 들어오셨다면 뒤로가기를 눌러주세요. 물론 부장님 개그였습니다. 홀홀.. 진정해주세요. Easter Egg 부활절 달걀을 의미하지만 영화를 좋아하는 사람들에겐 다른 의미로 더 익숙한 단어입니다. 작품 속에 몰래 숨겨 놓은 깜짝 메시지를 의미하는 ‘이스터에그’는 Pixar와 같은 애니메이션을 통해 대중들에게 많이 알려지게 되었습니다. 이런 메시지는 단순히 영화 속에만 존재하는 건 아닙니다. 크롬에서 인터넷에 연결되지 않을 때 방향키를 누르면 시작하는 공룡 미니게임도, 잘 알려진 구글의 이스터에그 중 하나죠. 그런데 이런 이스터에그가 제품에도 숨겨져...
-
웹팩5(Webpack5)
안녕하세요, 똑똑한개발자에서 프론트엔드 개발을 하고 있는 Anne입니다. 웹팩4 릴리즈 이후 거의 2년 만인 작년 10월 10일, 웹팩5가 릴리즈 되었습니다. 아직 1년이 채 안됐는데요, 웹팩5로 넘어오면서 이전과 어떤 점이 달라졌는지 알아보겠습니다. 상당히 많은 업데이트가 있었기 때문에 General direction에 안내되어 있는 내용 위주로만 정리해보았습니다. 더 자세한 내용은 Webpack 5 release 전체 문서를 참고해주세요. 주요 변경 사항 Persistent Caching - 파일시스템 캐시를 이용한 더 빠른 빌드 웹팩5에서는 아래와 같이 미리 설정을 할 경우 파일시스템 캐시를 사용할 수 있고...
-
React-Query 톺아보기
안녕하세요, 똑똑한개발자에서 프론트엔드 개발을 하고 있습니다. 똑똑한개발자에서 사용하는 React-Query를 간단하게 소개하려고 합니다. ‘톺아보기’ 라는 말이 여전히 낯선 분들을 위해 한번 더 설명해보자면, 가파른 곳을 오르려고 매우 힘들여 더듬다 틈이 있는 곳마다 모조리 더듬어 뒤지면서 찾다 의 의미를 가진 우리말 단어입니다. 늘 그렇듯, 언제나 그렇듯 개발을 하며 겪는 모든 과정이 오류와 버그들을 ‘목표를 향해 가기 위해 매우 힘들여 더듬고, 모조리 더듬어 찾는’.. 톺아보는 과정이라고 생각합니다. 오늘은 React-Query를 톺아보도록 하겠습니다. 서버의 상태 관리를 위해 사용을 해봤지만, 많은...
-
ReactNative로 채팅 UI 구성하기
ReactNative로 채팅 UI 구성하기 해당 포스트에서는 기술적인 부분보다는 UI적인 부분에 대해 다루고 있습니다 소켓통신을 비롯한 기본적인 기술얘기는 다루지 않습니다 ! 목차 React Native에서 이미지 확대, Pinch 기능 사용하기 React Native에서 HyperLink Preview 기능 사용하기 (예시) React Native에서 이미지 확대, Pinch 기능 사용하기 아래 라이브러리를 사용하면 쉽게 해당 기능을 구현할 수 있습니다 ! https://github.com/dev-yakuza/react-native-image-modal yarn add react-native-image-modal <ImageModal resizeMode="cover" modalImageResizeMode="contain" hideCloseButton style={[styles.image, { width: layout / 2 }, { height: layout / 2 }]} source= renderHeader={(close)...
-
소켓 통신
안녕하세요, 똑똑한개발자에서 프론트엔드 개발을 맡고 있는 심재철입니다. 채팅, 주식등에서 실시간 통신에 사용되는 웹 소켓에 대해서 알아보겠습니다. HTTP HTTP의 특징을 나열해보겠습니다. 무상태성 HTTP만을 사용하면 서버는 클라이언트가 누구인지 기본적으로 식별하지 못합니다. 왜냐면 HTTP 자체에 어떤 상태가 있는게 아니기 때문입니다. 그렇기 때문에 세션쿠키, JWT등을 사용해서 해당 요청을 보낸 유저가 어떤 유저인지를 식별하게 됩니다. 비 연결성 서버와 클라이언트는 매번 통신할때마다 연결을 맺었다가 끊는것을 반복합니다. 어떤 클라이언트가 서버로 요청을 보냈을때 서버는 그 클라이언트와의 연결을 계속 유지하지 않습니다. 생각해보면 엄청나게 많은...
-
Frontend에서 State를 관리하는 방법
안녕하세요, 똑똑한개발자에서 프론트엔드 개발을 맡고 있는 심재철입니다. 오늘은 ContextAPI, Redux, Mobx를 비교하는 글을 써보려고 합니다. Context API는 왜 안쓰나요? 상태 관리 라이브러리를 사용하지 않고 리액트로만 전역 상태를 관리하려면 Context API를 사용해야합니다. 아주 소규모의 서비스라면 Context API로도 충분합니다. 하지만 사이즈가 조금만 커져도 코드가 장황해지고 관리하기가 힘들어집니다. 그 이유는, 바로 성능떄문입니다. 예를들어서, function UserProvider({ children }) { const [user, setUser] = useState(null); const PassToChild = { user, setUser }; return <UserContext.Provider value={PassToChild}>{children}</UserContext.Provider>; } 이런 유저 데이터를 관리하는...
-
React-Hooks-Form 톺아보기
안녕하세요, 똑똑한개발자에서 프론트엔드 개발을 하고 있습니다. 똑똑한개발자에서 사용하는 React-Hooks-Form을 간단하게 소개하려고 합니다. ‘톺아보기’ 라는 말을 오픈사전에서 찾아보면 가파른 곳을 오르려고 매우 힘들여 더듬다 틈이 있는 곳마다 모조리 더듬어 뒤지면서 찾다 정도의 의미로 볼 수 있습니다. 개발을 하며 겪는 모든 과정이 오류와 버그들을 ‘목표를 향해 가기 위해 매우 힘들여 더듬고, 모조리 더듬어 찾는’ 일련의 과정이라고 생각합니다. 그런 의미에서 오늘은 React-Hooks-Form을 톺아보도록 하겠습니다. 사용을 해봤지만, 많은 기능을 제공하고 있는 라이브러리이므로, 간단한 예제를 보신 후에 공식문서를 참고하시는것을 권해드립니다....
-
React-Select 라이브러리 소개
우리가 많이 사용하는 Select 라이브러리 [[React-Select 라이브러리 링크] (https://react-select.com/home)] 우리가 React에서 Select 컴포넌트를 구현할려고 할 때 에는 div를 이용해서 만들 수 있고, React-Select를 이용해서 만들 수 있습니다. 우선 div로 만든 Select 부분 코드입니다. <> <AutoCompleteInputWrap> <BoxInput placeholder="응모상품명 입력" label="응모상품명" focus={(e: boolean) => setFocus(e)} value={text.slice(0, 99)} onChange={(e: any) => { setTextLength(e.target.value?.length); setText(e.target.value); }} /> <AutoCompleteCustomText style=> {textLength}/100자 </AutoCompleteCustomText> </AutoCompleteInputWrap> <div style= > {focus && text.length > 0 && autoCompleteData.length > 0 && ( <AutoCompleteWrap> {autoCompleteData.map((cur: string,...
-
Intersection Observer API 활용해보기
Intersection Observer API 활용해보기 Intersection Observer API 정의 MDN 에서는 아래와 같이 정의하고 있습니다 *출처 Intersection Observer API는 타겟 요소와 상위 요소 또는 최상위 document 의 viewport 사이의 intersection 내의 변화를 비동기적으로 관찰하는 방법입니다. viewport : 브라우저에서 사용자에게 현재 보이는 화면을 말합니다. 즉, 내가 target으로 지정한 요소가 viewport 상에 노출되고 있는지를 감시하는 방법입니다. 예제를 따라해본다면 금방 이해하실 수 있을겁니다!🔥 Intersection Observer API를 사용할 때 어떻게 보면 생소하기도 한 이녀석은 도대체 언제 사용하는 걸까? 여러가지가 있겠지만...
-
DatePicker 라이브러리 Custom
Date Picker 라이브러리 란? [Date Picker 라이브러리 링크] 달력을 만들 수 있는 라이브러리 입니다. 현재 많은 달력을 만들 수 있는 라이브러리가 있지만 이 라이브러리가 [Demo] 페이지에 잘 나와있어서 금방 Custom을 하면서 사용할 수 있는 라이브러리 입니다. Date Picker Header Custom Date Picker 라이브러리에서는 props로 renderCustomHeader라는 props를 제공해 준다. 이 props를 이용해서 CustomHeader를 만들어볼 수 있습니다. 예제를 보면은 하나의 props에 너무 많은 코드가 들어가게 되어서 가독성이 떨어지 됩니다. 그래서 이것을 컴포넌트로 나누어서 작업을 진행을 하였습니다. Date...
-
Next와 Mobx 정리 - [커스텀]
[Next.js app & document 커스텀] Next.js에 대한 이해와 Mobx와 같은 라이브러리들을 사용해 웹을 개발하기 위한 기본 세팅 작업을 boilerplate로 만들어보는 과정에 대한 내용을 정리했습니다. 목차 Next.js 란? Next.js 시작하기 Next.js 라이브러리 세팅 Next.js app & document 커스텀 Next.js app & document 커스텀 [Github Project 링크] App 커스텀 App은 가장 최상위 컴포넌트 입니다. 아래 사항들을 커스텀할때 사용할 수 있습니다. 페이지 별로 잦은 Layout 변경이 필요할 경우 페이지가 이동 될 때 마다 State 값이 유지되어야 할 경우...
-
Next.js 코드 컨벤션
시작하며 해당 글은 똑똑한개발자 github에 있는 next-ts을 기준으로 작성되었습니다. VSCode 기준으로 설정 되었으며, 다른 IDE를 쓸 경우 ESLint와 Prettier가 다르게 보일 수 있습니다. 공통 사용 스택 - Next.js, PWA, TypeScript, styled-components, Storybook - axios 현재(글 마지막 업데이트 기준) 프로젝트 패키지 버전 { "dependencies": { "@material-ui/core": "^4.11.0", "@types/react-select": "^3.0.26", "@types/react-slick": "^0.23.4", "axios": "^0.20.0", "mobx": "^6.0.4", "mobx-react": "^6.2.2", "next": "^10.0.5", "next-pwa": "^3.1.4", "react": "^16.12.0", "react-device-detect": "^1.13.1", "react-dom": "^16.12.0", "react-flip-toolkit": "^7.0.13", "react-select": "^3.1.0", "react-slick": "^0.27.13", "slick-carousel": "^1.8.1", "styled-components":...
-
Next와 Mobx 정리 - [라이브러리 세팅]
[Next.js 라이브러리 세팅] Next.js에 대한 이해와 Mobx와 같은 라이브러리들을 사용해 웹을 개발하기 위한 기본 세팅 작업을 boilerplate로 만들어보는 과정에 대한 내용을 정리했습니다. 목차 Next.js 란? Next.js 시작하기 Next.js 라이브러리 설치 및 Bebel 세팅 Next.js app & document 커스텀 Next.js 라이브러리 세팅 [Github Project 링크] 라이브러리 설명 babel-plugin-module-resolver 아래 코드 처럼 Import path를 간단하게 만들어주는 바벨 라이브러리 입니다. // Use this: import MyUtilFn from 'utils/MyUtilFn'; // Instead of that: import MyUtilFn from '../../../../utils/MyUtilFn'; styled-components [참고] babel-plugin-styled-components...
-
Next와 Mobx 정리 - [시작하기]
[Next.js 시작하기] Next.js에 대한 이해와 Mobx와 같은 라이브러리들을 사용해 웹을 개발하기 위한 기본 세팅 작업을 boilerplate로 만들어보는 과정에 대한 내용을 정리했습니다. 목차 Next.js 란? Next.js 시작하기 Next.js 라이브러리 세팅 Next.js app & document 커스텀 Next.js 시작하기 [Github Project 링크] 프로젝트 생성 Next.js에서도 React에서 사용하는 creat-react-app과 같은 creact-next-app이라는 CLI를 제공하고 있으므로 꼭! 사용하는 것을 권장한다. 물론 메뉴얼 세팅 방법이 있지만, 다루지 않았으며, 하단에 참고 사이트를 참고 해주세요. $ npx create-next-app # or $ yarn create next-app...
-
Next와 Mobx 정리 - [알아보기]
[Next.js 알아보기] Next.js에 대한 이해와 Mobx와 같은 라이브러리들을 사용해 웹을 개발하기 위한 기본 세팅 작업을 boilerplate로 만들어보는 과정에 대한 내용을 정리했습니다. 목차 Next.js 란? Next.js 시작하기 Next.js 라이브러리 세팅 Next.js app & document 커스텀 Next.js 란? [Github Project 링크] 기본적으로는 리액트를 기반으로 한 SPA를 빠르게 빌드할 수 있도록 도와주는 프레임워크 입니다. Next에서는 많은 기능을 제공해주지만 리액트에 대한 기본적인 지식이 있는 상황이라면 client-side routing, page layout 두가지만 배우면 빠르게 Next를 사용할 수 있습니다. SSR vs CSR...