본문 바로가기

javascripts5

JS 모듈 : Default Export와 Named Export의 차이점 default export와 named export는 JavaScript 모듈 시스템에서 모듈을 내보내는 두 가지 방법으로,  그 동안 큰 문제를 겪진 않았지만 코드를 꼼꼼히 보는 습관을 가지려고 노력하는 과정에서 정리하게 되었다. Default Export'Default', 즉 기본값 이라는 뜻으로 주된 기능이나 객체를 대표값 으로 설정한다는 의미에서 붙여진 export 방식으로, 가장 흔히 사용되는 값(예: 주요 클래스나 함수)을 모듈의 기본값으로 설정할 때 적합하다.한 모듈당 하나의 default export만 허용되는 특징이 있다. 그렇기에 임의의 이름으로 모듈을 가져올 수 있다.// module.jsconst add = (a, b) => a + b;export default add;// main.. 2025. 1. 29.
NextJS 공식문서 Chapter 1 관련 용어 및 정리 파일 설치1. pnpm 설치pnpm은 npm이나 yarn보다 빠르고 효율적인 패키지 매니저로, pnpm이 설치되어 있지 않다면, 다음 명령어를 통해 전역으로 설치할 수 있습니다.npm install -g pnpm​2. Next.js 앱 생성Next.js 애플리케이션을 생성하려면 터미널을 열고 프로젝트를 저장할 폴더로 이동한 후, 다음 명령어를 실행합니다:npx create-next-app@latest nextjs-dashboard --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example" --use-pnpm이 명령어는 create-next-app이라는 CLI 도구를 사용하여 Next.js 애플리케이션을 설정합니다.. 2024. 8. 12.
[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.