전체 글 194

[Front] DOM요소와 제이쿼리

1. DOM 요소란?DOM은 Document Object Model의 줄임말로, HTML 태그 하나하나를 자바스크립트로 다룰 수 있도록 만든 문법이다. 다음과 같은 코드가 있을 떄는, document.getElementById("memberId").value; // → "abc123"를 통해 ab123이라는 값을 가져올 수 있다.즉, HTML 태그 하나 == DOM 요소 하나이다.2. $(" "): 제이쿼리 문법.$("#memberId")는 document.getElementById("memberId")와 동일한 의미이다.즉, DOM 요소 = HTML 태그를 자바스크립트로 다룰 수 있게 만든 객체$(“#id”) = jQuery로 특정 HTML 요소를 선택하는 방법요소 선택document.getEleme..

웹 개발 2025.05.24

[Spring Boot] @Primary와 @Qualifier의 차이

@Primary와 @Qualifier 차이@Primary는 같은 타입의 빈을 사용할 시 한 객체에게 우선순위를 부여한다. @Bean 으로 생성하는 객체들 중 같은 클래스(타입)인 빈이 있다면, 스프링은 어느 것을 빈으로 생성하여야 하는지 알 수 없기 때문에 컨테이너를 띄우지 못하고 NoUniqueBeanDefinitionException 이라는 예외를 던진다.그렇기에 찾고자하는 객체에 @Primary를 붙여준다. @Qualifier는 @Component가 객체의 자료형을 참고하기 때문에 같은 타입을 사용하는 빈이 있을 경우 객체의 이름까지 참고하여 해당하는 빈을 찾는다.

웹 개발 2025.05.22

[CS지식] 인터넷과 네트워크

※ 인터넷과 네트워크 네트워크 + 네트워크 = 인터넷 인터넷: 수십억 개의 컴퓨팅 장치를 연결하는 컴퓨터 네트워크 PAN, LAN, MAN, WAN, 5G/4G ※ 프로토콜이란? :  TCP, UDP, IP, HTTP, SMTP, FTP, OSPF, BGP ※ 계층(layer) 응용계층, 전송계층, 네트워크계층, 링크계층, 물리계층 ※ 네트워크 구성 라우터, 스위치, NIC, 프록시 서버, 공유기 ※ 네트워크 알고리즘  라우팅 알고리즘 ※ 원하는 정보를 웹 서버로부터 가지고 오는 방법 웹 브라우저, DNS ※ 웹 서버로부터 웹 페이지를 가져오려면?① 내 컴퓨터에 웹 브라우저가 설치되어 있어야 한다.크롬, 익스플로러, 사파리 등 ② 내 컴퓨터가 네트워크(인터넷)에 접속해 있어야 한다.접속망..

IT/CS 2025.05.21

[CS지식] OS(운영체제)

운영체제: 컴퓨터 하드웨어를 관리하는 소프트웨어 -> 자원 할당자. 하드웨어와 밀접애플리케이션과 사용자들 간에 제어 및 조정* 컴퓨터 시스템은 하드웨어, 운영체제, 응용 프로그램, 사용자 4가지 요소로 구분됨 1. Interrupt 운영체제는 인터럽트 기반으로 동작함. 하드웨어나 소프트웨어에서 어떤 사건이 발생하면 이를 인터럽트로 사용하여 시스템에 알림 CPU가 인터럽트 되면, CPU는 하던 일을 멈추고 즉시 고정된 위치로 실행을 옮겨 인터럽트를 처리함 ■ 인터럽트 핸들링: 인터럽트는 인터럽트 벡터를 사용해 제어를 인터럽트 서비스 루틴으로 넘긴다. 인터럽트 벡터는 모든 서비스 루틴의 주소를 가지고 있다. ■ 인터럽트 공통 기능 인터럽트 구조에서 인터럽트 당한 명령의 주소는 저장되어야 한다. 인..

IT/CS 2025.05.20

[Backend] 비밀번호 암호화

1. 스프링 부트에 내장된 암호화 라이브러리 : BCryptPasswordEncoder 클래스 public class BCryptPasswordEncoder { public String encode(CharSequence rawPassword) { // 내부적으로 salt + 해시 처리 } public boolean matches(CharSequence rawPassword, String encodedPassword) { // 해시된 비밀번호와 입력값 비교 (같은 salt로 해시해서) }}메서드까지 전부 내장되어 있음. 형식 그대로 따라 쓰면 된다!내장된 클래스는 구글링 등으로 찾아서 쓰면 된다.메서드도 함께 찾아보고 사용할 것.2. SecureRandom ..

웹 개발 2025.05.19

[Spring Boot] @Component 와 @Bean의 차이

@Component vs @Bean 차이항목@Component@Bean사용 위치클래스 위메서드 위작성 대상직접 만든 클래스외부 라이브러리 객체 등 (내가 new로 만드는 객체)자동 등록자동 스캔(@ComponentScan) 대상수동 등록용도일반적으로 직접 만든 유틸, 서비스, DAO 등에 사용외부 라이브러리 객체를 스프링 컨테이너에 등록할 때 사용@Component 예시@Componentpublic class MyService { // 스프링이 자동으로 Bean 등록해줌}클래스 위에 작성함내가 만든 클래스의 경우에는 @Component를 사용해서 바로 빈으로 등록하면 된다.@Bean 예시@Configurationpublic class AppConfig { @Bean public BCrypt..

웹 개발 2025.05.18

[Front] 기능

이메일 직접입력/선택입력   @ 직접입력 google.com naver.com daum.net hanmail.net   같은 클래스로 지정 시 이메일을 직접 입력하게 할 수도, 목록에서 선택하게 할 수도 있다.name은 둘 다 동일하게 name="memberEmailDomain"으로 받고id는 선택 입력 시 id="selectEmailAddress", 직접 입력 시 id="inputEmailAddress" 로 설정한다.id가 다른 이유는 각각 다르게 실행해야하기 때문에!선택 입력의 경우만 ..

웹 개발 2025.05.17

[Front] 코드 분석 중 궁금한/모르는 점 정리

1-1. onblur: 입력창(input)에서 포커스(커서)가 빠져나갈 때 실행되는 이벤트즉, 사용자가 input 칸에 커서를 뒀다가 → 다른 곳을 클릭하거나 탭해서 빠져나가면(onblur) → 연결된 JavaScript 함수가 실행된다.주로 입력 값 유효성 체크할 때 자주 사용즉, 입력 창 영역에서 마우스 커서를 빼면 바로 연결된 js 함수가 실행된다.실시간 검증(유효성 검사)에 많이 씀예: 아이디 중복 체크, 이메일 형식 검사, 비밀번호 조건 확인 등이벤트실행되는 시기특징oninput글자가 입력되면 실시간으로 실행가장 빠르게 반응함 (삭제, 붙여넣기, 한글 조합까지 다 인식)onkeyup키보드를 눌렀다가 뗐을 때 실행한글 조합 입력 안 끝나면 실행 안 됨onkeydown키를 눌렀을 때 바로 실행눌렀을..

웹 개발 2025.05.16

[Backend] API와 컨트롤러

API와 Controller 관계 이해하기Spring에서 API를 만든다는 것은 보통 Controller를 만든다는 것과 거의 같은 의미이다.특히 @RestController를 사용해 JSON을 응답하는 API를 만들 경우 더 그렇다.구분 의미API를 만든다외부(프론트엔드, 앱 등)에서 호출할 수 있는 경로(엔드포인트)와 응답 형식을 정의한다는 의미Controller를 만든다그 API 요청을 처리하는 실제 로직(Java 클래스와 메서드) 를 만든다는 의미 즉, 로그인 기능, 장바구니 기능, 회원가입 기능, 상품 검색 기능과 같은 모든 기능 하나하나가 전부 API인 것이다!→ 사용자가 화면에서 버튼 하나하나 누를 때마다 호출되는 주소가 API!동작 호출되는 API 설명상품 상세 페이지에서 "장바구니 담기"..

웹 개발 2025.05.15

[Front+Backend] 로그인 과정에서의 처리 과정 & AJAX와의 데이터 응답

1. JSP에서 태그 내부를 통해 사용자가 내용을 입력하고 버튼을 누르면 JS에게 전송2. JS에서 AJAX가 동작하여, 입력된 데이터들을 서버로 비동기 전송 (요청 전송)3. 서버(컨트롤러)에서 AJAX로 받은 정보들을 가지고 DB(모델)를 통해 사용자 조회. 성공/실패 여부를 판단 후 JSON 형태 등으로 JS에게 응답을 전달함 (로그인 처리는 서버에서 담당)4. 응답을 받은 JS는 alert을 띄우거나 페이지 이동 등을 결정함. 즉, 사용자 입력(JSP) → AJAX 요청 전송(JS) → 서버에서 처리 (Controller) → AJAX에서 응답 처리(JS)AJAX 양식을 보면 dataType이 있는데, 이 데이터 타입은 js가 서버로부터 받을 응답의 형식을 의미한다. // AJAX 요청 // ..

웹 개발 2025.05.14