분류 전체보기
-
[항해 99 회고록] 2주차 알고리즘개발일지/항해 99 2023. 6. 24. 11:32
본과정 2주차 알고리즘 과정을 끝내면서 회고록을 써본다.. 회고록이니깐 이쁘게 안써도겠지? 한주의 느낀점 WIL에 한 일이나 할 일을 적을거니깐 회고록에는 그런 얘기는 안하려고한다. 이번주를 하면서 알고리즘에 대해서 문제를 많이 풀게 되었는데 사전스터디를 하면서 했던 내용이 좀 어려워서 그런지 이번주차에 했던 알고리즘은 정말 문법공부용이라고 느낄 정도의 느낌이 들었다. 나쁘다는 것이 아니라 그저 알고리즘이라기보다는 JS의 수업같은 느낌이였을 뿐이다. 그러면서 자연스럽게 남는 시간에는 react관련된 책을 보면서 공부를 시작하게 되었는데 좀 막히는 부분이나 책을 덮고나서 적용을 해보려하면 모자라는 부분이 많다고 느껴진다(실제로 거의 못씀...ㅠㅠ) 그래서 주변 항해동료들의 권고에 react 구현 study..
-
[CS study] 랜더링( SSR & CSR & SSG)카테고리 없음 2023. 6. 24. 11:08
랜더링 과정 DOM 생성 사용자의 요청에 브라우저는 웹 서버에서 HTML을 받아 파싱(해석)하며, 이를 DOM(Document Object Model)으로 변환한다. DOM이란 페이지에 대한 브라우저의 내부 표현일 뿐만 아니라 웹 개발자가 자바스크립트를 통해 상호 작용할 수 있는 데이터 구조 및 API이다. DOM 생성 과정은 바이트를 문자로, 문자열을 와 같은 토큰으로, 토큰을 프로퍼티와 규칙을 가진 객체로 만들고 최종적으로 이 객체들을 서로 연결하면서 데이터 구조를 만드는 순서로 진행된다. 여기까지의 과정이 아래 그림의 1번이라고 할 수 있다. 브라우저가 HTML을 파싱하는 과정에서 스타일시트를 만나면, 브라우저는 모든 작업을 일시 중지하고 서버에 파일을 요청한다. 이후에는 DOM을 만드는 것처럼 C..
-
[항해99 주특기] 1주차 강의 내용 - React개발일지/항해 99 2023. 6. 23. 17:43
리액트란? 자바스크립트 라이브러리이다 사용자가 보는 부분을 만들 수 있는 라이브러리로써 프론트엔드를 구축(ui를 building한다) 할때 쓰인다 spa기반의 프론트엔드 개발 프레임워크 중 하나이다 SPA 아키텍쳐란? 단 한개의 페이지로 이루어진 애플리케이션 (single page application) MPA 장점 클릭할때마다 리렌더링 된다면 엄청 불편할텐데 하나의 페이지에서 그 부분만 업데이트 된다. (깜빡임 없는 자연스러움) 서버에 1회 리소스 요청하고 그이후에는 데이터만 받아와서 기존 페이지를 수정해주는 방식이다. ux가 굉장히 높다 react native와 상생 vr에서까지 활용 가능 단점 seo(search engine opiomization)를 극복해야한다 next를 이용하자 html이 하나..
-
[리액트 알쓸신잡] Hook - 1 - useMemo VS useCallback프로그래밍/React 2023. 6. 22. 14:50
useMemo(() => console.log(), [test]) const memoizedCallback = useCallback(() => console.log(), [test]) 두 로직은 각각 useMemo와 useCallback을 사용해서 같은 결과를 나타내는 로직이다. useMemo 컴포넌트 내부에서 발생하는 연산을 최적화 할 수 있다 메모이제이션 된 값을 반환하는 함수이다. useMemo(() => fn, [deps]) 여기서 deps로 지정된 값이 변하게 된다면 첫번쨰 인자인 함수가 실행을 하고 그 함수의 반환 값을 반환 해준다. deps는 depencency(의존성)을 뜻하며 useMemo가 deps에 의존하고 있다는 것을 말한다. import React, { useState, useCa..