코딩테스트 feat. 자바

기본으로 import는 다음 두 개를 넣어놓고 시작하자.<pre spellcheck="false"><code class="language-java">import java.util.*;
import java.io.*;</code></pre>IOException을 붙여주지않으면, BufferedReader를 사용할 때 readLine()에서 에러가 난다. <code spellcheck="false">throws IOException</code>도 붙여주자 😙<pre spellcheck="false"><code class="language-java">public static void main(String[] args) throws IOException</code></pre><h1>입력 받기</h1>소프티어에서는 입력받는 것까지 나오므로 준비하는 것을 추천한다.<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><h1>배열</h1><h2>1차원 배열 정의</h2>기본적인 1차열 배열의 정의이다. <code spellcheck="false">길이가 고정</code>이라는 점이 중요하다!<pre spellcheck="false"><code class="language-java">int[] arr = {5, 0, 2, 3, 4, 1};</code></pre>아래와 같이 전역 변수로 선언 후, 함수 안에서 초기화하는 경우도 많다.<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><h2>2차원 배열 정의</h2>다음 기본적인 2차원 배열의 정의이다. 역시 <code spellcheck="false">길이가 고정</code>이다!<pre spellcheck="false"><code class="language-java">int[][] arr = new int[][]{{5, 40}, {3, 50}, {1, 30}};</code></pre>위와 마찬가지로, 전역 변수로 선언 후, 함수 안에서 초기화하는 경우이다.<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><h1>리스트</h1>그럼, 배열의 크기를 모를 때는 어떻게 할까? <code spellcheck="false">길이가 가변</code>인 리스트를 사용한다. 보통 그래프 문제에서 많이 쓰인다는 걸 알아두자.아래 경우는 행의 수는 고정이고, 열의 수는 가변인 2차원 배열이다.<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>그렇다면, 행의 수는 가변이고, 열의 수는 고정인 경우는 어떨까?<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>그럼 행과 열 둘다 가변일 경우는? 명확하게 ArrayList를 사용할 것이라면, ArrayList로 선언해도 좋다.<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><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><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><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><h2>내림차순 정렬</h2><code spellcheck="false">Collections.reverseOrder()</code>는 Comparable을 구현한 객체만 정렬할 수 있기 때문에 int형에서 Integer로 변환하여 사용해야한다. 배열에 -1을 곱한 뒤, 오름차순 정렬하는 방법도 있다.<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><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><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><h1>숫자와 문자열 변환</h1><pre spellcheck="false"><code class="language-java">Integer.toString(n); // 숫자 -&gt; 문자열
Integer.parseInt(s): // 문자열 -&gt; 숫자</code></pre><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><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><h1>StringBuilder 관련 함수</h1><code spellcheck="false">String</code>은 한번 만들어지면, 문자를 추가하거나 삭제가 불가능하다! 문자열을 추가해야한다면, <code spellcheck="false">StringBuilder</code>를 이용해야한다.<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><h1>배열, 문자열, 리스트의 길이</h1><ul><li>배열 : <code spellcheck="false">arr.length</code></li><li>리스트 : <code spellcheck="false">arr.size()</code></li><li>문자열 : <code spellcheck="false">str.length()</code></li></ul><blockquote>👀 혹시 틀린 부분이나 성능상 더 좋은 점이 있다면, 댓글에 적어주시면 감사합니다 !</blockquote>

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

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

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

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

인천 송도 GDG DEV FEST 후기

주간 일지

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

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

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

CodingTest

<h3>다시푸는 코딩 테스트 준비 일지</h3><ul><li>응시 사이트 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.acmicpc.net/">BOJ</a></li><li>문제 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.acmicpc.net/problem/1018">1018.체스판다시칠하기</a></li><li>사용언어 : C#</li><li>난이도 : 중</li><li>풀이시간 : 35m</li><li>유형 : 브루트포스, 문자열</li></ul><h2>문제</h2>지민이는 자신의 저택에서 MN개의 단위 정사각형으로 나누어져 있는 M×N 크기의 보드를 찾았다. 어떤 정사각형은 검은색으로 칠해져 있고, 나머지는 흰색으로 칠해져 있다. 지민이는 이 보드를 잘라서 8×8 크기의 체스판으로 만들려고 한다.체스판은 검은색과 흰색이 번갈아서 칠해져 있어야 한다. 구체적으로, 각 칸이 검은색과 흰색 중 하나로 색칠되어 있고, 변을 공유하는 두 개의 사각형은 다른 색으로 칠해져 있어야 한다. 따라서 이 정의를 따르면 체스판을 색칠하는 경우는 두 가지뿐이다. 하나는 맨 왼쪽 위 칸이 흰색인 경우, 하나는 검은색인 경우이다.보드가 체스판처럼 칠해져 있다는 보장이 없어서, 지민이는 8×8 크기의 체스판으로 잘라낸 후에 몇 개의 정사각형을 다시 칠해야겠다고 생각했다. 당연히 8*8 크기는 아무데서나 골라도 된다. 지민이가 다시 칠해야 하는 정사각형의 최소 개수를 구하는 프로그램을 작성하시오.<h2>입력</h2>첫째 줄에 N과 M이 주어진다. N과 M은 8보다 크거나 같고, 50보다 작거나 같은 자연수이다. 둘째 줄부터 N개의 줄에는 보드의 각 행의 상태가 주어진다. B는 검은색이며, W는 흰색이다.<h2>출력</h2>첫째 줄에 지민이가 다시 칠해야 하는 정사각형 개수의 최솟값을 출력한다.<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>이 문제는 처음 봤을 때, 아이디어를 바로 생각해냈다. BFS나 DFS를 풀때 처럼 Position을 지정하는 방식을 똑같이 가고, 그 기준점에서 우축 8칸 하단 8칸 까지는 순회할 수 없도록 하고, 그 기준 Position 에서 내가 미리 준비한 완벽한 보드판을 맞대서 틀린곳이 있는지 없는지 확인하는 것이었다. 이렇게 하기 위해서는 B로 시작하냐 W로 시작하냐가 관건이라 생각해서 어떤 보드판을 맞댈지 풀면서 고민을 해보았는데, 결국 W로 시작하던지 B로 시작하던지 중요하지 않았다. B로 시작해서 BWBW로 시작하는 보트판을 맞댓는데 뒤에서 다 틀렸을 경우도 있을 것이라 생각해서 어떤것을 맞대는것이 중요하지 않았고, 어차피 가장 최소값으로 다시 그리는 것이기 때문에 시간복잡도는 널널하게 줬을 것이라고 생각하여 두개의 보드판을 모두 맞대서 적은쪽으로 갱신하는 방법을 사용했다. <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>목차<ol class="tight" data-tight="true"><li>Route Announcements</li><li>Static rendering</li><li>Dynamic rendering</li></ol></blockquote><h1>1. Route Announcements</h1>키워드<blockquote><code spellcheck="false">next/link</code> <code spellcheck="false">screen reader</code> <code spellcheck="false">assistive technology</code> <code spellcheck="false">document.title</code> <code spellcheck="false">SSR</code> <code spellcheck="false">CSR</code></blockquote><h2>1-1. Screen reader</h2><ul class="tight" data-tight="true"><li>웹접근성과 관련된 기술</li><li>웹페이지 텍스트를 소리내어 읽어줌</li><li>assisitive technology 라고도 함</li><li>페이지 전환시 새로운 html 문서를 서버로부터 받은 경우에 변경된 title을 읽어 페이지가 바뀌었음을 알려주는 기능도 포함됨</li><li>한계: CSR 에서 페이지 전환시에는 위 기능이 작동하지 않음</li></ul><h2>1-2. Route announcer</h2><ul class="tight" data-tight="true"><li>넥스트에서 기본적으로 지원해주는 기능</li><li>스크린 리더가 페이지 전환시 title을 읽어 페이지가 변경되었음을 알려주는 기능을 보강</li><li>페이지 전환이 CSR 방식으로 발생된 경우 페이지 전환을 assistive technology에 알려줌</li><li>title 을 읽어서 알려줌 (브라우저 탭에 있는 웹페이지 타이틀)</li><li>title 값이 없으면 해당 페이지의 h1 태그 값을 알려줌</li><li>h1도 없으면 해당 페이지의 url 경로 값을 알려줌</li><li>next/link 의 <code spellcheck="false">Link</code> 컴포넌트를 클릭한 경우 CSR 페이지 전환이 발생함</li><li>이때 <code spellcheck="false">Route announcer</code> 가 assistive technology 에 정보를 알려줌</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>a 태그를 상속한 컴포넌트라고 공식문서에서 소개</li><li>누르면 해당 경로로 페이지 이동</li><li>이때 페이지 전환은 Link 컴포넌트 설정에 따라서 SSR 이거나 CSR 일 수 있음</li><li>prefetch 라는 속성이 존재하고 이 속성이 렌더링 방식을 결정</li><li>prefetch 값이 true 라면, Link 컴포넌트가 화면에 보일때 미리 해당 페이지 관련 데이터를 내려받아서 Link 컴포넌트를 눌렀을때 서버랑 통신시키는게 아니라 미리 받아놓은 데이터를 이용해 CSR을 함</li><li>이 CSR 페이지 전환에서 route announcer가 스크린 리더에 페이지 전환에 관련된 정보 전달 (<code spellcheck="false">title</code> or <code spellcheck="false">h1</code> or <code spellcheck="false">url</code>)</li></ul><h1>2. Static rendering</h1>키워드<blockquote><code spellcheck="false">cache</code> <code spellcheck="false">CDN</code></blockquote><ol class="tight" data-tight="true"><li>프로젝트 빌드</li><li>HTML 파일 생성</li><li>CDN에 분산 저장 (캐싱)</li><li>유저가 웹페이지 접속</li><li>CDN에 캐싱되어있는 HTML 완성본을 유저에 전송</li></ol><h3>장점</h3><ul class="tight" data-tight="true"><li>매 요청마다 서버에서 HTML 파일 생성을 하지 않으므로 서버 운영 효율적</li><li>HTML 파일 생성 과정이 생략되므로 유저는 빠르게 페이지를 받아볼 수 있음</li></ul><h3>단점</h3><ul class="tight" data-tight="true"><li>캐싱된 HTML 완성본을 받아보므로 접속할때 최신 데이터를 볼 수 없음</li></ul><h2>3. Dynamic rendering</h2>키워드<blockquote><code spellcheck="false">SSR</code></blockquote><ol class="tight" data-tight="true"><li>유저가 웹페이지 접속</li><li>서버에서 해당 페이지의 HTML 파일 생성</li><li>HTML 문서 전송</li></ol><h3>장점</h3><ul class="tight" data-tight="true"><li>유저가 웹페이지 접속할 때마다 최신 데이터를 볼 수 있음</li></ul><h3>단점</h3><ul class="tight" data-tight="true"><li>매 요청마다 서버에서 HTML 파일을 생성해야함</li></ul>

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

NEXT 공식문서 읽기 D1

🎨 프론트엔드

<blockquote>클래스 컴포넌트에 대한 글이 아님을 먼저 남깁니다</blockquote>자바스크립트는 ES6 환경에서 클래스 문법을 지원하기 시작했다. 물론 그 전에도 클래스처럼 객체를 사용하는 것이 가능했지만..아무튼 그럼에도 NestJS 같은 백엔드 환경에선 클래스를 적극적으로 쓰는 것과 별개로, 프론트 환경에서는 클래스를 딱히 쓰지 않고 있는 것 같다.왜일까? React에서는 불변성을 중요하게 생각하고 있고, 그렇기 때문에 <code spellcheck="false">useState</code> 같은 상태값에 클래스를 이용하기 어려운 실정이다.<h1>useState에 클래스 객체?</h1><pre spellcheck="false"><code class="language-javascript">function Component() {
 const [cart, setCart] = useState(new ShoppingCart())

 const onClick = (e) =&gt; {
 cart.addItem(e.target.name)
 }

 return (
 &lt;button onClick={onClick}&gt;
 카트에 담기
 &lt;/button&gt;
 )
}

class ShoppingCart {
 constructor(items) {
 this.items = items
 }

 addItem(item) {
 this.items.push(item)
 }
}</code></pre>리액트 사용자라면 이 코드가 제대로 동작하지 않을 것임을 알 것이다. <code spellcheck="false">useState</code>로 선언한 상태값은 반드시 <code spellcheck="false">setState</code>로 상태값을 바꿔야하니까.<pre spellcheck="false"><code class="language-javascript">function Component() {
 const [cart, setCart] = useState(new ShoppingCart())

 const onClick = (e) =&gt; {
 cart.addItem(e.target.name)
 setCart(cart)
 }

 return (
 &lt;button onClick={onClick}&gt;
 카트에 담기
 &lt;/button&gt;
 )
}

class ShoppingCart {
 constructor(items) {
 this.items = items
 }

 addItem(item) {
 this.items.push(item)
 }
}</code></pre>이러면 어떨까? 물론 제대로 작동하지 않을 것이다. cart의 <code spellcheck="false">addItem</code> 메소드로 cart의 값을 바꿨지만, 이전의 cart와 동등한 값 ( <code spellcheck="false">Object.is</code> 로 비교했을 때)이기 때문이다.따라서 정말 이렇게 써먹고 싶다면 <code spellcheck="false">ShoppingCart</code> 클래스는 새로운 객체를 반환하도록 변경되어야 할 것이다.<pre spellcheck="false"><code class="language-javascript">class ShoppingCart {
 items
 
 constructor(items) {
 this.items = items
 }

 addItem(item) {
 return new ShoppingCart([...this.items, item])
 }
}</code></pre>하지만 매번 코드를 이렇게 쓰는건 좀 어렵다.<h2>반려생활에서는...</h2>반려생활에서는 이런 문제를 해결하기 위해 <code spellcheck="false">valtio</code>라는 라이브러리를 사용한다고 한다.<a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/pmndrs/valtio">https://github.com/pmndrs/valtio</a>프록시를 이용해서 객체에 값이 바뀔 때에 setState로 전파를 해주는 기능으로 보이는데.역시나 외부 라이브러리를 사용하는 방법인지라 접근성이 그렇게 좋지는 않고, 원래 쓰던 방식이 있는데 클래스를 사용하기 위해 굳이 이렇게까지 해야할까 라는 생각이 들기도 한다.그렇다면 클래스는 리액트에서 쓸 일이 없는 도구인걸까?<h1>문제 제기</h1>예시를 위해 언틸의 프론트엔드 코드를 조금 가져와보자.다음은 언틸의 댓글을 쓸 때 내용을 적는 input form 컴포넌트의 코드다.<pre spellcheck="false"><code class="language-typescript">type Props = {
 commentId?: number;
 replyToCommentId?: number;
 initialContent: string;
 onCancel?: () =&gt; void;
}

const WriteForm = ({
 commentId,
 replyToCommentId,
 initialContent = "",
 onCancel = () =&gt; {},
}: Props) =&gt; {
 const { isLoggedIn } = useAuthInfo()
 const [content, setContent] = useState(initialContent)

 const handleSubmit: FormEventHandler = async (e) =&gt; {
 e.preventDefault()

 if (!isLoggedIn || !content) return

 if (!commentId) {
 await postComment({ content, replyToCommentId })
 setContent("")
 }

 if (commentId) {
 await putComment({ content })
 }

 onCancel()
 }

 const submitBtnText = (() =&gt; {
 if (commentId) {
 return "수정하기"
 }

 if (replyToCommentId) {
 return "답글 등록"
 }

 return "댓글 등록"
 })()

 return (
 &lt;form onSubmit={handleSubmit}&gt;
 &lt;textarea
 autoFocus={!!(commentId || replyToCommentId)}
 disabled={!isLoggedIn}
 value={content}
 onChange={(e) =&gt; setContent(e.target.value)}
 /&gt;
 &lt;div&gt;
 {(commentId || replyToCommentId) &amp;&amp; (
 &lt;button onClick={onCancel}&gt;취소&lt;/button&gt;
 )}
 &lt;button type="submit"&gt;{submitBtnText}&lt;/button&gt;
 &lt;/div&gt;
 &lt;/form&gt;
 )
}
</code></pre>이 컴포넌트에서는 다양한 데이터들이 사용되고 있고, 이것들을 이용해서 컴포넌트의 다양한 행동들과 속성을 정의하고 있다. <code spellcheck="false">isLoggedIn</code>과 <code spellcheck="false">content</code>가 비어있다면 댓글을 작성할 수 없고, <code spellcheck="false">commentId</code>가 있다면 버튼의 텍스트는 '수정하기'이고..그런데, 왜 <code spellcheck="false">isLoggedIn</code>과 <code spellcheck="false">content</code>가 비어있다면 댓글을 작성할 수 없는걸까? 왜 <code spellcheck="false">commentId</code>가 있다면 버튼의 텍스트는 '수정하기'일까?코드를 읽다보면 동작 방식은 알 수 있어도 자세한 이유와 의미를 생각해보는 데에는 시간이 좀 들게 된다. 결국 이런 코드들이 많아질 수록 코드는 점점 읽기 힘들어지고 의미를 이해하기 힘들어진다.<h2>메소드 분리?</h2>클린코드에서는 어떤 함수가 한 가지 일만 하는 것이 아니게 되었다면 함수를 분리해보라고 권장한다.하지만 리액트의 컴포넌트에서는 자바의 클래스와 다르게, private 메소드 같은 것이 없다.<code spellcheck="false">WriteForm</code> 컴포넌트의 <code spellcheck="false">handleSubmit</code>의 로직이 복잡하다고 해서 함수를 분리해봐야 결국 그 함수도 <code spellcheck="false">WriteForm</code>에 생겨날 뿐이다. 결국 컴포넌트만 뚱뚱해지는 셈이다.<h1>클래스는 상태와, 상태와 연관된 동작을 정의한다</h1><blockquote><code spellcheck="false">commentId</code>, <code spellcheck="false">replyToCommentId</code>, <code spellcheck="false">isLoggedIn</code> 등등.. 이것들을 이용해서 컴포넌트의 다양한 행동들과 속성을 정의하고 있다.<code spellcheck="false">isLoggedIn</code>과 <code spellcheck="false">content</code>가 비어있다면 댓글을 작성할 수 없고, <code spellcheck="false">commentId</code>가 있다면 버튼의 텍스트는 '수정하기'이고..</blockquote>우리는 이럴 때에 클래스를 사용해볼 수 있다. 클래스는 상태들과, 그 상태들과 연관된 동작을 정의할 때 쓰는 틀이다.위에 적은 내용을 클래스를 이용해서 맥락이 드러나도록 코드를 만들어볼 수 있지 않을까?<pre spellcheck="false"><code class="language-typescript">class CommentWriteStatus {
 constructor(
 private readonly isLoggedIn: boolean,
 private readonly commentId: number | undefined,
 private readonly replyToCommentId: number | undefined,
 private readonly content: string
 ) {}

 isNewComment() {
 return !this.commentId
 }

 isReply() {
 return this.replyToCommentId !== undefined
 }

 canPublish() {
 return this.isLoggedIn &amp;&amp; this.content
 }

 getSubmitBtnText() {
 if (!this.isNewComment()) {
 return "수정하기"
 }

 if (this.isReply()) {
 return "답글 등록"
 }

 return "댓글 등록"
 }
}</code></pre>각 상태값들을 받아서, 댓글 입력창에서 취할 수 있는 행동들을 정의했다.<h2>리액트에 클래스 적용하기</h2><pre spellcheck="false"><code class="language-typescript">const WriteForm = ({
 commentId,
 replyToCommentId,
 initialContent = "",
 onCancel = () =&gt; {},
}: Props) =&gt; {
 const { isLoggedIn } = useAuthInfo()
 const [content, setContent] = useState(initialContent)

 const status = new CommentWriteStatus(
 isLoggedIn,
 commentId,
 replyToCommentId,
 content
 )

 // ...
}</code></pre>아까 언급한 대로, state에 클래스를 쓰거나 하는 용도는 어렵다. 하지만 state는 원래의 방식대로 <code spellcheck="false">useState</code>를 이용해서 정의하고, 비즈니스 로직을 위한 함수 발사대의 용도로 불변 클래스를 활용해주자.원래도 객체지향에서 중요한 것은 변수값이 아닌, 메소드들이었으니까.<pre spellcheck="false"><code class="language-typescript">const handleSubmit: FormEventHandler = async (e) =&gt; {
 e.preventDefault()

 if (!status.canPublish()) return

 if (status.isNewComment()) {
 await postComment({ content, replyToCommentId })
 setContent("")
 }

 if (!status.isNewComment()) {
 await putComment({ content })
 }

 onCancel()
};</code></pre>클래스의 메소드를 이용해서 코드를 교체해줬다.우리는 어떤 변수가 true고, 어떤 변수가 빈 문자열이 아닐 때 return을 한다~ 따위의 것이 궁금했던게 아니다. 그 대신에 비즈니스의 의미가 잘 드러날 수 있도록 코드를 변경해주니 누구라도 이해할 수 있게 되었다.<pre spellcheck="false"><code class="language-typescript"> return (
 &lt;form onSubmit={handleSubmit}&gt;
 &lt;textarea
 autoFocus={!status.isNewComment() || status.isReply()}
 disabled={!isLoggedIn}
 value={content}
 onChange={(e) =&gt; setContent(e.target.value)}
 /&gt;
 &lt;div&gt;
 {(!status.isNewComment() || status.isReply()) &amp;&amp; (
 &lt;button onClick={onCancel}&gt;취소&lt;/button&gt;
 )}
 &lt;button type="submit"&gt;{status.getSubmitBtnText()}&lt;/button&gt;
 &lt;/div&gt;
 &lt;/form&gt;
);</code></pre>return 문 쪽도 더 의미가 잘 드러나게 변경된 것 같다.<h2>예시 2</h2>언틸에서는 블로그에 유저 블로그와 그룹 블로그라는 두 가지 종류가 있다. 그와 함께 방문하는 유저도 타입이 여러 개 존재하게 되는데.<pre spellcheck="false"><code class="language-typescript"> userType:
 | 'guest' // 비로그인
 | 'owner' // 본인
 | 'user' // 다른 유저
 | 'member' // 그룹 멤버
 | 'admin' // 그룹 관리자</code></pre>이렇게 blogType과 userType이 여러 개 존재함에 따라 각 타입 별로 권한도 다양하게 존재한다.<pre spellcheck="false"><code class="language-typescript">const FollowButton = () =&gt; {
 const { username, isFollowing, blogType, userType } = useBlogQuery()

 if (blogType === "user" &amp;&amp; userType === "owner") {
 return (
 &lt;Link href={`/@${username}/setting`}&gt;
 &lt;button&gt;프로필 수정&lt;/button&gt;
 &lt;/Link&gt;
 )
 }

 return (
 &lt;LoginDialogWrapper
 onClick={() =&gt; {
 isFollowing ? postUnfollow() : postFollow()
 }}
 &gt;
 &lt;button&gt;{isFollowing ? "팔로잉" : "팔로우"}&lt;/button&gt;
 &lt;/LoginDialogWrapper&gt;
 )
}</code></pre>유저 블로그면서 자신이 그 블로그의 주인일 경우, 팔로우를 할 이유가 없기 때문에 팔로우 버튼 대신에 '프로필 수정' 버튼을 보여주게 된다.애플리케이션 전체에서 이와 비슷하게 유저/블로그 타입을 통한 로직이 많은데, 이 경우 권한에 대한 내용이 한 곳에 뭉쳐있지 않고 이곳 저곳에 혼재되어 있게 된다.따라서 실수로 변경 누락을 하거나 잘못 설정하는 일이 발생할 수도 있다.<pre spellcheck="false"><code class="language-typescript">class BlogUserType {
 constructor(
 private readonly userType:
 | "guest" // 비로그인
 | "owner" // 본인
 | "user" // 다른 유저
 | "member" // 그룹 멤버
 | "admin", // 그룹 관리자
 private readonly blogType: "user" | "group"
 ) {}

 canFollow() {
 return !this.isMyUserBlog()
 }

 canEditAbout() {
 return this.isMyUserBlog() || this.isAdmin()
 }

 private isMyUserBlog() {
 return this.isUserBlog() &amp;&amp; this.userType === "owner"
 }

 private isUserBlog() {
 return this.blogType === "user"
 }

 private isAdmin() {
 return this.userType === "admin" || this.userType === "owner"
 }
}</code></pre>이런 느낌으로 권한을 좀 정리해볼 수 있지 않을까.<h1>커스텀 훅</h1>물론 예제로 들었던 이것들, 커스텀 훅으로 만들 수 있다. 상태값을 받아서 함수 or 값을 뱉는 것이라면 클래스나 훅이나 똑같다.<pre spellcheck="false"><code class="language-typescript">function useCommentWriteStatus(
 isLoggedIn: boolean,
 commentId: number | undefined,
 replyToCommentId: number | undefined,
 content: string
) {
 const isNewComment = !commentId
 const isReply = replyToCommentId !== undefined
 const canPublish = isLoggedIn &amp;&amp; content

 function getSubmitBtnText() {
 if (!isNewComment) {
 return "수정하기"
 }

 if (isReply) {
 return "답글 등록"
 }

 return "댓글 등록"
 }

 return {
 isNewComment,
 isReply,
 canPublish,
 getSubmitBtnText,
 }
}

// 사용 예시
const { canPublish } = useCommentWriteStatus(true, 1, 2, "content")</code></pre>사실 리액트를 처음 공부하면서 훅에 대해서 배울 때, "아, 이게 리액트에서 제공하는 클래스구나"라는 생각이 들었다.변수값들을 생성자처럼 받아서 훅 내부에서 함수들을 생성한 후 public으로 공개하고 싶은 녀석들만 return하면 그게 클래스지.하... 하지만 클래스 쓰는게 멋있잖아?? 리액트에서 클래스 쓰는 힙한 사람처럼 보일 수 있다는 점에서 장점이 있는 것 같다.농담이고, 이런 커스텀 훅을 만들어서 비즈니스 로직을 묶는 것도 좋은 방법이지만 클래스 쪽이 private 메소드 등을 이용해서 좀 더 가독성 있는 코드를 쓸 수 있는 것 같다는 개인적인 생각이 들어서 적절한 때에 잘 이용하고 있다. 살짝 테스트하기도 더 쉬운 것 같기도 하고..

클래스로 뚱뚱한 컴포넌트를 정리해보기

React에서 Class 사용해보기

🧑‍💻 Develop

<img src="https://image.until.blog/morethanmin/article/1716457407086" alt="until-193"><blockquote>react, next.js, solidjs, preact,svelte, vue 등에서 컴포넌트 코드 위치를 손쉽게 찾을 수 있도록 도와주는 extension</blockquote>최근에 사용해본 크롬 익스텐션 중 신기한 익스텐션이 있어서 공유해보려고 한다...본인들의 말에 의하면 리액트 개발 생산성을 8% 증가 시킬 수 있다고 한다...그것은 바로 locator js... 브라우저에서 특정 영역의 컴포넌트 코드 위치를 찾고자 할때 유용하게 사용할 수 있다.<a target="_blank" rel="noopener noreferrer nofollow" href="https://www.locatorjs.com/">홈페이지</a>에 가면 설치하지 않고 실제로 사용해볼 수 있으니 궁금하면 가서 사용해보자.<h1>사용법</h1><a target="_blank" rel="noopener noreferrer nofollow" href="https://chromewebstore.google.com/detail/locatorjs/npbfdllefekhdplbkdigpncggmojpefi">크롬 웹스토어</a>에서 locator js를 설치해주면 설치해주고 홈페이지에 나와있는 <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.locatorjs.com/">가이드</a>를 참고하면 된다.본인의 개발환경을 띄우고, 브라우저에서 윈도우에서는 <code spellcheck="false">alt</code> , 맥에서는 <code spellcheck="false">option</code> 을 누르고 특정 영역을 클릭하면 바로 찾아준다.<hr><h1>후기</h1>근데 devDependency로 설치해줄 만큼 유용한지는 잘 모르겠음

react, next.js, solidjs, preact,svelte, vue 등에서 컴포넌트 코드 위치를 손쉽게 찾을 수 있도록 도와주는 extension최근에 사용해본 크롬 익스텐션 중 신기한 익스텐션이 있어서 공유해보려고 한다...본인들의 말에 의하면 리액트 개발 생산성을 8% 증가 시킬 수 있다고 한다...그것은 바로 locator js... 브라우

브라우저에서 컴포넌트 코드 위치를 찾아주는 extension, Locator JS

🖥 백엔드

<h1>들어가기 앞서</h1>최근 Docker로 어플리케이션을 배포하는 것이 큰 유행이 됨에 따라, Spring Boot 프로젝트도 도커화하여 서버를 배포하는 요구가 늘어나고 있다.Spring Boot에서 자체적으로 스프링 어플리케이션을 이미지로 만들어주는 <code spellcheck="false">bootBuildImage</code>라는 gradle task를 지원하지만, 이것만으로는 CI/CD를 구축하는 것을 완성할 수 없다.도커 애플리케이션을 배포하려면 보통 Dockerhub를 사용하지만.. private한 서버 애플리케이션을 공개적인 Dockerhub에 올릴 수는 또 없는 노릇이다. 따라서 AWS에서 제공하는 ECR (Elastic Container Registry)에 업로드해야 한다.한번 Spring Boot 프로젝트를 <code spellcheck="false">bootBuildImage</code>를 사용해서 도커 이미지화한 뒤, 이를 AWS ECR에 등록하는 파이프라인을 구축해보자.<h1>TLDR;</h1>내가 작성한 yaml 파일 전문은 다음과 같다.<pre spellcheck="false"><code class="language-yaml">name: Deploy to AWS ECR

on:
 push:
 branches:
 - main

jobs:
 build-and-deploy:
 runs-on: ubuntu-latest

 steps:
 - name: Checkout repository
 uses: actions/checkout@v3

 - name: Set up JDK
 uses: actions/setup-java@v3
 with:
 distribution: 'adopt'
 java-version: 자바버전을적으세요

 - name: Grant execute permission for gradlew
 run: chmod +x ./gradlew

 - name: Build Docker image
 run: ./gradlew bootBuildImage

 - name: Configure AWS credentials
 uses: aws-actions/configure-aws-credentials@v1
 with:
 aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
 aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
 aws-region: ap-northeast-2

 - name: Login to Amazon ECR
 id: ecr-login
 uses: aws-actions/amazon-ecr-login@v2

 - name: Build, tag, and push image to ECR
 env:
 ECR_REGISTRY: ${{ steps.ecr-login.outputs.registry }}
 ECR_REPOSITORY: ECR레포지토리이름을적으세요
 IMAGE_TAG: ${{ github.sha }}
 run: |
 docker tag 도커이미지이름을적으세요:latest $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG
 docker push $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG

 - name: Logout from Amazon ECR
 run: docker logout ${{ steps.ecr-login.outputs.registry }}</code></pre><h1>Github Secret에 Access Key 등록하기</h1>Github Action을 통해 파이프라인을 구축할 계획이고, 이를 위해서는 AWS의 Access Key가 필요하다.다음과 같이 Github Repository의 Settings - Secrets and Variable - Actions에 <code spellcheck="false">AWS_ACCESS_KEY_ID</code>와 <code spellcheck="false">AWS_SECRET_ACCESS_KEY</code>를 등록해주자. (꼭 네이밍을 똑같이 할 필요는 없으나, 뒤의 예제에서 이름이 동일하도록 맞춰주어야 한다)<img src="https://image.until.blog/octoping/article/1723047958882" alt="until-1190"><h1>AWS ECR 레포지토리 생성하기</h1><img src="https://image.until.blog/octoping/article/1723048881630" alt="until-1193">또한, ECR에 배포하기 위해서는 AWS ECR 레포지토리가 존재해야 한다. 없다면 만들고 옵시다.<h1>Github Actions 작성하기</h1>Github Actions 스크립트를 작성하기 위해 프로젝트 최상단에 <code spellcheck="false">.github</code> 폴더를 생성하고, <code spellcheck="false">deploy-ecr.yml</code>이라는 파일을 만들었다. (yaml 파일 이름은 당연히 원하는 대로 지정 가능하다)<h2>파이프라인이 언제 작동할지 지정하기</h2><img src="https://image.until.blog/octoping/article/1723048122512" alt="until-1191"><pre spellcheck="false"><code class="language-yaml">on:
 push:
 branches:
 - main</code></pre>나는 Git Flow 브랜치 전략를 약간 수정하여 사용하고 있다. <code spellcheck="false">release</code> 브랜치 대신 <code spellcheck="false">main</code> 브랜치를 사용하고 있고, 따라서 main 브랜치에 push될 때마다 해당 파이프라인이 동작하여 ECR에 등록되도록 구현하려고 한다.<h2>bootBuildImage로 이미지화하기</h2><pre spellcheck="false"><code class="language-yaml">jobs:
 build-and-deploy:
 runs-on: ubuntu-latest

 steps:
 - name: Checkout repository
 uses: actions/checkout@v3

 - name: Set up JDK
 uses: actions/setup-java@v3
 with:
 distribution: 'adopt'
 java-version: '17'

 - name: Grant execute permission for gradlew
 run: chmod +x ./gradlew

 - name: Build Docker image
 run: ./gradlew bootBuildImage</code></pre>우리 코드를 체크아웃 받은 후, 자바 17 환경에서 작동할 수 있도록 버전을 명시해준다. 자바 버전을 다르게 하고 싶다면 따로 수정하면 된다.그 후에는 <code spellcheck="false">./gradlew bootBuildImage</code>를 실행할 수 있도록 gradlew를 '실행 가능하도록' 권한을 수정해준 후 <code spellcheck="false">bootBuildImage</code> 명령을 실행시킨다.<h2>AWS ECR에 로그인하기</h2><pre spellcheck="false"><code class="language-yaml"> - name: Configure AWS credentials
 uses: aws-actions/configure-aws-credentials@v1
 with:
 aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
 aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
 aws-region: ap-northeast-2

 - name: Login to Amazon ECR
 id: ecr-login
 uses: aws-actions/amazon-ecr-login@v2</code></pre>ECR에 배포하기 위해서는 ECR에 로그인해야 하는데, 이는 <code spellcheck="false">aws-actions/configure-aws-credentials</code>를 이용하려고 한다.v1 버전이 현재 (24년 8월) 기준 최신은 아니지만 (v4가 최신), accessKey로 로그인하고 싶었기 때문에 v1을 사용하였다.만약 본인의 리전이 <code spellcheck="false">ap-northeast-2</code>가 아니면 이 부분도 바꿔주도록 하자.<h2>AWS ECR에 푸시 후 로그아웃하기</h2><pre spellcheck="false"><code class="language-yaml"> - name: Build, tag, and push image to ECR
 env:
 ECR_REGISTRY: ${{ steps.ecr-login.outputs.registry }}
 ECR_REPOSITORY: ECR레포지토리이름
 IMAGE_TAG: ${{ github.sha }}
 run: |
 docker tag 도커이미지이름:latest $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG
 docker push $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG

 - name: Logout from Amazon ECR
 run: docker logout ${{ steps.ecr-login.outputs.registry }}</code></pre>ECR 레포지토리에 푸시할 차례다. <code spellcheck="false">ECR_REPOSITORY</code> 환경변수 부분과 <code spellcheck="false">run</code> 부분에 자신의 레포지토리 이름과 도커 이미지 이름을 적어주자.<h2>총정리</h2><pre spellcheck="false"><code class="language-yaml">name: Deploy to AWS ECR

on:
 push:
 branches:
 - main

jobs:
 build-and-deploy:
 runs-on: ubuntu-latest

 steps:
 - name: Checkout repository
 uses: actions/checkout@v3

 - name: Set up JDK
 uses: actions/setup-java@v3
 with:
 distribution: 'adopt'
 java-version: 자바버전을적으세요

 - name: Grant execute permission for gradlew
 run: chmod +x ./gradlew

 - name: Build Docker image
 run: ./gradlew bootBuildImage

 - name: Configure AWS credentials
 uses: aws-actions/configure-aws-credentials@v1
 with:
 aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
 aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
 aws-region: ap-northeast-2

 - name: Login to Amazon ECR
 id: ecr-login
 uses: aws-actions/amazon-ecr-login@v2

 - name: Build, tag, and push image to ECR
 env:
 ECR_REGISTRY: ${{ steps.ecr-login.outputs.registry }}
 ECR_REPOSITORY: ECR레포지토리이름을적으세요
 IMAGE_TAG: ${{ github.sha }}
 run: |
 docker tag 도커이미지이름을적으세요:latest $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG
 docker push $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG

 - name: Logout from Amazon ECR
 run: docker logout ${{ steps.ecr-login.outputs.registry }}</code></pre>끝났다! 이로써 main 브랜치에 커밋될 때마다 AWS ECR에 이미지를 푸시하는 파이프라인이 완성되었다.<h1>마무리하며</h1>이렇게 작업한 이후에는 ECR에 올라가있는 이미지를 이용해서 서버를 실행시키는 작업도 추가해야 할 것이다. (EC2로 실행할지, ECR로 실행할지 등에 따라 이 동작의 구현법도 달라질 것이다)

커밋될 때마다 Spring Boot 프로젝트를 ECR에 배포하기

<h2>1. 스레드 생성 방법</h2><h3>1-1. Runnable 인터페이스 사용</h3>방법<ul><li>Runnable 인터페이스를 구현한 클래스를 생성한다</li><li>해당 객체를 Thread 의 생성자에 전달함</li></ul><pre spellcheck="false"><code>public class Thread implements Runnable { // Runnable 구현

//생성자에 전달됨.
public Thread(Runnable task) {
 this(null, null, 0, task, 0, null);
}
</code></pre><h3>1-2. Thread 클래스를 확장</h3><ul><li>방법<ul><li>Thread 클래스를 확장한 새로운 클래스를 생성한다</li></ul></li><li>특징<ul><li>Thread 가 이미 Runnable 클래스를 구현하고 있음.</li><li>run만 오버라이딩하면된다.</li></ul></li></ul><h2>실습 : 금고 해킹 시뮬레이션</h2>시나리오<ol><li>금고 설계<ul><li>임의 비밀번호가 설정된 금고 있음</li></ul></li><li>목표<ol><li>해커가 금고 비밀번호를 맞추기 전에 경찰이 잡으러 도착한다</li></ol></li><li>스레드 역할<ol><li>해커 스레드<ul><li>금고 비밀번호를 추측한다</li></ul></li><li>경찰 스레드<ul><li>10초 후 도착하여 해커를 체포</li></ul></li></ol></li></ol><pre spellcheck="false"><code>public class Main {
 public static final int MAX_PASSWORD = 9999;

 public static void main(String[] args) {
 Random random = new Random();

 Vault vault = new Vault(random.nextInt(MAX_PASSWORD));

 List&lt;Thread&gt; threads = List.of(
 new AscendingHackerThread(vault),
 new DescendingHackerThread(vault),
 new PoliceThread()
 );

 threads.forEach(Thread::start);
 }

// 금고 클래스
// 비밀번호 맞는지 체크
// 해커의 속도 늦추기 위해 5ms 지연
 private static class Vault {
 private int password;

 public Vault(int password) {
 this.password = password;
 }

 public boolean isCorrectPassword(int guess) {
 try {
 Thread.sleep(5);
 } catch (InterruptedException e) {
 e.printStackTrace();
 }

 return this.password == guess;
 }
 }

//해커 스레드 추상체
// Vault 라는 금고 객체가 있으며
// 해당 스레드 객체의 우선순위는 TOP 이다.
 private static abstract class HackerThread extends Thread {
 protected Vault vault;

 public HackerThread(Vault vault) {
 this.vault = vault;
 this.setName(this.getClass().getSimpleName());
 this.setPriority(Thread.MAX_PRIORITY);
 }

 @Override
 public void start() {
 System.out.println("Starting thread: " + this.getName());
 super.start();
 }
 }

//구현체 1 0 부터 9999까지 맞추기
 private static class AscendingHackerThread extends HackerThread {
 public AscendingHackerThread(Vault vault) {
 super(vault);
 }

 @Override
 public void run() {
 for (int guess = 0; guess &lt; MAX_PASSWORD; guess++) {
 if (vault.isCorrectPassword(guess)) {
 System.out.println(this.getName() + " guessed the password: " + guess);
 System.exit(0);
 }
 }
 }
 }

// 구현체 2 9999 부터 0까지 맞추기
 private static class DescendingHackerThread extends HackerThread {
 public DescendingHackerThread(Vault vault) {
 super(vault);
 }

 @Override
 public void run() {
 for (int guess = MAX_PASSWORD; guess &gt;= 0; guess--) {
 if (vault.isCorrectPassword(guess)) {
 System.out.println(this.getName() + " guessed the password: " + guess);
 System.exit(0);
 }
 }
 }
 }

// 경찰 스레드
// 총 10의 숫자를 센다. ( 10초 )
 private static class PoliceThread extends Thread {
 @Override
 public void run() {
 for (int i = 10; i &gt; 0; i--) {
 try {
 Thread.sleep(1000);
 } catch (InterruptedException e) {
 e.printStackTrace();
 }
 System.out.println(i);
 }

 System.out.println("Game over for you hackers");
 System.exit(0);
 }
 }
}
</code></pre><h3>실습 : 코드1</h3>코딩 연습 1: 스레드 생성 - MultiExecutor이번 연습에서는 <code spellcheck="false">MultiExecutor</code>를 구현해 보겠습니다.이 클래스의 클라이언트는 <code spellcheck="false">Runnable</code> 작업의 목록을 생성해서 해당 목록을 <code spellcheck="false">MultiExecutor</code>의 생성자에게 제공할 것입니다.클라이언트가 <code spellcheck="false">executeAll()</code>을 실행하면, <code spellcheck="false">MultiExecutor</code>가 주어진 모든 작업을 실행하게 됩니다.멀티코어 CPU를 최대한 활용하기 위해, 우리는 각 작업을 서로 다른 스레드로 전달해서 <code spellcheck="false">MultiExecutor</code>가 모든 작업을 동시에 진행하게 하려고 합니다.<pre spellcheck="false"><code>import java.util.ArrayList;
import java.util.List;

public class MultiExecutor {

 private final List&lt;Runnable&gt; tasks;

 /*
 * @param tasks to executed concurrently
 */
 public MultiExecutor(List&lt;Runnable&gt; tasks) {
 this.tasks = tasks;
 }

 /**
 * Executes all the tasks concurrently
 */
 public void executeAll() {
 List&lt;Thread&gt; threads = new ArrayList&lt;&gt;(tasks.size());

 for (Runnable task : tasks) {
 Thread thread = new Thread(task);
 threads.add(thread);
 }

 for(Thread thread : threads) {
 thread.start();
 }
 }
}
</code></pre><h2>스레드 종료 및 데몬 스레드</h2><h3>스레드 조정 필요성</h3><ol><li>스레드 리소스 정리<ul><li>스레드는 실행 중이 아니더라도 메모리, CPU 캐시, 커널 리소스를 사용한다.</li><li>작업 완료 후에 종료되지 않은 스레드는 시스템 리로스를 낭비함</li></ul></li><li>오작동 방지<ul><li>스레드가 무한 루프, 긴 계산, 잘못된 요청 등을 실행하는 경우 중단이 필요하다</li></ul></li><li>어플 종료<ul><li>실행 중인 스레드가 하나라도 있으면 어플 종료 안됨.</li><li>모든 스레드 중단해야함</li></ul></li></ol><h3>스레드 중단 법</h3><ol><li>Thread.interrupt<pre spellcheck="false"><code>public class Main {
 public static void main(String[] args) {
 Thread thread = new Thread(new BlockingTask());
 thread.start();

 thread.interrupt();
 }

 private static class BlockingTask implements Runnable {
 @Override
 public void run() {
 try {
 Thread.sleep(500000);
 } catch (InterruptedException e) {
 System.out.println("Exiting blocking thread");
 }
 }
 }
}
</code></pre><pre spellcheck="false"><code>public class Main {
 public static void main(String[] args) {
 Thread thread = new Thread(new LongComputationTask(new BigInteger("2"), new BigInteger("10")));

 thread.start();

 thread.interrupt();
 }

 private static class LongComputationTask implements Runnable {
 private final BigInteger base;
 private final BigInteger power;

 public LongComputationTask(BigInteger base, BigInteger power) {
 this.base = base;
 this.power = power;
 }

 @Override
 public void run() {
 System.out.println(base + "^" + power + " = " + pow(base, power));
 }

 private BigInteger pow(BigInteger base, BigInteger power) {
 // 0
 BigInteger result = BigInteger.ONE;

 //의미 : power만큼 반복
 for (BigInteger i = BigInteger.ZERO; i.compareTo(power) != 0; i = i.add(BigInteger.ONE)) {
 result = result.multiply(base);
 }

 return result;
 }
 }
}
</code></pre></li></ol><ul><li>위와 같은 코드에서 2 ^ 10은 얼마 안걸림<ul><li>근데 20000 ^ 100000 같은 경우 겁나 오래걸림</li></ul></li><li>thread.interrupt(); 를 수행해도<ul><li>interrupt 를 받는 부분이 없어서 무한 루프에 걸리는 건 여전함</li></ul></li><li>그래서 for문 중간에<pre spellcheck="false"><code> //의미 : power만큼 반복
 for (BigInteger i = BigInteger.ZERO; i.compareTo(power) != 0; i = i.add(BigInteger.ONE)) {
 // 스레드가 interrupt되었는지 확인
 if (Thread.currentThread().isInterrupted()) {
 System.out.println("Prematurely interrupted computation");
 return BigInteger.ZERO;
 }

 result = result.multiply(base);
 }
</code></pre><ul><li>해당 내용을 추가해야한다.</li></ul></li></ul><h2>데몬 스레드</h2><ul><li>긴 계산 작업을 수행하는 스레드를 Daemon 으로 설정한다</li><li>메인 스레드가 종료되는 경우 Daemon 스레드도 자동으로 종료된다.</li></ul><pre spellcheck="false"><code class="language-jsx">public class Main {
 public static void main(String[] args) {
 Thread thread = new Thread(new LongComputationTask(new BigInteger("20000"), new BigInteger("100000")));
 
 //데몬 설정으로 -&gt; 메인 스레드 종료시 같이 스레드가 종료되게 설정
 thread.setDaemon(true);
 thread.start();
 
 //interrupt 가 수행되는 경우 메인 스레드가 종료되게 되는데
 thread.interrupt();
 //메인 스레드 종료와 함께 새로운 데몬 스레드도 같이 종료처리.
 }
 
 private static class LongComputationTask implements Runnable {
 private final BigInteger base;
 private final BigInteger power;
 
 public LongComputationTask(BigInteger base, BigInteger power) {
 this.base = base;
 this.power = power;
 }
 
 @Override
 public void run() {
 System.out.println(base + "^" + power + " = " + pow(base, power));
 }
 
 private BigInteger pow(BigInteger base, BigInteger power) {
 // 0
 BigInteger result = BigInteger.ONE;
 
 //의미 : power만큼 반복
 for (BigInteger i = BigInteger.ZERO; i.compareTo(power) != 0; i = i.add(BigInteger.ONE)) {
 result = result.multiply(base);
 }
 
 return result;
 }
 }
}
</code></pre>

1. 스레드 생성 방법1-1. Runnable 인터페이스 사용방법Runnable 인터페이스를 구현한 클래스를 생성한다해당 객체를 Thread 의 생성자에 전달함public class Thread implements Runnable { // Runnable 구현

//생성자에 전달됨.
public Thread(Runnable task) {
   this(nu

[TIL] 자바 동시성. 스레드 실습

프로그래밍언어

<code spellcheck="false">JDK21</code>이 등장했다! 그렇다면, 먼저 JDK 21에서 어떤 기능이 추가되었는지 알아보는 것이 개발자된 도리가 아닌가!일단, 다음 <a target="_blank" rel="noopener noreferrer nofollow" href="https://spring.io/blog/2023/09/20/hello-java-21">Hello, Java 21</a>에 들어가보자. JDK 17부터 쭉 스토리를 이어가보자.<h1>JDK 17</h1><h2>Multiline Lines</h2>파이썬 주석을 쓰는 방식처럼 Java 17에서는 <code spellcheck="false">""" .... """</code> 을 이용하여 다중줄을 지원한다. JSON, JDBC, JPA QL, etc., 을 더 쉽게 표현할 수 있을 것이다.<pre spellcheck="false"><code class="language-java">package bootiful.java21;

import org.junit.jupiter.api.Assertions;
import org.junit.jupiter.api.Test;

class MultilineStringTest {

 @Test
 void multiline() throws Exception {

 var shakespeare = """

 To be, or not to be, that is the question:
 Whether 'tis nobler in the mind to suffer
 The slings and arrows of outrageous fortune,
 Or to take arms against a sea of troubles
 And by opposing end them. To die—to sleep,
 No more; and by a sleep to say we end
 The heart-ache and the thousand natural shocks
 That flesh is heir to: 'tis a consummation
 Devoutly to be wish'd. To die, to sleep;
 To sleep, perchance to dream—ay, there's the rub:
 For in that sleep of death what dreams may come,
 """;
 Assertions.assertNotEquals(shakespeare.charAt(0), 'T');

 shakespeare = shakespeare.stripLeading();
 Assertions.assertEquals(shakespeare.charAt(0), 'T');
 }

}</code></pre><h2>Record</h2>프로젝트를 수행할 때, 필자는 이 녀석을 굉장히 좋아한다. 이 녀석은 <a target="_blank" rel="noopener noreferrer nofollow" href="https://docs.oracle.com/en/java/javase/17/language/records.html">오라클 문서</a>에 잘 나와있다. <code spellcheck="false">Record</code>는 외부 라이브러리인 Lombok의 의존성을 줄이고, 간결하고 가독성 높은 데이터 클래스를 작성할 수 있게 한다.<ol><li>명시적인 필드 선언, 생성자, getter, setter 등을 대체</li><li>기본적으로 불변객체로 생성해 데이터의 안정성과 무결성을 보장 (암묵적으로 final)</li><li>toString, equals, hansCode 메서드가 자동으로 생성</li><li>static 메소드, static 필드 선언 가능 (클래스 기능과 동일)</li><li>중첩 클래스 사용 가능 및 제너릭 타입으로 지정 가능 (클래스 기능과 동일)</li></ol><code spellcheck="false">record(헤더) {바디}</code> 형태로 이루어져있는데, 헤더에 나열된 필드는 private final로 정의된다.<pre spellcheck="false"><code class="language-java">package bootiful.java21;

import org.junit.jupiter.api.Assertions;
import org.junit.jupiter.api.Test;

class RecordTest {

 record JdkReleasedEvent(String name) { }

 @Test
 void records() throws Exception {
 var event = new JdkReleasedEvent("Java21");
 Assertions.assertEquals( event.name() , "Java21");
 System.out.println(event);

 }
}</code></pre>Record 클래스는 어디서 사용할 수 있을까? DTO에서 Record 클래스를 자주 사용한다.<pre spellcheck="false"><code class="language-java">@Getter
@NoArgsConstructor(access = AccessLevel.PROTECTED)
public class MemberResponse {
	private Long memberId;
	private String name;
	private Role role;
	private Building building;

	@Builder
	public MemberResponse(Long memberId, String name, Role role, Building building) {
		this.memberId = memberId;
		this.name = name;
		this.role = role;
		this.building = building;
	}
}</code></pre>Record도 특수한 종류의 클래스이므로 <code spellcheck="false">new</code>키워드를 사용하여 레코드 객체(레코드 클래스의 인스턴스)를 생성한다.<pre spellcheck="false"><code class="language-java">public record MemberResponse(Long memberId, String name, Role role, Building building) {
 public static MemberResponse fromRequest(Request request) {
 return new MemberResponse(request.getMemberId, request.getName, request.getRole, request.getBuilding);
 }
}

// 사용
public MemberResponse createMember(MemberRequest reqeust) {
 ...
 return MemberResponse.fromRequest(request);
}</code></pre><blockquote>💡 <a target="_blank" rel="noopener noreferrer nofollow" href="https://medium.com/javarevisited/deciphering-jpas-hibernate-s-limitations-the-reasoning-behind-java-records-not-being-supported-56a57d3ff9ca">Entity가 Record 클래스가 될 수 없는 이유</a> Record는 불변객체이며, 매개변수가 없는 생성자를 제공하지 않으며, Record의 필드 또한 private final로 설정되어있다. 그러나 JPA를 사용하는 1) 엔티티 클래스에는 쿼리 결과를 매핑할 때, 객체를 인스턴스화할 수 있도록 public 또는 protected인 매개변수가 없는 생성자가 있어야한다. 또한, 2) 프록시를 생성할 수 있도록 클래스는 final이면 안된다. 3) 필드도 setter가 있어야하기 때문에 final이면 안된다. Hibernate를 사용하면, final 클래스를 유지할 수 있고, 매핑된 엔티티 속성에 대한 접근자 메서드가 필요하지않지만, 프록시를 생성하기 위해 여전히 기본 생성자와 final이 아닌 필드가 필요하다.</blockquote><h2>Switch Statement</h2>잘 쓰고싶지않던 Switch문이 바뀌었다!가장 눈에 띄는 것은 <code spellcheck="false">case label1, label2 .. -&gt;</code> 와 같은 형태로 바뀌었다는 것인데, 1. 여러개의 label를 동시에 작성 가능, 2. 번거로운 break문이 없어짐을 확인할 수 있다.switch문은 이제 표현식이기 때문에 switch문의 결과를 변수에 할당하거나 반환 값으로 줄 수 있게 변경되었다는 점도 중요하다!<pre spellcheck="false"><code class="language-java">package bootiful.java21;

import org.junit.jupiter.api.Assertions;
import org.junit.jupiter.api.Test;

import java.time.DayOfWeek;

class EnhancedSwitchTest {

 // 기존 
 int calculateTimeOffClassic(DayOfWeek dayOfWeek) {
 var timeoff = 0;
 switch (dayOfWeek) {
 case MONDAY, TUESDAY, WEDNESDAY, THURSDAY, FRIDAY:
 timeoff = 16;
 break;
 case SATURDAY, SUNDAY:
 timeoff = 24;
 break;
 }
 return timeoff;
 }

 // 변경
 int calculateTimeOff(DayOfWeek dayOfWeek) {
 return switch (dayOfWeek) {
 case MONDAY, TUESDAY, WEDNESDAY, THURSDAY, FRIDAY -&gt; 16;
 case SATURDAY, SUNDAY -&gt; 24;
 };
 }

 @Test
 void timeoff() {
 Assertions.assertEquals(calculateTimeOffClassic(DayOfWeek.SATURDAY), calculateTimeOff (DayOfWeek.SATURDAY));
 Assertions.assertEquals(calculateTimeOff(DayOfWeek.FRIDAY), 16);
 Assertions.assertEquals(calculateTimeOff(DayOfWeek.FRIDAY), 16);
 }
}</code></pre>반환값이 있기 때문에 아래 코드같이 작성도 가능하고, 출력문에도 쓸 수 있다.<pre spellcheck="false"><code class="language-java">static int coverage(Object o) {
 return switch (o) {
 case String s -&gt; s.length();
 case Integer i -&gt; i;
 default -&gt; 0;
 };
}</code></pre><h2>InstanceOf Check &amp; Sealed Types</h2>Sealed Class, Interface는 간단하게 상속하거나(extends), 구현(implements)할 클래스를 지정해두고 해당 클래스들만 상속 혹은 구현을 허용하는 키워드이다. 이것의 목표는 어떤 Super Class의 Sub Class들을 명확히 인지할 수 있어야 한다는 것이다! 몇가지 제약사항이 존재한다.<ul><li>모든 하위 클래스를 알아야함</li><li>하위클래스는 sealed된 클래스를 직접 상속받아야함 (중간에 다른 클래스가 끼어들면 안됨)</li><li>세 가지 종류의 하위 클래스 규칙<ul><li><code spellcheck="false">final</code>: 더 이상 다른 클래스가 이 클래스를 상속받을 수 없다. 즉, 이 클래스가 상속의 끝이다.</li><li><code spellcheck="false">sealed</code>: 다시 봉인된 상태로, 특정한 클래스들만 이 클래스를 상속받을 수 있다.</li><li><code spellcheck="false">non-sealed</code>: 제한 없이 어떤 클래스든 이 클래스를 상속받을 수 있다. 봉인된 클래스가 하위 클래스를 제한해도, <code spellcheck="false">non-sealed</code>로 선언되면 그 제한을 풀어버릴 수 있다.</li></ul></li><li>같은 모듈이나 패키지 안에 있어야함</li></ul><pre spellcheck="false"><code class="language-java">package bootiful.java21;

import org.junit.jupiter.api.Assertions;
import org.junit.jupiter.api.Test;

class SealedTypesTest {

 // ①
 sealed interface Animal permits Bird, Cat, Dog {
 }

 // ②
 final class Cat implements Animal {
 String meow() {
 return "meow";
 }
 }

 final class Dog implements Animal {
 String bark() {
 return "woof";
 }
 }

 final class Bird implements Animal {
 String chirp() {
 return "chirp";
 }
 }

 @Test
 void doLittleTest() {
 Assertions.assertEquals(communicate(new Dog()), "woof");
 Assertions.assertEquals(communicate(new Cat()), "meow");
 }

 // ③
 String classicCommunicate(Animal animal) {
 var message = (String) null;
 if (animal instanceof Dog dog) {
 message = dog.bark();
 }
 if (animal instanceof Cat cat) {
 message = cat.meow();
 }
 if (animal instanceof Bird bird) {
 message = bird.chirp();
 }
 return message;
 }

 // ④
 String communicate(Animal animal) {
 return switch (animal) {
 case Cat cat -&gt; cat.meow();
 case Dog dog -&gt; dog.bark();
 case Bird bird -&gt; bird.chirp();
 };
 }

}</code></pre>

JDK 21의 등장 feat.JDK 17

<h2>우리들의 패키지 구성 방법</h2>여러분의 패키지 구성법은 무엇인가요?<pre spellcheck="false"><code>// 도메인형
└─src
 ├─member
 │ ├─controller
 │ ├─repository
 │ └─service
 └─post
 ├─controller
 ├─repository
 └─service
// 레이어형
└─src
 ├─controller
 │ ├─member
 │ └─post
 ├─repostiory
 │ ├─member
 │ └─post
 └─service
 ├─member
 └─post</code></pre>패키지 구성법은 크게 2가지가 있는데, 이 중 도메인형에 대해 얘기해보려고 한다.<h2>API는 애석히도 여러 도메인에 걸친다</h2><pre spellcheck="false"><code>// 도메인형
└─src
 ├─member
 │ ├─controller
 │ ├─repository
 │ └─service
 └─post
 ├─controller
 ├─repository
 └─service</code></pre>다음과 같이 레이어를 구성할 경우, member와 관련된 api들은 <code spellcheck="false">/member/controller</code>에 들어가게 된다. 그런데, api는 애석히도 여러 도메인에 걸치는 경우가 많다.예를 들어보자. 다음의 api들은 각각 어떤 컨트롤러에 들어가야 할까?<ul class="tight" data-tight="true"><li>특정 회원의 팔로워들의 글을 최신 순으로 모아서 보여주는 api</li><li>특정 글에 '좋아요'를 누른 회원의 목록을 모아서 보여주는 api</li></ul>특정 '회원'의 '팔로워'의 '글'을 최신 순으로 모아서 보여주는 api의 얘기를 해보자. 이 api는 회원(member), 팔로우(follow), 글(post)라는 세 가지 도메인에 걸쳐있다.이렇게 된다면, <code spellcheck="false">MemberService</code> 혹은 <code spellcheck="false">PostService</code>는 3개의 다른 도메인의 의존성을 가지게 된다.이런 기능들이 쌓이다보면, <code spellcheck="false">MemberService</code>는 정작 회원과 관련된 일을 하지 못하고 점점 비대해지게 된다. <h2>API는 도메인과 겸상하지 않는다</h2>API는 클라이언트의 요구사항이자 사용자의 유스케이스를 보여주는 계층이다. 글 작성 api, 글 수정 api 등등… 모두 유스케이스 아닐까?도메인 로직은 영원하지만, 유스케이스는 바뀔 수 있다. ‘특정 회원의 팔로워들의 글을 최신 순으로 모아 보여주기’라는 유스케이스에 이건 <code spellcheck="false">Post</code>와 관련된 기능이라고 적어붙이는 것보다 더 나은 라벨링이 있지 않을까?왜 우리는 이런 유스케이스에 도메인의 이름을 붙여야 하는걸까?API를 도메인으로부터 분리해보면 어떨까.<h2>API와 Domain 분리하기</h2><pre spellcheck="false"><code>└─src
 ├─api
 │ ├─blog
 │ │ BlogMemberController.java
 │ │ BlogPostController.java
 │ │
 │ └─feed
 │ FeedMainPageController.java
 │ FeedRankingController.java
 │
 └─domain
 ├─member
 │ ├─repository
 │ └─service
 └─post
 ├─repository
 └─service</code></pre>‘특정 회원의 팔로워들의 글을 최신 순으로 모아 보여주기’는 피드 페이지의 기능이었다. 따라서 해당 api는 feed 폴더에 넣어주었다.'이 API는 Post의 기능'이라고 적어넣기 보다, 조금 더 실제 유저의 요구사항에 맞게 패키지를 구성하여 더 명시적인 프로젝트 구조를 만들 수 있었다.<h2>컨트롤러에 로직이 쌓여요</h2><pre spellcheck="false"><code class="language-java">public class FeedMainPageController {
 private final MemberService memberService;
 private final PostService postService;

 @GetMapping("/follower-posts")
 public FollowerPostDTO getFollowerPosts(
 @RequestParam("memberId") Long memberId,
 ) {
 if(!memberService.isMemberExist(memberId)) {
 throw new MemberNotFoundException(memberId);
 }
 
 List&lt;Long&gt; = memberService.getFollowerIds(memberId);
 List&lt;Post&gt; posts = postService.getPostsByMemberIds(followerIds);

 return new FollowerPostDTO(posts);
 }
}</code></pre>이렇게 특정 서비스에서 다른 도메인의 로직을 처리하는 일을 막을 수 있게 되었다. 하지만 이렇게 되니 컨트롤러에서 여러 다른 도메인의 서비스를 호출하는 역할이 생겨버렸다.명령 api와 같은 경우는 트랜잭션 등의 처리도 필요할텐데, 컨트롤러에서 이를 수행하는 건 좋지 않겠다.이를 처리해주는 새로운 레이어를 만들어보는 것은 어떨까?<h2>Usecase 레이어로 비즈니스 로직 더 잘 드러내기</h2><pre spellcheck="false"><code>└─src
 ├─api
 │ └─feed
 │ ├─controller
 │ │ FeedMainPageController.java
 │ │ FeedRankingController.java
 │ │
 │ └─usecase
 │ FeedUseCase.java
 │
 └─domain
 ├─member
 │ ├─repository
 │ └─service
 └─post
 ├─repository
 └─service</code></pre>API가 구현하고자 하는 실제 유스케이스의 로직을 나타내는 것이니 usecase라는 이름으로 레이어를 개설했다.컨트롤러 → 유스케이스 → 서비스 → 레포지토리와 같은, 4단계의 계층이 만들어진 셈이다.이러면 코드가 어떻게 될까?<pre spellcheck="false"><code class="language-java">public class FeedMainPageController {
 private final FeedMainPageUseCase feedMainPageUseCase;

 @GetMapping("/follower-posts")
 public FollowerPostDTO getFollowerPosts(
 @RequestParam("memberId") Long memberId,
 ) {
 var posts = feedMainPageUseCase.getFollowerPosts(memberId)
 return new FollowerPostDTO(posts);
 }
}

public class FeedMainPageUseCase {
 private final MemberService memberService;
 private final PostService postService;

 public List&lt;Post&gt; getFollowerPosts(Long memberId) {
 if(!memberService.isMemberExist(memberId)) {
 throw new MemberNotFoundException(memberId);
 }

 List&lt;Long&gt; = memberService.getFollowerIds(memberId);
 List&lt;Post&gt; posts = postService.getPostsByMemberIds(followerIds);

 return new posts;
 }
}</code></pre><h2>멀티 모듈의 초석이 될 수도 있다</h2>지금까지 api와 domain의 패키지 구조를 분리해봤다.이렇게 서로 성격이 다른 두 패키지를 분리했으니, 추후에 필요할 때에 이를 모듈로 나눠서 멀티 모듈 패키지를 구성해볼 수 있을 것 같다.<h2>멀티모듈이란?</h2><img src="https://image.until.blog/octoping/article/1717907997881" alt="until-428">api, domain과 같은 파트를 각각 한 단위인 모듈로 나눈다면, 우리는 원하는 부분만 따로 jar파일로 빌드하여 한 모듈이 다른 모듈을 라이브러리처럼 사용할 수가 있다.만약 그냥 api 서버만 있는게 아니라, 어드민 서버가 추가되야 한다면?<ul class="tight" data-tight="true"><li>어드민 서버 프로젝트 새로 파서 member, post 도메인의 코드를 복붙해오는 것은 조금 무식한 방법 아닐까.</li></ul><ul class="tight" data-tight="true"><li>어드민 모듈을 따로 만들어서 도메인 모듈을 라이브러리처럼 참고하면 되지 않을까?</li></ul><h2>마무리하며</h2>패키지와 레이어의 구성은 항상 정답이 있는게 아니다. 프로젝트가 간단하다면 컨트롤러 하나만으로 구성해볼 수도 있는 것이고, 프로젝트가 훨씬 복잡하다면 더 많은 레이어를 구성해볼 수도 있다.이 아티클에서 다룬 내용도 꼭 정답임은 아니기 때문에, 이 아티클은 참고 하되 항상 프로젝트의 특성과 일하고 있는 조직의 상황에 맞게 알맞게 구성하는 것이 정답이라고 할 수 있겠다.

레이어를 잘 설계해서 프로젝트를 깔끔하게 유지해보자

관습적 레이어 설정 탈피를 통해 프로젝트 개선하기

⚛️ React

<img src="https://image.until.blog/morethanmin/article/1718207600669" alt="until-463"><blockquote>이전에 개인 블로그를 운영하면서 동적으로 오픈그래프를 적용했던 경험을 공유합니다.최근에는 아래 방법보다 간편하게 <code spellcheck="false">@vercel/og</code> 라이브러리로 좀 더 og이미지 생성 api를 만들 수 있습니다.관심 있으신 분들은 <a target="_blank" rel="noopener noreferrer nofollow" href="https://vercel.com/docs/functions/og-image-generation">공식 문서</a>를 참고해보시면 좋을 것 같습니다.</blockquote><h1>오픈 그래프?</h1>오픈그래프는 페이스북에서 처음 만들어진 개념으로 HTML 문서의 메타정보를 쉽게 표시하기 위해 해당 문서의 제목, 설명, 타입 이미지 등등을 정의해두는 것을 말한다. 쉽게 말해서 내가 카카오톡에 특정 링크를 공유했을 때, 해당 html의 문서의 open graph 메타 태그를 통해 해당 문서에 대한 간략한 요약을 만들어 표시해준다.일반적으로는 아래와 같은 정보를 포함시키고, 사이트마다 요구하는 별도의 태그가 존재하기도 한다. 해당 사이트에서 url에 대한 미리보기를 지원하고 싶으면 해당 og를 포함시켜야한다.<blockquote><ul><li><code spellcheck="false">og:title</code> - The title of your object as it should appear within the graph, e.g., "The Rock".</li><li><code spellcheck="false">og:type</code> - The <a target="_blank" rel="noopener noreferrer nofollow" href="https://ogp.me/#types">type</a> of your object, e.g., "<a target="_blank" rel="noopener noreferrer nofollow" href="http://video.movie">video.movie</a>". Depending on the type you specify, other properties may also be required.</li><li><code spellcheck="false">og:image</code> - An image URL which should represent your object within the graph.</li><li><code spellcheck="false">og:url</code> - The canonical URL of your object that will be used as its permanent ID in the graph, e.g., "<a target="_blank" rel="noopener noreferrer nofollow" href="https://www.imdb.com/title/tt0117500/">https://www.imdb.com/title/tt0117500/</a>".</li></ul></blockquote>출처 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://ogp.me/#metadata">https://ogp.me/#metadata</a><h1>Next.js에 적용하기</h1>이러한 오픈그래프를 <code spellcheck="false">Next.js</code> 에서 적용시키려면 어떻게 하면 좋을까…? 바로 Next.js에서 제공하는 <code spellcheck="false">Head</code> 컴포넌트안에 메타태그를 정의해주면 된다.오픈그래프를 적용시킬때, 해당 페이지가 단순한 웹사이트에 대한 소개인 경우가 있고, 게시글과 같은 동적으로 바뀌는 페이지가 있을것이다. 두가지 케이스를 나누어서 살펴보자.<h2>정적인 페이지인 경우</h2>정적인 경우에는 static하게 적어주기만하면 된다.<pre spellcheck="false"><code class="language-typescript">// /pages/index.tsxfunction Feed() {
return (
&lt;div&gt;
&lt;Head&gt;
&lt;meta property="og:type" content="website" /&gt;
&lt;meta property="og:title" content="멋쟁이 상민처럼" /&gt;
&lt;meta property="og:description" content="개발자로 일하면서 배운 내용들을 기록합니다." /&gt;
&lt;meta property="og:url" content="&lt;https://morethanmin.com&gt;" /&gt;
&lt;meta
property="og:image"
content="정적인 이미지 경로"
/&gt;
&lt;/Head&gt;
&lt;FeedContainer/&gt;
&lt;/div&gt;
)
}</code></pre>요런식으로 정의해주면 오픈 그래프를 적용시킬 수 있겠다.<h2>동적인 페이지인 경우</h2>그럼 게시글과 같이 동적인 페이지인 경우에는? 동적으로 가져온 정보를 넣어주면 된다.<pre spellcheck="false"><code class="language-tsx">// /pages/[slug].tsxexport async function getStaticProps({ params: { slug } }) {
const post = await getPost({ slug })
return {
props: { post },
}
}function ArticlePage({post}) {
return (
&lt;div&gt;
&lt;Head&gt;
&lt;meta property="og:type" content="website" /&gt;
&lt;meta property="og:title" content={post.title} /&gt;
&lt;meta property="og:description" content={post.summary} /&gt;
&lt;meta property="og:url" content={post.url} /&gt;
&lt;meta
property="og:image"
content={post.thumbnail}
/&gt;
&lt;/Head&gt;
&lt;PostContainer data={post} /&gt;
&lt;/div&gt;
)
}</code></pre><h1>동적으로 OG 이미지 생성하기</h1>여러 많은 블로그를 보다보면 배경은 똑같고 텍스트만 바꾸어서 게시글마다 썸네일을 적용 해주곤한다. 티스토리건 벨로그건 네이버블로그건 다 썸네일을 사용자가 직접 업로드해야만 가능하다.<img src="https://image.until.blog/morethanmin/article/1718207770965" alt="until-464">썸네일을 살펴보면 텍스트 바꿔치기를 통해 반복적으로 썸네일을 만드는 경우들이 상당히 많았다. 동적으로 가져온 게시글 정보에 썸네일 정보가 있는 경우에는 해당 썸네일 이미지를 보여주고, 그렇지 않은 경우에는 동적으로 썸네일을 생성할 수 있지 않을까?그런 오픈소스가 있는지 찾아보았다.다양한 서비스들이 있었지만 결국 이미지를 생성해서 해당이미지를 업로드 해주어야 가능한 경우가 많았다. 간단하게는 개인 프로젝트들도 많았고, 심지어는 유료인 서비스들도 있었다.외부 블로그 서비스를 이용하는 경우에는 그런 서비스를 사용해도 좋겠지만, 나는 블로그를 직접 만들고 있으니, url에 원하는 썸네일 정보를 보내면 동적으로 이미지를 생성해줄 수 있는 api가 필요했다. 아래 처럼 말이다...<pre spellcheck="false"><code class="language-tsx">// /pages/[slug].tsxexport async function getStaticProps({ params: { slug } }) {
const post = await getPost({ slug })
return {
props: { post },
}
}function ArticlePage({post}) {
return (
&lt;div&gt;
&lt;Head&gt;
{post.thumbnail ?
&lt;meta
property="og:image"
content={post.thumbnail}
/&gt; :
&lt;meta
property="og:image"
content={https://썸네일-만들어주는-서비스/?title=${post.title}}
/&gt;
}
&lt;/Head&gt;
&lt;PostContainer data={post} /&gt;
&lt;/div&gt;
)
}</code></pre><h1>vercel/og-image</h1>여기저기 찾아보다 vercel/og-image를 발견했다. 해당 페이지에서 실제로 만들 수도 있고, url상으로 동적으로 생성해주는 기능도 지원하는 오픈소스이다. <a target="_blank" rel="noopener noreferrer nofollow" href="https://og-image.vercel.app/morethan-log.png?theme=light&amp;md=1&amp;fontSize=100px&amp;images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fvercel-triangle-black.svg">예시</a><img src="https://image.until.blog/morethanmin/article/1718207953408" alt="until-465"><h1>한글 인코딩 이슈</h1>내용 그대로다. 한글을 지원하지 않는 폰트를 사용하고 있어서…. 영어만 입력이 가능했다.<img src="https://image.until.blog/morethanmin/article/1718207990429" alt="until-466">그래서 해당 프로젝트의 이슈를 좀 찾아보니… 실제로 나와 같은 문제를 겪고 있는 사람들이 있었다.<h1>og-image-korean</h1>한글 지원하는 폰트와 기본 이미지를 바꿔서 배포했다. <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/morethanmin/og-image-korean">여기</a>에 들어가보면 확인할 수 있다.<img src="https://image.until.blog/morethanmin/article/1718208022544" alt="until-467"><ul><li>site: <a target="_blank" rel="noopener noreferrer nofollow" href="https://og-image-korean.vercel.app/">https://og-image-korean.vercel.app</a></li><li>github: <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/morethanmin/og-image-korean">https://github.com/morethanmin/og-image-korean</a></li></ul><img src="https://image.until.blog/morethanmin/article/1718208085603" alt="until-468">물론 리서치하고 만드는데 걸린 시간을 생각해본다면… 진작 게시글 썸네일을 200장 이상 만들었을 것 같다.언틸에도 추후 적용해보면 좋을 것 같다.

이전에 개인 블로그를 운영하면서 동적으로 오픈그래프를 적용했던 경험을 공유합니다.최근에는 아래 방법보다 간편하게 @vercel/og 라이브러리로 좀 더 og이미지 생성 api를 만들 수 있습니다.관심 있으신 분들은 공식 문서를 참고해보시면 좋을 것 같습니다.오픈 그래프?오픈그래프는 페이스북에서 처음 만들어진 개념으로 HTML 문서의 메타정보를 쉽게 표시하기

next 서비스에서 동적으로 게시글 썸네일 생성하기 (Open Graph)

1. 네, 말씀하신 이해가 맞다고 생각합니다! nginx가 유용한 이유는 여러 가지가 있겠지만 nginx는 이벤트 기반 처리로 정적 파일 제공에 최적화되어 있어서 Node.js보다 리소스 사용이 효율적이고 파일 캐싱과 압축 기능 등 잘 구현되어 있어 성능상 이점이 있다고 알고 있습니다. 

그리고 서버 사이드 렌더링의 경우 Node.js나 톰캣같은 서버가 동적 렌더링을 직접 처리해야 하고, 매 요청마다 서버에서 동적으로 HTML을 생성하기 때문에 nginx의 정적 파일 캐싱이나 압축 기능의 이점을 제대로 활용하기 어렵다고 생각합니다. :)

2. 저도 깊게 아는 것은 아니지만.. 가장 큰 이유로는 nginx가 HTTPS 처리를 담당하여 애플리케이션 서버의 부담을 줄일 수 있고 직접적인 서버 접근을 차단하기 때문에 추가적인 보안 레이어 역할을 해줄 수 있기 때문입니다 !

3. 맞습니다. Node.js나 스프링부트도 충분히 좋은 성능을 제공합니다. 하지만 그럼에도 nginx를 앞단에 두면 정적 파일 캐싱으로 서버의 부하를 덜 수 있고 불필요한 요청을 사전에 필터링 역할까지 가능하기 때문입니다. 그리고 개인적으로 Nginx 가 굉장히 잘 만들어진 웹서버라고 생각하기 때문에, 서버는 정말 애플리케이션의 역할만 수행하고, 나머지의 정적인 것들은 Nginx 에서 부담을 나누어주면 여러모로 이점이 많을 거라고 생각합니다!

글 잘 읽었습니다 ㅎㅎ 저도 nginx를 사용하려다 nginx를 사용함으로써 얻는 장점에 대해 의문이 생겨 서칭하다가 들어오게 됐는데, 읽으면서도 몇가지 의문이 남아 질문드리고 싶습니다!

1. 정적 컨텐츠 제공
Tomcat 같은 WAS도 정적 컨텐츠를 제공할 수 있습니다. 아무 로직 없이 정적 컨텐츠를 응답하면 정적 컨텐츠를 제공하는 웹서버로도 활용이 가능합니다. 물론 다른 FE 애플리케이션이 있다면 필요가 없겠지만요! 리액트나 뷰를 사용한 FE 애플리케이션은 SPA를 위해 Nodejs 상에서 돌아갑니다. 동적 렌더링이 아닌 웹팩 등의 번들링 툴을 이용해 npm build 등을 통해서 정적 파일을 생성해 이를 배포하기 위함이라면 nginx의 정적 컨텐츠 제공의 역할이 이해가 됩니다. 정적 컨텐츠를 위해선 JS 런타임 환경인 Node보단 nginx가 훨씬 효율적이라고 생각하기 때문입니다. SPA일 경우 유용하다고 생각하셨다는데, 그 이유가 제가 이해한 바가 맞을까요?? SPA가 아닐 경우엔 어째서 유용하지 않은걸까요?

2. 리버스 프록시
한 EC2 인스턴스에 FE와 BE 앱이 모두 다른 포트로 연결됐기 때문에 리버스 프록시가 이유가 된다는 점이 이해가 됐습니다! 그럼 감히 구조를 예상해보자면,
`클라이언트 <-> 리버스 프록시(nginx) <-> EC2 (FE + Spring Boot)`
라고 예상이 되는데, FE앱 내에선 API 서버가 같은 디바이스 내에 있기 때문에 주소가 `http://localhost:8080`으로 되어있을 것이라고 생각이 듭니다. 그럼 서버가 받을 요청은 localhost의 3000포트 같은 FE 앱 뿐일 것 같은데, 리버스 프록시가 필요하고 유용한 이유가 무엇인지 궁금합니다! nginx가 BE로 향하게 끔 하는 경우가 모니터링이나 문서 등이 있다거나, 혹은 시스템 구조가 다른 것일까요??

3. 고성능
Spring Boot의 Tomcat이나 Nodejs도 논블로킹 I/O를 통해 높은 퍼포먼스의 동시 작업을 지원한다고 생각합니다. 아파치 웹 서버처럼 비슷한 역할을 하는 프로그램과 비교라면 이해가 되긴하는데, 이런 경우 Node가 그대로 트래픽을 받는 것도 문제될 것 같지 않다는 생각이 듭니다.

웹서버 공부중에 큰 도움됐습니다!
좋은 정리글 감사합니다. 🫡

한번 확인해볼게요. 커뮤니티 접속하셔서 오류보고 채널에 남겨주시면 좀더 자세히 파악이 가능할 것 같아요. 항상 감사드려요!

감사합니다!! 원래 morethanlog를 써보려다가 프론트쪽은 너무 몰라서 실패하고, 다시 velog를 사용하려다가 우연히 until을 출시하셨다고 들어서 후다닥 사용해봤는데 너무 좋아서 다시 velog에서 이사 왔습니다!! until 만들어주셔서 너무 감사해요ㅎㅎ 열심히 해보겠습니다 감사합니다!

(+) 아 그리고 임시저장하고 나갔다가 들어오면 제목만 살아있고 내용은 사라지는 버그가 있던데 혹시 제가 이상한 걸까요!?

<ol><li>취득 이유<ul><li>AWS 클라우드를 사이드 프로젝트에서 사용하다가 내가 뭔지 알지도 못하는 상태에서 무작정 때려박는 등.. 진짜 멍청이 같이 사용하는 나의 모습을 발견했음..</li><li>사실 AWS SAA 자체는 실무에서 어떻게 연결해서 이렇게 써야한다!<ul><li>의 자격증은 아니다.</li></ul></li><li>단순히 AWS 를 어떤식으로 구성해야하고</li><li>어떤 제품을 어떤 상황에서 사용해야하는지의 일종의 가이드이다.</li><li>사실 회사내에서는 전부 온프레미스 기반으로 자체 서버 혹은 IDC 의 서버를 대여해서 사용하는데, AWS 클라우드 자체를 사용해볼 기회가 없었기에<ul><li>더더욱이 시험에 대한 공감이 1도 안갔다..</li></ul></li></ul></li><li>첨언<ul><li>일단 나는 시험을 2번 봤다<ul><li>인터넷에서 누가 일주일만에 합격이 가능하다고 해서</li><li>유데미 문제 한번도 안돌려보고 바로 시험장으로 달려갔다</li><li><code spellcheck="false">근데 개인적인 생각으로</code><ul><li>본인이 AWS 관련 클라우드 세팅이나 공부를 해본 경험이 없는 경우</li><li>절대 일주일로는 안된다 (물론 직장인 기준임 - 학생이면 가능할거같음)</li><li>운동도 병행중이라 일단 일주일에 3~ 4일정도 2 시간정도 공부했었다</li></ul></li></ul></li><li>첫 시험은 한문제 차이로 떨어지고</li><li>두 번째 시험은 700중후반대로 합격했다.</li></ul></li><li>공부방법<ol><li>인강<ol><li>저는 개인적으로 자격에 대한 취득과 이론적인 학습이 먼저라면, 그냥 안들어도 된다고 생각한다.</li><li>실습을 해도 어차피 어떤 옵션이 있구나에서 멈춰서</li><li>실제로 내가 몸소 느끼려면, 사이드 프로젝트에서 실제로 적용해보는 등의 행위를 <code spellcheck="false">해봐야한다</code><ol><li>그거 아니고는 클라우드는 답이 없음</li></ol></li></ol></li><li>문제<ol><li>udemy<ul><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.udemy.com/course/aws-certified-solutions-architect-associate-korean/?couponCode=ST21MT121624">https://www.udemy.com/course/aws-certified-solutions-architect-associate-korean/?couponCode=ST21MT121624</a></li><li>요 사이트 문제만 풀어도 된다.</li><li>유료긴 한데, 첫 결제로 1 ~ 2만원 사이의 금액으로 볼 수 있음.</li></ul></li><li>EXAM TOPICS<ul><li>요것도 문제는 괜찮긴한데</li><li>내 개인적인 생각으로는 모의고사 문제는 좀 어렵게 풀어야한다고 생각한다</li><li>너무 자주 맞으면 이상한 자신감이 생기는데 실전에서 점수가 그 만큼 안나오더라..</li></ul></li></ol></li></ol><ol start="4"><li>시험 중에<ol><li>온라인 시험<ul><li>일단 난 온라인 시험으로 봤다</li><li>시험 30분전부터 입장이 가능한데, 입장해서 이것저것 뭐 감독관이 영어로 묻는데<ul><li>영어를 본인이 스피킹에 능하면 대답하면되고</li><li>아니면 그냥 i am not good at speaking eng, can we chat instead..</li><li>뭐 이런식으로 대답하면 알아서 <code spellcheck="false">아</code> 하고 채팅으로 해준다</li></ul></li><li>시험은 그냥 노트북으로 보는거 추천함</li><li>데탑의 웹캠이 무선이면 상관없는데 유선이면 내 주변을 보여주기가 겁나 힘들다</li></ul></li></ol></li><li>불/ 합격 알 수 있는 방법<ul><li>불합격과 합격 둘다 해봐서 차이를 알고 있다</li><li>일단 합격은<ul><li>credly 에서 먼저 aws 관련 자격증 취득을 축하한다고 메일이 온다</li></ul></li><li>불합격은<ul><li>그냥 아마존에서 메일이 먼저 온다</li></ul></li><li>2번다 대략 4시간 안쪽으로 왔었다.</li></ul></li></ol></li></ol><img src="https://image.until.blog/qkrtkdwns3410/article/1734324248324.png" data-width="50%" data-align="center" alt="2544">

취득 이유AWS 클라우드를 사이드 프로젝트에서 사용하다가 내가 뭔지 알지도 못하는 상태에서 무작정 때려박는 등.. 진짜 멍청이 같이 사용하는 나의 모습을 발견했음..사실 AWS SAA 자체는 실무에서 어떻게 연결해서 이렇게 써야한다!의 자격증은 아니다.단순히 AWS 를 어떤식으로 구성해야하고어떤 제품을 어떤 상황에서 사용해야하는지의 일종의 가이드이다.사실 

AWS SAA C03 합격 후기

취준생 일지

미루고 미루던…… <s>딱히 미루지는 않았고 매번 보러 가기는 했던,</s> 5/6번째 정처기 실기.변명 좀 하자면 1/6번째는 아는 게 없어서 무작정 머리에 집어넣는 대로 했고, 2/6번째는 실수로 놓쳤고, 3/6은 교육의 중간 프로젝트, 4/6은 파이널 프로젝트랑 겹쳤다. 간당간당하게 죄다 말아먹었단 소리기는 하다. <s>다른 건 다 붙어서 망정이지……</s><h3>준비 기간</h3>한…… 일주일? 진짜 정신차리고 보니까 일주일 남았더라. <s>왜지</s> 물론 그 사이에 처음 면접도 보고 돈도 좀 벌고…… <s>쪼오오오오끔</s> 추석도 끼고 개인사도 있고 여차저차하고 보니까? 일주일이더라.음! 좋아. 충분하다. <s>영혼을 바친다면.</s><h3>얼마나 했는가?</h3>하루에 최소 4시간, 오래 붙잡고 있을 때는 6시간 정도 잡고 있었다. 하루종일 하는 건 아니고 중간중간 쉬어가면서 했고 한번 집중력이 그렇게 길지 않다. <s>특히 이론은</s><h3>어떻게 했는지</h3>맨날 프로그래밍 언어, SQL 활용만 파다가 이번에는 이론만 팠다. 이젠 프로그래밍 언어랑 SQL은 좀 하겠지라는 근자감도 있었고 <s>진짜 근거없더라</s> 매번 간단한 이론이 헷갈린 게 아쉬워서 이번에는 이론을 파다가 마지막 이틀 쯤에 프밍이랑 SQL을 하면 되겠지! 라고 생각했으나, 꿈이 컸다. <s>어~ 너 프밍이랑 SQL 1시간 보고 갔어 </s><h3>예상</h3>예상 결과는 현재로는 약간 불안하다. 55 60 65... 그 어딘가... 60이나 65가 맞는 것 같긴한데, 약간 내가 그때 뭐라고 썼는지 기억이 안 나는 게 있다. <s>뭐라고 썼냐 대답해라 나</s>솔직히 이번 난이도는 개인적으로 올해 본 세 번의 시험 중에서 프밍이 제일 어려웠다. 이론은 쉬운 축에 속한 듯. 그만 나대고 프밍으로 회귀해야지... <s>제발 합격 시켜줘</s> <s>정처기로 남의 학교 그만 가고 싶어</s>

마지막 실기까지 이런 식으로 굴 거야

24년 3회차 정처기 실기 후기

React는 웹 프레임워크 시장에서 매우 인기 있는 라이브러리입니다. 2018년 React Conf에서 Hooks가 발표된 이후, 기존 클래스 컴포넌트 방식에서 함수형 컴포넌트 방식으로의 전환이 급격히 이루어졌습니다. 다양한 Hooks 중에서도 useEffect와 useLayoutEffect의 차이를 이해하지 못해 혼란스러워하는 경우가 많습니다. 이 글에서는 두 Hook의 작동 방식을 자세히 알아보고, 어떤 상황에서 각각을 사용하는 것이 좋은지 정리해보려고 합니다.<h2>사전 개념</h2>두 Hook을 이해하기 전에, React의 렌더링 과정에서 발생하는 주요 단계 두 가지를 먼저 정리해 보겠습니다.<ul><li>Render: DOM 트리를 구성하기 위해 각 요소의 스타일 속성을 계산하는 과정입니다.</li><li>Paint: 실제 화면에 렌더링된 레이아웃을 표시하고 업데이트하는 과정입니다.</li></ul><h2>useLayoutEffect</h2><img src="https://image.until.blog/morethanmin/article/1730560964253.png" data-width="100%" data-align="center" alt="1955">useLayoutEffect는 컴포넌트가 렌더링된 직후, 화면에 그려지기 전에 동기적(synchronous)으로 실행됩니다. 이 동작 특성 덕분에 DOM을 조작하는 코드가 포함되어도 화면에 반영되기 전에 즉시 실행되기 때문에, 사용자는 깜빡임이나 불필요한 레이아웃 변경을 경험하지 않습니다.이와 같은 이유로 useLayoutEffect는 화면에 즉시 반영되어야 하는 CSS 조작이나 DOM 크기 조정 등의 작업에 적합합니다. 그러나 모든 렌더링 전에 동기적으로 실행되므로 실행 시간이 길어질 경우, 첫 화면 표시가 느려질 수 있습니다.<h2>useEffect</h2><img src="https://image.until.blog/morethanmin/article/1730560955057.png" data-width="100%" data-align="center" alt="1954">useEffect는 컴포넌트가 렌더링되고 화면에 그려진 후에 실행됩니다. 이 Hook은 비동기적(asynchronous)으로 실행되기 때문에, DOM에 변화를 주더라도 사용자가 화면에서 깜빡임이나 레이아웃 변화가 감지되기 쉽습니다. 예를 들어, 데이터를 가져오는 작업이나 이벤트 핸들러 설정과 같은 비동기 작업은 useEffect 내에서 안전하게 수행할 수 있습니다.<blockquote>주의: useEffect가 DOM에 직접적으로 영향을 주는 작업을 포함할 경우, 렌더링 후 깜빡임이 발생할 수 있어 사용 경험이 떨어질 수 있습니다.</blockquote><h2>결론</h2>일반적으로는 useEffect를 기본으로 사용하는 것이 성능상 유리합니다. 예를 들어 데이터 패칭, 이벤트 핸들러 등록, 상태 초기화 및 정리와 같은 작업들은 useEffect를 사용하는 것이 적합합니다. 그러나 화면 깜빡임을 최소화해야 하는 상황이라면 useLayoutEffect를 고려해 볼 수 있습니다. 예를 들어, 특정 상태가 초기 렌더링에 따라 다르게 적용되어 화면에 순간적인 깜빡임이 발생하는 경우, useLayoutEffect가 더 나은 사용자 경험을 제공할 수 있습니다.<h2>Reference</h2><a data-type="bookmark" href="https://pubudu2013101.medium.com/what-is-the-real-difference-between-react-useeffect-and-uselayouteffect-51723096dc19" target="_blank"><div class="content"><div><div class="title">What is the real difference between React useEffect and useLayoutEffect?</div><div class="description">If you are a React.js developer, you will know that these are widely used React.js hooks when doing frontend development. Most of us…</div></div><div class="href">https://pubudu2013101.medium.com/what-is-the-real-difference-between-react-useeffect-and-uselayouteffect-51723096dc19</div></div><img src="https://miro.medium.com/v2/resize:fit:1200/1*ZtfwJC3TDzDVvonp5S5asA.jpeg"></a>

React는 웹 프레임워크 시장에서 매우 인기 있는 라이브러리입니다. 2018년 React Conf에서 Hooks가 발표된 이후, 기존 클래스 컴포넌트 방식에서 함수형 컴포넌트 방식으로의 전환이 급격히 이루어졌습니다. 다양한 Hooks 중에서도 useEffect와 useLayoutEffect의 차이를 이해하지 못해 혼란스러워하는 경우가 많습니다. 이 글에서

React에서 useEffect와 useLayoutEffect 차이점

안녕하세요! 저는 Javascript를 실무에서 거의 4년 이상 사용하고있는 개발자 노바 입니다! 업무를 진행하면서 유용한 팁들을 개인적으로만 정리하고 있었는데, 이런 좋은 사이트를 알게되어 더더욱 성장하길 바라는 마음에 공유해봅니다!<h2>1. 얕은 복사와 깊은 복사를 구분하기</h2><pre spellcheck="false"><code>const person = [{ name: 'Yoon' }, { age: 31 }]
const shallowCopy = [...person]
const deepCopy = structuredClone(person)
shallowCopy[0].name = 'Kim'
console.log(person[0].name) // 'Kim'
deepCopy[0].name = 'Kwon'
console.log(person[0].name) // 'Kim'</code></pre>얕은복사의 경우 복사본의 Object Value를 변경하면 원본까지 변경되어 버립니다. 깊은복사를 이용하면 복사본의 값만 변경 할 수 있습니다.<h2>2. 배열과 객체의 순환 방법</h2><pre spellcheck="false"><code>/* Array */
const arr = [1, 2, 3, 4, 5]

for (const element of arr) {
 console.log(element) // 1, 2, 3, 4, 5
}
/* Object */
const obj = { a: 1, b: 2, c: 3 }

for (const key in obj) {
 console.log(obj[key]) // 1, 2, 3
}</code></pre>for in으로 object를 순환 할 수 있고, for of로 배열 순환을 축약 할 수 있습니다.<h2>3. 값이 있는지 간단하게 체크하기</h2><pre spellcheck="false"><code>const auth = { user: '' }
console.log(!!auth.user) // false</code></pre>!! 연산자로 객체에 값이 존재하는지 유/무를 쉽게 체크 할 수 있습니다.<h2>4. 비슷한 값을 가진 배열을 비교하여 값 추출하기</h2><pre spellcheck="false"><code>// 단순배열 (긴 배열을 filter 앞에, 짧은 배열을 find 앞에)
const a = [1, 2]
const b = [3, 4, 1]const diff = b.filter(v =&gt; !a.find(v2 =&gt; v === v2)) // [3, 4]
const not = a.filter(v =&gt; !b.find(v2 =&gt; v === v2)) // [2]
// 객체배열 (긴 배열을 filter 앞에, 짧은 배열을 find 앞에)
const a = [{name: 'Y', age: 20}, {name: 'D', age: 19}]
const b = [{name: 'Y', age: 20}, {name: 'M', age: 20}, {name: 'D', age: 19}]
const diff = b.filter(v =&gt; !a.find(v2 =&gt; JSON.stringify(v) === JSON.stringify(v2))) // { name: 'M', age: 20 }</code></pre>비슷한 배열간의 다른값만 추출해야 하는 경우가 종종 생길때 사용 할 수있습니다.<h2>5. 파일 데이터를 쉽게 처리하기</h2><pre spellcheck="false"><code>Promise.all[...event.target.files].map(file =&gt; files.push(file)))</code></pre>file 태그에서 파일을 여러개 선택하거나, 단일로만 선택 할 경우, 파일 객체 자체를 form-data로 넘기는 경우가 많습니다. 이럴때 두가지 케이스 모두 대응하기에 좋습니다.<h2>6. 랜덤한 6자리 난수 쉽게 생성하기</h2><pre spellcheck="false"><code>Math.floor(100000 + Math.random() * 900000)</code></pre>6자리의 난수를 생성해야 할 때(주로 인증번호) 사용하면 좋습니다.<h2>7. UUID 쉽게 생성하기</h2><pre spellcheck="false"><code>// Browser
self.crypto.randomUUID()
// Node.js &gt;= 19.0
import Crypto from "crypto"
Crypto.randomUUID()</code></pre>예전엔 uuid 생성을 위해 특정 라이브러리 설치가 필요했었지만, 이제는 간단하게 생성이 가능합니다.<h2>8. 배열 중복제거하기</h2><pre spellcheck="false"><code>// 단순배열 중복제거
const arr = [2, 2]
const arr2 = [...new Set(arr)]

// 객체배열 중복제거
const example = [{ id: 123 }, { id: 456 }, { id: 123 }]
example.filter(
(arr, index, callback) =&gt; index === callback.findIndex(t =&gt; t.id === arr.id)
)</code></pre>배열안의 중복된 값을 간단하게 제거 할 수 있습니다.

안녕하세요! 저는 Javascript를 실무에서 거의 4년 이상 사용하고있는 개발자 노바 입니다!업무를 진행하면서 유용한 팁들을 개인적으로만 정리하고 있었는데, 이런 좋은 사이트를 알게되어 더더욱 성장하길 바라는 마음에 공유해봅니다!1. 얕은 복사와 깊은 복사를 구분하기const person = [{ name: 'Yoon' }, { age: 31 }]
co

퍼블리싱 준비 가이드: 웹표준과 웹접근성

웹 표준이란?

장점

방법

웹 접근성이란?

웹 접근성을 고려한 웹 사이트를 만드는 방법