본문 바로가기

FrontEnd89

JSON Fetch 사용하기 Fetch HTTP 파이프라인을 구성하는 요청 & 응답 등의 요소를 JS에서 접근하고 조작할 수 있는 인터페이스 제공 네트워크 리소스를 비동기적으로 가져옴 XMLhttpRequest 에 대한 좋은 대체제 요청 fetch("https://example.com/movies.json") .then((res) => res.json()) .then((data) => console.log(data)); 응답은 Response 객체로 표현되며, 직접 JSON 응답 본문을 받을 수는 없다. Response는 HTTP 응답 본문을 그대로 포함하지는 않음 => Response는 HTTP응답 전체를 나타내는 객체이기 떄문 JSON 본문 컨텐츠를 추출하기 위해서는 json() 메소드를 호출해야함. json()은 응답 본문 텍.. 2022. 12. 4.
JSON 이란? JSON (JavaScript Object Notation) Data를 저장|전송 할 때 많이 사용되는 경량의 Data교환 형식 JS에서 Object를 만들 때 사용하는 표현식을 의미 용량이 작고 이해하기 쉬워서, XML을 대체 단순히 Data를 표현하는 방식일뿐(Data 포맷). 특징 Server & Client 간 통신에서 많이 사용됨. JS를 이용해서 JSON 형식의 문서를 JS object로 변환 가능 JSON은 일단 text 형식일 뿐이다. 다른 언어에서도 쉽게 접근 가능 형식 key/value 존재 객체, 배열 등의 표기 사용 중첩 가능 { "employee": [ { "name": "youngjin", "lastname": "we", }, { "name": "min", "lastname": .. 2022. 12. 4.
Tailwind CSS 설치 및 적용법 1. Shell yarn add tailwindcss postcss autoprefixer -D npx tailwindcss init -p 2. tailwind.config.js 설정 파일의 content 에 tailwind를 사용할 모든 경로를 입력합니다. module.exports = { content: [ // tailwind를 사용할 경로들을 입력 "./pages/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}", ], theme: { extend: {}, }, plugins: [], } 4. _app.tsx 에 import 되어있는 styles/globals.css 내부 내용들을 모두 삭제하고 @tailwind base @tailwind c.. 2022. 11. 30.
next.js 의 장단점 2022. 11. 25.
CLS 함수를 이용해서 속성값 주기 블라 2022. 11. 25.
css position에 대해 블라 2022. 11. 25.
inline, block, inline block 비교 ( tailwind로 실습 ) 1. inline 컨텐츠 자체만을 꾸며준다. css에서 width | height 크기를 정해주어도 컨텐츠 크기에 맞춰서 변경이 된다. const css = () => { return ( 1asdasdasd 2 3 ); }; export default css; 2. block div가 갖게 되는 기본값 기본적으로 width가 자신의 컨테이너의 100% 갖게 됨. 설정시 그에 맞춘 값만 할당 컨텐츠가 벗어나도 설정한 w,h만 가져감 const css = () => { return ( block 1 block 2 block 3asdsadasdasd ); }; export default css; 3. inline-block inline + block 특성을 합친것 기본적으론 inline 속성이고 크기 설정시 .. 2022. 11. 25.
모달창 && 팝업창에 대해 블라블라 2022. 11. 25.

티스토리툴바