5-1. 함수2
함수1
calcRectArea = (width, height) => {
return width * height;
}
console.log(calcRectArea(5, 6));
/*
함수란? 특정한 일을 수행하는 코드의 집합이다.
장점 : 묶어두면 재사용이 가능하고 높은 가독성을 가지면서 유지보수성도 좋다.
언제 선언하지?
: 똑같은 일을 계속 반복하는게 아니라 함수로 만들어서 필요할 때 마다 재사용 가능함.
*/재사용성
let lastName = '나';
let firstName = '신입';
let fullName = `${lastName} ${firstName}`;
console.log(fullName);
console.log(funName);
console.log(funName2('강','감찬'));
lastName = '야';
firstName = '너두';
fullName = `${lastName} ${firstName}`;
console.log(fullName);
// 문제제기 - 만일 firstName과 lastName의 순서를 바꿔야 한다면 어떻게 해야 될까
// 반복되는 일을 줄이기 위해 함수로 만들 수 있다
// 결론: 한 곳에서만 수정하면 된다?
// 관전 포인트 하나 더
// arrow function과 아닌 경우 사이에 차이점은?
// function으로 시작한 함수는 위치에 대한 이슈가 없지만
// arrow fuction은 접근이 불가함
funName = (firstName, lastName) => {
return `${firstName} ${lastName}`
}
function funName2(firstName, lastName) {
return `${firstName} ${lastName}`
}
funName(firstName, lastName);
// 함수의 표현식 정리함수2
// 자스에서 함수는 객체이다
// 자스에서는 리턴타입을 선언하는 자리가 없다
// return을 쓰지 않으면 undefined 반환됨 - 디폴트
add = (a,b) => {
return a+b;
}
console.log(add); // [function add]
console.log(add(1,2));
// 자스에서는 함수도 객체이니까 치환이 가능한가?
// hap 변수가 add의 주소번지와 같은 값을 가리키게 된다
// 함수의 이름은 함수를 참조하고 있다
// 그러니까 함수도 객체다 - 콜백함수에서 중요한 컨벤션이니까
const hap = add;
console.log(hap == add);
console.log(hap === add);
console.log(typeof hap);
console.log(typeof add);
console.log(hap);
// 확인하기 - 테스트를 통해서
// 자스에서는 파라미터가 달라도 이름이 같으면 호출이 된다
// 결론 - 같은 이름의 함수를 가질 수 없다 - 메소드 오버로딩 해당없음
console.log(hap()); // NaN
console.log(hap(1,2));
console.log(hap(1)); //NaN
console.log(hap(1,null)); //1
console.log(hap(1,undefined)); //1
console.log(hap(1,{})); // 1
console.log(hap(1,[])); //'1'
console.log(typeof {});
console.log(typeof []);
hap1 = () => {
return undefined
}
console.log(hap1);
// 왜 이렇게 얘기할까?
// 원시형은 부르면 값
// 참조형은 부르면 주소번지(Heap) - 사이즈를 정할 수 없다
// 왜냐하면 변수(객체, 함수)는 주소값만 가지고 있고, 실체는 다른 메모리에 저장됨
// if(btn_select == btn_all)
// if(1==1)인자
// 파라미터 또는 매개변수, 인자
// public static void main(String[] args)
// 파라미터의 기본값은 undefined이다
// 파라미터의 정보는 함수 내부에서 접근이 가능한 arguments 객체에 저장됨
function hap(a,b){
console.log(arguments); // [Arguments]{'0':1,'1':2,'2':3}
console.log(arguments[0]); // 1
console.log(arguments[2]); // 1
return a+b+arguments[2];
}
hap2 = (a,b) => {
}
console.log(hap(1,2,3)); // 3
hap(1,2,3);
hap(1,2,null)
// ES6 - Parcel, Webpack
// 매개변수 기본값을 줄 수 있다 -
function hap3(a=2,b=3){
return a+b;
}
// 호출시 파라미터 주지 않아도 초기값으로 연산이 처리된다
console.log(hap3()); //5
// Rest Parameter
function sum(...numbers){
console.log(numbers);
}
sum(1,3,5,7,9)
function sum2(x,y, ... numbers){
console.log(x); // 1
console.log(y); // 3
console.log(numbers); // [5,7,9]
}
sum2(1,3,5,7,9)
리턴
// 리턴
// return을 명시적으로 하지 않으면 자동으로 undefined 반환됨
function hap(a,b){
return undefined
}
console.log(hap(1,2));
// return을 함수 중간에 만나면 함수가 종료됨?
function m(num){
// 파라미터 받은 값에 대한 유효성 여부 체크하는 코드 추가한다 - 초보는 아니다
if( num < 0) {
return; // 전달되는 값이 유효한지 여부를 미리 체크해 본다 - 이런 행동
}
console.log(num);
}
m(5)
m(-5) // console.log(num);을 못본다 콜백함수
// 콜백함수 - 실습
// 함수도 객체가 될 수 있다 - 일급객체라고 말하기도 한다
const hap = (a,b) => a + b;
const minus = (a,b) => a - b;
// 파라미터 자리는 외부에서 결정된다
// 3번째는 함수다 - 이렇게 외부로 주어지는 함수를 콜백함수라 함
function account(a,b,action){
if(a<0 || b<0){ // 둘 중에 하나라도 0보다 작으면 return함
return; // action은 영원히 호출될 기회가 없다
}
let result = action(a,b)
return result;
}
// 전달된 action은 콜백함수다 - 언제 호출될 지 모르는 경우도 콜백함수다
// 전달될 당시에 함수를 바로 호출해서 반환된 값(3)을 전달하는 게 "아니라"
// 함수를 가리키고 있는 함수의 참조값이 전달된다
// 함수는 고차함수 안에서 필요한 순간에 호출이 나중에 됨
console.log(account(1,2,hap));
console.log(account(1,2,minus));
/*
일급객체: first-class object
일반객체처럼 모든 연산이 가능한 것
- 함수의 매개변수로 전달 가능함
- 함수의 반환값으로 쓸 수 있음
- 할당 명령문 사용 가능
- 동일비교대상
일급함수: first-class function - 코틀린이나 파이썬에서도 지원. 자바도 8부터
함수가 일반객체처럼 모든 연산이 가능한 것
- 함수의 매개변수로 전달 가능함
- 함수의 반환값으로 쓸 수 있음
- 할당 명령문 사용 가능
- 동일비교대상
고차함수: Higher-order function
- 인자로 함수를 받거나(콜백함수)
- 함수를 반환하는 함수를 고차함수라 함
*/
표현식
// 함수 선언문 function name(){}
// 함수 표현식 const name = function(){} - 익명함수(자바: 익명 클래스)
// 익명함수 - 외부에서 사용 불가
let hap = function(a,b){
return a+b;
}
hap = (a,b) => a + b; //return 생략할 수 있다 - 리액트에서 자주 출몰
console.log(hap(1,2));
// IIFE(Immediately Invoked Function Expression) - 즉시 실행되는 함수 표현식
(function run(){
console.log('run'); // run
})();
let hap2 = function sum(a,b){
return a+b;
}
// 변수에 함수를 할당하여 표현하는 경우 이름을 지어주어도 외부에서 사용이 불가함
// 그러니 쓰지 말자
// console.log(sum(1,2));주의
// 주의사항
// 불변성 Immutability
// 파라미터로 참조형을 받을 수 있다 - 원시형은 해당 없다
// 원시값 - 값에 의한 복사
// 객체값 - 참조에 의한 복사(메모리가 복제됨-불변성 이슈 생기는 것 - 원본도 바뀐다) - 부수효과 - side effect
// 자스에서는 선언할 때 타입을 쓰지 않음. 런타임시에 타입이 결정됨
function funcA(num){
num = 5;
console.log(num);
}
// 원시형인 경우 함수내부에서 상태를 변경하더라도 외부에 영향이 없다
const value = 3;
funcA(value)
console.log(value);
// 대조군
const fruit = { name:'🍎' }
function funcB(obj){
obj.name = '🍓'
console.log(obj);
}
funcB(fruit)
console.log(fruit);7. 객체
리터럴
// 객체를 생성하는 Object create
// 객체 생성할 때 key가 오게 되고(key-문자, 숫자, 문자열, 심볼)
// value(원시값, 객체(함수))가 오게 됨
let sonata = {
carName: '2024년형 소나타',
carColor: '검정',
wheelNum: 4
}
// 속성, 데이터에 접근하는 방법
console.log(sonata.wheelNum);
console.log(sonata['carColor']);
// 속성 추가 가능함
sonata.speed = 30;
console.log(sonata['speed']);
// 속성 삭제
delete sonata.carColor;
console.log(sonata.carColor);8. 클래스
기본.js
// 객체를 쉽게 만드는 템플릿
// 고전적 방법 - 생성자 함수라고 함
// 클래스 - ES6
class Fruit { // 리액트에서 활용되다가 훅으로 지원함 - 클래스 사용빈도가 좀 줄어듦 - this에 대한 불분명한 부분
constructor(name, emoji){
this.name = name;
this.emoji = emoji;
}
// 함수 선언시 function 예약어 사용불가함
display = () => {
console.log(`${this.name}:${this.emoji}`)
}
} // end of Fruit
// kiwi는 Fruit 클래스의 인스턴스변수
const kiwi = new Fruit('kiwi','🥝');
const tomato = new Fruit('tomato','🍅');
console.log(kiwi);
console.log(kiwi['name']);
console.log(kiwi.name);
tomato.display();
kiwi.display();deptvo.js
export class DeptVO {
constructor(deptno, dname, loc){
this.deptno = deptno;
this.dname = dname;
this.loc = loc;
}
get getDeptno(){
return this.deptno;
}
set setDeptno(value){
this.deptno = value;
}
get getDname(){
return this.dname;
}
set setDname(value){
this.dname = value;
}
get getLoc(){
return this.loc;
}
set setDeptno(value){
this.loc = value;
}
}deptvo test.js
import { DeptVO } from "./deptvo";
const dvo = new DeptVO(30,'개발부','서울');
console.log(dvo);
console.log(dvo.getDeptno);
console.log(dvo.deptno);
console.log(dvo.getDname);
console.log(dvo.getLoc);duck.js
export class Duck{
constructor(name, leg){
this.name = name;
}
display = () => {
console.log(`나는 ${name}오리입니다.`);
}
}mallard.js
import { Duck } from "./duck";
export class MallardDuck extends Duck {
constructor(){
super('청둥오리',2)
}
}duckTest.js
import { MallardDuck } from "./mallard";
const myDuck = new MallardDuck('청둥오리2',3);
console.log(myDuck);
console.log(myDuck.display);
console.log(myDuck.name);MYBOOK-PUBLIC-JAVASCRIPTS
authLogic
import axios from "axios";
import { getAuth
, GithubAuthProvider
, GoogleAuthProvider } from "https://www.gstatic.com/firebasejs/9.22.1/firebase-auth.js";
class AuthLogic {
constructor(){
this.auth = getAuth();
this.gitProvider = new GithubAuthProvider();
this.googleProvider = new GoogleAuthProvider();
}
getUserAuth = () => {
return this.auth;
}
getGoogleAuthProvider = () => {
return this.googleProvider;
}
} // end of AuthLogic
export default AuthLogic;
export const loginGoogle = (params) => {
return new Promise((resolve,reject) => {
signInWithEmailAndPassword(auth, email, password)
.then((result) => {
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
});
}); // end of loginGoogle
}
export const loginKaKao = (params) => {
return new Promise((resolve,reject) => {
try {
const response = axios({
method:"get",
url:"카카오 토큰을 받아올 URL주소 - 카카오 개발자 센터 긁어옴",
params:params
});
console.log(response);
resolve(response)
} catch(error){
reject(error);
}
})
}디렉토리 구조
-
포트설정
/bin/www - 포트설정 현재 3000번 -
정적페이지
web application server - 정적페이지를 위주로 처리하는 게 일반적(html, css, js) - 프론트 서버
: public 폴더 배포하면 된다
text/html, text/javascripts, image/gif, image/png, video/mp4, video/avi 리소스
public > images or javascripts, or stylesheets
동적처리지원 - 스토리지 - java베이스 서버
enterprise server - 대형시스템, 모니터링시스템, DB 서버에 대한 커넥션 풀기능을 지원, 분산서비스를 지원, 원격객체를 호출 지원
ex. JBOSS, JEUS, Webspere
// 404번 발견하면 제일 먼저 routers 확인할 것
routes - 라우팅, 해커뉴스 router 함수 제작 - 화면 중계기
: 라우팅은 /루트 슬래시 아래부터 관리해주면 된다
index.js: 로그인[/login -> 물리적인 위치 -> /views/auth/login.ejs ]
개발자가 작성한 추가 페이지들은 모두 다 views 폴더 하위에 배치해야 한다 - app.js
UI(views폴더)에 대한 설정은 어디에 했나요?
users.js: 대시보드, MyPage, 장바구니,... 회원가입, 회원정보 수정,
