코딩 일지

[Front] 기능

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

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

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

[Backend] API와 컨트롤러

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

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

Mybatis에서 동적 쿼리란? >> 우선 "정적 쿼리"란?: 고정된 조건의 쿼리를 말함 (항상 해당 조건에 맞는 값만 출력)SELECT * FROM MEMBER WHERE GENDER = 'F'; >> "동적 쿼리"란?SELECT * FROM MEMBER WHERE 1=1 AND GENDER = #{gender} AND AGE > #{age}Mybatis XML에서는 위처럼 조건을 사용하여 사용자가 선택한 필터에 따라 SQL이 유동적으로 달라지는 것을 동적 쿼리라고 한다. 실제 사용 예시 (MyBatis XML) SELECT * FROM MEMBER WHERE 1=1 // WHERE 1=1 은 항상 참(True)인 조건을 말함 // SELECT * FROM MEMBER 와 같다..

팀원 간 코드 공유 및 관리를 위해 깃허브에 프로젝트를 연결하기로 했다. 깃허브 로그인 후 Your Repositories에 들어가 New 버튼을 누르면 새로운 Repository를 만들 수 있다. 프로젝트 이름과 설명을 적어주고,그 아래에서는 공개 범위를 설정해준다.우선 프로젝트 연결해보는게 과제였기 때문에 나는 비공개로 설정했다.그리고 README 파일의 생성 여부를 고르는데, 설명 파일을 뜻한다.생성하기로 선택했다. 이렇게 repository를 만들었으면 cmd에 들어가서 git을 연결해줄건데 cmd로 git을 연결하려면 git bash를 설치해야한다! git bash를 설치한 후 cmd 창에 들어가 연결하고 싶은 프로젝트 파일이 있는 경로를 복사한다.그리고 cd 프로젝트_파일_경로를 작성해준다...

[ 제이쿼리(JQuery) ]모든 브라우저에서 동작하는 자바스크립트 라이브러리로, 무료로 사용 가능한 오픈소스이다.이벤트 연결, ajax 등 쉽게 구현 가능하다.또한, css 선택자를 그대로 사용해서 동적 화면처리도 가능하다. // 로그인 기능$("#loginForm").on('submit', function(event) {// 제이쿼리 문법. id = "loginForm"인 폼에서 폼 제출이 되면 해당 이벤트가 발생한다. console.log("로그인 실행"); event.preventDefault(); // 기본 폼 제출 동작을 방지 이 부분은 jQuery 문법이 사용된 코드로, CSS 선택자처럼 #loginForm을 선택해서 이벤트를 설정할 수 있다. id = “loginForm”인 요소에서 제출..

보안과 관련된 부분에서는 ? 클라이언트 방식보다(JS에서 처리) 서버 방식(콜백 URL 처리)으로 하는 것이 보안에 좋다.서버에서 처리하는 것이 액세스 토큰이 노출되는 것을 막아 보안에 좋고, 서버가 직접 사용자 정보를 받아서 처리하기 때문에 자동 회원가입/로그인/세션 설정이 편하다. 또한, 프론트 - 백엔드를 분리하여 확실한 역할 분담을 할 수 있다. → 네이버도 카카오도 OAuth 서버 방식을 제공하고 있다!

스프링 부트 프로젝트 만들고 실행하기 Spring Initializr 페이지에서 항목을 설정한 후 생성.https://start.spring.io/ → 스프링 부트 링크 여기서는 책이 시키는대로 설정했다. 옆에서 의존성도 추가해준다. H2 Database : 자료를 저장하기 위한 데이터베이스Mustache : 화면을 만들기 위해 필요한 도구Spring Data JPA : 데이터베이스를 좀 더 편리하게 다룰 수 있게 해주는 도구설정을 마친 후 Generate를 누르면 firstproject.zip 파일로 다운로드 된다. 해당 파일을 IDE인 인텔리제이에 들어가서 띄우면 된다. 수업 후 이 화면을 보니 구조를 이해할 수 있다.java에는 자바 코드가 저장되고 , resources에는 외부 파일이 저장된다...

[Mybatis : ORM] 1) 자바코드 1~2줄로 DB연동 처리 가능2) SQL을 자바코드에서 온전히 분리 : xml 파일로 분리 >> .xml, @, .properties 결합도를 낮추고 응집도를 높임 ===>> 유지보수 용이[1] 라이브러리를 pom.xml에 추가[2] SQL을 자바코드에서 온전히 분리 : xml 파일로 분리 mapper.xml 파일 생성 SQL 명령어들에게 고유한 ID값을 부여하는 방식으로 설정함 DAO에 작성된 SQL문들을 분리[3] config.xml 파일 생성 DBMS 커넥션 설정 ▶ Spring 프레임워크(applciationContext.xml)에 이미 있음 mapper xml 파일들 위치[4] DAO3, ServiceImpl, DI 해..