코드로 대화하기

안녕하세요 오늘은 Git 커밋 메시지에 대하여 적어보려고 합니다. 프로젝트를 진행하다 보면 여러 사람들과 협업해야 할 때가 있는데요. 커밋 메시지를 보며 버전 관리와 동료들이 무엇을 했는지 등 한눈에 알 수 있습니다. 추가로 다음과 같은 효과들이 있습니다. * 더 좋은 커밋 로그 가독성 * 더 나은 협업과 리뷰 프로세스 * 더 쉬운 코드 유지보수 회사마다 커밋 메시지의 규칙은 다르겠지만, 이번에 소개해드릴 내용은 보편적으로 사용하는 규칙입니다. 커밋 규칙 (): // 제목 // 본문 // 푸터 커밋 메시지의 기본적인 구조입니다. 제목은 필수이고, 본문과 푸터는 선택사항입니다. 제목과 본문은 아래와 같은 규칙이 있습니다. 제목과 본문을 한 줄 띄워 분리 제목은 영문 기준 50글자로 제한 제목 첫 글자는 대..

Enumerated Type 타입스크립트에서 enum이란 특정 값들의 집합을 의미하는 자료형 (열거형)입니다. C, C#, Java 등 많은 프로그래밍 언어들이 enum을 데이터 타입에 포함하고 있지만 자바스크립트는 포함하고 있지 않습니다. 타입스크립트로 넘어오게 되면서 enum을 사용할 수 있게 되었습니다. 코드를 통해 어떤 것들이 있는지 살펴보겠습니다. Numeric enums (숫자 열거형) enum Alphabet{ A, B, C, D, E, F } console.log(Alphabet); /* { '0': 'A', '1': 'B', '2': 'C', '3': 'D', '4': 'E', '5': 'F', A: 0, B: 1, C: 2, D: 3, E: 4, F: 5 } */ console.log(..

오늘은 typescript의 union type과 intersection type을 알아보겠습니다. 일반적으로 타입을 선언하기 하기 위해서는 아래와 같습니다. function logString(item: string){ console.log(item); }; logString("hello"); 똑같은 로직을 처리하지만 타입만 다른 경우는 어떨까요? function logString(item: string){ console.log(item); }; function logNumber(item: number){ console.log(item); }; logString("hello"); logNumber(1); 타입만 다르게 하여 함수를 두 번 선언하여야 합니다. 이렇게 되면 불필요한 중복이 생깁니다. Unio..

지금까지 변수와 함수에서의 타입 선언을 알아보았습니다. 직접적으로 타입을 넣는 경우도 있지만 type과 interface로 따로 뺄 수 있습니다. 타입을 따로 빼면 불필요한 반복이 줄어들어 확장성이 좋아집니다. Type Aliases 기본 구조 type UserData = { name: string; age:number; } function logUserData(user: UserData){ console.log(user.name); console.log(user.age); } logUserData({name:"song", age:0}); // 성공 logUserData({name:"song", address:"pangyo"}); // 오류 address는 type에서 선언되지 않았다. logUserDa..

오늘은 typescript에서 함수를 선언하는 방법에 대하여 알아보겠습니다. javascript function sum(a, b){ return a + b; }; sum(1, 2); js에서 일반적으로 함수를 선언하는 방법입니다. 타입이 선언되어있지 않기 때문에 숫자, 문자열, 오브젝트 등 모든 타입을 넣을 수 있습니다. 이렇게 되면 원하는 기존의 의도와는 다르게 함수가 작동할 가능성이 있습니다. typescript function function sum(a: number, b: number):number { return a + b; } sum(1, 2); // 성공 sum(1); // 오류 . 두번째 매개변수가 없습니다. sum("hello", 100); // 오류 ts에서는 매개변수와 리턴하는 타입 ..

오늘은 typescript에서 변수를 선언하는 방법에 대하여 알아보겠습니다. js와 달리 ts는 타입이 엄격하기 때문에 유의하셔야 합니다. 숫자 . number 숫자를 선언합니다. 16진수, 10진수, 8진수, 2진수 모두 지원합니다. let decimal: number = 6; let hex: number = 0xf00d; let binary: number = 0b1010; let octal: number = 0o744; 문자열 . string 문자열을 선언합니다. 백틱(``)을 사용하거나 연산이 있는 문자열도 가능합니다. let hello: string = "hello"; let sentence: string = `${hello} my name is sjh`; let sentence2: string ..

안녕하세요! 오늘은 타입 스크립트에 대하여 알아보겠습니다. 타입스크립트를 배우기 전 왜 이 언어를 사용해야하는지 궁금해서 찾아보게 되었습니다. 최근 개발자들 사이에서 ts는 굉장히 뜨고 있는데요. 대기업들의 채용공고에도 우대사항 혹은 자격요건에 포함되어있는 것을 볼 수 있습니다. npm trends를 봐도 무섭게 성장하고 있습니다. 저는 궁금했습니다. 왜 타입스크립트가 뜨게 되었고, 왜 수많은 개발자들이 선택을 하였을까요? 이 언어를 배워야하는 이유는 뭘까요? 개요 C#의 창시자인 아네르스 하일스베르가 개발을 주도하였고 마이크로소프트에서 2012년 오픈소스로 발표하였습니다. 2014년 4월 마이크로소프트의 Build 행사에서 타입스크립트의 1.0 버전을 공개했습니다. 2016년 9월에 2.0 버전이 릴리..

function getDistanceFromLatLonInKm(lat1,lng1,lat2,lng2) { function deg2rad(deg) { return deg * (Math.PI/180) } var R = 6371; var dLat = deg2rad(lat2-lat1); var dLon = deg2rad(lng2-lng1); var a = Math.sin(dLat/2) * Math.sin(dLat/2) + Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) * Math.sin(dLon/2) * Math.sin(dLon/2); var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); var d = R * c; return ..

React Native에서 이미지 경로를 동적으로 제어하는 방법을 알아보겠습니다. React처럼 src안에서 분기처리는 불가능합니다. // 잘못된 방법 방법 1. js 상단에 이미지 경로를 변수에 담은 후 넣는 방법입니다. // app.js const icon = require('./img/icon.png'); const activeIcon = require('./img/activeIcon.png'); ... 방법 2. 이미지 경로를 위한 js파일을 만들어 사용합니다. 확장성이 좋고 나중에 유지보수/추가개발을 할때도 좋아 저는 이 방법을 자주 사용합니다. // iconPath.js export const iconPath = { icon: require("./img/icon.png"), activeIcon..

You specified `onScroll` on a but not `scrollEventThrottle`. You will only receive one event. Using `16` you get all the events but be aware that it may cause frame drops, use a bigger number if you don't need as much precision. IOS에서 RN 개발을 하다보면 ScrollView 사용 시 위와 같은 로그가 계속 뜰때가 있습니다. 에서 onScroll 이벤트를 사용하는데 scrollEventThrottle을 정의하지 않아서 나는 것입니다. scrollEventThrottle란 스크롤하는 동안 스크롤 이벤트가 발생하는 빈도를 제어..