Yuu.log

이 책은 이런 분들에게 추천드려요! 개발자로서의 진로가 고민이신 분들 멘토분이 안계시거나 직장 내 사수분이 안계시는 분들 개발자로서의 동기 부여가 필요하신 분들 힘든 취준으로 잠시 머리를 식히고 싶으신 분들 읽게된 계기 이 책을 접하기 전 진로에 대한 고민이 많았고 개발 직군 중 웹을 이용해 사람들과의 상호작용을하며 소통하는 것이 흥미롭게 생각되어 프론트엔드 개발쪽으로 진로를 고민하고 있었습니다. 그러던 중 우연히 유튜브의 알고리즘을 통해 알게된 `Interactive Developer` 김종민님의 영상을 보게 되었습니다. 김종민님의 프로젝트를 보고 "나도 언젠가 이런 멋진 작품을 하나 만들어보고 싶다."라는 생각이 들었습니다. 제가 프로젝트를 "작품"이라고 표현했죠? 종민님의 영상을 보면 하나같이 예술..

합성 컴포넌트란? 리액트 문서에는 "React는 강력한 합성 모델을 가지고 있으며 상속 대신 합성을 사용하여 컴포넌트 간에 코드를 재사용하는 것이 좋습니다."라고 합니다. 카카오 FE 기술 블로그에서는 "합성 컴포넌트 패턴은 하나의 컴포넌트를 여러가지 집합체로 분리한 뒤, 분리된 각 컴포넌트를 사용하는 쪽에서 조합해 사용하는 컴포넌트 패턴을 의미합니다."라고 하네요. 저는 합성 컴포넌트를 여러 컴포넌트들을 조합해 만든 컴포넌트로 재사용성을 위한 코드 패턴이라고 이해했습니다... 이번 포스팅은 리액트 문서를 기반으로해서 제 생각을 첨언하는 형식으로 포스팅 해보겠습니다. 컴포넌트에서 다른 컴포넌트를 담기 어떤 컴포넌트들은 어떤 자식 엘리먼트가 들어올지 미리 예상할 수 없는 경우가 있습니다. 범용적인 ‘박스’..

Context란? 리액트에서 두 개 이상의 컴포넌트 간의 데이터를 주고 받기 위해 상위 컴포넌트에서 하위 컴포넌트로 "props"를 전달해줍니다. 마찬가지로 "Context"도 "props"가 아닌 또 다른 방법으로 컴포넌트 간에 값을 전달하는 방법입니다. 즉, 컴포넌트간 값을 공유하는 여러 방법 중 하나인 셈이죠. 왜 Context를 사용하죠? "데이터를 주고 받을 때 props를 사용한다면서요...!? 그럼 왜 Context가 필요하죠? "라는 의문이 들 수도 있습니다. 아래의 이미지를 봅시다. 색이 칠해져 있는 요소는 데이터가 필요한 컴포넌트입니다. 색이 칠해져 있지 않은 요소는 데이터가 필요 없는 컴포넌트입니다. 이미지를 다시 한번 보면 색이 칠해져 있지 않은 컴포넌트는 데이터가 필요하지 않지만 ..

UI UI는 User Interface의 줄임말로 사람들이 컴퓨터와 상호 작용하는 시스템을 의미한다. 스마트폰이 세상에 나오기 전 피처폰들은 화면 터치가 아닌 숫자 버튼, 방향 버튼 등 다양한 종류의 물리적 UI가 있는 형태였다. 이후 스마트폰이 대중화되면서 홈버튼, 사이드 버튼(볼륨, 종료) 등 최근에는 홈버튼 조차 없이 오로지 화면 터치를 통한 상호작용의 비중이 높아졌다. 그만큼 모바일 디바이스에서 그래픽 UI가 매우 중요해졌다. 컴퓨터 또한 마우스의 등장 이후 꾸준히 그래픽 UI가 굉장히 중요한 요소였다. 그리고 웹의 발전으로 기존의 텍스트만으로 이루어진 웹 페이지에서 이제는 이미지, 동영상 등 다양한 상호작용을 할 수 있는 요소들이 많이 생겨나 더 생동감이 있는 웹 페이지들이 많아졌다. 또한 데스..

컴포넌트(Component)란 프로그래밍에 있어 재사용이 가능한 각각의 독립적인 모듈을 뜻한다. 프론트엔드에서 UI를 구성할 때 컴포넌트 기반으로 개발하면 마치 레고 블록을 쌓는 것처럼 이미 만들어진 컴포넌트들을 조합하여 화면을 구성할 수 있다. 컴포넌트들은 기능 구현 코드를 캡슐화하므로서 독립적으로 존재한다. 또한 재사용이 필요한 컴포넌트의 기능을 추상화하여 구현하므로서 재사용성에 매우 용이하다. 이러한 독립성과 재사용성으로 재사용을 원하는 어느곳이든 코드 충돌에 대한 걱정 없이 화면 구성이 가능하다는 큰 장점이 있다. 그 외에도 컴포넌트 기반 개발의 장점은 관심사 분리, 응집도 있는 로직 등이 있으며 독립성이 큰 장점 중 하나인 만큼 변경에 대해 엄청 유연해 유지보수 측면에서도 정말 좋다. 현대 대부..

JSX란? JavaScript XML의 줄임말로 문자열도 아니고 HTML도 아니다. 리액트에서 UI를 구성할 때 사용하는 문법으로 JavaScript를 확장한 문법이다. JSX는 JavaScript가 확장된 문법이지만 브라우저가 바로 실행할 수 있는 JavaScript 코드가 아니므로 브라우저가 이해할 수 있는 JavaScript 코드로 변환을 해주어야 한다. 이때 이용하는 것이 바로 “Babel”이다. Babel은 JSX를 브라우저가 이해할 수 있는 JavaScript로 컴파일 후 브라우저가 읽고 화면에 렌더링한다. JSX 사용하기 // 하나의 태그를 return 해주면 된다. function App() { return (Hello World!) } // 혹은 const element = Hello, ..

create-react-app(CRA)의 문제점 CRA의 가장 큰 문제점은 초기 설치해야 할 종속 요소가 많아 용량이 상당히 커져 느리다. 또한 프로젝트 규모가 커지면 개발 및 빌드 시간이 늘어나며 개발자의 생산성이 떨어진다. CRA가 느린 이유는 내부적으로 웹팩을 사용하기 때문이다. 웹팩은 제공되기 전에 전체 응용 프로그램 코드를 번들로 묶는다. 즉, 사용하지 않는 설정이나 라이브러리까지 묶는다. 또한 대규모 코드베이스를 사용하면 개발 서버를 가동하는 데 더 많은 시간이 걸리고 변경 사항을 반영하는데 오랜 시간이 걸린다. Why vite? 느린 서버 시작 시간 Vite는 먼저 애플리케이션의 모듈을 종속성과 소스 코드의 두 가지 범주로 나누어 개발서버 시작 시간을 개선한다. esbuild를 사용해 종속성..

백준 허브란? 알고리즘 사이트에서 문제를 풀면 자동으로 Github에 푸시해주는 무언가가 있으면 좋겠다 생각했었는데, 마침 부트캠프에서 함께 스터디를 하고 있는 한 스터디 분께서 공유를 해주셔서 백준 허브라는 것을 알게 되었다. 백준 허브는 LeetCode의 개인 풀이를 Github에 자동 푸시해주는 LeetHub에서 영감을 받아 만든 오픈소스 프로젝트이다. 백준, 프로그래머스, 삼성 SWEA를 통해 알고리즘 공부를 하시는 분들이 더욱 쉽게 코드를 저장하고 관리할 수 있게 만들어졌다. 사용해보면 정말 편리하다. 사실 leetHub는 알고 있었지만 백준 허브와 달리 폴더별, 단계별로 정리해주지 않고 바로 최상위 경로로 push가 되는 점이 맘에 들지 않았고 불편하더라도 개인적으로 단계별(easy, medi..