# MGS

imzzuu

프론트엔드 공부를 시작하다! 올해 초 프론트엔드가 적성에 맞는지 일단 배워보기로 결심했다! 마침 짧은기간에 프론트가 알아야할 지식들을 모두 배워보는 과정이 있길래 왕복 3시간이 넘는 거리에 있는 학원을 등록하고 듣기 시작했다! html, css, js, react, jquery, bootstrap, node.js 까지 2달 안에 배우는 빡센 과정이었는데, 처음 한달은 거의 울면서 살았다....ㅠㅠ 부트캠프 탐색 그렇게 두달이 지나고 프로젝트를 진행하면서 제대로 배워

kite1993

지난 토요일과 이번 주에 걸쳐서 학습한 테스팅에 대한 부분을 요약했습니다. 기본적인 애플리케이션 테스트의 개념을 살펴보고, 테스트 도구와 기법도 정리했습니다. 어플리케이션 테스트 테스트의 개념 컴퓨터 공학에서 말하는 테스트는, 특정 조건을 조성한 뒤 시스템 또는 구성 요소가 실행되고, 결과가 관찰 또는 기록되며, 평가가 이루어지는 일련의 활동을 뜻합니다. 이러한 테스트를 시행하는 데에는 여러 가지 이유가 있습니다. 먼저, 이번 작업이 잘 작동하는가를 검증하기 위해서입니다. 어찌보면 당연한 부분입니다. 지금까지 작업한 결과물이 개발자들의 의도에 부합하는지, 프로젝트의 요구 사항을 충족하는 지 확인하기 위해서입니다. 또한, 기존 작업에 대한 side effect 검사를 하기 위

kite1993

두번째 React 추가 강의를 수강한 뒤 요약해보았습니다. 이번 글에서는 SSR과 CSR, 그리고 SPA의 개념에 대해 자세히 다루었습니다. 이를 바탕으로 Next.js 개발 환경에 대한 이해도 다시 복습했습니다. SSR이란 무엇인가 SEO 먼저 SSR을 알아보기 전에 SEO의 개념을 간단하게 알아볼 필요가 있습니다. SEO는 검색엔진최적화 (Search Engine Optimization, SEO)를 지칭하는 것으로, 검색 엔진으로부터 웹사이트나 웹페이지에 대한 웹사이트 트래픽의 품질과 양을 개선하는 과정입니다. SEO는 검색 엔진에서 정보를 수집하는 시스템이 내 서비스를 좀 더 잘 찾을 수 있도록 하는 과정이라고 보면 되겠습니다. 특히 우리가 자주 사용하는 구글 같은 경

kite1993

저번 주와 이번주에 걸쳐서 상태 관리 라이브러리들을 알아보았습니다. 다만 Redux와 Context API 위주로 실습을 진행했기 때문에, 자체적으로 MobX의 개념과 사용법에 대해 따라 살펴보았습니다. MobX 소개 MobX의 특징 상태 관리 라이브러리의 개념에 대해서는 이미 앞선 정리글에서 다뤄 보았습니다. 따라서 이번 글에서는 MobX 자체의 특징에 집중해서 학습 내용을 요약하려고 합니다. > 1. React에 종속 되지 않음 Redux와 마찬가지로 React에 종속되는 라이브러리가 아닙니다. 따라서 바닐라 자바스크립트로 구성한 프로젝트에서도 사용 가능합니다. 다만, 상태를 가지고 프로그래밍을 하는 데 있어서는 사실상 React가 핵심적이기 때문에 실무에서는 대부분의 경우 R

kite1993

진상현 강사님의 수업에서 실습을 통해 Context API에 대해 복습했습니다. Context API에 대한 내용을 간단히 언급만 하고 넘어간 것 같아 독립된 포스팅으로 정리해보았습니다. Context API 소개 Context API의 개념 React에서 컴포넌트가 데이터를 다루는 방법에는 Props, State 그리고 Context가 있습니다. 그 중 Props와 State에 대해서는 다른 글에서 다루었고, 이 글에서는 Context에 관한 개념만 정리하겠습니다. 이미 학습한 props는 단방향으로만 데이터가 흐릅니다. 부모에서 자식 컴포넌트로만 props 내의 데이터가 흐르죠. ![](https://velog.velcdn.com/images/kite1993/post/4e269

kite1993

저번 글에서는 Next.js의 이론적 배경에 대해 살펴보았고, 오늘은 Next.js로 프로젝트를 구성할 때 기본적으로 알아두어야 할 부분을 정리했습니다. Next.js 사용해보기 Next.js 프로젝트 구성 React 기반의 프로젝트를 만들때 흔히들 사용하는 방법이 Create-React-App입니다. 간편하게 사전 프로젝트 설정을 할 수 있어 널리 사용되는 방법이죠. Next.js도 CRA와 같은 방식으로 가능합니다. CRA와 마찬가지로, 해당 명령어로 Next.js 프로젝트를 위한 사전 설정이 모두 제공됩니다. TypeScript, SASS는 설치와 동시에 적용됩니다. 뿐만 아니라 기본적으로 ES6 문법이 지원되고, auto-prefix가 적용되어 있습니다. Ro

kite1993

Git 특강을 진행하셨던 최원영 강사님께서 다시 한번 수업을 해주셨습니다. 이번 강의는 프로젝트 관리와 관련된 여러 실무 지식들을 알려주셨습니다. 프로젝트 Life Cycle Software Development Life Cycle (SDLC) 프로젝트 Life Cycle은 기획 단계에서 운영까지의 일련의 사이클을 뜻합니다. 일반적으로 개발 생명 주기와 배포 생명 주기로 나뉘는데, 개발자의 입장에서 개발 생명 주기 위주로 알아보도록 하겠습니다. 개발 생명 주기를 보통 소프트웨어 디벨롭먼트 라이프사이클(SDLC) 이라 칭하는데, 소프트웨어를 계획하고 개발, 시험, 배포하는 전 과정을 칭하는 개념입니다. SDLC는 "요구 사항 분석 - 설계 - 구현 - 테스트 - 유

kite1993

오늘 교육 과정 중에는 React 발표회가 예정되어 있었습니다. 발표 중심의 저번 주와는 다르게, 매니저님께서 실습 과제를 제시하고 이를 구현하는 식이었습니다. Redux를 활용하여 로그인 페이지를 구현하는 작업을 진행하고 기록으로 남겨보았습니다. 개요 과제의 방향성 이번 과제의 의도는 아래와 같았습니다. > - 상태(state)를 통해 input 요소 관리하기 useEffect 훅으로 state 관리하기 Redux로 state 관리하기 state를 통해 컴포넌트 조작하기 감사하게도 사전에 fork한 프로젝트에는 이미 각종 라이브러리나, import 문법이 갖추어져 있었습니다. 또한 해당 과제를 수행하기 위한 폴더 구조도 마련되어 있어 React 코드에 집중할 수 있는 형식이었습니다. 로그인 명세 ![](https://velog.velcdn.com/images/kite1993/post/6c376f3e-74aa-4263-a6e4-b24

kite1993

드디어 관심을 가지고 있던 GraphQL 부분에 대한 학습을 진행했습니다. 앞으로 GraphQL을 활용한 프로젝트도 직접 구성해보고 싶은 마음이 있어 최대한 꼼꼼하게 학습해보려고 했습니다. > 해당 포스팅은 6월 초에 예정된 React 심화 강의 후에 보충할 계획입니다. GraphQL의 개념 GraphQL 소개 GraphQL은 페이스북에서 만든 쿼리 언어입니다. 쿼리 언어이기 때문에, gql은 sql과 유사한 점도 있지만, gql과 sql의 언어적 구조 차이는 매우 큽니다. 그로 인해 gql과 sql이 실전에서 쓰이는 방식의 차이도 매우 큽니다. sql은 데이터베이스 시스템에 저장된 데이터를 효율적으로 가져오는 것이 목적이고, gql은 웹 클라이언트가 데이터를 서버로 부터

kite1993

저번 시간에 이어 이번 정리글에서도 다양한 React 라이브러리들에 대해 학습 내용을 요약해 보았습니다. 데이터 모킹 라이브러리 데이터 모킹 라이브러리란? 현업에서나, 프론트엔드를 학습하는 단계에서나 데이터를 페칭해오는 과정은 대단히 빈번하게 마주하게 되는 영역입니다. 데이터 페칭을 해야하는 경우 통신을 통해 응답을 내려주는 서버가 구축되어 있어야 합니다. 하지만 완전하게 서버가 구축되지 않은 단계에서는, 프론트엔드 개발자들은 API 호출과 관련된 테스팅을 진행하기 위해서 API의 레플리카를 만들어서 데이터 페칭을 테스트하게 됩니다. 바로 이 API의 레플리카를 만드는 것이 데이터 모킹이라고 칭합니다. 데이터 모킹은 대단히 복잡한 작업입니다. 이를 도와주는 것이 바로 데이터 모킹

kite1993

드디어 React와 사용되는 다양한 라이브러리에 대해 정리하고자 합니다. 오늘은 시간과 관련된 라이브러리와 스타일링 라이브러리를 요약했습니다. 시간/일자 라이브러리 Moment moment.js는 자바스크립트에서 사용되는 날짜 관련 라이브러리 중 가장 많이 사용되었던 라이브러리입니다. 자바스크립트 기반이기 때문에 리액트와 함께 사용하는 것도 충분히 가능합니다. 물론 2011년을 기점으로 업데이트와 지원이 중단된 만큼, 실제 프로젝트에 자주 사용되지는 않는다는 것을 주의할 필요는 있겠습니다. (뒤에 다룰 시간 관련 라이브러리들이 훨씬 많이 사용됩니다.) moment 설치 moment는 npm을 통해 설치할 수 있습니다. 설치를 성공적으로 마쳤다면, import

kite1993

오늘까지 예정되어 있던 React 강의를 어제부로 완료했습니다. 오늘은 리액트로 프로젝트를 구성할 때, 필요한 사전 설정들을 개인적으로 공부해 정리해보았습니다. React & ES Lint Linter는 무엇인가 위키에서 린트를 한번 검색해보았습니다. 다음과 같은 설명이 나오는군요. > 린트(lint) 또는 린터(linter)는 소스 코드를 분석하여 프로그램 오류, 버그, 스타일 오류, 의심스러운 구조체에 표시(flag)를 달아놓기 위한 도구들을 가리킨다. 린트는 쉽게 말해서, 코드의 문법 오류나 패턴에서 벗어난 코드를 지적해줍니다. 결과적으로 일관된 스타일로 코드를 작성할 수 있게 해주는 도구입니다. Lint라는 단어가 영어로 '보푸라기'를 뜻합니다. 그래서 문법이나 컨벤션

kite1993

오늘은 공식 문서를 바탕으로 한 React 심화 과정을 끝냈습니다. 마무리하면서, 기존에 충분히 다루지 못했거나 추가 학습이 필요한 부분에 대해서도 추가하여 정리글을 작성해 보았습니다. 재조정 (Reconciliation) 재조정이란? React는 선언적 API를 제공하기 때문에, 화면이 새롭게 갱신이 될 때마다 매번 무엇이 바뀌었는지를 굳이 신경 써주지 않아도 됩니다. 물론 이것이 웹 어플리케이션의 작성을 쉽게 만들어주지만, React 내부에서 어떤 일이 일어나고 있는지는 명확히 알려주지 않는다는 것은 단점으로 작용합니다. 재조정(Reconciliation)은 우리가 React의 “비교 (diffing)” 알고리즘을 만들 때 어떤 선택을 했는지를 소개하는 기능입니다. 이

kite1993

오늘 교육 과정은 그동안 낯설었던 개념이 많았습니다. Memoization이나 portal 같은 개념들은 개인적인 React 프로젝트를 통해서 연습하는 과정이 필요할 것 같습니다. Memoization Memoization의 개념 메모이제이션(memoization)은 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술입니다. 여러 알고리즘 패턴 중, 동적 계획법의 핵심이 되는 기술로써, 리액트에서도 memoization을 활용할 수 있는 방법이 있습니다. 함수가 외부 변수에 영향을 받지 않도록 잘 작성했다면, 내가 넣은 input 값에 대해 함수는 언제나 동일한

kite1993

24일차에도 저번 시간에 이어, React 공식 문서를 바탕으로 React 심화 개념을 학습해보았습니다. 이번 시간에는 Hooks들을 본격적으로 다루고, memoization이나 portal과 같은 개인적으로 학습해 본 적 없는 개념들을 공부하게 되어 시간 투자를 필연적으로 많이 하게 되었습니다. 본 정리글을 교재 삼아서 지속적인 복습을 해야할 듯 합니다. React Hooks Hooks의 개념 Hook은 React 버전 16.8부터 새롭게 추가된 기능입니다. Hook을 이용하면 기존에 Class 바탕의 코드를 작성할 필요 없이 상태 값이나 다른 여러 React의 기능을 손쉽게 사용할 수 있습니다. 좀 더 직관적으로, 복잡한 로직을 구현할 필요없이 단축키처럼 리액트의 특정 기

kite1993

프로젝트 후 첫번째로 수강한 강의입니다. 이번 파트에서는 React 공식 문서를 기반으로 기존에 다루지 않은 리액트 심화 개념들을 정리했습니다. React와 조건부 렌더링 조건부 렌더링의 개념 React에서는 원하는 동작이나 기능을 캡슐화하는 컴포넌트를 만들 수 있습니다. 해당 동작을 컴포넌트 안에 캡슐화하면, 애플리케이션의 상황에 따라서 조건부로 렌더링되는 컴포넌트를 만들 수 있습니다. React도 자바스크립트와 마찬가지로, 논리 연산자나 조건문 등의 문법을 활용해 언급한 조건부 렌더링을 발동시킬 조건을 구축할 수 있습니다. 위 코드 블럭은 결과적으로 isLoggedIn의 상태에 따라 다른 인사말을 렌더링합니다. UserGreeting 컴포넌트와 GuestGreeting 컴포넌트가 조건에 따라 선별적으로 렌더링되는 것이죠. 엘리먼트 변수 엘리먼트를 저장하기 위해 변수를 사용할 수 있습니다. 이를 활용해 출력의 다른 부분은 변하지 않은 채

kite1993

어제에 이어 오늘은 React 심화 개념에 다루어 보았습니다. 이재원 매니저님의 React 특강을 통해 기초 개념을 다시 복습하면서 진행했습니다. 이벤트 핸들링 이벤트 핸들링 in React React에서의 이벤트 핸들링은 자바스크립트의 그것과 비슷합니다. HTML DOM에 특정 행동을 하면, 미리 설정해 놓은 이벤트가 발생하게끔 하는 것입니다. 그리고 그 이벤트가 발생하면, 그에 맞춰서 동적으로 웹 페이지가 변경되게 될 것입니다. React 내에서 우리는 대부분의 코드를 jsx로 작성하기 때문에, jsx 내에서도 당연히 이벤트 핸들링을 할 수 있게 설계되어 있습니다. 전에 React의 특징 중 가상 DOM을 언급한 적이 있는데요, 이 가상 DOM은 React 내에서 이벤트를

kite1993

17일차 학습 내용 중 React의 기초 개념에 대한 부분을 요약한 글입니다. React 소개 프론트엔드 개발 분야에 관심이 있으신 분이라면, React를 모르실 수가 없을 거라고 생각합니다. 보통 Angular, Vue.js와 같이 묶여 '프레임워크 3대장'이라고 흔히 불리기도 합니다. 기업들의 채용 공고는 다양한 요건을 요구하지만, 그 와중에 React는 거의 빠지지 않고 등장하는 필수 요건입니다. 뿐만 아니라, 각종 개발자 교육 관련 매체에서도 어떤 예외도 없이 모두 React를 다루고 있죠. 그만큼 React는 대세입니다. 보시는 이미지는 2021년 말 실시된 스택오버플로우의 설문 조사입니다. 개발자들을 대상으로 가장 인기있는 웹 프레임워크를 물어 본 결과인데, React는 당

kite1993

오늘은 오랜만에 온라인 강의로만 일정을 진행했습니다. 강의 주제가 여러 개인 만큼, 17일차 학습 내용은 여러 게시물로 나누어서 정리할 계획입니다. > 첫 번째 글은 Webpack에 대한 내용을 정리했습니다. Webpack 모듈 번들러 원래 자바스크립트는 페이지별, 혹은 기능별로 자바스크립트 파일로 분류하고 HTML파일에서 script 태그로 로드하는 형식이었습니다. 하지만 프로젝트가 커지면 커질 수록 자바스크립트 파일 각각의 의존성과 코드 사이의 실행 순서를 예측하기 힘들어지게 되었습니다. 이를 해결하기 위해 나온 것이 모듈이라는 개념입니다. ES6의 import/export 문법이 이 모듈을 지원하기 위한 것이죠. 프로젝트를 진행하면 이러한 모듈이 다수 생성되게 됩니다. 이러한 의존성이 있는 모듈 코드를 하나 또는 여러개의 파일로 만들어 주는 도구가 바로 모듈 번들러인 것입니다. 모듈 번들러는 여러 가지가 존재합니다. Parcel

kite1993

오늘 정리 내용은 타입스크립트 심화편입니다. 컴파일부터 인터페이스, 클래스 문법까지를 커버했습니다. > 해당 정리글은 교육 과정 중 학습한 내용과 제가 개인적으로 요약한 타입스크립트 이론을 바탕으로 작성하였습니다. 타입스크립트 컴파일 TypeScript 설치법 저는 npm을 통해 타입스크립트를 설치하였고, 따라서 npm을 통한 타입스크립트 설치법을 소개해 보겠습니다. (당연하게도, Node.js, npm이 미리 설치되어 있어야 합니다.) 설치가 필요한 디렉토리에서 터미널을 열고, 위 명령어들을 입력하시면 끝입니다. ![](https://velog.velcdn.com/images/kite1993/post/b5be8fff-1944-4ff2-a95c-84b801a20bdf/image