본문 바로가기

SEOP121

모던 리액트 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.
Ep 16. 추진력을 얻기 위한 무릎 꿇기 309일, '1년. 내가 회고라는 걸 하기 위해 걸렸던 시간이다.' 라며 세상에 외친 후 이후 돌아오기까지 걸린 시간이다. 지금까지 꾸준히 나를 위해 시간을 써왔지만, 정작 '나 자신'을 위한 시간은 갖지 못했다는 생각에 책을 덮고 이렇게 에디터를 켰다. 막상 쓰려니 그간 켜켜이 쌓인 경험과 생각, 감정들이 너무 많아 어디부터 시작해야 할지 가늠이 잡히지 않지만, 원래 이곳은 가늠이 잡히지 않은 채 두서없이 쓰던 곳 아니었나. 늘 그랬듯 의식의 흐름대로 생각들을 나열하면서 그간의 시간들을 아카이빙해보고자 한다. 일단 오늘부터 시작해 보자 오랜만에 한강 산책을 하러 나왔다. 앞선 글들에 나와있듯 우리 집은 한강에서 고작 2분 거리에 있다. 모퉁이를 돌아 굴다리를 건너면 바로 한강이 눈앞에 펼쳐진다. 그런데.. 2023. 3. 12.
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.
Ep 15. 회고가 너무 하고 싶었던 건에 대하여 1년. 내가 회고라는 걸 하기 위해 걸렸던 시간이다. 처음 개발이라는 분야에 들어와 그동안의 자기 자신을 돌아보는 회고라는 문화를 접했을 때, ' 취업하면 써야지 ', ' 나는 아직 회고를 쓸 준비가 되지 않았어 ' 라는 생각으로 한참을 참고 참았는데 드디어 내 그동안의 기억들을 되돌아보는 시간을 갖게 돼서 너무나 행복한 지금이다. 그렇다. 그렇게 간절히 바라던 취업에 드디어 성공했다. 그리고 어느새 출근한지 1주일이라는 시간이 흘렀다. 이 1주일간의 쾌락을 즐기기 위해 지난 1년을 준비했고 이제는 지난 1년을 돌아볼 수 있는 권한까지 얻게 됐다. 우선 지금 이 순간의 느낌부터 적어보자면, 겁나 행복하다. 해가 뜰 무렵에 일어나 눈도 못 뜬 채 화장실에 들어가는 기분도, 정면 혹은 휴대폰 화면이 있는 아.. 2022. 5. 8.
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.
반응형

티스토리툴바