-
[TokTokHan.dev]ES6 문법정리
안녕하세요, 똑똑한개발자에서 프론트엔드 개발을 하고 있는 Luke 입니다. 👋 똑똑한개발자 똑똑한개발자 프론드엔드 팀은 es6를 기반으로 한 타입스크립트 언어를 활용하여 프로젝트를 진행하고 있습니다. 기존에는 ES5 문법으로 JavaScript 코드를 작성하였지만 이제는 최신 트렌드에 맞게 ES6 문법으로 코드를 작성하게 되고, es5와 비교했을때 여러 변경사항이 있습니다. 오늘 글에서는 ES6에서 새로 추가된 기능을 모두 설명하기보다는 코드를 좀 더 간소화하고, 유지보수하기 좋은 코드를 만들기위해서 자주 사용하는 기능위주로 살펴보겠습니다. ECMAScript란? ECMA스크립트(ECMAScript, 또는 ES)는 자바스크립트를 표준화 하기위해 만들어진, ECMA-262 기술 규격에 따라 정의하고...
-
cypress를 이용하여 components test 작성하기
Component Test를 작성하여 훨씬 더 간단하고 유지 관리하기 쉽고 다른 구성 요소와 함께 사용하고 재사용하기 쉬운 UI 구성 요소를 만들 수 있습니다. 이 과정에서 테스트를 작성하고, 테스트를 통과하는 코드를 작성하고, 작성한 코드를 리팩토링하는 과정을 반복하게 됩니다. 이번 글에서는 todo list 코드를 일부 작성해보겠습니다. 1. Setup Next.js 11.0.1을 사용하고 있습니다. npm install --save-dev cypress @cypress/webpack-dev-server @cypress/react html-webpack-plugin@4 webpack@4 webpack-dev-server@3 2. Opening Cypress npx cypress open 해당 명령을 이용하여 cypress test runner를 동작시키면 cypress.json 등을 생성합니다. 3....
-
Chart.js 시작하기
안녕하세요, 똑똑한개발자에서 프론트엔드 개발을 하고 있는 Anne입니다. 이번에 프로젝트를 하면서 차트를 그리기 위한 용도로 Chart.js를 사용하게 되었습니다. 워낙에 기능도 많고 괜히 복잡해보여서(구현하려는 기능에 따라 뒤에 복잡한 부분이 분명 있기도 합니다만…😌) 선뜻 시작하기가 어려웠습니다. 뭐든 시작이 제일 어려운 법인데, 이번 시간에는 저처럼 차트를 ‘구현해야만’ 하는 상황에서 Chart.js를 “덜 어렵게” 시작할 수 있도록 Chart.js의 기본 사용 방법 및 커스텀을 위해 제공되는 옵션들에 대해 간단히 소개해드리고자 합니다.😺 설치하기 리액트에서 Chart.js를 사용하려면 chart.js 뿐만 아니라 리액트에서 Chart.js를 렌더링하기 위해...
-
[TokTokHan.dev]Execution Context(실행 컨텍스트)
안녕하세요, 똑똑한개발자에서 프론트엔드 개발을 하고 있습니다.👋 똑똑한개발자 똑똑한개발자 프론드엔드 팀은 매주 월요일 오후에 javascript 기초에 대한 스터디를 진행하고 있습니다. 자바스크립트의 핵심적인 기본개념과 동작원리에 대해 스터디 구성원 한 사람이 파트 1개씩을 맡아 간단하게 발표하고 그에 대한 의견들을 공유하고 나누는 형태로 진행합니다. 첫 시간에는 자바스크립트의 ‘데이터’와 ‘불변성’에 대해 간략하게 알아보는 시간을 가졌고 이번에는 자바스크립트의 ‘실행 컨텍스트’에 대해 이야기를 나눠보는 시간을 가졌습니다. 이번 블로그 포스팅은 ‘코어 자바스크립트’를 참고하여 작성했습니다. 코어 자바스크립트 똑똑한개발자 프론트엔드 팀에서는 기본적으로 typescript기반의 리액트(Next.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최적화 까지 함께 포괄하는 개념의...
-
타입스크립트를 이용하여 리액트 프로젝트 시작하기
타입스크립트를 이용하여 리액트 프로젝트를 처음 시작할 때, 알아야하는 최소한의 내용을 다룹니다. 순서 1.Setup 2.Components 3.Hooks 4.Event 1. Setup CRA로 프로젝트를 시작한다면 손쉽게 타입스크립트를 추가하여 개발환경을 구현할 수 있습니다. npx create-react-app my-app --template typescript Next.js 프로젝트에서 Typescript를 설정하는 방법은 여기서 확인할 수 있습니다. 이제 타입스크립트를 이용하여 프로젝트를 작성할 수 있습니다. 최종적으로 .ts .tsx 파일은 트랜스파일되어 Javscript 파일로 만들어집니다. 2. Components 함수형 컴포넌트를 이용하여 다음과 같이 작성할 수 있습니다. import React from "react"; type Image = {...
-
React-Query 톺아보기
안녕하세요, 똑똑한개발자에서 프론트엔드 개발을 하고 있습니다. 똑똑한개발자에서 사용하는 React-Query를 간단하게 소개하려고 합니다. ‘톺아보기’ 라는 말이 여전히 낯선 분들을 위해 한번 더 설명해보자면, 가파른 곳을 오르려고 매우 힘들여 더듬다 틈이 있는 곳마다 모조리 더듬어 뒤지면서 찾다 의 의미를 가진 우리말 단어입니다. 늘 그렇듯, 언제나 그렇듯 개발을 하며 겪는 모든 과정이 오류와 버그들을 ‘목표를 향해 가기 위해 매우 힘들여 더듬고, 모조리 더듬어 찾는’.. 톺아보는 과정이라고 생각합니다. 오늘은 React-Query를 톺아보도록 하겠습니다. 서버의 상태 관리를 위해 사용을 해봤지만, 많은...
-
웹에서의 drag & selection
우리가 많이 알고 있는 Drag의 의미 이런식으로 마우스 드래그를 먼저 생각할 수 있고, 이렇게 생각하실 수 있습니다. 위의 사진은 정확히 Drag & Drop 할 때의 드래그이고, 두번째 이미지의 드래그는 마우스 Selection 입니다. Drag & Drop Drag & Drop은 mouse를 이용해서 특정 컴포넌트를 잡았을 때 동작이 될 수 있는 이벤트 입니다. 이 이벤트를 통해서 컴포넌트 다른 위치로 넘기게 할 수 있습니다. <p>Drag the p element back and forth between the two rectangles:</p> <div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">...
-
Next.js 프로젝트에 ESLint와 Prettier 설정하기
안녕하세요, 똑똑한개발자에서 프론트엔드 개발을 하는 이호균입니다. 들여쓰기가 맞지 않아도, 변수를 선언하고 사용하지 않아도, 모든 곳에 any 타입을 사용하여도 어플리케이션은 동작합니다. 동작하니까 문제가 없는 것 같아보이지만 사실 문제가 있습니다. 가독성도 나쁘고, 유지보수가 어렵습니다. any를 남발하였으니 compile time 잡을 수 있었던 문제들이 runtime까지 갑니다. 프로젝트에 ESLint와 prettier를 추가하여 최소한의 코드 품질과 일관된 코드 스타일을 보장하는 방법을 알아봅니다. 프로젝트 생성 // 생성 npx create-next-app <MY-AWESOME-APP> // config 파일 생성 touch tsconfig.json // 프로젝트 실행 npm run dev //...
-
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을 톺아보도록 하겠습니다. 사용을 해봤지만, 많은 기능을 제공하고 있는 라이브러리이므로, 간단한 예제를 보신 후에 공식문서를 참고하시는것을 권해드립니다....
-
리액트 어플리케이션의 상태 관리하기
안녕하세요, 똑똑한개발자에서 프론트엔드 개발을 하는 이호균입니다. 리액트를 사용하여 어플리케이션을 만들다보면 자연스럽게 상태 관리를 하게 됩니다. 대개 redux, mobx와 같은 상태 관리 라이브러리를 이용하여 전역 스토어에서 모든 상태를 관리합니다. 예를 들면 이런 것들을 스토어에 저장합니다. ui 테마 폼 입력 데이터 사이드바 상태 그 외 서버로 부터 받아온 데이터 등등 이 모든 상태를 전역 스토에서 관리하는게 적절할까요? 상태를 관리하는 더 좋은 방법은 무엇일까요? state란 무엇인가 상태 관리를 하는 방법에 대해서 이야기하기 전에, 우선 상태가 무엇인지 알아보겠습니다. React...
-
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...