윤프로 | 코드가 개발새발해

[자취생활] 노량진 셀프 빨래방 에코런드렛 노량진점 더클래식동작점

윤개발새발 — Tue, 5 Aug 2025 19:27:03 +0900

윤프로의 우당탕탕 데일리 라이프
자취편

자취생이라면 꼭 알아둬야하는 집근처 세탁방

작고 작은 원룸에서 빨래를 말리기는 불편함이 크다.
특히 비 소식이 껴있기라도 하면 집도 습하고 빨래는 안 마르고 냄새나고..
이불 빨래 하려면 9Kg 짜리 세탁기로는 택도 없지 ╮(╯-╰)╭

그럴 때 셀프 세탁방은 필수라고 할 수 있다.

처음 노량진에서 자취를 시작했을 땐 메가스터디 타워까지 가야했는데
요근래 노량진 2동 내에 셀프빨래방이 꽤 생기고 있다.
노량진에서 자취를 시작하려고 하거나 이제 막 시작한 분들 위한 세탁방 추천

깨끗한 빨래와 뽀송한 빨래를 보면 기분이 좋쥬 ~ㅅ~

1. 에코런드렛 빨래방&아이스크림 노량진점

치킨마루 옆에 위치

입구에서부터 신발 세탁기/건조기 1대, 20kg 대형 세탁기 2대, 30kg 특대형 세탁기 1대가 있고
그 옆으로 자판기에는 큰 비닐봉지와 건조기 시트를 500원에 구매할 수 있다.
구매는 현금으로만 가능하고 동전 교환도 가능!

키오스크로 회원가입과 포인트 충전, 사용이 가능한데
현금으로 충전 시 10% 포인트를 추가 적립해주니 현금 충전이 더 이득이다.

그 옆으로는 23kg 대형 건조기 4대가 있다.

사용 방법은 다음 순서대로 진행한다. ヾ(•ω•`)o
1. 빨랫감을 세탁기/건조기에 넣기
2. 키오스크에 '이용하기' 클릭
3. 핸드폰 번호 입력
4. 비밀번호 입력
5. 1번에서 넣은 세탁기/건조기 번호 선택
6. 이용할 코스 선택(시간별 다름)
7. 결제(포인트/현금/카드)
팁! 이후 '카카오톡으로 알림 받기'를 하면 5분 전 마감 알림을 받을 수 있다.
7-1. 기본 시간 외 추가로 더 돌리고 싶다면 '추가 이용' 을 눌러 선택
8. 넣었던 세탁기/건조기 로 돌아가서 코스 선택 후 '운전시작' 누르기

세탁기는 일반/이불/온수 등 다양한 코스가 있고 건조기는 고온/중온/저온/미온 을 선택할 수 있다.
각 코스와 온도에 대한 설명이 세탁기/건조기에 쓰여 있으니 확인 후 누르면 된다.

간판에서부터 알 수 있듯 여기는 아이스크림도 무인판매 하는 곳이다.
종종 아이스크림만 사러 오는 사람도 있고 빨래를 기다리며 아이스크림을 먹기도 좋다.

막대, 쭈쭈바, 콘, 샌드, 구슬아이스크림, 통 아이스크림, 티코, 저당, 나뚜루 등 다양한 아이스크림이 있다.

계산은 키오스크로 무인 결제를 하면 된다.

이곳은 얼마 전까지만 해도 금요일 저녁 ~ 주말은 늘 꽉 차 있었는데
이 근처에 셀프 빨래방이 하나 더 생기면서 좀 분배된 듯..

(오코노미스토리 근처에 하나 있던 것 같은데 블링블링 셀프빨래방이었나)

에코런드렛은 좋은 게 헛걸음 방지 장비 동작상태를 알려주는 사이트가 있어서
카카오톡 알림받기 선택 시 받은 카톡에서 실시간 세탁기/건조기 사용 현황을 볼 수 있다.
간혹 다 끝났는데도 안 가져가는 사람들 때문에 난처한 상황이 있기도 하지만..
(이런 상황을 대비하여 '카카오톡으로 알림 받기' 를 선택하면 서로가 효율적임!)
사용 유무와 남은 시간을 보고 집에서 기다렸다 가거나 서둘러 가기 좋다.

2. 에코런드렛 셀프빨래방 더클래식동작점

위 1번 노량진점 근처에 있는 더클래식 동작점
교촌치킨 옆에 위치

이곳은 8월 1일 오픈한 따끈따끈한 곳이다.
그래서 그런지 전부 새거 냄새난다 ˋ( ° ▽、° )

입구에 들어서면 운동화 세탁/건조기 1대, 20kg 대형 세탁기 2대, 30kg 특대형 세탁기 1대가 있다.

더 들어가면 자판기와 키오스크, 25kg 대형 건조기 4대가 있다.

구성은 노량진점과 비슷한데 뭔가 기기들이 좀 더 최신식인 듯

약간의 차이점은 봉투 판매 & 동전교환기, 건조기 시트 판매기가 따로 있다는 점.

그리고 같은 에코런드렛이더라도 지점별로 회원을 관리하는지
노량진점에 회원가입을 했더라도 더클래식동작점은 또 회원가입을 해줘야 한다.
혹시나 통합으로 관리되나 싶어서 조회해봤는데 없는 회원이라고 뜸.

옆 벽면엔 빨랫감을 실을 수 있는 카트와 책상, 빨래방 주의 사항과 사용법이 적혀있고

건조기 옆 벽면에도 사용방법이 적혀있다.
(참고로 노량진점도 벽에 안내되어 있다.)

노량진점은 주기적으로 건조기 필터랑 매장을 관리해주셔서 깨끗하게 이용할 수 있었다.
더클래식동작점도 아마 비슷할 것 같은데 다음에 이용해보면서 알게 될 듯

노량진 2동이 주택가가 밀집해 있어 자취생들이나 가족단위가 많다보니 늘 몰리기 마련인데,
세탁방이 늘어나면서 사용하는 사람이 나눠지니 좀 더 쾌적한 이용을 기대해 본다.

건조기 돌리러 가야지~

혹시 노량진에 자취하는 분들이라면 이 글이 도움이 되었길 바라며..
도움이 되었다면 하트 꾹 눌러주시면 감사하겠습니다! (❁´◡`❁)

[웹][티스토리 블로그 꾸미기] 상단 헤더 꾸미기2

윤개발새발 — Sat, 15 Mar 2025 04:05:12 +0900

지난 상단 헤더 꾸미기 게시글이 꾸준히 유입률 1위를 담당하고 있어서 작성해보는 2탄 ( •̀ ω •́ )y
이번 꾸미기는 아래가 둥근 상단박스 헤더(스크롤에 따라 색 변화) + 진행바 를 만들어보겠습니다.

헤더를 변경한지 오래되어 어떤 순서로 얼만큼 수정했는지 기억이 가물하지만..
최종 수정한 HTML 코드와 CSS 를 남겨둘테니 참고해주시면 감사하겠습니다!

기본 템플릿은 [ Odyssey ] 를 사용했고 이전 상단 헤더 꾸미기 1탄을 바탕으로 진행됩니다.

1. 아래가 둥근 헤더 박스

기존의 상단을 가득 채운 네모 반듯한 상단바가 너무 딱딱한 느낌이 들어서
아래만 둥글게 깎아 부드러운 느낌을 주겠습니다.

.header 클래스의 속성을 바꿔주기 위해
스킨 편집 > HTML 편집 > CSS 탭에서 '/* header */' 를 검색해주세요.

그러면 바꿔야 할 .header 클래스가 바로 보입니다.

아래 두 점을 둥글게 만드는 부분은
border-radius: 0 0 15px 15px;
이 속성을 추가해주도록 합니다.

추가로 너비가 화면을 꽉 채우는 게 좀 답답해보이더라구요.
그래서 게시글 범위만큼만 차지하도록 변경했습니다.

width: 60% 로 전체 너비를 정해주고
left: 20%, right: 20%, margin: 0 auto; 로 가운데 위치하도록 했어요.

2. 스크롤을 내리면 색이 변하는 헤더

1번까지만 해도 색다르지만 저는 은근히 현란한 걸 좋아하기 때문에
스크롤을 내리면 이 헤더 색이 변하도록 수정해주겠습니다.

예쁘면.. 좋자너..

HTML 탭으로 가서 <head> 블럭 내 하단에 스크립트를 하나 추가해주겠습니다.

<script> 
    $(function () { 
        $(document).on('scroll', function(){
            // 스크롤 시 header fade-in
            if($(window).scrollTop() > 100){
              $(".header").addClass("active");
            }else{
              $(".header").removeClass("active");
            }
        })
      }); 
  </script>

은은하게 색이 바뀌도록 할 속성은 'active' 클래스명으로 줄 예정입니다.
현재 브라우저 창에서 스크롤 이벤트가 감지될 때
스크롤의 위치가 상단에서 100 이상이면(스크롤이 내려갔을 때) 헤더의 'header' 클래스에 'active' 클래스를 추가하고
그렇지 않을 경우(스크롤이 최상단에 위치해 있을 때) 'header' 클래스에 'active' 클래스를 제거한단 뜻입니다.

CSS 탭으로 돌아가서 'active' 클래스와 'header' 클래스에 속성을 더 추가해주겠습니다.

헤더 색 변화 관련 클래스 전문

나눠서 보자면 먼저 기본 '.header' 클래스에서
background-color: #ffffff78; 평상시 배경색은 흰색 반투명으로
transition: width 0.5s ease, background-color 0.5s ease; 변화가 있을 때 너비값/배경색을 0.5초동안 기본 속도로 속성 전환.

.header::before before로 만들어진 그라데이션 배경[A]이 투명상태여서(opacity: 0) 흰색 반투명 배경[B]이 보여지고
스크롤을 내리면 B 위의 A가 불투명이 되어 보이게 되는 방식(transition: opacity 0.5s ease)

저는 흰색 불투명 배경을 초반색으로 두고 그라데이션 배경을 변화색으로 설정했다보니
before 요소에 너비 재설정까지 번잡함이 더해졌는데요.
단색 배경으로 하면 요 속성들은 달라질 수 있습니다.
.header.active 이 안에다 background-color, transition 을 주면 되지 않을까 싶긴한데..
이 경우는 제가 다시 테스트해서 글에 추가하도록 할게요!

3. 스크롤에 따른 진행바

글을 읽으며 스크롤을 내리다보면 내가 전체 글의 어느 만큼을 읽고 있는지, 얼만큼이 더 있는지 알려주는 방법으로
진행바는 사용자에게 줄 수 있는 작은 편의 중 하나죠.
현재 페이지의 전체 높이 대비 스크롤 위치에 따른 진행바를 헤더보다 더 상단에 붙여주겠습니다.

HTML 탭으로 이동해서 <header> 바로 위에 진행바를 위한 div 블럭을 하나 추가해줍니다.

그리고 위에서 헤더 색변화를 위해 추가 했던 스크립트에
진행바를 위한 코드도 추가해주세요.

<script> 
    $(function () { 
        $(document).on('scroll', function(){
            // 스크롤 시 header fade-in
            if($(window).scrollTop() > 100){
              $(".header").addClass("active");
            }else{
              $(".header").removeClass("active");
            }

            // 상단 진행바
            const scrollH = document.documentElement.scrollTop;
            const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
            const scrollW = (scrollH / height) * 100;
            $(".progress-bar").css("width", scrollW+"%");
        })
      }); 
  </script>

.box-progress 클래스를 가진 div 가 진행바의 틀을 담당하고
.progress-bar 클래스를 가진 div 가 변화하는 막대를 담당합니다.

다음은 CSS 탭으로 이동해서 이 진행바를 꾸며주겠습니다.
신규로 작성해줄거라 위치는 편한 곳에 추가해주세요.
저는 header 위에 붙어있는 블럭이니 아까 작업한 '.header' 속성 위에 추가해줬습니다.

.box-progress와 .progress-bar에 있는 height: 4px; 은 막대의 두꺼운 정도를 결정하는데
이 값은 원하는대로 테스트해보면서 설정하시면 돼요.

스크롤에 따른 진행 막대(.progress-bar)의 너비값은 스크립트에서 변경해주게 됩니다.

✨ 그래서 완성된 헤더는! ✨

이렇게 헤더 꾸미기 2탄도 해봤는데요.
이번엔 각자 상황이나 스타일에 따라 css에서 다른점이 많을 것 같아요.
제꺼 그대로 따라했는데 색변화가 이상하다던지..⊙﹏⊙∥
그나마 상관없이 똑같이 되는 건 진행바 정도..?

도움이 되었다면 하트 살짝 눌러주시면 감사하겠습니다! ♥
그 외에 다른 팁이나 꾸미기 방식이 있다면 댓글 남겨주세요 :)

> 더보기 접은글: 수정한 html, css 코드 보기

- HTML | <head> 아래 코드블럭 내용 복붙 </head>

<script> 
    $(function () { 
        $(document).on('scroll', function(){
            // 스크롤 시 header fade-in
            if($(window).scrollTop() > 100){
              $(".header").addClass("active");
            }else{
              $(".header").removeClass("active");
            }

            // 상단 진행바
            const scrollH = document.documentElement.scrollTop;
            const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
            const scrollW = (scrollH / height) * 100;
            $(".progress-bar").css("width", scrollW+"%");
        })
      }); 
  </script>

- HTML | <div id="wrap"> 이 바로 아래에 아래 코드블럭 내용 복붙

<!-- progress bar -->
<div class="box-progress">
	<div class="progress-bar" id="indicator"></div>
</div>

- CSS | 헤더와 진행바 클래스

/* progress bar */
.box-progress {
    position: fixed;
    top: 0;
    z-index: 100;
    width: 100%;
    height: 4px;
    background: #ffffff78;
}
.box-progress .progress-bar {
    height: 4px;
    border-radius: 5px;
    background: linear-gradient(to right, rgba(201, 141, 201, 0.521), rgba(147, 141, 201, 0.527));
    width: 0%;
}

/* header */
.header {
    position: fixed;
    background-color: #ffffff78;
    width: 60%;
    left: 20%;
    right: 20%;
    margin: 0 auto;
    border-bottom: none !important;
    box-shadow: 1px 1px 10px 0px #9999992e;
    z-index: 10;
    backdrop-filter: blur(5px);
    border-radius: 0 0 15px 15px;
    transition: width 0.5s ease, background-color 0.5s ease;
}
.header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(201, 141, 201, 0.29), rgba(147, 141, 201, 0.29));
    opacity: 0;
    transition: opacity 0.5s ease, width 0.5s ease;
    z-index: -1;
    border-radius: inherit;
    color: white;
}
.header.active::before {
    opacity: 1;
}

감사합니다.

[DP/구현] 백준 2775 부녀회장이 될테야 JAVA

윤개발새발 — Sat, 15 Mar 2025 01:10:37 +0900

[문제출처 | https://www.acmicpc.net/problem/2775 ]

접근 방식

다이나믹 프로그래밍 분류에 있는 문제로, 브론즈 등급이라 큰 어려움은 없었다.
DP 특유의 점화식 규칙 찾기가 어떤 식인지 입문하기 괜찮은 문제였다.

입력으로 들어오는 수의 최대값도 14로 작으니
1. DP용 가구원 수를 담을 배열 선언
2. 규칙을 찾아 전 층의 가구원 수를 DP 배열에 담는다.
3. 테케 별 해당 층, 호의 가구원 수 출력

DP 문제들의 주요 포인트는 점화식과 기저조건을 찾아내는 것이라 생각한다.
자세한 풀이는 아래 풀이 과정에서 풀어보겠다.

풀이 과정

변수

apart[15][14] : 메모이제이션을 위한 2차원 배열. 0 ~ 14층(15행), 1 ~ 14호(14열)

주요 풀이

k층 n호의 가구원 수는 k-1층의 1~n호 가구원 수의 누적합이다.
이때, 입력값은 1 <= k, n <= 14. 아파트는 0층부터 존재하며 각 층에는 1호부터 있다고 했으니
결국 0 ~ 14층, 1 ~ 14호까지 있다는 의미이다.

0층의 입력값은 주어지지 않으니 0층의 가구원 수는 기저조건으로 미리 채울 수 있다.

0층의 기저조건을 채운 상태

어떤 규칙이 있는지 간단하게 0 ~ 1층까지만 봐도 쉽게 알아낼 수 있는데 다음 그림과 함께 설명한다.
1층의 각 호의 가구원 수는 1-1층, 즉 0층의 해당 호의 가구원 수 누적합을 갖는다.

1층 1호의 가구원 수 계산

1층 1호의 가구원 수는 0층 1호의 가구원 수만큼

1층 2호의 가구원 수 계산

1층 2호의 가구원 수는 0층 1호+2호 가구원 수와 같은데(윗쪽 표) 0층 1호의 값은 1층 1호와 같다.
그렇다면 1층 1호+0층 2호의 값과 같다고 표현할 수 있지 않은가?

1층 3호의 가구원 수 계산

1층 3호의 가구원 수는 0층 1호+2호+3호 가구원 수와 같은데 이 역시 1층 2호가 이미 0층 1호+2호의 합산을 가지고 있다.
즉, 1층 2호(=0층 1호+0층 2호)+0층 3호 값과 같다고 표현할 수 있다.

이쯤 되니 규칙이 보인다.
현재 구해야 하는 k층 n호의 가구원 수는 k층 n-1호 가구원 수 + k-1층 n호 가구원 수다.
단, 어느 층이던 1호는 이전 호가 없기 때문에 k-1층의 1호 가구원 수를 그대로 가져간다.

제한 범위가 작아서 미리 전 층의 가구원 수를 채우고 입력값을 받도록 한다.
위에서 찾은 규칙을 바탕으로 조건과 점화식을 적용한다.

if(i == 0) { apart[0][j] = j + 1; }: 2차원 배열을 돌며, 0층일 땐 1 ~ 14까지의 값을 저장
else { apart[i][j] = j > 0 ? apart[i-1][j] + apart[i][j-1] : apart[i-1][j]; } : 0층이 아닐 경우(1층 이상부터)
- 삼항연산자(j > 0 ?) : 0호 이상(문제 상의 1호부터를 배열 인덱스 0으로 표기) 이면
- apart[i-1][j] + apart[i][j-1] : 전 층의 현재 호 + 현재 층의 이전 호 가구원 수
- apart[i-1][j] : 0호일 땐 전 층의 현재 호, 결국 모두 1로 똑같다.

참고 자료

이번 문제에서는 없다.

정답 코드

결과| 100점, 메모리 14016KB, 시간 100ms

import java.io.*;

public class Main {

	public static void main(String[] args) throws IOException{
		BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
		StringBuilder sb = new StringBuilder();
		
		int apart[][] = new int[15][14]; // 0~14층, 1~14호
		for(int i = 0; i < apart.length; i++) {
			for(int j = 0; j < apart[i].length; j++) {
				if(i == 0) {
					apart[0][j] = j + 1;
				} else {
					apart[i][j] = j > 0 ? apart[i-1][j] + apart[i][j-1] : apart[i-1][j];
				}
			}
		}
		
		int T = Integer.parseInt(br.readLine()); // 테케 수
		for(int t = 0; t < T; t++) {
			int k = Integer.parseInt(br.readLine()); // 층
			int n = Integer.parseInt(br.readLine()); // 호
			sb.append(apart[k][n-1]).append("\n");
		}
		
		System.out.println(sb.toString());
	}

}

[BFS] 백준 27737 버섯 농장(서브태스크) JS

윤개발새발 — Sat, 8 Mar 2025 03:50:18 +0900

[문제출처 | https://www.acmicpc.net/problem/27737 ]

접근 방식

해당 문제는 Java로 먼저 풀었기 때문에 접근 방식은 이전 포스트로 대체한다.
본진은 자바인데 프론트엔드 직군 코테를 위해 시작한 자바스크립트 풀이도 함께 올린다.

DFS나 BFS를 자바스크립트로 풀며 느낀 조심할 부분은 재귀의 범위가 자바보다 작다는 것이다.
자바에서 통과한 로직을 그대로 자바스크립트로 작성했는데 서브태스크 1만 성공하고 2는 틀렸다.
뭔가 큰 수에서 탐색할 때 문제가 있나 싶어 BFS로도 풀었는데 문제는 다른 곳에 있었다. (풀이 과정에 계속..)

큐에 탐색 칸을 담는 BFS 알고리즘으로 풀기 위해 visited 변수를 추가했다.

풀이 과정

변수

visited : 탐색한 map 칸을 구분하기 위한 배열
class Spore : 탐색 큐에 넣을 포자 정보를 담은 클래스

주요 풀이

맵 순회 시, 버섯이 자랄 수 있는 칸이며 방문하지 않은 칸일 때 bfs 탐색을 한다.
v === 0 && !visited[i][j]
탐색 큐에 탐색할 칸의 정보(Spore)를 담고 해당 칸은 방문처리를 한다.
q.push(new Spore(nr,nc)); visited[nr][nc] = true;
각 구역 별 칸 수(area[i])가 연결 가능한 칸 수(K)로 나눠지면 그 몫만큼만 필요하고 그렇지 않을 경우 몫에서 하나 더 필요하다.
❗자바와 틀린 결과에 헤맸던 부분, 다른 특성 → 자바스크립트는 자료형 특성 상 정수 나눗셈이라도 결과가 소숫점으로 나오기 때문에 정수 몫을 받고 싶다면 Math.floor()를 사용해야한다!

참고 자료

[백준,유기농배추| https://www.acmicpc.net/problem/1012 ]

[백준,섬의 개수| https://www.acmicpc.net/problem/4963 ]

정답 코드

결과| 100점, 메모리 11392KB, 시간 164ms

const input = require('fs').readFileSync(process.platform === 'linux' ? '/dev/stdin' : __dirname + '/input.txt').toString().trim().split('\n').map((el) => el.split(' ').map(Number));
let N = input[0][0]; // map 크기
let M = input[0][1]; // 포자 수
let K = input[0][2]; // 연결 수
let map = input.slice(1);
let area = Array(Math.floor(N * N / 2) + 2).fill(0); // 인접한 구역별 칸 수 관리
let visited = Array.from({length: N}, () => Array(N).fill(false));

class Spore {
    constructor(r, c) {
        this.r = r;
        this.c = c;
    }
}
const dr = [-1, 1, 0, 0];
const dc = [0, 0, -1, 1];

// 자원 재정의
map.forEach((row, i) => {
   row.forEach((v, j) => {
       if(v === 1) {
           map[i][j] = -1;
       }
    });
});

let cnt = 0;
map.forEach((row, i) => {
    row.forEach((v, j) => {
        if(v === 0 && !visited[i][j]) {
            bfs(i, j, ++cnt);
        }
    });
});

let needs = 0; // 필요한 포자 수
for(let i = 1; i < area.length; i++) {
    if(area[i] > 0) {
        needs += (area[i] % K === 0 ? Math.floor(area[i] / K) : Math.floor(area[i] / K) + 1);
    }
}

if(cnt > 0 && M >= needs) {
    // cnt > 0: 최소 하나라도 포자를 사용해야 함 조건 체크
    // M >= needs: 가지고 있는 포자 수 내에 필요한 포자 수 가능 체크
    console.log('POSSIBLE');
    console.log(M - needs);
} else {
    console.log('IMPOSSIBLE');
}

function bfs(r, c, idx) {
    let q = [];
    q.push(new Spore(r, c));
    visited[r][c] = true;

    while(q.length > 0) {
        let curr = q.shift();
        let cr = curr.r;
        let cc = curr.c;
        map[cr][cc] = idx;
        area[idx]++;

        for(let d = 0; d < 4; d++) {
            let nr = cr + dr[d];
            let nc = cc + dc[d];

            if(nr < 0 || nc < 0 || nr >= N || nc >= N)
                continue;
            if(!visited[nr][nc] && map[nr][nc] === 0) { // 0이 아닌 구역은 불가지역이거나 탐색된(인덱스 표기)구역
                q.push(new Spore(nr, nc));
                visited[nr][nc] = true;
            }
        }
    }
}

function dfs(r, c, idx) {
    map[r][c] = idx; // map 원본에 구역 인덱스 표기
    area[idx]++; // 해당 구역 인덱스 칸 수 증가

    for(let d = 0; d < 4; d++) {
        let nr = r + dr[d];
        let nc = c + dc[d];

        if(nr < 0 || nc < 0 || nr >= N || nc >= N)
            continue;
        if(map[nr][nc] === 0) { // 0이 아닌 구역은 불가지역이거나 탐색된(인덱스 표기)구역
            dfs(nr, nc, idx);
        }
    }
}

[DFS] 백준 27737 버섯 농장(서브태스크) JAVA

윤개발새발 — Sat, 8 Mar 2025 03:07:06 +0900

[문제출처 | https://www.acmicpc.net/problem/27737 ]

접근 방식

처음 문제를 읽었을 땐 이전에 풀었던 섬의 개수, 토마토와 비슷한 느낌을 받았다.
전형적인 DFS, BFS 문제로 구역을 탐색하며 흔적을 남기고 그때마다 카운팅한 어떤 결과물을 도출하는 것.

문제 내용 중 한 칸에 여러 개 포자를 겹쳐 심을 경우 범위가 더 늘어난다는 예시 이미지를 보고 순간 생각이 많아졌는데..
(BFS에 DFS까지 합쳐야 하는 문제인가? 해당 칸에 1개만 심을 경우, 2개 심을 경우, X개 심을 경우 퍼져 나갈 수 있는 칸은 X * K 개니까.. 헉 그럼 어떻게 풀어야하지? \(°_o)/ )
이러다 날 샌다.. 일단 겹쳐 심는 경우는 제쳐두고 하나씩 심는 경우에서 풀어나가 보자.

시작은 섬의 개수 풀이랑 비슷하게 구역을 구하는 식으로 접근했다.
1. 버섯이 자랄 수 있는 인접한 칸들의 덩어리=구역(area)을 탐색한다.
2. 각 구역들의 칸 수를 저장한다.
3. 구역별 칸 수를 연결 가능한 칸 수(K)로 나눈 값에 따라 필요한 포자 수의 합계를 구한다.
4 -1. 총 필요 포자 수(needs)가 가지고 있는 포자 수(M)보다 같거나 작으면 농사가 가능하고, 그 차를 출력한다.
4 -2. 그렇지 않을 경우 농사는 불가능하다.

탐색은 DFS 알고리즘으로 선택했다.
M, K 최대값이 컸지만 맵 사이즈인 N이 100이라 괜찮지 않을까? 하는 생각으로

아참, 문제 내용 중 '버섯 포자를 하나라도 사용하고' 라는 조건을 유의해야 한다.
버섯 포자를 하나도 사용하지 못하는 경우가 있다는 뜻이다.

풀이 과정

변수

int area[N * N / 2 + 2] : 인접한 칸들의 구역 관리, 최악의 경우 각 한 칸씩만 가능한 map이 주어졌을 때이고(N*N/2 + 1) 1번 인덱스부터 사용할거라 1을 더해줬다.
근데 N의 값이 그리 크지 않고 메모리를 넉넉하게 준 문제이므로 N * N 에 1번 인덱스용 +1 로 할당해도 괜찮다. (N*N+1)
cnt : 구역의 개수=인덱스
needs : 총 필요 포자 수

자원 재정의

탐색을 하며 map 원본에 구역별 인덱스를 덮어 씌울거라 버섯이 자랄 수 없는 칸 '1'을 '-1'로 재정의하여 입력을 받았다.

주요 풀이

map을 돌며 DFS를 태울 때 cnt가 0에서 시작하기 때문에 ++cnt 또는 dfs 호출 앞에서 cnt++ 을 해주고 보내야 한다.
cnt 가 0인 경우를 걸러줘야 함. dfs를 태우지 못한 즉, 버섯이 자랄 수 있는 칸이 없는 map일 때를 유의.
각 구역 별 칸 수(area[i])가 연결 가능한 칸 수(K)로 나눠지면 그 몫만큼만 필요하고 그렇지 않을 경우 몫에서 하나 더 필요하다.
area[i] % K == 0 ? area[i] / K : area[i] / K + 1
농사가 가능한 경우는 '최소 하나라도 사용' 하고 '주어진 포자 수가 필요한 포자수 총합보다 크거나 같을' 때다.
cnt > 0 && M >= needs

참고 자료

[백준,유기농배추| https://www.acmicpc.net/problem/1012 ]

[백준,섬의 개수| https://www.acmicpc.net/problem/4963 ]

정답 코드

결과| 100점, 메모리 16972KB, 시간 136ms

import java.io.*;
import java.util.*;

public class Main {

    static int map[][], N, M, K, area[];
    public static void main(String[] args) throws IOException {
        BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
        StringTokenizer st = new StringTokenizer(br.readLine(), " ");

        N = Integer.parseInt(st.nextToken()); // map 크기
        M = Integer.parseInt(st.nextToken()); // 포자 수
        K = Integer.parseInt(st.nextToken()); // 가능한 연결 칸 수

        map = new int[N][N];
        area = new int[N*N/2 + 2];

        for(int i = 0; i < N; i++) {
            st = new StringTokenizer(br.readLine(), " ");
            for(int j = 0; j < N; j++) {
                map[i][j] = Integer.parseInt(st.nextToken()) * -1;
            }
        }

        int cnt = 0;
        for(int i = 0; i < N; i++) {
            for(int j = 0; j < N; j++) {
                if(map[i][j] == 0) {
                    dfs(i, j, ++cnt);
                }
            }
        }

        int needs = 0;
        for(int i = 1; i < area.length; i++) {
            if(area[i] > 0) {
                needs += (area[i] % K == 0 ? area[i] / K : area[i] / K + 1);
            }
        }

        if(cnt > 0 && M >= needs) {
            System.out.printf("%s\n%d", "POSSIBLE", M - needs);
        } else {
            System.out.println("IMPOSSIBLE");
        }
    }

    static int dr[] = {-1, 1, 0, 0};
    static int dc[] = {0, 0, -1, 1};
    private static void dfs(int r, int c, int idx) {
        map[r][c] = idx;
        area[idx]++;

        for(int d = 0; d < 4; d++) {
            int nr = r + dr[d];
            int nc = c + dc[d];

            if(nr < 0 || nc < 0 || nr >= N || nc >= N)
                continue;
            if(map[nr][nc] == 0) {
                dfs(nr, nc, idx);
            }
        }
    }
}

[알고리즘] 선형검색과 이진검색 (누구나 자료구조와 알고리즘 도서 스터디)

윤개발새발 — Wed, 11 Sep 2024 20:32:40 +0900

이 포스팅은 '누구나 자료구조와 알고리즘 개정2판' 을 스터디한 내용을 바탕으로 작성하는 공부기록이다.

알고리즘

어떤 과제를 완수하는 명령어 집합
어떤 자료 구조를 이미 결정했더라도 코드의 효율성에 영향을 미칠 수 있는 중요한 요인

선형 검색

왼쪽에서 오른쪽으로 한 번에 한 셀씩 확인하며 값을 찾는 방식
원소 수만큼 단계가 필요하다. (N개의 원소가 있을 때 검색에 필요한 단계는 N단계)

이진 검색

계속해서 중간 지점을 골라 남은 수 중 반을 제거해 나가며 값을 찾는 방식.
정렬된 배열에서만 쓸 수 있다.
원소 수를 두 배로 늘릴 때마다 검색에 필요한 단계는 한 단계만 늘어난다. (대단히 효율적인 부분)
구현

public static void main(String[] args) {
	// 이진검색 구현 실습
	int[] array = {2, 4, 6, 8, 10, 12, 13};
	System.out.println(binarySearch(array, 8)); // 정렬된 배열 array에서 숫자 8을 찾는데 필요한 단계
		
}
	
public static int binarySearch(int[] arr, int value) {
	int step = 1;
		
	int lower_bound = 0; // 하한선
	int upper_bound = arr.length - 1; // 상한선
	int mid_point = 0;
		
	// 1. 상한선과 하한선의 중간 값을 계속 확인
	while(lower_bound <= upper_bound) {
		mid_point = (upper_bound + lower_bound) / 2;
		
		// 2. 중간지점 값 확인
		if(value == arr[mid_point]) {
			return step; // 값 확인, 현재까지의 단계 반환
		} else if(value < arr[mid_point]) { // 중간 지점 값보다 찾으려는 값이 작을 경우
			upper_bound = mid_point - 1; // 상한선을 중간 지점의 한칸 앞으로 지정
		} else if(value > arr[mid_point]) { // 중간 지점 값보다 찾으려는 값이 큰 경우
			lower_bound = mid_point + 1; // 하한선을 중간 지점의 한칸 뒤로 지정
		}
		step++;
	}
		
	// 3. 상한선과 하한선이 같아질 때까지 검색했는데 없다면 배열에 찾으려는 값이 없는 것 
	return -1;
}

선형 검색과 이진 검색

선형 검색은 y = x 의 그래프를 보이고 이진 검색은 log 의 그래프를 보인다.

[자료구조] 집합 (누구나 자료구조와 알고리즘 도서 스터디)

윤개발새발 — Wed, 11 Sep 2024 20:21:47 +0900

이 포스팅은 '누구나 자료구조와 알고리즘 개정2판' 을 스터디한 내용을 바탕으로 작성하는 공부기록이다.

집합

중복값을 허용하지 않는 자료구조

연산(배열 기반 집합)

읽기 : 배열과 마찬가지로 한 단계로 끝난다.
검색 : 최대 N단계
삽입
중복값을 허용하지 않는다는 제약에 의해 삽입하려는 값이 이미 있는지 검색이 우선되어야 한다.
맨 끝에 삽입하는 경우 N+1단계가 필요하고, 최악의 경우 맨 앞에 삽입할 때 N개를 검색하고 N단계를 거쳐 데이터 이동 후 값을 삽입하는 1단계로 총 2N+1단계가 필요하다.
삭제 : 최대 N단계

삽입의 경우 일반적인 배열보다 느리지만 중복 금지가 지켜져야 할 경우는 집합이 답이며, 이는 곧 애플리케이션의 요구사항에 따라 어떤 자료구조가 더 적합한지를 결정해야 함을 의미한다.

[자료구조] 자료구조와 배열 (누구나 자료구조와 알고리즘 도서 스터디)

윤개발새발 — Tue, 10 Sep 2024 20:15:45 +0900

이 포스팅은 '누구나 자료구조와 알고리즘 개정2판' 을 스터디한 내용을 바탕으로 작성하는 공부기록이다.

자료구조 용어

데이터 : 기초적인 수와 문자열
자료구조 : 데이터를 조직하는 방법으로 같은 데이터를 다양한 방식으로 조직할 수 있다. → 데이터 조직은 그 방식에 따라 코드의 실행 속도에 영향을 미친다.

속도 측정

'연산이 얼마나 빠른가'를 측정한다.
이때, 측정은 얼마나 많은 단계가 필요한지를 논해야 한다.

배열

크기 : 배열에 데이터 원소가 얼마나 들어있는지
인덱스 : 특정 데이터가 배열의 어디에 있는지

연산

읽기 : 위치를 찾아보는 것
배열은 각 인덱스에 특정 메모리 주소를 가지고 있고, 컴퓨터는 모든 메모리 주소에 한 번에 갈 수 있다.
→ 배열의 읽기는 한 단계로 끝나는 가장 빠른 연산 유형이며 강력한 자료 구조이다.
검색 : 값을 찾는 것
읽기와 반대의 방식으로 컴퓨터에 값을 제공하고 그 값이 들어있는 인덱스를 반환하라고 요청한다.
컴퓨터는 모든 메모리 주소에 한 번에 접근하지만 각 메모리 주소에 어떤 값이 있는지 바로 알지 못하기 때문에 찾으려는 값을 발견할 때까지 셀을 확인해야 한다.
→ 찾는 값과 찾는 방식에 따라 많은 단계가 걸릴 수 있다. (알고리즘이 필요한 이유)
삽입
컴퓨터는 배열의 시작 메모리 주소를 알고 있으니 마지막 항목의 메모리 주소를 쉽게 계산할 수 있고 그 끝에 삽입하는 것은 한 단계면 된다.
단, 중간이나 맨 앞에 삽입해야 하는 경우 기존 데이터를 이동하고 삽입해야 하므로 그 위치에 따라 많은 단계가 걸릴 수 있다. (최악의 경우는 맨 앞에 삽입할 때 N+1 단계 필요)
삭제
인덱스로 접근해 값을 삭제하는 것은 한 단계면 끝난다.
하지만 삭제하며 생긴 빈 공간을 메꾸기 위해 데이터를 이동하면 삽입과 마찬가지로 그 위치에 따라 많은 단계가 걸릴 수 있다. (최악의 경우는 맨 앞을 삭제할 때 N 단계 필요)

정렬된 배열

전형적인 배열과 거의 같으나 값이 항상 순서대로 있어야 한다.

연산

읽기
검색
- 선형 검색
  전형적인 배열과 가장 큰 차이를 보이는 연산이며, 찾으려는 값이 배열에 없을 때 검색을 빨리 멈출 수 있다.
  (최악의 경우는 찾으려는 값 ≥ 마지막 값일 때 최대 N단계)
- 이진 검색
  계속해서 중간 값을 골라 남은 수 중 반을 제거해가며 값을 찾는다.
  선형 검색에 비해 훨씬 빠르며 주의할 점은 정렬된 배열에서만 쓸 수 있다.
삽입
검색을 먼저 수행해서 삽입할 올바른 위치를 정해야 한다.
새 값이 앞 부분에 놓이면 비교가 줄고 이동이 늘어나고, 뒷 부분에 놓이면 비교가 늘고 이동이 줄어든다.
어디에 값이 놓이게 되든 연산 단계는 비슷하다. (맨 끝에 놓을 때 N+1단계)
삭제

→ 정렬된 배열이 전형적인 배열보다 삽입 성능은 느리지만, 검색은 이진 검색 방식을 사용함으로써 훨씬 빨라진다.

이를 통해 애플리케이션에서 요구사항을 분석하여 삽입/검색 중 무엇이 더 빈번하게 일어나는가에 따라 더 효율적인 자료구조를 선택해야 한다.

LTI 메모

윤개발새발 — Mon, 10 Apr 2023 01:51:33 +0900

LTI(Learning Tools Interoperability)

학습 도구 상호 운용성 IMS Global Learning Consortium(이후 1EdTech)에서 개발한 교육 기술 사양

소개

학습 관리 시스템(LMS)과 학습 도구 간의 상호 운용성을 제공하는 국제 표준.

LMS는 LTI를 사용하여 외부 타사 시스템에서 제공하는 과정 콘텐츠 및 도구를 웹에서 호스팅 할 수 있다.

웹 서비스 기술을 이용하여 구현되며, LMS와 학습 도구 사이에서 사용자 인증, 권한 부여, 결과 전송 등의 기능을 수행한다. LTI는 LMS에서 학습 도구를 호출할 때 필요한 매개 변수와 서명을 포함한 요청을 학습 도구 측에서 검증하고 그에 따른 응답을 제공한다.

간단한 구현 방법과 유연성, 확장성이 높은 특징을 가지고 있어서 현재 교육분야에서 널리 사요되고 있다. Moodle, Canva, Blackboard, Sakai, Open edX 등의 대표적 LMS에서 LTI 를 지원하고 있다.

SSO 처리를 위한 보안 OAuth2, OpenID Connect, IMS Security Spec(JSON 웹 토큰, OAuth2) 사용

LTI ADVANTAGE

: LTI 1.3 을 기반으로 하는 세 가지 필수 최종 사용자 서비스 패키지

Names and Role : 학습 도구에 학생 등록을 자동화함 → 교사는 각 도구에 학생 이름을 입력할 필요 없음. 관리자는 LMS에서 학생 활동을 볼 수 있고 교사는 학생들이 교과서를 열었는지, 얼마 오래 읽었는지 알 수 있음. 학생과 교사는 연락처 정보를 공유하지 않고도 서로 소통 가능.
Deep Linking : 교사는 학습 플랫폼에 대한 링크가 있는 코스를 구축할 수 있음. 학생은 타사 도구에 대한 링크를 열 수 있지만 항상 LMS 인터페이스 내에 있음 → 모든 도구의 이름을 기억할 필요가 없고 이는 e-러닝을 단순하게 함.
Assignment and Grades Services : 학습 도구에서 LMS 로 성적이 자동으로 돌아감 → 교사는 도구에서 LMS로 성적이나 댓글을 복사하지 않아도 됨. 학생들이 과제 제출한 이력 확인 가능.
Future Service : 사용자는 LMS의 모든 학습 도구에서 콘텐츠 검색 가능.

인증 방법

LTI Adveantage 인증을 받고 1EdTech 제품 디렉토리에 등재되기 위한

로그인 필수 : 회원 등급에 따라 리소스 액세스가 달라짐
- Development Resources | IMS Global Learning Consortium
보안
1. AS(Authorizaton Service)에서 액세스 토큰 요청
  1. JWT를 클라이언트 자격 증명으로 AS에 제공하여 ID 확인(sub, iss, aud)
과정 복사 및 리소스 링크
참조 구현 : 플랫폼과 도구를 모두 포함하는 구현. 적합성 인증 통과 테스트
인증 테스트 완료 후 LTI Advanatage Complete 인정

LTI 를 제공하는 LMS 탐방

Moodle

- 외부 도구 설정
External tool settings - MoodleDocs

External tool settings - MoodleDocs

Adding a new external tool to a course A preconfigured tool 'Chemistry quiz' shown in the activity chooser With the editing turned on, in the section you wish to add your external tool, click the "Add an activity or resource" link and choose either 'Extern

docs.moodle.org

앱 추가 방법

Edu App Center

TLI를 제공하는 LMS에서 쓸 수 있는 App들을 제공하는 사이트

Canvas, Moodle, Blackboard, Sakai 등에서 구성할 수 있는 튜토리얼 제공
화상 교실, 동료 평가, ms office, 텍스트 리더 등의 다양한 앱 제공
- 각 앱(도구)들은 사용 이점, 방법, 데모, 구성 url 등을 안내

참고자료

- LTI 소개 및 구현가이드
Learning Tools Interoperability v1.1.1 Implementation Guide | IMS Global Learning Consortium

Learning Tools Interoperability v1.1.1 Implementation Guide | IMS Global Learning Consortium

www.imsglobal.org

- edX 를 활용한 K-MOOC 의 과정 개발 및 운영 매뉴얼
8.22. LTI 구성요소 — K-MOOC documentation

8.22. LTI 구성요소 — K-MOOC documentation

8.22. LTI 구성요소 주석 K-MOOC은 이 도구에 대해 전체 지원을 제공한다. 상호 호환성 학습 도구 (LTI, learning tools interoperability) 구성 요소를 사용하여 외부 학습 응용 프로그램 또는 교과서를 스튜디

kmooc-e.readthedocs.io

- Opend edX의 개발자 가이드
1.2. Other edX Resources — Open edX Developer's Guide documentation

1.2. Other edX Resources — Open edX Developer's Guide documentation

1.2. Other edX Resources Learners, course teams, researchers, developers: the edX community includes groups with a range of reasons for using the platform and objectives to accomplish. To help members of each group learn about what edX offers, reach goals,

edx.readthedocs.io

[웹/API] View Transition API

윤개발새발 — Sat, 25 Mar 2023 21:59:16 +0900

View Transitions API

여러 DOM 상태 간에 애니메이션 전환을 쉽게 생성하는 동시에 DOM 콘텐츠를 단일 단계로 업데이트할 수 있는 메커니즘 제공

모바일 앱을 사용하면서 화면 이동 전환이나 요소 애니메이션(슬라이드, 페이드 인-아웃 효과, 확대 등)을 흔히 볼 수있다. 이러한 애니메이션은 만들 수 있으나 그게 마냥 쉬운 것만은 아니다.

SPA에서 이 같은 상태 간 전환에 CSS와 JS로 다음 과정을 수행한다.
이전 콘텐츠를 보여주면서 새 콘텐츠를 렌더링 → 애니메이션 발생 하며 전환 → 전환 완료 후 이전 콘텐츠 제거

위 과정에서 DOM에 이전 콘텐츠와 새 콘텐츠가 모두 표시되어 발생하는 문제가 있을 수 있는데, 이러한 DOM 변경 및 전환 애니메이션을 쉽게 처리하고자 등장한게 View Transitions API 다.

기본 보기 전환

작동 방식
1. document.startViewTransition() : 현재 페이지의 스크린샷을 찍는다.
2. displayNewImage() : 전달된 콜백이 이를 호출하며 DOM 변경
3. API는 페이지의 새로운 상태를 라이브 표현을으로 캡처
4. API는 다음 구조로 의사 요소 트리 구성
  - ::view-transition : 모든 보기 전환을 포함. 모든 페이지 콘텐츠의 맨 위에 있는 보기 전환 오버레이의 루트
  - ::view-transition-old : 이전 페이지의 스크린샷
  - ::view-transition-new : 새 페이지 보기의 실시간 표현
  전환 애니메이션이 실행되려고 하면 ViewTransition.ready 가 이행된다.
5. ::view-transition
  └─ ::view-transition-group(root)
  └─ ::view-transition-image-pair(root)
  ├─ ::view-transition-old(root)
  └─ ::view-transition-new(root)
6. 이전 페이지는 opacity 1→0 , 새 페이지는 0→1로 애니메이션 되며 교차 페이드 전환 생성
7. 전환 애니메이션이 종료 상태가 되면 ViewTransition.finished 가 이행되어 응답한다.

사용자 지정 애니메이션

API의 기본 CSS 애니메이션이 아닌 일반 CSS를 사용하여 원하는 방식으로도 애니메이션을 수정할 수 있다.
::view-transition-old() , ::view-transition-new() 에 그 속성값을 주면 되는데 그 예제는 문서를 참고하도록 한다.

JavaScript로 애니메이션 제어

API에서 제공하는 애니메이션과 더불어 추가 작업을 설정하고 싶을 때 JavaScript로 제어할 수 있다. document.startViewTransition() 메서드는 개체 인스턴스를 반환하여, 전환된 상태에 대한 응답을 통해 JavaScript를 실행 할 수있다.
의사 요소 트리가 생성되고 애니메이션이 시작되려하면 ViewTransition.ready 를 이행하고, 애니메이션이 완료되면 ViewTransition.finished 가 이행되고 새 페이지가 사용자에게 표시된다. 그 예제 역시 문서를 참고하도록 한다.

브라우저 호환성

아쉽게도 이제 막 나온 API 이다 보니 호환성은 제한적이다.
포스팅 하는 시점(23-03-25) 기준으로 Chrome 111, Chrome Android 111, WebView Android 111, Edge 111 버전만 가능하다. 그 외 브라우저도 개발 중인 것 같으나 아직은 불가능하다는 점 유의하기.

애니메이션은 웹 페이지를 보다 아름답게 만들어주는 요소다. 더불어 서비스에 몰입하는 사용자 경험에 영향을 줄 수 있다. 그러한 애니메이션을 편리하게 API 만으로 만들어낼 수 있다니 굉장히 매력적이다.
아직은 신생이다보니 자세한 활용이나 문제는 계속 업데이트 되는 문서를 통해 참고해야겠지만 토이프로젝트 같은 1인 프로젝트에서 유용하게 쓸 수 있지 않을까.

▶ 참고자료(아래 더보기 클릭)

https://youtu.be/ObT87Xu_CO0

https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API

View Transitions API - Web APIs | MDN

The View Transitions API provides a mechanism for easily creating animated transitions between different DOM states, while also updating the DOM contents in a single step.

developer.mozilla.org

[해결] java.lang.NumberFormatException: For input string 'N’

윤개발새발 — Thu, 16 Mar 2023 19:00:22 +0900

콘솔에서 실행했을 떄는 문제가 없었는데 서버에서 실행하니 매퍼쪽에서 자꾸 에러를 던졌다.
문자열을 비교하는 동적쿼리 조건문 <when test="p_storage_yn == 'N'"> 에서 문제가 발생했는데,
'N' 이라는 문자열에 대해 .toString() 을 해주지 않아 발생한 것이다.

<when test="p_storage_yn == 'N'">.toString() 해주니 잘 돌아갔다!

[서버] XShell을 이용한 EC2 접속

윤개발새발 — Thu, 16 Mar 2023 10:00:15 +0900

1. XShell 무료판 설치
https://www.netsarang.com/ko/free-for-home-school/

무료 라이선스 - NetSarang Website

무료 라이선스 무료 사용자의 최고의 선택 ㈜넷사랑컴퓨터는 강력한 SSH와 SFTP/FTP 클라이언트 프로그램을 지난 10년간 무료로 배포해온 것에 대해 자부심을 느낍니다. 저희 무료 라이선스는 단지

www.netsarang.com

정보 입력하면 메일로 다운로드 링크
설치 파일을 통해 설치

2. 파일 > 새로 만들기

3. 연결 메뉴 - 일반 탭

이름 : 임의의 이름 세팅
프로토콜 : SSH
호스트 : 도메인 주소(ex. mysite.com)
포트번호 : 22

4. 연결 > 사용자 인증 메뉴

Password 체크 해제
Public Key 체크
설정 버튼 클릭
팝업에서 사용자 키 - 찾아보기 클릭
사용자 키 팝업 - 가져오기 - .pem 키 불러오기

5. 모든 세션 > 생성한 세션 이름 클릭

6. SSH 사용자 이름 팝업 - 로그인 할 사용자 이름 : ubuntu

[인프라/웹서버] HTTPS 설정을 위한 SSL 인증서 설치

윤개발새발 — Wed, 15 Mar 2023 16:41:13 +0900

1. Certbot 저장소 설정 및 설치

sudo apt-get update
sudo apt-get install software-properties-common
sudo add-apt-repository universe
sudo add-apt-repository ppa:certbot/certbot
sudo apt-get update
sudo apt-get install certbot python3-certbot-nginx

2. SSL 인증서 획득

sudo certbot --nginx -d mysite.com

- mysite.com 은 인증서를 적용할 도메인을 적어주면 된다.

3. 인증서 자동 갱신

sudo certbot renew --dry-run

[웹/Vue.js/WebRTC] OpenVidu 설치부터 테스트까지

윤개발새발 — Wed, 15 Mar 2023 13:44:40 +0900

⚠️이 내용은 2021년도 프로젝트를 진행하며 작성했던 문서로 최신 버전과 다를 수 있습니다.

목차
0. 환경설정
1. 배포
1.1. 권장 설치
1.2. OpenVidu-Server Custom Dockerizing
1.3. 실행
2. Nginx 및 방화벽 설정
3. 실행 후 통신 확인

0. 환경 설정

본 문서는 환경 설정의 설치에 대해 깊게 다루지 않습니다.

AWS EC2
Java Version : open-jdk-11 (openvidu 2.20.0 버전 사용 시 jdk 11 필요)
maven : 3.6.3
docker
docker-compose
도메인 구성 : HTTPS 를 사용하여 배포. Let's Encrypt를 사용하여 SSL 인증서 생성
서버 포트 구성 (공식문서 권장)
- ufw allow : 우분투 방화벽 설정
  - sudo ufw allow ssh
  - sudo ufw allow 80/tcp
  - sudo ufw allow 443/tcp
  - sudo ufw allow 3478/tcp
  - sudo ufw allow 3478/udp
  - sudo ufw allow 40000:57000/tcp
  - sudo ufw allow 40000:57000/udp
  - sudo ufw allow 57001:65535/tcp
  - sudo ufw allow 57001:65535/udp
- sudo ufw enable : 우분투 방화벽 해제

1. 배포

1) 권장 설치

1. 설치 권장 폴더 생성 : mkdir opt
2. 설치 스크립트 다운로드 및 실행 : curl https://s3-eu-west-1.amazonaws.com/aws.openvidu.io/install_openvidu_latest.sh | bash

필요한 설정이 자동 설치됨(ex. docker-compse.yml)

순서대로 진행

# 디렉토리 구조
opt
- openvidu
-- certificates
-- custom-nginx-vhosts
-- docker-compose.override.yml
-- docker-compose.yml
-- openvidu
-- owncert
-- recordings

3. 설정 파일 수정 : nano .env

DOMAIN_OR_PUBLIC_IP=mysite.com # 서비스 할 도메인
OPENVIDU_SECRET=MY_SECRET # 변경 가능
CERTIFICATE_TYPE=selfsigned
# HTTP_PORT=80
# HTTPS_PORT=443
LETSENCRYPT_EMAIL=your@email.com

2) OpenVidu-Server Custom Dockerizing

디렉토리 생성 후 진입 : /home/ubuntu/ 에서 mkdir OpenVidu → cd OpenVidu
OpenVidu Git clone : git clone https://github.com/OpenVidu/openvidu.git
받아진 openvidu 폴더 진입 : cd openvidu
패키지 클린 : mvn clean install -U
openvidu/openvidu-server 폴더 진입 : cd openvidu-server
openvidu-server 패키지 클린 : mvn clean install -U
관리자 권한 부여 : sudo su
루트 디렉토리 이동 : cd /
SSL 인증서 경로 진입 : cd /etc/letsencrypt/live/{SSL 인증받은 도메인}/
openssl pkcs12 -export -in fullchain.pem -inkey privkey.pem -out mysite.com.p12 --name ssafy -CAfile chain.pem -caname root
- 이때 설정하는 비밀번호 보관해두기 [★]
- mysite.com.p12 생성 확인
openvidu-server 파일에 SSL 인증서 복사, 붙여넣기
1) openvidu-server 의 application.properties 가 있는 경로까지 이동 : cd openvidu/openvidu-server/src/main/resources/
2) SSL 인증서 복붙 : cp /etc/letsencrypt/live/mysite.com/mysite.com.p12 ./
= 내 사이트 SSL인증서(mysite.com.p12)를 현재 경로(./)에 복사하겠다.
application.properties 수정 : vi application.properties

server.address=0.0.0.0
server.ssl.enabled=true
server.ssl.key-store=classpath:mysite.com.p12
server.ssl.key-store-password=your-password # 위 10번에서 설정한 비번
server.ssl.key-store-type=PKCS12
server.ssl.key-alias=mysite
server.servlet.session.cookie.name=OVJSESSIONID

logging.level.root=info
spring.main.allow-bean-definition-overriding=true

SUPPORT_DEPRECATED_API=true

DOTENV_PATH=.

DOMAIN_OR_PUBLIC_IP=mysite.com
OPENVIDU_SECRET=MY_SECRET # openvidu .env 설정과 통일
CERTIFICATE_TYPE=selfsigned
HTTPS_PORT=5443 # 포트번호는 자유
KMS_URIS=["ws://localhost:8888/kurento"]

13. openvidu 최상위 파일로 이동
14. 메이븐 빌드 : mvn package -DskipTests
15. openvidu-server 파일로 이동 : cd openvidu-server
16. 파일 접근 권한 부여 : chmode 777 create_image.sh
17. 도커 이미지 생성 : ./create_image.sh 2.20.1
18. cd opt/openvidu
19. 도커 컴포즈 파일 수정 : vi docker-compose.yml

services:

    openvidu-server:
        image: openvidu/openvidu-server:2.20.1
        restart: on-failure
        network_mode: host
        entrypoint: ['/usr/local/bin/entrypoint.sh']
        volumes:
            - /var/run/docker.sock:/var/run/docker.sock
            - ${OPENVIDU_RECORDING_PATH}:${OPENVIDU_RECORDING_PATH}
            - ${OPENVIDU_RECORDING_CUSTOM_LAYOUT}:${OPENVIDU_RECORDING_CUSTOM_LAYOUT}
            - ${OPENVIDU_CDR_PATH}:${OPENVIDU_CDR_PATH}
        env_file:
            - .env
        environment:
            - SERVER_SSL_ENABLED=true
            - SERVER_PORT=5443 # application.properties 설정과 일치
            - KMS_URIS=["ws://localhost:8888/kurento"]
            - COTURN_REDIS_IP=127.0.0.1
            - COTURN_REDIS_PASSWORD=${OPENVIDU_SECRET}
            - COTURN_IP=${COTURN_IP:-auto-ipv4}

3) 실행

/opt/openvidu 경로에서 ./openvidu start
→ 이전에 실행을 했다면 'stop' 후 'start' 또는 'restart'
도커 확인 : docker ps

2. Nginx 및 방화벽 설정

1. Nginx 설정 파일 : sudo vi /etc/nginx/sites-enabled/default

location /api{
                proxy_pass http://localhost:8080/;
                proxy_http_version 1.1;
                proxy_set_header Connection "";

                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header X-Forwarded-Proto $scheme;
                proxy_set_header X-Forwarded-Host $host;
                proxy_set_header X-Forwarded-Port $server_port;
        }

2. 방화벽이 'inactive' 면 상관없으나 접근 허용 룰을 설정한 'active' 상태라면 위에서 설정한 포트 번호를 허용해줘야 함
→ sudo ufw allow 5443

3. OpenVidu 실행 후 통신 확인

1. /opt/openvidu 경로에서 ./openvidu start (이미 실행 중이라면 넘김)
2. 화면에 나오는 URL 접속(Server URL)

--------------------------------------------------------
  OpenVidu is ready!
	-----------------------
	* OpenVidu Server URL : https://mysite.com:5443
	* OpenVidu Dashboard : https://mysite.com:5443/dashboard
--------------------------------------------------------

3. 다음과 같은 화면 확인

4. Git에서 OpenVidu tutorial 클론 : git clone https://github.com/OpenVidu/openvidu-tutorials.git
5. openvidu-insecure-vue 파일을 VSCode로 열기
6. /src/App.vue 코드 수정

const OPENVIDU_SERVER_URL = "https://mysite.com:5443";
const OPENVIDU_SERVER_SECRET = "MY_SECRET"; // 본인이 지정한 비밀번호

7. npm 설치 후 실행 : npm i → npm run serve
8. 맨 처음 실행 시 비밀번호 입력 팝업이 뜸 : .env 에서 설정한 SECRET 입력
9. 다음과 같은 화면 확인

10. 브라우저에서 카메라/마이크 권한 알림이 뜨면 허용
11. 본인의 캠과 마이크가 잘 나오면 성공

이후 OpenVidu 공식문서의 튜토리얼을 참고하여 개발

최종 파일 구조

- /home/ubuntu/OpenVidu/openvidu : Git clone 받아 openvidu-server dockerizing
- /home/ubuntu/opt/openvidu : curl 로 설치 ./openvidu start 실행

참고링크

OpenVidu 공식문서

- 튜토리얼
openvidu-hello-world - OpenVidu Docs

Hello World - OpenVidu Docs

From here you can search these documents. Enter your search terms below.

docs.openvidu.io

- Vue.js
https://docs.openvidu.io/en/2.20.0/tutorials/openvidu-insecure-vue/

openvidu-insecure-vue - OpenVidu Docs

From here you can search these documents. Enter your search terms below.

docs.openvidu.io

- SpringBoot MVC Java
https://docs.openvidu.io/en/2.20.0/tutorials/openvidu-mvc-java/

openvidu-mvc-java - OpenVidu Docs

From here you can search these documents. Enter your search terms below.

docs.openvidu.io

- 배포 On premises
https://docs.openvidu.io/en/stable/deployment/ce/on-premises/

On premises - OpenVidu Docs

OpenVidu is deployed in production as a set of Docker containers managed with Docker Compose. You can deploy OpenVidu in any modern Linux distribution. You need root permissions to deploy OpenVidu. The recommended folder to install OpenVidu is /opt. Every

docs.openvidu.io

[회사일상] 회사툰#5. 그들의 매드맥스

윤개발새발 — Mon, 23 Jan 2023 01:07:56 +0900

본격 심심할때만 찾아 오는 회사 일상썰툰
「 개미는 뚠뚠 」

오늘도 뚠뚠.. 열심히 일을.. 하아...

어쩌다보니 내 블로그를 사내 팀원분들이 모두 알게 되면서
회사툰은 언제 올라오냐, 빨리 그려라 하는 응원이 있었으나...
심심하지 않던 나는 소재도 딱히 없었고 차일피일 미루던 차에
최근 재밌는 일이 있어 그려보았다.

이번편도 그러하듯 동기들과의 일화다.
레츠고

누구보다 카러플에 진심인 사람 우리야 우리~
클럽 만들어서 이벤트있으면 공지도 하고
쏘메에 멘티까지 컨텐츠를 아주 알차게 즐기고 있다.
신규 캐릭터와 아이템카, 펫 구매는 필수라구 ☆⌒(*＾-゜)v

이 툰을 보고 있는 당신. 동기들과 아이스브레이킹이 필요하다?
회사 사람들과 즐거운 취미, 색다른 점심시간을 보내고 싶다?
그렇담 모바일 게임을 추천한다.

아, 카러플을 함께 하고 싶다면 댓글로 문의 부탁드려요
ㅋㅋㅋㅋㅋ 개발자스러운 네이밍을 가진 저희 클럽은 열려있습니다 우헤헿

[해결] MSSQL/mybatis Incorrect syntax near '@P5'.

윤개발새발 — Fri, 9 Dec 2022 16:05:32 +0900

IDE : Intellij
Framework : Spring Boot
Build : Gradle
DB : MSSQL
JDBC : mybatis
Error : Incorrect syntax near '@P5'.
Solve :
위 에러 문구를 구글에 검색했을 때, Stack Overflow와 다른 블로그에서 여러 해결방안을 내왔다.
일단 나의 문제는 매퍼의 SQL INSERT 쿼리문에서 컬럼 사이 ',' 를 쓰지 않아 생긴 문제였다.

'@P5' 라는 키워드가 내 쿼리엔 없는데 대체 무슨일이지? 데이터를 잘못 받았나 싶었다.
이 뜻은 파라미터(P) 중 5 번째를 의미한다.
다른 사람들은 '@P0' 에서 오류가 나던데 그 경우는 괄호가 빠져 있다거나, 한글인코딩, `SQLServer20xxDialect` 등 의 문제였다.
이와 같은 에러가 난다면 먼저 쿼리에서 P 뒤로 오는 숫자 번째의 파라미터 주변을 꼼꼼히 보길 바란다.
(에러 문구 역시 정말 정직하게도 @P5 근처의 문법이 올바르지 않다고 쓰여있지만 P5가 뭔지 몰랐던 나...)
Study :
추가로 쿼리를 작성하며 컬럼을 나열할 때 콤마의 위치에 따라
1) ,컬럼 방식과
2) 컬럼, 방식이 있는데
1의 방식을 더 자주쓰는 이유를 알았다..
주로 신규로 쿼리를 따는 일보다 기존 쿼리를 수정할 때가 많아서 신경쓰지 않았는데, 2와 같은 방식으로 작성하면 꽤나 성가신 일들을 감수해야 한다.
예를 들면 SELECT 절의 마지막 컬럼은 ',' 을 빼줘야 하는데 수정하다가 미처 쓰지 않거나 지우지 않아 오류를 받는다.
그리고 필요에 따라 주석을 해줘야 할 때도 1의 방식으로 작성된 쿼리는 해당 라인만 주석처리를 해주면 되지만, 2의 경우는 콤마를 지웠다 썼다 해줘야 한다.

[회사일상] 회사툰#4. 그 동기들의 화목함이란(feat.소형견 싸움)

윤개발새발 — Sun, 4 Dec 2022 23:22:44 +0900

본격 심심할때만 찾아 오는 회사 일상썰툰
「 개미는 뚠뚠 」

오늘도 뚠뚠.. 열심히 일을.. 하아...

현생에 치여 주말이면 죽은 사람처럼 자는 바람에
많은 사건이 있었음에도 그리지 못했던 회사툰..
하지만 이것만큼은 그리고 싶어서 올린다.

1화에서 다뤘던 신입동기 양프로와의 사건을 다뤄본다.
레츠고

+)
그때의 메신저 상황

네, 이 모든건 사실입니다.

이게 어떻게 회사 사람이냐 의문이 든다면
나도 동의한다. 거의 뭐 3년이상 알고지낸 친구느낌 ^ㅅ^

서로가 첫 회사고 첫 입사동기, 같은 또래다보니
허울없이 편하고 친한사이가 된 게 아닐까

[회사일상] 회사툰#3. IT개발자의 창 분할 유형

윤개발새발 — Sun, 30 Oct 2022 22:06:13 +0900

본격 심심할때만 찾아 오는 회사 일상썰툰
「 개미는 뚠뚠 」

오늘도 뚠뚠.. 열심히 일을.. 하아...

평소와 다름없던 날, 시니어 분께 코드 질문을 했다가
떠 있는 창들을 보고 화들짝 놀라시더랬지.
문득 다른 개발자들은 창 분할을 어떻게 쓰고 있는지 궁금해서
이번에 개발자들의 창 분할에 대해 고찰해보았다.

레츠고

플러그인이나 테마 색상에 대해서도 다뤄보고 싶지만,
그건 다음에 알아보도록 한다.

IDE는 제보받은 인텔리제이와 STS 를 바탕으로 했다.

실상 여기서 DB 도구 사이드탭도 열지 않았음
탭을 하나만 띄워놓기도 한다.

디렉토리는 따로 탭을 떼서 다른 모니터에 띄워놓기도 한다.
(대부분의 개발자는 듀얼모니터 이상 사용.)

프론트딴을 따로 나누지 않는 (우리)회사의 경우,
JSP를 같은 프레임워크에서 봐야하지만
백과 프론트가 완전히 나뉜 곳이었다면..
백 기준 Controller, Dao/Service, Mapper 로 3분할 했을 듯.

여기서 참고해야 할 코드가 더 생기면
다른 모니터에 해당 창을 떼서 열어 놓는다.
즉 1.5개 모니터에 코드를 나열해놓는 셈
남은 0.5에는 로컬서버 결과물(또는 깃랩등의 모든 인터넷창) 확인~

정신없어 보일 수 있으나 나름의 규칙이 존재하는 창 분할이기에
괜히 이거저거 탭 열었다 닫았다 하는 것보다
각 위치에 같은 유형의 코드들을 여러 탭으로 관리하는 편이다.

여기서 공감하는 유형이 있거나, 뽐내고 싶은 독특한 창분할 유형이 있다면
댓글로 남겨주세요! \(@^0^@)/

[맛집추천] 노량진 두끼 마라탕

윤개발새발 — Mon, 24 Oct 2022 20:54:04 +0900

윤프로의 오늘의 맛집 추천

오늘은 이프로님과 함께 노량진 두끼 를 가기로 했다

처음엔 이번주 금요일에 가기로 했지만
월요일 내가 연차를 쓴다고 하니,
그렇담 월요일에 노량진으로 가겠다며 노량진에 두끼 가자고
퇴근 한 이프로님이 와주셨다..!!

쥼맬.. 차칸새럼...라이크..에잉졀...

그 친절에 감격을 받은 나..
가만히 있을 수 없지..

이프로넴~!! ヾ(•ω•`)o

사실 부끄러워서 빠르게 펼쳤다 닫음

회사 메신저를 보니
월요일이긴 해도 꽤나 일이 많았던 것 같은데
알 유.. 오케이?

ㅋㅋㅋㅋ이런 저런 이야기를 하며 두끼에 도착

오늘의 두끼, 주된 목적은 바로바로바로~~
이번 10월까지만 한다는 마라탕을 먹기 위해~~~~

가격은 성인 기준 9,900원!

두끼 노량진점은 4인석 존과 2인석 존이 나뉘어있었다.
2인석 존에서 혼밥도 괜찮을 듯
우리는 2명이었지만 4인석으로 향했다
튀김과 꼬지어묵, 음료, 보울을 둬야하니까 (*￣3￣)╭

시작은 일단 쬐꿈씩 담아보자고

토핑 셀프바

이렇게 마라탕 존이 표시되어 있다.
청경채, 목이버섯, 어묵볼, 소세지, 팽이버섯, 푸주, 숙주 등...

숙주 러버 이프로님을 위해 숙주를 한가득 담고
그 외 여러가지를 적당히 담아본다.

면, 튀김 셀프바

앵글 무엇...

면류에는 중국당면, 얇은 넙적당면, 그 윗칸에 분모자 등이 있었고,
그 옆에는 김말이, 닭튀김, 고구마, 만두, 미니돈가스 등의 튀김류가 있었다.

나는 중당, 분모자 러버니까 많이 담구~
튀김도 2개씩 일단 담아보구~~

소스 셀프바

소스는 뭐 넣을지 모르겠다면
앞에 레시피가 있으니 보고 넣으면 된다!

우리는 K-마라맛으로 마라탕 2국자+동대문 1국자
를 먼저 넣고 육수 넣었다가 밍숭한 비쥬얼에 한 번 더 넣어줬다.
총 마라 4+동대문 2

그렇게 자리로 와서 세팅세팅~

이거 넣고 한 번 더 떠왔다

튀김도 이거 먹고 한 번 더 가져왔다
내가 담았는데 진짜 조금 담았네ㅋㅋㅋㅋㅋ(머쓱)

소스 옆에 있던 꼬지어묵!
요거요거 맛있지 (╹ڡ╹ )

끓어오르는 용암

육수와 소스를 넣고 끓여준다.
분명 처음 넣었을 땐 너무 밍숭하게 생겼었는데
한 번 더 넣으니 뭔가 비쥬얼이 사악해짐...

마라냄새도 화악 풍겨오면서...
국물 한 숟갈 츄릅 먹어보니

...?

매워..? 좀.. 살짝.. 많이..?
ㅋㅋㅋㅎㅎ휴ㅠㅠㅠㅠㅠㅋㅋ

동대문 소스가 뒤에서 한대 탁 치고 가는 매움
이거.. 괜찮을라나? ㅎㅎ...

재료 다 넣고 끓이고 있는 사진을 안 찍었네..이런...

맛은 꽤나 좋았고 육수가 점점 졸아들면서
매콤함도 증폭됐다...짜고 맵고..
목구멍이 계속 누가 때리는데 이거..

이프로님과 내 모습

그치만 그래두 맛있었어

분명 두끼 간다고 했을 때는
두끼 기둥을 뽑아버리겠네, 볶음밥에 야무지게 먹어야지
두끼 딱대~~ 이랬는데,

정작 저것만 먹고 배부르고 매워서 코 훌쩍이던 우리는..
그대로 아이스크림만 한스쿱 떠먹고..
헤어졌습니다...
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

두끼 조지고 오겠다던 패기 어디갔냐고
그렇게 조져진건 우리였다...

머릿속의 나 vs 실제 나

헿.. 다음에 또.. 먹으면 되지 ㅎㅎ...

[웹] DOM 개념과 접근 방식(1)

윤개발새발 — Sun, 23 Oct 2022 20:37:25 +0900

DOM

문서 객체 모델, HTML 문서 객체 구조

문서(웹 페이지)의 구조화된 표현을 제공.

nodes(elements)와 objects(prpoerty, method, event)로 표현하며 tree 구조를 가짐

HTML DOM 트리

자바스크립트와 같은 스크립팅 언어를 이용해 DOM 구조에 접근할 수 있는 방법을 제공하여
그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.
⇒ API(web or XML page) = DOM + JS(scripting language)

프로그래밍 언어와 독립적으로 디자인 되었음. → DOM 의 구현은 어떠한 언어에서도 가능.

표준

W3C(World Wide Web Consortium) DOM
- Core DOM - 모든 문서 유형에 대한 표준 모델
- XML DOM - XML 문서의 표준 모델
- HTML DOM - HTML 문서의 표준 모델
  : HTML 요소를 가져오고, 변경하고, 추가하거나, 삭제하는 방법에 대한 표준
WHATWG DOM

자바스크립트와의 관계

DOM은 프로그래밍 언어는 아니지만 DOM 이 없다면 자바스크립트 언어는 웹 페이지 또는 XML 페이지 및 요소들과 관련된 모델이나 개념들에 대한 정보를 갖지 못하게 됨.

DOM 접근 방식

데이터 타입

document[문서] : root document object 자체
element(node)[요소] : DOM API 에 의해 리턴 된 element 또는 element 타입의 node
nodeList(node’s array) : 메소드에 의해 리턴된 것과 같은 elements 의 배열
attribute[속성] : object reference, DOM에서 element와 같은 nodes
namedNodeMap : 배열과 유사하지만, item 은 name 또는 index에 의해 접근 가능

DOM Programming Interface

HTML DOM은 JavaScript(및 프로그래밍 언어)로 접근 할 수 있음.
DOM 에서 모든 HTML 요소는 객체로 정의 프로그래밍 인터페이스는 각 개체의 속성과 메서드.

속성 : 가져오거나 설정 할 수 있는 값 ex) HTML 요소의 내용 변경
메소드 : HTML 요소를 추가하거나 삭제하는 것과 같이 수행할 수 있는 작업.
예시

<html>
	<body>
	
		<p id="demo"></p>
		
		<script>
			document.getElementById("demo").innerHTML = "Hello World!";
		</script>
	
	</body>
</html>

innerHTML : 요소의 내용을 변경 ⇒ 속성
getElementById : HTML 요소에 대한 작업 ⇒ 메소드

핵심 Interfaces
- Document : root document 자체
  - document.getElementById(id)
  - document.getElementsByTagName(name)
  - document.createElement(name)
  - parentNode.appendChild(node)
  - element.innerHTML
  - element.style.left
  - element.setAttribute
  - element.getAttribute
  - element.addEventListene
- window : 브라우저
  - window.content
  - window.onload
  - window.dump
  - window.scrollTo

속성과 메소드

속성
- .innerHTML = new html content : element의 HTML 내용을 변경
- .attribute = new value : HTML element의 속성값 변경
- .style.property = new style : HTML element의 css 변경
메소드
- .getElementById(id) : ID 값으로 요소 찾기
- .getElementsByTagName(name) : 태그 명으로 요소들 찾기 (list 리턴)
- .getElementsByClassName(name) : class 명으로 요소들 찾기 (list 리턴)
- .setAttribute(attribute, value) : HTML element의 속성값 변경
- .createElement(element) : 새로운 HTML element 생성
- .remsoveChild(element) : HTML element 제거
- .appendChild(element) : HTML element 추가
- .replaceChile(new, old) : old HTML element 를 new element로 교체
- .write(text) : 출력 스트림에 직접 씀
  ex) document.write(Date()); 현재 날짜를 출력
  단, 해당 메소드는 문서를 로드한 후에 사용하게 되면 문서를 덮어쓰게 됨.
- .querySelectorAll(element) : css 선택자와 일치하는 모든 HTML elements 목록 반환

이벤트 리스너

addEventListener() 메소드는 지정된 요소에 이벤트 핸들러를 연결한다.
기존 이벤트 핸들러를 덮어쓰지 않고 요소에 연결. → 하나의 요소에 여러 이벤트 핸들러를 추가할 수 있음.

HTML element 뿐 아니라 창 개체에도 이벤트 리스너를 추가할 수 있다.

element.addEventLisetner(event, function, useCapture)
- event : 이벤트 유형(ex. click, mousedown 등)
- function : 이벤트가 발생할 때 호출하려는 함수
- useCapture : 이벤트 버블링 또는 이벤트 캡처를 사용할지 여부(true, false), 선택사항
- 예시 1. 동일한 요소에 많은 이벤트 핸들러 추가

element.addEventListener("click", myFunction);
element.addEventListener("mouseover", mySecondFunction);

function myFunction() {
	alert("Hello World!");
}

function mySecondFunction() {
	alert("This is second Func!");
}

예시 2. 익명함수를 사용한 매개변수 전달

element.addEventListener("click", function() { myFunction(p1, p2); });

예시 3. 창 개체에 이벤트 처리기 추가

// 창 크기를 조정할 때 발생
window.addEventListener("resize", function() {
	document.getElementById("demo").innerHTML = "blah blah";
});

예시 4. 이벤트 버블링과 이벤트 캡처

<script>
// 이벤트 버블링
document.getElementById("myP").addEventListener("click", myFunction, false);
document.getElementById("myDiv").addEventListener("click", mySecondFunction, false);

// 이벤트 캡처
document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", mySecondFunction, true);

function myFunctoin() {
	alert("You clicked the P element");
}
function mySecondFunctoin() {
	alert("You clicked the Div element");
}
</script>

<div id="myDiv">
	<h1>OUTTER</h1>
	<p id="myP">INNER</p>
</div>

이벤트 버블링 : 가장 안쪽 요소의 이벤트가 먼저 처리된 다음 바깥쪽 이벤트가 처리 됨.
<p> 요소 클릭 이벤트 처리 후 <div> 요소 클릭 이벤트 처리
- “You clicked the P element” → “You clicked the Div element”
이벤트 캡처 : 가장 바깥쪽 요소의 이벤트가 먼저 처리된 다음 내부 요소 이벤트 처리.
<div> 요소 클릭 이벤트 처리 후 <p> 요소 클릭 이벤트 처리
- “You clicked the Div element” → “You clicked the P element”

[참고 자료]

https://dom.spec.whatwg.org/

DOM Standard

dom.spec.whatwg.org

https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction

DOM 소개 - Web API | MDN

이 문서는 DOM에 대한 개념을 간략하게 소개하는 문서이다: DOM 이 무엇이며, 그것이 어떻게 HTML, XML (en-US) 문서들을 위한 구조를 제공하는지, 어떻게 DOM 에 접근하는지, API 가 어떻게 사용되는지에

developer.mozilla.org

https://www.w3schools.com/JS/js_htmldom.asp

JavaScript HTML DOM

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

[자취생활] 애호박돼지찌개를 했는데 돼지불고기가 되어버림+다시마쌈

윤개발새발 — Sun, 23 Oct 2022 20:05:17 +0900

윤프로의 우당탕탕 데일리 라이프
자취편

엄마가 겨울옷을 보내주시면서
양파와 호박, 감자, 귤, 사과 등을 같이 보내주셨는데
갑자기 생겨버린 부자재들을 먹어치워버리기 위해 만든..

애호박 돼지 찌개, Let's cook with me...
- 부제 : 나는 한동안 뭘 만들 생각이 없었는데... -

재료 준비 is,

애호박돼지찌개 재료

돼지고기 찌개용(앞다리살) 500g
애호박
양파
감자
팽이버섯(애기새송이 넣어도 굿)
대파
두부(옵션)

고춧가루
고추장
국간장
멸치액젓

네, 이걸 만들기 위해 또 쓱배송 4만원어치 시켰구요 ㅎ

채소들 프렙

나는 멀티가 안 되기때문에 미리 다 썰고 준비를 해둬야 한다.
어차피 내가 먹을거니까 어떻게 썰든 상관無
적당히 잘 익게만 썰어준다.

갑자기 많은게 진행되어 버리고선 참담한 모습

채소는 준비 해뒀는데 양념을 준비 안 해둬서 태워먹음ㅋ
그 순간 많은 일이 벌어져서 사진 또한 찍지 못했다

1) 먼저 기름을 두르고 거기에 파를 볶아 파기름을 내준다.
2) 그 다음 고춧가루 4숟갈, 고추장 2큰술을 넣어 볶아준다.
3) 거기에 돼지고기를 넣어 볶볶..!
4) 고기의 겉면이 익으면 육수나 물을 넣어 끓여준다.

근데 파기름 내다가 파 다 태워먹었다 ㅎㅎㅎ
인덕션 불조절 넘모 어려오! .·´¯`(>▂<)´¯`·.

그리고 고추장은 1큰술만 넣었어도 됐을 듯..
2큰술을 넣었더니 거의 닭볶음탕, 불고기의 양념이 되었다

모오때 일단 해보자고~

감자랑 호박 풍동쓰

거기에 국간장, 멸치액젓을 한 큰술씩 넣어주고
(이건 간보면서 취향껏 맞추기 액젓은 한 번에 너무 많이 넣지 않기!)

한소끔 끓으면 감자와 호박을 넣어준다.
단단한 채소를 먼저 익혀주는 것!

양파랑 버섯 두부도 넣어넣어

또 한소끔 끓으면,
양파랑 버섯, 두부를 넣어 약불에서 끓여준다.

분명 엄마가 해준거는 좀 더.. 살짝 깔끔한 국물이었는데
이건 200미터 뒤에서 앞구르기를 하며 봐도 그냥 불고기임

완성

양파랑 버섯이 익었다 싶으면
마지막 간을 보고 불 꺼 불 꺼~~

흔한 자취생의 저녁밥상

장 보면서 갑자기 다시마쌈 먹고 싶어서 산 다시마와
정작 초장이 없어서 대충 만든 초장과..
현미쌀밥, 메인메뉴 돼지 애호박찌개

전날 새벽부터 보기 시작한 주술x전 애니를 밥친구 삼아
뇸뇸쓰

맛이요?
닭볶음탕, 돼지불고기 그 잡채... ㅋㅋㅋㅋㅋㅋㅋㅋ

이상하게 고추장 베이스의 내가 만든 양념들은
다 닭볶음탕의 맛을 가지고 있다 ㅎㅎ...
맛이 없진 않음! 맛있음!
근데 내가 아는 그 돼지애호박찌개가 아니야...

+)
다시마쌈은 소금이 뿌려진 다시마 팩이었는데
잘 씻어서 찬물에 1시간가량 담가뒀다.
설명서에는 10분 담가두면 된댔지만 그래도 짰음.
1시간은 너무 밍숭해지는 것 같고 30분~40분 쯤이 괜찮을 듯

초장 만드는 법은
고추장:식초:사이다 = 1:1:1 정도로 맞춰서 섞어주면 된다.
나는 사이다가 없어서 매실액과 탄산수로 대체했다.

[회사일상] 회사툰#2. 개발자에게 자율복장이란

윤개발새발 — Mon, 17 Oct 2022 12:44:27 +0900

본격 심심할때만 찾아오는 회사 일상썰툰
「 개미는 뚠뚠 」

오늘도 뚠뚠.. 열심히 일을.. 하아...

요즘 대부분의 회사들이 자율 복장을 허용하는 분위기던데,
IT 회사는 자율 복장이 디폴트 아니던가
(금융권은 아닐 수도..)

이런 자율 복장이 마냥 좋지만,
그래서 생기는 여러 에피소드가 있어 가져와봤다.

개발자에게 자율 복장이란,

+)
추가 여담

요즘엔 다들 어쩌다 색다른 옷을 입고와도
딱히 내색은 안하지만 관심있게 보는 중...ㅋㅋㅋ

보통 후줄근하게 입던 내가 옷을 차려 입는 건 두 경우!

1. 예쁜 옷은 옷걸이에 걸려있는데
진짜 나갈 일이 회사밖에 없어서
계절 바뀌기 전에 입고 오거나

2. 찐으로 약속이 있거나

이 글을 읽고 있는 당신은 어떤 타입인가요?

[점심추천] 증미역 우림블루나인 공가김밥 치즈오므라이스

윤개발새발 — Thu, 13 Oct 2022 12:58:02 +0900

윤프로의 오늘의 점심메뉴는 무엇

오늘의 점심 메뉴는 분식!
우림블루나인에는 분식집이 3곳 있는데 그 중 하나인 공가김밥 에 다녀왔다.

우림블루나인 1층에 있다.

매장 내부는 넓은 듯 작은 듯, 분식집 치곤 넓으려나
제대로 세어 보지 않았는데 대충 10테이블 내외로 있다.

자리에 앉으면 테이블 위에 주문서와 빨간 색연필이 있는데,
메뉴를 체크하고 카운터로 가져다 드리면 된다.

공가김밥 메뉴와 가격

대학시절 학교 앞 분식집에서 치즈오므라이스를 맛있게 먹었던 기억에
그 후로 분식집에서 치즈오므라이스가 있으면 꼭 시키게 된다.

그래서 내가 시킨 건 치즈오므라이스, 가격은 7,500원 이다.

그리고 같이 간 프로님들은 각각
참치오므라이스(7,500원),
날치알김밥(4,500원),
참치김밥(4,000원)+냄비라면(3,500원)

밑반찬과 물은 셀프다.
반찬은 카운터 뒷쪽에 그날그날 다른 반찬과 우동국물이 있다.
오늘은 옛날 소시지가 있었다.

예전에 간장 감자조림이 있었는데 꾸덕꾸덕한게 너무 맛있더랬지..
그건 언제 나오려나..먹고 싶다.. 튜베릅

주문서를 가져다 드리고
일사분란하게 세팅하는 사람들..
그리고 그 중 반찬을 두 분이서 떠오셨는데

두둥탁

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

소세지 광인들이야 뭐야~~
반찬 칸이 나눠져 있지만 메뉴는 하나다 이거야~
본의 아니게 남기지 않으려고 다들 열심히 먹었다 ㅋㅋㅋ

윗쪽 참치김밥, 아래 날치알 김밥

제일 먼저 나온건 김밥들

이번에도 사정없이 수저와 젓가락을 휘둘러대는 프로님들 덕에
급히 건진 음식 샷...

않이~ 사진 찍으라고 해놓고 왜 훼방 놓냐고~~

참치 김밥은 여느 김밥집이 그렇듯
보통의 그 참치 김밥이었고,
날치알 김밥엔 깻잎, 날치알, 마요네즈가 들어 있는 스타일이었다.

날치알 김밥의 후기를 들어보자면,
날치알 양은 쏘쏘 + 살짝 느끼했다..

치즈오므라이스

그 다음 나온 건 나의 치즈 오므라이스! ヾ(•ω•`)o

치즈 오므라이스는 슬라이스 치즈가 아닌
계란 이불 안으로 모짜렐라 치즈가 들어간다.

대학 앞에서 먹었던 오므라이스에는
진짜 치즈가 한가득 들어있어서 좋았는데..
여기는 얇게 깔려있다.

쭉쭉 늘어나진 않고 그냥 치즈가 있구나 정도
옆에 뿌려진 소스는 살짝 새콤한 스타일이다.

안에 밥은 야채와 케챱소스를 같이 볶은 볶음밥이 들어있고
전반적으로 간은 적당하고 양은 든든하다.

냄비라면

이건 무슨 라면이었으려나
손바닥 크기의 양은냄비에 막 끓여 뜨거운 라면이 담겨온다.
보통 분식집에선 신라면이던데 요새 또 라면값이 올라가지고..

참치오므라이스

치즈오므라이스와 겉모습은 완전 똑같다.
다만 안에 든 볶음밥에 참치가 같이 섞였느냐 아니냐 차이 정도

밥 양이나 간은 아마 비슷할 것 같다.

분식집은 여기 말고도 바로 옆에 우림분식, 3층에 밥단지가 있는데
우림분식은 좁지만 복층구조로 2층까지 있고
밥단지는 넓으나 메뉴가 진짜 늦게 나온다..(적어도 내가 갔을때+다른 분 경험담은 그랬다..)
그래서 분식이 먹고 싶을 땐 그나마 공가김밥으로 오는 편..

다음엔 우림분식도 가봐야겠다.
밝고 좀 넓은, 깔끔한 분식집을 가고 싶다면 공가김밥을 추천!

[점심추천] 증미역 우림블루나인 새벽집 3트 + JYP가 다녀간 빽다방

윤개발새발 — Wed, 12 Oct 2022 16:36:56 +0900

윤프로의 오늘의 점심메뉴는 무엇

투데이 런치 메뉴 이스 벽집벽집 새벽집 3트

우림블루나인 1층 이디야 앞에 있다.

므째이 선임~ 시니어 프로님과 함께 하는 식사자리 ☆⌒(*＾-゜)v

입사초때부터 밥 한 끼 먹어요~했는데
워낙 바쁘시기도 하고 자꾸 시간이 안맞아서 미뤄지게 됐다.
새벽집은 3트지만 프로님과 식사는 1트라구~

메뉴는 날도 춥고 해서 새벽집으로 픽.

내가 시킨 메뉴는 뚝배기 불고기 !
가격은 8,000원 이다.

3트인만큼 비빔밥은 넘어가도록 하겠다.
혹시나 궁금하다면 지난 포스팅 참고

뚝배기 불고기

펄펄 끓으며 나오지만 곧 사그러든다.
약간의 당면과 양파가 든 간장 베이스의 불고기다.

역시나 고기 거품이 거슬리지만 대충 슥슥 걷어내고 쨥쨥쓰
고기를 따로 건져먹어도 좋고,
비빔밥에 함께 비벼 먹어도 좋다.

간은 적당히 짭쪼롬!
살짝 기름져서 느끼할 수 있다.

낙지비빔밥

사진 찍으시라길래 호다리닥닥 찍었더니
이렇게 흔들린지 몰랐지 ㅋㅋㅋㅋㅋ

비빔밥류는 미리 나물들이 넣어져서 나온다.
낙지는 오동통하고, 양은 아쉬운 듯 적당한 듯 그 사이 어디쯤...
내 기억에 양념이 살짝 매콤했던 듯.

뚝배기 제육

허허 사진이 다 흔들렸군..^^

뚝배기 제육은 고추장 베이스 양념이다.
제육은 비빔밥에 같이 비벼먹는게 더 맛있다.

고기 양도 많고 불고기보다 두꺼운 스타일
사알~짝 매콤하면서 기름진 맛이다.

들깨 숨두부

술 마신 다음날 먹으면 술이 들깨!

들깨 숨두부는 언제 함 시켜봐야지~ 했던 메뉴!
다른 숨두부 찌개는 전부 빨간 국물이었는데,
이거는 하얀국물 스타일이었다.

두부와 들깨의 고소함이 두 배일 것 같다.

든든하게 배를 채우고..
얻어먹은 밥이라 더 맛있었다 ㅎㅎ

핫뜌

잘 먹었습니당 ლ(╹◡╹ლ)

+ 후식 커피도 쏴주셔서 향한 빽다방

달큰~하게 원조커피 아이스로 골랐는데

저 사인은 뭐래여..?

어디보자..

싸인 해 준 이름이..

이왜진

왜.. 왜 여길? 왜? 언제?

제왑삐가 다녀간.. 빽다방...
그대 눈에.. ㅊi얼sS..★

[회사일상] 회사툰#1. 그들의 상관관계<신입동기들과 애기선임에 대하여...>

윤개발새발 — Tue, 11 Oct 2022 08:00:08 +0900

본격 심심할때만 찾아오는 회사 일상썰툰
「 개미는 뚠뚠 」

오늘도 뚠뚠.. 열심히 일을.. 하아...

어느새 입사 6개월차가 지나 7개월을 달려가는 지금..
짧다면 짧고 길다면 길 수 있는 그 기간에 동기들과 꽤나 친해진 듯 해서
요즘의 동기들+애기선임과의 사이가 어떤지 생각해봤다.

일단, 동기들과는 찐 입사동기로 같은 날 입사한 사람들이고
애기선임은 인턴 생활을 하다가 우리보다 3개월 먼저 입사한 상황이다.

나이는 나를 기준으로
동기 : 위로 1살, 아래로 2살(빠른이지만 출생년도로 침)
애기선임 : 아래로 7살 되시겠다.

연장자 우대, 나이 순으로 이들과의 상관관계를 보겠다.

그 첫 번째.
위로 1살, 양프로님

나(왼쪽) vs 양프로(오른쪽)

진짜 딱 이 느낌.

말티쥬 두 마리 머리채 잡고 싸우는 모습

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
이게 막 살벌하게 싸우는 게 아니라
좀 유치하게 서로 놀린다 해야하나...

아득바득 안 지려고 입딜 오지는 42..

약간 한 살 많지만 한 살 쯤이야 무시하고 친구먹는 느낌?
물론 이건 나의 일방적인 친구먹음이다ㅋㅋㅋㅋㅋ

겉으로는 평화로워 보여도
회사 메신저랑 (다 들리는)혼잣말로 으르렁거리는 중

양프로님도 장난으로 받아주시는 것 같은데
~~장난 받아주는 거 맞겠지?~~

모르는 건 적극적으로 도와주고
배움과 이해의 속도가 빨라서 응용하는게 유연한,
막상 남한테는 동기 좋은 소리만 해주는
내 블로그 프로 광고클릭러 되시겠다 ^^
(맞져? 양프로님?)

다음 두 번째.
아래로 2살, 이프로님

이프로님이랑은 약간 묘하게 서로 맞는게 많았는데,
그래서인지 빠르게 친해졌다.

입사한지 얼마 안 돼서 벚꽃도 같이 보러 감.
참고로 둘 다 MBTI 'I' 형의 사람임.
(그리고 끝에만 다름 J 와 P)

나는 주변 친구들을 만나서 회사 이야기를 할 때마다
동기랑 엄청 친하게 잘 노는 걸 듣고는
모두 신기하게 쳐다봤다... 너네 팀 분위기 좋다며..

요즘도 죽이 잘 맞아서
회사 쉬는 시간엔 비눗방울도 불고
같이 포켓몬 키링깡도 하는 그런 사이다
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

이프로님은 공부를 엄청 열심히 하셔서
전공자 출신인 내가 부끄러워질 정도..
보고있노라면 열심히 해야겠다 긴장하게 하는 분이다.
본인은 아니라고 하는데 다 아러~~

다음 세 번째.
아래로 7살, 정만정말프로

아무래도 나이차이가 많이 나다보니
우리 3인방이 잘 놀리는 대상
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

어리지만 무려 선임인지라
귀여워하면서 놀린다.

무슨 예를 들어주고 싶은데 막상 생각나는게 없네..
정말 딱 그림 그 잡채인데,
웃쭈웃쮸~ 옥우오구~ 하는 뉘앙스로..ㅋㅋㅋㅋ

놀려도 큰 타격없이 오히려 맞받아치는 편이라
서로 가볍게 노는데,

어쩌다 세대차이로 찍어눌려질 때면...

그땐 세상 불쌍하고 억울한 늙은이 되는거다.
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

막내 놀리는 건 너무 즐거워! ><
어쩔 줄 몰라하며 죄송해하는게 딱 애기모습이라
자꾸 놀리게 된다 ㅎㅎ

그래도 인턴 짬밥으로 선임포스 두둑한,
질문이나 문제에 바로 자리로 찾아와주는
어리지만 듬직한 애기선임이다.

일이 힘든 건 버틸 수 있지만,
사람이 힘들면 버틸 수 없다는 것.

여기에 나오진 않았지만
팀을 비롯해 회사 사람들이 좋아서
꽤나 즐겁게 회사 생활을 하고 있다.

또 어떤 소재가 생길지
자~ 일어나~ 출근하자.. 돈 벌어야지..

[맛집추천] 강남 강남역 을지다락 게살매콤리조또 매콤크림파스타

윤개발새발 — Tue, 11 Oct 2022 00:03:06 +0900

윤프로의 오늘의 맛집 추천

점심은 고터에서 먹고
우주가챠를 즐긴 뒤
살짝 이른 저녁을 먹기 위해 향한 강남 을지다락

강남역 11번 출구로 나오면 금방 찾을 수 있다.

을지다락은 2층!
1층 카페 옆, 건물 계단을 타고 올라간다.

문 위에 문구 주의

계단을 오르자마자 바로 문이 보여 열고 들어가야 할 것 같지만,
'This is not a Door' 거긴 문 아님.
그렇담 어디로 들어가야 하냐고?
'This is not an Elevator'
엘베였던 것으로 들어가면 된다.

내가 갔을 때는 열려있어서 그냥 들어갔지만
다른 블로그를 보면 닫혀있기도 하나보다.
저 옆에 버튼이 있었는데 그거 누르면 되는 듯!

자리를 안내받아 앉으면,
메뉴판과 함께 종을 준다..

이 종의 용도는

쨍그랑쨍그랑쨍그랑 쨍그랑~
" 자자 주목! 오늘부터 금잔디는, 이 구준표의 여자친구임을!
공식적으로 발표하는 바이다~! "

구준표 여자친구 선언용

은 아니고
호출벨 느낌으로 종업원분들을 부를 때 쓴다 ㅎㅎ...
❕ 살짝 흔들어도 소리 꽤 큼 주의

메인 메뉴

같이 온 지인이 생일이었던지라
생일선물로 밥을 사기로 했다^^

내가 고른 메뉴는 게살매콤리조또(17,000원)
지인은 매콤크림파스타(17,000원)을 시켰다.

다른 테이블을 보니 다락오므라이스를 많이들 시키는 듯.
시그니처 메뉴로 시키는 듯 했지만 나는 크루픽 택

사이드메뉴 & 음료

추가로 크림어니언감자튀김(9,000원) 을 시켰다.
개인적으로 가츠산도를 먹어보고 싶었는데
배가 많이 고프지 않았던 터라, 다음에 오면 먹어봐야지 킵.

주문을 마치고 각자 식기 준비..
수저가 굉장히 원 모양인게 독특하고 예쁘다 했는데,
이걸로 리조또 떠 먹다가 속터져 죽는 줄..ㅎ..

숟가락이 괜히 타원형이 많은게 아니었다.

게살매콤리조또

리조또는 대게 다리가 또깍또깍 올려져있고
그 위에 올려진 노른자를 터트려 먹으면 된다.

대게 다리는 안에 살이 들었나 봤는데
3개쯤 들여다봤을 때 텅 비어있어서 당황했다
장식인가보다 했는데
4개째에서는 또 안에 살이 들어있길래 빼줌...
(물론 앞에 3개 살은 리조또 안에 잘 있었다)

잘 보고 발라 먹기..
아참 이때 나온 대게 살은 제법 살이 붙어있었는데
먹을 때 주의할 점은 그 안에 심지가 있으니 주의

전반적인 맛은,
분명 매콤이었는데 전혀 매콤하지 않고
크리미한 건 좋았지만 먹다보면 느끼해서 질리게 된다.
뭔가 김치가 너무 땡기는 그 느낌..

피클은 말하면 주니 필요한 사람은 달라고 말하기!

매콤크림파스타

먹어보진 않았지만,
지인의 후기에 따르면

가루때문인지 매콤해서 그나마 물리는 건 덜했다고 한다.
꽤 맛있게 잘 먹은 듯

크림어니언 감자튀김

감자튀김은 그냥 감자튀김이었다.
요거트 베이스인가? 살짝 새콤한 크림에 잘게 썰린 양파가 들어있고
그 위로 베이컨 칩을 뿌린...

양은 쏘쏘, 그리고 이미 리조또에서 입이 물린터라
한 조각만 먹고 말았다..
나머지는 생일밥의 주인공인 지인이 처리

흠..
전반적으로 가게도 예쁘고
직원분들의 안내도 좋았고
맛도 꽤 괜찮았지만...
메뉴 선택이 미스였던 것 같다.

다음에 오게 된다면 시그니쳐 조합으로 먹어봐야지
추가로 옆테이블에서 다락에이드를 시킨 걸 봤는데
잔이 되게 독특해서 그것도 다음 방문 위시리스트로 킵.

[자취생활] 부침가루로 김치전을 해 먹어보자_대충 감으로 만들기

윤개발새발 — Mon, 10 Oct 2022 22:01:59 +0900

윤프로의 우당탕탕 데일리 라이프
자취편

추작추작 비가 오는 서울..
날도 쌀쌀하고 갑자기 김치전이 너무 땡겨서
바로 쿠팡 로켓배송으로 장 봤다 ㅎㅎ

비도 오고~ 그래서~ 전 생각이 나서어~
(bgm. 비도 오고 그래서 - 헤이즈)

회사 근처에 마트가 없어지니
쿠팡에 전적으로 의지하게 되는데,
단점은 갯수나 무게 단위가 커진다. (ಥ _ ಥ)

그게... 무슨 말이냐구요..?

부침가루 1kg 짜리 샀음
500g 짜리 분명 있던 것 같은데
로켓은 1kg 뿐...

+) 핫케이크 가루도 샀는데 얘도 1kg.. (ノへ￣、)
언제 다 먹어..

에잇 몰라몰라
일단 지금 김치전이 먹고 싶으니 빨리 만들어보자고~~

재료 준비는

여기에 대파도 추가!

부침가루
잘 익은 김치
양파
대파
옥수수콘(선택)

요렇게 준비해줬다.

자 먼저 반죽물부터 만들어줘볼까~

친절하게 뒤에 적혀있다.

오~ 가루 200g~ 물 340ml~
그래서 물은 종이컵 약 2컵이라 치고..
부침가루는요.. 부침가루는 몇 컵인데요ㅠㅠ

자취생은 저울 같은 거 없어.
사실 종이컵도 없어.
하지만 쌀컵으로 쓰고 있는 계량컵은 있지!

거품기도 없어서 포크 쓰는 찐 자취러

물은 340ml 를 넣었는데
가루는 당췌 얼마나 넣어야 할 지 몰라서
일단 200ml 선에 맞춰 담아서 넣어봤다.

쉐킷쉐킷

가루 덩어리 진 걸 풀어주면 괜찮아지려나..
다른 블로그를 보니 살짝 묽게 하라던데..
이건 너무 묽은데.. 맞나...

다른 재료들을 넣으면 또 달라지겠지.. 싶어서
여기에 넣을 대파와 양파를 아주 얇게 썰어줬다.
그래야 금방 익으니까

김치는 대충 가위로 조사조사 조사버려어잇!
크기는 각자 취향에 맞게 잘라주면 된다.

썰어둔 대파와 양파 넣고~

김치는 국물까지 모두 넣어줬다.
그리고 섞었는데 비쥬얼이 영 좋지 못하다
너무 묽다..!

스위트콘도 넣어줬다.
톡톡 터지는 옥수수 식감?
더 마시써!!

옥수수콘도 넣었는데 여전히 반죽이 내가 아는 그 반죽이 아닌 모습..
착잡한 마음을 달래려 카라멜 마끼아또 캡슐커피 한 잔.. 마셔준다...

음?
이거 한마디로 집밥이지?
나 김치전 성공각?

웨ㅔㅔ에엥 돌아가는 행복회로

달군 후라이팬에 기름 넉넉히 둘러주고~

김치전 한 국자 풍동쓰-

일단 첫 장 구워보고 봐서 가루를 더 넣던지 해야겠다.

오.. 맛있겠는데...
일단 냄새 합격...
근데 너무 질척거린다

한 번 더 뒤집뒤집..
비쥬얼이 나쁘지 않다..!
하지만 가루는 한 국자 정도 더 넣어줬다.

가루를 추가한 뒤 2번째 장.
확실히 느낌이 다르다.

가장자리도 꽤 바삭해지고
내가 아는 김치전의 모습이 나오고 있다!

맛있어져라~ 맛있어져라~

전을 구울땐 꾹꾹 눌러 지져줘야
안까지 익힐 수 있다.

가장자리 살짝 탄 듯한 거 너무 좋고~

그렇게 총 5장 정도 나왔다.
구울 수록 점점 좋아졌는데,
안 쪽이 살짝 질척이는 건 아숩쓰..

자 그럼 먹어보실까~ \(@^0^@)/

쨥쨥쓰

오..!

아..나.. 쫌ㅋ하는 듯ㅎ

김치가 살짝 짠편이라 간을 안 했는데
넘나 나한테 안성맞춤...
솔직히 김치전의 완성은 김치라서
김치가 맛있으면 웬만해선 전도 맛있다!

옥수수콘 넣은 것도 식감 너무 좋고
꽤 성공적인 김치전이라 만족스럽다 ㅎㅎㅎ

다음엔 핫케이크다!

[취미생활] 강남 신논현역 우주가챠 방문기 가챠깡을 해보자

윤개발새발 — Mon, 10 Oct 2022 20:53:27 +0900

윤프로의 우당탕탕 데일리 라이프
취미편

광주에서 놀러 온 지인이 매직바를 가자길래
저녁에 오픈하는 곳이라 그 전에 뭐하고 놀지~
근처 볼 만한 곳, 갈만한 곳을 찾다가 발견한 가챠..

그간의 랜덤 키링깡에서 나아가
본격 랜덤깡의 묘미 그 잡채인.. 가챠샵을 가보기로 했다!

그렇게 방문하게 된 강남 신논현역 근처 우주가챠 ヾ(•ω•`)o

신논현역 5번 출구에서 나와 조금만 걸으면 된다.

이렇게 멀리서 봐도 가챠샵이구나
알 수 있는 판넬이 있으니 금방 찾을 수 있을 듯

자.. 그럼 어디 들어가보자고...

이..이거 맞아?

오 쉽지 않네..ㅋㅋㅎㅎ..

물론 아무도 피해가지 못한다는 그 중2병 시절
애니를 보긴 봤다만은...
일단 내가 아는 애들은 이런 애들이 아니었는데..
와중에 코난 반갑고~

매장 내부로 들어가면 바로 반기는 건
캡슐 가챠들과 랜덤 피규어들이었다.

동물, 캐릭터, 음식, 가구 등 다양한 피규어들이 있었다.

아참 그리고 매장 자체가 작은편이다..!
그 속에 벽면은 뽑기 캡슐로, 그 사이는 이런 매대가 있다보니
통로가 좁다.. 사람 두 명이 겨우 지나가는 정도

혹시나 옷이 두꺼워지거나 손에 짐을 많이 들고 있다면
지나갈 때 물건을 치지 않도록 조심해야겠다.

일단 전반적으로 뭐가 있는지 둘러보기로 했다.
거 편의점에서 포켓몬, 짱구 키링만 사다 까봤지
캡슐 뽑기는 마트나 찜질방에서 엄마한테 조르고 졸라,
한 번 씩 해보는 그런거 아니냐구~

오.. 우마무스메..
~~ㅋrㅋㅏO 게임즈.. 요즘 말 많던.. 크흠크흠...~~

쿠지..?

한쪽 벽면에는 쿠지라고 하나
복권 뽑기가 있다.
흔히 문방구에서 파는 100원짜리 뽑기 같지만,
한 판에 만 얼마 하는 녀석이었다.. ⊙.☉

쿠지 상품들

그 아래에는 뽑기 당첨 상품들인 듯

여기는 상품을 까고 잠깐 쉴 수 있는 공간에 있던 캡슐 뽑기.
약간 소품? 쪽의 아이템들이었다.
뭐 아주 소소한 도구나 인형 악세사리 같은 것들

캡슐뽑기는 5라인 정도 있었던 것 같다.

대충 돌아보면서 하고 싶은 캡슐 뽑기들을 찾아뒀고
카운터쪽에 있는 코인 교환기에서 코인을 바꿔준다.

1 코인 = 1,000원

나는 12,000원으로 12코인을 교환했다.

일단 입구쪽에 있는 햄스터 뽑기부터!

저 발라당 누워있는게 너무 귀엽고..
4천원이면 해 볼만 하지 않나~ 싶어서 코인 넣고 돌리긔~

코인에는 홈이 파져있는데 그 방향대로 넣어야한다.

그래서 나온 내 햄서터는!

귀.여.워.!

약간 흰색 회색의 햄스터 피규어가 나왔다

퀄이 꽤 괜찮자너?!
약간 부들부들한 스타일이려나?

자 그럼 이 다음은 톰과 제리.. 너로 정했다!

얘도 4천원인데 퀄리티 괜찮아 보인다.

제리든 톰이든 뭐가 나와도 다 귀엽겠지만,
개인적인 욕심은~ 치즈 안에 빼꼼 나온 제리가 탐난다 ( ͡° ͜ʖ ͡°)

그래서.. 결과는요?!

두둥탁

코코낸내 애기 톰!

ㅎㅎ 바라던 건 아니지만
이것도 너무 귀여워서 만족!
둥근 케이블 선을 끼울 수가 있나보다.

그리고 다음은 산리오 친구들로 향했다

포챠코, 마이멜로디, 쿠로미, 키티, 인간친구들이 있었는데
소올직히 6개 캐릭터 중에서 동물친구들이 4가지인데
인간 친구들이 나오겠어?

우려가 현실이 된 모습

나옴^^

인간친구는 필요 업써..

포챠코.. 갖고 싶었는데...
으응.. 그래두.. 어린왕자 같구.. 그ㄹㅐ..응..
(실망을 금치 못하고)

이걸 본 지인 : 그럼 한 번 더 뽑지 그러세요
: 굳이 그러고 싶진 않아...
: 원하는 거 나올 때까지 뽑는게 가챠의 매력 아닌가요
: 굳이.. 그 정도의 매력은... (절레절레)

막 너무 마음에 들고 귀여워서 손에 얻어버려야겠을 만큼의
매력을 가진 애착 캐릭터들은 아니었기때문에~
그냥 한 번의 유흥으로 넘겼다 ^^..

그렇게 나가려던 참에
입구 초입에 있던 햄스터 랜덤박스가 눈길을 끌었는데,

햄스터를 키우는 조카들이 생각났다.
마침 하얀 햄스터들이라 아까 뽑은 애랑..
하나 더 사야겠는데..

똑같은 햄스터 캡슐 뽑기는 재미없으니,
또 다른 햄스터 랜덤박스를 구매했다.

+ 그러면서 그 옆에 스누피도 산 건 안 비밀

이건 집에 와서 깠지

햄스터 먼저~~

오, 이건 또 다른 스타일의 피규어? 장난감??
박스에 차곡차곡 쌓는 걸로 나왔던 것 처럼
둥글 넙적한 스타일에 플라스틱으로 되어 가벼웠다.

아마 3번, 레몬색의 등무늬를 가진 애인듯

빵댕이 ㄱㅇㅇ!
앙증맞은 꼬리와 토실한 궁둥쓰가 넘모 귀엽당

또 다른 친구 위로 얹기 좋게 움푹 파여있었고
삑삑이 장난감이었다..!!

맘에 들어..
레몬 색인 게 아쉽지만..
조카들이 좋아해줬으면 좋겠다

이어서 스누피도 까봤다

난 이때까지도 이게 에그몽 같은 건 지 몰랐다
ㅋㅋㅋㅋㅋㅋㅋㅋㅋ

고등학교 때 제 2외국어로 일본어를 선택했지만은..
히라가나는 읽어도 가타카나는 못 읽는다고요
사실 저 위에 쪼꾸만한 초코에그 그림도 뒤늦게 봄 ㅎㅎ..

요 초코 알을 깨주면

플라스틱 캡슐이 나온다
어릴 적 사먹었던 에그몽이 생각나는구만...
다덜.. 에그몽 RG..?

이렇게 생긴 과자였는데..

그러고보니 이때부터였나요..
저의 랜덤깡의 시작이... ㅋㅋㅋㅋㅋ

그리고 그 안에서 나온 스누피!
이런 에그몽 장난감들의 특징은 직접 조립을 해야한다는 것이다.

내가 나온 건 7번.
교수st 스누피..?

조립은 그냥 꽂기만 하면 되는거라 간단쓰~
약간 채색 미스난 것들이 거슬리지만
애초에 크기부터가 작아서 흐린눈으로 보면 된다 ㅎㅎ..

뒷태 꼬리까지 구요옹!

빨간 나비넥타이까지 한 박사 스누피

약간.. 그 너낌..
이게 ㅁㅁ하게 되는 건 당연한 건데 왜 학생들은 이해하지 못하죠?
그렇다면 이 부분은 각자 공부하여 레포트 제출 과제 내겠습니다.

이렇게 첫 가챠샵을 다녀온 나의 후기는..!

랜덤깡은 뭐가 나올지 두근두근한 그 기대감이 재미있었다.
물론 원하는 게 나오면 더 좋지만 그렇지 않아도 제법 재밌는 랜덤깡!

가챠샵은 첫 방문이라 색다른 경험이었고
매장이 작았어서 그런가.. 네임드 캐릭터 가챠가 얼마 없는게 아쉬웠다.
다음에 또 가게 된다면 좀 더 큰 곳을 가봐야지..
사실 가챠샵보다는 소품샵이 아기자기한 게 많아서 더 내 취향일 듯

+ 여담)
그래서 가기로 한 매직바는 어떻게 됐냐면..

오픈 1시간만에 만석 돼서 못 감..^^..
혹시 골든레이블바 주말에 가시려거든
오픈하자마자 가세요..ㅠㅠㅠㅠㅠ

[맛집추천] 서울 고속터미널 맛집 소녀방앗간 참명란비빔밥

윤개발새발 — Sun, 9 Oct 2022 17:44:23 +0900

윤프로의 오늘의 맛집 추천

또 광주에서 놀러온 지인이 있어 마중 겸,
올라오는 시간이 점심이라 고속터미널에서 점심을 먹기로 했다.

지난 번엔 무월식탁을 갔으니
오늘은 경부선 고속터미널 1층에 위치한 소녀방앗간 으로 궈궈~

소녀방앗간은 한식 반상이 나오는 곳이다.

입구에 메뉴판이 있으니 먼저 무엇을 먹을지 고르고 가면 좋다.

나는 미리 고르고 왔지 ☆⌒(*＾-゜)v

아참 이곳은 입구가 2곳인데,
간판이 있는 입구로 들어와야 키오스크가 있다.

주문 방식은,
키오스크에서 주문 후 (1)
뽑아진 영수증 위에 주문번호가 불리면 (2)
키오스크에서 바로 보이는 주방쪽에서 음식을 받아오면 된다. (3)

나는 참명란비빔밥(10,800원) 을 골랐고,
지인은 산나물밥과 우렁된장찌개(11,800원) 을 골랐다.

자리에 앉아 물은 셀프!
키오스크를 지나 안쪽으로 들어오다보면
물병과 컵이 놓인 탁자가 있다.

냉수와 온수 두 가지가 있는데
특이한 게 산나물을 우린 차 라는 것.

냉수 물통과 종이컵을 들고 자리로 와 한 모금 마셔봤다.
은은한 향이 꽤 맛있었다.

음식이 나오는 시간은 매장내 사람수에 따라 다르겠지만
내가 갔을 땐 아무래도 연휴 시작날(10월 8일)이라
지방으로 내려가는 호남선쪽에 사람이 많았지
경부선쪽에는 사람이 없어서 10분~15분정도 내로 나왔다.

참명란 비빔밥

명란, 김가루, 쪽파, 계란 노른자가 든 밥과
버섯, 오이무침, 김부각, 계란찜, 장아찌 등이 반찬으로 나온다.

되게 건강한 한상차림이라
부모님과 버스 타기 전, 후 식사하러 와도 좋을 것 같다.

계란찜은 두부처럼 말캉 부드럽고 시원해서 푸딩같았다.
김부각 위에는 유자청인가? 새콤한 청이 뿌려져 색달랐고,
깍두기 옆의 장아찌는 무말랭이인지 아삭 쫄깃한 스타일!

가운데 계란을 톡 터트려 명란과 나머지를 슥슥 비벼먹으면
짭쪼롬~ 하고 고소한게 참 맛나당^^
~~그래서 참명란? 껄껄~~~

산나물밥과 우렁된장찌개

이건 지인이 시킨 메뉴!
밑반찬은 다 같나보다.

밥에는 산나물이 들어가 있고 된장찌개도 한 뚝배기로 나온다.
구수한 된장 냄새와 건더기도 꽤 많아 보여 맛있었을 듯 하다.
정말 건강한 맛과 건강한 스타일이라며 후기 남겨줬다 ㅋㅋㅋ

식사를 마친 다음에는
따로 퇴식구에 반납하지 않고
그냥 자리에 두고 나가면 된다.

부담없이 든든하게 한 끼 먹기에 좋은 곳이었다.
좌석은 2인, 4인, 6인, 8인 다양하니
가족단위로 와서 먹어도 좋겠고, 혼밥도 가능하다.

[점심추천] 증미역 우림블루나인 큰집 4트

윤개발새발 — Sun, 9 Oct 2022 17:00:36 +0900

윤프로의 오늘의 점심메뉴는 무엇

금요일 점심메뉴는 바로바로 큰집 이다! \(￣︶￣*\)
왜냐하면 떡볶이가 나오는 날이기 때문 ㅎㅎ

떡볶이 말고 또 뭐가 나오냐면

보쌈 앤 탕슉!
큰집은 원래가 고기집이라 그런지
고기 반찬은 실패하지 않는 편이다.

오잉 그런데 들어가던 중에 발견한...

와중에 저녘 'ㅋ' 받침..거슬ㄹ..크흠크흠...

가격 인상..

그치.. 밥스가 올랐는데...
지하 1층 한뷔들이 동결하지 않을 수가 있겠어..

후일담으로 밥을 다 먹고 나가면서 보니,
지난 번의 밥스에 이어 큰집, 태양, 더블유까지 모두 7,000원 으로 인상되었다.

쓰린 마음 안고 터덜터덜 안으로 입자앙-^^

국이_없어서_그런가_쬐꿈_볼품없는_내_식판.jpg

이상..허다...
분명 반찬도 고루 펐다고 생각했는데
왜 막상 식판 사진만 찍으면 세상 볼품없지...ㅋㅋㅋㅋㅋ

감자조림은 포슬포슬보단 쫀득쫀득 서타일 유노?
개인적으로 약간 쫘압쫘압 목막히는 감자조림을 좋아한다.

탕수육도 딱딱하지 않고 적당히 촉촉바삭하고,
보쌈은 지방과 고기층이 적당하면서 잘 삶아졌다.
얇게 썰려서 한 입에 넣어 씹었을 때 딱 좋은 양과 시간이었다!

그리고 지난 어딘가의 한뷔 포스팅에서 말했던
"큰집은 고추장 떡볶이가 맛있다"
의 주인공, 떡볶이는 딱 학교 앞에서 팔던 그 떡볶이 스타일이다

밀떡의 쫀득부들한 식감,
굵직한 고춧가루와 양파들에 매콤달콤한 맛이다.
비록 전날 간장 떡볶이를 먹었지만 이건 또다른 맛의 떡볶이니까 (*￣3￣)╭

반찬들 간은 전반적으로 알맞았고
맛도 만족스러웠던 점심!
더군다나 금요일이라 기분 더 좋다ㅎㅎ