⭐ JAVASCRIPT/문법 (5) 썸네일형 리스트형 함수의 export, import 방법 # 함수의 export와 import 방법에 대해 알아본다. 1. 일단 export 방법 - export const {export_name} 으로 export 설정을 한다. export 설정을 하면 다른 파일에서도 자유롭게 사용이 가능하다. //유저 이름 가져오기 export const getUsername = (callback) => { const testUser = userPool.getCurrentUser(); if (!testUser) return false; callback(testUser.getUsername()); }; 2. import 하는 방법 - import는 export한 함수의 이름을 명시해 줌으로써 해당 함수를 자유롭게 가져다 쓸 수 있다. 위에서 getUsername을 expor.. arrow 함수 사용법 # arrow 함수 사용법이 왜 헷갈리는지 모르겠는데 헷갈린다. 1. function 키워드 지우기 2. ()다음에 뚱뚱한 화살표(fat arrow, =>) 기호 넣기 화살표 함수도 기존 함수 선언 방식에서와 마찬가지로 괄호는 매개변수를 감싸는 용도로 사용된다. 만약 매개변수가 하나라면 괄호를 생략할 수 있다. 아래 코드에서 두 번째 함수 singleParam은 매개변수가 하나이기 때문에 괄호를 생략했다. # 일반함수와 화살표 함수의 차이 비교 function fun() { this.name = "HI"; return { name: "BYE", speak: function () { console.log(this.name); }, }; } function arrFun() { this.name = "HI";.. Javascript & React 로그 확인 방법 # Javascript와 React에서 로그를 확인하는 방법 - 자주 까먹으니까 정리를 해놓자. 1. 함수를 만든다. export default function Username() { const userNm = "김승현"; console.log("userNm",userNm); 2. 브라우저에서 확인한다. - 크롬이나 파이어 폭스, 네이버 웨일 등에서 확인이 가능하다. F12를 누르고, Console 탭으로 가면 아래와 같이 변수를 확인 할 수 있다. 리액트는 더욱 좋은게 컨트롤+S를 하면 바로 반영이 되므로 변수 확인 시 Springboot처럼 디버깅을 하지 않아도 되는 장점이 있다. 굳이 디버깅 툴이 필요할까? 싶기도 하다. - 매우 편리해서 좋은것 같다. - 끗 - uri, req, res 설명 URI 주소란? URI, 주소는 미들웨어를 작성할 때는 보편적으로 다음과 같이 작성 한다. router.get('/',(req,res) =>{ ~ {); get 또는 post 메서드를 사용하는데, 여기서는 간단한 예시 이므로 생략 한다. 위에서 '/'가 uri라고 볼수 있다. URI는 통합 자원 식별자의 약칭이며, 쉽게 말해 접근하고자 하는 주소이다. 예를들어 기본 주소가 www.1234.co.kr 이라고 가정했을 때, router.get('/') -> www.1234.co.kr/ router.get('/hi') -> www.1234.co.kr/hi router.get('/hi/bye') -> www.1234.co.kr/hi/bye router.get('/hi/bye/:id) -> www.1234.co... return 이란 # javascript나 react를 사용할때 리턴문 정의 import { useState } from 'react'; function App() { const [list, setList] = useState([1, 2, 3, 4]); // 함수 선언 const getAddResult = () => { let sum = 0; list.forEach((i) => (sum = sum + i)); console.log('sum', sum); return sum; // 함수의 결과값을 반환한다. (여기서는 sum 함수의 결과값을 반환한다.) }; return ( {list.map((i) => ( {i} ))} {/* 위에서 선언한 함수를 실행한다. */} 합계: {getAddResult()} ); } expor.. 이전 1 다음
