Lv. 0

프로젝트 적응기 (1)

뱅코더 — Mon, 18 Nov 2024 20:43:19 +0900

2022년 5월 ~ 2024년 10월까지 약 2년 반 동안 SM 업무를 수행하고 퇴사하였다.

운영업무가 비교적 편하다?는 인식이 있지만, 생각보다 유지보수를 위한 수정업무가 잦았다.

신규 개발 업무도 내려오는 경우가 많아서 일정을 맞추기 위해 야근을 하는 경우도 꽤 있었다.

물론 매일매일 밤 늦게까지 야근하는분들에 비하면 편안한 환경에서 근무했던 것 같다.

함께 일하는 분들도 실력도 뛰어나고, 잘 도와주셔서 일하는 동안 사람들을 정말 잘 만났다는 생각이 들었다.

첫 업무의 시작을 운영으로 해서 개발부터 배포까지 IT 업무 흐름에 대해 파악할 수 있는 좋은 경험을 한 것 같다.

(코딩 국비 학원 수료 후에도 SSH랑 FTP가 뭔지도 모르는 수준이었음...)

운영업무를 마무리하고 이제는 프로젝트를에서 새로운 도전을 시작하려고한다.

아직 투입된지 얼마 되지는 않았지만, 열심히 소스 분석 및 관련 지식이나 기술 습득을 위해 공부하고있다.

벌써부터 험난한 앞길이 보이기는 하지만... 성장을 위해서 감수해야하는 고통이라 생각한다.

운영업무를 하는동안에는 자바 8버전의 람다나 스트림을 잘 활용하지 않았는데, 여기선 이게 필수라고한다.

공부를 위해 책도 구입했다...

[모던자바 인 액션] 이랑 [자바/스프링 개발자를 위한 실용주의 프로그래밍] 이다...

내가 비전공자이다보니 일을 하면서 다른분들과 업무 대화를 나눌 때,

소위 근본?이 많이 부족한것 같다는 생각이 많이 들었다.

이번 기회에 공부해서 전공자에 비빌 수 있는 지식을 가졌으면 한다.

Spring (2/?)

뱅코더 — Tue, 11 Jan 2022 15:40:23 +0900

주요 개념 복습 및 Spring Annotation 정리

이전 개념 복습 + 새로운 개념

Controller	- 요청에 따라 알맞은 서비스를 호출하고 결과에 따라 응답을 제어하는 역할을 한다.
Interface	- 모든 메서드가 추상인 클래스 - 필드는 묵시적으로 public static final - 메서드는 묵시적으로 public abstract ( + default 메서드도 가능함 ) * Service에서 인터페이스를 사용하는 이유 1. 프로젝트에 규칙성을 부여하기 위해 ( 인터페이스 상속 → 오버라이딩 강제 → 상속 받은 모든 클래스가 동일한 형태 ) 2. 유지보수를 쉽게 하기 위해 ( Service는 비즈니스 로직을 처리하므로 수정이 잦음. 인터페이스를 상속 받은 다른 클래스에 수정 코드를 작성한 후, 부모 인터페이스 = 자식 객체; (업캐스팅) 상태에서 대입되는 객체만 교체 ) 3. 클래스 사이의 결합도를 낮추기 위해 4. Spring AOP → AOP는 spring-proxy를 이용해 동작하고, spring-proxy 객체는 Service 인터페이스를 상속받아 동작한다.
Model 객체	데이터를 K:V 형태로 담아서 전달하는 용도의 객체 → page, request, session, application scope와 사용 방법이 유사함.

Annotation 정리

@Controller	- presentation layer , 웹앱에 전달되는 모든 요청과 응답을 처리하는 역할임을 명시 + Bean에 등록함.
@Service	- Service layer , 비즈니스 로직을 가진 클래스임을 명시 + Bean에 등록함.
@Repository	- Persistance layer , 영속성을 가지는 속성(파일,DB)을 제어하는 클래스임을 명시 + Bean 등록
@RequestMapping	- 요청 주소, 전달 방식에따라 연결되는 클래스 또는 메서드를 지정한다. → 클래스 + 메서드에 동시 작성하여 하나의 주소로 해석할 수 있다. * @RequestMapping 규칙 1. ( ) 안에 작성되는 매개변수가 1개인 경우 → 매핑할 요청 주소로 해석한다. ( == value ) 2. ( ) 안에 작성되는 매개변수가 2개 이상인 경우 → 각 값을 해석하기 위해 value= , method= 과 같은 key 값을 작성한다. 3. method 키 미작성 시 GET/POST 관계없이 모두 처리한다. ex) @RequestMapping("/member/*") @RequestMapping(value="login", method=RequestMethod.GET)
@Autowired	- Servlet-context.xml 파일의 Component-scan을 통해 Bean으로 등록된 객체 중 타입이 같거나 상속관계인 객체를 찾아서 자동으로 의존성 주입(DI)를 하는 Annotation
@RequestParam	- 메서드 매개변수 앞에 작성하는 Annotation - @RequestParam( ) 뒤쪽에 작성된 매개변수에 Parameter가 저장된다. ex) @RequestParam("memberId") String id → name 속성이 memberId인 파라미터를 얻어와 id 변수에 저장한다. * @RequestParam 속성 - value : 전달 받을 input 태그의 name 속성 값 (매개변수 1개일 때 기본 값) - required : 파라미터 필수 여부(기본값 : true == 필수) → required=true 일 때 파라미터가 없으면 : 400 Bad Request(잘못된 요청) - defaultValue : 전달 받은 파라미터 값이 없을 때 지정할 기본 값 * input 태그의 name 속성 값과, 파라미터를 저장할 매개 변수명이 같으면 생략 가능하다.
@ModelAttribute	- 요청 시 전달 받은 파라미터를 객체 형태로 매핑하는 역할을 하는 Annotation * 객체로 매핑하기 위한 조건 1) input 태그 name 속성 값과 객체의 멤버 변수(필드)명이 같아야한다. 2) 객체로 만들어진 클래스에 기본 생성자가 있어야한다. → 스프링이 객체를 자동 생성할 때 사용하기 때문! 3) setter가 작성되어 있어야 한다. * 메서드 / 매개변수 레벨로 사용이 가능하다. - @ModelAttribute를 이용해 파라미터가 세팅된 객체를 커맨드 객체라고 한다.
@SessionAttributes	- Model 속성 중 { } 안에 작성한 것을 request → session 범위로 변경

Spring 기초1

뱅코더 — Tue, 4 Jan 2022 00:24:49 +0900

Spring Framework 란??

- 자바를 위한 오픈 소스 프레임워크

- 동적 웹 사이트 개발을 위한 여러 서비스를 제공함

- 공공기관 웹서비스 개발 시 사용 권장하는 전자정부 표준 프레임워크(Spring MVC Project)의 기반 기술

Spring Framework의 특징

* IOC (Inversion of Control) : 제어의 반전

- 컨트롤의 제어권이 프레임워크에 있음

- 객체의 생명주기를 프레임워크가 주도함

- 객체를 생성하고 직접 호출하는 프로그램이 아니라, 만들어둔 자원을 호출해서 사용

* DI (Dependency Injection) : 의존성 주입

- 설정 파일이나 Annotation을 통해 객체 간 의존 관계를 설정한다.

- 의존하는 객체를 개발자가 직접 생성할 필요가 없음.

* POJO (Plain Old Java Object) 기반의 프레임워크

- 특정 기술, 라이브러리의 내용을 상속받아 구현하지 않고 기본 기능을 이용한 순수 자바 객체

- 특정 클래스에 종속되지 않으므로 객체지향적 설계가 쉽고, 코드길이 감소 및

유지보수성 증가, 기존 자바 API, 라이브러리 지원에 강점을 가진다.

* Spring AOP (Aspect Oriented Programming) : 관점 지향 프로그래밍

- 트랜잭션, 로깅, 보안 등 여러 모듈, 계층에서 공통적으로 필요로 하는 기능인 경우

해당 기능들을 분리하여 관리함

* Spring JDBC

- Mybatis나 Hibernate 등 데이터베이스 처리용 프레임워크와 연결할 수 있는 인터페이스 제공

* Spring MVC

- MVC 패턴을 통하여 Model, View, Controller 사이의 관계를 DI 컨테이너가 관리함

* PSA (Portable Service Abstraction)

- 다른 여러 모듈을 사용함에 있어서 별도의 추상화 레이어를 제공함

Servlet / JSP [ 1 / ? ] 211208

뱅코더 — Wed, 8 Dec 2021 17:07:04 +0900

@WebServlet("url")

- 기존 web.xml(배포서술자)에 작성하던 servlet 연결 구문을 간소화하는 Annotation(어노테이션)

데이터 전송 방식

- POST : 삽입

- GET : 조회(검색)

- PUT : 수정

- DELETE : 삭제

* <a href=""></a> 를 이용한 요청은 GET 방식으로 처리된다.

* POST 방식의 요청은 문자인코딩 설정을 해야한다. (한글이 깨지기 때문)

@WebServlet("/login")
public class LoginServlet extends HttpServlet{
	
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		
		req.setCharacterEncoding("UTF-8");
		
		String inputId = req.getParameter("inputId");
		String inputPw = req.getParameter("inputPw");
		
		String saveId = req.getParameter("saveId");
		
		System.out.println(inputId);
		System.out.println(inputPw);
		System.out.println(saveId);
		
		String name = "아무개";
		
		if( inputId.equals("user01")) {
			name = "홍길동";
		}
	
		req.setAttribute("name", name); 
		
		RequestDispatcher dispacher = req.getRequestDispatcher("/WEB-INF/views/loginResult.jsp");
		dispacher.forward(req, resp);
		
	}
	
	
}

* HttpServletRequest req : 요청과 관련된 정보, 데이터(값)을 가지고있는 객체

* HttpServletResponse resp : 응답과 관련된 정보, 스트림을 가지고있는 객체

POST 방식은 한글이 깨지기 때문에 문자인코딩 필요하다.

-> req.setCharacterEncoding("UTF-8");

<input>태그에 작성된 값을 req.getParameter("name값") 이용하여 변수로 저장한다.

* <input type="checkbox">

1) 체크박스가 여러 개

--> 같은 name 속성을 가지므로 배열로 받아야한다.

2) 체크박스가 한 개

--> 배열로 받을 필요 없음

checkbox는 "checked" 속성을 가지는 경우 value = "on" (따로 지정하지 않을 시)

체크되지 않은 경우 value == null

* Parameter가 아닌 새로운 값을 JSP에 위임하는 방법

req.setAttribute("name",name);

--> Key : Value 형태로 req에 담아서 JSP로 위임한다.

** EL을 사용하지 않는 경우

- setAttribute를 통해 넘어간 매개변수는 자료형이 Object로 설정되어있음

--> JSP에서 사용하기 위해서는 다운캐스팅을 해야한다.

JavaScript - 정규 표현식 기초

뱅코더 — Tue, 9 Nov 2021 18:54:56 +0900

‍ 정규 표현식 (Regular Expression)

- 특정 규칙을 가지는 문자열의 집합을 표현하는데 사용하는 식

- 정규 표현식을 사용하면 입력된 문자열에 대하여

특정 조건 검색, 일치 여부, 치환에 대한 조건문을 처리하기 쉽다.

‍ 정규 표현식 객체 생성 및 확인 메서드

1. 정규 표현식 객체 생성 방법

- const regExp = new regExp("정규 표현식");

- const regExp = /정규 표현식/;

2. 문자열 패턴이 일치하는지 확인하는 메서드

1) regExp.test( 문자열 )

- 문자열에서 일치하는 패턴이 있으면 true 반환하고 없으면 false를 반환한다.

2) regExp.exec( 문자열 )

- 문자열에서 일치하는 패턴이 있으면 매칭되는 첫 번째 문자열을 반환하고 없으면 null을 반환함.

<button id="btn1">확인용 버튼</button>

document.getElementById("btn1").addEventListener("click", ()=>{

  // 1. 정규 표현식 객체 생성
  const regExp1 = new RegExp("script");
  const regExp2 = /java/;

  console.log(regExp1.test("javascript"));  // t
  console.log(regExp1.test("css"));         // f

  console.log(regExp2.exec("javascript"));  // java (index = 0) -> 개발자도구에서 편의를 위해 index 정보도 제공
  console.log(regExp2.exec("scriptjava"));  // java (index = 6)
  console.log(regExp2.exec("부대찌개"));    // null

});

개발자 도구 콘솔창에서 확인해보기

‍ 정규 표현식의 메타 문자

- 문자열의 패턴을 나타내는 특수문자

특수문자마다 지정된 의미가 담겨 있다.

^ (캐럿) : 문자열의 시작을 의미한다.

$ (달러) : 문자열의 끝을 의미한다.

ex) /^a/ : a로 시작하는 문자열

--> aaa, abc, apple ( O ) / gag, pap, 가나다라마 ( X )

JavaScript - 함수

뱅코더 — Tue, 9 Nov 2021 18:41:04 +0900

기본적인 함수


function 함수명(){	// 함수 선언
	// 함수 정의
}
함수명(); 	// 함수 호출

클릭하면 숫자가 증가하는 버튼


function clickCount(){
  	const btn1 = document.getElementById("btn1");
  	btn1.innerText = Number(btn1.innerText) + 1;
  }

익명 함수

	
    	function(매개변수){		// 함수 선언
        	// 함수 정의
        }
    
    - 이름이 없는 함수, 마음대로 호출하는 것이 불가능하다
    - 이벤트 핸들러 같이 바로 실행되는 함수가 필요할 때,
      매개변수나 변수에 함수를 저장해야하는 경우에 사용한다.

* 클릭하면 배경 색깔이 변하는 버튼 만들기 (익명 함수 사용)

	
    	document.getElementById("btn2").addEventListener("click", function(){
  	this.style.backgroundColor = "yellow";
  });

화살표 함수

익명 함수를 간단하게 표현한 표기법 (es6)

작성법1. 기본형태 : ([매개변수]) => { 함수 };

작성법2. 매개변수가 1개인 경우 소괄호() 생략 가능
-> ex) (num) => { return num * 2 };
== num => { return num * 2 };

작성법3. 매개변수가 없을 경우에는 소괄호() '무조건' 작성하기

작성법4. 함수 정의 부분이 return [식 또는 값] 으로만 작성되어있는 경우에는 중괄호{ }, return이 생략 가능하다.

작성법5. 4번의 경우이지만 반환하는것이 객체(Object)인 경우에는 중괄호와 return 생략이 불가능하다.

이사

뱅코더 — Thu, 4 Nov 2021 18:10:13 +0900

당분간 정리 글은

https://velog.io/@bank-coder

Javascript 기초

뱅코더 — Tue, 2 Nov 2021 21:59:33 +0900

01. JavaScript 개요

script 언어

응용 프로그램의 동작을 사용자의 요구에 맞게 제어하는 언어

별도의 소스코드 컴파일을 진행하지 않고 인터프리터(Interpreter)를 이용해 소스코드를 한 줄씩 읽는다.

JavaScript(JS)

웹 브라우저에서 많이 사용하는 인터프리터 방식의 객체 지향 프로그래밍 언어
ECMA Script 표준을 따르는 대표적인 웹 기술

JS preview

    <button type="button" onclick="alert('버튼1 클릭');">버튼1</button>
    <!-- onclick : 해당 요소가 클릭 되었을 때 -->

    <button type="button" onclick="changeBg();">제목 배경색 바꾸기1</button>

    <button type="button" id="btn1">제목 배경색 바꾸기2</button>

Test 영역

테스트 영역

BootStrap < 2021 - 11- 01 >

뱅코더 — Mon, 1 Nov 2021 21:45:39 +0900

BootStrap

BootStrap이란?

웹 페이지 개발 시 화면을 쉽고 일관성있게 구현할 수 있도록 Twitter에서 만든 Framework

각종 레이아웃, 버튼, input 태그 등 컴포넌트를 CSS, JS 등으로 미리 만들어놓고 제공한다.

클래스를 지정해서 원하는 속성을 적용시킬 수 있다.

BootStrap 개요

버튼 (button) 관련 속성 (컴포넌트)

버튼 크기 : .btn-lg , .btn-sm 적용

  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-secondary btn-lg">Large button</button>

버튼 비활성화 : disabled

  <button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>

버튼 블록(grid 이용) : class="d-grid gap-2 col-6 mx-auto"

  <div class="d-grid gap-2 col-6 mx-auto">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
    </div>

BootStrap 유틸리티

배경색 관련 유틸리티

배경색 : bg-
그라데이션 : bg-gradient
불투명도 : bg-opacity-*

  <div class="bg-primary">배경1</div>
  <div class="bg-dark">배경2</div>
  <div class="bg-danger bg-opacity-50">배경3</div>

글자색 관련 유틸리티

글자색 : text-
불투명도 : text-opacity-*

  <div class="text-danger">테스트1</div>
  <div class="text-white bg-dark">테스트2</div>
  <div class="text-white-50 bg-dark">테스트3</div>

테두리 관련 유틸리티

테두리 : border

border-top, border-bottom, border-start, border-end
색상 : border- 색상
두께 : border- *
모서리 : rounded
rounded-top, rounded-bottom, rounded-start, rounded-end, rounded-circle, rounded-pill
모서리 곡률 : rounded-1~3

  <p class="border border-danger border-3 rounded">테두리 테스트 1</p>
  <p class="border-bottom border-success border-2">테두리 테스트 2</p>
  <p class="border-bottom border-warning border-5">테두리 테스트 3</p>

크기 조절 유틸리티

25% 단위
폭 : w-25, w-50, w-75, w-100, w-auto
높이 : h-25, h-50, h-75, h-100, h-auto

필요에 따라 max-width, max-height 사용 가능 : mw, mh

    <div id="wrapper1" class="border">
    <div class="w-50 h-25 border bg-primary"></div>
    <div class="w-25 h-50 border bg-warning d-inline-block"></div>
    <div class="w-25 h-50 border bg-warning d-inline-block"></div>
    </div>

간격 조절 유틸리티

m : margin, p : padding
t : top, b : bottom, s : start, e : end, x : x축 이동, y : y축 이동

  <div class="border d-inline-block w-25 mt-3 mb-5">테스트1</div>
  <div class="border d-inline-block w-25 mx-4 p-4">테스트2</div>
  <div class="border">테스트3</div>

텍스트 정렬 유틸리티

fs : font-size, fw : font-weight
왼쪽 정렬 : text-start
오른쪽 정렬 : text-end
중앙 정렬 : text-center

  <p class="border p-3 m-3 text-start fs-3 fw-bold">왼쪽 정렬</p>
  <p class="border p-3 m-3 text-center fs-4">가운데 정렬</p>
  <p class="border p-3 m-3 text-end fs-5"> 오른쪽 정렬</p>

float 관련 유틸리티

float-start
float-end
float-none -> float:none 이므로 다음에 작성할 부분에서 clear:both 처리를 해주어야 겹치지 않음

  <div class="float-start">Float start on all viewport sizes</div><br>
  <div class="float-end">Float end on all viewport sizes</div><br>
  <div class="float-none">Don't float on all viewport sizes</div>

HTML3 < 2021 - 10 - 28 >

뱅코더 — Fri, 29 Oct 2021 07:49:22 +0900

영역 관련 태그

block 형식- 공간을 수직 분할하는 영역

- 요소가 한 줄 모두를 차지함

- width, height 사용 가능함

- h1~ h6,p, pre, hr, div 등

inline 형식

- 공간을 수평 분할하는 영역

- 요소의 크기만큼만 차지함

- width, height 지정 불가

- b, strong, i, em, mark, span 등

* block / inline 차이점

1. 줄바꿈

- div(division) : 화면 영역을 나누는 용도로 사용한다. (block 형식)

- span : 줄바꿈이 일어나지 않고 다음 영역이 옆에 온다. (inline 형식)

2. 영역 지정 방식

- block 형식 : 줄 전체를 영역으로 가짐

- inline 형식 : 내용(content) 단위로 영역을 지정한다.

3. 크기 지정

<div style = "width : 200px; height: 200px; background-color: beige;">
    크기 지정 O
</div>

<span style = "width : 200px; height: 200px; background-color: gray;">
    크기 지정 X
</span>

크기 지정 O

크기 지정 X

* Iframe 태그

- HTML 문서 내에 다른 웹 페이지를 추가하는 태그 (inline)

이미지 관련 태그

img 태그- HTML 문서(웹문서, 웹페이지)에 사진 및 그림을 삽입할 때 사용하는 태그

img 태그의 속성- src : 삽입할 이미지 경로 지정 - width : 폭 지정- height : 높이 지정- alt : 이미지를 설명하는 속성, 이미지가 출력되지 않는 경우에 표시

* img 태그에 width, height 중 하나의 크기를 지정하면 나머지 크기도 조정된다.* 폭과 높이를 모두 지정하면 비율을 무시하고 지정한 크기대로 삽입된다.

고정크기 / 가변크기- 고정 크기 단위 : 화면 크기에 관계 없이 지정된 값 만큼의 크기가 지정되는 단위ex) width="200px" height="200px"

- 가변 크기 단위 : 화면 또는 지정된 영역을 기준으로 삼고 그에 따라 변하는 단위ex) width="20%" height="30%"

* img 태그는 inline 형식이지만 폭과 높이 지정이 가능하다.

하이퍼링크 관련 태그

하이퍼링크- 웹 문서가 일반 문서와 구분되는 가장 큰 기능- 클릭을 통해 연결된 다른 문서로 이동하는 방법을 편리하게 제공한다.

1) 텍스트를 클릭해서 다른 문서로 이동

2) 이미지를 클릭해서 다른 문서로 이동

3) 같은 페이지 내에서 이동

a 태그 (anchor : 닻, 고정하다)

속성

* href 속성 (hypertext reference) : 이동할 페이지를 작성하는 속성

* title 속성 : 링크에 마우스를 오버할 경우 설명을 나타내는 속성

* target 속성 : a 태그 클릭 시 페이지가 열리는 방법을 지정

- _self : 현재 창에서 열기

- _blank : 새 창에서 지정된 링크로 이동(새 창으로 열기)
- _parent : 부모 창에서 열기

- _top : 가장 상위 창에서 열기

<a href="https://bank-coder.tistory.com/" title="블로그 홈으로 이동" targer="-blank">
	홈페이지로 이동하기
</a>

홈페이지로 이동하기