FrontEnd
-
[Next.js] 환경 변수 사용하기 ( + 깃에 올리지 않는 법)FrontEnd/Next.js 2022. 12. 5. 21:27
Next.js가 자체적으로 파일들을 통해 지원하는 환경 변수들 Next.js는 프로젝트 폴더에 존재하는 환경변수 파일(.env*) 로부터 변수들을 읽어서 Node.js 환경의 process.env객체에 주입한다. 환경 Default 환경 변수 (원격 저장소 푸시 o) Secret 환경 변수 (원격 저장소 푸시x) 모든 환경 .env .env.local 개발 환경(next dev) .env.development .env.development.local 배포 환경(next start) .env.production .env.production.local 테스트 환경(Jest, Cypress등등) .env.test .env.test.local 환경 변수 파일들의 적용 우선순위는 다음과 같이 결정된다. (환경에 ..
-
JSON Fetch 사용하기FrontEnd/JavaScript 2022. 12. 4. 16:27
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()은 응답 본문 텍..
-
JSON 이란?FrontEnd/JavaScript 2022. 12. 4. 15:46
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": ..
-
Tailwind CSS 설치 및 적용법FrontEnd/Tailwind css 2022. 11. 30. 22:29
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..
-
-
-
-
inline, block, inline block 비교 ( tailwind로 실습 )FrontEnd/HTML, CSS 2022. 11. 25. 22:14
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 속성이고 크기 설정시 ..