자바스크립트로만 개발을 해왔다면 갑작스레 타입스크립트를 사용하는 것에 주저함이 있을 것입니다. 특히 리액트와 같은 프레임워크와 각종 라이브러리들을 함께 사용해서 개발을 해왔다면 그 심적 부담은 더하겠죠. 이제 나름 자바스크립트와 프레임워크를 활용한 개발에 자신감이 생겨서 다음 단계의 스킬 셋을 쓰고 싶지만, 정확히 어디서부터 공부를 시작해야 할지가 막막한 사람들도 있을 것입니다. 그래서, 각자의 필요에 따라 준비해보았습니다. 딱히 제가 작성한 글을 소개해드리는게 아니라 유용한 레퍼런스들을 각자의 필요에 맞게 추천해드리고자 합니다. 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)'로..