ALL

[Day 33] 2022-0808

🐈오늘 공부한 것 ✔️Postman 활용하여 OPEN API 테스트하기 https://friedegg556.tistory.com/189 포스트맨은 다양한 메서드로 API 호출을 테스트 해볼 수 있는 GUI 플랫폼이다. weather API 라는 OPEN API 에서 날씨 데이터를 가져오는 GET 요청 연습을 했다. API URL 을 입력하면 자동으로 파라미터를 전달할 수 있도록 셋팅되는데, 파라미터는 key 와 value로 구분되어 있고, 해당하는 value 값과 발급받은 API Key 를 함께 전달할 수 있다. Post 요청에서는 body에 raw 데이터로 JSON 데이터를 직접 입력하여 요청할 수 있다. ✔️UseEffect로 fetch API 호출하기 https://friedegg556.tistor..

[Day 32] 2022-0805

오늘 배운 것 RESTful API 개념정리 OPEN API 와 API Key [WEB] REST API를 알아보자! REST API REST(Representational State Transfer)는 월드 와이드 웹과 같은 분산 하이퍼미디어 시스템을 위한 소프트웨어 아키텍처의 한 형식이다. (출처 : 위키피디아 REST) 위키피디아에 REST에 대해 위와 같이 friedegg556.tistory.com 새롭게 알게 된 것 REST API 가 OPEN API 처럼 접근해서 사용하는 소프트웨어인줄 알았는데, 사용하기 좋은 HTTP API 를 만들기 위한 아키텍처 - 원칙? 같은 것이었다. REST 라는 것을 많이 들어보긴 했지만 어떤 것인지 크게 관심을 가지지 않았었다. 토이 프로젝트를 했을때도 REST..

[React] UseEffect로 fetch API 요청하기

import React, {useState, useEffect} from 'react'; function Test() { const [weather, setWeather] = useState(0); useEffect(() => { fetchData(); }, []); const fetchData = async () => { let response = await ( await fetch( 'http://apis.data.go.kr/1360000/VilageFcstInfoService_2.0/getUltraSrtFcst?serviceKey={API Key}&numOfRows=10&pageNo=1&base_date=20220807&base_time=0630&nx=55&ny=127&dataType=JSON', ..

[WEB] Postman - Weather API 사용해보기

Postman이란? 서버에 HTTP 요청을 보내고 결과를 받아올 수 있는 플랫폼이다. 주로 API 를 테스트 할 때 사용한다. GET 요청 같은 경우 URI를 활용해 브라우저에서도 충분히 테스트 할 수 있지만, GET 요청이 아닌 다른 요청을 보낼때는 조금 번거로워진다. 이 때 Postman 같은 도구를 사용하면 쉽게 API를 테스트할 수 있다. Postman 시작하기 좌측 상단 Workspaces 탭에서 새로운 워크스페이스를 생성하거나, 기존 워크스페이스에서 작업할 수 있다. 워크스페이스 생성 후 콜렉션을 생성해 API 호출 기록을 저장해 둘 수 있다. New 탭에서 HTTP Request 를 선택하면 새로운 요청을 생성할 수 있다. GET 요청 Open Weather Map API 를 활용하여 현재 ..

[WEB] REST API를 알아보자!

REST API REST(Representational State Transfer)는 월드 와이드 웹과 같은 분산 하이퍼미디어 시스템을 위한 소프트웨어 아키텍처의 한 형식이다. (출처 : 위키피디아 REST) 위키피디아에 REST에 대해 위와 같이 설명하고 있다. 로이 필딩이라는 분이 HTTP 프로토콜의 장점을 최대한 활용할 수 있도록 고안한 네트워크 아키텍처이다. 2000년에 처음 소개되었고, 2022년 현재까지 널리 사용되는 API 설계의 원칙이라고 할 수 있다. API가 무엇인가요? 웹 상에서 데이터를 주고 받기 위해 HTTP 프로토콜(규약) 을 사용한다. 그리고 HTTP를 사용해서 원활하게 소통하기 위해서 위해서 API라는 것을 만들고 활용한다. API는 간략하게 설명하면, 프로그램끼리 서로 소통..

[Day 31] 2022-0804

오늘 배운 것 클라이언트 - 서버 아키텍처의 HTTP 통신에 대한 내용 정리 클라이언트 사이드 렌더링 CSR 과 서버 사이드 렌더링 SSR 비교 [NETWORK] 웹은 어떤 원리로 작동할까? : HTTP 간단 정리 웹 컨텐츠를 이용할 때 어떤 일이 벌어질까. 웹 브라우저를 통해 웹 컨텐츠를 볼 때 다음과 같은 일이 일어난다. 웹 브라우저 (클라이언트)가 웹 서버에 컨텐츠를 요청하고, 요청을 받은 서버는 friedegg556.tistory.com 새롭게 알게 된 것 HTTP 프로토콜의 개괄적인 내용을 공부하고 정리할 수 있었다. 클라이언트 측에서 데이터를 요청할 때 HTTP 리퀘스트를, 해당 리퀘스트를 받아 데이터 혹은 결과를 담은 리스폰스를 보내준다는 것은 알고 있었다. 추가적으로 HTTP 메시지의 구조..

[NETWORK] 웹은 어떤 원리로 작동할까? : HTTP 간단 정리

웹 컨텐츠를 이용할 때 어떤 일이 벌어질까. 웹 브라우저를 통해 웹 컨텐츠를 볼 때 다음과 같은 일이 일어난다. 웹 브라우저 (클라이언트)가 웹 서버에 컨텐츠를 요청하고, 요청을 받은 서버는 해당 컨텐츠를 클라이언트로 전송해준다. 인터넷 상에 존재하는 수 많은 컨텐츠들은 이런 방식으로 전송되며, 먼 길을 오가는 와중에 꼬이거나 손상되지 않도록 서로간에 ‘이렇게 주고 받읍시다!’ 라는 통신 규약, 프로토콜을 활용한다. 전 세계의 모든 웹 브라우저, 서버, 애플리케이션은 HTTP 라는 프로토콜을 통해서 서로 대화한다. 인터넷 세상의 공용어인 셈이다. 클라이언트 - 서버로 이루어진 통신 구조를 클라이언트 - 서버 아키텍쳐, 2티어 아키텍쳐라고 부르며, 여기에 데이터를 저장할 수 있는 DB를 포함해 3티어 아키..

[Day 30] 2022-0803 : state 배열 데이터 필터링과 데이터 삭제

오늘 배운 것 리액트 state를 특정 조건에 따라서 필터링하여 갱신하고, 또 삭제하여 갱신하는 연습을 했다! 새롭게 알게 된 것 오늘 내용은 Advanced 요구사항 구현을 빙자한 삽질이 대부분이라 어떻게 정리를 해야 할지 감이 안 온다. 일단 오늘의 요구사항부터 정리해보자! 과제의 주요 요구사항은 C:사용자 입력데이터로 트윗 생성, R:모든 트윗 불러오기, D:버튼 클릭 시 트윗 삭제이다. 여기에 추가로 select와 option을 활용해 선택한 사용자가 쓴 글만 보이도록 하는 드롭다운 메뉴가 필요하다. 드롭다운 메뉴 만들기 먼저 드롭다운 메뉴를 만들기 위해서.. 처음에는 컴포넌트로 생각하고 접근했다. 이 부분까지 컴포넌트로 따로 분리하여 작성하는 것이 맞는지 잘 모르겠는데, 분리해서 작업을 한 결과..

[Day 29] 2022-0802 : props, state 활용해 SPA 만들기

오늘 배운 것 리액트의 Props와 State 개념에 대해서 정리해보았다. [React] 리액트 Props 와 State 를 알아보자! 리액트에서 컴포넌트는 하나의 기능 단위로 구분된 코드 모음, 즉 데이터 + 화면이 같이 존재한다. 따라서 컴포넌트 내부 로직은 데이터가 변경되면 화면이 바뀌는, 데이터 중심으로 동작한다. friedegg556.tistory.com 새롭게 알게된 것 Props와 State 활용 오늘은 어제까지 진행했던 twitter 클론 과제에 이어서, 사용자가 입력한 데이터를 화면에 렌더링할 수 있도록 props와 state 개념을 활용하여 연습했다. 과제가 진행될수록 컴포넌트간 분리가 더욱 확실해졌는데, 오늘 과제에서는 컴포넌트와 컴포넌트를 포함하는 페이지들 그리고 전체 페이지 경로를..

[React] 리액트 Props 와 State 를 알아보자!

리액트에서 컴포넌트는 하나의 기능 단위로 구분된 코드 모음, 즉 데이터 + 화면이 같이 존재한다. 따라서 컴포넌트 내부 로직은 데이터가 변경되면 화면이 바뀌는, 데이터 중심으로 동작한다. 컴포넌트에서 외부로부터 받아오는 데이터는 props, 컴포넌트 안에서 바뀌는 데이터는 state로 구분할 수 있다. Props란 무엇인가? props란 컴포넌트의 프로퍼티(properties)를 의미한다. 자바스크립트에서 함수를 생각하면 조금 이해가 쉬운데, 함수를 전달 인자와 함께 호출하면, 호출된 함수 내부에서 그 전달 인자를 매개변수로 받아와 접근할 수 있듯이, 상위 컴포넌트에서 호출된 하위 컴포넌트에 속성 값을 전달하면, 그 속성 값 props라는 객체를 하위 컴포넌트에서 접근할 수 있다. 실제 함수를 호출할 때..