프론트엔드8 NextJS 공식문서 Chapter 2 관련 용어 및 정리 Global styles 적용global.css 파일은 모든 페이지에 적용될 전역 스타일을 정의하는 CSS 파일입니다. layout.tsx에서 global.css 가져오기. /app/layout.tsx 파일을 열고, 최상단에 global.css를 가져오는 코드를 추가합니다.import '@/app/ui/global.css'; 를 적용하여 global.css에 정의된 모든 스타일이 애플리케이션 전반에 걸쳐 적용됩니다.Tailwind유틸리티-퍼스트(Utility-First) CSS 프레임워크Tailwind CSS는 개발자가 HTML 또는 TSX(React + TypeScript) 마크업 내에서 직접 유틸리티 클래스들을 사용하여 스타일을 지정할 수 있게 해줍니다. 장점글로벌 스타일링: Tailwind CSS에.. 2024. 8. 14. [React] console, warning, error 메세지 제거 개발을 하다보면 어쩔 수 없이 개발자도구 안에 콘솔에 warning과 console.log 메세지가 수도 없이 많을 수 있다. 배포 하기 전에 한 번쯤은 신경써야할 내용에 대해 써보겠습니다! 방법은 매우 간단하다 ㅋㅋ,,, App.js 에 아래와 같은 코드를 추가하면 된다..! 원리는 모든 console 메세지에 대해 빈 함수로 대체하여 재정의 하는 것이다. if (1+1 === 2) { window.console = { log: function () {}, warn: function () {}, error: function () {}, }; } 2023. 10. 5. [React] Axios - Header에 토큰 전송 및 코드 관리 Tip 지난번 Axios 사용 방법에 이어서 Header에 토큰 사용 및 코드 관리 팁에 대해 알아보도록 하겠다. 저번 코드는 아래 링크로 ㄱㄱ 2023.07.18 - [코딩/React] - [React] 서버 연동을 위한 Axios 개념과 사용 방법&Tip Header에 Token 함께 전송하여 보안관리하기 + 코드 관리 Tip 사용자가 로그인을 했을 때 생기는 API Key를 사용하여 다른 페이지를 이동할 때 토큰 검사를 통해 페이지 관리와 API 보안을 설정하였다. Rest API 를 관리하는 모든 코드는 API 라는 파일을 따로 만들어 관리하였고, 코드를 import하여 함수들을 사용할 수 있도록하였다. 사용자의 API key가 담긴 token은 로컬 스토리지에 저장하여 사용하였다. ResourceApi.. 2023. 7. 18. [React] 서버 연동을 위한 Axios 개념과 사용 방법&Tip Axios란? Axios는 JavaScript에서 HTTP 요청을 보내는 데 가장 많이 사용되는 라이브러리이다. 주로 웹 애플리케이션과 API를 통신하는 데 사용되는데, Axios는 HTTP 요청을 보내고 해당 작업이 완료되면 Promise 객체를 반환하는 Promise 기반 API를 제공하여 비동기 요청을 처리하고 응답을 관리할 수 있습니다. 쉽게 말해 서버에 올린 Database 정보(Rest Api)를 프론트에서 사용할 수 있도록 읽어오는 과정이다. Axios의 장점 사용하기 쉽고 간결한 API: Axios는 간단하고 직관적인 API 사용 기능함수를 제공하여 HTTP 요청을 보내고 응답을 처리할 수 있다. 여러 플랫폼에서 동작: Axios는 브라우저 및 Node.js와 같은 다양한 환경에서 동작한다.. 2023. 7. 18. 이전 1 2 다음
