코딩연습장

사용자가 브라우저를 통해 웹 사이트에 접속하면, 서버로부터 HTML, CSS 등 웹 사이트에 필요한 리소스를 다운받습니다. 브라우저가 페이지를 렌더링 하려면 먼저 HTML코드가 DOM트리로 변환되고, CSS는 CSSOM 트리를 생성합니다. 1. DOM 트리 생성 브라우저가 URL에 알맞은 index.html 파일을 가져오고, 렌더링 엔진이 HTML문서를 파싱하여 정해진 인코딩(UTF-8)에 따라 개별문자로 변환한 후 고유 토큰으로 변환합니다. 해당 토큰들을 객체로 변환해 노드들을 생성하고, 이 노드들은 트리의 자료구조로 요소간의 관계를 나타내는데, 이를 DOM이라 합니다. 2. CSSOM 트리 생성 HTML 마크업 내 inline 스타일을 선언할 수 있지만, 외부에서 가져온 css파일을 참조하거나 hea..

🙂스택과 큐는 자료구조의 형태를 의미합니다. 스택은 특정 자료, 명령을 쌓아올려 제일 마지막에 쌓인 자료, 혹은 명령을 처리하는 형식입니다. 쉽게말해 후입선출이라고 할 수 있으며, 웹 브라우저 방문기록을 예로 들 수 있습니다.. 큐는 스택과 달리 한쪽에서는 자료, 명령을 삽입하고 다른 쪽에서 삽입된 순서대로 처리하는 것을 의미합니다. 쉽게말해 선입선출이라고 할 수 있으며, 데이터를 입력순서대로 처리할 때 사용합니다

시간복잡도와 공간복잡도는 알고리즘 성능 평가시 사용되는 개념이며, 수치가 낮을수록 좋은 알고리즘입니다. 시간복잡도는 특정 알고리즘이 문제를 해결하는데 필요한 연산 횟수를 의미하며, 공간복잡도는 프로그램 실행과 완료에 필요한 메모리의 크기를 의미합니다. 시간복잡도와 공간복잡도는 반비례적인 성향이 있는데, 최근들어 메모리 공간의 여유가 늘어감에따라 시간복잡도를 위주로 판단합니다.

이번주는 런칭한 결과물에대해 피드백을 받고, 구글애널리틱스를 통해 쌓인 데이터와 함께 결합하여 페이지를 개선시키는 작업을 하였고, 인증번호 관련 작업을 진행했다. 유저가 캠핑장을 예약하는 기능이 우선인 사이트여서 사용자에 대한 정보가 믿음직한지 신뢰도가 필요했다. 하지만, 결제 시스템도없고, PASS를 도입하기에는 시간적 여유도 없어서 간단하게 전화번호 인증을 구현하는 방향으로 진행했다. 인증번호를 서버로부터 받아오고, 발금하는 버튼을 작동하지 않게 처리한다던지, 인증번호를 발급받으면 아래에 만료시간 타이머가 작동한다던지, 재발금시엔 어떻게 작동한다던지 하는 섬세한 작업이 필요했다. 클라이언트 단에서 인증번호를 생성하고 그걸 비교해야하나? 라고도 생각했지만, 그렇게 한다면 보안적으로 올바르지 않다고 생각..

프로젝트가 거의 다 끝나간다. 어짜피 다음주에 정리를 해야하지만 먼저 간단하게 어떤라이브러리를 왜 사용했는지 정리를 해보려고한다. 1. @emotion/styled 기존 리액트를 배울 때 styled-components를 사용했었다. 둘의 스타일 기능은 전반적으로 동일하다. props사용, 미디어쿼리, 글로벌 스타일, nested selectors, SSR 등... 둘다 sass문법을 사용하기에 스타일 문법에도 차이가 없다. 성능상 둘의 유의미한 차이는 없지만 emotion의 퍼포먼스가 전반적으로 좋게 나온다하여 선택하였다. 러닝커브가 높다는 단점이 있었지만, 리액트를 공부하면서 계속 사용해왔어서 어찌보면 지금은 css보다 익숙해져있어 선택하게 되었다. 2. redux / redux/toolkit 처음에..