전체 글

프론트엔드 테스트를 작성하는 것은 매우 어려울 수 있습니다. 고려해야 할 사항, 선택해야 할 사항, 선택할 수 있는 경로가 너무 많습니다. 이 글에서는 더 나은 테스트를 작성하기 위한 5가지 원칙을 살펴보고 새로운 기능을 프로덕션에 적용할 수 있는 자신감을 얻을 것입니다. 시작하기 전에 이 글에서는 프론트 엔드 테스트 에 중점을 두고 있으며, React 애플리케이션 및 컴포넌트와의 상호 작용을 기반으로 설명합니다. 그럼 5가지 프론트엔드 테스트 원칙에 대해서 알아보겠습니다. 원칙 1. 사용자가 사용하는 것과 동일한 방식으로 소프트웨어를 테스트합니다. 컴포넌트가 사용자를 위해 작동하고 있다는 높은 확신을 주는 유지 관리 가능한 테스트를 작성하고 싶습니다. 그리고 프론트엔드의 경우 테스트를 위한 두 가지 대..

들어가며 Yarn berry (yarn pnp)에 대해 알게 되어 리액트 프로젝트를 yarn berry 환경으로 세팅해보게 되었습니다. 이 과정에서 여러가지 삽질을 하게 되었는데, yarn berry를 이용하여 리액트 프로젝트를 세팅하고자 하는 분들에게 도움이 되고자 세팅 방법을 공유하고자 합니다. (현 시점 22년 3월 1일 기준으로는 잘 동작합니다 ㅎ;) 문서 하단에 해당 환경으로 세팅 할 수 있는 쉘 스크립트도 공유 드렸으니, 해당 쉘 스크립트를 복사해서 사용하셔도 좋습니다. Yarn Berry란? yarn berry는 node_modules 사용 시 생기는 여러가지 문제점 (비효율적인 의존성 검색, 비효율적인 설치, Phantom dependency 등) 을 PnP(Plug n Play) 방식으로..

Vue.js 는 웹 애플리케이션 사용자 인터페이스를 빌드하기 위한 인기 있는 JavaScript 라이브러리이며 Visual Studio Code에는 HTML , CSS 및 JavaScript 의 Vue.js 빌딩 블록에 대한 지원이 내장되어 있습니다. 보다 풍부한 Vue.js 개발 환경을 위해 Vue.js IntelliSense, 코드 조각, 서식 등을 지원 하는 Vetur 확장을 설치할 수 있습니다 . 해당 포스트는 VSCode 홈페이지의 Using Vue in Visual Studio Code 문서를 번역하여 작성하였습니다. 뷰에 오신 것을 환영합니다 이 튜토리얼 에서는 Vue CLI 를 사용할 것 입니다. Vue.js 프레임워크가 처음이라면 vuejs.org 웹사이트 에서 훌륭한 문서와 튜토리얼을 ..

해당 포스트는 React Libraries To Use In 2021: 17 Top Picks 를 번역하였습니다. React는 모바일 및 웹 애플리케이션 모두를 위한 주요 UI를 만들 수 있는 JavaScript 라이브러리입니다. 다른 JavaScript 프레임워크 및 라이브러리와 원활하게 통합되며 구성 요소라고 하는 재사용 가능한 작은 코드 조각이 포함됩니다. 높은 모듈성으로 인해 React 구성 요소 라이브러리는 UI 개발을 최적화할 뿐만 아니라 극도의 유연성을 제공합니다. React 라이브러리는 기능적이고 인상적으로 보이는 응용 프로그램을 만드는 데 도움이 될 뿐만 아니라 다른 라이브러리보다 더 빠르고 쉽고 적은 코드로 만들 수 있습니다. 여기에서는 이러한 각 라이브러리를 처음부터 프로젝트에 통합하..

뒤로가기 시 페이지의 데이터가 최신화되지 않는다던가, 뒤로가기 시 문제가 있다는 이슈가 생기고 또 그 이슈가 사파리 브라우저나 IOS 웹뷰에서 발생한다는 말을 들으면 딱 생각나는 단어가 있다. (BFCache!!) "Back/Forward Cache(BFCache)"는 페이지 전체를 스냅샷 떠놨다가 뒤로가기 시 해당 스냅샷을 그대로 사용하는 캐싱 기술이며, 사파리와 파이어폭스에서 기본적으로 Enable 되어있다. 크롬에서는 현재 기준으론 기본적으로 사용되지 않고, 수동으로 켤 수는 있다. 이 글에서는 프론트엔드 개발자를 괴롭히는 BFCache가 무엇인지, 그리고 해결 방법이 무엇인지 정리하고자 한다. BFCache 란? BFCache 가 사용되는 브라우저의 경우, 다른 페이지로 이동하는 순간 기존 페이지..

이 글은 저자의 허락을 받고 "State Management Battle in React 2021: Hooks, Redux, and Recoil" 이란 제목의 글을 번역하여 작성한 글입니다. 원문 링크 : https://dev.to/workshub/state-management-battle-in-react-2021-hooks-redux-and-recoil-2am0 State Management Battle in React 2021: Hooks, Redux, and Recoil Introduction: Over the years, the massive growth of React.JS has given birth to different... dev.to 소개 수 년간 리액트의 거대한 성장은 무엇보다도 다양..

1. Discord Bot 설정 우선 Discord 계정이 있어야 하고, 본인이 관리자 권한을 가진 서버를 생성해야 합니다. 아래 디스코드 개발자 포털로 접속합니다. https://discord.com/developers/applications 먼저 디스코드 개발자 UI를 사용해서 디스코드 봇을 설정하고 봇의 토큰을 확인하겠습니다. 디스코드 개발자 포털에서 로그인 한 후, New Application 버튼을 클릭해서 새로운 어플리케이션을 생성합니다. 어플리케이션의 이름은 봇의 이름과 상관 없습니다. 봇의 이름과 어플리케이션 이름이 달라도 됩니다. 어플리케이션을 생성하면 어플리케이션 대시보드로 이동하는데, 좌측에 Bot 탭으로 이동합니다. Add Bot 버튼을 클릭해서 봇을 추가합니다. 팝업 창이 뜨면 Y..

트랜잭션이란? 데이터베이스의 상태를 변화시키기 위해 수행하는 작업의 단위입니다. 여러 개의 변경 작업 쿼리가 조합될 때 주로 사용하며, 한 개의 쿼리가 있어도 논리적인 작업 자체가 100% 적용되거나 아무것도 적용되지 않아야 함을 보장해야 할 때 사용합니다. 트랜잭션은 언제 사용할까? 여러 개의 쿼리가 일련의 과정을 통해 데이터베이스 상태 값을 변경해야 할 때, 중간에 실패해서 일부만 업데이트가 되고 일부는 작업이 실패한다면 문제가 생깁니다. 아래는 가장 많이 사용되는 예시 입니다. A가 B에서 만원을 송금을 한다고 할 때, 작업단위가 만원이 A계좌에서 출금되는 쿼리, B의 계좌로 만원이 입급되는 쿼리로 이루어져 있다고 하자. 만약 만원이 A계좌에서 출금되는 쿼리는 성공했는데, B의 계좌로 만원을 입금하..

Go 언어로 Rest API 개발 시, 구조체를 이용하여 JSON이나 XML로 직렬화하여 사용하는 경우가 대부분입니다. 구조체를 바로 직렬화 할 수 있지만, Go 언어의 경우 직렬화를 하려면 구조체 내의 필드들의 첫 글자를 모두 대문자로 써야 합니다. Tag 없이 직렬화를 하면 대문자 그대로 직렬화가 되죠. type User struct { ID int Name string Age int } func main() { user := User{ ID: 1, Name: "yeo", Age: 30, } userMarshal, err := json.Marshal(user) if err != nil { log.Fatal(err) } fmt.Println(string(userMarshal)) } 출력 결과 {"ID"..

Git 을 사용할 때, 보통 계정 설정을 Global 하게 설정해놓고 사용하실 겁니다. $ git config --global user.name "jhyeo" $ git config --global user.email "jhyeo@gmail.com" 일반적으로는 global 설정만으로 충분하지만, 경우에 따라서 프로젝트별 저장소에 따라 다른 User 정보로 Commit을 해야 할 때가 있습니다. 그런 경우 git config --local을 사용하여 해당 저장소에만 따로 설정을 해줄 수 있습니다. $ git config --local user.name "jhyeo" $ git config --local user.email "jhyeo@gmail.com" 이 경우, Local 설정이 Global 설정보다 ..