Yubmun Blog

Notes and Activities 내용

2023-04-10T00:00:00+09:00

Work Notes and Additional Comments

Work notes와 Additional Comments에 대한 내용

On a record, you can use the Notes tab to communicate to stakeholders and document task activities throughout the task’s lifecycle.

record에서 Notes 탭을 사용하면 관련자와 소통하고 작업중의 활동을 문서화할 수 있다. 추가 설명을 포함하고 Notes 탭 아래에 여러 필드를 표시할 수 있다.

Once enabled, you can then select the Show one journal field icon to only display the Work notes field.

활성화가 되면 journal field icon 을 선택해서 메모한것만 표시할 수 있다.

If the Work notes field is the only field displayed, you may select the Additional Comments(Customer visible) checkbox(not shown below, but you may practice this in your instance).

메모한 게 표시되는 유일한 필드의 경우에는, 추가 설명 확인란(Additional Comments)을 선택할 수 있다. 이 추가 설명은 customer에게 보여질 수 있고, instance(실습환경)에서 연습할 수 있다.

Work notes 에는 메모할 것들을 쓰고, Additional comments에다가는 Customer에게 더 보여져야 할 내용들을 작성하고, Show one journal field 버튼을 누르면 고객에게 보여질지 말지 작성하는 것인가보다.

Work notes

This field provides a way to document all the technical and behind-the-scenes work on a task.

Work notes 필드는 작업에 대한 비하인드 스토리 작업을 문서화하는 방법을 제공한다.

Upon saving, Work notes are recorded in the record Activity section, where they can be viewed by users with permissions to view the record.

저장할 때, Work notes는 record 보기 권한을 가진 user가 볼 수 있는데에 기록된다

Work notes are only visible to internal users and are not available to external users or customers.

Work notes는 내부 user에게만 표시되고, customer나 외부인은 사용할 수 없다.

Additional comments(Customer visible)

추가적인 댓글이란 의미이다.

this field provides a way to communicate with the requester and other stakeholders directly in ServiceNow.

이 Additional comments는 ServiceNow에서 의사소통을 요청하는 사람이나, 기타 이해관계자들(stakeholders)과 통신할 수 있는 방법을 제공한다.

For example, you may want the customer to stay up to date of progress on thier record or request additional information.

예를 들면, customer가 현재 상황에서 record 최신화를 요청하거나, 추가정보를 요청할 수 있다.

Upon saving, the additional comments(including updated information and comments history) are emailed directly to the requester.

저장할 때, 업데이트 된 정보나 댓글이 포함된 additional comments를 requester에게 직접 이메일로 전송이 된다.

When the requester receives an email notification containing additional comments, they can reply to the email, and their feedback will also be documented in the Activity log of the record!

requester가 그 이메일을 받으면, 회신할 수 있고, 그 피드백들은 로그에 기록된다.

Additional comments are also visible on the record in the Service Portal and Employee Center.

Additional comments는 Service Portal이나 Employee Center에서도 볼 수 있다.

Activity section

The Activity section located under the Notes tab provides a complete history of a record, from creation through closure.

Activity section은 Notes 탭 아래에 위치하고 있고, 생성되고 종료되기까지의 전체 기록을 제공한다.

It details who made an update, what the update was, and when the update was made.

update한 사람, 내용, 시기에 대해 자세하게 작성되어있다.

Selecting the filter icon allows activity information to be filtered, based on your desired categories of information.

filter icon을 누르면, 원하는 정보 범위에 따라 활동 정보들을 필터링 할 수 있다.

filter icon 눌러서 활동정보 필터링 하는 스크린샷

The Activity section, which is read-only, documents when a change was made and by whom.

Activity section은, 읽기전용이고, 변경시기와 작성자에 대해 기록한다.

These changes include assignment and reassignment, additional comments and work notes, updated field values, state changes, and more.

이런 변경은, 할당이나 재할당, additional comments 와 work notes, 업데이트된 필드값, 상태 변경등이 포함된다.

Activity Stream inline editing

Activity 활동들 inline에서 편집하기

The Activity Stream inline editor enables users to contribute to actual work within a record without opening a form interface.

Activity Stream inline editor를 사용하면, user가 form interface 없이 실제 작업에 기여할 수 있다.

Just like real-time editing on a form, inline commenting on the activity stream means you can annotate records as updates are made, allowing multiplied efforts across several pieces of work simultaneously.

실시간 편집과 더불어, inline commenting 인라인 주석은 업데이트가 진행될 때 record에 주석을 달 수 있기에 여러 작업에서 동시에 작업할 수 있다는 장점이 있다.

To do so, navigate to a list of active task records, then follow the steps below.

그렇게 하려면, 다음과 같이 단계를 따라야 한다.

Select the Show Activity Stream icon and it will appear in a flyout window from the list header.

1번 옆에있는 아이콘 누르면, 헤더가 나올거고

With the window open, scroll down to browse the records recently updated and hover over an update you wish to comment, then select Comment.

창이 열리면, 아래로 스크롤하고 최근에 update 된 record를 찾아보고, Comment 버튼 누른다

Enter your comment into the text field, (select the checkbox for Work Notes or Additional comments (Customer visible) if applicable), then select the Post button.

text field에다가 comment 입력하고, Work notes에 해당하는지 Additional comments에 해당하는지 확인란 선택한 후에 Post 버튼 누른다.

Visual Task Boards(VTBs)

보이는 태스크 보드라는 의미

Transform your lists and forms into an interactive graphical experience using Visual Task Boards(VTBs).

Visual Task Boards를 이용해서 list나 form을 인터렉티브 그래픽 환경으로 변환한다.

어떤 일을 수행하냐면,

Manage tasks through a visual, drag-and-drop interface

drag-and-drop 마우스 갖다 끌어서 작업관리 가능

Identify process bottlenecks at a glance, in real-time

process 병목변항을 실시간으로 확인가능

Track embedded activity screens to view updates all in one place

모든 업데이트를 한곳에서 확인 가능

Select the plus (+) signs below to learn more about the different sections of a VTB.

Visual Task Board의 여러 섹션들을 알아보려면 + 버튼을 선택

Service now [Forms] 문제

2023-04-09T00:00:00+09:00

Forms 문제 정리

1. What area in a form displays records from tables that have a relationship to the current record?

-> 현재 기록과 관계있는 표의 기록을 표시하는 form의 영역은 무엇인가?

Fields => 필드
Related activities => 관련 활동란
More options => 추가적인 옵션
Related lists => 관계 리스트들

답은 4번. Related lists 이다.

Related lists는 현재 기록과 관계있는 표의 레코드를 표시하는 곳이다. 외우자.

2. How would you select which fields on a form you want to display?

-> 표시하고자 하는 form 분류는 어떻게 선택하는가?

Select More options
Select Personalize Form
Select Choice fields
Change the form view

답은 2번. Select Personalize Form 이다.

개별화 (개인설정?)을 통해 표시하고자 하는 폼 양식 필드를 선택할 수 있다.

3. What are the two options to hide a field from a form through form personaliztion?(select two answers)

-> 개별화를 통해 form에서 필드값을 숨기는 두가지 옵션은? (두개 고르시오)

Uncheck the field’s box
Select the form and press Delete
Select the Hide field icon
Change the form view
Reset the form view

답은 1번과 3번

Uncheck the field’s box, 필드 상자를 선택하지 않거나,

Select the Hide field icon, 필드 숨기기 아이콘을 선택하거나

4.Which fields cannot be hidden on a form?

-> form 에서 숨길 수 없는 필드는?

Restricted fields => 제한된 필드
Any fields can be hidden => 어떤거든 숨길 수 있다
Work notes => 작업노트
Mandatory fields => 필수 필드

답은 4번. Mandatory fileds, 필수 필드이다.

5. Match each form function to its description.

-> 설명과 맞는것들을 짝짓는 문제인데, 그냥 정답만 나열한다.

Manage Attachments: Add or remove files by selecting the file attachment(paperclip) icon. -> 종이클립버튼을 눌러서, 파일을 추가하거나 제거하는 기능인 Manage Attachments.
More options icon: Email, Toggle Template Bar, Annotations, and Tags. -> … 으로 생긴 아이콘 누르면, 이메일, 토글 템플릿 바, 주석, 태그 생성 등 할수있다.
Save : Apply changes and remain on a form. -> 변경사항 적용 및 양식 유지할때 Save 사용
Submit : Apply changes to a new record and return to the previously viewed page. -> 새 레코드에 변경사항을 적용하고, 이전에 본페이지로 돌아가기는 Submit 버튼 사용
Update : Apply changes to a record and return to the previously viewed page. -> 레코드에 변경사항을 저장하고 이전에 본 페이지로 돌아가기는 Update 버튼 사용

시스템 화면을 보면서 다시한번 기억하자.

border겹침 현상이 있다면?

2023-04-04T00:00:00+09:00

table을 태그를 써서 border값을 줬더니, border겹침 현상이 일어났다.

이럴땐 border-collapse: collapse; 속성을 주면 해결 된다.

간격을 넓히고 싶다면, border-collapse: sepearate; 주면 된다.

<table>
  <th>가나다라</th>
  <tr>
    <td>마바사</td>
    <td>아자차</td>
  </tr>
</table>

th {
  border-top: 1px solid black;
  border-left: 1px solid red;
  border-right: 1px solid red;
}

이런식으로 작성이 되어 있으면, border-left와 right 부분만, top부분보다 위로 보여지게 되는 안타까운 현상이 발생하게 된다.

이럴때엔, <th> 태그 밑에 HTML 요소를 추가해서 border 겹침 현상을 해결할 수 있다.

퍼블리셔 면접 후기

2023-03-24T00:00:00+09:00

면접 보고 온 후기

국민취업제도에서의 상담을 통해 일경험 프로그램이 있다는 사실을 알게 되었고, 연계를 통해 이력서를 넣고 면접을 보게 되었다.

지원한 직무는 웹 퍼블리셔 직무였고 주로 다루는 기술은 HTML, CSS, JS 등 이었다. 프론트엔드 개발자로 성장하기 위해 실무에 빨리 뛰어들고 싶은 마음이 컸기에 망설임 없이 달려갔다.

면접은 1분 자기소개, 이력서를 기재된 궁금한 내용 질문, 기술면접 세가지로 이루어졌고, 회사에 대한 소개와 현재 개발자 시장의 추세에 대해서도 말씀해주셨다.

기술면접 질문

CSS의 기본적인 내용에 대해서 질문해주셨고 질문 문항은 다음과 같다.

CSS를 작성했을 때, 적용되는 우선순위에 대해 말씀해주세요.
display: flex 속성을 썼을 때, 자식요소가 어떻게 변하는지 말씀해주세요.
align-items 의 default 값에 대해서 말씀해주세요.
position 속성에 대한 설명과 default 값이 뭔지 말씀해주세요.
HTML 파일에서의 태그를 가로정렬 할 때, 어떤 방법을 사용할 수 있는지 말씀해주세요.

이렇게 다섯가지의 질문을 던져주셨고, 타입스크립트와 리액트를 위주로 공부하고 있던 나는, 기억나는대로 답변을 하긴 했다.

5번 문항은 가로정렬에 대해 아는 게 없어서, 요소들을 화면상에서 가로배치하는 방법에 대해 말씀하시는 건가요? 라고 물어봤지만, 코드 자체를 한줄로 나열하는 방법에 대해 물어본거였다고 해서, 잘 모르겠다고 했다.

느낀점

기본적인 CSS 문항에 대해 질문이 들어와서 나름 다행이었지만, 정확하게 설명하진 못했던 것 같다. 아무래도 si 회사이다보니, output에 대한 기대가 가장 컸다고 생각했고, 나에게 부족한 부분이지 않을까란 생각이 들었다.

열심히 공부하고, 그에 맞는 프로젝트 결과물이 있어야 된다고 생각한다. 뭐라도 만들자는 마음가짐을 갖고 하나씩 시도해야겠다.

또한 기술면접에 관련된 문항이 너무 많으니, 틈틈히 차근차근 머릿속에 집어넣고 숙지해야겠다는 생각이 들었다. 개발공부를 생활화하는게 좋겠다. 그리고 꼭 기록해서 기억에 남겨야겠다.

SPA, CSR, SSR에 대하여

2023-03-23T00:00:00+09:00

SPA

Single Page Application의 약자로, 최초 한번 페이지를 전체 로딩한 후 부터 데이터만 변경해서 사용할 수 있는 웹 애플리케이션을 말한다.

장점으로는, 하나의 페이지로만 구성이 되어있기 때문에 페이지가 달라지며 발생하는 화면 깜빡임 현상이 없다.

단점으로는, 시멘틱한 마크업으로 작성해도 검색엔진에 노출이 되지 않는다는 점이 있다.

CSR

Client Side Rendering 의 약자로 최초 로드시에 필요한 파일을 모두 받아오고, 사용자의 인터렉션에 따라서 클라이언트 측에서 받아와 렌더링을 해주는 방식이다.

장점으로는, 렌더링 속도가 빠르다는 점.

단점으로는, 최초 로드시에 뼈대만 다운받아지기 때문에, SEO 에 취약하다.

SSR

Server Side Rendering의 약자로, 요청시 마다 새로고침이 일어나고, 서버에 새로운 페이지를 요청하는 방식이다.

이미 다 만들어진 DOM 객체를 받으며, 렌더링 속도도 빠르고 SEO 에 최적화되어 있다.

단점으로는, 렌더링마다 서버를 거쳐서 렌더링되므로 속도가 느리다는 점이다.

var, let, const의 차이?

2023-03-22T00:00:00+09:00

어떤 차이가 있나?

var

변수 재선언과 재할당 모두 가능하며, 호이스팅이 일어난다.

함수 스코프를 가지고 있으며 ES5까지 사용되었다.

var a = 'test';
var a = 'test2';
// 동일한 변수명으로 선언해도 에러가 나지 않는다.

c = 'test'
var c;
// 호이스팅으로 인해 레퍼런스 에러가 발생하지 않는다.

let

변수 재선언은 불가능하고, 재할당은 가능하다.

let a = 'test';
let a = 'test2'; // Syntax에러

let abc;
abc = 'apple';
// 할당을 선언 뒤에 해도 문제되지 않음.

const

변수 재선언, 재할당 모두 불가능.

선언과 동시에 값을 할당해야만 함.

단, object자료형일 때 재할당에 대해 헷갈릴 수는 있다.

const a = 'test';

const a; // error

나만보기 편한 redux 요약

2023-03-21T00:00:00+09:00

Redux는 props drilling을 피하고 전역 상태관리를 위한 라이브러리이다.

사용 방법에 대해 여러 블로그와 공식문서를 참고하여 연습해봤다.

사용 방법

1. Action 을 만든다.

useState를 쓰지 않는 Redux에서는 프로퍼티로 type이 들어가는 객체를 선언해야 한다.

const junyub = { type: "JUNYUB" };

action을 만드는데에는 두가지방법이 있다.

위처럼 object 자료형을 선언하는 방법과, 액션생성 함수를 만드는 방법이 있다.

function junyub (num) {
	return { type: "JUNYUB", payload: num } 
}

액션 생성함수를 만들어주게 되면, 항상 동일한 객체가 return 된다는 점이 다르다.

이 액션을 선언하면, 나중에 dispatch를 통해 스토어에 전달하게 되는데, 그때 dispatch함수 아규먼트 자리에 함수를 쓸거냐, object자료형을 쓸거냐의 차이이다.

2. reducer를 작성한다.

하나의 state에 변경할 함수 로직들을 작성하는 reducer를 만들어야 한다.

function junyubReducer(state = {count: 0}, action) {
	switch(action.type){
		case "JUNYUB":
			return { ...state, count: state.count + action.payload }
		default:
			return state;
	}
}

reducer함수에는 파라미터가, 적용할 state가 첫번째, action 객체가 두번째이다.

우리가 선언했던, 액션이라는 객체가 두번째 파라미터로 들어오게되고, 선언했던 type파라미터자리가 switch문에 action.type으로 들어간게 보인다. state가 어떻게 변경될지에 따라 액션 생성을 추가하여 switch문의 case에 추가한다.

보통 이 action 과 reducer는 redux폴더에 module 파일에 작성한다고 한다.

리액트 프로젝트에서 리덕스 라이브러리를 사용한다면, 경로를 위와 같이 지정한다

지금까지 만들었던 action과 reducer들은 module.js 파일에 들어가고,

그 리듀서들을 스토어에 등록해야 된다.

3. store를 만들고, reducer를 등록

import { combineReducers, createStore } from 'redux';
import { countReducer, reducer } from './module';

const rootReducer = combineReducers({
  reducer: reducer,
  countReducer: countReducer,
})

export const store = createStore(rootReducer);

프로젝트에서 전체적으로 store는 하나이다.

프로젝트에서 하나의 상태만 관리하는게 아니기 때문에, combineReducers로 정의했던 상태변경 리듀서들을 rootReducer라는데에 모아버린다.

위에서의 코드는 두개의 리듀서가 rootReducer에 combineReducers()함수를 통해 등록되는 것이다.

다시말해, 여러 리듀서가 존재하지만, 그걸 하나로 합쳐주는게 combineReducer() 함수고, 그걸 rootReducer라는 변수에 담았다.

그리고 store에는 rootReducer만 올라가면 모든 리듀서가 store에 올라가게 된다.

이렇게 하는 이유는, store를 여러개 생성할 수 없기 때문이다.

4. 상태관리를 적용할 컴포넌트에 Provider 등록

보통 전역상태관리에 의의가 있으니 index.js 나 app.js에 작성하긴 한다.

// App.js
import React, { useState } from 'react';
import { Provider } from 'react-redux';
import { Main } from './components/Main';
import { store } from './redux/store';

export default function App() {
  return (
    <div id="container">
      <h1>Root</h1>
      <div id="grid">
        <Provider store={store}>
          <Left1 />
          <Right1 />
          <Main/>
        </Provider>
      </div>
    </div>
  );
}

하위 컴포넌트들인 Left1, Right1, Main 컴포넌트에서 store에 담긴 상태들을 갖고가서 쓸 수 있다.

Left1에 자식 컴포넌트, Right1의 자식컴포넌트 등등 app.js 파일에서 보이지 않는 자식컴포넌트들에게도 상태관리가 가능하다.

5. useSelector랑 useDispatch써서 상태관리하기

Main 컴포넌트에서 상태관리를 한다고 가정하자.

useSelector는, 말 그대로 store에 등록되어 있는 state를 선택하는거다.

사용 방법은 다음과 같다

import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { counterAdd, counterMinus } from '../redux/module';

export const Main = () => {
  const number = useSelector((state) => state.countReducer.count);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={()=> {dispatch(counterAdd(5))}}>+</button>
      <button onClick={()=> {dispatch(counterMinus(5))}}>-</button>
    </div>
  )
}

먼저, react-redux에서 useDispatch와 useSelector를 import 해와야 하고,

Main 컴포넌트에서

const number = useSelector((state) ⇒ state.countReducer.count); 한거가 보인다.

우리가, 리듀서를 만들때, 그 리듀서 이름이 countReducer였을거고, 그 안에 들어간 state 이름이 count 였다.

export function countReducer(state={count : 0}, action){
  switch(action.type){
    case "COUNTER":
      return { ...state, count: state.count + action.payload }
    case "MINUS":
      return { ...state, count: state.count - action.payload }
    default:
      return state;
  }
}

이렇게 쓰이니깐 리듀서 작명과, state 작명도 잘 해야된다.

어쨌든, 스토어에 있는 리듀서를 보고, state를 선택해서 number라는 변수에 담았다.

그럼 이제 리듀서에 등록되어 있던 상태변경을 어떻게 하는지 보겠다.

버튼이 두개있고 onclick했을때 콜백함수로 dispatch가 실행된다.

그리고 dispatch() 아규먼트 안에 함수 실행이 또 있다. counterAdd(5);

이건, 우리가 액션을 만들때 액션생성함수로 정의해서 이렇게 쓸 수 있는거다.

function counterAdd(num){
	return { type: "COUNTER" , payload: num }
}

counterAdd(5)라는건 결국 { type : “COUNTER” , payload: 5 } 를 dispatch로 넘겨주는 것과 똑같다.

여튼 저렇게 객체가 넘어가면, store에 있는 reducer에 전달이 되고 switch문에 있는 case들 중 return할 작업을 마친다음 상태를 변경해준다.

리덕스를 쓸 때 기억해야 할건 다섯가지

액션을 만든다. (객체로든 함수로든)
리듀서를 만든다. (하나의 state를 관리할 리듀서이다)
스토어에 리듀서를 등록한다 (여러개의 리듀서라면 combineReducers로 합치는 작업 필요)
전역상태관리니깐 Provider 범위설정해준다.
useSelector, useDispatch써서 상태 선택, 변경 진행

이런 순서로 작성해주면 되고, 파일구조도 조심해서 사용하면 되겠다.

index signatures, keyof연산자, infer?

2023-03-16T00:00:00+09:00

index signatures

너무 많은 프로퍼티, 속성값들을 통일시켜야 할 때 index signatures 문법을 사용할 수 있다.

예를들면 object 자료형에 모든 속성 값들이 string 타입을 가져야 한다고 가정했을 때

let junyub: { name: string, age: string } : { name: "junyub", age: "30" }

이런식으로, 프로퍼티의 이름과 타입을 작성하여 타입지정이 이루어졌는데 name, age 따로따로 부여해줄게 아니라 한번에도 부여가 가능하다는 것이다.

type JunYub = {
  [key: string]: string;
}

let obj: JunYub = { name: "junyub", age: "30" }

type JunYub은 모든 string 타입을 갖는 key 에 값의 타입을 string으로 지정했다.

때문에 object 자료형에서 어떤 string으로 쓰여지는 프로퍼티 key 라면 모두 값의 자료형을 string 타입을 갖는다는 것이다.

타입은 union type, Literal type 모두 지정이 가능하다.

타입이 Literal type, union type도 지정이 가능하다 했으니 다음 object도 정의할 수 있다.

interface MyType {
	"font-size": MyType | number
}

let obj: MyType {
  "font-size" : {
		"font-size": {
			"font-size": number
		}
  }
}

이렇게 속성의 자료형도 object인 형태가 있다면, interface를 정의한 타입을 그대로 정의할 수 있다.

keyof 연산자

object 자료형에 사용하게 되면, object 타입이 갖고 있는 모든 key를 union type으로 갖게되는 연산자다.

interface Person {
	age: number;
	name: string;
}

type PersonKeys = keyof Person;
// "age" | "name" 타입이 된다.

그렇다면 위에서 사용한 index signatures 문법을 쓰면 어떤 결과가 나오나?

interface Person {
	[key: string]: number;
}

type PersonKeys = keyof Person;
// string | number 타입이 된다.

keyof 연산자로 타입 변환기 만들기

만약 정의한 type을 모두 변경해야할 일이 생긴다면 다음과 같이 진행할 수 있다.

type Car = {
	color: boolean,
	model: boolean,
	price: boolean | number,
}

type TypeChanger<T> = {
	[key in keyof T]: string;
}

// Car 로 정의한 타입 속성들을 모두 string 으로 변경하고 싶다면 아래와같이 진행하면 된다.
type NewCar: TypeChanger<Car>;

코드를 분석해보자면,

[key in keyof T] 라는 index signature 문법이, 모든 T의 프로퍼티 key 값들을 의미하니까

제네릭 타입으로 들어오는 Car라는 타입의 속성 프로퍼티 key 들이 TypeChanger의 key 값이되고, 그 값의 타입은 string이 되어, NewCar라는 타입의 속성값들은 모두 string 타입을 갖게 되는 것이다.

쓸일이.. 많이 있을까 싶다..

infer 키워드

type Person<T> = T extends infer R ? R : unknown;

제네릭 타입이 들어간다면, 개발자가 Person 타입을 사용할때 <> 안에 타입을 넣을 수 있었다.

저기서 extends는 포함하고 있느냐는 의미로 T extends string 이면, T 가 string 입니까? 라는 조건식이 될수도 있다.

그래서 삼항연산자를 사용한 것이고,

infer 키워드는, R이라고 작명한데에다 T에서 타입을 유추한대로 집어 넣는 역할을 한다.

위 처럼 쓰지는 않고, 보통 함수 제네릭 타입이나 배열 등에서 쓰인다고 한다.

type Person<T> = T extends (infer R)[] ? R : unknown;

type NewPerson = Person<boolean[]> // NewPerson의 타입은 boolean[] 이 아닌 boolean

type Person<T> = T extends ( () => infer R ) ? R : unknown;

type NewPerson = Person<() => number >
// NewPerson의 타입은 number

이런식으로 사용하면 infer 키워드를 유용하게 쓸 수 있다고 한다.

infer 키워드 뒤에 R 이라고 써있는 건, Result를 의미하며, 다른 이름으로 사용해도 무방하긴 하다.

tuple type, declare, d.ts파일?

2023-03-15T00:00:00+09:00

tuple type ..?

object 자료형의 타입을 지정해줄 때,

let obj: { age: number, name: string } = { age: 20, name: "kim" }

이런식으로 타입을 지정해줬다. 물론 type alias를 사용하거나 interface로 지정한다음 사용했던게 더 깔끔하긴 했다.

array의 자료형에도 object자료형 같이 들어올 타입을 지정해줄 수 있다. (물론 array 도 object 자료형이라고 볼 수도 있지만)

let arr: [string, number] = ["123", 123];

작성은 위와같이 하며, union type, optional 기호도 작성할 수 있다.

단, optional 기호는 맨뒤에 작성해주는 것이 룰이며, 중간에 끼면 말도안된다고 한다.

spread 문법으로 index에 들어온다면 tuple type을 어떻게 지정해주나?

let arr: number[] = [1,2,3];
let arr2: [number, ...number[]] = [4,5, ...arr];

arr2의 tuple type을 저렇게 지정해줘야, 두번째 index가 spread 문법이 활용된 배열(?) 이 인덱스로 받아질 수 있다.

함수에서 마찬가지로 rest parameter 에도 동일하게 적용시킬 수 있겠다.

function junyub (...x: [number, string, ...number[]]) {
  
}

이런식으로, rest parameter의 타입도 tuple type으로 지정이 가능하다.

이러면 파라미터 자리에, 0번째 index가 number, 1번째 index가 string, 2번째 index부터는 쭈우우우우욱 모두 number 타입이 적용된다.

declare 키워드

외부 라이브러리를 사용할때나, 작업했던 js 파일을 ts파일에서 사용한다면 타입지정이 안되어있어서 많은 오류들이 발생한다.

그럴때, js파일에 정의되어 있는 변수들을 사용하고싶을 때 쓰는게 declare 키워드이다.

이 declare 키워드는, tsc -w 로 js 파일로 변환할때 직접적으로 쓰여지는건 없다. 컴파일을 진행할때 컴파일러한테 힌트를 주는 코드라서 그렇다고 한다.

js 파일에서 정의된 변수들을 ts파일에서 활용하고 싶다면 declare 키워드를 써서 재정의 한 후에 사용하자.

ts 파일에서의 특징

ts파일에 정의된 변수들을 쓸 때는, declare 쓸 필요 없이 import export 문법 잘 써주면 된다.

근데 같은 경로에 있는 파일이라면, import export를 쓰지 않아도 변수를 갖고와서 쓸 수 있다.

그 이유가 ts 파일에서 정의된 애들은 다 global 변수 취급을 받기 때문이다.

이걸 전문용어로 ambient module 이라고 한다.

근데, import export 문법이 쓰인 파일에서는, ambient module이 적용되지 않는다. import export 문법이 쓰이면 자동으로 로컬모듈로 바뀌게 된다.

작업하고 있는 ts파일이 다른 파일에 영향끼치는걸 막고싶으면 export{} 를 코드에 추가해주면, 로컬모듈로 전환되니깐 그렇게 쓰면 된다.

그렇게 export{} 코드 추가해주고 쓰다가 글로벌로 써주고 싶다면?

declare global{
  type Junyub = string;
}

이렇게 declare 키워드를 붙여서 글로벌로 만들어줄 수 있다.

전에 배웠던 namespace 키워드라고 생각해도 된다고 한다. 로컬모듈에서 전역변수를 선언하는 방법이라고 생각하면 되겠다.

d.ts 파일?

두가지 역할을 한다.

타입정의만 하고 import 해서 쓰는 파일으로 쓰거나
타입을 쭉 정리해놓는 레퍼런스로만 쓰거나

1번의 역할을 할때엔, d.ts 파일이 그냥 ts파일과는 차이가 있어서, export 를 쓰지 않으면 전역변수처럼 쓰일 수 없다. ,, import export 문법을 활용해서 써야 한다.

2번의 역할을 할 때엔 tsconfig.json 파일에다

{
  {
    "compilerOptions": {
      ...
      "declaration": true,
    }
  }
}

declaration: true 속성을 추가해주면 자동으로 ts 파일에 정의한 변수, 타입들이 모두 d.ts파일에 작성된다.

import export 없이 d.ts 파일을 글로벌 모듈로 만들고싶다면?

마찬가지로 tsconfig.json 파일에 속성을 추가해주면 된다.

{
  {
    "compilerOptions": {
      ...
      "declaration": true,
      "typeRoots": ["파일경로"],
    }
  }
}

이렇게 쓰는것 보단, import export 문법으로 사용하는게 더 안전하다고 한다.

유명한 라이브러리들은 d.ts 파일에 정의해둬서 타입스크립트 프로젝트를 진행할때 타입지정해주기 용이하다고 한다. 예를들면 jQuery 같은

타스 공홈에서 라이브러리 이름을 검색하면 d.ts 파일을 다운받을 수 있으며, 너무나도 대표적인것들은 npm에서 제공하니깐 터미널에서 다운받을수도 있다.

Generic 타입에 대한 이해

2023-03-14T00:00:00+09:00

Generic 타입은?

지정해주는 type을 파라미터 처럼 사용하는 문법이다.

그 타입은 <> 괄호 안에 넣어주면 된다.

function 함수(x: unknown[]) {
  return x[0];
}

let result = 함수([4,2]);
console.log(result);
console.log(result + 1); // error

콘솔에 result 를 찍어보면, 4가 출력된다.

단, result의 타입은 number가 아닌 unknown으로 나온다. 타입스크립트에서 타입을 알아서 변경해주지 않기 때문이다.

그 말은, result가 4가 아니기에 + - 와 같은 숫자 타입에서의 계산이 안된다는 말이다.

때문에 result + 1 을 입력하면 에러가 발생하게 된다.

이러한 문제를 해결하려면 Narrowing을 잘 하면 되는데, 그걸 더 간결하게 하기 위해서 제네릭 타입이 존재한다.

function junyub<T> (x: T[]) :T {
  return x[0];
}

let result1 = junyub<number>([4,2]);
let result2 = junyub<string>(["kim", "park"]);

junyub() 함수에는 타입을 따로 지정해주지 않았다. 제네릭 타입으로 T라는 임의의 타입을 설정해뒀으며, 함수의 파라미터 타입, return 타입도 모두 동일한 타입이 되게끔 작성했다.

result1 이라는 변수를 선언, 할당할 때 junyub<number>([4,2]) 를 보면, 가 들어가기에 junyub() 함수에 작성되어있던 부분에 number가 들어간다.

function junyub<number> (x: number[]) :number { return x[0] } 

그럼 함수가 위와같이 동작하게 된다.

result2도 마찬가지로 string이 들어가니, 동일하게 동작할 것이다.

그렇다면,

function junyub<T> (a: T) :T {
  return a + 1; // error
}

let result = junyub<number>(1);

위의 코드는 왜 에러가 날까?

그 이유는 타입 파라미터처럼 쓰이는 제네릭 타입 작성부분에 number 가 들어갈 보장이 없기 때문이다.

변수를 선언, 할당할때 를 작성해주는데, 개발자가 이라고 쓰면 안되니깐. 타입스크립트에서는 string 타입에 +1 을 할 수 없으니깐 잘못된거라고 미리 컴파일에러가 발생하는 것이다.

이럴때 사용하는것도 Narrowing이지만, extends 키워드로 들어오는 타입을 제한할 수 있다.

이를 constraints라고 부른다.

function junyub<T extends number> (a: T) :T {
  return a + 1;
}

let result = junyub<number>(1);

extends 키워드를 <> 제네릭타입 넣는데에 작성해서 넣어주면, 상속의 개념과는 조금 다르게 동작한다.

T 라는 제네릭 타입에 number 타입만 오도록 제한한다 라는 의미이다.

interface 와 class에서 사용하는 extends와는 다르니 유의해야 한다.

헷갈렸던 커스텀 타입 extends

string으로 제네릭타입을 넣으면 자릿수를 세어서 출력해주는 함수를 만든다고 가정한다.

function junyub<T extends string> (a: T) :number {
  return a.length;
} 

let result = junyub<string>("가나다");

이렇게 작성해도 훌륭하게 동작한다. 근데 extends 하는게 커스텀 타입이라면 ?

interface MyType {
  length: number;
}

function junyub<T extends MyType> (a: MyType) :number {
  return a.length;
}

let result = junyub<string>("가나다");
let result2 = junyub<number>(123); // error

이게 많이 헷갈렸다.

type alias 든 interface든, 미리 개발자 입맛에 맞게 타입을 선언하고, 변수나 함수에 타입처럼 쓰이는 문법이 제네릭에 들어가게 됐다.

junyub() 함수의 제네릭 작성 부분에 를 작성하면, T 라는 타입은 MyType에 정의된 length 속성을 복사해서 갖게 된다.

그래서 return을 작성할때 a.length라는 속성에 접근이 가능해진다. MyType이라는 인터페이스에 length라는애가 있으니깐.

그리고 result 변수를 선언,할당할 때 제네릭 타입에 string을 넣었다. 그렇다면 결국 string 객체에 있는 length 속성에 접근하여 a.length에 대한 값을 갖게 될것이다.

그러니깐, MyType 인터페이스는 junyub() 함수의 return에 length를 쓰기 위해서 그냥 넣어준 속성이다. 그리고 변수를 선언, 할당할 때 string 타입이 아닌 다른 number 타입같은게 들어오면, number 객체에는 length 속성이 없으니깐 에러가 나는 것이다.

그래서 let result2 = junyub<number[]>([1,2,3,4]); 로 바꿔서 입력해보니, array 자료형에는 length 속성이 존재하니깐, 에러가 나지 않았다.

class 에서도 제네릭 타입 가능

class Person {
  name;
  constructor(a) {
    this.name = a;
  }
}

let a = new Person("어쩌구");
a.name // any 타입이다.

여기서 Person 클래스에 대한 인스턴스를 만들어서 할당할 때, any 타입으로만 나오게 된다.

제네릭 타입을 활용하고 타입을, 인스턴스가 할당될 때 적용시켜주고 싶다면 아래와 같이 작성하면 된다.

class Person <T> {
  name;
  constructor(a:T){
    this.name = a;
  }
}

let a = new Person<string>("어쩌구");
a.name // string

공식문서 내용

https://typescript-kr.github.io/pages/generics.html