Development Study
-
오늘 저는 여러분에게 백엔드 개발에 있어 효율적이고 강력한 도구인 Nest.js에 대해 소개하고자 합니다. 이 글을 통해 Nest.js가 무엇인지 알아보고, 지금 프론트엔드 개발자의 길을 향해가고 있는 제가 이 기술을 배웠을 때의 이점이 무엇인지에 대해서도 알아보도록 하겠습니다. Nest.js란 무엇인가요? Nest.js는 효율적이고 확장 가능한 서버 사이드 애플리케이션을 구축하기 위한 고성능의 Node.js 프레임워크입니다. Typescript를 기반으로 하지만, Javascript로도 사용이 가능하며, OOP(Object Oriented Programming) FP(Functional Programming) FRP(Functional Reactive Programming) 와 같은 다양한 개발 방법론..
[Nest.JS] TypeScript 기반 프레임워크, Nest.JS에 대해 알아보자오늘 저는 여러분에게 백엔드 개발에 있어 효율적이고 강력한 도구인 Nest.js에 대해 소개하고자 합니다. 이 글을 통해 Nest.js가 무엇인지 알아보고, 지금 프론트엔드 개발자의 길을 향해가고 있는 제가 이 기술을 배웠을 때의 이점이 무엇인지에 대해서도 알아보도록 하겠습니다. Nest.js란 무엇인가요? Nest.js는 효율적이고 확장 가능한 서버 사이드 애플리케이션을 구축하기 위한 고성능의 Node.js 프레임워크입니다. Typescript를 기반으로 하지만, Javascript로도 사용이 가능하며, OOP(Object Oriented Programming) FP(Functional Programming) FRP(Functional Reactive Programming) 와 같은 다양한 개발 방법론..
2023.05.21 -
ESLint? Husky? Prettier? ESLint, Husky, Prettier는 프로그래밍을 할 때 코드 품질과 일관성을 유지하기 위한 도구입니다. 그리고 이제 개발의 세계에서는 코드 품질과 일관성을 유지하는 것이 굉장히 중요해진 시점입니다. 코드 품질과 일관성을 유지하는 것이 왜 중요할까요? 가독성 향상 일관성 있는 코드 스타일과 높은 코드 품질은 코드를 읽고 이해하기 쉽게 만듭니다. 가독성이 좋은 코드는 개발자들이 더 빠르게 문제를 파악하고 해결할 수 있게 도와줍니다. 유지보수 용이성 코드 품질과 일관성이 높으면, 코드를 수정하거나 확장하기가 더 쉽습니다. 이는 시간과 비용을 절약할 수 있으며, 프로젝트의 수명이 길어질수록 더 중요한 요소가 됩니다. 팀 협업 향상 코드가 일관되고 품질이 높으..
[ESLint, husky, Prettier] 당신의 코드 품질을 책임져주는 3가지 도구들ESLint? Husky? Prettier? ESLint, Husky, Prettier는 프로그래밍을 할 때 코드 품질과 일관성을 유지하기 위한 도구입니다. 그리고 이제 개발의 세계에서는 코드 품질과 일관성을 유지하는 것이 굉장히 중요해진 시점입니다. 코드 품질과 일관성을 유지하는 것이 왜 중요할까요? 가독성 향상 일관성 있는 코드 스타일과 높은 코드 품질은 코드를 읽고 이해하기 쉽게 만듭니다. 가독성이 좋은 코드는 개발자들이 더 빠르게 문제를 파악하고 해결할 수 있게 도와줍니다. 유지보수 용이성 코드 품질과 일관성이 높으면, 코드를 수정하거나 확장하기가 더 쉽습니다. 이는 시간과 비용을 절약할 수 있으며, 프로젝트의 수명이 길어질수록 더 중요한 요소가 됩니다. 팀 협업 향상 코드가 일관되고 품질이 높으..
2023.05.09 -
DFS, Depth-First Search라고 불리는 이 깊이 우선 탐색은 대표적으로 많이 사용되는 알고리즘 중 하나 입니다. 이 글에서는 어떤 상황에서 BFS를 사용하며, 어떤 코드에서 사용되고 있는 지 알아보도록 하겠습니다. 깊이 우선 탐색(DFS)란 무엇일까? 깊이 우선 탐색(Depth-First Search)은 그래프나 트리와 같은 자료 구조에서 노드를 탐색하는 알고리즘 중 하나입니다. DFS는 시작 노드에서 출발하여 깊이를 우선으로 하여 노드들을 방문하는 방식으로, 한 경로의 최대 깊이까지 도달한 후 다시 이전 노드로 돌아와 미방문 인접 노드를 방문하는 방식으로 진행됩니다. DFS는 다음과 같은 순서로 실행됩니다 시작 노드를 방문합니다. 방문한 노드를 기준으로 인접한 미방문 노드가 있으면 그 노..
[JavaScript] 깊이 우선 탐색, DFS(Depth-First Search)DFS, Depth-First Search라고 불리는 이 깊이 우선 탐색은 대표적으로 많이 사용되는 알고리즘 중 하나 입니다. 이 글에서는 어떤 상황에서 BFS를 사용하며, 어떤 코드에서 사용되고 있는 지 알아보도록 하겠습니다. 깊이 우선 탐색(DFS)란 무엇일까? 깊이 우선 탐색(Depth-First Search)은 그래프나 트리와 같은 자료 구조에서 노드를 탐색하는 알고리즘 중 하나입니다. DFS는 시작 노드에서 출발하여 깊이를 우선으로 하여 노드들을 방문하는 방식으로, 한 경로의 최대 깊이까지 도달한 후 다시 이전 노드로 돌아와 미방문 인접 노드를 방문하는 방식으로 진행됩니다. DFS는 다음과 같은 순서로 실행됩니다 시작 노드를 방문합니다. 방문한 노드를 기준으로 인접한 미방문 노드가 있으면 그 노..
2023.05.04 -
BFS, Breadth-First Search라고 불리는 이 너비 우선 탐색은 대표적으로 많이 사용되는 알고리즘 중하나입니다. 이 글에서는 어떤 상황에서 BFS를 사용하며, 어떤 코드에서 사용되고 있는 지 알아보도록 하겠습니다. 너비 우선 탐색(BFS)란 무엇일까? 너비 우선 탐색(Breadth-First Search, BFS)은 그래프와 트리에서 사용되는 탐색 알고리즘 중 하나로, 루트 노드로부터 시작해서 인접한 노드를 먼저 방문하고, 그 다음에 인접한 노드들의 인접한 노드들을 방문하는 식으로 레벨 순서대로 진행하는 방식입니다. BFS는 주로 최단 경로를 찾거나, 두 노드 간의 경로가 있는지 여부를 확인하는 데 사용됩니다. BFS 알고리즘은 다음과 같은 순서로 수행됩니다. 시작 노드를 큐(Queue)에..
[JavaScript] 너비 우선 탐색, BFS(Breadth-First Search)BFS, Breadth-First Search라고 불리는 이 너비 우선 탐색은 대표적으로 많이 사용되는 알고리즘 중하나입니다. 이 글에서는 어떤 상황에서 BFS를 사용하며, 어떤 코드에서 사용되고 있는 지 알아보도록 하겠습니다. 너비 우선 탐색(BFS)란 무엇일까? 너비 우선 탐색(Breadth-First Search, BFS)은 그래프와 트리에서 사용되는 탐색 알고리즘 중 하나로, 루트 노드로부터 시작해서 인접한 노드를 먼저 방문하고, 그 다음에 인접한 노드들의 인접한 노드들을 방문하는 식으로 레벨 순서대로 진행하는 방식입니다. BFS는 주로 최단 경로를 찾거나, 두 노드 간의 경로가 있는지 여부를 확인하는 데 사용됩니다. BFS 알고리즘은 다음과 같은 순서로 수행됩니다. 시작 노드를 큐(Queue)에..
2023.05.04 -
점점 커지고 있는 모바일 시장에서, 단연 압도적인 점유율을 가지고 있는 건 안드로이드 입니다. 이 안드로이드 앱 개발 시장은 지금까지 Java로 이루어졌다면, Kotlin의 등장으로 인해 그 자리를 대체해가고 있는 추세이죠. 이 글에서는 Kotlin이 무엇인지, Android로 App 개발을 하는 것의 장단점은 무엇인지에 대해 이야기하려고 합니다. 앱 개발을 위한 입문자들에게 이 글이 도움이 되기를 바랍니다. Kotlin이란? Kotlin은 JetBrains가 개발한 프로그래밍 언어로, Java와 100% 호환되면서도 더 간결하고 편리한 문법을 제공합니다. 2017년부터 Google이 공식 안드로이드 개발 언어로 선정한 Kotlin은, 현재 안드로이드 앱 개발을 위한 주요 언어 중 하나입니다. Kotli..
[Kotlin] Android App 개발, 그리고 Kotlin점점 커지고 있는 모바일 시장에서, 단연 압도적인 점유율을 가지고 있는 건 안드로이드 입니다. 이 안드로이드 앱 개발 시장은 지금까지 Java로 이루어졌다면, Kotlin의 등장으로 인해 그 자리를 대체해가고 있는 추세이죠. 이 글에서는 Kotlin이 무엇인지, Android로 App 개발을 하는 것의 장단점은 무엇인지에 대해 이야기하려고 합니다. 앱 개발을 위한 입문자들에게 이 글이 도움이 되기를 바랍니다. Kotlin이란? Kotlin은 JetBrains가 개발한 프로그래밍 언어로, Java와 100% 호환되면서도 더 간결하고 편리한 문법을 제공합니다. 2017년부터 Google이 공식 안드로이드 개발 언어로 선정한 Kotlin은, 현재 안드로이드 앱 개발을 위한 주요 언어 중 하나입니다. Kotli..
2023.05.03 -
요즘 Mac을 쓰면서 점점 아이폰으로 바꿔야 하나 생각을 하는 시기에, 아이폰에서 사용하는 앱에는 거의 대부분이 Swift를 통해 만들어진다는 사실을 알았습니다. 어플 만들기에 점점 눈이 가고 있던 차에, 잘 됐다 싶어서 알아보기로 하였죠. 이 글은 Apple의 Swift 소개 페이지에서 정보를 얻어 작성하였습니다. Swift - Apple Swift is everywhere. And now it’s open for everyone. Swift is free and open source, and it’s available to a wide audience of developers, educators, and students under the Apache 2.0 open source license. We’..
[iOS] Swift란 무엇일까?요즘 Mac을 쓰면서 점점 아이폰으로 바꿔야 하나 생각을 하는 시기에, 아이폰에서 사용하는 앱에는 거의 대부분이 Swift를 통해 만들어진다는 사실을 알았습니다. 어플 만들기에 점점 눈이 가고 있던 차에, 잘 됐다 싶어서 알아보기로 하였죠. 이 글은 Apple의 Swift 소개 페이지에서 정보를 얻어 작성하였습니다. Swift - Apple Swift is everywhere. And now it’s open for everyone. Swift is free and open source, and it’s available to a wide audience of developers, educators, and students under the Apache 2.0 open source license. We’..
2023.05.03 -
AWS Series [Learn About AWS] Series 이 글은 AWS 수업 시간에 진행되는 내용들을 담아 둔 시리즈이다 상반기동안 업데이트 할 예정이며 최대한 위에있는 이미지처럼 웃으면서 할 것이다 [1회차] - EC2 찍어먹어보기 [Learn About AWS] 1회 time-map-installer.tistory.com RDS 개념 RDS란? RDS는 Amazon Web Services(AWS)에서 제공하는 관계형 데이터베이스 서비스로, "Relational Database Service"의 약자입니다. 이 서비스는 사용자가 손쉽게 관계형 데이터베이스를 설정, 운영 및 확장할 수 있도록 지원합니다. 클라우드 환경에서의 데이터베이스 관리를 단순화하고, 백업, 복구, 모니터링, 확장 같은 작업..
[Learn About AWS] 4회차 실습내용 정리AWS Series [Learn About AWS] Series 이 글은 AWS 수업 시간에 진행되는 내용들을 담아 둔 시리즈이다 상반기동안 업데이트 할 예정이며 최대한 위에있는 이미지처럼 웃으면서 할 것이다 [1회차] - EC2 찍어먹어보기 [Learn About AWS] 1회 time-map-installer.tistory.com RDS 개념 RDS란? RDS는 Amazon Web Services(AWS)에서 제공하는 관계형 데이터베이스 서비스로, "Relational Database Service"의 약자입니다. 이 서비스는 사용자가 손쉽게 관계형 데이터베이스를 설정, 운영 및 확장할 수 있도록 지원합니다. 클라우드 환경에서의 데이터베이스 관리를 단순화하고, 백업, 복구, 모니터링, 확장 같은 작업..
2023.04.30 -
오늘도 평화롭게 사탕을 하나 먹으며 코드 리팩토링 요소를 찾아보던 날이었습니다. 입안 가득 퍼지는 청포도 향이 좋다고 생각하다가 전에 타입을 지정할 때 interface와 type을 둘 다 썼던 것만 같은 기억이 문득 떠올랐습니다 그래서 확인을 해 보았는데 실제로도 두개가 혼용되어서 사용이 되고 있는 것을 볼 수 있었습니다. 그 때 갑자기 머릿속에서 들려오는 질문 하나가 있었습니다. "타입이랑 인터페이스랑 뭐, 똑같은 거 아닌가?" 분명 머리로는 아니라는 걸 알지만 자세히 알지 못하였기에 바로 블로그에 접속해서 기록하며 알아보기 시작했습니다. **type**과 **interface**는 TypeScript에서 사용되는 두 가지 기능입니다. 이 둘은 비슷해 보이지만, 몇 가지 차이점이 있기에 지금부터 알아..
[TypeScript] type {함수명}? interface {함수명}?오늘도 평화롭게 사탕을 하나 먹으며 코드 리팩토링 요소를 찾아보던 날이었습니다. 입안 가득 퍼지는 청포도 향이 좋다고 생각하다가 전에 타입을 지정할 때 interface와 type을 둘 다 썼던 것만 같은 기억이 문득 떠올랐습니다 그래서 확인을 해 보았는데 실제로도 두개가 혼용되어서 사용이 되고 있는 것을 볼 수 있었습니다. 그 때 갑자기 머릿속에서 들려오는 질문 하나가 있었습니다. "타입이랑 인터페이스랑 뭐, 똑같은 거 아닌가?" 분명 머리로는 아니라는 걸 알지만 자세히 알지 못하였기에 바로 블로그에 접속해서 기록하며 알아보기 시작했습니다. **type**과 **interface**는 TypeScript에서 사용되는 두 가지 기능입니다. 이 둘은 비슷해 보이지만, 몇 가지 차이점이 있기에 지금부터 알아..
2023.04.27 -
프로젝트 개발을 하던 중에 함수를 따로 모듈화 하던 중 갑자기 궁금해 진 것이 있었습니다."이렇게 특정 기능을 재사용하거나 관리하기 쉽게 따로 모듈화를 하는 건 좋은데, 어느 폴더에 넣어야 하지?"이미 어느 정도 초기에 폴더 구조를 나눠 두었지만 utils와 hooks의 차이점이 분명 존재했음에도 자세하게 알지 못해 잠시 갈피를 잡지 못하고 있었던 것 같았습니다그렇다면 저는 왜 이 둘을 헷갈렸을까요?utils와 hooks 폴더의 구분이 애매해질 수 있는 이유는 다음과 같습니다.함수의 역할이 겹치는 경우: 때로는 함수가 React 컴포넌트에서만 사용되는 로직을 포함하지만 동시에 일반 JavaScript 함수의 특성도 가질 수 있습니다. 이런 경우에는 어디에 배치할지 결정하기 어려울 수 있습니다.커스텀 훅이..
[Folder Structure] Hooks? Utils? 차이점이 뭘까?프로젝트 개발을 하던 중에 함수를 따로 모듈화 하던 중 갑자기 궁금해 진 것이 있었습니다."이렇게 특정 기능을 재사용하거나 관리하기 쉽게 따로 모듈화를 하는 건 좋은데, 어느 폴더에 넣어야 하지?"이미 어느 정도 초기에 폴더 구조를 나눠 두었지만 utils와 hooks의 차이점이 분명 존재했음에도 자세하게 알지 못해 잠시 갈피를 잡지 못하고 있었던 것 같았습니다그렇다면 저는 왜 이 둘을 헷갈렸을까요?utils와 hooks 폴더의 구분이 애매해질 수 있는 이유는 다음과 같습니다.함수의 역할이 겹치는 경우: 때로는 함수가 React 컴포넌트에서만 사용되는 로직을 포함하지만 동시에 일반 JavaScript 함수의 특성도 가질 수 있습니다. 이런 경우에는 어디에 배치할지 결정하기 어려울 수 있습니다.커스텀 훅이..
2023.04.27 -
React를 사용할 때 데이터를 시각화하는 데 도움이 되는 다양한 차트 라이브러리가 있습니다. 이번 블로그 글에서는 이러한 라이브러리들의 특징과 장단점, 그리고 어떤 상황에서 사용해야 할지에 대해 알아보겠습니다. + 따로 순위는 지정하지 않고 다룬 글임을 알립니다 1. React-chartjs React-chartjs는 Chart.js 라이브러리를 기반으로 한 React용 차트 라이브러리입니다. 가볍고 빠르며, 다양한 차트 종류를 제공하고 있습니다. 그러나 기능이나 커스터마이징 측면에서는 다른 라이브러리에 비해 제한적입니다. 장점: 가볍고 빠르며, 다양한 차트 제공 단점: 기능 및 커스터마이징이 제한적 사용 상황: 간단한 차트를 빠르게 구현하고 싶을 때 2. Victory Victory는 React와 R..
[React] 차트 라이브러리 비교 분석React를 사용할 때 데이터를 시각화하는 데 도움이 되는 다양한 차트 라이브러리가 있습니다. 이번 블로그 글에서는 이러한 라이브러리들의 특징과 장단점, 그리고 어떤 상황에서 사용해야 할지에 대해 알아보겠습니다. + 따로 순위는 지정하지 않고 다룬 글임을 알립니다 1. React-chartjs React-chartjs는 Chart.js 라이브러리를 기반으로 한 React용 차트 라이브러리입니다. 가볍고 빠르며, 다양한 차트 종류를 제공하고 있습니다. 그러나 기능이나 커스터마이징 측면에서는 다른 라이브러리에 비해 제한적입니다. 장점: 가볍고 빠르며, 다양한 차트 제공 단점: 기능 및 커스터마이징이 제한적 사용 상황: 간단한 차트를 빠르게 구현하고 싶을 때 2. Victory Victory는 React와 R..
2023.04.16 -
React 애니메이션 라이브러리는 웹 애플리케이션의 사용자 경험(UX)를 높이기 위해 많이 사용됩니다 1. Framer Motion 특징: Framer Motion은 사용하기 쉬운 API와 풍부한 기능을 제공하는 React 애니메이션 라이브러리입니다. 물리 기반 애니메이션, 제스처 제어, 컴포넌트 간 전환 등의 기능을 제공합니다. 장점: 사용하기 쉬운 API 높은 성능 물리 기반 애니메이션 및 제스처 제어 지원 풍부한 예제와 문서화 단점: 비교적 큰 파일 크기 사용해야 하는 경우: 사용하기 쉬운 API와 높은 성능이 필요한 경우, 물리 기반 애니메이션을 적용할 때 사용합니다. 2. React-Spring 특징: React-Spring은 물리 기반의 애니메이션을 구현할 수 있는 라이브러리입니다. 직관적인 ..
[React] 9개의 대표적인 애니메이션 라이브러리 비교해보기React 애니메이션 라이브러리는 웹 애플리케이션의 사용자 경험(UX)를 높이기 위해 많이 사용됩니다 1. Framer Motion 특징: Framer Motion은 사용하기 쉬운 API와 풍부한 기능을 제공하는 React 애니메이션 라이브러리입니다. 물리 기반 애니메이션, 제스처 제어, 컴포넌트 간 전환 등의 기능을 제공합니다. 장점: 사용하기 쉬운 API 높은 성능 물리 기반 애니메이션 및 제스처 제어 지원 풍부한 예제와 문서화 단점: 비교적 큰 파일 크기 사용해야 하는 경우: 사용하기 쉬운 API와 높은 성능이 필요한 경우, 물리 기반 애니메이션을 적용할 때 사용합니다. 2. React-Spring 특징: React-Spring은 물리 기반의 애니메이션을 구현할 수 있는 라이브러리입니다. 직관적인 ..
2023.04.16 -
영상으로 보기 [Techeer Talk] About JavaScript ES6 자료 JavaScript ES6를 소개합니다 JavaScript의 역사 JavaScript ES6 소개 주요 문법 소개 문법별 예제 코드 활용법 및 실전 적용 JavaScript의 역사 JavaScript는 웹 개발에서 가장 많이 사용되는 프로그래밍 언어 중 하나입니다 European Computer Manufactures Association + Script 유럽 컴퓨터 제조업체 협회를 뜻하며 ECMA의 표준화에 많은 역할을 담당했습니다 년도별로 살펴보기 넷스케이프 커뮤니케이션즈에서 브라우저 상에서 동작하는 스크립트 언어로 개발 초기 이름은 'LiveScript'이었으나, 자바의 인기에 편승하기 위해 'JavaScript'로..
[Techeer Talk] JavaScript ES6에는 어떤 변화가 있었을까?영상으로 보기 [Techeer Talk] About JavaScript ES6 자료 JavaScript ES6를 소개합니다 JavaScript의 역사 JavaScript ES6 소개 주요 문법 소개 문법별 예제 코드 활용법 및 실전 적용 JavaScript의 역사 JavaScript는 웹 개발에서 가장 많이 사용되는 프로그래밍 언어 중 하나입니다 European Computer Manufactures Association + Script 유럽 컴퓨터 제조업체 협회를 뜻하며 ECMA의 표준화에 많은 역할을 담당했습니다 년도별로 살펴보기 넷스케이프 커뮤니케이션즈에서 브라우저 상에서 동작하는 스크립트 언어로 개발 초기 이름은 'LiveScript'이었으나, 자바의 인기에 편승하기 위해 'JavaScript'로..
2023.04.16