오늘은 javascript에서 typescript로 바꿔야할 이유를 코드를 통해 알아보도록 할게요! Javascript vs Typescript 차이점 1. JavaScript는 동적 타입 언어 / TypeScript는 정적 타입 언어로 대표적인 차이점! 2. 이 두 언어 사이의 주요 차이점은 타입 시스템에 있어요. TypeScript는 개발자가 변수, 함수 매개변수, 반환값 등에 명시적인 타입 정보를 제공할 수 있도록 해줘요. 이는 코드의 가독성을 높이고 오류를 사전에 감지하여 개발자의 실수를 줄일 수 있게 됩니다! 이제 JavaScript 코드를 TypeScript로 변환해야하는 몇 가지 예시를 살펴보겠습니다. Typescript로 변환 예시 1. 변수 및 매개변수의 타입 명시 JavaScript에서..

리팩터링은 분명 가치 있는 도구이지만, 정말 생각지못하게 실수를 저지르기 마련이에요. 그렇기때문에 그러한 부분을 견고하게 잡아줄 테스트 구축이 매우 중요하답니다. 이제 테스트를 통해 우리는 어떤 효율을 기대해야하는지 알아볼까요?! 자가 테스트 코드의 가치 모든 테스트를 완전히 자동화하고 그 결과까지 스스로 검사하게 만들자. 우리는 작성한 테스트코드를 수시로 확인해야해요. 테스트를 수시로 확인하면 우리가 어느 부분을 수정했기에 오류가 발생했는지 곧바로 체크할 수 있으니깐요. 실제로 기능 구현에 집중하는 시기에 테스트 코드를 작성했었다면, 화면을 보지 않아도 테스트 코드의 작동만을 통해서 우리는 정답을 알 수 있어요! 실제로 최근 저도 저희 서비스의 공공데이터 영역의 테스트 코드를 작성했어요. 확실히 테스트..

오늘도 지난 시간에 이어서 다시 코드스멜 2탄을 하려해요! 오늘 내용에서 되게 많은 내용을 제거시켰는데, 대부분이 클래스를 활용한 방법이여서 뺏어요! 제가 javascript에서 클래스를 자주 쓰지 않기도 하고, 실제 적용을 어떤식으로 나타낼지 난감하기도해서 그랬으니 이해해주세요! 그럼 이제 시작해볼까요!! 긴 매개변수 목록 함수의 매개변수가 많아지면 그 자체로 이해하기 어려워져요! 우리는 최대 2개로 매개변수를 최소화하려고 해요. (어쩔수없으면 3개…?!?) 또한 매개변수 중 하나로 플래그 형태를 자주 쓰지않나요? (주로 true, false를 통해 나누는) 저는 아래처럼 함수안에서 타입별로 무언가를 나누는 함수를 작성했었어요! const getDurationTimeBy = (distance:numbe..

이번 내용을 읽으면서는 다음과 같은 내용을 나누고 싶었어요. 언제 리팩터링을 하면 좋을지 명확하게 정할 수 있는 개발자, 그리고 적용할 수 있는 문화를 갖춰가는 개발팀이 되기 위해서 리팩터링을 언제할지 생각해보면 좋겠어요. 2.4 언제 리팩터링해야 할까? 리팩터링을 하는 시기는 생각보다 자주 일어나요. 저자는 거의 한시간마다 한 번은 한다고 말해요! 하지만 뭐든지 시기가 중요한게 아니라! 자연스럽게 본인의 개발 스타일에 맞게 리팩터링을 하는 시기를 녹여내는게 중요한거겠죠?? 저는 책을 읽으며, 그리고 직접 최근에 계속해서 적용해보며 앞으로 새로운 기능 개발을 할 때, 이렇게 하려고 해요! 보이스카웃트 원칙! 기능을 쉽게 추가할 수 있도록 리팩터링 기능 구현 (기능 중심 개발) 자가 리팩터링 (컴포넌트 분..

2. 리팩터링 원칙 2주차 개발 스터디를 참여하며 리팩터링 2장을 읽으며, 공유해보자해요. 이번 단원부터는 본격적으로 리팩터링이 어떤 원칙을 중심으로 진행되는지 차근차근 알려드리도록 할게요! 2.1 리팩터링 정의 리팩터링[명사] : 소프트웨어의 겉보기 동작은 그대로 유지한 채, 코드를 이해하고 수정하기 쉬도록 내부 구조를 변경하는 기법 리팩터링하다[동사] : 소프트웨어의 겉보기 동작은 그대로 유지한 채, 여러 가지 리팩터링 기법을 적용해서 소프트웨어를 재구성하다. 자 리팩터링은 명사, 동사 두가지로 위와 같이 소개할 수 있어요. 중요한 점은 겉보기 동작이 그대로 유지된 채, 소프트웨어가 재구성(개선)되는 작업을 리팩터링이라고 한다는 것을 알 수 있죠! 자 그러면 본격적으로 리팩터링하러 가볼까요?! 여러분..

6월 중순부터 사내 개발팀 스터디를 진행하고 있어요. 저는 첫번째 책으로 리팩터링 2판을 읽고 있고, 이 책을 읽으며 드는 생각과 앞으로 개발팀 내에서 어떻게 발전해나가면 좋을지 공유하고자 스터디 내용을 정리하여 공유하고자 해요! 저자의 내용을 토대로 지극히 저의 주관적인 생각을 담고 있음을 알려드립니다. 리팩터링 2판 서론.서론 내용은 다음과 같이 정리할 수 있어요. 1. 그냥 리팩터링하면 되지 않을까요? → 리팩터링엔 위험이 따라와요.동작하는 코드 수정에 미묘한 버그 생길 가능성잘못 수행시에 오류로 시간과 노력이 수포로 돌아갈 가능성그렇다면 어떻게 리팩터링 하면 좋을까요? 계획적이고 체계적이도록 실행하자!(목표를 설정?!) 2. 리팩터링이란? 겉으로 드러나는 코드의 기능(동작)은 바꾸지 않지만 내부 ..

오늘은 지난 Queue를 구현하면서 dequeue를 구현할 때 shift() 메소드를 사용하면 안되는 이유를 보려해요. 먼저 간단히 dequeue는 queue의 front를 제거하는 동작이며, shift는 javascript의 Array의 메소드 중 하나로 맨 앞의 요소를 제거해요. dequeue는 O(1)의 속도를 가지지만 shift는 O(n)의 속도를 가지기 때문에 그렇죠! shift가 O(n)을 갖는 이유는 array는 기본적으로 인덱스를 통해 접근이 가능하죠?! 그러면 맨 앞의 요소를 제거한다면, 뒤에 있는 모든 요소의 인덱스를 하나씩 땡겨주는 작업을 해야해요. 그래서 맨 앞의 요소를 제거하는 shift와 추가하는 unshift 모두 O(n)의 속도를 가져요! 그러면 다음 문제를 통해서 속도차이를..

오늘은 직접 구현한 queue를 활용해서 아래 프로그래머스 lv2 문제를 풀어볼께요! https://school.programmers.co.kr/learn/courses/30/lessons/42587 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 만약 직접 구현하지 않는다면 이렇게 쉽게 끝내지만..! (사서 고생하는 스타일..) 저는 직접 구현하기로 했으니 ... 엄청 긴 코드를 꺼내보죠.... function solution(priorities, location) { let rank = 0; while(true){ const front = priorit..

오늘 공부할 자료구조는 큐입니다! 큐(Queue) 1. 큐란? 큐는 스택과 함께 많이 사용되는 기본적인 자료구조로 일렬로 늘어선 줄을 의미하기도 하며, 입구와 출구가 분리되어있는 자료구조입니다! 우리가 줄을 서서 대기한다면 먼저 선 사람이 먼저 나오게되죠?! 그 원리를 이용한 자료구조가 큐이며 선입선출[First In First Out] 특성을 가지게 돼요! 2. 큐의 연산? 큐의 연산에는 두가지가 존재해요. 첫번째는 enqueue를 통한 입력, 두번째는 dequeue을 통한 제거 (플러스로 queue의 길이 ..!?) 큐의 입구는 뒤(rear)에 있기 때문에 enqueue는 뒤로 입력, dequeue은 앞(front)에서 제거하는 구조로 되어있어요! 3. 시간복잡도? enqueue : O(1) dequ..

대표적인 자료구조들인 스택, 큐, 연결리스트들과 정렬 알고리즘들을 직접 구현해보며 알아보면서 공부하고자 해요! 기본적인 동작 원리나 개념은 이미 알고있지만, 직접 구현해보며 동작원리를 살펴볼께요. 오늘은 먼저 스택! 스택(Stack) 1. 스택이란? 스택은 가장 많이 사용하는 자료구조로 말 그대로 "쌓여있는 데이터 더미"이고, 입구가 하나로 이루어진 자료구조라고 생각하면 돼요! 그렇기때문에 입구에 계속 넣는다면 처음에 넣은 것이 가장 마지막에 나오게 되는 후입선출[Last In First Out] 특성을 가지게 됩니다. 2. 스택의 연산? 스택의 연산에는 두가지 종류가 있어요. 첫번째는 push를 통한 입력, 두번째는 pop을 통한 제거 (플러스로 stack의 길이 ..?!) 스택의 입구는 뒤에 있기 때..