타인과의 협업을 좋아하는 개발자
오소현입니다.
타인과의 협업을 좋아하는 개발자
오소현입니다.
관련링크들
관련링크들
사용기술들
Vue.js
함수나 객체에 들어가는 구조에 타입을 정의함으로써 인자나 프로퍼티의 자동완성으로 개발 진행할 때 편의성을 얻을 수 있습니다. 또한 함수, 객체의 값들을 실행 전에 타입이 틀린 부분을 발견하여 실행 후에 에러를 방지할 수 있습니다.
styled-components
CSS-in-JS를 사용한 이유는 프로젝트가 UI 인터렉션 위주가 아닌 컴포넌트 위주의 프로젝트가 진행될 가능성이 커서 선택했습니다. 컴포넌트 위주의 프로젝트에서 개발 효율성을 중요시 하고, 필요한 CSS 스타일 요소만 로딩하기 때문에 사용하게 되었습니다.
ESLint
프로젝트 코드의 일관성있는 코드 작성을 위해서 사용했습니다. 잘못된 코드 혹은 컨벤션에 맞지 않는 코드를 작성하게 된다면 오류를 뱉어내기 때문에 사용했습니다. 대부분의 경우 airbnb 컨벤션을 사용합니다. 가장 유명한 코딩 컨벤션중에 하나 이기도 하고, 세부적인 것 까지 섬세하게 작성되어 있습니다.
Prettier
프로젝트 코드의 코드 포맷팅을 위해서 사용했습니다. 따옴표를 사용할 것인지 쌍따옴표를 사용할 것인지, 한 줄에 최대 몇 줄까지 적을 수 있는지, 세미콜론을 붙일 것인지 안 붙일 것인지와 같은 코드의 일관성을 지킬 수 있습니다.
Vercel
Next.JS를 만든 곳에서 만든 배포 시스템입니다. 깃허브 주소만 입력하면 바로 배포가 됩니다. CI/CD가 자동으로 구현되어 있어서 메인 브랜치에 merge, commit 됐을 때, 혹은 메인이 아닌 브랜치에서 merge, commit 시에 preview deployment를 제공하여 오류가 나는지 확인해줍니다. 또한 내부적으로 CI 파이프라인에서 에러가 나거나, 사용하지 않는 변수와 같은 실수들에 에러를 내뱉어 배포가 된 이후에 에러가 나는 것을 방지할 수 있습니다. 그리고 무료입니다.
관련링크들
사용기술들
React
UI 개발에 집중할 수 있습니다. 컴포넌트를 이용해서 재사용 가능하고, 논리적으로 파일을 나누어서 개발 진행을 할 수 있습니다. 또한 JSX 문법을 이용해서 조금 더 직관적으로 템플릿을 구성할 수 있어서 사용했습니다. 그리고 커뮤니티가 방대해서 자료 찾기도 편합니다.
React Konva
Konva는 또한 애니메이션, 전환, 노드 중첩, 계층화, 필터링, 캐싱, 데스크톱 및 모바일 애플리케이션에 대한 이벤트 처리 등을 제공해줍니다
Redux
모든 상태 업데이트를 액션으로 정의하고, 액션 정보에 기반하여 Reducer에서 상태를 업데이트하기 때문에 상태를 더욱 쉽게 예측 가능하게 하여 유지보수 측면에 긍정적인 효과를 제공해줍니다.
React-router-dom
SPA인 React에서 routing을 구현하기 위해서 사용했습니다. 라우팅을 서버에서 관리하는 것이 아닌 클라이언트가 구현함으로써 SPA가 깜빡임 없이 페이지 이동을 구현할 수 있게 합니다.
styled-components
CSS-in-JS를 사용한 이유는 프로젝트가 UI 인터렉션 위주가 아닌 컴포넌트 위주의 프로젝트가 진행될 가능성이 커서 선택했습니다. 컴포넌트 위주의 프로젝트에서 개발 효율성을 중요시 하고, 필요한 CSS 스타일 요소만 로딩하기 때문에 사용하게 되었습니다.
ESLint
프로젝트 코드의 일관성있는 코드 작성을 위해서 사용했습니다. 잘못된 코드 혹은 컨벤션에 맞지 않는 코드를 작성하게 된다면 오류를 뱉어내기 때문에 사용했습니다. 대부분의 경우 airbnb 컨벤션을 사용합니다. 가장 유명한 코딩 컨벤션중에 하나 이기도 하고, 세부적인 것 까지 섬세하게 작성되어 있습니다.
Prettier
프로젝트 코드의 코드 포맷팅을 위해서 사용했습니다. 따옴표를 사용할 것인지 쌍따옴표를 사용할 것인지, 한 줄에 최대 몇 줄까지 적을 수 있는지, 세미콜론을 붙일 것인지 안 붙일 것인지와 같은 코드의 일관성을 지킬 수 있습니다.
관련링크들
사용기술들
React
UI 개발에 집중할 수 있습니다. 컴포넌트를 이용해서 재사용 가능하고, 논리적으로 파일을 나누어서 개발 진행을 할 수 있습니다. 또한 JSX 문법을 이용해서 조금 더 직관적으로 템플릿을 구성할 수 있어서 사용했습니다. 그리고 커뮤니티가 방대해서 자료 찾기도 편합니다.
Redux
모든 상태 업데이트를 액션으로 정의하고, 액션 정보에 기반하여 Reducer에서 상태를 업데이트하기 때문에 상태를 더욱 쉽게 예측 가능하게 하여 유지보수 측면에 긍정적인 효과를 제공해줍니다.
React-router-dom
SPA인 React에서 routing을 구현하기 위해서 사용했습니다. 라우팅을 서버에서 관리하는 것이 아닌 클라이언트가 구현함으로써 SPA가 깜빡임 없이 페이지 이동을 구현할 수 있게 합니다.
styled-components
CSS-in-JS를 사용한 이유는 프로젝트가 UI 인터렉션 위주가 아닌 컴포넌트 위주의 프로젝트가 진행될 가능성이 커서 선택했습니다. 컴포넌트 위주의 프로젝트에서 개발 효율성을 중요시 하고, 필요한 CSS 스타일 요소만 로딩하기 때문에 사용하게 되었습니다.
ESLint
프로젝트 코드의 일관성있는 코드 작성을 위해서 사용했습니다. 잘못된 코드 혹은 컨벤션에 맞지 않는 코드를 작성하게 된다면 오류를 뱉어내기 때문에 사용했습니다. 대부분의 경우 airbnb 컨벤션을 사용합니다. 가장 유명한 코딩 컨벤션중에 하나 이기도 하고, 세부적인 것 까지 섬세하게 작성되어 있습니다.
Prettier
프로젝트 코드의 코드 포맷팅을 위해서 사용했습니다. 따옴표를 사용할 것인지 쌍따옴표를 사용할 것인지, 한 줄에 최대 몇 줄까지 적을 수 있는지, 세미콜론을 붙일 것인지 안 붙일 것인지와 같은 코드의 일관성을 지킬 수 있습니다.
Vercel
Next.JS를 만든 곳에서 만든 배포 시스템입니다. 깃허브 주소만 입력하면 바로 배포가 됩니다. CI/CD가 자동으로 구현되어 있어서 메인 브랜치에 merge, commit 됐을 때, 혹은 메인이 아닌 브랜치에서 merge, commit 시에 preview deployment를 제공하여 오류가 나는지 확인해줍니다. 또한 내부적으로 CI 파이프라인에서 에러가 나거나, 사용하지 않는 변수와 같은 실수들에 에러를 내뱉어 배포가 된 이후에 에러가 나는 것을 방지할 수 있습니다. 그리고 무료입니다.
관련링크들
사용기술들
React
UI 개발에 집중할 수 있습니다. 컴포넌트를 이용해서 재사용 가능하고, 논리적으로 파일을 나누어서 개발 진행을 할 수 있습니다. 또한 JSX 문법을 이용해서 조금 더 직관적으로 템플릿을 구성할 수 있어서 사용했습니다. 그리고 커뮤니티가 방대해서 자료 찾기도 편합니다.
Redux
모든 상태 업데이트를 액션으로 정의하고, 액션 정보에 기반하여 Reducer에서 상태를 업데이트하기 때문에 상태를 더욱 쉽게 예측 가능하게 하여 유지보수 측면에 긍정적인 효과를 제공해줍니다.
React-router-dom
SPA인 React에서 routing을 구현하기 위해서 사용했습니다. 라우팅을 서버에서 관리하는 것이 아닌 클라이언트가 구현함으로써 SPA가 깜빡임 없이 페이지 이동을 구현할 수 있게 합니다.
styled-components
CSS-in-JS를 사용한 이유는 프로젝트가 UI 인터렉션 위주가 아닌 컴포넌트 위주의 프로젝트가 진행될 가능성이 커서 선택했습니다. 컴포넌트 위주의 프로젝트에서 개발 효율성을 중요시 하고, 필요한 CSS 스타일 요소만 로딩하기 때문에 사용하게 되었습니다.
ESLint
프로젝트 코드의 일관성있는 코드 작성을 위해서 사용했습니다. 잘못된 코드 혹은 컨벤션에 맞지 않는 코드를 작성하게 된다면 오류를 뱉어내기 때문에 사용했습니다. 대부분의 경우 airbnb 컨벤션을 사용합니다. 가장 유명한 코딩 컨벤션중에 하나 이기도 하고, 세부적인 것 까지 섬세하게 작성되어 있습니다.
Prettier
프로젝트 코드의 코드 포맷팅을 위해서 사용했습니다. 따옴표를 사용할 것인지 쌍따옴표를 사용할 것인지, 한 줄에 최대 몇 줄까지 적을 수 있는지, 세미콜론을 붙일 것인지 안 붙일 것인지와 같은 코드의 일관성을 지킬 수 있습니다.
Vercel
Next.JS를 만든 곳에서 만든 배포 시스템입니다. 깃허브 주소만 입력하면 바로 배포가 됩니다. CI/CD가 자동으로 구현되어 있어서 메인 브랜치에 merge, commit 됐을 때, 혹은 메인이 아닌 브랜치에서 merge, commit 시에 preview deployment를 제공하여 오류가 나는지 확인해줍니다. 또한 내부적으로 CI 파이프라인에서 에러가 나거나, 사용하지 않는 변수와 같은 실수들에 에러를 내뱉어 배포가 된 이후에 에러가 나는 것을 방지할 수 있습니다. 그리고 무료입니다.
관련링크들
사용기술들
React
UI 개발에 집중할 수 있습니다. 컴포넌트를 이용해서 재사용 가능하고, 논리적으로 파일을 나누어서 개발 진행을 할 수 있습니다. 또한 JSX 문법을 이용해서 조금 더 직관적으로 템플릿을 구성할 수 있어서 사용했습니다. 그리고 커뮤니티가 방대해서 자료 찾기도 편합니다.
Redux
모든 상태 업데이트를 액션으로 정의하고, 액션 정보에 기반하여 Reducer에서 상태를 업데이트하기 때문에 상태를 더욱 쉽게 예측 가능하게 하여 유지보수 측면에 긍정적인 효과를 제공해줍니다.
React-router-dom
SPA인 React에서 routing을 구현하기 위해서 사용했습니다. 라우팅을 서버에서 관리하는 것이 아닌 클라이언트가 구현함으로써 SPA가 깜빡임 없이 페이지 이동을 구현할 수 있게 합니다.
styled-components
CSS-in-JS를 사용한 이유는 프로젝트가 UI 인터렉션 위주가 아닌 컴포넌트 위주의 프로젝트가 진행될 가능성이 커서 선택했습니다. 컴포넌트 위주의 프로젝트에서 개발 효율성을 중요시 하고, 필요한 CSS 스타일 요소만 로딩하기 때문에 사용하게 되었습니다.
ESLint
프로젝트 코드의 일관성있는 코드 작성을 위해서 사용했습니다. 잘못된 코드 혹은 컨벤션에 맞지 않는 코드를 작성하게 된다면 오류를 뱉어내기 때문에 사용했습니다. 대부분의 경우 airbnb 컨벤션을 사용합니다. 가장 유명한 코딩 컨벤션중에 하나 이기도 하고, 세부적인 것 까지 섬세하게 작성되어 있습니다.
Prettier
프로젝트 코드의 코드 포맷팅을 위해서 사용했습니다. 따옴표를 사용할 것인지 쌍따옴표를 사용할 것인지, 한 줄에 최대 몇 줄까지 적을 수 있는지, 세미콜론을 붙일 것인지 안 붙일 것인지와 같은 코드의 일관성을 지킬 수 있습니다.
Vercel
Next.JS를 만든 곳에서 만든 배포 시스템입니다. 깃허브 주소만 입력하면 바로 배포가 됩니다. CI/CD가 자동으로 구현되어 있어서 메인 브랜치에 merge, commit 됐을 때, 혹은 메인이 아닌 브랜치에서 merge, commit 시에 preview deployment를 제공하여 오류가 나는지 확인해줍니다. 또한 내부적으로 CI 파이프라인에서 에러가 나거나, 사용하지 않는 변수와 같은 실수들에 에러를 내뱉어 배포가 된 이후에 에러가 나는 것을 방지할 수 있습니다. 그리고 무료입니다.
관련링크들
사용기술들
NextJS
SEO을 신경써서 검색엔진에 노출시키고 싶었습니다. SSR을 통해서 SEO를 향상시키고, 별도의 routing 라이브러리없이 페이지 routing을 구현할 수 있는 것도 선택의 기준이 되었습니다.
Typescript
함수나 객체에 들어가는 구조에 타입을 정의함으로써 인자나 프로퍼티의 자동완성으로 개발 진행할 때 편의성을 얻을 수 있습니다. 또한 함수, 객체의 값들을 실행 전에 타입이 틀린 부분을 발견하여 실행 후에 에러를 방지할 수 있습니다.
styled-components
CSS-in-JS를 사용한 이유는 프로젝트가 UI 인터렉션 위주가 아닌 컴포넌트 위주의 프로젝트가 진행될 가능성이 커서 선택했습니다. 컴포넌트 위주의 프로젝트에서 개발 효율성을 중요시 하고, 필요한 CSS 스타일 요소만 로딩하기 때문에 사용하게 되었습니다.
ESLint
프로젝트 코드의 일관성있는 코드 작성을 위해서 사용했습니다. 잘못된 코드 혹은 컨벤션에 맞지 않는 코드를 작성하게 된다면 오류를 뱉어내기 때문에 사용했습니다. 대부분의 경우 airbnb 컨벤션을 사용합니다. 가장 유명한 코딩 컨벤션중에 하나 이기도 하고, 세부적인 것 까지 섬세하게 작성되어 있습니다.
Prettier
프로젝트 코드의 코드 포맷팅을 위해서 사용했습니다. 따옴표를 사용할 것인지 쌍따옴표를 사용할 것인지, 한 줄에 최대 몇 줄까지 적을 수 있는지, 세미콜론을 붙일 것인지 안 붙일 것인지와 같은 코드의 일관성을 지킬 수 있습니다.
Vercel
Next.JS를 만든 곳에서 만든 배포 시스템입니다. 깃허브 주소만 입력하면 바로 배포가 됩니다. CI/CD가 자동으로 구현되어 있어서 메인 브랜치에 merge, commit 됐을 때, 혹은 메인이 아닌 브랜치에서 merge, commit 시에 preview deployment를 제공하여 오류가 나는지 확인해줍니다. 또한 내부적으로 CI 파이프라인에서 에러가 나거나, 사용하지 않는 변수와 같은 실수들에 에러를 내뱉어 배포가 된 이후에 에러가 나는 것을 방지할 수 있습니다. 그리고 무료입니다.
관련링크들
관련링크들
사용기술들
Vue.js
함수나 객체에 들어가는 구조에 타입을 정의함으로써 인자나 프로퍼티의 자동완성으로 개발 진행할 때 편의성을 얻을 수 있습니다. 또한 함수, 객체의 값들을 실행 전에 타입이 틀린 부분을 발견하여 실행 후에 에러를 방지할 수 있습니다.
styled-components
CSS-in-JS를 사용한 이유는 프로젝트가 UI 인터렉션 위주가 아닌 컴포넌트 위주의 프로젝트가 진행될 가능성이 커서 선택했습니다. 컴포넌트 위주의 프로젝트에서 개발 효율성을 중요시 하고, 필요한 CSS 스타일 요소만 로딩하기 때문에 사용하게 되었습니다.
ESLint
프로젝트 코드의 일관성있는 코드 작성을 위해서 사용했습니다. 잘못된 코드 혹은 컨벤션에 맞지 않는 코드를 작성하게 된다면 오류를 뱉어내기 때문에 사용했습니다. 대부분의 경우 airbnb 컨벤션을 사용합니다. 가장 유명한 코딩 컨벤션중에 하나 이기도 하고, 세부적인 것 까지 섬세하게 작성되어 있습니다.
Prettier
프로젝트 코드의 코드 포맷팅을 위해서 사용했습니다. 따옴표를 사용할 것인지 쌍따옴표를 사용할 것인지, 한 줄에 최대 몇 줄까지 적을 수 있는지, 세미콜론을 붙일 것인지 안 붙일 것인지와 같은 코드의 일관성을 지킬 수 있습니다.
관련링크들
관련링크들
관련링크들