My Boundary As Much As I Experienced

초창기 웹 초창기에는 모든 웹페이지가 정적인 페이지였다. 화면에 어떠한 변화를 주려고 화면을 전환하면 그 때마다 서버로부터 새로운 HTML을 전송 받아서 다시 렌더링 해야 했다. 당연히 성능적인 문제도 많았고 사용자 경험 측면에서도 좋지 못했다. 1. CSR (Client Side Rendering) React와 같은 다양한 프론트엔드 프레임워크들이 유행하면서 브라우저(클라이언트)에서 전적으로 웹 렌더링을 책임지는 방식이 보편화되었다. 이제 서버(프론트엔드 프로그램)에서 아무 내용이 없는 빈 HTML 껍데기를 보내면 클라이언트(브라우저)에서 동적으로 태그들과 스타일을 생성하여 페이지를 채운다. 이렇게 되면 최초에 HTML을 받는 것 외에는 페이지 렌더링을 위해서 별도의 HTTP 통신을 할 필요가 없어진다..

브라우저 렌더링 동작 과정 렌더링의 기본적인 동작 과정은 다음과 같다. 1~2. HTML 파일과 CSS 파일을 파싱해서 각각 Tree를 만든다. (Parsing) 3. 두 Tree를 결합하여 Rendering Tree를 만든다. (Style) 4. Rendering Tree에서 각 노드의 위치와 크기를 계산한다. (Layout) 5. 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고, 레이어를 만든다. (Paint) 6. 레이어를 합성하여 실제 화면에 나타낸다. (Display) 0. 요청, 응답 처음 웹페이지에 접속하면 HTML, CSS, Javascript 파일, 그리고 필요하다면 이미지나 폰트같은 파일들을 서버에 요청하고 응답 받게 된다. 그렇다면 서버에 요청은 어떻게 전송할까? 브라우저..

뜻: Development + Operations의 합성어 소프트웨어 개발자와 정보기술 전문가 간의 소통, 협업 및 통합을 강조하는 개발 환경이나 문화를 의미한다. 개발과 운영의 이해관계 우리는 서비스를 만들때 기획 -> 개발 -> 빌드 -> 테스트 -> 릴리즈 -> 배포 -> 운영 과같은 단계를 거친다. 이때 각각의 역할이 있게 된다 개발팀: 개발, 빌드 운영팀: 테스트, 릴리즈, 운영 개발팀 입장에서는 잦은 배포로 더 많은 기능들을 추가하여 더 좋은 서비스를 제공하고 싶어한다 하지만 운영팀의 입장에서는 잦은 배포는 그만큼 많은 버그와 오류에 대한 걱정과 스트레스가 커지게 된다. 이 개발팀과 운영팀 사이의 중간자적인 역할을 하면서 CI/CD를 책임진다. CI/CD란? CI: 지속적통합(Continuou..

명령형 프로그래밍(절차지향, 객체지향) 상태와 상태를 변경시키는 관점에서 연산을 설명하는 방식. 알고리즘을 명시하고, 목표는 명시하지 않음 절차지향 프로그래밍: 수행되어야 할 순차적인 처리 과정을 포함하는 방식 (C, C++) 객체지향 프로그래밍: 객체들의 집합으로 프로그램의 상호작용을 표현 (C++, Java, C#) 선언형 프로그래밍 How보다는 What을 설명하는 방식 (어떻게보단 무엇을) 알고리즘을 명시하지 않고 목표만 명시함 함수형 프로그래밍: 순수 함수를 조합하고 소프트웨어를 만드는 방식 (클로저, 하스켈, 리스프) 함수형 프로그래밍은 거의 모든 것을 순수 함수로 나누어 문제를 해결하는 기법으로, 작은 문제를 해결하기 위한 함수를 작성하여 가독성을 높이고 유지보수를 용이하게 해준다. 함수형 프..

useContext란? 프롭스 드릴링(프롭스가 하위 컴포넌트로 파고파고파고파고 또 파고 들어가는 현상)을 피하고 싶을 때 쓰는 문법. props 체이닝이 없이도 값을 전달하고 싶을 때 사용한다 context 설정법 api라던가, store, context같은 폴더에 파일을 만들어서 따로 관리한다. React 라이브러리를 import하고, createContext 메소드에서 관리하고 싶은 상태값을 입력(구독)한다. import React from "react"; const AuthContext = React.createContext({ isLoggedIn: false, }); export default AuthContext; 그런 다음에, App.js 같은 전역적으로 뿌릴 수 있는 곳에서 를 이용해 제공한..

useReducer란? useReducer는 상태를 관리하는 또 다른 방식이다. useState의 경쟁자?라고 보면 된다. 그렇다면 useReducer와 useState는 무엇이 다른가? 흔히 쓰는 useState는 '필요한 state만큼 생성해서 개별 관리'하였다. 그러나 useReducer는 여러 state가 존재해도 하나의 로직으로 다 관리한다. '중앙화된 state묶음'이라고 보면 된다. 이렇듯 기능적으로는 이점이 두드러지기보단 관리 방식의 차이가 발생한다. 중앙 관리해서 좋은 점은? 1. state가 너무 늘어나서 헷갈리는걸 방지한다. state가 열 몇 개씩 쌓이면 이게 어떤 state인지 헷갈리기 시작하는데 이를 방지할 수 있다. 2. 다른 state의 이전 값을 참조해서 최신 값을 만드는 ..

달성한 조건 98문제 해결 평균 solve난이도 실버4 (문제 난이도 별 모음집에서) 클래스3 클리어 지금까지 푼 문제 난이도 분포는 이렇다. 이때, 혼자서 못 풀어서 직접적으로 답을 본 것들은 정답 제출하지 않았고, 질문게시판에서 반례 테스트케이스를 조회해본 정도만 제출하였다. 거의 실버로만 그득한걸 볼 수 있다. 골드는 딱 5문제... 골드 문제를 쉽게 풀 수 있으면 이제 플레로 가는거겠지? 플레는 최소 400문제는 풀어야된다고 한다. 내가 올해 5월부터 10월까지 백준 100문제를 풀었으니... 내후년 쯤에 400문제 채울 수 있으려나? 물론 양치기만 하는게 아니라, 푼 문제들의 상위 100문제가 평균 골드로 맞춰져야 한다. 실버문제들을 아무리 양치기 해봤자 플레를 달성하긴 힘들다. 백준 랭크 올리..

기존 useState를 쓸 때 발생하는 문제 아래는 리액트로 양방향 입력 컴포넌트를 만드는 흔한 예시이다. 양방향이란, 1. 유저가 input 태그에 입력해서 state값을 바꿀 수 있고, 2. 시스템이 다른 handler함수에서 setState를 통해 렌더된 인풋을 바꿀 수 있음을 의미한다. const [state, setState] = useState(””) 이게 틀리다는 건 아닌데 이런 식으로 하면 state가 바뀔 때마다 input이 재렌더 된다. value={state}때문에 state값의 변화에 영향을 받는 이 input컴포넌트는 엄청나게 많은 재렌더 api를 쏘게 되는데.. (단순 키보드 입력 때마다 state가 바뀌기 때문. state가 쓰이는 모든 곳이 재렌더 된다.) 성능적으로 민감한 ..

리액트 포털은 언제 쓰는가? 웹페이지를 만들다보면 종종 모달을 만들 상황이 발생한다. 많은 사람들이 모달을 그때그때 모달이 필요한 페이지의 자식으로 만들고 있다. 그렇게 되면 원래라면 해당 페이지의 맨 아래 있어야하는 모달을 css를 사용하여 최상단에 있는 것처럼 꾸미는 것이다. 이게 완전히 틀리다는건 아니지만, 의미적으로 좋지 않긴 하다.(최상단에 보이는 컴포넌트가 사실 맨 아래에 있는건데 z-index만 조작해서 위에 있는것처럼 보임) 의미적인 측면 뿐만 아니라 기능적으로도, 모달을 발생시켜야 하는 지점이 매우 깊은 곳이면, 그 상위요소들의 css에 모두 영향을 받는다. z-index가 다른 의존성 때문에 잘 안 올라가는 경우도 생길 수 있음. (리액트 루트를 넘어) 최상단으로 모달같은 컴포넌트를 보..

JSX코드가 처리되는 과정 JSX는 자바스크립트 코드가 HTML처럼 보이게 만든 일종의 Syntax Sugar일뿐이다. 실제로는 자바스크립트이다. // JSX return Let's get started! // 원시 React? return React.createElement("div", {}, React.createElement("h2", {}, "let's get started"), React.createElement(Expenses, {item: expenses}) ) //최상위 div에는 속성이 없으므로 빈객체{}를 2번째 인자로 제공한다. 위 예시의 아래 부분처럼 실제로 JSX 문법이 나오기 전까진 createElement() 메소드의 체이닝을 계속 했어야 했다. (return문은 단 하나의 값..