본문 바로가기
728x90

Studying Web Development21

[TypeScript] Interface와 Class의 차이점 📕 기본 정의 인터페이스 인터페이스는 ES6가 지원하지 않는 타입스크립트만의 특징입니다. 인터페이스는 타입이며 컴파일 후에 사라집니다. 추상 클래스는 선언과 구현이 모두 존재하지만 인터페이스는 선언만 존재하며, 멤버 변수와 멤버 메서드를 선언할 수 있지만 접근 제한자는 설정할 수 없습니다. 클래스와 달리 인터페이스는 TypeScript의 컨텍스트 내에서만 존재하는 가상 구조입니다. TypeScript 컴파일러는 타입 체크 목적으로만 인터페이스를 사용합니다. 코드가 JavaScript 언어로 트랜스 파일되면 인터페이스에서 제거됩니다. 클래스 클래스는 ES6에서 JavaScript 생태계에 공식적으로 도입되었습니다. 클래스는 객체지향 프로그래밍 그 자체입니다. 객체지향 프로그래밍은 커다란 문제를 클래스라는 .. 2022. 7. 21.
입문자가 겪기 쉬운 console.log 관련 문제 모음 개발을 하다보면 console.log가 마음대로 작동하지 않아 애먹는 경우가 있습니다. 저도 같은 문제를 겪었었고, 이번에 면접을 보면서 제대로 알지 못했던 부분을 질문 받아 탈탈 털렸었기에 공부하며 알아보는 시간을 가졌습니다. 😂 입문자가 겪기 쉬운 console.log 관련 문제들을 알아봅시다. 😳 입문자가 겪기 쉬운 console.log 관련 문제 1 React를 사용할 때 setState를 실행하고 값이 바뀐것을 확인하기 위해 바로 밑줄에 console.log(state)를 해본 경험이 있을 것입니다. console.log는 새로 입력해준 값이 아닌 이전의 값을 출력합니다. 이유가 뭘까요? const [state, setState] = useState(0); const incrementState .. 2022. 7. 20.
❓❓nullish 병합 연산자 '??' ❓❓ nullish 병합 연산자 '??' nullish 병합 연산자(nullish coalescing operator) ??를 사용하면 짧은 문법으로 여러 피연산자 중 그 값이 ‘확정되어있는’ 변수를 찾을 수 있습니다. a ?? b의 평가 결과는 다음과 같습니다. a가 null도 아니고 undefined도 아니면 a 그 외의 경우는 b x = a ?? b와 동일한 동작을 하는 코드를 작성하면 다음과 같습니다. x = (a !== null && a !== undefined) ? a : b; 또 다른 예시를 살펴봅시다. nullish 병합 연산자 ??를 사용하면 값이 정해진 변수를 간편하게 찾아낼 수 있습니다. let firstName = null; let lastName = null; let nickNam.. 2022. 7. 20.
📕 리팩터링 2판 리뷰: Intro, 1장 📕 리팩터링 2판 : 코드 구조를 체계적으로 개선하여 효율적인 리팩터링 구현하기 리뷰 리팩터링 2판의 Intro와 1장을 읽고 왔습니다. 예시 코드가 많아서 그냥 훑어봐서는 금방 이해가 되지 않아 하나하나 타이핑하며 읽어봤더니 어느정도 이해가 되는 것 같습니다. 덕분에 읽는 시간은 조금 오래 걸렸습니다. 😅 나중에 제가 다시 찾아보기 쉽게끔 정리해봐야겠다 싶어 보기 쉽게 정리하며 공부중입니다. 그리고 원래는 책을 읽으면서 개인 토이 프로젝트의 리팩터링도 병행하려고 했는데, 시간이 조금 걸리겠지만 책을 끝까지 정독하고 진행하기로 마음을 돌렸습니다. 그럼 이제 각설하고, 리팩터링 2판의 Intro와 1장의 리뷰를 시작해보겠습니다. ⭐️ Intro Intro에서는 필자(마틴 파울러)가 컨설턴트로서 프로젝트 팀.. 2022. 7. 5.