LeeHyojin Blog LeeHyojin Blog

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

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

🌸 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의 존재의미를 잃게 되는 것이고 테스트 주도 개발이라고 볼 수 없다. 기능을 다 구현한 후 몰아서 작성한 테스트 케이스는 당연..

🌸 TIL 회사에서 담당하고 있는 React-Native 앱을 구현하던 중에 Navigation 중에 Stack.Screen을 사용하여 Header Bar를 커스텀하여 사용해야 하는 경우가 생겼다. 먼저 기본적으로는 상단에 header가 있고 navigation.push()를 통해 페이지를 이동했을 시 header 왼쪽에 이전버튼이 보여지게 되는데, 내가 구현해야 하는 것은 이전 버튼을 사용하지 않고 header에 내가 지정하고 싶은 이미지나 버튼 등등을 커스텀하여 만들어내는 것이었다. import React, { useState } from 'react'; import { Text, View, TouchableOpacity } from 'react-native'; const App = ({ naviga..

🌸 TIL TypeScript 를 사용하게 되면 함수의 반환 값의 타입을 지정해줄 수 있다. const func = async(foo: object): Promise => { try { const res = await fetch(url, options); return await res.json(); } catch (err) { let errCode = {ok: false, data: err} return errCode; } }; 위와 같은 async await 을 사용한 비동기 함수가 있다면 반환 값의 타입으로 Promise 를 사용하여 타입을 지정해줄 수 있는데 반환 값의 타입이 항상 같을 수 없을 때가 있다. const func = async(foo: object): Promise => { try {..

Express는 Node.js의 핵심 모듈로 http와 connect 컴포넌트를 기반으로 하는 웹 프레임워크 입니다. 서버의 페이지 개수가 늘어나고 사이트가 커지면 코드가 복잡해지는데 Express 프레임워크를 사용하게 되면 코드의 양도 줄고 추후 유지보수가 쉽도록 만들어줍니다. http를 통해서 Node.js 만을 사용하여 클라이언트와 통신할 때와 Express를 사용하여 클라이언트와 통신할 때를 비교하면 다음과 같습니다. 클라이언트의 요청을 받아서 처리한 후, 다시 클라이언트에게 응답한다는 점은 같지만 중간에 미들웨어들을 거친다는 점이 다릅니다. Node.js만 사용하여 http서버를 통신하게 되면 Node.js 에 등록된 콜백들을 사용하여 처리하고, Express를 사용하면 Express 내부에 개..