DogGae

Type 과 Interface 는 매우 유사한 기능들을 가지고 있고, 실제로 대부분의 프로젝트에서 개발자는 둘 중 어느 것을 선택해서 사용해도 상관 없을 경우가 많습니다. interface 에서 사용할 수 있는 기능의 대부분은 type 에서도 사용 가능한 경우가 많기 때문입니다. 차이점 1 : 선언 후 타입 확장성 (출저 : https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#differences-between-type-aliases-and-interfaces) 하지만 그렇다고 해서 아예 둘의 차이가 전무한 것은 아닙니다. 둘의 가장 큰 차이점은 type 은 선언 시점에서 그 내용을 고칠 수 없는데 반해, interface 는 선언 후에..

자바스크립트로만 개발을 해왔다면 갑작스레 타입스크립트를 사용하는 것에 주저함이 있을 것입니다. 특히 리액트와 같은 프레임워크와 각종 라이브러리들을 함께 사용해서 개발을 해왔다면 그 심적 부담은 더하겠죠. 이제 나름 자바스크립트와 프레임워크를 활용한 개발에 자신감이 생겨서 다음 단계의 스킬 셋을 쓰고 싶지만, 정확히 어디서부터 공부를 시작해야 할지가 막막한 사람들도 있을 것입니다. 그래서, 각자의 필요에 따라 준비해보았습니다. 딱히 제가 작성한 글을 소개해드리는게 아니라 유용한 레퍼런스들을 각자의 필요에 맞게 추천해드리고자 합니다. 1. 일단 해봐 : 타입스크립트를 이전에 조금이라도 맛본 적이 있기 때문에, 초 단기 속성으로 리액트 + 타입스크립트를 시도해보고 싶다. 진짜 말 그대로 '일단' 처음부터 끝까..

이 글은 JEST 공식 문서의 내용을 바탕으로 작성되었습니다. (참조: https://jestjs.io/docs/tutorial-react) 또한 아래의 영상의 내용을 참고하였습니다. (참조: https://www.youtube.com/watch?v=g4rMWtPNOr8) 스냅샷 테스트? 단순히 사용자가 무언가를 클릭하면 어떤 요소가 어떻게 보여야 한다는 식의 E2E 테스트만 하는 것 보다는 이전 렌더링 결과물과 신규 렌더링 결과물(HTML)이 조금이라도 차이가 있는지를 파악하는 것이 더 명확하고 안전한 테스트라고 볼 수 있습니다. 그리고 그것을 가능하게 해주는 것이 스냅샷 테스트입니다. 스냅샷 테스트를 하면 기존에 저장되어 있는 이전 렌더링 결과와 테스트 시점에 새로 생성되는 렌더링 결과를 비교해서 조..

이 글은 아래의 영상의 내용을 기반으로 작성되었습니다. www.youtube.com/watch?v=KWrGRZaBdgs 방법에는 총 두가지가 있습니다. 1. Break Point Mixin 생성 이 방법은 사용하는 것이 더 간단하지만 성능은 더 좋지 않습니다. // mixin 생성 @mixin breakpoint($size) { @if $size == mobile { @media screen and (min-width: 360px) { @content; } } @else if $size == tablet { @media screen and (min-width: 768px) { @content; } } @else if $size == laptop { @media screen and (min-width: 1..

이 글은 아래 영상의 내용을 바탕으로 작성되었습니다. https://www.youtube.com/watch?v=PFmuCDHHpwk 객체 지향 프로그래밍이란? 프로그램의 함수보다도 '객체'에 더 초점을 두는 프로그래밍 방식(패러다임)입니다. 일반적인 절차지향 프로그래밍은 엄청나게 많은 함수와 데이터들로 이루어져 있고 이 함수와 데이터들의 관계가 한눈에 알아보기 힘들 정도로 이리저리 꼬여 있는 경우가 많습니다. 어디서 무엇을 가져다 사용하는지가 분명하지 않은 상태이기 쉽고, 이를 '스파게티 코드'라고 부릅니다. 캡슐화 객체 지향 프로그래밍에서는 이를 막기 위해 관련 있는 데이터(변수)들과 함수들을 서로 묶습니다. 이 묶음을 '객체'라고 부릅니다. 함수는 메서드로, 변수는 속성으로 부릅니다. 이런 식의 묶음..

작업을 하다가 잠깐 작업을 중단해야하는 상황이 생겼는데, 커밋 내역을 만들기에는 애매할 때 쓰는 기능입니다. 지금 커밋이 아니라 이전 커밋에 반영해야 하는 사항등이 생각났을 때 써먹을 수도 있습니다. git stash 기본 동작으로는 git add 를 통해 staged 되지 않은 것은 stash 로 저장되지 않는다. 그런 것까지 전부 포함하고 싶다면 git stash -u(untracked) 를 쓰도록 한다. git stash list 스태시의 번호를 알아내서 불러오는데 활용한다. git stash apply 번호 스태시 안의 내용을 보고 싶다면 git stash show 번호 스태시가 저장한 변경 내역을 자세히 보고 싶다면 git stash show -p 번호 스태시를 저장할 때 그 스태시가 무엇인지 ..

이 글은 아래 링크의 영상들의 내용을 기반으로 작성되었습니다. https://opentutorials.org/module/4047 New 연산자의 이해 자바스크립트에서 'new' 연산자의 구체적인 역할은 잘 모르는 사람이 많습니다. 저 또한 그러한 사람 중 한명이구요. 이번엔 그 구체적인 역할에 대해 알아봅시다. 우리는 함수를 실행했을 때, 해당 함수에서 return 하는 무엇인가가 출력됨을 알고 있을 것입니다. 하지만 위와 같은 Person 함수의 경우, return 하는게 아무 것도 없기 때문에 콘솔에는 undefined 가 찍힙니다. 그러나 똑같은 함수에 new 연산자를 쓰면, 신기하게도 객체가 하나 리턴된 것을 볼 수 있을 것입니다. new 연산자는 옆의 함수를 '생성자(constructor)'로..

이 글은 아래 링크의 내용을 바탕으로 작성되었습니다. https://ui.toast.com/fe-guide/ko_CODING-CONVENTION 코딩컨벤션 코딩 컨벤션은 읽고, 관리하기 쉬운 코드를 작성하기 위한 일종의 코딩 스타일 규약이다. 특히 자바스크립트는 다른 언어에 비해 유연한 문법구조(동적 타입, this 바인딩, 네이티브 객체 조작 가 ui.toast.com 저번 코딩 컨벤션 글에 이어서 이번에는 TOAST UI 에서 알려주는 코딩컨벤션을 추가로 정리해보고자 합니다. 전의 내용과 겹치는 부분은 자동으로 뺐습니다. 숫자, 문자 단수형 이름을 사용합니다. 배열 복수형 이름을 사용합니다. 반드시 리터럴로 선언합니다. 배열을 복사할 시에 전개 연산자(...)를 최대한 활용해서 가독성을 높이도록 합니..

Intersection Observer 는 특정 Element 들을 감시하면서 해당 요소가 이용자의 브라우저 화면 안에 들어왔음을 탐지하면, 지정된 함수가 실행되도록 만들 수 있는 객체입니다. 사용법은 다음과 같습니다. // 먼저 observer 객체를 생성합니다. const observer = new IntersectionObserver(callback, options) // 생성 후 어떤 요소를 감시할 것인지를 지정합니다. 하나가 아니라 여러개를 하나의 // 옵저버로 감시할 수도 있습니다. IntersectionObserver.observe(element) Callback Function callback 은 말할 것도 없이 Intersection 이벤트가 발생했을 때 실행될 함수입니다. 이 콜백함수는..

이 글은 아래 영상 내용을 기반으로 작성되었습니다. www.youtube.com/watch?v=OJqUWvmf4gg 전체 형식 [(선택)scope]: [(선택) body] [(선택) footer(s)] type 이 커밋으로 인한 변경이 대략적으로 어떠한 유형의 변경인지를 명시합니다. 가장 대표적인 type의 예시로는 fix : 버그를 고쳤을 때 feat 혹은 feature : 기능과 관련된 변경 그 외 : build, style, chore, refactor, ci, test, docs Scope type 에 추가해서 넣을 수 있는 정보를 명시하고 싶을 때 사용합니다. 괄호 () 안에 명사만을 넣어야 합니다. 만일 엄청 중요한 커밋이라는 것을 명시하고 싶을 때는 ! 느낌표를 : 콜론 앞에 넣습니다. 딱히..