반응형
반응형

📝AES

대칭키 알고리즘으로 "대칭키" 하나로 암호화 및 복호화 모두 진행하고 문자열 길이에 제약이 없다.

 

📝AES 암호화 키 방식

  • AES128
    • 암호화 키를 128bit 즉 16byte로 설정한다.
  • AES192
    • 암호화 키를 192bit 즉 24byte로 설정한다.
  • AES256
    • 암호화 키를 256bit 즉 32byte로 설정한다.

 

📝Secret Key

Secret Key는 평문을 암호화하는데 사용되며 절대로 외부에 노출되어서는 안됩니다. AES128, AES192, AES256에 해당하는 암호화키입니다.

 

📝AES 암호화 방식

  • ECB
    • 평문을 일정 크기의 블록으로 잘라 각 블록을 암호화시키는데 암호화와 복호화에 사용되는 키가 동일하기 때문에 유추가능할 경우 보안에 취약하다
    • 예) ABC를 암호화 시켜서 123이 나오면 DABC를 했을땐 4123으로 유추가 가능

 

 

  • CBC
    • ECB의 보안 취약을 보완한 방식으로 보안성이 제일 높은 암호화 방법으로 가장 많이 사용한다
    • IV라는 추가적인 키를 사용하며 IV키로 1차 암호화 후 2차로  Secret Key로 암호화하는 방식이다. 일반적으로 IV키는 고정적으로 하지 않으며 랜덤한 값으로 하는게 좋다

 

 

📝PKCS5 Padding

import java.io.UnsupportedEncodingException;
import java.nio.charset.StandardCharsets;
import java.security.InvalidAlgorithmParameterException;
import java.security.InvalidKeyException;
import java.security.NoSuchAlgorithmException;
import java.util.Base64;

import javax.crypto.BadPaddingException;
import javax.crypto.Cipher;
import javax.crypto.IllegalBlockSizeException;
import javax.crypto.NoSuchPaddingException;
import javax.crypto.spec.IvParameterSpec;
import javax.crypto.spec.SecretKeySpec;

import org.apache.commons.lang.RandomStringUtils;

public class Test {
	

	/** ───── IV키 생성 설정 ───── **/
	private final static int BYTE_LENGTH = 16;
	private final static boolean USE_LETTERS = true;
	private final static boolean USE_NUMBERS = false;
	
	/** ───── 암호화키 바이트 종류 ───── **/
	private final static String SECRET_KEY_128 = "aeskey1234567898";                 // 16byte == 128bit
	private final static String SECRET_KEY_192 = "aeskey12345678987654321a";         // 24byte == 192bit
	private final static String SECRET_KEY_256 = "aeskey12345678987654321asekey987"; // 32byte == 256bit
	
	
	private final static String SECRET_KEY = SECRET_KEY_256; // 32byte == 256bit
	private final static String IV = RandomStringUtils.random(BYTE_LENGTH, USE_LETTERS, USE_NUMBERS); // 랜덤 IV값
	private static final String TRANSFORMATION = "AES/CBC/PKCS5Padding"; // AES 암호화 알고리즘의 CBC 방식을 채용하고 비는 바이트는 PKCS5Padding 방식을 채용

	
	public static void main(String[] args) throws java.io.IOException, InvalidKeyException, NoSuchPaddingException, NoSuchAlgorithmException, InvalidAlgorithmParameterException, IllegalBlockSizeException, BadPaddingException {
	 
		String password = "암호화 해주세요~";
		String encryptedPassword = encrypt(password);
		String decryptedPassword = decrypt(encryptedPassword);
			
		System.out.println("password : " +  password);
		System.out.println("encryptedPassword : " +  encryptedPassword);
		System.out.println("decryptedPassword : " +  decryptedPassword);
	
	}


	/** ───── 암호화 ───── **/
	public static String encrypt(String passwordToEncrypt) throws NoSuchPaddingException, NoSuchAlgorithmException,
         InvalidAlgorithmParameterException, InvalidKeyException, IllegalBlockSizeException, BadPaddingException {

		Cipher cipher = Cipher.getInstance(TRANSFORMATION);
		SecretKeySpec secretKeySpec = new SecretKeySpec(SECRET_KEY.getBytes(), "AES");
		IvParameterSpec ivParameterSpec = new IvParameterSpec(IV.getBytes(StandardCharsets.UTF_8));

		cipher.init(Cipher.ENCRYPT_MODE, secretKeySpec, ivParameterSpec);

		return Base64.getEncoder().encodeToString(cipher.doFinal(passwordToEncrypt.getBytes(StandardCharsets.UTF_8)));
   }

	/** ───── 복호화 ───── **/
	public static String decrypt(String passwordToDecrypt) throws NoSuchPaddingException, NoSuchAlgorithmException, InvalidAlgorithmParameterException,
         InvalidKeyException, IllegalBlockSizeException, BadPaddingException, UnsupportedEncodingException {
	   
	   Cipher cipher = Cipher.getInstance(TRANSFORMATION);
	   SecretKeySpec secretKeySpec = new SecretKeySpec(SECRET_KEY.getBytes(), "AES");
	   IvParameterSpec ivParameterSpec = new IvParameterSpec(IV.getBytes(StandardCharsets.UTF_8));

	   cipher.init(Cipher.DECRYPT_MODE, secretKeySpec, ivParameterSpec);

	   return new String(cipher.doFinal(Base64.getDecoder().decode(passwordToDecrypt)), "UTF-8");
   }
}

암호화하려는 데이터가 블록사이즈를 채우지 못한 경우 부족한 길이만큼 패딩을 하는 방식이다 예) A로 끝나고 8바이트의 블록사이즈라면 7바이트를 공백으로 채우는 방식

 

 

🔗 참고 및 출처

https://veneas.tistory.com/entry/JAVA-%EC%9E%90%EB%B0%94-AES-%EC%95%94%ED%98%B8%ED%99%94-%ED%95%98%EA%B8%B0-AES-128-AES-192-AES-256
https://velog.io/@reedfoxy/CBC-%EB%B8%94%EB%A1%9D-%EC%95%94%ED%98%B8%ED%99%94IV-Initialization-Vector-%EC%82%AC%EC%9A%A9-%EC%A0%84%EB%9E%B5

반응형
반응형

📝빌드

소스 코드 파일을 컴퓨터에서 실행할 수 있는 독립적인 형태로 변환하는 과정과 결과

 

📝빌드 관리 툴

Ant, Maven, Gradle

소스 코드를 컴파일하고 테스트하며, 실행 가능한 애플리케이션 또는 라이브러리를 생성하는 과정

 

📝Maven

  • Ant 대체하기 위해 개발
  • 라이프 사이클이 존재
  • XML 기반
groupId 일반적으로 사이트 도메인을 역순으로 적어 사용 (company.IT → IT.company) [변동이 없음]
artifactId 다른 프로젝트와 구분할 수 있는 id 작성 (programmer_web)
version : 프로젝트 버전
name : 프로젝트 이름
description : 프로젝트 간략한 설명
properties : pom.xml 파일내에서 빈번하게 사용되는 중복 상수 정의 영역
해당 영역의 상수를 사용하기 위해서는 $(태그명)의 형태로 사용하면 됨
dependencies : maven repository에서 가져온 라이브러리 주입 xml 작성
build : 프로젝트 빌드(배포)와 관련된 정보 설정

 

 

 

📝Ant

  • XML 기반
  • 빌드의 기능만 가짐
  • 소규모 프로젝트에서 사용하기 간단하고 쉬움
  • 대규모 프로젝트에서 관리하기 복잡해지는 경향이 존재
  • 빌드 라이프 사이클이 존재 안 해 직접 처리 필요 
Ant 구조
<project name="MyProject" default="dist" basedir=".">
    <property name="src" location="src"/>
    <property name="build" location="build"/>
    <property name="dist" location="dist"/>

    <target name="init">
        <mkdir dir="${build}"/>
    </target>

    <target name="compile">
        <javac scdir="${src}" destdir="${build}"/>
    </target>

    <target name="dist" depends="compile">
        <mkdir dir="${dist}/lib"/>

        <jar jarfile="${dist}/lib/MyProject-${DSTAMP}.jar" basedir="${build}"/>
    </target>
</project>
출처: https://cornswrold.tistory.com/216 [평범한개발자노트:티스토리]

📝빌드 라이프 사이클

Maven 의 경우 빌드 순서가 있다. 이를 라이프사이클(Lifecycle)이라 한다.

Maven 빌드 라이프 사이클

Clean=> build 후 만들어지는 Target의 디렉터리를 삭제한다.
Validate=> 올바른 Pom.xml인지 확인한다.
Compile=> 의존성들을 가져오고, Target/classes 디렉터리에 빌드한다.
Test=> 테스트 코드를 실행한다.
Package=> Test 상태가 성공적으로 실행된 다음에 실행되며 War 나 Jar 파일같은 결과물을 생성한다. 
Install=> 빌드된 결과물을 내부 메이븐 저장소로 보낸다. 
($HOME/.m2/repository)Deploy=> 결과물을 배포한다.(보통 nexus 같은 사내저장소로 배포)

출처: https://cornswrold.tistory.com/70 [평범한개발자노트:티스토리]

 

📝Gradle

  • Groovy 스크립트 활용한 빌드 관리도구
  • 안드로이드 프로젝트 표준 빌드 시스템
  • Maven에 비해 더 빠른 처리 속도 (최대 100배)
  • Maven에 비해 더 간결한 구성이 가능 (가독성이 좋다)
  • 설정 주입시 프로젝트 조건 체크할 수 있어 프로젝트별 주입 설정 가능
repository : 라이브러리 저장된 위치 설정
mavenCentral : 기본 Maven Repository [자사에서 따로 관리하는 게 있으면 그걸 설정할 수도 있다.]
dependencies : 라이브러리 주입
ext : 전역변수 설정

 

 

 

 

 

  • Gradle Wrapper
    • Gradle을 실행하기 위한 스크립트로, 프로젝트와 함께 배포되며 Gradle을 설치하지 않아도 빌드 작업을 실행할 수 있도록 합니다. (gradle-wrapper.properties 파일에 지정된 gradle 버전을 다운로드하고 실행)
  • gradle build
    • 프로젝트를 빌드하기 위해 필요한 모든 작업을 수행합니다.
  • gradle clean
    • Gradle의 빌드 환경을 초기화하는 데 사용됩니다. 이전 빌드 결과물을 삭제하여 새롭게 빌드할 수 있도록 합니다.
  • gradlew.bat
    • 윈도우 운영 체제에서 Gradle을 실행하는 데 사용되는 배치 파일
  • gradlew
    • 리눅스 및 맥 OS X와 같은 유닉스 기반 운영 체제에서 Gradle을 실행하는 데 사용되는 스크립트
  • gradle/wrapper/gradle-wrapper.properties
    • gradle 버전 명시
  • gradle/wrapper/gradle-wrapper.jar
    • gradle 버전에 맞는 wrapper 설치
  • wrapper
    • gradle을 실행시키는 코드가 들어있는 jar파일


동작과정

  1. gradle/wrapper/gradle-wrapper.properties에 명시된 gradle 버전을 읽는다
  2. gradle 버전에 명시된 대로 gradle 버전을 다운 받는다 → gradle/wrapper/gradle-wrapper.jar
  3. gradlew을 통해 실행시키면 필요한 Jar파일을 종속성에 추가한다

 

📝Groovy 스크립트

  • JVM에서 실행되는 스크립트 언어
  • 문법이 Java와 매우 유사
  • Java와 호환이 되며 Java 클래스 파일을 그대로 Groovy 클래스에 이용 가능

 

📝스프링 부트

스프링은 기능 사용하기 위해 설정에 많은 시간이 소요 되는 반면(root-context에 xml 많이 적어야하는 경우) 스프링 부트는 자동설정 이용하기 때문에 미리 설정되어 있는 프로젝트를 이용하면 편리 XML 설정 없이 자바 코드를 통해 설정 가능 (버전 관리 해주기 때문에 다양한 패키지 허용) 

 

 

반응형
반응형

📝리액트 React

페이스북에서 만든 자바스크립트 라이브러리이다

Node.js를 이용해 자바스크립트 기반 서버를 만들 경우 백엔드와 프론트를 하나의 언어로 통제가 가능하다는 장점이 있다.

물론 라이브러리이기 때문에 자바로도 기동이 가능하지만 하나의 언어로 통제가 가능하다는 장점을 버리는 것과 같으므로 굳이 그렇게 쓸 이유가 없다.

 

📝Anuglar.JS

구글에서 만든 Javascript 기반 웹 프레임워크 (종료 됨)

 

📝Vue.js

프론트엔드 자바스크립트 프레임워크

 

📝Anuglar

구글에서 만든 TypeScript기반 SPA프레임워크 ( Angular.JS와 Angular는 다르다)

 

📝TypeScript 타입스크립트

정적 타입의 컴파일 언어이며 타입스크립트 컴파일러 또는 바벨(Babel)을 통해 자바스크립트 코드로 변환

 

코드 작성 단계에서 타입을 체크해 오류를 확인할 수 있어 실제로 한 연구에 따르면 모든 자바스크립트 버그의 15%가

사전에 타입스크립트로 감지

미리 타입을 결정하기 때문에 실행 속도가 매우 빠르다는 장점이 있고 함수 및 내부 변수에 대한 스니펫이 가능하다

타입스크립트는 자바스크립트와 100% 호환됩니다 따라서 프론트엔드 또는 백엔드 어디든 자바스크립트를 사용할 수 있는 곳이라면 타입스크립트도 쓸 수 있다    .

 

하지만 코드 작성 시 매번 타입을 결정해야 하기 때문에 번거롭고 코드량이 증가하며 컴파일 시간이 오래 걸린다는 단점

 

반응형
반응형

📝SDK (Software Development Kit)

프로그래머들을 위해서 제공하는 개발 도구들이다

예를 들면 소프트웨어 프레임워크들, 운영체제, 컴퓨터 시스템, 게임 등을 위한 응용 프로그램을 만들 수 있도록 해주는 도구로 SDK안에는 IDE(통합개발환경)을 포함한다. 즉, 개발에 필요한 모든 자료를 SDK라고 한다 → 라이브러리 등...

 

📝CORS (Cross-Origin Resource Sharing)

https://domain-a.comhttps://domain-b.com/data.json

프론트에서 백엔드로 호출 할 때 서로 다른 프로토콜 (HTTPS, HTTP) 또는 아이피 또는 포트가 다를 경우 Same-Origin Policy를 적용받아 Cross-Site HTTP Request가 제한된다 → 호출을 못한다

 

 

📝엔드포인트

API를 요청할 때 URI를 의미한다 → http://localhost:8080/getUserInfo

 

📝Origin

https://naver.com:80 [프로토콜 + 포트번호 포함]  참고로 유사한 거 같은 도메인 개념은 (naver.com)

 

📝크로스체크

서로 업무 내용을 파악하는 걸로 동일하게 이해했는지 확인해 오류 범하는 걸 줄인다

 

📝RFP (Request For Proposal)

제안서

 

📝trade off

일장일단 즉, 양립할 수 없다

 

📝노드 서버

Node.js로 구현한 서버 (express 객체로 만든 서버 등..)

반응형
반응형

📝SPA (Single Page Application)

전체 페이지가 아니라 필요한 부분만 다시 로드 하는 것 

예) 인스타그램 좋아요 누를 때 좋아요 숫자만 로드 되는 것

 

📝MPA (Multi Page Application)

페이지가 전체 다시 로드 하는 것

예) 인스타그램 좋아요 누를 때 페이지 전체가 새로고침 되는 현상

 

📝CSR (Client Side Rendering) (React, Angular, Vue)

  • SPA방식에서 사용한다
    • 정적 리소스 초반에 전부 다운로드 후 필요한 부분에 데이터만 받아 클라이언트에서 다시 그려준다
  • 유저 → 웹사이트방문 → 서버에 컨텐츠요청 → 뼈대HTML → JS다운로드 → 동적 DOM 생성 
    • JS 다운과 동적 DOM 생성때문에 초기 로딩 속도가 느림 하지만 이후 구동속도는 빠름
  • 서버에 부하가 적다
  • 검색엔진최적화에 불리하다
    • 빈 뼈대에 React 따위가 스크립트로 JS 다운 받아 붙이는 형태이기 때문에 JS 다운 받아 동적 DOM 생성 전까지는 아무것도 정보가 없어서 검색엔진이 HTML 파일을 읽어 수집할 내용이 없다
  • 화면 깜빡임이 없음
  • 사용자에게 보여줘야 하는 데이터의 양이 많을 때 로딩창을 띄울 수 있는 장점이 있다
  • 웹 페이지와 사용자의 상호작용(이벤트 핸들링)이 많은 경우 CSR 활용
    • 아예 렌더링 되지 않아서 사용자의 행동을 막는 것이 경험에 오히려 유리

 

📝SSR (Server Side Rendering) (PHP, JSP, Next)

  • MPA방식에서 사용한다
    • 요청시 서버에서 렌더링한다
  • 검색엔진최적화에 유리하다
  • 서버 부하가 있다
  • 첫 화면 렌더링이 빠르게 필요한 경우 SSR 적합
  • 웹 페이지와 사용자의 상호작용(이벤트 핸들링)이 적은 경우 SSR 활용
  • 참고로 Next의 경우는 그릴 수 있는 건 SSR 그 외에는 CSR처리하게끔 한다

 

📝TTV (Time To View)

사용자가 웹을 볼 수 있다 → 자바스크립트로 인한 동작은 안 됨

 

📝TTI (Time To Interact)

클릭 등 인터랙션이 가능해진다 → 자바스크립트로 이벤트 처리

 

📝SSG (Static-Site-Generator)

  • HTML을 빌드타임에 각 페이지 별로 생성하고 해당 페이지 요청이 들어올 경우 이미 생성된 HTML 문서를 반환
  • 동적요소 추가가능하고 페이지들이 많이 있기는 하지만 내용들이 변할 일은 크게 없고 동적요소들은 적은 블로그 같은 것에 활용한다
    • Gatsby, NextJS 등의 라이브러리를 활용하면 CSR에 특화된 리액트로 정적으로 웹페이지를 생성하여 서버에 미리 배포해둘 수 있다
  • 검색 페이지의 경우 같은 검색 키워드이지만 위치에 따라 결과가 다르던가 할 경우 SSG를 사용하면 다른 결과마다 페이지를 만들기 때문에 엄청난 양의 HTML이 만들어지니 진짜 정적인 곳만 유의해서 사용해야한다

 

📝SEO (Search Engine Optimization)

웹페이지들을 검색엔진이 수집해 분석 후 검색해 나오는 검색 결과들의 우선순위를 정하는데 사용된다.

 

 

반응형
반응형

📝노드

정보를 송수신할 수 있는 네트워크내에 있는 물리적장치나 데이터 지점을 의미한다

→ 모뎀 스위치 허브 서버 프린터 컴퓨터 등...

 

📝ECM (기업 콘텐츠 관리)

기업 콘텐츠 관리로 조직 내의 처리 업무에 관한 콘텐츠나 문서를 보관, 전달, 관리한다

 

📝ERP (기업 자원 관리)

실시간 회사 정보 공유함으로 빠르고 정확하고 투명하게 업무처리 가능해주는 프로그램

→ 돈의 흐름과 재고 사항 등 최적을 파악 할 수 있다

 

📝HRM (인사 관리 시스템)

기업 소속직원에 대한 관리와 새 인재를 채용하는 업무

 

📝DW (데이터 웨어하우스)

사용자의 의사 결정에 도움을 주기 위하여 기간시스템의 데이터베이스에 축적된 데이터를 공통의 형식으로 변환해서

관리하는 데이터베이스 즉, 축적된 데이터들의 통계로 어떤 식으로 운영해야할지 정보를 준다.

 

📝CRM (고객 관계 관리)

소비자들을 자신의 고객으로 만들고 이를 장기간 유지하고자 하는 경영방식이며 기업들이 고객과의 관계를 관리, 고객 확보, 그리고 고객, 판매인, 협력자와 내부 정보를 분석

 

📝MIS (경영 정보 시스템)

기업의 전반적인 정보 시스템을 통칭하는 용어로 ERP, HRM, DW, CRM과 같은 것들을 포괄하는 말

반응형
반응형

📝Tomcat web.xml vs Project web.xml

Tomcat web.xml은 프로젝트의 web.xml보다 좀더 상위로서 Tomcat의 web.xml이 먼저 적용 되고 프로젝트의 web.xml이 추후에 적용된다

 

📝콜백 지옥

$.get('url', function(response) {
	parseValue(response, function(id) {
		auth(id, function(result) {
			display(result, function(text) {
				console.log(text);
			});
		});
	});
});

웹 서비스를 개발하다 보면 서버에서 데이터를 받아와 화면에 표시하기까지 인코딩, 사용자 인증 등을 처리해야 하는 경우가 많다 만약 이 모든 과정을 비동기로 처리해야 한다고 하면 위와 같이 콜백 안에 콜백을 계속 무는 형식으로 코딩을 하게 되는데.. 이러한 코드 구조는 가독성도 떨어지고 로직을 변경하기도 어렵다!! 

 

function parseValueDone(id) {
	auth(id, authDone);
}
function authDone(result) {
	display(result, displayDone);
}
function displayDone(text) {
	console.log(text);
}
$.get('url', function(response) {
	parseValue(response, parseValueDone);
});

이런식으로 변경하면 콜백 지옥을 해결할 수 있다.

 

  1. ajax 통신으로 받은 데이터를 이용해 parseValue() 메서드를 실행
  2. response가 id가 전달되고 auth() 메서드가 실행
  3. auth() 메서드로 인증을 거치고 나면 콜백 함수 authDone()이 실행
  4. 인증 결과 값인 result로 display()를 호출하면 마지막으로 displayDone() 메서드가 수행되면서 text가 콘솔에 출력

 

🔗 참고 및 출처

https://dkwjdi.tistory.com/143

 

CallBack 함수란?

우선 간단하게 설명해보자면 전자레인지에 핫바를 돌린다고 해보자. 대부분은 전자레인지에 핫바를 넣어넣고 다른일을 하다가 전자레인지가 시간이 다되면 띵 하는 소리를 듣고 핫바를 꺼낼것

dkwjdi.tistory.com

 

반응형
반응형

📝Block

다른 곳에 작업이 끝날때까지 기다린다 제어권 없음

 

📝Non-block

다른 곳에 작업을 신경 안 쓰고 작업한다 제어권 존재

 

📝Sync

결과가 중요하다 그래서 나온 결과를 통해 작업을 처리한다 → A 함수에서 B 함수를 호출 시 B 함수 결과를 A 함수가 처리하는 것

 

📝Async

결과는 안 중요하다 결과를 통해 처리할 수도 안 할 수도 있다A 함수에서 B 함수를 호출 시 B 함수 결과를 A 함수가 처리하는 것

 

📝Sync Blocking 

결과가 중요하며 제어권이 없기 때문에 결과를 받을 때까지 기다리는 상태이다 → I

nput으로 입력 받을 때 기다린다

 

📝Sync Non Blocking

결과가 중요한데 다른 곳 작업은 신경 안 쓰고 자기 작업을 한다

→ 게임에서 맵을 이동할 때  프로그레스바로 상태를 보여주고 결과를 계속 체크해 결과가 나온 경우 맵을 보여준다

 

📝Async Blocking

결과에 관심 없는데 계속 기다린다쓰잘데기 없는 짓

 

📝Async Non Blocking

결과가 나올 때까지 다른 일을 할 수 있다 자바스크립트 Ajax API 요청

 

 

🔗 참고 및 출처

https://jh-7.tistory.com/25

 

Blocking, Non-blocking, Sync, Async 의 차이

들어가며 전 회사에서 한 선배님이 질문을 했다. Blocking 과 Non-blocking, Sync 와 Async 의 차이를 설명할 수 있냐고. 어 음... 하는 사이 선배님이 다시 말을 했다. 그 둘을 설마 같은거라고 이해하고 계

jh-7.tistory.com

 

반응형
반응형

📝콜백 = 콜백 함수

다른 함수의 인자로써 이용되는 함수

function printANumber(int number, function callbackFunction) {
    print("The number you provided is: " + number);
}
출처: https://satisfactoryplace.tistory.com/18 [만족:티스토리]

 

📝리스너 = 핸들러

리스너 또는 핸들러는 특정 이벤트가 발생했을 때 실행되는 함수

 

📝이벤트

이벤트는 시스템 내에서 발생하는 사건 또는 상황을 나타냅니다

사용자의 입력, 네트워크 활동, 타이머 등 다양한 상황이 이벤트로 간주될 수 있습니다

 

📝이벤트 리스너 = 이벤트 핸들러

특정 이벤트가 발생했을 때 해당 이벤트를 감지하고 설정된 콜백 함수나 핸들러를 호출하는 역할

 

<!-- HTML -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <script>
      const getCandy = () => {
        console.log("borrow candy...");
        return "four candy";
      };
    </script>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=self-desktop, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>HTML + CSS</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <input type="checkbox" onChange="getCandy()" />
  </body>
</html>

위는 HTML 이벤트에 직접 함수를 할당하는 방식으로 onChange와 같은 이벤트를 넣는 곳에는 "함수()" 이런식으로 사용해야합니다

 

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="src/style.css">
  </head>
  <script>
    function say () {
      console.log("hello");  
    }
    
    // document.addEventListener('DOMContentLoaded', function() {
    //   document.querySelector('button').addEventListener('click', say);
    // });

    document.querySelector('button').addEventListener('click', (event) => {
      console.log(event);
      say();
    });
  </script>
  <body>
      <button >Click me</button>   
  </body>
</html>

위는 eventListener를 사용하는 방식으로 참조값을 넣거나 익명함수를 만들어서 사용할 수 있습니다 

 

결론적으로 HTML태그에서 사용하는 경우는 직접 함수를 실행시키도록 "함수()" 이렇게 사용해야하며 eventListener를 이용하는 경우 함수에 대한 정의가 들어가야하는 참조값이나 익명함수를 넣어야합니다

 

참고로 React의 경우 동작방식이 HTML하고 사용방식이 좀 다릅니다

 

반응형