성장에 목마른 코린이

이번 섹션은 섹션 1에 비해서 정말 어려웠습니다. 멘탈 나가는 순간도 정말 많았고, 내가 이게 적성에 맞는가라는 생각도 들었습니다. 진짜 부족한게 너무 많다라고 진행하는 거의 매순간 느꼈습니다. 하지만 멘탈나가도 계속해서 꾸준히 포기하지 않고 공부를 하다보니, 잘 이해되지 않던 것들도 조금씩 보이기 시작하고, 또 스터디원들과 같이 논의하고 생각을 나누고 고민을 나누면서 힘도 내고, 나만 힘든게 아니구나 라고 느끼면서 나름 최선을 다했습니다. 섹션 1의 HA는 리액트, 고차함수, DOM 위주로의 시험이였다면, 이번 HA의 핵심은 기본 React 지식, 고차함수, 상태관리, Props, 서버, 재귀가 핵심 이였던 것 같습니다. 진짜 다행히 마지막 페어로 저의 깐부페어인 정윤님을 만나 해야할 것 빨리 끝내고,..

오늘의 학습목표 HA 뿌시기!! 학습내용 오늘의 회고 오늘 6시까지 너무 힘들었는데, 과제형 전부다 완성해서 뿌듯하고 행복합니다. 생각보다 이번 HA는 섹션1 HA 처음볼때 보다 풀만했던 것 같아서 좀 성장한 느낌도 있고, 아직 좀 더 친해져야할 부분도 보여서 좋았습니다! 이번 주말동안은 푹쉬고, 다음 주 부터 섹션3 더 열심히 해보도록 하겠습니다!

프론트엔드 개발에서 상태의 중요성 프론트엔드에서의 상태는 UI 에 동적으로 표현될 데이터를 의미합니다. "장바구니에 담기"와 같은 버튼을 눌러, 해당 물품을 장바구니에 추가할 수 있습니다. 동적인 데이터이므로 이것은 상태입니다. 상단에 [일반구매/정기배송]중 현재 선택된 탭이 무엇인지 나타내는 상태가 있을 수 있습니다. 상품 선택 여부에 따라 주문 금액이나 배송비가 달라집니다. 선택 여부는 변할 수 있으므로 상태입니다. 상품 수량도 상태입니다. 프론트엔드 개발에서의 Side Effect

Storybook Storybook은 컴포넌트의 재사용성을 확대하기 위해 사용하는 UI 개발도구입니다. 회사에서 사용하는 UI 라이브러리를 내부 개발자들을 위해 문서화하는 UI 개발도구입니다 컴포넌트를 시각화하여 시뮬레이션할 수 있는 다양한 테스트 상태를 만들어볼 수 있습니다. UI 라이브러리로 활용하기 때문에 애플리케이션과 독립적인 개발 환경에서 실행됩니다. 굳이 애플리케이션을 탐색하지 않아도 Storybook을 통해 전체 UI에 대한 파악을 한눈에 할 수 있습니다. 이러한 장점으로 외부에 공개하기 위한 기본 플랫폼으로도 활용할 수 있습니다. CSS-in-JS CSS가 특정 컴포넌트에 종속되기 때문에 className 이 겹치는 부작용이 없어서 협업, 유지 보수에 용이합니다. 다른 컴포넌트에게 영향을 ..

Express.js 소개 MERN stack은 JavaScript 생태계에서 인기 있는 프레임워크인 MongoDB, Express, React, Node를 지칭하는 말입니다. 이 중에서 Express.js는 Node.js 환경에서 웹 서버 또는 API 서버를 제작하기 위해 사용되는 인기 있는 프레임워크입니다. Express framework는 npm을 통해 다운로드할 수 있습니다. Express로 구현한 서버가 http 모듈로 작성한 서버와 다른 점 미들웨어 추가가 편리하다. 자체 라우터를 제공한다. Middleware 미들웨어는 운영 체제에서 제공하지 않는 일반적인 서비스와 기능을 애플리케이션에 제공하는 소프트웨어입니다. 데이터 관리, 애플리케이션 서비스, 메시징, 인증 및 API 관리는 주로 미들웨어..

React에서는 데이터가 위에서 아래로, 단방향으로 흐릅니다. 상태 끌어올리기 단방향 데이터 흐름이라는 원칙에 따라, 하위 컴포넌트는 상위 컴포넌트로부터 전달받은 데이터의 형태 혹은 타입이 무엇인지만 알 수 있습니다. 데이터가 state로부터 왔는지, 하드코딩으로 입력한 내용인지는 알지 못합니다. 그러므로 하위 컴포넌트에서의 어떤 이벤트로 인해 상위 컴포넌트의 상태가 바뀌는 것은 마치 "역방향 데이터 흐름"과 같이 조금 이상하게 들릴 수 있습니다. React가 제시하는 단방향 데이터 흐름의 해결책 상위 컴포넌트의 "상태를 변경하는 함수" 그 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행한다 여전히 단방향 데이터 흐름에 원칙에 부합하는 해결 방법입니다. 바로 이것이 "상태 끌어올리기" ..

REST API (Representational State Transfer) 웹 애플리케이션에서는 HTTP 메서드를 이용해 서버와 통신합니다. GET을 통해 웹 페이지나 데이터를 요청하고, POST로 새로운 글이나 데이터를 전송하거나 DELETE로 저장된 글이나 데이터를 삭제할 수 있습니다. 이처럼 클라이언트와 서버가 HTTP 통신을 할 때는 어떤 요청을 보내고 받느냐에 따라 메서드의 사용이 달라집니다. REST API에서 REST는 웹(http)의 장점을 최대한 활용할 수 있는 아키텍처로써 처음 소개되었습니다. REST API는 웹에서 사용되는 데이터나 자원을 HTTP URI로 표현하고, HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식을 말합니다. Open API 정부에서 제공하는 공공데이터가 있..

SSR (Server Side Rendering) 웹 페이지를 서버에서 렌더링합니다. 브라우저가 서버의 URI로 GET 요청을 보내면, 서버는 정해진 웹 페이지 파일을 브라우저로 전송합니다. 그리고 서버의 웹 페이지가 브라우저에 도착하면 완전히 렌더링됩니다. 서버에서 웹 페이지를 브라우저로 보내기 전에, 서버에서 완전히 렌더링했기 때문에 Server Side Rendering 이라고 합니다. 웹 페이지의 내용에 데이터베이스의 데이터가 필요한 경우, 서버는 데이터베이스의 데이터를 불러온 다음 웹 페이지를 완전히 렌더링 된 페이지로 변환한 후에 브라우저에 응답으로 보냅니다. CSR (Client Side Rendering) CSR은 클라이언트에서 페이지를 렌더링합니다. 웹 개발에서 사용하는 대표적인 클라이언..

AJAX- SPA(Single Page Application)를 만드는 기술 AJAX는 Asynchronous JavaScript And XMLHttpRequest의 약자로, JavaScript, DOM, Fetch, XMLHttpRequest, HTML 등의 다양한 기술을 사용하는 웹 개발 기법입니다. AJAX의 가장 큰 특징 - 웹 페이지에 필요한 부분에 필요한 데이터만 비동기적으로 받아와 화면에 그려낼 수 있다는 것 예시: 구글 검색창에서는 필요한 데이터만 비동기적으로 받아와 렌더링되며, 여기에 AJAX가 사용됩니다. 또한 원티드를 예로 들어 살펴보겠습니다. 원티드 탐색 페이지에서 사용자가 채용 공고 목록 페이지의 맨 밑까지 스크롤 하여 스크롤바 하단에 도달하면, 새로운 채용 공고를 서버로부터 가져..

HTTP (HyperText Transfer Protocol) HTML과 같은 문서를 전송하기 위한 Application Layer 프로토콜입니다. HTTP는 웹 브라우저와 웹 서버의 소통을 위해 디자인되었습니다. 전통적인 클라이언트-서버 모델에서 클라이언트가 HTTP messages 양식에 맞춰 요청을 보내면, 서버도 HTTP messages 양식에 맞춰 응답합니다. HTTP는 특정 상태를 유지하지 않는 특징이 있습니다. HTTP의 특징: Stateless(무상태성) HTTP Messages HTTP messages는 몇 줄의 텍스트 정보로 구성됩니다. 그러나 개발자는 이런 메시지를 직접 작성할 필요가 거의 없습니다. 구성 파일, API, 기타 인터페이스에서 HTTP messages를 자동으로 완성합니..

URL (Uniform Resource Locator) 과 URI (Uniform Resource Identifier) URL은 네트워크 상에서 웹 페이지, 이미지, 동영상 등의 파일이 위치한 정보를 나타냅니다. URL은 scheme, hosts, url-path로 구분할 수 있습니다. 가장 먼저 작성하는 scheme은 통신 방식(프로토콜)을 결정합니다. 일반적인 웹 브라우저에서는 http(s)를 사용합니다. hosts는 웹 서버의 이름이나 도메인, IP를 사용하며 주소를 나타냅니다. url-path는 웹 서버에서 지정한 루트 디렉토리부터 시작하여 웹 페이지, 이미지, 동영상 등이 위치한 경로와 파일명을 나타냅니다. URI는 일반적으로 URL의 기본 요소인 scheme, hosts, url-path에 더..

2-Tier 아키텍쳐 / 클라이언트-서버 아키텍쳐 3-Tier 아키텍처 / 프론트엔드와 백엔드 클라이언트와 서버 종류 프로토콜 스타벅스와 같은 커피 전문점에 가서 커피를 주문할 때에는 다양한 방법을 사용할 수 있습니다. 카운터로 찾아가거나, 앱을 이용하거나, 키오스크를 이용할 수도 있습니다. 이러한 방법 하나하나가 프로토콜 입니다. Web Application 프로토콜: HTTP HTTP를 이용해 주고받는 메시지는 "HTTP 메시지"라고 부릅니다. 주요 프로토콜 네트워크 기초 지식은 간혹 면접에서 요구하는 경우도 있습니다. API: Application Programming Interface 스타벅스를 예를 들어 생각해 보면 메뉴판과 같은 역할을 한다고 볼 수 있습니다. 클라이언트가 스타벅스가 제공하는 ..