개발기술

[TDD] Jest 기본

✅ Jest란? Jest는 페이스북에서 만들어서 React와 더불어 많은 자바스크립트 개발자로부터 좋은 반응을 얻고 있는 테스팅 라이브러리 입니다. Jest는 라이브러리 하나만 설치하면, Test Runner와 Test Mathcher 그리고 Test Mock 프레임워크까지 제공해주기 때문에 현재 대세라고 말할 수 있습니다. ✅ Jest 학습 이유 많은 기업에서 Jest를 이용한 테스트를 진행한다는 것을 알게되었고 TDD를 사용해 개발을 진행해보고 싶었습니다. TDD를 사용하게 될 경우 생산성이 저하될 수 있다는 단점이 있긴 하지만 버그가 줄어들고 소스코드가 간결해진다는 장점이 있습니다. Test Code를 작성하여 정확성을 높이고 어떻게 하면 더 나은 코드를 작성할 수 있을지 고민하고 개선해보기 위해 ..

[React] "한입 크기로 잘라먹는 리액트" 강의 후기 (feat. 감정일기장)

인프런의 :"한입 크기로 잘라먹는 리액트(React.js) : 기초부터 실전까지" 강의를 토대로 프로젝트를 완료하고 작성한 글입니다. 리액트를 공부한 이유 Vue.js에서는 템플릿 구문을 사용하는데 React.js는 javascript 문법을 그대로 사용하여 javascript 실력을 향상시킬 수 있다 생각했습니다. React.js를 배우면 React의 파생 기술인 React Native또한 금방 익힐 수 있어 데스크탑, Android, IOS에서 동작하는 애플리케이션을 배울 수 있다라는 장점때문에 배우고 싶다 생각했습니다. 많은 기업들이 React를 사용하는 만큼 취업에도 도움이 될 것이라 생각했습니다. 프로젝트를 만들고 배운 것 ✅배포 URL : https://yerm-react-diary.web.a..

[React기반 Gatsby로 블로그 개발하기] EmotionJS

EmotionsJS란 Sass, Css같은 경우 스타일 파일을 따로 만들고, 이를 컴포넌트 파일에서 불러와 적용하는 방식 EmotionJS 라이브러리는 `CSS-in-JS` 라이브러리로, 자바스크립트 파일 내에서 스타일을 지정할 수 있는 라이브러리다 왜 EmotionJS인가? 다운로드 횟수를 보면 ㄷ부분 사용자가 `styled-components 라이브러리` 또는 `EmotionJS 라이브러리`를 사용하는데, EmotionJS 라이브러리가 월등히 높다 styled-components `장점` 템플릿 리터럴 또는 객체를 통해 손쉽게 스타일을 적용한 컴포넌트를 만들 수 있고 손쉽게 적용할 수 있다 Sass 문법을 지원하기 때문에 더 간결한 코드 작성이 가능하고, 서버사이드렌더링을 지원해주기 때문에 이를 위해..

[React기반 Gatsby로 블로그 개발하기] Gatsby Link API

Gatsby 페이지 이동 Link API를 통한 페이지 이동 를 통해서도 링크이동이 가능하지만, 새로고침이 일어남 Gatsby에서는 기본적으로 페이지 이동을 위한 APi 제공하고 있음 => Link API import React, { FunctionComponent } from 'react' import Text from 'components/Text' import { Link } from 'gatsby' const IndexPage: FunctionComponent = function () { return ( To info ) } export default IndexPage Gatsby Link API의 이점 Gatsby는 `Prefetch`를 통해 페이지에서 사용할 리소스의 로딩 속도를 높인다 그럼 ..

[React기반 Gatsby로 블로그 개발하기] GraphQL 사용

GraphQL에서의 Query 사용법 GraphQL은 필요한 데이터만 받아올 수 있다는 점에서 매력을 가진다 [입력값] query getPeopleList { allPeople { edges { node { id name } } } } [결과 반환값] "data": { "allPeople": { "edges": [ { "node": { "id": "cGVvcGxlOjE=", "name": "Luke Skywalker" } }, { "node": { "id": "cGVvcGxlOjQ=", "name": "Darth Vader" } }, ] } } } 이처럼 원하는 데이터만 가져올 수 있다 GraphiQL : 강력한 기능 Gatsby에서는 홈페이지의 메타데이터, 마크다운 관련 데이터, 이미지 데이터 등을 Q..

[React기반 Gatsby로 블로그 개발하기] Typescript 적용하기

Typescript 타입스크립트 : 자바스크립트의 동적 타입으로 인해 야기될 수 있는 문제를 해결할 수 있음 const str: string = "This is String" // Good const num: number = "This is String" // error TS2322: Type 'string' is not assignable to type 'number'. React 컴포넌트 작성할 때 타입 표시해줄 수 있는 것은 컴포넌트를 저장한 변수 뿐 리액트에서는 기본적으로 함수형 컴포넌트를 위한 타입 제공해줌 import React, { FunctionComponent } from 'react' import Text from 'components/Text' const IndexPage: Funct..