다락방

Ncloud 크레딧 사용 후기

호준송 — Thu, 27 Jul 2023 16:02:37 +0900

멋쟁이사자처럼 3기 백엔드 스쿨을 수강하면서, 웹 배포 분야도 배우게 되었다. 이와 관련해서 Naver Cloud Platform 에서 예비/주니어 개발자를 위해 크레딧을 지급하는 서비스에 대해 소개받았다.

소개받기 전에는 AWS 에 대해서만 알고 있었는데, AWS 프리티어를 사용 하고 요금 폭탄을 맞았다는 말을 많이 들어 조심스러웠다. 네이버 클라우드 플랫폼의 크레딧 덕분에 요금 폭탄 걱정 없이 배포를 진행했다.

신규 가입 10만원 크레딧을 제공했고, 이후 20만원의 크레딧이 제공되었다.

20만원의 크레딧은 아마 멋쟁이사자처럼 측과 연계하여 지급되는 것 같다.

이후 70만 크레딧을 추가로 제공한다고 한다.

사용 내용

멋사 수업기간 중 4주 프로젝트를 2회 진행했는데, 두 프로젝트 모두 내가 배포를 맡게 되었다.

요금 부담 없이 네이버 클라우드 플랫폼을 통해 배포를 진행했다.

프로젝트1 - CodiCaster

첫 프로젝트는 날씨에 맞춘 코디 추천 플랫폼인 “코디캐스터”이다.

4인 팀 프로젝트로, 프로젝트에 대한 상세 내용은 아래 링크를 참고하길 바란다.

GitHub - CodiCaster/CodiCaster: ️ 코디 캐스터 (Codi Caster)

️ 코디 캐스터 (Codi Caster). Contribute to CodiCaster/CodiCaster development by creating an account on GitHub.

github.com

Server

배포를 처음 하게 되었는데, 네이버 측에서 제공하는 가이드가 도움이 많이 되었다.

가이드만 따라가도 서버 생성을 쉽게 할 수 있었다.

팀원 모두 처음 진행하는 협업 프로젝트였기에, 완성도가 조금 부족했다.

학습 측면에서 좋은 경험을 했고, 프로젝트 기간이 끝난 후 이 프로젝트는 마무리하고 다른 프로젝트로 넘어갔다.

따라서, 서버는 오래 운영하지 않았다. 약 1~2주간 서버를 켜놨던 것으로 기억한다.

그래도 첫 배포를 성공적으로 진행했다고 생각한다.

“코디캐스터”는 이미지가 핵심 요소인데, Naver Cloud Platform에 서버 외 또다른 기능들을 사용했다.

Object Storage

먼저, 이미지 저장소인 Object Storage를 사용했다.

이미지 파일을 서버 로컬에 저장하지 않고, 따로 이미지 저장소를 두어 관리했다.

Amazon S3 와 비슷한 형태인데, Amazon S3 관련 라이브러리가 기본적으로 제공되고 있고, Naver Object Storage는 이 라이브러리를 활용할 수 있게 구성되었다.

따라서, S3 라이브러리를 활용하여 Object Storage에 이미지를 저장할 수 있었다.

CDN+

추가로 Naver CDN+ 를 이용했다.

CDN은 이미지, 동영상 등 다양한 데이터에 대해 일종의 캐시역할을 하는 프록시 서버로 알고 있다.

어려운 작업이라고 생각했는데, 네이버에서 제공하는 CDN+를 사용할 수 있었다.

~~사실, CDN+ 를 사용하지 않은 채로 Object Storage만 사용하는 것이 가능한 지 확실하지 않다.~~

CDN endPoint를 설정하고 이를 이용해서 이미지를 서버에 가져와 웹 페이지에 띄워줄 수 있었다.

사용 방법 역시 네이버에서 제공하는 가이드라인을 따르면 간단했다.

Image Optimizer

이미지 파일의 크기를 조정하는 방법에 대해 찾아봤었는데, Naver Image Optimizer를 통해 해당 기능을 구현할 수 있었다.

이미지 파일의 가로, 세로 크기 비율을 정하고 파일 크기를 조정할 수 있었다.

더 많은 기능이 있을것으로 생각되는데, 프로젝트 진행 당시 시간에 쫓겨 가장 기본적인 기능만 활용했었다.

마찬가지로, 가이드라인을 통해 쉽게 활용했다.

프로젝트2 - MyPill

두 번째 프로젝트는 영양제 이커머스 플랫폼인 “MyPill”이다.

3인 프로젝트로, 자세한 내용은 마찬가지로 링크를 참고하길 바란다.

GitHub - MyPill2023/MyPill: 영양제 추천 이커머스 플랫폼

영양제 추천 이커머스 플랫폼. Contribute to MyPill2023/MyPill development by creating an account on GitHub.

github.com

Server

첫 프로젝트에서는 배포작업이 프로젝트 막바지에 진행되어 많이 급했다.

이번 프로젝트에서는 여유있게 배포를 진행했다.

이전 프로젝트보다 오랜기간 서버를 운영했고, 현재까지 여전히 운영하고 있다.

전보다 익숙해져 서버의 성능에 대해 찾아봤었는데, 추후 개선작업으로 보류하고 기본 설정을 이용했다.

Object Storage, CDN+

이번 프로젝트 역시 이미지를 사용하였는데, Object Storage 와 CDN+ 를 이용했다.

이번에는 다른 팀원분이 이미지 처리 작업을 맡아 진행했고, Object Storage와 CDN+까지 맡아주셨다.

따라서, 내 서버와 팀원분의 이미지 저장소를 연동한 꼴이 되었다.

연동 작업은 생각보다 단순했고, 다른 계정과의 연동 작업에 대한 자신감이 생겼다.

1차 프로젝트와 비슷한 작업을 진행했기에, 서비스에 대한 소개는 넘어가도록 하자.

최종 후기

처음으로 서버를 이용해 배포를 진행해 봤는데, 어렵지 않고 생각보다 간단했다.

가이드라인이 잘 나와있기도 하고, 서비스의 UI가 이해하기 쉽게 잘 되어있었다.

프로젝트를 진행하는 동안 요금에 대한 걱정이 없었고, 학습에만 집중할 수 있었다.

추가로, 서버 외 다양한 기능을 사용하면서 또 다른 지식을 넓혀나갈 수 있었다.

서비스를 이용하면서 인터넷 검색을 할 때, 원하는 정보를 찾기가 쉽지는 않았다.

아무래도 AWS가 가장 큰 점유율을 가지고 있기 때문에, 이와 관련된 게시물이 많기 때문인 것 같다.

이미 AWS에 적응을 한 상태라도, 또 다른 클라우드 서비스를 사용해보는것도 좋을 것 같다.

크레딧도 제공되니, 부담 없이 이용할 수 있을 것 같다.

2차로 진행한 “MyPill”은 지속적으로 개선작업을 진행하고 있고, 서버 역시 계속 운영하고 있다.

추가로, 개인 프로젝트를 진행하려고 하는데 이 역시 NCP를 이용하려고 한다.

부트캠프를 수강중인 훈련생이나, 취준생 혹은 일반 학생들까지도 크레딧 제공 서비스를 이용해 보는것을 추천한다.

초심자입장에서는 크게 도움이 되었다.

[트러블 슈팅] - MultipartFile 테스트 케이스

호준송 — Tue, 25 Jul 2023 02:45:51 +0900

배경

이전에 언급한 MultipartFile 처리와 연결되는 이슈다.

[트러블 슈팅] - MultipartFile 예외 처리

배경 프로젝트에서 게시글 작성 시 이미지를 첨부하는 기능을 추가했다. 이미지는 MultipartFile의 형태로, 프론트로부터 받아왔다. 기존 게시글 작성 메서드에 매개변수로 MultipartFile을 추가했고,

hojunking.tistory.com

이미지 첨부 기능을 추가하면서, 게시물을 작성하는 create 메소드에 MultipartFile을 매개변수로 추가되었다.

create 메소드에 대한 기존 테스트 케이스는 이미지 첨부 기능 이전에 작성하였기에 수정이 필요했다.

문제 상황

이전에 작성한 글에 나오는 이슈와 마찬가지로 null 값을 매개변수로 전달하는 방식을 시도했다.

그러나, 게시물 작성 메소드 create는 multipartFile.isEmpty()를 통해 경우를 구분하고 있었다.

@Transactional
public RsData<Post> create(PostRequest postRequest, Member member, MultipartFile multipartFile) {
    if (member == null) {
        return RsData.of("F-1", "존재하지 않는 회원입니다.");
    }
    Post post = new Post(postRequest, member.getId(), new ArrayList<>());
    if (!multipartFile.isEmpty()) {
        AmazonS3Dto amazonS3ImageDto = imageService.saveImageOnServer(multipartFile, post);
        Image image = new Image(amazonS3ImageDto, multipartFile, post);
        post.addImage(image);
    }
    postRepository.save(post);
    return RsData.of("S-1", "질문 등록이 완료되었습니다.", post);
}

따라서 null.isEmpty() 를 시도한 형태가 되었고, 당연하게도 NullPointException이 발생했다.

테스트 전용 이미지를 프로젝트에 넣는 것은 바람직하지 않다고 생각했다.

또한, 테스트 전용 메소드를 작성하는 것도 바람직하지 않다고 생각했다.

이를 해결하기 위해 null 이 아니면서, isEmpty() = true를 반환하는 MultipartFile 을 만들어야 했다.

해결

검색을 통해 MockMultipartFile을 활용하는 방법을 찾았다.

기존 create 메소드를 고치는 방법이 존재할 것이라 생각이 들었지만,

단기간에 해결을 해야했고, 해결 방법이 바로 떠오르지 않아서 MockMultipartFile 을 사용했다.

기존 코드

@Test
@DisplayName("게시글 작성 테스트(구매자 회원)")
void createTest() {
    // WHEN
    Post post = postService.create(postRequest, buyer, null).getData();

    // THEN
    assertTrue(postRepository.findById(post.getId()).isPresent());
    assertThat(postRepository.findById(post.getId()).get().getPosterId()).isEqualTo(buyer.getId());
    assertThat(postRepository.findById(post.getId()).get().getTitle()).isEqualTo(postRequest.getTitle());
    assertThat(postRepository.findById(post.getId()).get().getContent()).isEqualTo(postRequest.getContent());
}

수정 후 코드

@Test
@DisplayName("게시글 작성 테스트(구매자 회원)")
void createTest() {
    // GIVEN
    MockMultipartFile emptyFile = new MockMultipartFile("imageFile", new byte[0]);

    // WHEN
    Post post = postService.create(postRequest, buyer, emptyFile).getData();

    // THEN
    assertTrue(postRepository.findById(post.getId()).isPresent());
    assertThat(postRepository.findById(post.getId()).get().getPosterId()).isEqualTo(buyer.getId());
    assertThat(postRepository.findById(post.getId()).get().getTitle()).isEqualTo(postRequest.getTitle());
    assertThat(postRepository.findById(post.getId()).get().getContent()).isEqualTo(postRequest.getContent());
}

알아본 바로는, 테스트를 위한 가짜 이미지 객체(MockMultipartFile)를 만들어 사용하는 방식이라고 한다.

객체를 생성할 때, isEmpty() = true 를 반환하도록 적절한 값을 매개변수에 넣었다.

이를 통해 이미지를 첨부하지 않은 상황에 대한 테스트가 가능해졌다.

[리팩토링] @NotNull vs @Column(nullable = false)

호준송 — Sat, 22 Jul 2023 18:11:15 +0900

배경

프로젝트 MyPill은 도메인을 나누었고, 독립적으로 개발을 진행했다.

전체 리팩토링 과정에서 살펴보니 @NotNull 과 @Column(nullable = false) 를 혼용해서 사용하고 있었다.

필드에 Null 값이 들어올 수 없다는 공통적인 목적을 가진 것인데,

통일시키기 이전에 두 방식의 차이가 궁금해 찾아보았다.

공통 환경

엔티티

@Entity
@Getter
@Builder
@AllArgsConstructor
@NoArgsConstructor
@Table(name = "categories")
public class Category {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    @Column(name = "category_id")
    private Long id;

    //이 컬럼에 not null 조건을 추가한다.
    @Column(name = "name")
    private String name;
}

실제 프로젝트에 쓰인 Category 엔티티(Categories 테이블)를 생성한 후 not null을 가지는 두 방식을 비교했다.

DB 저장 메소드

public void nullTest() {
        categoryRepository.save(new Category());
    }

name = null 인 객체를 저장하는 메소드를 실행해 디버깅하며 로그를 살펴봤다.

실행 환경

로컬 dev 환경으로, ddl-auto : create 인 상황이다.

@NotNull

@NotNull
@Column(name = "name")
private String name;

name 컬럼에 @NotNull을 추가한 경우이다.

프로젝트 실행 시 스키마 생성

DDL에 의해 name 컬럼에 not null 제약조건이 설정된 것을 확인할 수 있다.

null 값 저장 메서드 실행 시

jakarta.validation.ConstraintViolationException이 발생한 것을 확인할 수 있다.
save 메소드에 해당하는 insert 쿼리가 실행되지 않았다는 것을 확인할 수 있다.

@Column(nullable = false)

@Column(name = "name", nullable = false)
private String name;

name 컬럼에 nullable = false를 추가한 경우이다.

프로젝트 실행 시 스키마 생성

@NotNull과 동일하게 name 컬럼에 not null 제약조건이 설정된 것을 확인할 수 있다.

null 값 저장 메서드 실행 시

@NotNull 과 달리, insert 문이 실행되었다.
이후 SQLIntegrityConstraintViolationException 이 발생한 것을 확인할 수 있다.

정리

두 방식 모두 null 값에 대해 오류를 발생시킨다.
@NotNull이 더 추천된다고 한다.
- 더 앞선 단계에서 예외를 검출하기 때문에 안전하다고 한다.

참고

Hibernate @NotNull vs @Column(nullable = false) | Baeldung

@NotNull vs @Column(nullable = false)

[트러블 슈팅] - MultipartFile 예외 처리

호준송 — Thu, 20 Jul 2023 19:57:11 +0900

배경

프로젝트에서 게시글 작성 시 이미지를 첨부하는 기능을 추가했다.

이미지는 MultipartFile의 형태로, 프론트로부터 받아왔다.

기존 게시글 작성 메서드에 매개변수로 MultipartFile을 추가했고, 이미지를 처리하는 코드를 추가했다.

이미지를 추가하지 않은 게시글이 존재하도록 설계했기 때문에,

이미지를 추가했을 때에만 이미지 처리 작업이 진행되어야 했다.

따라서, 이미지 추가 여부를 확인하는 예외 처리 코드를 작성했다.

그러나, 코드가 원하는 방식으로 작동하지 않았다.

문제 상황

이미지를 처리하지 않았을 때 MultipartFile 이 null 값을 반환할 것이라고 예상했다.

따라서, 예외 처리를 위해 다음과 같은 코드를 추가하였다.

if(multipartFile != null){
	//이미지 처리 작업
}

그러나, 원하는대로 작동하지 않았다.

디버깅을 해보니, multipartFile은 null이 아니었다.

값을 가지는 객체로, 아래 스크린샷의 결과가 나왔다.

예외 상황을 null 값이 아닌 다른 기준으로 처리해야 했다.

해결

기본적으로 제공하는 MultipartFile 인터페이스에 들어가서 살펴봤다.

getName(), getSize()등 다양한 메서드가 존재했는데,

이미 boolean 값으로 선언된 isEmpty()를 사용하기로 했다.

MultipartFile의 content가 없거나 파일이 비어있을 경우 0을 반환한다고 한다.

null값을 비교하는 대신에 isEmpty()를 사용하여 해결했다.

기존 코드

@Transactional
    public RsData<Post> create(PostRequest postRequest, Member member, MultipartFile multipartFile) {
        if (member == null) {
            return RsData.of("F-1", "존재하지 않는 회원입니다.");
        }
        Post post = new Post(postRequest, member.getId(), new ArrayList<>());
        if (multipartFile != null) {
            AmazonS3Dto amazonS3ImageDto = imageService.saveImageOnServer(multipartFile, post);
            Image image = new Image(amazonS3ImageDto, multipartFile, post);
            post.addImage(image);
        }
        postRepository.save(post);
        return RsData.of("S-1", "질문 등록이 완료되었습니다.", post);
    }

수정 후 코드

@Transactional
    public RsData<Post> create(PostRequest postRequest, Member member, MultipartFile multipartFile) {
        if (member == null) {
            return RsData.of("F-1", "존재하지 않는 회원입니다.");
        }
        Post post = new Post(postRequest, member.getId(), new ArrayList<>());
        if (!multipartFile.isEmpty()) {
            AmazonS3Dto amazonS3ImageDto = imageService.saveImageOnServer(multipartFile, post);
            Image image = new Image(amazonS3ImageDto, multipartFile, post);
            post.addImage(image);
        }
        postRepository.save(post);
        return RsData.of("S-1", "질문 등록이 완료되었습니다.", post);
    }

[개선 작업] @Value → @ConfigurationProperties

호준송 — Thu, 20 Jul 2023 03:14:50 +0900

배경

프로젝트 기간이 끝난 후 서면 피드백을 받았다.

발표 직후 받은 피드백을 포함하여 정리한 내용은 다음과 같다.

1. 테스트가 실패했다.
2. @Value 대신 @ConfigurationProperties 사용을 고려해 봐라

실제로, 시크릿 키를 담은 “Application-secret.yml”이 없을 때 테스트가 실패했다.

테스트 실패 원인은 @Value 때문이 아니었고, 간단하게 해결했다.

따라서, @ConfigurationProperties에 대해 알아보고 적용했다.

추가 학습

@Value VS @ConfigurationProperties

Relaxed Binding

@Value는 정확히 일치하게 적어야 해당 값을 매칭할 수 있다.
@Configuration은 정확히 일치하지 않아도 특정 규칙을 통해 해당 값을 매칭한다.

api:
	business-register-number: 'SECRET KEY'

위 .yml 코드에 대해 다음 4가지 규칙이 허용된다.

api.business-register-number	properties, yml 권장 표기법
api.businessRegisterNumbe	표준 카멜 케이스 문법
api.business_register_number	properties, yml 에서 사용 가능한 표기법
API_BUSINESS_REGISTER_NUMBER	시스템 환경 변수일 경우 권장 표기법

SpEL

SpEL은 꽤 복잡하고 다양하다.
주제와 관련이 거의 없기에 링크로 남긴다.

SpEL(Spring Expression Language)에 대해서 간단하게 아라보자!

객체 그래프를 조회하고 조작하는 기능을 제공Unified El과 비슷하지만, 메소드 호출을 지원하며 ,문자열 템플릿 기능도 제공OGNL, MVEL, JBOss EL 등 자바에서 사용할 수 있는 여러 EL이 있지만 SpEL은 모

velog.io

개선 내역

yml 파일

api:
	business-register-number: 'SECRET KEY'
	nutrient-business-register-number: 'SECRET KEY'

기존 코드

@Value 사용

@Service
public class CertificationService {

    @Value("${api.business-register-number}")
    private String BUSINESS_SERVICE_KEY;

    @Value("${api.nutrient-business-register-number}")
    private String NUTRIENT_BUSINESS_SERVICE_KEY;

		/*
		나머지 동작 코드
		*/
}

수정 후 코드

@ConfigurationProperties 적용

@Getter
@Setter
@RequiredArgsConstructor
@Component
@ConfigurationProperties(prefix = "custom.api")
public class CertificateProperties {
	  private String businessRegisterNumber;
		private String nutrientBusinessRegisterNumber;
}

어노테이션 추가
- @ConfigurationProperties(prefix = "custom.api")
- 해당 어노테이션을 사용해도 스프링 빈으로 등록되지 않는다.
빈 등록
- 다음 두 가지 방법 중 하나만 사용해도 된다.
  1. 해당 properties 클래스에 @Component 추가
  2. 메인 클래스에 @EnableConfigurationProperties(CertificateProperties.class) 추가
@Getter & @Setter 추가
@RequiredArgsConstructor 추가

이후 서비스 단에서 주입받아 사용

@Service
@RequiredArgsConstructor
public class CertificationService {
		private final CertificateProperties certificateProperties;

		/*
		나머지 동작 코드
		*/
}

CertificateProperties 클래스 주입
Getter 사용
- certificateProperties.getBucketName() 형식으로 값 사용

참고

Spring, Spring Boot와 Properties ? 외부 설정

https://mangkyu.tistory.com/207

[JAVA/자바][프로그래머스 181893] 배열 조각하기

호준송 — Fri, 21 Apr 2023 12:37:37 +0900

문제

https://school.programmers.co.kr/learn/courses/30/lessons/181893

프로그래머스

코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.

programmers.co.kr

접근 방법

인덱스가 헷갈려서 노트에 적어가며 풀었다.

접근 방법 1

매 query 작업마다 배열을 갱신한다.

한 작업마다 O(N)의 시간이 소요된다.
시간이 오래 걸리고 코드가 복잡해진다.

접근 방법 2

단순하게 매 작업마다 시작점 포인터(start)와 끝점 포인터(end)를 갱신 한다.

한 작업마다 O(1)의 시간 이 소요된다.
시간 소요가 적고 코드도 간단하다.

이후 포인터를 이용해 필요한 배열을 추출한다.

접근 방법 2로 진행하였다.

풀이

시작 포인터를 start, 끝 포인터를 end 로 선언하고 초기화한다.
반복문을 돌린다.
1. query의 인덱스(i)가 짝수일 때
  - 끝 포인터는 시작 포인터에서 query[i] - 1 만큼 떨어 진 곳에 위치하게 된다.
  - 각 query[i] 값은 남아있는 arr의 길이 보다 작다고 제한되어 있다.
2. query의 인덱스(i)가 홀수일 때
  - 시작 포인터는 이전 시작 포인터에서 query[i] 만큼 떨어진 곳에 위치하게 된다.
  - 각 query[i] 값은 0보다 크거나 같다고 제한되어 있다.
Arrays.copyOfRange() 를 사용해 배열을 복사한다.

코드

import java.util.*;

class Solution {
    public int[] solution(int[] arr, int[] query) {
        int start = 0;
        int end = arr.length - 1;
        for (int i = 0; i < query.length; i++) {
            if (i % 2 == 0) {
                end = start + query[i] - 1;
            } else {
                start += query[i];
            }
        }

        if (start > end) {
            return new int[]{-1};
        }
        return Arrays.copyOfRange(arr, start, end + 1);
    }
}

[JAVA/자바][프로그래머스 12946] 하노이의 탑

호준송 — Wed, 19 Apr 2023 10:33:10 +0900

문제

https://school.programmers.co.kr/learn/courses/30/lessons/12946

프로그래머스

programmers.co.kr

접근 방법

"하노이의 탑"은 규칙이 존재하는 대표적인 재귀 문제다.

점화식을 세워서 설계하면 쉽게 구현할 수 있다.

(출발지, 경유지, 도착지) 3개의 위치를 선언한다.

"N개, 출발지 -> 도착지"의 경우

"N-1개, 출발지 -> 경유지" + "1개, 출발지 -> 도착지" + "N-1개, 경유지 -> 도착지"의 규칙을 가진다.

이를 점화식으로 표현하고 코드로 구현한다.

풀이

이동 정보를 저장할 자료형 List<int[]> arr 을 선언한다.
이동을 의미하는 메소드 move(int cnt, int start, int mid, int end){} 를 선언한다.
- cnt개를 start에서 end로 이동한다(필요 시 mid를 경유하며)
  - cnt : 이동할 원판 개수
  - start : 출발지
  - mid : 경유지
  - end : 도착지
재귀를 이용한 점화식을 작성한다.
- move(cnt - 1, start, end, mid);
- arr.add(new int[]{start, end});
- move(cnt - 1, mid, start, end);

4. 코드를 완성한다.

코드

import java.util.*;

class Solution {
    private static List<int[]> arr = new ArrayList<>();

    public int[][] solution(int n) {
        move(n, 1, 2, 3);
        int[][] answer = arr.stream()
                .toArray(int[][]::new);
        return answer;
    }

    private static void move(int cnt, int start, int mid, int end) {
        if (cnt == 0) {
            return;
        }
        move(cnt - 1, start, end, mid);
        arr.add(new int[]{start, end});
        move(cnt - 1, mid, start, end);
    }
}

[JAVA/자바][백준 14939] 불 끄기

호준송 — Tue, 18 Apr 2023 11:39:15 +0900

문제

https://www.acmicpc.net/problem/14939

14939번: 불 끄기

전구 100개가 10×10 정사각형 모양으로 늘어서 있다. 전구에 달린 스위치를 누르면 그 전구와 위, 아래, 왼쪽, 오른쪽에 있는 전구의 상태도 바뀐다. 전구 100개의 상태가 주어지면 모든 전구를 끄

www.acmicpc.net

접근 방법

무작정 구현을 시작했는데 해결하지 못했다. 이후 검색을 해보며 힌트를 얻었다.

비트마스킹을 이용한 풀이방법밖에 찾지 못했다. 나는 비트마스킹을 잘 모르기에 비트마스킹을 사용하지 않고 그냥 빡세게 구현했다.

원리는 이렇다.

같은 스위치를 여러 번 누르지 않는다.
- 같은 행위를 반복하면 최적의 해를 구할 수 없다.
완전 탐색으로 100개의 전구를 켜고 끄는 경우를 찾으면 O(2^100)이다.
- 시간초과가 발생한다.
한 가로 줄은 맞닿아 있는 가로 줄에만 직접적으로 영향을 끼친다.
- 즉, 다음 가로 줄에서 앞선 가로줄의 불을 모두 꺼줄 수 있다.

따라서, 첫 가로 줄의 행동이 정해지면 자동으로 2번째 가로 줄의 행동이 정해지고, 10번째 줄까지 정해지게 된다.

이 경우에는 O(2^10) * 나머지 줄 계산(= O(90) * 한 칸 계산)으로, 완전 탐색에 비해 시간을 많이 단축한다.

이전 가로 줄의 전구를 모두 껐기 때문에, 마지막 줄에 대해서만 확인하면 된다.

마지막 줄에 불이 켜진 전구가 존재하면 불가능한 경우에 해당한다.
모두 불이 꺼져 있으면 성공한 경우에 해당한다.

풀이

첫 번째 줄의 모든 경우의 수를 구해 List에 저장한다.
- makeFirstLine()
첫 번째 가로 줄의 모든 경우의 수(2^10 = 1024)에 대해 탐색한다.
각 탐색의 경우는 독립적이므로, tmpBoard에 board를 복사한다.
- copy()
해당하는 경우에 맞게 1번째 가로줄의 스위치를 누른다.
- cnt++를 통해 스위치 클릭 수 계산
- pushSwitch()
  - dX, dY 배열을 통해 주변 전구 상태 갱신
2 ~ 10 번째 줄에서 이전 줄에 대한 소등 작업을 진행한다.
마지막 줄을 확인하여 해당 경우를 마무리 한다.
- cannotMake 확인
3 ~ 6 번 작업을 2번에 해당하는 경우만큼 모두 탐색한다.

코드

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.util.*;

public class Main {
    private static int[] dX = {0, -1, 0, 1, 0};
    private static int[] dY = {0, 0, -1, 0, 1};
    private static char[][] board;
    private static char[][] tmpBoard;
    private static List<String> firstLine = new ArrayList<>();

    public static void main(String[] args) throws IOException {
        BufferedReader br = new BufferedReader(new InputStreamReader(System.in));

        board = new char[10][10];
        for (int i = 0; i < 10; i++) {
            board[i] = br.readLine().toCharArray();
        }
        tmpBoard = new char[10][10];

        int answer = 101;

        makeFirstLine(1, "", 1);
        makeFirstLine(1, "", 2);

        for (String e : firstLine) {
            int cnt = 0;
            copy();

//1번째 줄 선택for (int i = 0; i < 10; i++) {
                if (e.charAt(i) == 'O') {
                    pushSwitch(0, i);
                    cnt++;
                }
            }

//2~9번쨰 줄 선택for (int i = 1; i < 10; i++) {
                for (int j = 0; j < 10; j++) {
                    if (tmpBoard[i - 1][j] == 'O') {
                        pushSwitch(i, j);
                        cnt++;
                    }
                }
            }

//10번째 줄 확인if (!cannotMake()) {
                answer = Math.min(answer, cnt);
            }
        }
        if (answer == 101) {
            System.out.println(-1);
            return;
        }
        System.out.println(answer);
    }

    private static void makeFirstLine(int depth, String output, int mode) {
        if (mode == 1) {
            output += 'O';
        } else {
            output += 'X';
        }
        if (depth == 10) {
            firstLine.add(output);
            return;
        }
        for (int i = 0; i < 2; i++) {
            makeFirstLine(depth + 1, output, i);
        }
    }

    private static void copy() {
        for (int i = 0; i < 10; i++) {
            for (int j = 0; j < 10; j++) {
                tmpBoard[i][j] = board[i][j];
            }
        }
    }

    private static void pushSwitch(int x, int y) {
        for (int k = 0; k < 5; k++) {
            int nextX = x + dX[k];
            int nextY = y + dY[k];
            if (nextX >= 0 && nextX < 10 && nextY >= 0 && nextY < 10) {
                if (tmpBoard[nextX][nextY] == 'O') {
                    tmpBoard[nextX][nextY] = '#';
                } else {
                    tmpBoard[nextX][nextY] = 'O';
                }
            }
        }
    }

    private static boolean cannotMake() {
        boolean flag = false;
        for (int i = 0; i < 10; i++) {
            if (tmpBoard[9][i] == 'O') {
                flag = true;
                break;
            }
        }
        return flag;
    }
}

브라우저 URL 검색 과정

호준송 — Thu, 13 Apr 2023 10:37:52 +0900

www.github.com을 브라우저에 입력하고 엔터를 쳤을 때, 네트워크 상 어떤 일이 일어나는가?

캐싱, DNS, 라우팅, ARP, 초기연결을 거쳐 컨텐츠를 다운받게 되고 이 후 브라우저 렌더링 과정을 거쳐 깃허브 화면이 나타나게 된다.
“캡슐화”, “비캡슐화” 과정을 거쳐서 이뤄지게 된다.

Web Cache

사용자가 같은 웹 페이지를 여러 번 요청할 경우, 브라우저는 이미 다운로드한 자원을 다시 서버에서 다운로드하지 않고 캐시된 자원을 사용하여 웹 페이지를 보여준다.

페이지 로딩 속도가 빨라지고, 네트워크 대역폭을 절약할 수 있다.

1. Browser Cache(사설 브라우저 캐시)

클라이언트 로컬 컴퓨터에 저장되는 캐싱 방식이다.
방문한 웹 페이지의 이미지, 스크립트, 스타일 시트 등의 자원들을 저장하여 캐싱역할을 한다.
한 개인에 한정되어 있어 자원을 공유하지않는다.
- 캐시가 쌓여서 로컬 디스크 공간을 많이 차지할 수 있어 개인이 삭제할 수 있다.
“뒤로 가기”에 많이 사용된다.

2. Proxy Cache(프록시 캐시)

클라이언트와 서버 사이에 위치한 네트워크 상(프록시 서버)에서 동작하는 캐시이다.
- 클라이언트의 요청을 대신 받아 서버로 전달한다.
- 서버의 응답을 클라이언트에게 전달한다.
- 동일한 요청이 올 시 캐시 데이터를 반환한다.
다수의 웹 브라우저가 공유하여 사용할 수 있다.
CDN(Content Delivery Network)은 프록시 캐시에 해당한다.

DNS(Domain Name System)

브라우저는 DNS 서버를 통해 도메인 주소에 해당하는 IP주소를 받는다.

캐시를 먼저 확인한 후 Cache Miss가 발생하면 DNS 서버에 접근한다.
일반적으로 UDP를 사용한다.

Domain(도메인) 주소 : IP주소를 다른 이름(닉네임)으로 바꾼 주소

DNS 상세 내용은 추후 업로드 예정

라우팅(Routing)

DNS에서 받은 IP주소를 기반으로 해당 목적지까지 라우팅 테이블, 서브네트워크 등을 거쳐 찾아가는 과정이다.

hop by hop 통신이라고 부르기도 한다.
- hop(홉) : ‘건너뛰는 모습’이라는 뜻을 가진다.

자세한 라우팅 과정, 알고리즘은 추후에 업로드 예정

ARP(Address Resolution Protocol)

라우팅을 통해 찾은 IP(논리 주소)를 바탕으로 ARP를 통해 서버의 MAC 주소(물리 주소)를 찾는다.

모든 장치는 MAC 주소를 가지고 있다.
전송의 마지막 과정은 IP주소가 아닌, MAC 주소를 통해 이루어진다.

ARP는 IP 주소를 바탕으로 MAC 주소를 찾는 프로토콜을 말한다.

ARP Request - ARP Reply 단계를 거친다.

ARP Request

A(송신자)가 목적지 IP Address를 지정해 BroadCast 방식으로 패킷을 보낸다.
- D(IP Address에 해당하는 컴퓨터)에게 MAC 주소를 요청한다.
- 응답이 오기 전까지 D가 해당하는 컴퓨터인지 모르는 상태다.

ARP Reply

D(목적지 IP에 해당하는 컴퓨터)는 패킷을 수신 후 자신의 MAC 주소를 A에게 전송한다.
- Unicast 방식을 사용한다.
A는 받은 MAC 주소를 자신의 ARP 테이블에 저장한다.
- 이후 ARP 테이블의 물리 주소를 이용하여 데이터를 전송한다.

초기 연결

TCP 3-Way Handshake, SSL, TLS 연결 등을 통해 연결을 설정한다.

TCP 3-Way Handshake와 SSL, TLS는 추후 업로드 예정

TCP 3-Way Handshake는 업로드 완료

SSL, TLS 연결은 업로드 예정

콘텐츠 다운로드

연결 후 브라우저는 서버에게 HTTP 요청을 보낸다.

HTTP 메소드와 요청 URI, HTTP 버전을 포함한다.

브라우저로부터 요청을 받으면,웹서버는 페이지의 로직이나 데이터베이스(DB)의 연동을 위해 WAS에게 이들의 처리를 요청한다.
WAS는 이 요청을 받아 동적인 페이지처리를 담당하고, DB에서 필요한 데이터 정보를 받아서 파일을 생성한다.
작업처리 결과를 웹서버로 전송하고, 웹서버는 브라우저에게 리소스(컨텐츠)를 전송한다.

WAS는 사용자의 컴퓨터나 장치에 웹어플리케이션을 수행해주는 미들웨어를 말한다.

Web Server/WAS 에 대한 추가 설명은 하단의 질문을 참고하길 바란다.

브라우저 렌더링

HTML, CSS, JS, 이미지 등 웹 페이지에 포함된 모든 요소들을 화면에 보여주는 작업을 말한다.

브라우저 렌더링은 브라우저마다 방식이 다르다. (크롬 기준으로 설명)
Rendering Engine에 의해 동작한다.

1. DOM(Document Object Model) Tree 생성

어휘와 구문을 분석하여 HTML 문서를 파싱하고, 파싱 트리를 생성한다.
- Parsing : 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것
파싱 트리를 기반으로 DOM 요소와 속성 노드를 가지는 DOM 트리를 생성한다.

2. CSSOM(CSS Object Model) Tree 생성

어휘와 구문을 분석하여 CSS 문서를 파싱한다.
CSSOM 트리를 생성한다.

3. Render Tree(DOM+CSSOM) 생성

1, 2단계에서 생성된 DOM Tree와 CSSOM Tree를 매칭시켜 Render Tree를 구성한다.

4. Layout

Layout 단계에서는 Render Tree를 화면에 어떻게 배치해야 할 것인지 노드의 정확한 위치와 크기를 계산한다.

루트부터 노드를 순회하면서 노드의 정확한 크기와 위치를 계산하고 Render Layout을 생성한다.
만약 크기 값을 %로 지정하였다면, Layout 단계에서 % 값을 계산해서 픽셀 단위로 변환한다.

5. Paint

Paint 단계에서는 Layout을 이용해 요소의 색상,배경, 글꼴 등을 고려하여 화면상의 실제 픽셀로 변환한다.

이때 픽셀로 변환된 결과는 하나의 레이어가 아니라 여러 개의 레이어로 관리된다.
스타일이 복잡할수록 Paint 시간이 늘어난다.
- 예를 들어, 단색 배경의 경우 시간과 작업이 적게 필요하지만, 그림자 효과는 시간과 작업이 더 많이 필요하다.

6. Composite

Composite 단계에서는 Paint 단계에서 생성된 레이어들을 합성하여 하나의 이미지로 렌더링한다.

실제 화면으로 출력한다.

캡슐화 & 비캡슐화

데이터 송신과 수신 과정에서 캡슐화와 비캡슐화가 일어난다.

데이터를 송신할 때 여러 네트워크 Layer를 거치면서 캡슐화된다.
- 각 Layer에서 헤더 필드가 추가 된다.
데이터를 수신할 때 여러 네트워크 Layer를 거치면서 비캡슐화된다.
- 각 Layer에서 헤더 필드를 해석하며 데이터를 추출한다.

자세한 내용은 https://hojunking.tistory.com/112 참고

질문

Q. Web Server와 Web Application Server의 차이에 대해 설명해 주세요.

Web Server

Web Server의 개념

하드웨어 측면
- Web Server가 설치되어 있는 컴퓨터
소프트웨어 측면
- 정적인 컨텐츠( .html, .jpeg, .css 등)을 제공하는 컴퓨터 프로그램

Web Server의 기능

HTTP 프로토콜을 기반으로 하여 클라이언트의 요청을 서비스하는 기능을 담당한다.
기능 1
- 정적인 컨텐츠를 제공한다.
- WAS를 거치지않고 바로 자원을 제공한다.
기능 2
- 동적인 컨텐츠 제공을 위한 요청을 전달한다.
- 요청을 WAS에 보내고, WAS가 처리한 결과를 Client에게 전달(응답)한다.
- 클라이언트는 일반적으로 웹 브라우저를 말한다.

예시

Apache Server, Nginx 등

WAS(Web Application Server)

WAS의 개념

DB 조회나 다양한 로직 처리를 요구하는 동적인 컨텐츠를 제공하기 위해 만들어진 Application Server를 말한다.

HTTP를 통해 컴퓨터나 장치에 애플리케이션을 수행해주는 미들웨어(소프트웨어 엔진)이다.
“웹 컨테이너(Web Container)” 혹은 “서블릿 컨테이너(Servlet Container)”라고도 불린다.
- Container란 JSP, Servlet을 실행시킬 수 있는 소프트웨어를 말한다.
- 즉, WAS는 JSP, Servlet 구동 환경을 제공한다.

WAS의 역할

Web Server 기능들을 구조적으로 분리하여 처리하고자하는 목적으로 제시되었다.
분산 트랜잭션, 보안, 메시징, 쓰레드 처리 등의 기능을 처리하는 분산 환경에서 사용된다.
주로 DB 서버와 같이 수행된다.

WAS의 주요 기능

프로그램 실행 환경과 DB 접속 기능 제공
여러 개의 트랜잭션(논리적인 작업 단위) 관리 기능
업무를 처리하는 비즈니스 로직 수행

WAS의 예

Tomcat, JBoss, Jeus, Web Sphere 등

Web Server가 필요한 이유?

클라이언트(웹 브라우저)에 이미지 파일(정적 컨텐츠)을 보내는 과정을 생각해보자.
- 이미지 파일과 같은 정적인 파일들은 웹 문서(HTML 문서)가 클라이언트로 보내질 때 함께 가는 것이 아니다.
- 클라이언트는 HTML 문서를 먼저 받고 그에 맞게 필요한 이미지 파일들을 다시 서버로 요청하면 그때서야 이미지 파일을 받아온다.
- Web Server를 통해 정적인 파일들을 Application Server까지 가지 않고 앞단에서 빠르게 보내줄 수 있다.
따라서 Web Server에서는 정적 컨텐츠만 처리하도록 기능을 분배하여 서버의 부담을 줄일 수 있다.

WAS가 필요한 이유?

웹 페이지는 정적 컨텐츠와 동적 컨텐츠가 모두 존재한다.
- 사용자의 요청에 맞게 적절한 동적 컨텐츠를 만들어서 제공해야 한다.
- 이때, Web Server만을 이용한다면 사용자가 원하는 요청에 대한 결과값을 모두 미리 만들어 놓고 서비스를 해야 한다.
- 하지만 이렇게 수행하기에는 자원이 절대적으로 부족하다.
따라서 WAS를 통해 요청에 맞는 데이터를 DB에서 가져와서 비즈니스 로직에 맞게 그때 그때 결과를 만들어서 제공함으로써 자원을 효율적으로 사용할 수 있다.

그렇다면 WAS가 Web Server의 기능도 모두 수행하면 되지 않을까?

기능을 분리하여 서버 부하 방지
- WAS는 DB 조회나 다양한 로직을 처리하느라 바쁘기 때문에 단순한 정적 컨텐츠는 Web Server에서 빠르게 클라이언트에 제공하는 것이 좋다.
- WAS는 기본적으로 동적 컨텐츠를 제공하기 위해 존재하는 서버이다.
- 만약 정적 컨텐츠 요청까지 WAS가 처리한다면 정적 데이터 처리로 인해 부하가 커지게 되고, 동적 컨텐츠의 처리가 지연됨에 따라 수행 속도가 느려진다.
- 즉, 이로 인해 페이지 노출 시간이 늘어나게 될 것이다.
물리적으로 분리하여 보안 강화
- SSL에 대한 암복호화 처리에 Web Server를 사용
여러 대의 WAS를 연결 가능
- Load Balancing을 위해서 Web Server를 사용
- fail over(장애 극복), fail back 처리에 유리
- 특히 대용량 웹 어플리케이션의 경우(여러 개의 서버 사용) Web Server와 WAS를 분리하여 무중단 운영을 위한 장애 극복에 쉽게 대응할 수 있다.
- 예를 들어, 앞 단의 Web Server에서 오류가 발생한 WAS를 이용하지 못하도록 한 후 WAS를 재시작함으로써 사용자는 오류를 느끼지 못하고 이용할 수 있다.
여러 웹 어플리케이션 서비스 가능
- 예를 들어, 하나의 서버에서 PHP Application과 Java Application을 함께 사용하는 경우
기타
- 접근 허용 IP 관리, 2대 이상의 서버에서의 세션 관리 등도 Web Server에서 처리하면 효율적이다.