Ollim 개발기 - 2

1. foreignObject tag

react-flow를 이용해 custom 인물 관계도를 만드는 과정에서 custom edge의 예제에 foreignObject를 사용하는 것이 있었다.

SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas.

The <foreignObject> element of SVG includes elements from a different XML namespace. It is an extensibility point which allows user agents to offer graphical rendering features beyond those which are defined within this specification. 

SVG의 확장된 것으로 생각하면 이해하기 쉬울 것 같다. width와 height를 꼭 지정해줘야 rendering이 된다.

2. firestore 구조

Collection => documents => fields

 

users => userEmail(string) => dateCreated(number), followers(Array<string>), following(Array<string>) writingDocID(Array<string>)

writings => userUID => poemDocID(Array<string>),  scenarioDocID(Array<string>), novelDocID(Array<string>), commitTotal(Array<number>)

poem => poemUID => title(string), userUID(string), opening(string), commits(number)
           commits => commitDocID(number) => contents(string)
scenario => "" => ""
novel => "" => ""

tempSave => tmpID => contents, userUID, Date, writingDocID

 

3. String vs String Literal

 

TypeScript는 기본적으로 객체의 프로퍼티를 읽을 때, string타입의 key 사용을 허용하지 않아서 이런 식으로 객체를 사용할려고 했으나 String Literal type의 key를 이용해야 한다고 한다.

https://soopdop.github.io/2020/12/01/index-signatures-in-typescript/

TypeScript에서 string key로 객체에 접근하기