Class6 TypeScript - 인터페이스 알아보기 안녕하세요. Hynn 입니다. 이번 포스팅에서는 타입스크립트에서 인터페이스의 의미와 사용에 대한 기본적인 사항을 학습해보도록 하겠습니다. 타입스크립트에서 인터페이스는 매우 중요한 개념으로 사용되며, 이 개념을 잘 사용하면, 코드의 재사용성, 구조를 향상하는데 큰 도움이 됩니다. ============= 1. 인터페이스란? 2. 인터페이스를 사용하여 얻는 이점 & 사용방법 ============= 1. 인터페이스란? 인터페이스는 타입스크립트에서 가장 중요한 개념 중 하나라고 생각됩니다. 바로 타입스크립트에서 코드의 품질, 유지관리성을 향상시켜줄 뿐 아니라, 협업에서도 인터페이스 정의를 사전에 협의하고 시작을 하면, 코드가 문서화가 되고, 이를 통해 가독성이나 품질을 향상시키는 가장 중요한 수단이라고 생각합.. 2023. 4. 27. TypeScript - 타입스크립트 기초 알아보기 안녕하세요. Hynn 입니다. 이번 포스팅에서는 JavaScript 의 상위 집합(superset) 이라고 불리기도 하고, 현업에서도 상당히 많이 사용되는 TypeScript 에 대해서 알아보도록 하겠습니다. JavaScript 의 특성과 한계적인 부분을 극복하기 위한 대체언어로 많이 사용되고, 이를 실제 작성해보는 과정을 가져보도록 하겠습니다. =========== HTML 삽입 미리보기할 수 없는 소스 =========== HTML 삽입 미리보기할 수 없는 소스 TypeScript, 즉 타입스크립트는 JavaScript 가 구조적으로 가지고 있는 문제점을 보완하는 역활을 하는 언어입니다. 즉, JavaScript 를 사용하여 개발하는 개발자들이 겪는 몇가지 문제점들을 구조적으로 개선하고, 보완하는 역.. 2023. 4. 18. React - 이벤트 처리하기 안녕하세요. Hynn 입니다. 이번 포스팅에서는 React 에서 이벤트를 어떻게 처리하는지에 대해 알아보도록 하겠습니다. DOM Elemenet 와 비슷하지만, 조금 다른 특징을 가지고 있기 때문에 이에 대해서도 인지를 하면 보다 효율적으로 작성이 가능합니다. 그럼 시작하겠습니다. ========== HTML 삽입 미리보기할 수 없는 소스 ========== HTML 삽입 미리보기할 수 없는 소스 React 에서 이벤트 표기는 CamelCase 를 사용하여 표기해야 합니다. CamelCase 는 비단 React 뿐 아니라, Programming 언어에서 일반적으로 사용되는 표기법입니다. 이것은 여러개의 단어를 하나의 이름으로 결합하고, 첫번째 단어만 소문자로, 그리고 난 뒤 각 단어의 첫글자를 대문자로 .. 2023. 2. 27. React - 생명주기(Life Cycle) 및 State 알아보기 안녕하세요. Hynn 입니다. 이번 포스팅에서는 생명주기(Life Cycle), 그리고 State 에 대해서 알아보도록 하겠습니다. React 의 기초사항으로 이 포스팅은 아마도 총 12개의 주제로 모두 세분화하여 업데이트를 할 예정입니다. 그럼 시작해보도록 하겠습니다. ========== HTML 삽입 미리보기할 수 없는 소스 ========== HTML 삽입 미리보기할 수 없는 소스 먼저 이전 포스팅에서 사용한 시계를 React 에서 구현한 코드를 가지고 그대로 사용을 해보도록 하겠습니다. 이전 포스팅, Element 단위 이해하기 포스팅에서 다루었던 코드를 그대로 활용할 예정입니다. 이전 포스팅에서 UI 를 업데이트 하는 방법은, 오직 "root.render()" 를 이용하여 출력하는 것을 배웠고,.. 2023. 2. 27. React - Component & Props 이해하기 안녕하세요. Hynn 입니다. 이번 포스팅에서는 React 에서 가장 중요하게 다루게 될 Component & Props 에 대해서 알아보도록 하겠습니다. React 를 다루기 위해서 가장 중요한 개념이 될 두가지를 알아보도록 하겠습니다. ========= HTML 삽입 미리보기할 수 없는 소스 ========= HTML 삽입 미리보기할 수 없는 소스 Component 는 크게 "Function Component", "Class Component" 두가지가 존재합니다. 즉 함수형 컴포넌트, 클래스 컴포넌트라고 불리우게 되는데, 이는 이미 JavaScript 에서 우리가 작성을 해보았던 개념입니다. 예시를 간단하게 살펴보도록 하겠습니다. 1) Function Component const Text = (pr.. 2023. 2. 24. JavaScript - 정적(Static) Method 에 관하여 안녕하세요. Hynn 입니다. 이번 포스팅에서는정적 Method 에 관하여 알아보도록 하겠습니다. Class 에서 사용하는 이 Static method 는 필요에 따라 사용하게 될 상황이 발생 할 겁니다. 이에 대해서 어떠한 용도인지, 어떻게 작성하는지에 대해서 알아보도록 하겠습니다. ============ HTML 삽입 미리보기할 수 없는 소스 ============ HTML 삽입 미리보기할 수 없는 소스 Class 내에서 사용하는 Static, 즉 정적 method 는 "Prototype" 이 아니라, Class 자체에서 Method 를 설정하는 것을 나타냅니다. 기초적으로는 아래와 같이 작성하면, 지정한 "method" 는 "정적" method 로 적용됩니다. 기본 작성은 아래와 같이 합니다. //.. 2023. 1. 11. 이전 1 다음
