[TIL] 2022-1111 : UI 프로토타입 작업 / 타입스크립트 공부

🐈오늘 배운 것

✔️UI 프로토타입 작업

현재까지 피그마를 사용해 각 페이지별 디자인 + 프로토타입까지 동시에 작업을 진행했다. 기획 과정에서 도출된 요구사항 정의서를 바탕으로 플로우차트를 만들고, 해당 플로우 차트를 기반으로 ui 계획에 들어가니 어떤 방식으로 동작할 것이라는게 눈에 들어와서 수월한 느낌이었다.

 

UI, 디자인적인 측면에서는 내가 방향을 잡고 많이 진행을 하게 되었다. 플로우차트를 그렸을 때 각자 맡은 부분을 그대로 진행할까 했는데, 주요한 비즈니스 로직에 대한 화면을 먼저 끝내야 백엔드 파트와 소통이 수월할 것 같아서 페이지별 우선순위를 정해 각자 업무를 분담했다. 피그마를 꼼꼼하고 완벽하게 다루지는 못했지만 그래도 그동안 많은 디자인 툴을 다뤄본 것이 이번 단계에서는 큰 도움이 된 것 같다. 

 

다만 아쉬웠던 점은 일단 현재까지 모두가 동일하게 알고있는 요구사항 정의서가 없었다는 부분? 단계를 제대로 거쳐서 개발을 진행할 것이라면 최소한 피그마에서라도 모두가 동의하는 문서가 하나가 있어야 한다고 생각하는데 그 부분이 없어서 아쉬웠다. 일단 기능이 많고 페이지수와 전체적인 볼륨이 큰 상태에서 프로젝트 경험이 많이 없었기 때문에(나) 좀 더 힘들었던 것 같다. 여러번 의견을 모아서 정리하려고 했는데 그 때마다 새로운 기능이 추가되고 변경되고 사라지면서 다시 흐지부지 되고.. 누구는 이렇게 알고 있고, 누구는 저렇게 알고 있는 문제가 좀 있었다.

 

프로젝트를 조금 일찍 시작했던만큼 기획단계에서 문서화까지 모두 공을 들였으면 어땠을까 싶었는데... 뭐 말하자면 길지만 아무튼 적당한 볼륨 + 문서화의 중요성을 많이 느꼈다. 

✔️타입스크립트

이번 프로젝트에서 타입스크립트를 도입하게 되어 공부를 살짝 해보았다.

type 과 interface

둘 다 타입에 대한 이름을 정의할 때 사용할 수 있다. 차이점은 interface 는 객체 타입을 지정할 때, type 은 객체를 포함한 함수, 변수등에 적용되는 타입을 정의할 수 있다. 

interface 의 특이한 점은 class 와 느낌이 비슷하다는 것인데, extends 를 사용해 다른 타입으로부터 상속을 받아와 타입을 확장할 수 있다.

interface Player {
    nickname: string,
    age: number,
}

interface User extends Player {
    team:Team
}

// User 타입은 객체의 nickname, age, team 프로퍼티에 대한 타입 정의를 모두 포함한다. 
const hyejung:User = {
    nickname:'hye',
    age : 26,
    team:'red'
}

같은 이름으로 interface 를 두 번 선언해도 에러가 발생하지 않는다. (type으로 선언한 타입에 대해서는 에러가 발생한다.)

interface Player {
    nickname: string,
    age: number,
}

interface User extends Player {
    team:Team
}

// User 타입은 객체의 nickname, age, team 프로퍼티에 대한 타입 정의를 모두 포함한다. 
const hyejung:User = {
    nickname:'hye',
    age : 26,
    team:'red'
}

궁금해서 확인을 해보니, interface extends 를 사용할 때 꼭 interface로 정의된 타입만을 상속 받는 것은 아니었다.

다만 type 키워드가 객체 이외의 요소에도 적용이 될 수 있기 때문에, 객체에 대한 타입을 지정하고 이를 상속해서 확장한다면 interface만을 사용하는 것이 합당할 것 같다.

 

타입스크립트에 객체지향이라는 개념이 포함되다보니 조금 어렵게 느껴지는 것 같다.

🐈Feedback

1. 기분이 나쁘더라도 그것을 이해해주길 바라면서 위축되어 있기 보다는, 좋게 말할 수 있게 노력해보자. 말하다보면 나도 모르게 욱하는 순간이 있는데 적절히 조절이 필요할 것 같다.

2. 아침에 일어나는 것은 좋은데 역시 저녁 이후 개인 공부와 작업이 어렵다. 

🐈To Do

1.타입스크립트, Next.js 복습하기, 코드 레퍼런스 찾아보기

2. tailwind css 로 애니메이션 등 구현단계에서 필요할 것 같은 레퍼런스 찾아보기