LeeHyojin Blog LeeHyojin Blog

Q: DOM과 HTML의 차이점은? A: DOM은 HTML 문서로부터 생성이 되지만 항상 동일하지는 않습니다. HTML은 화면에 보이고자 하는 구조를 문서화 한 것으로 단순 텍스트로 구성되어 있고, DOM은 HTML 문서의 내용과 구조가 Object Model로 변화되어 실제 화면에 나타나는 인터페이스 입니다. DOM과 HTML의 차이점은? 위와 같이 HTML 규칙의 필수 사항인 요소들이 빠져있지만 DOM트리에는 올바르게 교정되어 나타난 것을 보아 유효하지 않은 HTML 코드들을 DOM을 생성하는 동안 규칙에 맞게 교정하고 있는 것을 알게 되었습니다. 또한 JavaScript로 DOM을 수정할 때에도 마찬가지입니다. let p = document.createElement('p'); let PText = ..

🌲 렌더링 트리 생성 과정 1. 객체 모델 (Object Model) 생성 > 변환 HTML 코드가 있으면 렌더링 엔진은 HTML의 원시 바이트를 디스크나 네트워크에서 읽어와서, 해당 파일에 대해 개별 문자로 변환한다. 토큰화 개별 문자로 변환된 것을 HTML5 표준으로 지정된 고유 토큰으로 변환한다. 각 토큰은 고유한 의미와 규칙을 가진다. DOM 생성 마지막으로 HTML 마크업이 여러 태그 간의 관계를 정의하기 때문에 생성된 객체는 트리 데이터 구조 내에 연결된다. 이 트리 데이터 구조에는 마크업에 정의된 상위-하위 관계를 포함한다. (ex: HTML 객체는 body 객체의 상위라는 관계다.) 이렇게 구성된 DOM 트리는 HTML 문서 마크업의 속성과 각 노드의 관계에 대한 정보를 가지고 있지만, 아..

Tree 트리는 노드로 구성된 계층적 자료구조입니다. 최상위 노드(루트)를 만들고, 루트 노드의 child를 추가하고, 그 child에 또 child를 추가하는 방식으로 트리 구조를 구현할 수 있습니다. Array, Linked List, Stack, Queue는 라인처럼 생긴 일직선 데이터 구조인데 Tree는 부모 자식 관계를 가지는 구조입니다. Tree는 계층적 자료구조라고 했는데 이 것을 가능하게 한 것은 노드가 하나 이상의 child를 갖기 때문입니다. 노드중에는 부모를 아는경우도 있고 자식만 아는 경우도 있습니다. 또한 어떠한 순서에 의해서 데이터가 관리되는 경우도 있고, 데이터가 마구 섞여있는 경우도 있습니다. ※ 트리의 용어 정리 루트 노드 (Root) : 부모가 없는 노드, 트리는 하나의 ..

🌸 TIL 이번에 회사에서 담당하는 프로젝트에 전부터 사용해보고 싶었던 GraphQL을 적용해보았다. 처음 사용해보기 때문에 아직까지는 좋은 퍼포먼스를 보일 수 없지만 단시간에 공식문서를 보며 빠르게 적용할 수 있다는 것도 큰 장점이라 생각한다. 서버에서는 어떤식으로 typeDefs를 설계하고, resolvers는 어떤식으로 작성이 되는지 간단하게나마 이해하고 client와 server를 직접 구현하여 한 싸이클을 타보는 것도 좋을 것 같아서 처음에는 서버는 Node를, 클라이언트는 React를 사용하여 간단한 예제를 만들어보았었다. 간단한 예제를 만들어보면서 서버와 클라이언트의 흐름을 파악하고 나니까 실제 서비스에 적용하는 시간도 절약되었고, 이해도 더 빠르고, 백엔드 개발자분들과의 소통도 좀 더 원활..

Hash Table ( 해시 테이블 ) 해시 테이블(해시 맵이라고도 합니다.)은 연관배열 구조를 이용하여 키(key)에 결과 값(value)을 저장하는 자료구조 입니다. 해시 테이블은 키를 저장할 때에 메모리 공간을 덜 사용할 수 있도록, 키를 "해시 함수"(Hash Function)라는 함수를 통해 특정 숫자값의 인덱스로 변환합니다. 해시 테이블은 필요할 때에만 메모리 크기를 늘리고, 가능한 작은 크기를 유지합니다. 연관배열 구조( associative array )란 키(key) 1개와 값(value) 1개가 1:1로 연관되어 있는 자료구조 입니다. 따라서 키(key)를 이용하여 값(value)을 도출할 수 있습니다. 연관배열 구조는 다음의 명령들을 지원하고 이 명령들은 해시테이블에서도 동일하게 적용..

🌸 TIL 프로젝트를 하다보면 나를 위해서든 다른 개발자를 위해서든 좀 더 원활한 협업을 위해 Api Documentation이 필요하다고 느낄 때가 온다. 이번에 담당했던 프로젝트를 진행하면서 Api Documentation의 필요성을 느끼게 되었고, 아직 잘 정리된 문서가 없다는 것을 알게되었다. (...없....으면 내가 만들면 돼!!!!! ㅎ히힣..ㅎㅎㅎ.....ㅎㅎ...........) 아직 만들어본 경험이 없어서 서툴기도 하고 완벽하진 않지만 처음부터 완벽한건 없으니까!! 포스트맨으로 Api Documentation 만들기 포스트맨을 사용하여 Api Documentation 만드는 방법은 조금만 구글링해도 너무 친절하게 나와있기 때문에 만드는 방법은 적지 않겠지만, 만들면서 얻은 정보들, 편리..

🌸 TIL 💥 문제점 구현하던 기능 중에 A screen에서 B screen으로 navigate한 후, B screen에서 A screen으로 goBack했을 때 A screen에서 API 호출이나 재렌더링이 이루어져야 하는 상황이 생겼다. 다시 말해 B screen에서 useContext에 있는 상태 값을 변경하였고, goBack을 통해 A screen 으로 돌아왔을 때 변경된 값이 적용되어야 하기 때문에 재렌더링을 해야만 하는 것인데 goBack을 사용해야하기 때문에 A screen에서 재렌더링이 이루어지지 않고 있다. 🌈 해결 방안 react-navigation은 총 3가지 방법을 제공한다. Listening to the 'focus' event with an event listener. Using..

🌸 TIL 회사에서 React Native + TypeScript 를 사용하여 프로젝트를 진행하면서 뒤늦게 TDD를 도입하게 되었다. TDD의 필요성을 느끼지 못했고, 그저 요구사항을 구현하기 급급하다는 핑계로 TDD 도입을 뒷전으로 미루었는데 프로젝트 기능을 하나하나 추가해 나가면서 복잡한 로직들이 늘어나게 되었고 기능이 제대로 작동하고 있는지 일일이 테스트하는 것도 번거로워졌다. 🔎 선 기능구현, 후 TDD 처음에는 기능을 먼저 구현하고 나중에 TDD를 작성하여 테스트하는 방식을 적용했었다. TDD의 의미는 "테스트 주도 개발" 인데 선 기능구현 후 TDD를 한다는 것은 TDD의 존재의미를 잃게 되는 것이고 테스트 주도 개발이라고 볼 수 없다. 기능을 다 구현한 후 몰아서 작성한 테스트 케이스는 당연..