본문 바로가기

Programming104

모던 리액트 Deep Dive - 3장 리액트 훅 useState 초기값이 없으면 undefined다. 변경된 return 값으로 리렌더링을 실행시킨다. 클로저를 사용해 함수 실행이 종료된 후에도 지역변수인 state를 참조할 수 있도록 한다. useState는 useReducer로 구현되어 있다. initialValue에 함수를 넣으면 초기 렌더링 이후 재실행되지 않는다. → 무거운 연산 시 사용 useEffect state, props의 변화 속에서 일어나는 렌더링 과정에서 실행되는 부수 효과 함수 클린업 함수로 이전에 등록했던 이벤트 핸들러를 제거해야 한다. useEffect는 컴포넌트 렌더링 완료 이후 실행한다. (CSR) 반면 직접 실행은 렌더링 도중 실행된다. 따라서 직접 실행은 SSR의 경우 서버에서도 실행된다. useEffect.. 2024. 3. 2.
모던 리액트 Deep Dive - 2장 JSX (Javascript Syntax eXtension) 자바스크립트 확장 문법 HTML이나 XML을 자바스크립트 내부에 표현하는 것이 유일한 목적 x 트랜스파일러에서 다양한 속성을 가진 트리 구조를 토큰화해 ECMAScript로 변환 내부에 트리 구조로 표현하고 싶은 다양한 것들을 작성한 후 자바스크립트가 이해할 수 있는 코드로 변환 JSX의 정의 1. JSXElement JSXElement는 JSX 문법을 사용하여 생성한 React 컴포넌트를 나타낸다. JSXElement는 HTML 태그와 유사한 구조를 가지며, React 컴포넌트를 생성하고 렌더링하는 데 사용된다. 구성 요소설명예시 JSXOpeningElement JSXElement의 시작 부분을 나타내며, 2024. 3. 2.
02. 데이터베이스 개론 요약 (4~6장) 4. 데이터 모델링 01. 데이터 모델링? 현실 세계에 존재하는 데이터를 컴퓨터 세계의 데이터베이스로 옮기는 변환 과정. 개념적 데이터 모델링 : 현실 세계의 중요 데이터를 추출해 개념 세계로 옮김 논리적 데이터 모델링 : 개념 세계의 데이터를 데이터베이스에 저장하는 구조로 표현 02. 데이터 모델 데이터 모델링의 결과물을 표현하는 도구. 개념적 데이터 모델 : 현실 세계를 사람의 머리로 이해할 수 있도록 개념적 모델링의 결과물인 개념적 구조로 표현하는 도구 논리적 데이터 모델 : 개념적 구조를 논리적으로 모델링하여 논리적 구조로 표현하는 도구 03. 개체-관계 모델 개체와 개체 간의 관계를 이용해 현실 세계를 개념적 구조로 표현하는 개념적 데이터 모델 개체 : 현실 세계에서 조직을 운영하는데 꼭 필요한.. 2022. 12. 4.
01. 데이터베이스 개론 요약 (1~3장) 1. 데이터베이스 기본 개념 01. 데이터와 정보 데이터 : 단순히 관찰하거나 측정해 수집한 사실이나 값 정보 : 의사 결정에 유용하게 활용할 수 있도록 데이터를 처리한 결과물 02. 정보 처리, 정보 시스템, 데이터베이스 정보 처리 : 데이터에서 정보를 추출하는 과정 또는 방법 정보 시스템: : 조직을 운영하기 위해 필요한 데이터를 수집해 저장해두었다가 필요할 때 유용한 정보를 만들어주는 수단 데이터베이스 : 정보 시스템 안에서 데이터를 저장하고 있다가 필요할 때 제공하는 역할 수행 03. 데이터베이스의 정의 및 특징 특정 조직의 여러 사용자가 공유해서 사용할 수 있도록 통합해서 저장한 운영 데이터의 집합. 실시간 접근 가능 동시 공유 가능 계속 변화함 내용으로 참조 가능 04. 형태에 따른 데이터 분.. 2022. 12. 3.
서비스에 감정 불어넣기! @emotion 적용기 Prologue 공교롭게도 지난번 글이 '서비스에 Styled-Components를 적용했던 썰' 이었는데, 이번 글이 'Styled-Components를 걷어내고 emotion을 도입하게 된 썰'이 될 줄은 몰랐지만 😂 아무튼! 이번 경험담 또한 스타일에 관한 이야기다. 잠깐 배경 설명을 하자면, 우리 팀은 입사하기 전까지 SCSS로 스타일을 작성하고 있었다. 그리고 팀 내에서는 CSS-in-JS 도입에 관한 논의를 진행하고 있었는데, 마침 내가 입사하면서 도입을 시도하게 됐으니 그것이 바로 Styled-Components였다. 공통 스타일 변수부터 전역 스타일까지 모든 세팅을 마치고 푸터와 레이아웃 일부에 이를 도입하며 성공적으로 안착하는 듯 했으나, 방대한 기존 스타일을 대체하기엔 다소 맞지 않다는.. 2022. 11. 26.
Dynamic without limits! Next.js 13 요약 정리 이제는 13이다 이번 10월 26일 Next.js를 만든 Vercel에서 새로운 버전과 그에 따른 변경사항에 대한 발표를 진행했습니다. 아직 모든 기능들이 stable 버전은 아니지만, 앞으로 정착할 기능들이기에 미리 준비한다는 마음으로 이번 13 버전에서 업데이트된 내용들을 정리해보고자 합니다. ※ 베타 버전과 안정 버전이 혼재돼있기 때문이 베타 버전에는 ⚠️ 아이콘을 붙이도록 하겠습니다. app directory ⚠️ 이전까지 Next를 사용했다면 다음 이미지와 같이 pages 디렉토리를 통해 라우터를 구성한다는 개념에 익숙했을 것입니다. 이번 13 버전을 기점으로 pages 폴더는 점진적으로 app 폴더로 그 이름이 변경될 예정입니다. app 디렉토리에는 다음과 같은 특징들이 지원될 예정입니다. L.. 2022. 11. 13.
원티드 프론트엔드 프리온보딩 챌린지 10월 사전과제 with Next.js 💡 CSR(Client-Side Rendering)이란 무엇이며, 그것의 장단점에 대하여 설명해주세요. CSR( 클라이언트 사이드 렌더링 )은 자바스크립트를 사용해 브라우저에서 직접 페이지를 렌더링하는 것을 뜻합니다. 모든 로직, 데이터 페칭, 라우팅은 서버가 아닌 클라이언트에서 처리됩니다. 장점으로는 초기 로딩 이후에는 빠른 속도를 보여줍니다. 초기 로드가 달성되고 브라우저에서 캐시 및 구문 분석할 수 있는 항목이 완료되면 이후 페이지 로드는 매번 서버에서 모든 정보를 가져와야 하는 SSR보다 빠르고 원활합니다. 두번째로는 SSR에 비해 서버에 부담이 적습니다. 초기 렌더링 이후 페이지를 새로 고치거나 사용자가 다른 페이지로 클릭했을 때 브라우저는 전체 페이지가 아니라 동적으로 필요한 요소만 렌더링합니.. 2022. 9. 28.
SCSS에서 Styled-Components로 변환하며 겪은 썰.txt 입사 후 주어진 첫 과제 어느덧 입사한 지 2주가 다 될 무렵, 드디어 첫 미션이 주어졌다. Nuxt(Vue)에서 Next(React)로 마이그레이션하는 프로젝트에 푸터 파트를 작업하는 것이었다. 로직도 없고 단순히 마크업만 하는 작업이었기에, '이 정도는 거뜬히 할 수 있지!'라고 생각했지만 예상외의 난관에 부딪히게 됐다. 바로 @mixin을 비롯한 수많은 '@'로 이루어진 SCSS 때문이었다. 난관 이 글을 읽는 대다수의 분들이라면 SCSS에 대해 알고 있겠지만, 혹시나 모르는 문들을 위해 간단히 설명하자면 다양한 편의 기능을 갖춘 CSS라고 생각하면 된다. 여러 연산이나 코드의 재사용 등 여러 기능들로 보다 편리하게 스타일 작업을 할 수 있다는 장점이 있지만, Styled-Components로 변환.. 2022. 5. 16.
005_npm ci, npm i 🔥 호락호락하지 않은 프로젝트 설치 입사하고 나서 이래저래 회사 생활에 적응하던 중, 드디어 우리 팀 프로젝트 설치를 하는 순서가 찾아왔다. 이전까지 yarn이라는 패키지 매니저 위주로 사용하다 오랜만에 npm으로 설치하려는데 선임 분께서 'npm i 대신 npm ci로 설치를 진행해주세요' 라고 요청해주셨다. 그동안 npm i만 알고 있던 내게 또 다른 설치 방법이 있다는게 신기하기도 했고, 구체적으로 어떻게 다른지 확인해보기로 했다. ⚡️ npm ci? 우선 npm ci의 'ci' 는 다음 용어의 줄임말이다. ci : clean install 그냥 설치하는 것도 아니고 클린하게 설치한다는 것은 무슨 뜻일까? 이 뜻을 이해하려면 먼저 package.json과 package-lock.json에 대해 이해.. 2022. 5. 8.
016_pass by value, pass by reference ?? 최근 진행한 한 코딩테스트에서 생각한 대로 구현되지 않았던 문제가 있었다. 문제나 정답을 동일하게 작성할 수 없으니 비슷한 예를 다음과 같이 적어보겠다. function solution(N, M) { const array = new Array(N).fill([]); const words = M.split(" ").map((e) => e.split("")); for (let i = 0; i < words.length; i++) { array[Number(words[i][0])].push(words[i][1]); } return array; } console.log(solution(2, "01 13 04")); // 기대값: [['1', '4'], ['3']] // 출력 : [['1', '3', '4'.. 2022. 4. 23.
004_cdn 🔗 정의 & 특징 Content Delivery Network 지리적 제약 없이 전 세계 사용자에게 빠르고 안전하게 콘텐츠를 전송할 수 있는 콘텐츠 전송 기술 서버와 사용자 사이의 물리적인 거리를 줄여 콘텐츠 로딩에 소요되는 시간을 최소화한다. 왜 필요한가? 1. 물리적 거리의 한계 미국에서 제공하는 어떤 서비스가 있다고 가정해보자. 우리가 웹 페이지에 접속하는건 해당 서비스를 제공하는 서버에 요청을 보내고 그 응답으로 돌아오는 컨텐츠를 이용하는 것이다. 그렇다면 이 서비스를 이용하는데 서버와 가까운 미국 사람들은 쾌적하게 서비스를 즐길 수 있겠지만, 저 바다 건너 한국, 인도네시아, 남극 이런 곳들은 거리가 있기 때문에 요청과 응답에 시간이 걸리게 되는 문제가 생긴다. 2. 서버의 과부하 글로벌 서비스의 .. 2022. 4. 16.
003_css의 다양한 숨김처리 방법 🙄 같지만 다르다? 화면을 구성하면서 때때로 이벤트 효과나 기타 목적으로 요소를 보이지 않게 해야 할 때가 있다. CSS에서는 이러한 기능을 다양한 방식으로 작성할 수 있는데 지금부터 어떤 방식이 있는지 알아보자! 1. display: none 컨텐츠가 사라지면서 해당 컨텐츠가 차지하고 있던 영역도 함께 사라진다. 이벤트 (ex. 클릭)는 작동하지 않는다. 화면 영역에서 사라지는 것 뿐만 아니라 보조기기나 검색엔진이 접근하지 못하게 되어 텍스트인 경우 스크린리더 사용자가 해당 내용을 들을 수 없다. 브라우저 렌더링 시 렌더링 트리에서 요소를 완전히 제거한다. 2. visibility: hidden display: none과 달리 컨텐츠는 사라져도 해당 영역은 그대로 존재한다. 이벤트 (ex. 클릭)는 .. 2022. 4. 11.
반응형

티스토리툴바