https://velog.io/@mageboy 로 이사합니다!

Open API . 공공데이터 포털 에 접속해보자 정부는 Open API의 형태로 공공데이터를 제공하고 있음. Open이기는 하지만 기관이나 API마다 정해진 이용 수칙이 있을 수 있음! 데이터를 JSON 이나 XML, CSV형태로 주더라. API Key API를 이용하기 위해서는 API Key가 필요함. 얘는 서버의 문을 여는 열쇠같은 거임. 데이터를 요청할 때 API key를 같이 전달해야 원하는 응답을 받을 수 있음.!

REST API 란? 웹 애플리케이션에서는 HTTP 메서드를 이용해 서버와 통신함. GET을 통해 웹 페이지나 데이터를 요청하고, POST로 새로운 글이나 데이터를 전송하거나 PUT 을 통해 갱신하고, DELETE로 데이터를 삭제할 수 있음. 이렇게 어떤 요청을 보내고 받느냐에 따라 메서드의 사용이 달라지는게 당연 REST는 Representational State Transfer의 약자로, 웹에서 사용되는 데이터나 자원을 HTTP URI로 표현하고 HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식을 말함! 다시말해 HTTP 프로토콜 기반으로 요청과 응답을 주고받기 위한 잘 작성된 메뉴판(API)가 필요함! 좋은 REST API를 디자인하는 방법 엄밀히 3단계까지는 지키기 어렵기 때문에 2단계까지만 ..

클라이언트와 서버의 통신을 담당하는 API는 어떻게 작성해야 할까요? 구글이나 MS 같은 대형 IT 기업은 API를 어떻게 작성하고 있을까요? 만약 혼자서 웹사이트를 만들고 관리한다면, API를 어떻게 설계하고 구현하든 상관이 없습니다. 그러나 일반적인 회사에서 진행하는 서비스 개발은 대부분 팀 단위로 진행합니다. 그렇기에 사소한 것 하나라도 규칙(rule)이 있어야 소통이 원활합니다. 이번 유닛에서는 API의 대표적인 아키텍처인 REST API를 알아보고, Postman으로 HTTP 요청을 직접 실습(API 테스팅)합니다. Achivement Goals REST API에 대해 이해할 수 있다. REST API 문서를 읽을 수 있다. REST API에 맞춰 디자인할 수 있다. Open API와 API K..

- 주어진 상황 😢 리액트에서 Thumbnail 컴포넌트에 img 요소를 집어넣으려고 하였다. function Thumbnail(props) { return ; } export default Thumbnail; - 만난에러와 원인 😈 img is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML' styled-component 을 사용할때 발생하는 문제로 input img 등과 같이 자식 태그를 넣을 수 없는 태그에 자식을 넣었을떄 발생함. - 해결과정 🧵 처음에 뭐가잘못됐는지 몰라서 역시 저대로 검색. 여러 블로그는 대부분 input 엘리먼트에 대해 서술되어있고 스택오버플로우에서 나와 같은 질문을 하는..

Error1. Line 2:10: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text - 리액트 과제 중 테스트는 통과되지만 콘솔창에 이상한게 찍힘... 해결 : 에러를 검색하여 alt이미지를 넣어줌 느낀점 : 이미지 엘리먼트에는 무적권 alt 가 있어야 한다는 말인듯. 나는 그냥 alt는 이미지 없을때 대체용인가 보다 생각하고 안썼더니 테스트는 통과하지만 웹 표준에 맞지 않나보다. 그냥 JS가 아닌 프레임워크에서 표준에 대해 엄격한 규칙을 지켜야함... 다 지키지는 못할수있지만 그래도 최대한 지키려고 해보자!

✍ 오늘 공부에 대해 HTTP 기초 공부 Get Put Post Delete가 잘 외워지지 않는다. ㅠㅠㅠ 외우는게 너무 어렵다!! 코플릿도 잘 안된다!! 그래서 뭐한다?? 계속 지금부터 본다!!! 🧡 오늘 감정에 대해 😍 좋았던 것(Liked) : 내 자신이 그냥 사랑스럽다!! 💦 부족했던 것(Lacked) : 잘 안외워진다!! 🕯 바라는 것(Longed for) : 꾸준히 노력하자!! 📄오늘의 띵언 우리가 반복적으로 행하는 것이 우리 자신이다. 그렇다면 탁월함은 행동이 아닌 습관인 것이다.

Cross-Origin Resource Sharing 서버를 보호하기 보다는 브라우저를 사용하는 유저들을 보호하기 위한 브라우저의 자발적인 보안 정책 밑의 예시를 보면 기본 웹 애플리케이션은 domain-a.com이다. 이때 파란색이미지는 같은 사이트이기 때문에 잘 불려오지만 빨간색이미지는 기본 domain-a.com이 아닌 domain-b.com 에서 불러와야되기 때문에 CORS에 의해 이미지가 로딩될수도있고 아니면 거절될수도 있는거 https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS 참고

What is SSR(Server Side Rendering) ? Server Side Rendering 웹 페이지를 브라우저에서 렌더링하는 대신, 서버에서 렌더링함. 브라우저가 서버의 URI로 GET 요청을 보내면, 서버는 정해진 웹 페이지파일을 브라우저로 전송함. 그리고 서버의 웹 페이지가 브라우저에 도착하면 완전히 렌더링됨 서버에서 웹 페이지를 브라우저로 보내기 전에, 서버에서 완전히 렌더링했기 떄문에 SSR이라 부름. 웹 페이지의 내용에 데이터베이스의 데이터가 필요한 경우 서버는 데이터베이스의 데이터를 불러온 다음 웹 페이지를 완전히 렌더링 된 페이지로 변환한 후 브라우저에 응답으로 보냄 웹 페이지를 살펴보던 사용자가 브라우저의 다른 경로 이동 하면? 브라우저가 다른 경로로 이동할 때마다 서버는 ..

SPA를 만드는 기술: AJAX 위 페이지에서 개 사진만 냥이 사진으로 바꾸고 싶다? 그럴때 AJAX를 사용함 AJAX란? Asynchronous JavaScript And XMLHttpRequest의 약자로, JS, DOM, Fetch, XMLHttpRequest, HTML 등의 다양한 기술을 사용하는 웹 개발 기법! AJAX의 가장 큰 특징은 웹 페이지에 필요한 부분에 필요한 데이터만 비동기적으로 받아와 화면에 그려낼 수 있다는 것! Q. 그럼 AJAX와 리액트의 차이는 뭔데? https://okky.kr/article/722164 투쟁결과가 있긴 함 예를들어 google.com에 접속해보자 html에 의해 나에게 필요한 페이지가 렌더링 됨. 허나, 여기서 검색창만큼은 유저의 요구에 따라 반응하며 변..

intro HTTP는 HTML(HyperText Markup Language)과 같은 문서를 전송하기 위한 Application Layer 프로토콜임 웹 브라우저와 웹 서버의 소통을 위해 디자인됨 HTTP의 특징은 특정 상태를 유지하지 않는 무상태성(Stateless)를 가지고 있음! 비연결성: HTTP 는 연결을 유지하지 않은채 응답과 요청을 처리함. 요청에 대한 응답을 처리하게 되면 연결을 끊어버림 무상태성: 그래서 HTTP는 이전의 정보나 현재의 통신상태가 남아있지 않음 HTTP messages HTTP messages 는 클라이언트와 서버 사이에서 데이터가 교환되는 방식! 두 가지 유형이 있는데 요청(Reuests) 응답(Responses) HTTP message는 몇 줄 정도의 텍스트 정보로 구..