코딩연습장

사용자가 브라우저를 통해 웹 사이트에 접속하면, 서버로부터 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 처음에..

프로젝트가 사실상 거의다 끝났다. 앞으로 기능 한두개만 추가하고 런칭을 할 것이다. 이번주는 디자인 시안이 올 때 CSS작업을하고, 기능은 별로 추가할 것이 없었다. 그래서 중간중간 CSS작업을 살펴보며 필요없는 코드가 없는지 살펴보았다. 이번 디자인 시안을 적용할 때 서버에서 넘어온 캠핑장의 주요시설 문자열에따라 아이콘을 알맞게 설정해야했다. 어짜피 주요시설 문구들은 정해져있기 때문에 하드코딩으로 문자열을 포함한 배열을 만들고, 동일한 순서로 이미지를 배열화했다. 그리고 서버에서 넘어온 문자열을 하드코딩된 문자열배열에서 index값을 찾아 이미지 배열에서 동일한 index를 img태그의 src에 담으려고했지만, 코딩에서의 실수인지 src값 안에 {imgname: base64/png/~~~} 이런식으로 ..

styled components / emotion/styled 성능상 유의미한 차이가 나지 않는다. emotion의 퍼포먼스가 전반적으로 더 좋게 나오고있다. emotion이 번들의 크기가 더 크다. 동일 코드로 번들크기가 더 증가한다. 참고자료 css-in-js 장점 css파일의 유지보수가 필요없어진다. 단일파일에서 관리가 가능하다. js의 코드를 활용할 수 있다. 해당 DOM에서만 활용할 수 있는것도 장점, js와 css사이에있는 상수와 함수를 공유할 수 있다. 단점 러닝커브가 높다. (기술 또는 지식을 실무와 같은 환경에서 효율적으로 사용하기위해 드는 학습비용) 별도의 라이브러리를 필요로해서 크기가 커질 수 있고, 디자인페이지를 작업한다면 csss 모듈방식에비해 느린 성능을 보여줄 수 있다. ==>..

이번주에 http통신연결하고, 데이터주고받고, 추가데이터요청하고, 불필요데이터 제거해달라 요청하고... 사실 저번주와 다를 건 없었다. 하지만 이번주에 처음 해본 것은 하나 있었다. 바로 소셜로그인이었다. OAuth2.0을 사용하여 카카오로그인을 연결했다. 처음에는 제공된 설명을 읽어도 당최 뭔소린지 이해를 못했는데, 여러번 읽고, 저번 기수의 코드를 읽어보며 대충 어떻게 굴러가는지 이해하게되었다. 그리고 백엔드분이 준비해준 API KEY를 사용하여 연결했다. 처음부터 잘 되지는 않았다. 그 이유는 Redirect URI를 설정하는데있어, 이해도가 적었기 때문이다. 처음 사용자가 카카오로그인 버튼을 누르면 미리 설정된 API KEY와 REDIRECT_URI를 주소값에 담아 카카오가 준비한 주소로 이동한다..

api는 바뀌었고 바뀐 부분을 적용하는데 여러번 오류도 뜨고, 불필요한 데이터도 제거하고, 필요한 데이터를 추가로 요청도 했다. 아직 디자인은 안왔다. 큰일이다. 다만 백엔드와 소통하면서 확실하게 소통이 중요한 것이라고 깨닳았다. 데이터가 부족할때, 의견을 구할때, 문제가 생겼을 때 백엔드분들과 소통하면서 상황을 해결하려하면 쉽게 진행될 때가 많다. 소통을 잘하는 개발자가 되자.