sy의 코딩 개발일지

Redux 컴포넌트와 상태를 분리하여 전역에서 상태 관리를 해줄 수 있게 해주는 상태 관리 라이브러리 상태는 동적으로 표현되는 데이터이다. Side Effect 함수의 입력 외에도 함수의 결과에 영향을 미치는 요인 ex) 네트워크 요청, API 호출 Presentation 컴포넌트 어떤 데이터가 들어오는지 상관하지 않고, 설사 데이터가 가짜 데이터라 할지라도 컴포넌트는 표현(presentation) 그 자체에 집중 상태를 구분 로컬 상태, 전역 상태 로컬 상태는 특정 컴포넌트 안에서만 관리되는 상태이며, 전역 상태는 프로덕트 전체 혹은 여러 가지 컴포넌트가 동시에 관리하는 상태 다른 컴포넌트와 데이터를 공유하지 않는 폼(form) 데이터는 대부분 로컬 상태입 ex)input box, select box ..

import { useState, useEffect } from 'react'; import styled from 'styled-components'; const deselectedOptions = [ 'rustic', 'antique', 'vinyl', 'vintage', 'refurbished', '신품', '빈티지', '중고A급', '중고B급', '골동품' ]; //드롭다운 메뉴에서 선택 가능한 검색어 목록 /* TODO : 아래 CSS를 자유롭게 수정하세요. */ const boxShadow = '0 4px 6px rgb(32 33 36 / 28%)'; const activeBorderRadius = '1rem 1rem 0 0'; const inactiveBorderRadius = '1rem 1r..

Modal.js import { useState } from 'react'; import styled from 'styled-components'; export const ModalContainer = styled.div` // TODO : Modal을 구현하는데 전체적으로 필요한 CSS를 구현합니다. display:flex; align-items:center; justify-content:center; //가운데 정렬 하지만 높이가 가운데가 되지 않았다. 이유는 부모가 높이가 없었다. height:950px; //그래서 부모에게 높이를 주었다. `; export const ModalBackdrop = styled.div` // TODO : Modal이 떴을 때의 배경을 깔아주는 CSS를 구현합니다. d..

https://www.figma.com/file/2OY16LH29KTqrS6T7EAXZJ/Untitled?node-id=0%3A1&t=MuijSr7mcdZMpnsL-1 Figma Created with Figma www.figma.com 처음으로 인스타를 클론을 해봤다. 아쉬운점은 알아보기 쉽지 않게 카테고리를 막 만든것 같다. 알아보기 쉽게 이름을 정했다면 더 만들기 수월했을 것같다. 다음에 시간을 내서 과제1에서 만든 것을 응용하여 기능을 더 추가시켜서 만들어봐야겠다.

https://www.figma.com/file/HQmmEyQA9YNNzhSVRFZmFn/Untitled?node-id=0%3A1&t=FyzqhdX6xHX5F5kJ-1 Figma Created with Figma www.figma.com Bare Minimum Requirements GNB (Global Navigation Bar) Modal Toggle Tab Accordion Advanced Challenge Drop Down Auto Complete 을 만들어봤다. 처음에는 복잡하게 만들었다. 계속 만들다보니 모르는 부분이 나왔는데 유튜브를 참고해가면서 만들어보니 간단하게 컴포넌트를 구현하여 복붙하여 클릭에 따라 움직임을 만들었다. 이런식으로 만드니 보기도 쉽고 이해하기도 수월했다. Auto Com..

Main.js 부모컴포넌트 Search.js 와 FlightList.js 자식 컴포넌트 검색 버튼 누를시 search함수가 실행이된다. 부모컴포넌트(Main.js)에서 있는 상태 변경하는 함수(search)를 자식 컴포넌트(Search.js)에 전달후 이 함수를 자식 컴포넌트에서 실행을 한다. onSerach는 부모컴포넌트에 정의되어 있으며 setCondition함수를 호출하여 값을 변경한다. 하위 컴포넌트에서 search대신 onSearch로 받는다고 생각하면 될것 같다. 검색 버튼 누를시 search함수가 실행이된다. Main.js import Head from 'next/head'; import { useEffect, useState } from 'react'; import { getFlight }..

PostMan으로 MessageState에 POST요청을 보내는 과정 "POST" 요청 메소드를 선택 요청 URL을 입력하여 MessageState API에 접속 요청 헤더에 필요한 값을 설정 요청 본문에 데이터를 입력 "Send" 버튼을 클릭하여 요청을 보낸다. 응답을 확인하고, 성공적으로 저장되었는지 확인 post요청은 서버에 데이터를 보내기 위해 사용되는 HTTP메소드이다. 이 데이터는 요청 본문에 포함되어 전송되고 서버에서는 이 데이터를 가지고 추가적인 처리를 수행한다. POST요청은 줄로 데이터베이스에 데이터를 저장하거나 갱신하는데 사용된다. POST요청을 보내는 과정을 설명하면서 알게된것이 있다. 요청헤더에 필요한 값을 설정하지 않으면 API 서버에서는 요청 메시지에 포함된 데이터의 형식을 알..

REST API에서 REST(Representational State Transfer) : 웹 기술의 아키텍처 스타일 REST API는 HTTP 프로토콜을 이용해 리소스와 관련된 정보와 기능을 제공 웹에서 사용되는 데이터나 자원(Resource)을 HTTP URI로 표현하고, HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식 REST 성숙도 모델 - 0단계 HTTP 프로토콜을 사용하기만 해도 된다. 0단계는 REST API를 작성하기 위한 기본 단계 REST 성숙도 모델 - 1단계 REST 성숙도 모델에 따르면, 1단계에서는 개별 리소스(Resource)와의 통신을 준수 모든 자원은 개별 리소스에 맞는 엔드포인트(Endpoint)를 사용해야하며 요청하고 받는 자원에 대한 정보를 응답으로 전달해야 한다..