코딩테스트 feat. 자바

<p>기본으로 import는 다음 두 개를 넣어놓고 시작하자.</p><pre spellcheck="false"><code class="language-java">import java.util.*;
import java.io.*;</code></pre><p></p><p>IOException을 붙여주지않으면, BufferedReader를 사용할 때 readLine()에서 에러가 난다. <code spellcheck="false">throws IOException</code>도 붙여주자 😙</p><pre spellcheck="false"><code class="language-java">public static void main(String[] args) throws IOException</code></pre><p></p><h1>입력 받기</h1><p>소프티어에서는 입력받는 것까지 나오므로 준비하는 것을 추천한다.</p><pre spellcheck="false"><code class="language-java">BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
int n = Integer.parseInt(br.readLine());

// 4 5 7 같이 입력받아야할 때
StringTokenizer st = new StringTokenizer(br.readLine());
int x = Integer.parseInt(st.nextToken());
int y = Integer.parseInt(st.nextToken());</code></pre><p></p><h1>배열</h1><h2>1차원 배열 정의</h2><p>기본적인 1차열 배열의 정의이다. <code spellcheck="false">길이가 고정</code>이라는 점이 중요하다!</p><pre spellcheck="false"><code class="language-java">int[] arr = {5, 0, 2, 3, 4, 1};</code></pre><p>아래와 같이 전역 변수로 선언 후, 함수 안에서 초기화하는 경우도 많다.</p><pre spellcheck="false"><code class="language-java">public class Main {
    static boolean[] visited;
    
    public static void main(String[] args) throws IOException {
        visited = new boolean[n+1];
...
</code></pre><p></p><h2>2차원 배열 정의</h2><p>다음 기본적인 2차원 배열의 정의이다. 역시 <code spellcheck="false">길이가 고정</code>이다!</p><pre spellcheck="false"><code class="language-java">int[][] arr = new int[][]{{5, 40}, {3, 50}, {1, 30}};</code></pre><p>위와 마찬가지로, 전역 변수로 선언 후, 함수 안에서 초기화하는 경우이다.</p><pre spellcheck="false"><code class="language-java">public class Main {
    static int[][] problems;
    
    public static void main(String[] args) throws IOException {
        int n = Integer.parseInt(br.readLine());
        problems = new int[n][2];
...</code></pre><p></p><h1>리스트</h1><p>그럼, 배열의 크기를 모를 때는 어떻게 할까? <code spellcheck="false">길이가 가변</code>인 리스트를 사용한다. 보통 그래프 문제에서 많이 쓰인다는 걸 알아두자.</p><p>아래 경우는 행의 수는 고정이고, 열의 수는 가변인 2차원 배열이다.</p><pre spellcheck="false"><code class="language-java">public class Main {
    static List&lt;Integer&gt;[] graph;
    
    public static void main(String[] args) throws IOException {
        int n = Integer.parseInt(br.readLine());
        graph = new ArrayList[n+1];
        for(int i = 0; i &lt; n+1; i++) {
	    relation[i] = new ArrayList&lt;&gt;();
        }

...</code></pre><p></p><p>그렇다면, 행의 수는 가변이고, 열의 수는 고정인 경우는 어떨까?</p><pre spellcheck="false"><code class="language-java">public class Main {
    static List&lt;int[]&gt; graph;
    
    public static void main(String[] args) throws IOException {
        int n = Integer.parseInt(br.readLine()); 
        graph = new ArrayList&lt;&gt;(); // 가변 리스트 초기화

        for (int i = 0; i &lt; n; i++) {
            st = new StringTokenizer(br.readLine());
            int node1 = Integer.parseInt(st.nextToken());
            int node2 = Integer.parseInt(st.nextToken());
            graph.add(new int[]{node1, node2}); // 고정된 배열 
        }

...</code></pre><p></p><p>그럼 행과 열 둘다 가변일 경우는? 명확하게 ArrayList를 사용할 것이라면, ArrayList로 선언해도 좋다.</p><pre spellcheck="false"><code class="language-java">public class Main {
    static List&lt;List&lt;Integer&gt;&gt; graph;
 // static ArrayList&lt;ArrayList&lt;Integer&gt;&gt; graph;
    
    public static void main(String[] args) throws IOException {
        graph = new ArrayList&lt;&gt;(); 

        for (int i = 0; i &lt; n; i++) {
            graph.add(new ArrayList&lt;&gt;()); // 각 행도 ArrayList로 초기화
        }

...</code></pre><p></p><h1>배열 슬라이싱</h1><pre spellcheck="false"><code class="language-java">public static void main(String[] args) {
    int[] arr = {0, 1, 2, 3, 4, 5};
    arr = Arrays.copyOfRange(arr, 2, 4); // 인덱스 2~3까지 슬라이싱
    System.out.println(Arrays.toString(arr));

    // result : [2, 3]
}</code></pre><p></p><h1>배열 중복된 값 제거</h1><pre spellcheck="false"><code class="language-java">public static void main(String[] args) {
    int[] arr = {0, 1, 2, 3, 4, 5, 5, 1, 2, 3};
    // 중복 제거 후 다시 배열에 넣어줘야함
    arr = Arrays.stream(arr).distinct().toArray(); 
    System.out.println(Arrays.toString(arr));

    // result : [0, 1, 2, 3, 4, 5]
}</code></pre><p></p><h1>배열 정렬</h1><h2>오름차순 정렬</h2><pre spellcheck="false"><code class="language-java">public static void main(String[] args) {
    int[] arr = {5, 3, 2, 1, 4, 9, 4, 6};
    Arrays.sort(arr); // 오름차순 정렬 
    System.out.println(Arrays.toString(arr));

    // result : [1, 2, 3, 4, 4, 5, 6, 9]

    int[] arr = {5, 3, 2, 1, 4, 9, 4, 6};
    Arrays.sort(arr, 1, 4); // 인덱스 1~3까지 오름차순 정렬
    System.out.println(Arrays.toString(arr));
 
    // reulst : [5, 1, 2, 3, 4, 9, 4, 6]


}</code></pre><p></p><h2>내림차순 정렬</h2><p><code spellcheck="false">Collections.reverseOrder()</code>는 Comparable을 구현한 객체만 정렬할 수 있기 때문에 int형에서 Integer로 변환하여 사용해야한다. 배열에 -1을 곱한 뒤, 오름차순 정렬하는 방법도 있다.</p><pre spellcheck="false"><code class="language-java">public static void main(String[] args) {
    int[] arr = {5, 3, 2, 1, 4, 9, 4, 6};
    Integer[] arr2 = Arrays.stream(arr).boxed().toArray(Integer[]::new);
    Arrays.sort(arr2, Collections.reverseOrder()); // 내림차순 정렬
    System.out.println(Arrays.toString(arr2));

    // result : [9, 6, 5, 4, 4, 3, 2, 1]</code></pre><p></p><h2>2차원 배열 특정 조건 기준으로 정렬</h2><pre spellcheck="false"><code class="language-java">public static void main(String[] args) {
    int[][] arr = new int[][]{{5,40}, {3, 50}, {1,30}, {2, 20}, {2, 10}};
    
    // 첫번째 숫자 기준 오름차순
    Arrays.sort(arr, Comparator.comparingInt((int[] o) -&gt; o[0])); 
    
    // 첫번째 숫자 기준 내림차순
    Arrays.sort(arr, Comparator.comparingInt((int[] o) -&gt; o[0]).reversed()); 

    // 첫 번째 숫자를 기준으로 오름차순 정렬, 첫 번째 숫자가 같을 경우 두 번째 숫자를 기준으로 내림차순 정렬
    Arrays.sort(arr, Comparator.comparingInt((int[] o) -&gt; o[0]).thenComparingInt((o -&gt; -o[1])));

}</code></pre><p></p><h1>리스트 정렬</h1><pre spellcheck="false"><code class="language-java">public static void main(String[] args) {
    // 초기 요소를 가진 ArrayList 생성
    List&lt;Integer&gt; arr = new ArrayList&lt;&gt;(Arrays.asList(5, 0, 2, 3, 4, 9, 1));
    
    // 오름차순    
    Collections.sort(arr); // result : [0, 1, 2, 3, 4, 5, 9]
    // 내림차순
    Collections.sort(arr, Comparator.reverseOrder()); // result : [9, 5, 4, 3, 2, 1, 0]

}</code></pre><p></p><h1>숫자와 문자열 변환</h1><pre spellcheck="false"><code class="language-java">Integer.toString(n); // 숫자 -&gt; 문자열
Integer.parseInt(s): // 문자열 -&gt; 숫자</code></pre><p></p><h1>리스트 관련 함수</h1><pre spellcheck="false"><code class="language-java">List&lt;String&gt; arr = new ArrayList&lt;&gt;();
List&lt;String&gt; arr2 = new ArrayList&lt;&gt;(Arrays.asList("부산", "대구"));
arr.add("서울"); // 리스트 가장 뒤에 서울 삽입
arr.add("제주");
arr.add(0, "대전"); // 리스트 0위치에 대전 삽입
arr.addAll(arr2); // arr2 리스트에 있는 모든 요소 arr1에 추가
arr.get(0); // 0위치의 값 반환
arr.set(1, "제주"); // 1 위치의 값을 제주로 변경
arr.indexOf("제주"); // 제주의 첫 번째 인덱스 반환
arr.lastIndexOf("제주"); // 제주의 마지막 인덱스 반환
arr.isEmpty();
arr.size(); // 길이
arr.contains("서울"); // 서울이 포함되어있으면 true
arr.containsAll(arr2); // arr에 arr2의 모든 값이 포함되어있으면 true
arr.remove(0); // 0번째 인덱스 값 삭제
arr.remove("제주"); // 해당 값 삭제
arr.removeIf(k -&gt; k.equals("부산")); // 람다식으로 arr안의 값이 부산이라는 값과 같으면 삭제
// 응용 -&gt; k % 2 ! = 0 : 홀수를 리스트에서 모두 제거 가능
arr.removeAll(arr2); // arr에서 arr2에 들어있는 모든 값 삭제
arr.retainAll(arr2); // arr에서 arr2에 들어있는 값들을 제외한 모든 값 삭제
arr.clear();</code></pre><p></p><h1>문자열 관련 함수</h1><pre spellcheck="false"><code class="language-java">String str = "abcdec";
str.length(); // 길이
str.isEmpty();
str.charAt(2); // 인덱스롤 문자 찾기 : c
str.indexOf("c"); // 문자로 첫 번째 인덱스 찾기 : 2
str.lastIndexOf("c"); // 문자로 마지막 인덱스 찾기
str.substring(2,4); // 2-3위치의 문자열 반환 : cd
str.substring(3); // 3부터 끝까지의 문자열 반환 : dec
str = str.replace('b', 'k'); // 문자 변경 : b -&gt; k
str.equals("akcdec"); // 문자열 동일하면 true : true
str.contains("de"); // 문자열 포함되어있으면 true : true
str.trim(); // 문자열 앞 뒤 공백 제거
str = str.toLowerCase(); // 소문자로
str = str.toUpperCase(); // 대문자로
str.compareTo("AKCDED"); // 사전 순 비교 : -1
String[] s = str.split(""); // 띄어쓰기 없는 문자열 한 문자씩 분리해서 String 배열로 반환
System.out.println(Arrays.toString(s)); // [A, K, C, D, E, C] 
str = String.join("", s); // String 배열을 ""안의 문자로 연결해서 다시 문자열로 반환
char[] charArr = str.toCharArray(); // 문자열 한 문자씩 분리해서 char 배열로 빈환
System.out.println(Arrays.toString(charArr)); // [A, K, C, D, E, C]
str = str.replaceAll("[^0-9]", " "); // 0-9가 아닌 아닌 것들을 공백으로 치환</code></pre><p></p><h1>StringBuilder 관련 함수</h1><p><code spellcheck="false">String</code>은 한번 만들어지면, 문자를 추가하거나 삭제가 불가능하다! 문자열을 추가해야한다면, <code spellcheck="false">StringBuilder</code>를 이용해야한다.</p><pre spellcheck="false"><code class="language-java">String str = "Hello Java!";
StringBuilder sb = new StringBuilder();

for (int i=0; i&lt;str.length(); i++) {
    // String 문자열을 Stringbuilder로 변환
    sb.append(str.charAt(i)); // append : 문자열 추가

}
		
sb.insert(1, "eee"); // 0 위치에 삽입 : Heeeello Java!
sb.delete(1, 3); // 1-2 위치의 문자열 삭제 : Heello Java!
sb.deleteCharAt(1); // 1 위치의 문자열 삭제 : Hello Java!
int index = sb.indexOf("!"); // 해당 문자 첫 번째 인덱스 찾기
sb.setCharAt(index, '~'); // !위치의 문자를 ~로 변경 : Hello Java~
sb.reverse(); // 문자열 거꾸로 뒤집기 : ~avaJ olleH
sb.setLength(2); // 문자열 길이를 2로 줄임 : ~a</code></pre><p></p><h1>배열, 문자열, 리스트의 길이</h1><ul><li><p>배열 : <code spellcheck="false">arr.length</code></p></li><li><p>리스트 : <code spellcheck="false">arr.size()</code></p></li><li><p>문자열 : <code spellcheck="false">str.length()</code></p></li></ul><p></p><p></p><blockquote><p>👀 혹시 틀린 부분이나 성능상 더 좋은 점이 있다면, 댓글에 적어주시면 감사합니다 !</p></blockquote><p></p>

코딩테스트를 위한 자바 벼락치기 

[Java] 코딩테스트 벼락치기 정리 1편

<img src="https://image.until.blog/qkrtkdwns3410/article/1734850023076.jpeg" data-width="100%" data-align="center" alt="2607"><p></p><img src="https://image.until.blog/qkrtkdwns3410/article/1734850075995.jpeg" data-width="100%" data-align="center" alt="2609"><h2>인천 송도 GDG 송도 DEV FEST 후기</h2><ul><li><p>전날부터 눈이 조금씩 오기도하고.. 상당히 추웠습니다</p></li><li><p>서울에서 인천까지 가느라고 조금 고생했었습니다 ㅠㅠ</p></li><li><p>커피 없었으면 졸았을거같네요 ㅋㅋ</p></li></ul><h2>개요</h2><ul><li><p>일단 세션은 1 20 ~ 부터 약 6시까지 였습니다</p></li><li><p>중간중간에 멘토링 관련한 세션도 있고, 그냥 개발자 성장, 혹은 자사 제품에 대한 소개류..? 비슷한게 좀 껴있었던거 같습니다.</p></li><li><p>생각외로 학생들도 좀 있었던거같네요</p></li></ul><img src="https://image.until.blog/qkrtkdwns3410/article/1734850247429.png" data-width="100%" data-align="center" alt="2610"><ul><li><p>세션은 위와 같은 식으로 진행되었습니다.</p></li><li><p>저는 백엔드이기에 백엔드 관련된 내용을 들었으며</p></li><li><p>세션1</p><ul><li><p>양수열 이사님의 컨테이너 최적화 자바 어플</p></li></ul></li><li><p>세션2</p><ul><li><p>MS advocate 유저스틴님의 Dockerfile 없이 컨테이너 이미지 만들기</p></li></ul></li><li><p>세션3</p><ul><li><p>서준수님의 개발자 성장관련</p></li></ul></li><li><p>세션 4</p><ul><li><p>송수혁님의 스프링 시큐리티 로그인 관련 적용기였습니다.</p></li></ul></li></ul><h3>일단 들어가기전 총평</h3><ul><li><p>대략적으로 기술적인 내용은 조금 아쉬웠습니다</p></li><li><p>사실 정보 전달 등의 내용이 들어가긴하였지만</p></li><li><p>자사 제품</p><ul><li><p>오라클이면 오라클 Graalvm (물론 그랄 vm 이 다른 JDK 보다 성능이 좋다는 것은 알고 있긴합니다)</p></li><li><p>ms .NET Asprire 같은 제품 홍보..? 같은 느낌이 많이 들었습니다.</p></li></ul></li><li><p>개발자 성장과 관련된 내용을 흥미로웠던거같습니다</p><ul><li><p>평소에도 성장에 대해 많이 고민한 적이 많아서 스스로 반성도 많이 했습니다..</p></li></ul></li><li><p>또 .. 스프링 시큐리티 관련 내용 발표가 있었는데</p><ul><li><p>시큐리티는 평소에 보지 않으면 이해하기 어려운 부분이 좀 있어서</p></li><li><p>시큐리티를 잘 알고 봤으면 재밌게 봤을거 같습니다.</p></li></ul></li></ul><p></p><hr><ul><li><p>아래 내용은 컨퍼런스에 메모했던것을 GPT 로 갈고닦은 내용입니다.</p></li></ul><h2>세션 1 : 컨테이너 친화적인 자바 어플리케이션</h2><h3>자바와 컨테이너의 관계</h3><p>자바와 컨테이너 구조</p><ul><li><p>컨테이너 기반 환경에서 자바 어플리케이션을 사용하는게 쉬운일이 아님</p></li><li><p>자바는 초기에 컨테이너나 클라우드 환경을 고려해 설계된 언어가 아님..</p></li><li><p>AWS Lambda 와 같은 서버리스 환경의 경우 컨테이너를 기반으로 동작하는데, 요청이 들어올 때만 컨테이너가 실행됨.</p><ul><li><p><code spellcheck="false">컨테이너 구동 속도</code> 와 <code spellcheck="false">어플리케이션의 시작 시간</code> 은 매우 중요함.'</p></li></ul></li></ul><p>해결책으로 GraalVM 제시</p><ul><li><p>그랄 VM 은 컨테이너 환경에서 자바의 성능으 최적화하는 데 중요한 도구</p></li><li><p>JIT 컴파일러를 포함하고 AOT 네이티브 컴파일을 통해 더 빠른 실행 속도를 제공</p></li></ul><h3>GraalVM 특징</h3><ol><li><p>고성능 자바</p><ul><li><p>기존 자바보다 GC 시간 25% 감소</p></li><li><p>트위터에서는 그랄을 사용해 서버 리드 타임 20% 줄이고, 전체 서버 중 20% 제거해도 문제없이 구동할 수 있는 수준으로 최적화됨.</p></li></ul></li><li><p>다중 언어 가상머신</p><ul><li><p>JVM 위에서 Js, Python 등의 언어도 지원한다</p></li><li><p>"Write Once, Run Anywhrer" 철학을 바탕</p></li><li><p>다양한 언어를 하나의 플랫폼에서 실행한다.</p></li></ul></li><li><p>AOT 네이티브 컴파일러</p><ul><li><p>GraalVM은 AOT 컴파일러를 통해 실행 시간을 획기적으로 단축시킴</p></li><li><p>GraalVM 으로 패키징하면 48ms</p></li><li><p>일반 자바 어플리케이션의 600ms 에 비해 훨씬 빠르다.</p></li></ul></li></ol><h3>JIT와 네이티브 이미지의 비교</h3><ul><li><p><strong>JIT 컴파일</strong>: 기존 자바 애플리케이션에서 사용하는 방식으로, 실행 시점에 코드를 컴파일합니다.</p></li><li><p><strong>네이티브 이미지</strong>: GraalVM AOT 컴파일러를 사용해 생성된 실행 파일로, 시작 속도와 메모리 사용량에서 큰 이점을 제공합니다.</p></li></ul><p><strong>컨테이너 환경에서의 차이점</strong></p><ul><li><p>일반 JAR 파일 크기: 약 383MB</p></li><li><p>네이티브 이미지 크기: 약 5MB<br>작은 컨테이너 이미지가 필요한 환경에서는 네이티브 이미지가 훨씬 유리합니다.</p></li></ul><h3>GraalVM 사용 시 주의점</h3><ol><li><p><strong>빌드 옵션 최적화 필요</strong><br>네이티브 이미지를 생성할 때 환경에 맞는 옵션을 조정해야 합니다. 최적화 설정이 제대로 이루어지지 않으면 성능이 저하될 수 있습니다.</p></li><li><p><strong>커머셜 버전과 일반 버전의 차이</strong><br>GraalVM 커머셜 버전은 20여 개의 추가적인 성능 최적화 기능을 제공하지만, 대부분의 경우 일반 버전으로도 충분히 활용 가능합니다.</p></li></ol><h2>Session 3: 개발자 성장</h2><h3>1. 메타인지를 통한 성장 마인드셋</h3><p>메타인지란?</p><ul><li><p><strong>생각에 의한 생각</strong></p><ul><li><p>내가 하는 공부가 효율적인지 판단</p></li><li><p>개선 방법을 고민</p></li></ul></li></ul><p>성장 마인드셋</p><ul><li><p>능력과 노력을 통해 성장 가능</p></li><li><p>학습 압박은 <code spellcheck="false">성장 마인드셋</code> 형성에 도움이 될 수 있음</p></li></ul><p>환경에 대한 태도</p><ul><li><p><strong>주어진 환경을 탓하지 말자</strong></p><ul><li><p>회사는 학교가 아니다.</p></li><li><p>학습 의지가 있는 외부 커뮤니티 활용 가능.</p></li></ul></li></ul><p>SI는 개발자의 무덤?</p><ul><li><p>제조업과 서비스업의 기술 격차</p></li><li><p>자기에게 주어진 일을 배우는 것이 중요</p><ul><li><p>이직을 위한 기술적 성장은 개인의 몫</p></li></ul></li><li><p><strong>제조업</strong></p><ul><li><p>최신 기술 도입에 보수적</p></li><li><p>오픈소스 사용 제한</p></li></ul></li><li><p><strong>서비스업</strong></p><ul><li><p>본인의 틀 안에서 기술 갈고닦기</p></li></ul></li></ul><p>작은 노력에서 시작</p><ul><li><p>현재 노력하고 있는 것을 점검하며 환경에서 벗어나는 시도 필요</p></li></ul><hr><h3>2. 내적 동기 부여 찾기</h3><p>실천을 위한 내적 동기</p><ul><li><p>자기결정성 이론</p><ul><li><p><strong>내적 동기 부여</strong></p></li><li><p><strong>외적 동기 부여</strong>: 돈, 칭찬, 긍정적 피드백</p></li></ul></li></ul><p>헬퍼스 하이</p><ul><li><p>타인은 경쟁자가 아닌 <strong>함께 성장하는 동료</strong></p><ul><li><p>오픈소스, 블로그 등 협력 활동</p></li></ul></li></ul><p>좋은 개발자란?</p><ul><li><p>기술적으로 뛰어난 것만이 답이 아님</p><ul><li><p>소프트 스킬 부족은 팀워크에 악영향</p></li></ul></li></ul><p>학습과 티칭</p><ul><li><p><strong>가르치는 것은 최고의 학습법</strong></p><ul><li><p>미국 행동 연구소 자료 참고</p></li></ul></li></ul><hr><h3>3. 학습 태도 및 방법</h3><p>관성을 깨기</p><ul><li><p>기존에 사용하던 방식에 의문 갖기</p><ul><li><p>예: <code spellcheck="false">Java 폴더의 존재 이유</code></p></li><li><p><code spellcheck="false">스프링부트에</code> 왜 메인 어플리케이션 하나만으로 동작이 가능한걸까? 등..</p></li></ul></li></ul><p>학습 범위 설정</p><ul><li><p>공부와 가르침 모두 어디까지 할지 기준 설정</p></li></ul><p>피드백과 실수</p><ul><li><p>피드백: 긍정적이든 부정적이든 의연하게 받아들이기</p></li><li><p>실수는 실패가 아님. <strong>코드 리뷰는 필수</strong></p></li></ul><p>프로젝트와 지식 습득의 균형</p><ul><li><p>학습과 실습의 병행 중요</p></li><li><p>교차 연습과 주기적인 지식 인출 필요</p></li></ul><hr><h3>4. 교육 방식 추천</h3><ol><li><p><strong>코칭 중심 교육</strong></p><ul><li><p>키워드만 던지고 스스로 탐구하게 하기</p></li></ul></li><li><p><strong>피드백 중심 학습</strong></p></li></ol><hr><h3>5. 효과적인 학습법</h3><ul><li><p><strong>지식 인출</strong></p><ul><li><p>학습한 내용을 주기적으로 복습하며 인지</p></li></ul></li><li><p><strong>셀프 교육자가 되기</strong></p><ul><li><p>스스로 성장 가능성을 인지하고 실천</p></li></ul></li></ul>

인천 송도 GDG 송도 DEV FEST 후기전날부터 눈이 조금씩 오기도하고.. 상당히 추웠습니다서울에서 인천까지 가느라고 조금 고생했었습니다 ㅠㅠ커피 없었으면 졸았을거같네요 ㅋㅋ개요일단 세션은 1 20 ~ 부터 약 6시까지 였습니다중간중간에 멘토링 관련한 세션도 있고, 그냥 개발자 성장, 혹은 자사 제품에 대한 소개류..? 비슷한게 좀 껴있었던거 같습니다.

인천 송도 GDG DEV FEST 후기

주간 일지

<p>요즘 같이 신입들이 설 자리가 굉장히 없는 각박한 시기에, 얼마 전 운이 좋게 신입으로 게임 회사에 면접을 보게 되었습니다 🤣🤣🤣</p><p>그런데 면접 중 다음과 같은 질문을 받을 수 있었는데, ‘포트폴리오를 확인해 보면 스프링 부트를 주로 사용해 왔는데, 스프링 부트는 보통 내장되어 있는 웹 서버로 Tomcat을 사용하는데도 불구하고 Nginx를 사용한 이유가 있을까요?’</p><p>이러한 질문을 주셨는데 당시 많이 긴장되어 있는 상황이기도 하였고, 당장 생각나는 것은</p><p>"저희가 프로젝트 환경상, EC2 한 대에서 프론트엔드와 백엔드를 함께 배포해야 하는 상황이었습니다. 따라서 하나의 도메인으로 모든 요청과 응답이 이루어지는데, 요청이 들어올 때 리버스 프록시 기능을 사용하기 위해 Nginx가 필요하기도 하였고, 보안적인 측면에서도 HTTPS를 사용해야 하기 때문에 Nginx를 사용했습니다."</p><p>지금은 글로 작성하니까 나름 그럴싸하게 작성했지만, 실제로 대답할 때는 조금 어색하게 표현한 것 같아 후회가 듭니다.😅</p><p>면접을 볼 때에는 당장 생각나는 것이 이것밖에 없었지만, 뒤늦게 면접관님의 의도를 떠올릴 수 있었습니다. 아마도 <strong>Nginx를 사용한 이유, 즉 웹 서버(WS)와 웹 애플리케이션 서버(WAS)의 차이점을 분명하게 이해하고 사용한 것인지</strong>를 물어보려고 하셨던 게 아닐까 하는 생각이 들었습니다.</p><p>그래서 이제는 비슷한 질문을 받더라도 더 이상 실수하지 않게 다시 한 번 학습하고 리마인드를 해보려고 합니다.</p><hr><p>웹 서버(Web Server)는 웹 클라이언트(예: 웹 브라우저)로부터 HTTP 요청을 받아 정적 콘텐츠(HTML, CSS, JavaScript, 이미지 등)를 제공하는 소프트웨어입니다.</p><p></p><h2>웹 서버의 주요 역할</h2><h3>주요 기능</h3><ol><li><p><strong>정적 콘텐츠 제공</strong>:</p><ul><li><p>HTML, CSS, JavaScript 파일 및 이미지 등과 같은 정적 파일을 클라이언트에 제공합니다.<br></p><p><u>Q. 프론트엔드, 백엔드가 구분되어 사용되는 것이 보통입니다. HTML, CSS, JS 파일은 웹 서버에서 언제 어떤 상황에서 클라이언트에게 제공되는가 ?</u><br></p><ul><li><p><strong>상황</strong>: 사용자가 웹 브라우저를 통해 특정 웹 페이지를 요청하는 경우</p><ul><li><p>사용자가 브라우저에서 <code spellcheck="false">http://example.com</code>을 입력하면, 브라우저는 해당 URL에 대한 HTTP 요청을 웹 서버로 보냅니다.</p></li><li><p>웹 서버(ex. Nginx)는 요청된 URL을 기반으로 적절한 파일을 찾아 클라이언트에 반환합니다. 여기서 정적 파일 제공이 이루어집니다.</p></li><li><p>예를 들어, Nginx와 같은 웹 서버가 <code spellcheck="false">/usr/share/nginx/html</code> 디렉토리에 웹페이지 파일을 저장하고 있다면, 다음과 같은 과정이 진행됩니다:</p><ul><li><p>사용자가 <code spellcheck="false">http://example.com/index.html</code>을 요청합니다.</p></li><li><p>웹 서버는 요청된 파일 경로를 확인하고, <code spellcheck="false">/var/www/html/index.html</code> 파일을 찾아 응답으로 반환합니다.</p></li></ul></li><li><p>HTML 파일 반환: 웹 서버는 <code spellcheck="false">index.html</code> 파일을 클라이언트(브라우저)에 반환합니다. 브라우저는 HTML 파일을 파싱하여 페이지의 기본 구조를 렌더링합니다.</p></li><li><p>CSS와 JavaScript 파일 요청: HTML 파일이 로드되면서, 페이지 내에 포함된 CSS 및 JavaScript 파일에 대한 추가 요청이 발생합니다. 예를 들어, HTML 파일에 다음과 같은 링크가 포함되어 있을 수 있습니다:</p><pre spellcheck="false"><code class="language-html">&lt;link rel="stylesheet" href="styles.css"&gt;
&lt;script src="app.js"&gt;&lt;/script&gt;</code></pre><ul><li><p>브라우저는 <code spellcheck="false">styles.css</code>와 <code spellcheck="false">app.js</code> 파일을 추가로 요청합니다.</p></li><li><p>웹 서버는 동일한 방식으로 이 파일들을 찾아 클라이언트에 반환합니다.<br></p></li></ul></li></ul></li><li><p><strong>구체적인 예시</strong></p><p>사용자가 <code spellcheck="false">http://example.com</code>에 접속하면 다음과 같은 요청과 응답 흐름이 발생합니다:</p><ol><li><p><strong>브라우저 요청</strong>: <code spellcheck="false">GET /index.html</code></p></li><li><p><strong>웹 서버 응답</strong>: <code spellcheck="false">/var/www/html/index.html</code> 파일 반환</p></li><li><p><strong>브라우저 요청</strong>: <code spellcheck="false">GET /styles.css</code></p></li><li><p><strong>웹 서버 응답</strong>: <code spellcheck="false">/var/www/html/styles.css</code> 파일 반환</p></li><li><p><strong>브라우저 요청</strong>: <code spellcheck="false">GET /app.js</code></p></li><li><p><strong>웹 서버 응답</strong>: <code spellcheck="false">/var/www/html/app.js</code> 파일 반환<br></p></li></ol></li></ul><p>이 과정을 통해 사용자는 웹 페이지를 볼 수 있게 되며, CSS로 스타일링된 페이지와 JavaScript로 동작하는 기능을 사용할 수 있게 됩니다.<br></p></li></ul></li><li><p><strong>HTTP 요청 처리 및 응답</strong>:</p><ul><li><p>클라이언트의 HTTP 요청을 처리하고, 적절한 응답을 생성하여 반환합니다.<br></p></li></ul></li><li><p><strong>URL 매핑 및 라우팅</strong>:</p><ul><li><p>요청 URL을 기반으로 적절한 파일이나 서비스로 요청을 라우팅합니다. 이는 리버스 프록시의 역할로, 클라이언트의 요청을 받아 적합한 백엔드 서버로 전달하고 결과를 다시 클라이언트에게 반환합니다.<br></p></li></ul></li><li><p><strong>로드 밸런싱</strong>:</p><ul><li><p>여러 서버 간에 트래픽을 분산시켜 고가용성을 유지하고 성능을 향상시킵니다.<br></p></li></ul></li><li><p><strong>보안 기능</strong>:</p><ul><li><p>SSL/TLS를 통한 데이터 암호화, IP 필터링, 사용자 인증 등 다양한 보안 기능을 제공합니다.</p><p></p></li></ul></li></ol><h3>웹 서버의 예시</h3><ul><li><p><strong>Apache HTTP Server</strong>:</p><ul><li><p>오픈 소스 웹 서버로, 다양한 플랫폼에서 사용되며, 매우 널리 사용됩니다.</p></li></ul></li><li><p><strong>Nginx</strong>:</p><ul><li><p>고성능 웹 서버로, 특히 높은 동시 연결 수를 처리할 수 있어 정적 파일 제공 및 리버스 프록시로 자주 사용됩니다.</p></li></ul></li></ul><hr><p><strong>웹 애플리케이션 서버(Web Application Server, WAS)</strong>는 웹 서버와는 달리, 동적 콘텐츠를 생성하고 웹 애플리케이션의 비즈니스 로직을 처리하는 소프트웨어입니다. WAS는 클라이언트의 요청을 받아들여 데이터베이스와 상호 작용하고, 그 결과를 동적 웹 페이지 형태로 클라이언트에 반환합니다.</p><h2>웹 애플리케이션 서버의 주요 역할</h2><ol><li><p><strong>비즈니스 로직 처리</strong>:</p><ul><li><p>클라이언트 요청을 처리하는 비즈니스 로직을 실행합니다. 예를 들어, 사용자의 로그인, 상품 검색, 주문 처리 등의 작업을 수행합니다. → 서블릿 기반<br></p></li></ul></li><li><p><strong>동적 콘텐츠 생성</strong>:</p><ul><li><p>JSP, 서블릿, EJB 등과 같은 기술을 사용하여 동적인 웹 페이지를 생성합니다. 클라이언트의 요청에 따라 실시간으로 콘텐츠를 생성하여 응답합니다.<br></p></li></ul></li><li><p><strong>데이터베이스 연동</strong>:</p><ul><li><p>데이터베이스와 상호 작용하여 데이터를 조회, 삽입, 업데이트, 삭제하는 작업을 수행합니다. 이를 통해 클라이언트가 요청한 데이터를 처리하고 반환합니다.<br></p></li></ul></li><li><p><strong>세션 관리</strong>:</p><ul><li><p>사용자 세션을 관리하여 사용자 상태를 유지하고, 인증 및 권한 부여를 처리합니다. 이를 통해 사용자의 로그인 상태를 유지하거나, 사용자별로 다른 콘텐츠를 제공할 수 있습니다.<br></p></li></ul></li><li><p><strong>트랜잭션 관리</strong>:</p><ul><li><p>데이터베이스 트랜잭션을 관리하여 데이터의 일관성과 무결성을 보장합니다. 여러 작업이 하나의 트랜잭션으로 묶여 일관성 있게 처리되도록 합니다.<br></p></li></ul></li></ol><h3>웹 애플리케이션 서버의 예시</h3><ul><li><p><strong>Apache Tomcat</strong>:</p><ul><li><p>오픈 소스 서블릿 컨테이너로, 서블릿과 JSP 기반의 웹 애플리케이션을 실행합니다.</p></li></ul></li></ul><hr><h2>정리</h2><img src="https://image.until.blog/thingk0/article/1716860951310" alt="until-318"><h3>이유 1: 정적 콘텐츠 제공</h3><ul><li><p><strong>Nginx</strong>는 정적 콘텐츠(예: 이미지, CSS, JavaScript 파일 등)를 매우 효율적으로 제공할 수 있습니다. 이를 통해 스프링 부트 애플리케이션이 정적 리소스를 제공하는 부담을 줄이고, 동적 콘텐츠 제공에 집중할 수 있게 합니다.</p><blockquote><p><em>하지만, 보통 프론트엔드와 API 서버 조합으로 많이 사용하기 때문에, 사실상 정적 콘텐츠 제공에는 큰 메리트를 느끼기 어려웠습니다. 그러나 프론트엔드가 SPA일 경우에는 매우 유용하다고 생각합니다.</em></p></blockquote></li></ul><p></p><h3>이유 2: 리버스 프록시</h3><ul><li><p><strong>리버스 프록시</strong>로서 Nginx는 클라이언트 요청을 스프링 부트 애플리케이션으로 전달합니다. 이를 통해 애플리케이션 서버를 보호하고, 로드 밸런싱 및 SSL 종료(SSL termination) 등의 기능을 제공합니다.</p><blockquote><p><em>실제로 제가 Nginx를 사용하는 가장 주된 이유는, 보통 프로젝트를 진행할 때 서버 인스턴스를 하나만 사용할 수 있는 상황이 많아서, 어쩔 수 없이 서버 안에서 프론트엔드, 인프라, 백엔드를 모두 배포해야 했기 때문입니다.</em></p><p><em>이러한 이유로 Nginx의 리버스 프록시 기능은 매우 유용하고 필요했습니다. 그래서 다행히도 면접에서 가장 먼저 떠올린 리버스 프록시를 답변할 수 있었습니다 !!</em></p></blockquote><p></p></li></ul><h3>이유 3: 로드 밸런싱</h3><ul><li><p><strong>로드 밸런싱</strong>을 통해 여러 대의 스프링부트 인스턴스에 트래픽을 분산시킬 수 있습니다. 이를 통해 고가용성과 성능을 향상시킬 수 있습니다.</p><blockquote><p><em>면접 중 로드 밸런싱 관련 질문을 받았고, 당연히 Nginx를 통해 로드 밸런싱이 가능하다는 것은 알고 있었습니다.</em></p><p><em>하지만 더 좋은 답변을 위해서는 추후에 블루-그린 배포를 적용하거나 스케일 아웃을 염두에 두었을 때, 로드 밸런싱 기능이 필요하기 때문에 Nginx가 필요하다는 답변을 떠올리지 못했다는 것이 뒤늦은 후회로 남네요..🥲</em></p></blockquote><p></p></li></ul><h3>이유 4: SSL/TLS 처리</h3><ul><li><p><strong>SSL/TLS 처리</strong>를 Nginx가 담당함으로써 스프링부트 애플리케이션은 암호화된 트래픽을 직접 처리하지 않아도 되므로, 성능과 보안 측면에서 유리합니다.</p></li></ul><p></p><h3>이유 5: 보안</h3><ul><li><p><strong>보안 설정</strong> 및 접근 제어를 Nginx 레벨에서 관리함으로써 애플리케이션의 보안성을 향상시킬 수 있습니다. IP 제한, DDoS 방어, WAF(Web Application Firewall) 등을 설정할 수 있습니다.</p></li></ul><p></p><h3>이유 6: 고성능</h3><ul><li><p><strong>고성능</strong>의 Nginx는 적은 리소스로 많은 요청을 처리할 수 있어, 특히 많은 동시 접속이 발생하는 상황에서 유리합니다.</p><blockquote><p><em>“ Nginx는 비동기 이벤트 기반으로 설계되어, 적은 리소스로도 많은 수의 동시 연결을 효율적으로 처리할 수 있고 다중 워커 프로세스를 통해 병렬로 작업을 수행하여 성능을 극대화하며 메모리를 효율적으로 사용하여 더 많은 요청을 처리할 수 있습니다. "</em></p><p><em>라고도 대답할 수 있다면 아마 만점짜리 답변이겠죠..?</em></p></blockquote></li></ul><hr><p>즉, 저는 리버스 프록시와 보안 부분에서는 어느 정도 정답에 가까운 대답을 했다고 생각해요 ! 하지만 기억을 되돌려보면, 로드 밸런싱 부분에 대해서도 잠깐 질문을 받았는데, 급히 다른 질문으로 넘어갔던 것이 아쉽고... Nginx를 통해 로드 밸런싱, 성능, 그리고 정적 콘텐츠 제공에 대해서도 답변을 할 수 있었다면 더 좋았을 것 같아요.</p><p></p><p>다음에 비슷한 질문을 받는다면, 기존 답변에 보완해서 더욱 멋진 답변을 해보도록 하겠습니다. 😃</p>

최근 게임 회사 면접에서 스프링 부트와 Nginx 사용 이유에 대한 질문을 받았습니다. 이번 포스팅에서는 웹 서버와 웹 애플리케이션 서버의 차이를 명확히 이해하고, Nginx 사용 이유를 깊이 있게 다뤄봅니다.

WAS가 있음에도 불구하고, 웹서버인 Nginx 를 사용하는 이유 - 개발자 면접 리마인드

CodingTest

<h3>다시푸는 코딩 테스트 준비 일지</h3><ul><li><p>응시 사이트 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.acmicpc.net/">BOJ</a></p></li><li><p>문제 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.acmicpc.net/problem/1018">1018.체스판다시칠하기</a></p></li><li><p>사용언어 : C#</p></li><li><p>난이도 : 중</p></li><li><p>풀이시간 : 35m</p></li><li><p>유형 : 브루트포스, 문자열</p></li></ul><h2>문제</h2><p>지민이는 자신의 저택에서 MN개의 단위 정사각형으로 나누어져 있는 M×N 크기의 보드를 찾았다. 어떤 정사각형은 검은색으로 칠해져 있고, 나머지는 흰색으로 칠해져 있다. 지민이는 이 보드를 잘라서 8×8 크기의 체스판으로 만들려고 한다.</p><p>체스판은 검은색과 흰색이 번갈아서 칠해져 있어야 한다. 구체적으로, 각 칸이 검은색과 흰색 중 하나로 색칠되어 있고, 변을 공유하는 두 개의 사각형은 다른 색으로 칠해져 있어야 한다. 따라서 이 정의를 따르면 체스판을 색칠하는 경우는 두 가지뿐이다. 하나는 맨 왼쪽 위 칸이 흰색인 경우, 하나는 검은색인 경우이다.</p><p>보드가 체스판처럼 칠해져 있다는 보장이 없어서, 지민이는 8×8 크기의 체스판으로 잘라낸 후에 몇 개의 정사각형을 다시 칠해야겠다고 생각했다. 당연히 8*8 크기는 아무데서나 골라도 된다. 지민이가 다시 칠해야 하는 정사각형의 최소 개수를 구하는 프로그램을 작성하시오.</p><h2>입력</h2><p>첫째 줄에 N과 M이 주어진다. N과 M은 8보다 크거나 같고, 50보다 작거나 같은 자연수이다. 둘째 줄부터 N개의 줄에는 보드의 각 행의 상태가 주어진다. B는 검은색이며, W는 흰색이다.</p><h2>출력</h2><p>첫째 줄에 지민이가 다시 칠해야 하는 정사각형 개수의 최솟값을 출력한다.</p><h2>예제 입력 1 복사</h2><pre spellcheck="false"><code>8 8
WBWBWBWB
BWBWBWBW
WBWBWBWB
BWBBBWBW
WBWBWBWB
BWBWBWBW
WBWBWBWB
BWBWBWBW
</code></pre><h2>예제 출력 1 복사</h2><pre spellcheck="false"><code>1
</code></pre><h2>예제 입력 2 복사</h2><pre spellcheck="false"><code>10 13
BBBBBBBBWBWBW
BBBBBBBBBWBWB
BBBBBBBBWBWBW
BBBBBBBBBWBWB
BBBBBBBBWBWBW
BBBBBBBBBWBWB
BBBBBBBBWBWBW
BBBBBBBBBWBWB
WWWWWWWWWWBWB
WWWWWWWWWWBWB
</code></pre><h2>예제 출력 2 복사</h2><pre spellcheck="false"><code>12
</code></pre><h2>예제 입력 3 복사</h2><pre spellcheck="false"><code>8 8
BWBWBWBW
WBWBWBWB
BWBWBWBW
WBWBWBWB
BWBWBWBW
WBWBWBWB
BWBWBWBW
WBWBWBWB
</code></pre><h2>예제 출력 3 복사</h2><pre spellcheck="false"><code>0
</code></pre><h2>예제 입력 4 복사</h2><pre spellcheck="false"><code>9 23
BBBBBBBBBBBBBBBBBBBBBBB
BBBBBBBBBBBBBBBBBBBBBBB
BBBBBBBBBBBBBBBBBBBBBBB
BBBBBBBBBBBBBBBBBBBBBBB
BBBBBBBBBBBBBBBBBBBBBBB
BBBBBBBBBBBBBBBBBBBBBBB
BBBBBBBBBBBBBBBBBBBBBBB
BBBBBBBBBBBBBBBBBBBBBBB
BBBBBBBBBBBBBBBBBBBBBBW
</code></pre><h2>예제 출력 4 복사</h2><pre spellcheck="false"><code>31
</code></pre><h2>예제 입력 5 복사</h2><pre spellcheck="false"><code>10 10
BBBBBBBBBB
BBWBWBWBWB
BWBWBWBWBB
BBWBWBWBWB
BWBWBWBWBB
BBWBWBWBWB
BWBWBWBWBB
BBWBWBWBWB
BWBWBWBWBB
BBBBBBBBBB
</code></pre><h2>예제 출력 5 복사</h2><pre spellcheck="false"><code>0
</code></pre><h2>예제 입력 6 복사</h2><pre spellcheck="false"><code>8 8
WBWBWBWB
BWBWBWBW
WBWBWBWB
BWBBBWBW
WBWBWBWB
BWBWBWBW
WBWBWWWB
BWBWBWBW
</code></pre><h2>예제 출력 6 복사</h2><pre spellcheck="false"><code>2
</code></pre><h2>예제 입력 7 복사</h2><pre spellcheck="false"><code>11 12
BWWBWWBWWBWW
BWWBWBBWWBWW
WBWWBWBBWWBW
BWWBWBBWWBWW
WBWWBWBBWWBW
BWWBWBBWWBWW
WBWWBWBBWWBW
BWWBWBWWWBWW
WBWWBWBBWWBW
BWWBWBBWWBWW
WBWWBWBBWWBW
</code></pre><h2>예제 출력 7 복사</h2><pre spellcheck="false"><code>15</code></pre><h3>문제 풀이 접근</h3><p>이 문제는 처음 봤을 때, 아이디어를 바로 생각해냈다. BFS나 DFS를 풀때 처럼 Position을 지정하는 방식을 똑같이 가고, 그 기준점에서 우축 8칸 하단 8칸 까지는 순회할 수 없도록 하고, 그 기준 Position 에서 내가 미리 준비한 완벽한 보드판을 맞대서 틀린곳이 있는지 없는지 확인하는 것이었다. </p><p>이렇게 하기 위해서는 B로 시작하냐 W로 시작하냐가 관건이라 생각해서 어떤 보드판을 맞댈지 풀면서 고민을 해보았는데, 결국 W로 시작하던지 B로 시작하던지 중요하지 않았다. B로 시작해서 BWBW로 시작하는 보트판을 맞댓는데 뒤에서 다 틀렸을 경우도 있을 것이라 생각해서 어떤것을 맞대는것이 중요하지 않았고, 어차피 가장 최소값으로 다시 그리는 것이기 때문에 시간복잡도는 널널하게 줬을 것이라고 생각하여 두개의 보드판을 모두 맞대서 적은쪽으로 갱신하는 방법을 사용했다. </p><h3>작성 코드 (C#)</h3><pre spellcheck="false"><code>using System;
using System.Collections;
using System.Collections.Generic;
using static CodingTestProj.Program;

/*
 * Difficulty : Middle
 * URL : https://www.acmicpc.net/problem/1018
  * Time : 35m
 */

namespace CodingTestProj
{
    internal class Program
    {
        static void Main(string[] args)
        {
            var ss = new Solution();
            ss.Solve();
        }
    }

    public class Solution
    {
        public int x;
        public int y;

        public int ret;

        public char[,] _arr_v1 = new char[8, 8]
        {
            { 'B' ,'W','B','W','B','W','B','W'},
            { 'W' ,'B','W','B','W','B','W','B'},
            { 'B' ,'W','B','W','B','W','B','W'},
            { 'W' ,'B','W','B','W','B','W','B'},
            { 'B' ,'W','B','W','B','W','B','W'},
            { 'W' ,'B','W','B','W','B','W','B'},
            { 'B' ,'W','B','W','B','W','B','W'},
            { 'W' ,'B','W','B','W','B','W','B'},
        };

        public char[,] _arr_v2 = new char[8, 8]
        {
            { 'W' ,'B','W','B','W','B','W','B'},
            { 'B' ,'W','B','W','B','W','B','W'},
            { 'W' ,'B','W','B','W','B','W','B'},
            { 'B' ,'W','B','W','B','W','B','W'},
            { 'W' ,'B','W','B','W','B','W','B'},
            { 'B' ,'W','B','W','B','W','B','W'},
            { 'W' ,'B','W','B','W','B','W','B'},
            { 'B' ,'W','B','W','B','W','B','W'},
        };

        public char[,] _board;

        public void Solve()
        {
            ret = int.MaxValue;
            string[] input = Console.ReadLine().Split(' ');

            x = Int32.Parse(input[0]);
            y = Int32.Parse(input[1]);

            _board = new char[x, y];

            for (int i = 0; i &lt; x; ++i)
            {
                string inBoard = Console.ReadLine();
                for(int j = 0; j &lt; inBoard.Length; ++j)
                {
                    _board[i,j] = inBoard[j];
                }
            }

            int curPosX = 0;
            int curPosY = 0;

            for(int i = 0; i &lt; y - 7;  ++i)
            {
                for(int j = 0; j &lt; x - 7; ++j)
                {
                    curPosX = j;
                    curPosY = i;

                    Find(curPosX, curPosY);
                }
            }

            print();
        }

        public void Find(int posX, int posY)
        {
            char[,] useCopyBoard = new char[y, x];
            useCopyBoard = _arr_v1;

            int _ret = 0;

            for (int i = 0; i &lt; 8; ++i)
            {
                for(int j = 0; j &lt; 8;++j)
                {
                    int newPosX = posX + j;
                    int newPosY = posY + i;

                    if (_board[newPosX, newPosY] == useCopyBoard[j, i])
                        continue;

                    ++_ret;
                }
            }

            if (ret &gt;= _ret)
                ret = _ret;

            useCopyBoard = _arr_v2;
            _ret = 0;
            for (int i = 0; i &lt; 8; ++i)
            {
                for (int j = 0; j &lt; 8; ++j)
                {
                    int newPosX = posX + j;
                    int newPosY = posY + i;

                    if (_board[newPosX, newPosY] == useCopyBoard[j, i])
                        continue;

                    ++_ret;
                }
            }

            if (ret &gt;= _ret)
                ret = _ret;
        }

        public void print()
        {
            Console.WriteLine(ret);
        }
    }
}</code></pre><h3>코드 결과</h3><img src="https://image.until.blog/sin0105/article/1729606982743.png" data-width="100%" data-align="center" alt="until-1858">

혼자서 다시푸는 코딩테스트 준비 일지 - 44

코딩테스트 준비 - 체스판다시칠하기

<blockquote><p>목차</p><ol class="tight" data-tight="true"><li><p>Route Announcements</p></li><li><p>Static rendering</p></li><li><p>Dynamic rendering</p></li></ol></blockquote><h1>1. Route Announcements</h1><p>키워드</p><blockquote><p><code spellcheck="false">next/link</code> <code spellcheck="false">screen reader</code> <code spellcheck="false">assistive technology</code><br><code spellcheck="false">document.title</code> <code spellcheck="false">SSR</code> <code spellcheck="false">CSR</code></p></blockquote><h2>1-1. Screen reader</h2><ul class="tight" data-tight="true"><li><p>웹접근성과 관련된 기술</p></li><li><p>웹페이지 텍스트를 소리내어 읽어줌</p></li><li><p>assisitive technology 라고도 함</p></li><li><p>페이지 전환시 새로운 html 문서를 서버로부터 받은 경우에 변경된 title을 읽어 페이지가 바뀌었음을 알려주는 기능도 포함됨</p></li><li><p><strong>한계: CSR 에서 페이지 전환시에는 위 기능이 작동하지 않음</strong></p></li></ul><h2>1-2. Route announcer</h2><ul class="tight" data-tight="true"><li><p>넥스트에서 기본적으로 지원해주는 기능</p></li><li><p>스크린 리더가 페이지 전환시 title을 읽어 페이지가 변경되었음을 알려주는 기능을 보강</p></li><li><p>페이지 전환이 CSR 방식으로 발생된 경우 페이지 전환을 assistive technology에 알려줌</p></li><li><p>title 을 읽어서 알려줌 (브라우저 탭에 있는 웹페이지 타이틀)</p></li><li><p>title 값이 없으면 해당 페이지의 h1 태그 값을 알려줌</p></li><li><p>h1도 없으면 해당 페이지의 url 경로 값을 알려줌</p></li><li><p>next/link 의 <code spellcheck="false">Link</code> 컴포넌트를 클릭한 경우 CSR 페이지 전환이 발생함</p></li><li><p>이때 <code spellcheck="false">Route announcer</code> 가 assistive technology 에 정보를 알려줌</p></li></ul><h2>1-3. next/link</h2><pre spellcheck="false"><code>import Link from 'next/link';
export default function Home() {
return (
&lt;Link href="/about"&gt;
페이지 이동
&lt;/Link&gt;
)
}</code></pre><ul class="tight" data-tight="true"><li><p>a 태그를 상속한 컴포넌트라고 공식문서에서 소개</p></li><li><p>누르면 해당 경로로 페이지 이동</p></li><li><p>이때 페이지 전환은 Link 컴포넌트 설정에 따라서 SSR 이거나 CSR 일 수 있음</p></li><li><p>prefetch 라는 속성이 존재하고 이 속성이 렌더링 방식을 결정</p></li><li><p>prefetch 값이 true 라면, Link 컴포넌트가 화면에 보일때 미리 해당 페이지 관련 데이터를 내려받아서 Link 컴포넌트를 눌렀을때 서버랑 통신시키는게 아니라 미리 받아놓은 데이터를 이용해 CSR을 함</p></li><li><p>이 CSR 페이지 전환에서 route announcer가 스크린 리더에 페이지 전환에 관련된 정보 전달<br>(<code spellcheck="false">title</code> or <code spellcheck="false">h1</code> or <code spellcheck="false">url</code>)</p></li></ul><h1>2. Static rendering</h1><p>키워드</p><blockquote><p><code spellcheck="false">cache</code> <code spellcheck="false">CDN</code></p></blockquote><ol class="tight" data-tight="true"><li><p>프로젝트 빌드</p></li><li><p>HTML 파일 생성</p></li><li><p>CDN에 분산 저장 (캐싱)</p></li><li><p>유저가 웹페이지 접속</p></li><li><p>CDN에 캐싱되어있는 HTML 완성본을 유저에 전송</p></li></ol><h3>장점</h3><ul class="tight" data-tight="true"><li><p>매 요청마다 서버에서 HTML 파일 생성을 하지 않으므로 서버 운영 효율적</p></li><li><p>HTML 파일 생성 과정이 생략되므로 유저는 빠르게 페이지를 받아볼 수 있음</p></li></ul><h3>단점</h3><ul class="tight" data-tight="true"><li><p>캐싱된 HTML 완성본을 받아보므로 접속할때 최신 데이터를 볼 수 없음</p></li></ul><h2>3. Dynamic rendering</h2><p>키워드</p><blockquote><p><code spellcheck="false">SSR</code></p></blockquote><ol class="tight" data-tight="true"><li><p>유저가 웹페이지 접속</p></li><li><p>서버에서 해당 페이지의 HTML 파일 생성</p></li><li><p>HTML 문서 전송</p></li></ol><h3>장점</h3><ul class="tight" data-tight="true"><li><p>유저가 웹페이지 접속할 때마다 최신 데이터를 볼 수 있음</p></li></ul><h3>단점</h3><ul class="tight" data-tight="true"><li><p>매 요청마다 서버에서 HTML 파일을 생성해야함</p></li></ul>

NEXT 공식문서를 통한 개념 학습

NEXT 공식문서 읽기 D1

1. Route Announcements

1-1. Screen reader

1-2. Route announcer

1-3. next/link

2. Static rendering

장점

단점

3. Dynamic rendering

장점

단점