SMU개발자

Next.js에서 FCM 웹 푸시 구현하기

이안_ian — Thu, 27 Nov 2025 10:05:08 +0900

웹 어플리케이션에서 사용자에게 푸시 알림을 보내는 기능을 구현하는 방법을 정리해보겠습니다.

개요

Firebase Cloud Messaging(FCM)은 웹, IOS, Android 앱에서 푸시 알림을 보낼 수 있을 크로스 플랫폼 메시징 솔루션 입니다.

Firebase 프로젝트 설정

Firebase Console 에 접속
새 프로젝트 생성 또는 기존 프로젝트 선택
앱 웹 추가 (</> 아이콘 클릭)
SDK 설정 정보 및 VAPID KEY 발급

저는 간단하게 memos 라는 프로젝트에 push라는 이름으로 </> 라는 플랫폼으로 생성했습니다.

좌측상단에 톱니바퀴 > 프로젝트 설정

그러면 가이드대로 npm으로 firebase 설치해주고 firebaseConfig는 저장해줍니다.

그리고 위로 올려서 "클라우드 메시징" 탭에서 VAPID KEY를 발급해줍시다.

프론트엔드 구성

Firebase 앱 초기화
Firebase Messaging 모듈 구현
Hook 만들기
Service Worker 작성
테스트 페이지 구성

Firebase 앱 초기화

// src/lib/firebase.ts
import { initializeApp } from 'firebase/app'

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APPID,
}

export const firebaseApp = initializeApp(firebaseConfig)

Firebase Messaging 모듈 구현

// src/lib/firebase-messaging.ts
'use client'

import { getMessaging, getToken, onMessage, type Messaging } from 'firebase/messaging'
import { firebaseApp } from './firebase'

let messaging: Messaging | null = null
let swRegistrationPromise: Promise<ServiceWorkerRegistration | null> | null = null

// Firebase Messaging 초기화
export const initMessaging = (): Messaging | null => {
  if (typeof window === 'undefined') {
    return null
  }

  if (messaging) {
    return messaging
  }

  try {
    messaging = getMessaging(firebaseApp)
    return messaging
  } catch (error) {
    console.error('Firebase Messaging 초기화 실패:', error)
    return null
  }
}

// Service Worker 등록 (페이지 로드 완료 후)
const waitForWindowLoad = async () => {
  if (typeof window === 'undefined') return
  if (document.readyState === 'complete') return
  
  await new Promise<void>((resolve) => {
    window.addEventListener('load', () => resolve(), { once: true })
  })
}

export const registerServiceWorker = async (): Promise<ServiceWorkerRegistration | null> => {
  if (typeof window === 'undefined' || !('serviceWorker' in navigator)) {
    return null
  }

  if (!swRegistrationPromise) {
    swRegistrationPromise = (async () => {
      await waitForWindowLoad()
      try {
        const registration = await navigator.serviceWorker.register('/firebase-messaging-sw.js')
        return registration
      } catch (error) {
        console.error('Service Worker 등록 실패:', error)
        const existing = await navigator.serviceWorker.getRegistration('/firebase-messaging-sw.js')
        return existing ?? null
      }
    })()
  }

  return swRegistrationPromise
}

// 알림 권한 요청
export const requestNotificationPermission = async (): Promise<NotificationPermission> => {
  if (typeof window === 'undefined' || !('Notification' in window)) {
    return 'denied'
  }

  if (Notification.permission === 'granted') {
    return 'granted'
  }

  if (Notification.permission === 'denied') {
    return 'denied'
  }

  // 사용자 제스처(버튼 클릭 등) 안에서 호출되어야 함
  const permission = await Notification.requestPermission()
  return permission
}

// FCM 토큰 발급
export const requestForToken = async (): Promise<string | null> => {
  if (typeof window === 'undefined') {
    return null
  }

  const vapidKey = process.env.NEXT_PUBLIC_FIREBASE_VAPID_KEY ?? ''
  if (!vapidKey) {
    console.error('VAPID 키가 설정되지 않았습니다.')
    return null
  }

  // 알림 권한 확인
  const permission = await requestNotificationPermission()
  if (permission !== 'granted') {
    console.error('알림 권한이 허용되지 않았습니다.')
    return null
  }

  const messagingInstance = initMessaging()
  if (!messagingInstance) {
    return null
  }

  const registration = await registerServiceWorker()
  if (!registration) {
    console.error('Service Worker를 등록할 수 없습니다.')
    return null
  }

  try {
    const token = await getToken(messagingInstance, {
      vapidKey,
      serviceWorkerRegistration: registration,
    })

    if (token) {
      console.log('FCM 토큰 발급 성공:', token)
      return token
    }

    return null
  } catch (error) {
    console.error('FCM 토큰 발급 실패:', error)
    return null
  }
}

// 포그라운드 메시지 수신 리스너
export const onMessageListener = () =>
  new Promise((resolve) => {
    const messagingInstance = initMessaging()
    if (!messagingInstance) {
      resolve(null)
      return
    }

    onMessage(messagingInstance, (payload) => {
      console.log('포그라운드 메시지 수신:', payload)
      resolve(payload)
    })
  })

React Hook 구현

// src/hooks/common/use-web-push.ts
'use client'

import { useCallback, useEffect, useState } from 'react'
import { onMessageListener, requestForToken, requestNotificationPermission } from '@/lib/firebase-messaging'

export const useWebPush = () => {
  const [token, setToken] = useState<string | null>(null)
  const [permission, setPermission] = useState<NotificationPermission>('default')
  const [loading, setLoading] = useState(false)

  const requestToken = useCallback(async () => {
    setLoading(true)

    const permissionResult = await requestNotificationPermission()
    setPermission(permissionResult)

    if (permissionResult !== 'granted') {
      console.warn('알림 권한이 허용되지 않았습니다.')
      setLoading(false)
      return null
    }

    const issuedToken = await requestForToken()
    setToken(issuedToken)
    setLoading(false)
    return issuedToken
  }, [])

  useEffect(() => {
    if (token) {
      onMessageListener().then((payload) => {
        if (payload) {
          console.log('포그라운드 메시지 수신:', payload)
        }
      })
    }
  }, [token])

  return {
    token,
    permission,
    loading,
    refreshToken: requestToken,
  }
}

Service Worker 설정

Service Worker 파일은 반드시 'public' 폴더에 위치해야 하며

루트 경로(/firebase-mnessaging-sw.js)에서 접근이 가능해야 합니다.

/* eslint-disable no-undef */
// Firebase Cloud Messaging Service Worker
importScripts('https://www.gstatic.com/firebasejs/10.14.0/firebase-app-compat.js')
importScripts('https://www.gstatic.com/firebasejs/10.14.0/firebase-messaging-compat.js')

const firebaseConfig = {
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_AUTH_DOMAIN',
  projectId: 'YOUR_PROJECT_ID',
  storageBucket: 'YOUR_STORAGE_BUCKET',
  messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
  appId: 'YOUR_APP_ID',
}

const firebaseApp = firebase.initializeApp(firebaseConfig)
const messaging = firebase.messaging()

// 백그라운드 메시지 수신 처리
messaging.onBackgroundMessage(function (payload) {
  const notification = payload.notification

  console.log('[firebase-messaging-sw.js] Received background message ', notification)

  const notificationTitle = notification?.title || payload.data?.title || '알림'
  const notificationOptions = {
    body: notification?.body || payload.data?.body || payload.data?.message || '',
    icon: '/icons/favicon-96x96.png',
    badge: '/icons/favicon-32x32.png',
    data: {
      url: payload.data?.link || payload.fcmOptions?.link || '/',
      ...payload.data,
    },
  }

  self.registration.showNotification(notificationTitle, notificationOptions)
})

// 알림 클릭 이벤트 처리
self.addEventListener('notificationclick', (event) => {
  event.notification.close()
  const urlToOpen = event.notification.data?.url || '/'

  event.waitUntil(
    clients
      .matchAll({ type: 'window', includeUncontrolled: true })
      .then((clientList) => {
        for (const client of clientList) {
          if (client.url === urlToOpen && 'focus' in client) {
            return client.focus()
          }
        }
        if (clients.openWindow) {
          return clients.openWindow(urlToOpen)
        }
        return null
      })
  )
})

서비스 워커는 FCM 웹 푸시에서 필수 요구사항이며, 백그라운드로 메시지 수신을 하여 브라우저가 
꺼져있어도 독립적으로 실행되어 메시지를 수신하고 알림을 표시하기 위해서 입니다.

포그라운드: 페이지가 열려있을 때 onMessage() 리스너로 메시지 처리
백그라운드: 페이지가 닫혀있을 때 onBackgroundMessage() 리스너로 메시지 처리

테스트 페이지 작성

'use client'

import { useCallback, useEffect, useMemo, useState } from 'react'

import Box from '@mui/material/Box'
import Button from '@mui/material/Button'
import Paper from '@mui/material/Paper'
import Stack from '@mui/material/Stack'
import Typography from '@mui/material/Typography'
import Alert from '@mui/material/Alert'
import TextField from '@mui/material/TextField'

import { useWebPush } from '@/hooks/common/use-web-push'

const truncateToken = (token?: string | null) => {
  if (!token) {
    return '토큰이 아직 발급되지 않았습니다.'
  }
  return `${token.slice(0, 30)}...${token.slice(-6)}`
}

const copyToken = async (token: string | null) => {
  if (!token) {
    return
  }
  try {
    await navigator.clipboard.writeText(token)
    console.log('  토큰이 클립보드에 복사되었습니다.')
  } catch (error) {
    console.error('토큰 복사에 실패했습니다:', error)
  }
}

export default function WebPushTestPage() {
  const { token, permission, loading, refreshToken } = useWebPush()
  const [pushTitle, setPushTitle] = useState('웹 푸시 테스트')
  const [pushBody, setPushBody] = useState('이것은 테스트 메시지입니다.')
  const [pushLink, setPushLink] = useState('')
  const [targetToken, setTargetToken] = useState('')
  const [sending, setSending] = useState(false)
  const [sendResult, setSendResult] = useState<{ success: boolean; message: string } | null>(null)

  const [endpoint, setEndpoint] = useState(() => {
    const base = process.env.NEXT_PUBLIC_API_URL?.replace(/\/$/, '')
    return base ? `${base}/interface/fcm` : '/interface/fcm'
  })

  useEffect(() => {
    console.log('현재 알림 권한:', permission)
  }, [permission])

  useEffect(() => {
    if (token) {
      console.log('현재 발급된 토큰:', token)
      setTargetToken(token)
    }
  }, [token])

  useEffect(() => {
    if (typeof window !== 'undefined') {
      setPushLink(window.location.origin)
    }
  }, [])

  const sendTestPush = useCallback(async () => {
    if (!targetToken) {
      alert('전송할 대상 토큰이 없습니다.')
      return
    }

    setSending(true)
    setSendResult(null)

    try {
      const response = await fetch(endpoint, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          title: pushTitle,
          body: pushBody,
          link: pushLink,
          tokens: [{ token: targetToken }],
        }),
      })

      const data = await response.json().catch(() => null)

      if (!response.ok) {
        throw new Error(data?.message || 'FCM 전송 요청이 실패했습니다.')
      }

      const successCount = data?.payload?.successCount ?? 0
      const failureCount = data?.payload?.failureCount ?? 0
      setSendResult({
        success: true,
        message: `전송 완료 - 성공 ${successCount}건 / 실패 ${failureCount}건`,
      })
    } catch (error) {
      console.error('FCM 전송 중 오류:', error)
      setSendResult({
        success: false,
        message: error instanceof Error ? error.message : '알 수 없는 오류가 발생했습니다.',
      })
    } finally {
      setSending(false)
    }
  }, [targetToken, pushTitle, pushBody, pushLink, endpoint])

  return (
    <Box sx={{ p: 4, maxWidth: 960, mx: 'auto', display: 'flex', flexDirection: 'column', gap: 3 }}>
      <Typography variant="h4" fontWeight={700}>
        웹 푸시 테스트
      </Typography>

      <Paper sx={{ p: 3 }} elevation={3}>
        <Stack spacing={2}>
          <Typography variant="subtitle1">1. 권한 상태</Typography>
          <Typography variant="body2">알림 권한: {permission}</Typography>
          <Typography variant="body2">로딩 상태: {loading ? '토큰 발급 중...' : '대기 중'}</Typography>
        </Stack>
      </Paper>

      <Paper sx={{ p: 3 }} elevation={3}>
        <Stack spacing={2}>
          <Typography variant="subtitle1">2. 토큰 정보</Typography>
          <Typography variant="body2">{truncateToken(token)}</Typography>
          <Stack direction="row" spacing={2}>
            <Button variant="contained" onClick={refreshToken} disabled={loading}>
              {loading ? '토큰 요청 중...' : '토큰 다시 요청'}
            </Button>
            <Button variant="outlined" onClick={() => copyToken(token)} disabled={!token}>
              토큰 복사
            </Button>
          </Stack>
        </Stack>
      </Paper>

      <Paper sx={{ p: 3 }} elevation={3}>
        <Stack spacing={2}>
          <Typography variant="subtitle1">3. 실행 로그</Typography>
          <Typography variant="body2" color="text.secondary">
            이 페이지는 접근 즉시 알림 권한을 요청하고 FCM 토큰을 발급합니다. 결과는 브라우저 콘솔에서
            확인할 수 있습니다.
          </Typography>
        </Stack>
      </Paper>

      <Paper sx={{ p: 3 }} elevation={3}>
        <Stack spacing={2}>
          <Typography variant="subtitle1">4. FCM 전송 테스트</Typography>
          <TextField
            label="제목"
            value={pushTitle}
            onChange={(event) => setPushTitle(event.target.value)}
            fullWidth
          />
          <TextField
            label="본문"
            value={pushBody}
            multiline
            minRows={2}
            onChange={(event) => setPushBody(event.target.value)}
            fullWidth
          />
          <TextField
            label="링크"
            value={pushLink}
            onChange={(event) => setPushLink(event.target.value)}
            fullWidth
          />
          <TextField
            label="대상 토큰"
            value={targetToken}
            onChange={(event) => setTargetToken(event.target.value)}
            multiline
            minRows={3}
            fullWidth
          />
          {sendResult && (
            <Alert severity={sendResult.success ? 'success' : 'error'}>{sendResult.message}</Alert>
          )}
          <Stack direction="row" spacing={2}>
            <TextField
              label="호출 엔드포인트"
              value={endpoint}
              onChange={(event) => setEndpoint(event.target.value)}
              fullWidth
            />
            <Button variant="contained" onClick={sendTestPush} disabled={sending}>
              {sending ? '전송 중...' : 'FCM 메시지 전송'}
            </Button>
          </Stack>
        </Stack>
      </Paper>
    </Box>
  )
}

결과

테스트 페이지로 접근 시 권한 관련한 얼럿이 뜨게된다.

토큰정보는 device token으로 타켓팅을 하기위한 key 입니다.

다시 콘솔로 돌아가서 해당 토큰으로 메시지를 보내봅시다.

첫 번째 캠페인 만들기를 클릭해서

아까 저장한 토큰을 가지고 테스트 메시지 전송 gogo

하지만 이슈가 하나 있는데 알림을 차단/허용을 한 번 선택하면 같은 창을 다시 띄우기가 어렵다.

웹이나 안드에서는 권한 재설정이라는 기능으로 on/off가 가능한데 "유저가 그렇게 사용할까?" 라는 관점에서는 미지수다.

error fix

Service Worker 파일이 HTML로 반환되는 경우

Next.js에서 rewrites 설정이 모든 경로를 가로채서 Service Worker 파일도 HTML로 반환되는 문제가 발생할 수 있음

### 해결 방법

`next.config.mjs`에서 다음과 같이 설정합니다:

const nextConfig = {
  // ... 기타 설정

  async headers() {
    return [
      {
        source: '/firebase-messaging-sw.js',
        headers: [
          {
            key: 'Content-Type',
            value: 'application/javascript; charset=utf-8',
          },
          {
            key: 'Service-Worker-Allowed',
            value: '/',
          },
        ],
      },
    ]
  },

  async rewrites() {
    return [
      // ... 기타 rewrites
      {
        source: '/:module*/:path*',
        destination: `/page/:module*/:path*`,
        has: [
          {
            type: 'header',
            key: 'accept',
            value: 'text/html',
          },
        ],
      },
    ]
  },
}

Spring Batch 구축 (Spring Boot 3.x)

이안_ian — Tue, 18 Mar 2025 21:25:07 +0900

의존성 추가

dependencies {
    implementation("org.springframework.boot:spring-boot-starter-batch")
    implementation("org.springframework.boot:spring-boot-starter-data-jpa") // JPA 사용 시
    runtimeOnly("org.postgresql:postgresql") // 데이터베이스에 따라 변경
}

application.yml

spring:
  // DB 정보는 알아서 적당히 바꾸시길
  datasource:
    url: jdbc:postgresql://localhost:5432/mydb
    username: myuser
    password: mypassword
    driver-class-name: org.postgresql.Driver
  batch:
    jdbc:
      initialize-schema: always  # 처음 실행할 때만 always (테이블 자동 생성, 그 이후엔 never 권장)

BatchJobConfig

import lombok.RequiredArgsConstructor;
import org.springframework.batch.core.Job;
import org.springframework.batch.core.Step;
import org.springframework.batch.core.job.builder.JobBuilder;
import org.springframework.batch.core.launch.support.RunIdIncrementer;
import org.springframework.batch.core.repository.JobRepository;
import org.springframework.batch.core.step.builder.StepBuilder;
import org.springframework.batch.core.step.tasklet.Tasklet;
import org.springframework.batch.repeat.RepeatStatus;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.transaction.PlatformTransactionManager;

@Configuration
@RequiredArgsConstructor
public class BatchJobConfig {

    private final String JOB_NAME = "sampleJob";
    private final String STEP_NAME = "sampleStep";

    @Bean
    public Job sampleJob(JobRepository jobRepository, PlatformTransactionManager transactionManager) {
        return new JobBuilder(JOB_NAME, jobRepository)
                .incrementer(new RunIdIncrementer()) // 실행할 때마다 새로운 Job 인스턴스 생성
                .start(sampleStep(jobRepository, transactionManager))
                .build();
    }

    @Bean
    public Step sampleStep(JobRepository jobRepository, PlatformTransactionManager transactionManager) {
        return new StepBuilder(STEP_NAME, jobRepository)
                .tasklet(sampleTasklet(), transactionManager)
                .build();
    }

    @Bean
    public Tasklet sampleTasklet() {
        return (contribution, chunkContext) -> {
            System.out.println("Spring Batch (without @EnableBatchProcessing) 실행 완료!");
            return RepeatStatus.FINISHED;
        };
    }
}

BatchRunner

import lombok.RequiredArgsConstructor;
import org.springframework.batch.core.Job;
import org.springframework.batch.core.JobParameters;
import org.springframework.batch.core.JobParametersBuilder;
import org.springframework.batch.core.launch.JobLauncher;
import org.springframework.boot.CommandLineRunner;
import org.springframework.stereotype.Component;

@Component
@RequiredArgsConstructor
public class BatchRunner implements CommandLineRunner {

    private final JobLauncher jobLauncher;
    private final Job sampleJob;

    @Override
    public void run(String... args) throws Exception {
        JobParameters jobParameters = new JobParametersBuilder()
                .addLong("time", System.currentTimeMillis()) // 매번 실행되도록 설정
                .toJobParameters();

        jobLauncher.run(sampleJob, jobParameters);
    }
}

요렇게 설정하고 서버 올리면 배치관련 테이블들이 생성되며 sampleJob이 처음 실행됨

그러면 기본적인 구성은 끝!

생성된 테이블 정보

테이블 명	설명
BATCH_JOB_INSTANCE	배치 Job 실행 정보 저장
BATCH_JOB_EXECUTION	Job 실행 이력 저장
BATCH_JOB_EXECUTION_PARAMS	Job 실행 시 전달된 파라미터 저장
BATCH_JOB_EXECUTION_CONTEXT	Job 실행 컨텍스트(추가 정보) 저장
BATCH_STEP_EXECUTION	Step 실행 이력 저장
BATCH_STEP_EXECUTION_CONTEXT	Step 실행 컨텍스트(추가 정보) 저장
BATCH_STEP_EXECUTION_SEQ	Step 실행의 시퀀스 관리 (자동 증가 값)
BATCH_JOB_EXECUTION_SEQ	Job 실행의 시퀀스 관리 (자동 증가 값)
BATCH_JOB_SEQ	Job ID 관리 (자동 증가 값)

스케쥴링으로 변경하기

application.yml

spring:
  batch:
    jdbc:
      initialize-schema: never
    job:
      name: sampleJob # job 이름 설정
      enabled: false # Job 실행을 스케줄러에게 위임하기 위하여 설정

EnableScheduling 추가

import org.springframework.context.annotation.Configuration;
import org.springframework.scheduling.annotation.EnableScheduling;

@Configuration
@EnableScheduling
public class SchedulingConfig {
}

ScheduledBatchRunner

import lombok.RequiredArgsConstructor;
import org.springframework.batch.core.Job;
import org.springframework.batch.core.JobParameters;
import org.springframework.batch.core.JobParametersBuilder;
import org.springframework.batch.core.launch.JobLauncher;
import org.springframework.scheduling.annotation.Scheduled;
import org.springframework.stereotype.Component;

@Component
@RequiredArgsConstructor
public class ScheduledBatchRunner {

    private final JobLauncher jobLauncher;
    private final Job sampleJob;

    @Scheduled(cron = "*/10 * * * * ?") // 10초마다 실행
    public void runSampleJob() throws Exception {
        JobParameters jobParameters = new JobParametersBuilder()
                .addLong("time", System.currentTimeMillis())
                .toJobParameters();

        jobLauncher.run(sampleJob, jobParameters);
    }
}

이렇게 설정 해주고 서버 올리면 콘솔에서 10초마다 실행되는 것을 확인 할 수 있다.

아까 생성된 테이블을 잠깐 써먹어보면 이렇게 확인도 가능하다.

select * from batch_job_execution;

Swagger Spring Boot (3.4.2)

이안_ian — Thu, 27 Feb 2025 20:39:35 +0900

간단하고 담백하게 설정 방법을 작성하려고 합니다.

의존성추가

// Swagger
implementation("org.springdoc:springdoc-openapi-starter-webmvc-ui:2.8.5")

application.yml

springdoc:
  swagger-ui:
    path: /docs		// 경로 커스텀
    disable-swagger-default-url: true
  api-docs:
    path: /api-docs

Swagger Config

import io.swagger.v3.oas.models.OpenAPI;
import io.swagger.v3.oas.models.info.Info;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

@Configuration
public class SwaggerConfig {

    @Bean
    public OpenAPI customOpenAPI() {
        return new OpenAPI()
                .info(new Info()
                        .title("My API Documentation")
                        .version("1.0.0")
                        .description("스프링 부트 3.0 이상에서 설정한 Swagger 문서입니다."));
    }
}

API 설정

import io.swagger.v3.oas.annotations.Operation;
import io.swagger.v3.oas.annotations.tags.Tag;
import java.util.List;

@Tag(name = "User API", description = "회원 API")
@RestController
@RequestMapping("/api/users")
@RequiredArgsConstructor
public class UserApi {

    private final UserService userService;

    /**
     * 회원 전체 조회
     */
    @Operation(
        summary = "회원 전체 조회",
        description = "모든 회원 정보를 조회합니다."
    )
    @GetMapping
    public ResponseEntity<ApiResponse<List<UserResponseDto>>> getAll() {
        return ResponseEntity.ok(userService.findAll());
    }
}

스웨거 접속

http://localhost:8080/docs

위와 같이 접속하면 대략 아래처럼 생성

포트원 V2 결제 연동 (SpringBoot + JavaScript)

이안_ian — Mon, 24 Feb 2025 21:43:49 +0900

https://admin.portone.io/

위 사이트에서 가입 후

결제연동 > 연동정보에서 테스트 채널을 생성해준다.

대충 요렇게 필요한 채널키와 상점 아이디가 생성이 된다.

서버구성

결제 창 띄우기 위한 경로만 설정

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class ViewController {
    @GetMapping("/")
    public String movePayment() {
        return "payment";
    }
}

스프링에 내장된 templates 활용했다.

(/src/main/resources/templates/payment.html)

<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Hello, World!</title>
    <!-- jQuery -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js" ></script>
    <script src="https://cdn.portone.io/v2/browser-sdk.js"></script>
    <script>
        async function requestPay2() {
            const response = await PortOne.requestPayment({
                storeId: "your-storeId",
                channelKey: "your-channelKey",
                paymentId: `payment001`,
                orderName: "테스트 상품입니다.",
                totalAmount: 1000,
                currency: "KRW",
                payMethod: "CARD",
                customer: {
                    fullName: "포트원",
                    phoneNumber: "010-0000-1234",
                    email: "test@portone.io",
                },
            });

            if (response.code !== undefined) {
                // 오류 발생
                return alert(response.message);
            }

            console.log(response);
        }
    </script>
</head>
<body>

<h1>Hello, World!</h1>
<button onclick="requestPay2()">KG이니시스 결제</button>
</body>
</html>

이렇게해서 서버 띄우고 접근하면 결제창이 바로 호출된다.

Rest API로 결제정보 확인하기

api 호출을 위한 키발급을 받자!

그리고 스프링에서 application.properties에 저장하자!

api 호출할 때 쓸 base-url도 같이 셋팅!!

portone.v2.api.base-url=https://api.portone.io
portone.v2.api.secret=

우선 웹통신 해야하니까 webflux 의존성 추가

implementation 'org.springframework.boot:spring-boot-starter-webflux'

PortOneClient 추가

import org.springframework.beans.factory.annotation.Value;
import org.springframework.http.MediaType;
import org.springframework.stereotype.Component;
import org.springframework.web.reactive.function.client.WebClient;

import java.util.HashMap;
import java.util.Map;

@Component
public class PortOneClient {

    private final WebClient webClient;

    @Value("${portone.v2.api.secret}")
    private String apiSecret;

    public PortOneClient(@Value("${portone.v2.api.base-url}") String baseUrl, @Value("${portone.v2.api.secret}") String apiSecret) {
        this.webClient = WebClient.builder()
                .baseUrl(baseUrl)
                .defaultHeader("Authorization", "PortOne " + apiSecret)
                .defaultHeader("Content-Type", MediaType.APPLICATION_JSON_VALUE)
                .build();
    }

    /**
     * 포트원 API 인증 토큰 발급
     */
    public String getAccessToken() {
        Map<String, String> requestBody = new HashMap<>();
        requestBody.put("apiSecret", apiSecret);

        Map<String, Object> response = webClient
                .post()
                .uri("/login/api-secret")
                .bodyValue(requestBody)
                .retrieve()
                .bodyToMono(Map.class)
                .block();

        if (response != null && response.containsKey("accessToken")) {
            String token = (String) response.get("accessToken");
            return token;
        }
        throw new RuntimeException("포트원 API 토큰 발급 실패");
    }

    /**
     * 결제 상세 조회
     */
    public Map<String, Object> getPaymentDetails(String paymentId) {
        return webClient
                .get()
                .uri("/payments/" + paymentId)
                .retrieve()
                .bodyToMono(Map.class)
                .block();
    }

    /**
     * 결제 취소
     */
    public Map<String, Object> cancelPayment(String paymentId, int cancelAmount, String reason) {
        Map<String, Object> requestBody = new HashMap<>();
        requestBody.put("amount", cancelAmount);
        requestBody.put("reason", reason);

        return webClient
                .post()
                .uri("/payments/" + paymentId + "/cancel")
                .bodyValue(requestBody)
                .retrieve()
                .bodyToMono(Map.class)
                .block();
    }
}

PaymentApi 구성

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;

import java.util.Map;

@RequestMapping("/api/payment")
public class PaymentApi {

    private final PortOneClient portOneClient;
    private final ObjectMapper mapper;

    public PaymentApi(PortOneClient portOneClient) {
        this.portOneClient = portOneClient;
        this.mapper = new ObjectMapper();
    }

    @PostMapping("/complate")
    public String getPaymentDetails(@RequestBody Map<String, String> request) {
        String paymentId = request.get("paymentId");

        if (paymentId == null || paymentId.trim().isEmpty()) {
            return "paymentId 값이 필요합니다.";
        }

        // PortOne 클라이언트를 호출하여 결제 상세 정보를 조회합니다.
        Map<String, Object> paymentDetails = portOneClient.getPaymentDetails(paymentId);

        try {
            // JSON 형식으로 보기 좋게 변환하여 응답합니다.
            return mapper.writerWithDefaultPrettyPrinter().writeValueAsString(paymentDetails);
        } catch (JsonProcessingException e) {
            e.printStackTrace();
            return "JSON 변환 중 오류 발생";
        }
    }
}

결제창 호출 할 때 쓰인 paymentId를 넣고 호출해보면 정보를 잘 가져옵니다.

그 밖에 필요한 API 문서는 아래 링크를 참고!

https://developers.portone.io/api/rest-v2/overview?v=v2

스프링부트 3.X Querydsl 설정하기 (Gradle Kotlin)

이안_ian — Fri, 21 Feb 2025 16:02:07 +0900

build.gradle.kts

plugins {
	java
	id("org.springframework.boot") version "3.4.2"
	id("io.spring.dependency-management") version "1.1.7"
}

java {
	toolchain {
		languageVersion = JavaLanguageVersion.of(21)
	}
}

repositories {
	mavenCentral()
}

dependencies {

	// Querydsl 추가
	implementation("com.querydsl:querydsl-jpa:5.0.0:jakarta")
	annotationProcessor("com.querydsl:querydsl-apt:5.0.0:jakarta")
	annotationProcessor("jakarta.annotation:jakarta.annotation-api")
	annotationProcessor("jakarta.persistence:jakarta.persistence-api")
}

// Querydsl -> QClass 파일 생성 위치를 지정
val generated = "src/main/generated"
tasks.withType<JavaCompile> {
	options.generatedSourceOutputDirectory.set(file(generated))
}

// Querydsl -> 생성된 Q 클래스 파일들을 main 소스셋의 한 부분으로 포함시켜 다같이 컴파일 되로록 설정
sourceSets["main"].java.srcDir(generated)

// Querydsl -> clean 작업 시 지정한 generated 디렉토리를 삭제하여 Q 클래스 싹 정리 (재빌드필요)
tasks.named<Delete>("clean") {
	delete(file(generated))
}

그래들 파일 전체를 올린것은 아니고 민감한 정보를 일부 제거했다.

설정만 보고 싶으면 Querydsl 부분만 참고하면 된다.

QueryDslConfig

package com.example.global.config;

import com.querydsl.jpa.impl.JPAQueryFactory;
import jakarta.persistence.EntityManager;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

@Configuration
public class QueryDslConfig {

    @PersistenceContext
    private EntityManager entityManager;

    @Bean
    public JPAQueryFactory jpaQueryFactory() {
        return new JPAQueryFactory(entityManager);
    }
}

적당한 위치에 config 파일을 생성해주자

QClass 생성

프로젝트 빌드를 하게 되면 아래와 같이 우리가 지정한 경로에 QClass가 생긴다.

저기 열어보면 Entity 기반으로 QClass가 생성된다.

그러므로 사전에 Entity을 만들어야한다.

나같은 경우에는 DB 연결해둔게 있어서 그걸 기반으로 User만 만들었다.

UserRepository 테스트

import com.querydsl.jpa.impl.JPAQueryFactory;
import jakarta.persistence.EntityManager;
import jakarta.persistence.PersistenceContext;
import org.springframework.stereotype.Repository;

import java.util.List;

@Repository
public class UserRepository {
	
    private final JPAQueryFactory queryFactory;
    private static final QUser user = QUser.user;

    public UserRepository(JPAQueryFactory queryFactory) {
        this.queryFactory = queryFactory;
    }

    public List<User> findByUser(String username) {
        return queryFactory
                .selectFrom(user)
                .where(user.username.eq(username))
                .fetch();
    }
}

이렇게 설정하고 api, service 구현해서 포스트맨으로 호출해보면 데이터를 잘 리턴하게된다.

끗

Nuxt3 WebSocket example #2

이안_ian — Mon, 29 Jul 2024 13:42:47 +0900

안녕하세요!!

저번에 nuxt로 채팅을 간단하게 만들어봤는데요

사실 통신은 되지만 채팅이라고 하기에 너무 빈약한것 같아서..

조금씩 생각나는대로 develop을 해보려고 합니다.

오늘은 간략하게 로그인도 넣어보고 화면도 수정되면 좋을것 같아서

vuetify로 화면도 적용시킬까 합니다.

Pinia 설치

pinia를 설치하는 이유는 로그인하고 상태유지를 위해서입니다.

npm install @pinia/nuxt

authStore

최상위에서 디렉토리와 파일을 stores/authStore.ts를 생성해줍시다.

import { defineStore } from 'pinia'
import { useFetch } from "@vueuse/core";

export const useAuthStore = defineStore('authStore', () => {
    interface User {
        id: string,
        name: string,
    }

    const userDetail = ref<User | null>()

    function clear() {
        userDetail.value = null;
    }

    async function login(id: string, password: string) {
        const {data, error} = await useFetch("/api/user/login", {
            method: "POST",
            headers: {"Content-Type": "application/json"},
            body: JSON.stringify({id, password})
        })

        if (typeof data.value === "string") {
            const result = JSON.parse(data.value)

            if (result.code === "S" && result.data != null) {

                userDetail.value = {
                    id: result.data.id,
                    name: result.data.name
                }
            } else {
                clear();
            }
        }
    }

    return {userDetail, clear, login}
})

api 설정과 관련해서는 이전 포스팅을 참고해주시고

model/user.ts에는 제가 login쪽을 올렸는데 controller랑 [...].ts 쪽엔 빠져있는데 작업된 부분 참고해서

그 부분만 추가해주시면 될것 같습니다.

테스트

요런식으로 데이터를 잘 가져오는것 같습니다.

이제 화면쪽 구성하러 가볼까요?

Vuetify 설치 & 셋팅

npm i -D vuetify vite-plugin-vuetify
npm i @mdi/font

//nuxt.config.ts

import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
export default defineNuxtConfig({
  //...
  build: {
    transpile: ['vuetify'],
  },
  modules: [
    (_options, nuxt) => {
      nuxt.hooks.hook('vite:extendConfig', (config) => {
        // @ts-expect-error
        config.plugins.push(vuetify({ autoImport: true }))
      })
    },
    //...
  ],
  vite: {
    vue: {
      template: {
        transformAssetUrls,
      },
    },
  },
})

// /plugins/vuetify.ts 디렉토리 및 파일 생성

// import this after install `@mdi/font` package
import '@mdi/font/css/materialdesignicons.css'

import 'vuetify/styles'
import { createVuetify } from 'vuetify'

export default defineNuxtPlugin((app) => {
  const vuetify = createVuetify({
    // ... your configuration
  })
  app.vueApp.use(vuetify)
})

// app.vue 수정

<template>
  <div>
    <v-app>
      <NuxtPage />
    </v-app>
  </div>
</template>

Login.vue 추가

vuetify에서 제공하는 적당한 로그인UI를 가져와서 아까 만들어둔 authStore을 적용시켜보겠습니다.

<template>
  <div>
    <v-sheet class="bg-deep-purple pa-12" rounded>
      <v-card class="mx-auto px-6 py-8" max-width="344">
        <v-form
            @submit.prevent="login"
        >
          <v-text-field
              v-model="id"
              class="mb-2"
              label="id"
              clearable
          ></v-text-field>

          <v-text-field
              v-model="password"
              label="Password"
              type="password"
              placeholder="Enter your password"
              clearable
          ></v-text-field>

          <br>

          <v-btn
              color="success"
              size="large"
              type="submit"
              variant="elevated"
              block
          >
            Sign In
          </v-btn>
        </v-form>
      </v-card>
    </v-sheet>

  </div>
</template>

<script setup lang="ts">
import { useAuthStore } from "@/stores/authStore";

const authStore = useAuthStore()
const id = ref<string>('');
const password = ref<string>('');
const idInput = ref<HTMLInputElement | null>(null);

async function login() {
  if (id.value && password.value) {
    await authStore.login(id.value, password.value)

    if (authStore.userDetail) {
      alert("로그인되었습니다. " + authStore.userDetail.name + "님 환영합니다.")
      navigateTo('/')
    } else {
      id.value = ''
      password.value = ''
      alert("사용자 정보가 일치하지 않습니다.")

      // id로 포커스 이동
      idInput.value?.focus();
    }
  }
}

</script>

<style scoped></style>

그럴듯한 로그인 화면이 나왔네요!

그런데 vuetify 추가하고 나니 index 페이지가 살짝 이상해서 여기도 메시지 입력창에 맞게 약간 수정해볼게요

<script setup lang="ts">

import { useWebSocket } from '@vueuse/core'

const localUrl = 'ws://localhost:3000/api/websocket';
const { status, data, send, open, close } = useWebSocket(localUrl)

const message = ref('')
const history = ref<string[]>([])

watch(data, (receiveMsg: string) => {
  history.value.push(`server: ${receiveMsg}`)
})

function sendMessage() {
  if (message.value == null || message.value === '') {
    return false
  }

  history.value.push(`client : ${message.value}`)
  send(message.value);

  clearMessage();

}

function clearMessage() {
  message.value = ''
}

</script>

<template>
  <div>
    <h1>WebSocket - let's go</h1>
    <div>
      <p v-for="entry in history">{{ entry }}</p>
    </div>
      <v-form @submit.prevent="sendMessage">
        <v-container>
          <v-row>
            <v-col cols="12">
              <v-text-field
                  v-model="message"
                  append-icon="mdi-send"
                  clear-icon="mdi-close-circle"
                  label="Message"
                  type="text"
                  variant="filled"
                  clearable
                  @click:append="sendMessage"
                  @click:clear="clearMessage"
              ></v-text-field>
            </v-col>
          </v-row>
        </v-container>
      </v-form>
  </div>
</template>

이제 로그인이 안되면 채팅을 할 수 없게 수정하고 로그인이 되었다면 내 이름이 나오도록 수정해보겠습니다.

// index.vue

<script setup lang="ts">
...

const authStore = useAuthStore()
if (!authStore.userDetail) {
  navigateTo('/Login')
}

function sendMessage() {
  if (message.value == null || message.value === '') {
    return false
  }

  history.value.push(`${authStore.userDetail?.name}: ${message.value}`)
  send(message.value);

  clearMessage();
}

...
</script>

이렇게 내 이름이 나오도록 수정은 했지만... 상대방의 이름이 나오지 않는게 아쉽다!!!!

또한 로그인도 뒤로가기로 갔다가 다시 진입하면 유지가되지만 새로고침을 하면 데이터가 초기화 되는듯하다..

문서가 너무 길어지는듯 하여 이런 이슈들은 추후에 수정해보도록 하겠다.

Nuxt3 WebSocket example (with Nitro)

이안_ian — Sat, 27 Jul 2024 11:28:07 +0900

VueUse 설치

npm i -D @vueuse/nuxt @vueuse/core

nuxt.config.ts 설정

export default defineNuxtConfig({
  modules: ['@vueuse/nuxt'],
  nitro: {
    experimental: {
      websocket: true
    }
  }
})

다양한 기능을 제공하는 vueUse를 설치하고 config 설치까지 해줍시다.

웹소켓과 관련한 설정은 nuxt.config.ts에서 true로만 바꿔주면 되니 아주 간단하네요!

WebSokcet 서버구성

server/api/websocket.ts

const room = 'ROOM'

export default defineWebSocketHandler({
    open(peer) {
        console.log("[ws] open", peer);
        peer.subscribe(room)
        peer.publish(room, 'Another user joined the chat')
    },

    close(peer) {
        console.log("[ws] close", peer);
    },

    error(peer, error) {
        console.log("[ws] error", peer, error);
    },

    message(peer, message) {
        console.log('[ws] message', peer, message)
        peer.publish(room, message.text())
    }
});

Client 구성

가볍게 index.vue에서 테스트를 진행해봅시다.

<script setup lang="ts">

import { useWebSocket } from '@vueuse/core'

const localUrl = 'ws://localhost:3000/api/websocket';
const { status, data, send, open, close } = useWebSocket(localUrl)

const message = ref('')
const history = ref<string[]>([])

watch(data, (receiveMsg: string) => {
  history.value.push(`server: ${receiveMsg}`)
})

function sendMessage() {
  if (message.value == null || message.value === '') {
    return false
  }

  history.value.push(`client : ${message.value}`)
  send(message.value);
  message.value = '';
}

</script>

<template>
  <div>
    <h1>WebSocket - let's go</h1>
    <form @submit.prevent="sendMessage">
      <input v-model="message"/>
      <button type="submit">Send</button>
    </form>
    <div>
      <p v-for="entry in history">{{ entry }}</p>
    </div>
  </div>
</template>


<style scoped>

</style>

테스트

브라우저 2개를 띄워서 테스트가 가능한데, 실시간으로 통신이 가능한 것을 확인 할 수 있다.

출처: https://www.youtube.com/watch?v=OfY7JcrqkPg&t=721s

Nuxt3 Mysql 연동하기 및 서버구성

이안_ian — Fri, 12 Jul 2024 22:49:27 +0900

1. Project 생성 및 hello world 찍어보기

//vscode 터미널 기준
npx nuxi@latest init <project-name>

code <project-name>

//폴더 및 파일 생성 server/api/index.ts
export default defineEventHandler(() => {
    return { helloWorld: 'API' }
  })

npm run dev로 서버를 올리고 localhost:3000/api로 접속해서 확인!!

2. DB 연결정보

이제 본격적으로 DB 연동부터 시작해보자!!

먼저 npm install mysql2 설치해주자

server/db/connection.ts 파일 생성

import mysql from 'mysql2/promise';

interface Options {
    query: string;
    values?: any[];
}

const pool = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: '',
    database: '',
});

export const sql = async ({ query, values }: Options) => {
    const [rows] = await pool.query(query, values);

    return rows;
};

혹시 DB 구성이 안되었다면 아래글 참고

https://smujihoon.tistory.com/296

3. CRUD 쿼리 작성하기

server/model/user.ts 파일 생성

import {sql} from '~/server/db/connection';

export type User = {
    id: string;
    password: string;
    name: string;
};

export const read = async () => {
    const result = await sql({
        query: 'select * from user'
    });

    return result as User[];
}

export const add = async (data: Pick<User, 'id' | 'password' | 'name'>) => {
    const result = await sql({
        query: `insert into user (id, password, name) 
                values (?,?,?)`,
        values: [data.id, data.password, data.name]
    }) as any;

    return result.length === 1 ? (result[0] as User) : null;
}

export const detail = async (id: string) => {
    const result = (await sql({
        query: `select 
                    id, 
                    password, 
                    name 
                from user 
                where id = ?`,
        values: [id]
    })) as any;

    return result.length === 1 ? (result[0] as User) : null;
}

export const login = async (data: Pick<User, 'id' | 'password'>) => {
    const result = (await sql({
        query: `select 
                    id, 
                    password, 
                    name 
                from user 
                where id = ? and password = ?`,
        values: [data.id, data.password]
    })) as any;

    return result.length === 1 ? (result[0] as User) : null;
}

export const update = async (data: Pick<User, 'id' | 'name'>) => {
    await sql({
        query: `update user 
                    set name = ?
                where id = ?`,
        values: [data.name, data.id]
    });

    return await detail(data.id);
}

export const remove = async(id: string) => {
    await sql({
        query: 'delete from user where id = ?',
        values: [id]
    });
    return true;
}

4. Controller 작성하기

server/controller/user.ts 파일 생성

import { H3Event } from 'h3';
import * as userModel from '~/server/model/user';

export const read = async () => {
    try {
        const result = await userModel.read();
        
        return {
            data: result
        }
    } catch {
        throw createError ({
            statusCode: 500,
            statusMessage: 'something went wrong'
        });
    }
}

export const add = async (evt: H3Event) => {
    try {
        const body = await readBody(evt);
        const result = await userModel.add({
            id: body.id,
            name: body.name,
            password: body.password
        });
        
        return {
            data: result
        }
    } catch {
        throw createError ({
            statusCode: 500,
            statusMessage: 'something went wrong'
        });
    }
}

export const detail = async (evt: H3Event) => {
    try {
        const result = await userModel.detail(evt.context.params?.id as string);
        
        return {
            data: result
        }
    } catch {
        throw createError ({
            statusCode: 500,
            statusMessage: 'something went wrong'
        });
    }
}

export const update = async (evt: H3Event) => {
    try {
        const body = await readBody(evt);
        const result = await userModel.update(evt.context.params?.id as string, {
            name: body.name
        });
        
        return {
            data: result
        }
    } catch {
        throw createError ({
            statusCode: 500,
            statusMessage: 'something went wrong'
        });
    }
}

export const remove = async (evt: H3Event) => {
    try {
        const result = await userModel.remove(evt.context.params?.id as string);
        
        return {
            data: result
        }
    } catch {
        throw createError ({
            statusCode: 500,
            statusMessage: 'something went wrong'
        });
    }
}

5. router 생성

호출하기 위한 router를 만들어주자

server/api/[...].ts 생성

import { useBase, createRouter, defineEventHandler } from 'h3';
import * as userController from '~~/server/controller/user';

const router = createRouter();

router.get('/user', defineEventHandler(userController.read));
router.post('/user', defineEventHandler(userController.add));
router.get('/user/:id', defineEventHandler(userController.detail));
router.put('/user/:id', defineEventHandler(userController.update));
router.delete('/user/:id', defineEventHandler(userController.remove));

export default useBase('/api', router.handler);

6. 확인

api를 호출해서 신규 회원 추가 및 기존 회원 변경을 해보았다.

포스트맨을 활용하면 body에 데이터를 넣어서 호출 가능하니까 테스트 시 참고하길 바랍니다.

Node와 express로 간단하게 서버 구축하기

이안_ian — Thu, 11 Jul 2024 21:54:29 +0900

1. LTS로 Node 먼저 설치하기

https://nodejs.org/en

Node.js — Run JavaScript Everywhere

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

2. 초기화 작업 및 express 설치

빈 폴더를 VSCode로 열어서 아래의 명령어를 각각 실행해준다.

npm init -y
npm install express

대충 이런 모양이 나오게 될것이다.

3. 서버구성하기

서버니까 DB와 연동되어 호출 하는 것 까지 한방에 해봅시다!!

우선 추가적으로 필요한 모듈 설치

npm install mysql2

npm install cors

index.js는 아래와 같이 구성

// db 설정
const mysql = require('mysql2');
const connection = mysql.createConnection({
  host: 'localhost',
  port: '3306',
  user: 'root',
  password: '',
  database: '',
})

// express 불러와서 인스턴스 생성
const express = require('express');
const app = express();

// 포트 정보
const port = 3000;

// 요청 파라미터 받기(request body 접근하기 위함)
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

const cors = require('cors');
const corsOptions = {
  origin: '*', //모든 출처 허용 옵션. true를 써도 된다
  credentials: true,
};
app.use(cors(corsOptions));

// 라우트 설정
// HTTP GET 방식으로 '/' 경로를 요청하였을 때
// Hello World!라는 문자열을 결과값으로 보냄
app.get('/', (req, res) => {
  res.send('Hello World!');
});

//DB 데이터 조회
app.get('/users', (req, res) => {
  connection.query('SELECT * from user', (error, rows) => {
    if (error) throw error;
    console.log('User info is: ', rows);
    res.send(rows);
  });
});

//DB 특정 데이터 조회
app.get('/users/:id', (req, res) => {
  let sql = 'SELECT * FROM USER WHERE ID = ?';

  connection.query(sql, [req.params.id], (error, rows) => {
    if (error) throw error;
    console.log('User info is: ', rows);
    res.send(rows);
  });
});

//DB 데이터 삽입
app.post('/users/add', (req, res) => {
  let addUser = {
    id: req.body.id,
    name: req.body.name,
    password: req.body.password,
  }

  let sql = 'INSERT INTO USER SET ?';
  connection.query(sql, addUser, (error, result) => {
    if (error) throw error;
    res.send('user added...');
  })
})

//DB 데이터 업데이트
app.put('/users/:id', (req, res) => {
  let newName = req.body.name;
  let sql = 'UPDATE USER SET NAME = ? WHERE ID = ?';

  connection.query(sql, [newName, req.params.id], (error, result) => {
    if (error) throw error;
    console.log(`${req.params.id} user updated...`);
    res.send(`${req.params.id} user updated...`);
  });
});

//DB 데이터 삭제
app.delete('/users/:id', (req, res) => {
  let sql = 'delete from USER WHERE ID = ?';

  connection.query(sql, [req.params.id], (error, result) => {
    if (error) throw error;
    console.log(`${req.params.id} user deleted...`);
    res.send(`${req.params.id} user deleted...`);
  });
});

//로그인
app.post('/users/login', (req, res) => {
  let sql = 'SELECT * FROM USER WHERE ID = ? AND PASSWORD = ?';

  connection.query(sql, [req.body.id, req.body.password], (error, rows) => {
    if (error) throw error;
    console.log('User info is: ', rows);
    res.send(rows);
  });
});

// 서버 실행
app.listen(port, () => {
  console.log(`App running on port ${port}...`);
});

DB구성이 안되어 있다면 아래글 참고

https://smujihoon.tistory.com/296

database을 새로 만들어서 더미 데이터를 넣고 호출해보면 잘 통신되는걸 확인

기본적인 CRUD 예제를 다 넣어놨으니 참고해서 만들면 될것 같다.

Docker로 Mysql 사용해보기

이안_ian — Tue, 9 Jul 2024 20:36:19 +0900

1. Docker 설치

아래의 홈페이지로 가서 설치, 혹시 에러가 난다면 BIOS에서 가상머신이 켜져 있는지 확인하자!

https://www.docker.com/products/docker-desktop/

Docker Desktop: The #1 Containerization Tool for Developers | Docker

Docker Desktop is collaborative containerization software for developers. Get started and download Docker Desktop today on Mac, Windows, or Linux.

www.docker.com

~~필자는 AMD의 SVM을 못찾아서 1시간을 삽질을..ㅠ~~

2. Mysql Docker 이미지 다운로드

//cmd에서 실행
docker pull mysql

//버전을 지정할 경우 태그에 사용
docker pull mysql:8.0.22

docker desktop으로 간편하게 할 수도 있을 것 같다.

3. 이미지로 컨테이너 띄우고 접속하기

// 이미지 확인
docker images

// 컨테이너 생성 및 실행
docker run --name mysql-container -e MYSQL_ROOT_PASSWORD=<password> -d -p 3306:3306 mysql:latest

//mysql 컨테이너 접속
docker exec -it mysql-container bash
mysql -u root -p

show databases;

create database <database-name>
use <database-name>

//컨테이너 리스트 출력
docker ps -a

//컨테이너 시작/중지/재시작
docker stop mysql-container
docker start mysql-container
docker restart mysql-container

아니면 GUI로 딸깍!

Private DB를 Bastion통해 연결하기

이안_ian — Wed, 13 Sep 2023 10:14:33 +0900

사용 툴은 DBeaver
커넥션 세팅에서 SSH 탭에 bastion 정보를 넣어준다.

test tunnel config를 눌러서 우선 베스천 서버에 잘 접속되는지 확인.

이후 main으로 돌아와 기본적인 DB정보를 넣어주면 베스천을 통해 vpc 내부에 접속하게되고
그 뒤에 private db에 접근이 가능한 구조다.

출처: likegirl.tistory.com/3

window에서 접근하고싶다면
Windows PowerShell에서

ssh -i privateKey ec2-user@공인ip(탄력적ip) -p22

ex)
ssh -i privateKey.pem ec2-user@15.201.49.77 -p22
식으로 접근할 수도 있다.

Helm과 설치 가이드

이안_ian — Mon, 28 Aug 2023 17:05:53 +0900

Helm이란?

helm은 deployment, service, ingress 등 yaml 파일들을 하나의 package로 관리하기 위한 도구이다.

기본적으로 배포한 애플리케이션을 삭제하기 위해선 deployment.yaml, service.yaml, ingress.yaml를

각각 삭제 해줘야 하지만 helm을 사용하면 설치와 삭제가 모두 한 번에 가능하다.

주요 개념 3가지

Chart: helm package에 해당하는 부분으로, 이 패키지에는 쿠버네티스 클러스터 내에서 애플리케이션, 툴, 서비스 등 구동에 필요한 모든 리소스가 정의되어 있다. 즉 설치 스크립트라고 볼 수 있다.
Repository: Chart를 모아두고 공유하는 공간이다.
Release: 쿠버네티스 클러스터에서 구동되는 Chart의 인스턴스이다. 일반적으로 하나의 Chart는 동일한 Cluster 내에 여러 번 설치될 수 있다. 이때 설치될 때마다 새로운 Release가 생성된다.

Template과 Value

helm은 기본적으로 템플릿 개념을 사용한다. 템플릿으로 파일을 만들어 놓고 밸류 값을 채워 넣어서

쿠버네티스 리소스를 정의한 yaml 파일을 생성한다.

아래와 같은 형태의 파일이 제공된다.

template.yaml

apiVersion: apps/v1beta2
kind: Deployment
metadata:
  name: {{ .Values.name }}-deployment
spec:
  replicas: {{ .Values.replicaCount }}
  minReadySeconds: 5
  selector:
    matchLabels:
      app: {{ .Values.name }}
  template:
    metadata:
      name: {{ .Values.name }}-pod
      labels:
        app: {{ .Values.name }}
    spec:
      containers:
      - name: {{ .Values.name }}
        image: "{{ .Values.image.repository }}:{{ .Values.image.tag | default .Chart.AppVersion }}"
        imagePullPolicy: Always
        ports:
        - containerPort: 8080
---
apiVersion: v1
kind: Service
metadata:
  name: {{ include "test-chart.fullname" . }}
  labels:
    {{- include "test-chart.labels" . | nindent 4 }}
spec:
  type: {{ .Values.service.type }}
  ports:
    - port: {{ .Values.service.port }}
      targetPort: http
      protocol: TCP
      name: http
  selector:
    {{- include "test-chart.selectorLabels" . | nindent 4 }}

이렇게 만들어진 template에 values.yaml의 데이터를 읽어 들여서 매핑하여 만들어준다.

특히나 지속적으로 반복되는 name의 경우 이러한 방법을 썼을 때 굉장히 간편해진다.

values.yaml

name: testapp
image:
  repository: nginx
  
service:
  type: ClusterIP
  port: 80

이런식으로 해당 값만 작성한 yaml 파일을 생성하면된다.

이러한 기본적인 기초 지식으로 이제 실습을 진행해보자.

Helm 설치

리눅스 환경

cd ~
curl -o get_helm.sh https://raw.githubusercontent.com/helm/helm/main/scripts/get-helm-3
chmod 700 get_helm.sh
./get_helm.sh

윈도우 환경

https://github.com/helm/helm/releases

Releases · helm/helm

The Kubernetes Package Manager. Contribute to helm/helm development by creating an account on GitHub.

github.com

위 url에 접속하여 windows 용으로 다운받아 압축 해제한다.

그리고 아래와 같이 환경변수를 만들어준다.

시스템 변수 > path에도 변수 값을 추가해준다.

그리고 cmd에서 helm version으로 설치된 것을 확인하면 된다.

Helm Chart Repository 초기화, 업데이트

helm repo add stable https://charts.helm.sh/stable

helm repo update

사용 명령어

//helm chart 목록 조회
helm search repo stable

//helm chart 검색
helm search repo <word>

//Repo 추가
helm repo add [레포지토리 이름] [레포지토리 주소]

//local에 등록된 repo조회
helm repo list

//등록했던 repo 삭제
helm repo remove <name>

##chart를 이용한 package 설치 및 삭제##
//[RELEASE-NAME]은 사용자가 정의하는 이름, [CHART-NAME]은 repo에서 확인한 chart이름
helm install [RELEASE-NAME] [CHART-NAME] [flags]

//[NAME]을 따로 지정하지 않고 자동생성
helm install [CHART-NAME] --generate-name

//패키지 삭제
helm uninstall [RELEASE-NAME]

//차트수정
helm upgrade [RELEASE-NAME] [Chart 생성 경로]

Chart 직접 만들기

helm create [RELEASE-NAME] [Chart 생성 경로]
ex) helm create test-chart ./test-chart/

현재 위치에 지정한 이름으로 폴더가 생기며 필요한 파일들이 하위에 생성된다.

거기서 values.yaml 파일을 아래와 같이 수정하고 배포 가능하다.

name: testapp
image:
  repository: nginx

service:
  type: ClusterIP
  port: 80

이제 미니쿠베를 실행시킨 다음 아래 명령어로 실행 및 확인을 해 볼 수 있다.

helm install test-chart --generate-name

//적용 확인하기
helm ls
kubectl get all

삭제는 위 명령어에서 확인!

Chart 검사하기

values.yaml에 정의한 대로 나올 결과물을 미리 알아보자.

문법적으로 이상이 없는지 확인

helm lint <Chart.yaml 경로>

templates을 기반으로 변수들 참조하여 리소스 배포시 결과 보기

helm template <Chart.yaml 경로>

원하는 JSON 데이터 만들기

이안_ian — Mon, 7 Aug 2023 13:41:46 +0900

개발을 하다보면 내가 원하는 key와 value를 가지고 JSON 형태의 데이터를 만들고 싶을 때가 있다.

구글링하다보면 결국 나오는 정보지만

막상 필요할 땐 바로 서치가 안되서 이를위해 아래의 예제를 남기려한다.

const stockArr = ["apple 80", "google 50"];

let eachStockArr = [];

for(let i=0; i<stockArr.length; i++){
    const splitData = stockArr[i].split(" ");
    const stock = splitData[0];
    const amount = parseInt(splitData[1]);

    console.log("stock: "+stock +"amount: "+amount);

    let stockInfo = {};
    stockInfo[stock] = amount;

    eachStockArr.push(stockInfo);
}

console.log(eachStockArr);

아주 간략하게 정리한 것 이지만 이를 기반으로 여러가지 시도 및 해결이 가능할 것 같다.

자바 ORM 표준 JPA 기본값 타입, 임베디드 타입

이안_ian — Thu, 1 Jun 2023 18:41:14 +0900

JPA의 데이터 타입 분류

엔티티 타입

@Entity로 정의하는 객체
데이터가 변해도 식별자로 지속해서 추적 가능
예) 회원 엔티티의 키나 나이 값을 변경해도 식별자로 인식 가능

값 타입

int, Integer, String처럼 단순히 값으로 사용하는 자바 기본 타입이나 객체
식별자가 없고 값만 있으므로 변경시 추적 불가
예) 숫자 100을 200으로 변경하면 완전히 다른 값으로 대체
종류로는 기본값 타입, 임베디드 타입, 컬렉션 값 타입이 존재

기본값 타입

String name, int age 등 이며, 생명주기를 엔티티의 의존한다. (회원을 삭제하면 이름, 나이도 함께 삭제됨)

값 타입은 공유하면 안된다. 회원 이름 변경 시 다른 회원의 이름도 함께 변경되면 안됨

자바의 기본 타입은 절대 공유가 안된다.

int, double 같은 기본 타입(primitive type)은 절대 공유X

기본 타입은 항상 값을 복사함

Integer같은 래퍼 클래스나 String 같은 특수한 클래스는 공유 가능 객체이지만 변경X

임베디드 타입

새로운 값 타입을 직접 정의할 수 있음

JPA는 임베디드 타입이라함

주로 기본값 타입을 모아서 만들어서 복합 값 타입이라고도함

int, String과 같은 값 타입

예시)

회원 엔티티는 이름, 근무 시작일, 근무 종료일, 주소 도시, 주소 번지, 주소 우편번호를 가진다.

Member

name

startDate

endDate

city

street

zipcode

위에서 자주쓰일 법한 컬럼들을 따로 관리하여 좀더 간결하게 아래와 같이 정의할 수 있다.

회원 엔티티는 이름, 근무 기간, 집 주소를 가진다.

Member

name

workPeriod

homeAddress

임베디드 타입 설정 방법

@Entity
public class Member {
  @Id
  @GeneratedValue
  private Long id;
  
  private String username;
  
  @Embedded
  private Period workPeriod;
  
  @Embedded
  private Address homeAddress;
}

@Embeddable
public class Period {
  private LocalDateTime startDate;
  private LocalDateTime endDate;
}

@Embeddable
public class Address {
  private String city;
  private String street;
  private String zipcode;
}

임베디드 타입과 테이블 매핑

임베디드 타입은 엔티티의 값일 뿐이다.
임베디드 타입을 사용하기 전과 후에 매핑하는 테이블은 같다.
객체와 테이블을 아주 세밀하게 매핑하는 것이 가능
잘 설계한 ORM 애플리케이션은 매핑한 테이블의 수보다 클래스의 수가 더 많음

@AttributeOverride : 속성 재정의

한 엔티티에서 같은 값 타입을 사용하면?

컬럼 명이 중복됨, @AttributeOverride 또는 @AttributeOverrides를 사용해서 컬럼 명 속성을 재정의

현재 Member에는 집주소만 정의했지만 직장주소도 매핑하고 싶을 수 있다. 그렇게되면 똑같은 컬럼명이 들어가기 때문에 에러가 발생되기에 위 옵션을 사용해야한다.

@Entity
public class Member {
  중략..
  
  @Embedded
  private Address homeAddress;
  
  @Embedded
  @AttributeOverrides({
    @AttributeOverride(name = "city", column=@Column(name = "work_city")),
    @AttributeOverride(name = "street", column=@Column(name = "work_street")),
    @AttributeOverride(name = "zipcode", column=@Column(name = "work_zipcode"))
  })
  private Address workAddress;
}

그러면 city, street, zipcode, work_city, work_street, work_zipcode가 모두 생성된다.

값 타입 공유 참조

임베디드 타입 같은 값 타입을 여러 엔티티에서 공유하면 위험함, side effect 발생

Address address = new Address("city", "street", "1000");

Member member1 = new Member();
member.setUsername("member1");
member.setHomeAddress(address);
em.persist(member1);

Member member2 = new Member();
member.setUsername("member2");
member.setHomeAddress(address);
em.persist(member2);

member1.getHomeAddress().setCity("newCity");

이렇게 할 경우 member1, member2 모두 수정된다.

값 타입 복사

값 타입의 실제 인스턴스인 값을 공유하는 것은 위험

대신 값(인스턴스)를 복사해서 사용

Address address = new Address("city", "street", "1000");

Member member1 = new Member();
member.setUsername("member1");
member.setHomeAddress(address);
em.persist(member1);

Address copyAddress = new Address(address.getCity(), address.getStreet(), address.getZipcode());

Member member2 = new Member();
member.setUsername("member2");
member.setHomeAddress(copyAddress);
em.persist(member2);

member1.getHomeAddress().setCity("newCity");

객체 타입의 한계

항상 값을 복사해서 사용하면 공유 참조로 인해 발생하는 부작용을 피할 수 있다.
문제는 임베디드 타입처럼 직접 정의한 값 타입은 자바의 기본 타입이 아니라 객체 타입이다.
자바 기본 타입에 값을 대입하면 값을 복사한다.
객체 타입은 참조 값을 직접 대입하는 것을 막을 방법이 없다.
객체의 공유 참조는 피할 수 없다.

그래서 불변 객체로 만들어야 위와 같은 상황을 예방 할 수 있다. 이런 에러가 발생 시 디버깅이 상당히 어려움

불변객체

객체 타입을 수정할 수 없게 만들면 부작용을 원천 차단
값 타입은 불변 객체로 설계해야함
불변 객체 : 생성 시험 이후 절대 값을 변경할 수 없는 객체
생성자로만 값을 설정하고 수정자(Setter)를 만들지 않으면 됨
참고: Integer, String은 자바가 제공하는 대표적인 불변 객체

자바 ORM 표준 JPA 프록시

이안_ian — Wed, 31 May 2023 12:55:31 +0900

프록시 기초

em.find() : 데이터베이스를 통해서 실제 엔티티 객체 조회

em.getReference() : 데이터베이스 조회를 미루는 가짜(프록시)엔티티 객체 조회

em.getReference()로 가져온 member의 getClass를 해볼 경우 Member가 아닌 Member@DFnadjwProxy 식으로 매핑이 되어 있다. 값 또한 null로 아직 아무것도 없는 상태다.

이럴때 값에 접근하려고 getName() 해면 그때 영속성 컨텍스트에 초기화를 요청하여 DB에서 객체를 생성한다.

특이한 점은 바로 객체를 리턴하지 않고 연결만 시켜줘서 값을 읽어 온다는 점이다.

즉, getName()을 하더라도 class는 Member가 아니라는 점이다.

프록시의 특징

프록시 객체는 처음 사용할 때 한 번만 초기화
프록시 객체를 초기화 할 때, 프록시 객체가 실제 엔티티로 바뀌는 것은 아님, 초기화되면 프록시 객체를 통해서 실제 엔티티에 접근 가능
프록시 객체는 원본 엔티티를 상속받음, 따라서 타입 체크시 주의해야함(==비교 실패, 대신 instance of 사용)
영속성 컨텍스트에 찾는 엔티티가 이미 있으면 em.getReference()를 호출해도 실제 엔티티 반환, 반대도 마찬가지
영속성 컨텍스트의 도움을 받을 수 없는 준영속 상태일 때, 프록시를 초기화하면 문제 발생

Member m1 = em.find(Member.class, 1L);
Member m2 = em.getReference(Member.class, 2L);
m1.getClass() == m2.getClass() //false

Member m1 = em.find(Member.class, 1L);
Member m2 = em.getReference(Member.class, 1L); //이미 find한 객체를 호출
m1.getClass() == m2.getClass() //true 둘다 Member

Member m1 = em.getReference(Member.class, 1L);
Member m2 = em.find(Member.class, 1L);
m1.getClass() == m2.getClass() //true 둘다 Proxy

그러나 실제 업무에서는 em.getReference()를 직접 사용하진 않고 지연 로딩에 프록시 매커니즘이 사용된다.

지연로딩

@Entity
public class Member {
  @Id
  @GeneratedValue
  private Long id;
  
  private String name;
  
  @ManyToOne(fetch = FetchType.LAZY)
  @JoinColumn(name = 'team_id')
  private Team team;
}

객체에서 연관관계를 설정할 때 LAZY를 쓰지않는다면

Member를 find 할때 자동으로 Team이 join되어 쿼리가 실행된다.

많은 연관관계가 있다면 이들 모두 join이 걸리게 될 것이고, 다 사용하지 않는다면 성능을 떨어뜨리는 요소가 될 뿐이다.

그래서 해당 값을 사용할 때 select 하는 전략이 LAZY 방식인 거다.

출처 : https://www.inflearn.com/course/ORM-JPA-Basic

자바 ORM 표준 JPA 벌크 연산

이안_ian — Tue, 30 May 2023 13:29:10 +0900

벌크 연산

쿼리 한 번으로 여러 테이블 로우 변경(엔티티)
executeUpdate()의 결과는 영향받은 엔티티 수 반환
update, delete 지원
insert(insert into .. select, 하이버네이트 지원)

String qlString = 	"update Product p" +
					"set p.price = p.price * 1.1 " +
                    "where p.stockAmount < :stockAmount";
int rsCnt = em.createQuery(qlString)
				.setParameter("stockAmount", 10)
                .executeUpdate();
                
int rsCnt = em.createQuery("update Member m set m.age = 20")
                .executeUpdate();

벌크 연산 주의

벌크 연산은 영속성 컨텍스트를 무시하고 데이터베이스에 직접 쿼리 실행

벌크 연산을 먼저 실행
벌크 연산 수행 후 영속성 컨텍스트 초기화

//flush까지 된 상태
int rsCnt = em.createQuery("update Member m set m.age = 20")
                .executeUpdate();

//영속성 컨텍스트 초기화
em.clear();

연관 포스팅: https://smujihoon.tistory.com/278

출처 : https://www.inflearn.com/course/ORM-JPA-Basic

자바 ORM 표준 JPA fetch join

이안_ian — Mon, 29 May 2023 21:11:48 +0900

페치 조인

@Entity
public class Member {
  중략..
  
  @ManyToOne(fetch = FetchType.LAZY) //Member, Team 관계를 나타내는 다:1(N:1)
  @JoinColumn(name = "TEAM_ID")
  private Team team;
}

Member 조회 때 여러 연관관계가 걸릴 수 있는데 그냥 매핑을 할 경우 모든 테이블에 join이 걸리므로

성능이 떨어지는걸 막고자 연관관계 매핑 시 Lazy 로딩을 사용하게 된다.

그러면 Team을 바로 join하지 않고 프록시 상태로 갖고 있다가 값을 참조하는 순간에 select 쿼리가 발생된다.

그런데 아래와 같이 사용할 경우 최악의 성능이 생길 수 있다.

Team teamA = new Team();
teamA.setName("teamA");
em.persist(teamA);

Team teamB = new Team();
teamB.setName("teamB");
em.persist(teamB);

Member member1 = new Member();
member1.setUsername("회원1");
member1.setTeam(teamA);
em.persist(member1);

Member member2 = new Member();
member2.setUsername("회원2");
member2.setTeam(teamA);
em.persist(member2);

Member member3 = new Member();
member3.setUsername("회원3");
member3.setTeam(teamB);
em.persist(member3);

em.flush();
em.clear();

String query = "select m from Member m";
List<Member> rs = em.createQuery(query, Member.class).getResultList();

for(Member member : rs){
  sout("member = " + member.getUsername()+", " + member.getTeam().getName());
}

이렇게 할 경우 team의 값은 프록시로 null인 상태다. 값 조회를 위해 그때 조회 쿼리를 날린다.

select * from team where team_id = ?

회원1일 때 teamA를 조회해서 가져올 것이고, 회원2일 땐 회원1에서 조회한 1차 캐시에서 데이터를 불러올 것이다.

하지만 회원3은 다른팀인 teamB를 가져와야 하기에 조회 쿼리가 새롭게 발생될 것이다.

만약 회원 100명을 조회하고 team이 모두 다르다면 team을 조회하는 쿼리가 100번 발생될 것이다.

이게 바로 N+1 문제다.

그래서 이럴 경우엔 fetch join을 사용해서 해당 문제를 해결한다.

//기본은 inner join
String query = "select m from member m join fetch m.team";

//outer join을 원하면 아래로
String query = "select m from member m left join fetch m.team";

아래의 쿼리로 실행된다.

select *
from membr m
inner team t
  on m.team_id = t.id

처음부터 team에 대한 정보는 다 들고오기 때문에 프록시 상태도 아니며 원하는 값을 바로 가져왔기에 위 문제가 발생되지 않는 것이다.

컬렉션 페치 조인과 distinct

일대다 조인에서는 데이터가 뻥튀기 될 수 있다.

Team에서 Member로 join을 걸 경우 가운데처럼 2개의 데이터가 생성되는데,

논리적으로 보면 팀A에 회원1, 회원2가 있다고 끝나야 하지만

fetch join의 결과 리스트는 2 row 전달 받아 팀A > 회원1,회원2 이라는 같은 데이터가 2개 들어가게 된다.

이럴 때 distinct을 사용하면 된다.

String query = "select distinct t from team join fetch t.members"

실제 쿼리에도 distinct가 붙어서 실행되지만 추가로 애플리케이션에서도 중복 제거를 시도한다.

같은 식별자를 가진 Team 엔티티 제거.

페치 조인과 일반 조인의 차이

일반 조인 실행시 연관된 엔티티를 함께 조회하지 않음.

단지 select 절에 지정한 엔티티만 조회할 뿐.

[JPQL]
select t
from Team t join t.members m
where t.name= '팀A'

[SQL]
select T.*
from Team T
inner join member m on T.id = m.team_id
where T.name = '팀A'

페치 조인을 사용할 때만 연관된 엔티티를 함께 조회함(즉시 로딩).

[JPQL]
select t
from Team t
join fetch t.members
where t.name = '팀A'

[SQL]
select t.*, m.*
from team t
inner join member m on t.id = m.team_id
where t.name = '팀A'

페치 조인의 특징과 한계

페치 조인 대상에는 별칭을 줄 수 없다.
하이버네이트는 가능, 하지만 가급적 사용X
둘 이상의 컬렉션은 페치 조인 할 수 없다.
컬렉션을 페치 조인하면 페이징 API를 사용할 수 없다.
일대일, 다대일 같은 단일 값 연관 필드들은 페치 조인해도 페이징 가능. 일대다는 뻥튀기 때문에 불가능
연관된 엔티티들을 SQL 한 번으로 조회 - 성능 최적화
엔티티에 직접 적용하는 글로벌 로딩 전략보다 우선함
@OneToMany(fetch = FetchType.LAZY) //글로벌 로딩 전략
실무에서 글로벌 로딩 전략은 모두 지연 로딩
최적화가 필요한 곳은 페치 조인 적용

페치 조인 정리

모든 것을 페치 조인으로 해결할 수는 없음
페치 조인은 객체 그래프를 유지할 때 사용하면 효과적
여러 테이블을 조인해서 엔티티가 가진 모양이 아닌 전혀 다른 결과를 내야하면, 페치 조인보다는 일반 조인을 사용하고 필요한 데이터들만 조회해서 DTO로 반환하는 것이 효과적

@BatchSize

출처 : https://www.inflearn.com/course/ORM-JPA-Basic

JPA @MappedSuperclass

이안_ian — Sun, 28 May 2023 01:47:40 +0900

공통 매핑 정보가 필요할 때 사용(id, name)

같은 정보가 계속 반복될 때 속성만 공통으로 사용하는 것

@MappedSuperclass
public abstract class BaseEntity {
  
  private String createdBy;
  private LocalDateTime createdDate;
  private String modifiedBy;
  private LocalDateTime modifiedDate;
}

public class Member extend BaseEntity {
}

상속관계 매핑X
엔티티X, 테이블과 매핑X
부모 클래스를 상속 받는 자식 클래스에 매핑 정보만 제공
조회, 검색 불가(em.find(BaseEntity)불가)
직접 생성해서 사용할 일이 없으므로 추상 클래스 권장

출처 : https://www.inflearn.com/course/ORM-JPA-Basic

자바 ORM 표준 JPA 연관관계

이안_ian — Sat, 27 May 2023 00:11:16 +0900

단방향 연관관계

객체지향 모델링

출처에서 사용된 예시

하나의 팀이 여러 개의 멤버를 가질 때 보통 Member에서 team_id를 갖고 있는 설계를 많이 하게된다.

하지만 객체지향에서는 외래키 대신 객체 자체를 들고 있는 형태가 되어야 한다.

그래서 위와 같은 내용으로 Member쪽에 이렇게 설정을 해야한다.

@Entity
public class Member {
  중략..
  
  @ManyToOne(fetch = FetchType.LAZY) //Member, Team 관계를 나타내는 다:1(N:1)
  @JoinColumn(name = "TEAM_ID")
  private Team team;
}

이런식으로 단방향 매핑을 한 뒤에 member를 find 할 경우 매핑된 Team의 정보까지 같이 join되어 불러온다.

Member findMember = em.find(Member.class, 1L);
Team findTeam = findMember.getTeam();
String temaName = findMember.getTeam().getName();

만약에 현재 위에서 불러온 findMember의 team_id가 1일 경우 100인 team으로 바꾸고 싶을 경우 find로 객체를 불러와서 set만 해주게되면 DB에서는 team_id가 교체가된다.

Member findMember = em.find(Member.class, 1L);
Team newTeam = em.find(Team.class, 100L);

//DB에서는 Member 테이블에 있는 team_id가 1 -> 100으로 변경됨
findMember.setTeam(newTeam);

양방향 연관관계와 연관관계 주인

지금 상태에서는 Team에서 Member가 조회가 안된다.

근데 테이블 관계에서 둘은 외래키로 왔다갔다할 수 있다.

객체에서는 양방향으로 설정해줘야 하는데 Team에 List로 members를 넣어줘야한다.

이 부분이 객체와 테이블 연관관계의 가장 큰 차이점이다.

@Entity
public class Team {
  중략..
  
  @OneToMany(mappedBy = "team") //Member에서 사용하는 Team 객체 변수명
  private List<Member> members = new ArrayList<>(); //new ArrayList는 nullPoint도 막아주고, 관례적으로 사용
}

이렇게하면 이제 Team이 갖고 있는 멤버들이 조회가 된다.

Member findMember = em.find(Member.class, member.getId());
List<Member> members = findMember.getTeam().getMembers();

for(Member m : members){
  sout("m = " + m.getUsername());
}

테이블의 양방향 관계는 외래 키 하나로 두 테이블의 연관관계를 관리한다.

select *

from member m

join team t on m.team_id = t.team_id

select *

from team t

join member m on m.team_id = t.team_id

그러나 객체의 양방향 관계는 사실 양방향이 아니라 서로 다른 단방향 관계 2개다. 그래서 객체를 양방향으로 참조하려면 단방향 연관관계를 2개 만들어야 한다.

A -> B (a.getB())

B -> A (b.getA())

단방향일 때는 큰 문제가 없는데 양방향일 때는 둘다 참조가 되기 때문에 Member가 Team을 바꾸고 싶을 때 Member에서 외래키를 바꿔야할지? Team에서 외래키를 바꿔야할지? 고민을 하게된다.

그렇기때문에 둘 중 하나로 외래 키를 관리해야 한다.

연관관계의 주인(Owner)

양방향 매핑 규칙

객체의 두 관계중 하나를 연관관계의 주인으로 지정
연관관계의 주인만이 외래 키를 관리(등록, 수정)
주인이 아닌쪽은 읽기만 가능
주인은 mappedBy 속성 사용X
주인이 아니면 mappedBy 속성으로 주인 지정

그래서 Team에 mappedBy가 지정된 members에서는 조회만 가능할 뿐 어떠한 수정이 되지않는다.

누구를 주인으로?

외래 키가 있는 곳을 주인으로 정해라.

그리고 DB관점에서 외래 키가 있는 곳이 N이다. 없는 곳이 1이고(N:1), @ManyToOne 설정하는 곳

여기서는 Member.team이 연관관계 주인이며 진짜 매핑이고, Team.members는 가짜 매핑(조회용)

아래와 같은 실수를 하지 말아야한다.

Team team = new Team();
team.setName("TeamA");
em.persist(team);

Memeber member = new Member();
member.setName("member1");

team.getMembers().add(member);

//이럴경우 member에 team_id는 null이 된다. 연관관계 주인으로 값을 설정해야함
em.persist(member);

그리고 순수 객체 상태를 고려해서 항상 양쪽에 값을 설정하자.

Team team = new Team();
team.setName("TeamA");
em.persist(team);

Memeber member = new Member();
member.setName("member1");
member.setTeam(team);

em.persist(member);

//이때 위에서 추가된 memeber는 출력되지 않는다, 왜냐면 1차 캐시 데이터를 불러오기 때문에
//em.flush()나 em.clear()를 하고 find하기전까진 미노출이다.
Team findTeam = em.find(Team.class, team.getId());

//그렇기에 양쪽 다 데이터를 넣어주는게 좋다.
team.getMembers().add(member);

연관관계 편의 메소드를 생성하자.

@Entity
public class Member {
  중략..
  
  public void setTeam(Team team){  //chageTeam 같은 메소드로 변경하자 setter는 지양
    this.team = team;
    
    team.getMembers().add(this);
  }
}

양방향 매핑시에 무한 루프를 조심하자.

예) toString(), lombok, JSON 생성 라이브러리

@Entity
pulbic class Member {
  중략..
  
  @ManyToOne
  @JoinColumn(name = "team_id")
  private Team team;
  
  @Override
  public String toString(){
    //간소화 리턴 값
    return "team=" + team;
  }
}

@Entity
pulbic class Team {
  중략..
  
  @OneToMany(mappedBy = "team")
  private List<Member> members = new ArrayList<>();
  
  @Override
  public String toString(){
    //간소화 리턴 값
    return "members=" + members;
  }
}

이런식으로 서로가 서로를 계속 호출하게되어 무한루프에 빠져 StackOverflowError가 발생한다.

출처 : https://www.inflearn.com/course/ORM-JPA-Basic

자바 ORM 표준 JPA DDL, 기본키 매핑

이안_ian — Thu, 25 May 2023 14:31:16 +0900

@Entity
public class Member {
	@Id
    private Long id;
    private String name;
}

위와 같이 작성을 할 경우 JPA에서 자동으로 DDL을 애플리케이션 실행 시점에 생성해준다.

이렇게 만들 경우 4가지 옵션으로 사용이 가능하다.

ddl-auto : create, update, validate, none

옵션	설명
create	기존 테이블 삭제 후 다시 생성
update	변경분만 반영
validate	엔티티와 테이블이 정상 매핑되었는지만 확인
none	사용하지 않음

개발 환경(로컬)에서는 create나 update를 사용해도 되나, 스테이징과 운영에서는 절대 사용해선 안된다.

스테이징과 운영은 validate, none을 권장

왜냐하면 create는 데이터 자체를 날릴 수 있으며,

update는 많은 alter문을 실행하다가 DB락이 걸려서 운영 장애가 날 수 있다.

기본키 매핑

기본키 매핑 방법에는 2가지 방식이 있습니다.

직접할당 : @Id만 사용

자동생성 : @GeneratedValue

IDENTITY : 데이터베이스에 위임, MYSQL
SEQUENCE : 데이터베이스 시퀀스 오브젝트 사용, 오라클
TABLE : 키 생성용 테이블 사용, 모든 DB에서 사용(@TableGenerator 필요)
AUTO : 방언에 따라 자동 지정, 기본값

IDENTITY

IDENTITY 전략의 경우 DB에 insert될 때 알아서 시퀀스를 넣고 실행되기 때문에 insert문 자체에도 id 값은 null로 실행된다. 그래서 pk를 알 수 있는건 막상 DB에 데이터가 들어가봐야 알 수 있다.

하지만 그러면 영속성 컨텍스트는 pk를 모르기 때문에 관리를 할 수 없으므로 이 전략일 경우에만 예외적으로 persist 작업때 insert문을 날리게 된다.

SEQUENCE

아이덴티티 전략과는 다르게 시퀀스는 persist 시점에

call next value for MEMBER_SEQ

라는 구문이 실행되어 pk를 불러와서 기본키 매핑이되므로 원래의 매커니즘대로 움직이게 된다.

그러나 결국 DB의 조회를 해오는 것이므로 성능적인 개선이 필요하다.

그래서 사용하게되는 옵션이 allocationSize이다.

한 번의 호출로 얼만큼의 시퀀스를 불러올지 정하는 옵션인데 권장 옵션은 50개씩이다.

1번의 호출로 50개의 시퀀스를 불러와서 서버에서는 1개씩 쭉 쓰다 50개를 다 쓰게 되면 다시 호출해서 새로운 50개를 받아오는 방식이다. 이렇게 설정할 경우 네트웍 비용을 아낄 수 있다.

출처 : https://www.inflearn.com/course/ORM-JPA-Basic

자바 ORM 표준 JPA 플러시, 준영속

이안_ian — Wed, 24 May 2023 10:50:50 +0900

플러시

영속성 컨텍스트의 변경 내용을 데이터베이스에 반영

영속성 컨텍스트를 플러시 하는 방법

em.flush() -> 직접호출

트랜잭션 커밋, JPQL 쿼리 실행 -> 플러시 자동 실행

직접 호출할 땐 영속성 컨텍스트를 비우지 않음

영속 컨텍스트 내 '쓰기 지연 SQL 저장소' 의 내용만 미리 반영됨, 영속성 컨텍스트를 비우지 않

준영속

영속 > 준영속 이므로

영속 상태의 엔티티가 영속성 컨텍스트에서 분리되는 것.

영속성 컨텍스트에서 제공되는 기능 사용 못함

준영속 상태로 만드는 방법

em.detach(entity) - 특정 엔티티만 준영속 전환

em.clear() - 영속성 컨텍스트를 완전히 초기화

em.close() - 영속성 컨텍스트를 종료

출처 : https://www.inflearn.com/course/ORM-JPA-Basic

자바 ORM 표준 JPA 영속성 컨텍스트

이안_ian — Tue, 23 May 2023 21:38:29 +0900

영속성 컨텍스트(entityManager)

영속성 컨텍스트는 데이터를 대신 관리해주는 JPA의 기능이라고 볼 수 있을 것 같습니다.

객체가 관리대상(영속상태)이 된다면 트랜잭션이 끝나고 insert나 update같은 기능을 대신 처리하게 해줍니다.

//객체를 생성한 상태(비영속)
Member member = new Member();
member.setId("member1");
member.setUsername("회원1");

위 상태처럼 그냥 객체(member)를 생성하고 어떤 처리도 되지 않은 상태를 비영속이라 합니다.

여기서 영속 상태를 만들어주기 위해서는 아래와 같이 하면 됩니다.

EntityManager em = emf.createEntityManager();
em.getTransaction().begin();

//객체를 저장한 상태(영속)
em.persist(member);

하지만 아직 DB에 저장된 상태는 아니다. 영속성 컨텍스트 내 1차 캐시에 논리적으로 저장된 상태다.

@id : Entity => "member1" : member

형태로 기본키와 객체가 매핑된다.

이때 조회문을 날렸을 때

1차 캐시에 데이터 있는지 확인하여 있으면 DB를 조회하지 않고 그 값을 가져온다.

Member findMember = em.find(Member.class, "member1");

하지만 1차 캐시에 없는 key값을 조회하려 한다면 DB에서 조회 후

1차 캐시에 적재 후 데이터를 리턴한다.

이후에 member2를 조회할 경우 DB를 거치지 않고 1차 캐시에 있는 데이터를 리턴

Member findMember = em.find(Member.class, "member2");

이렇게 때문에 동일한 key로 호출된 객체는 같은 주소값을 가지게 된다.

자바에서 데이터는 같아도 객체주소가 다르기에, 성립하지 않는 객체 간 ==이 성립하게 되는 것이다.

Member findMember1 = em.find(Member.class, "member1");  //처음 호출 시 DB에서 데이터 조회 후 1차 캐시 적재
Member findMember2 = em.find(Member.class, "member1");  //1차 캐시에 있는 주소값을 불러옴

findMember1 == findMember2 // true

트랜잭션을 지원하는 쓰기 지연

EntityManager em = emf.createEntityManager();
EntityTransaction transaction = em.getTransaction();
//엔티티 매니저는 데이터 변경시 트랜잭션을 시작해야 한다.
transaction.begin();

em.persist(memberA);
em.perSist(memberB);
//이렇게 했을 때 DB에 바로 insert가 되지않는다.

//커밋하는 순간 데이터베이스에 insert SQL을 보낸다.
transaction.commit();

이렇게 실행될 경우 insert 쿼리를 한 방에 보낼 수 있어서 네트웍 비용이 절감될 수 있다.

즉, 성능적인 이점을 얻을 수 있다.

JPA에서의 Update

Member member = em.find(Member.class, 150L);
member.setName("ZZZZ");

tx.commit();

이런식으로 값을 바꿔주면 커밋 때 update문이 실행된다.

이게 가능한 이유는 1차 캐시에 스냅샷이라는 항목으로 처음 find 했을 때의 정보를 가지고 있다.

그리고 현재의 Entity와의 값이 다를 경우 변경 감지를 하여 자동으로 update문이 실행되는 것이다.

출처 : https://www.inflearn.com/course/ORM-JPA-Basic

양재, 매봉 뷰 맛집 메디치에 카페!!

이안_ian — Tue, 28 Mar 2023 19:23:12 +0900

안녕하세요!!

오늘은 회사 근처에 있던 뷰 맛집 카페를 소개 하려고 합니다.

매봉쪽에 양재천이 있는데 여기 가로수길을 따라서 여러 카페와 bar가 있는데

오늘은 그 중 나른한 오후에 들리면 좋을 카페를 소개해 보도록 하겠습니다.

제일 먼저 우릴 반겨주는 간판!!

미국 느낌도 나고 저는 갠적으로 시작부터 좋았네요

그리고 도보로 걷다보면 카페가 잘 안보여서..

이걸 찾는게 더 빠를것 같네요

폴딩문으로 되어 있는 정문입니다.

제가 갔을 땐 봄이라서 이렇게 활짝 열어두었지만

쌀쌀한 날에가면 닫아둘 것 같네요ㅠ

날 따듯할때 가세요!!!

내부에 장식된 케이크인데 케이크에 프린팅해서 주는거 같더라구요

기념일에 특별한 케이크 만들고 싶을때 와도 좋을것 같습니다ㅋㅋ

무릎담요까지 세심하게 챙겨주는 곳이네요~

메뉴는 단촐하게 있는듯해요

좌측에 있는 케이크 공간인데 비주얼이

한 개도 안시키곤 갈 수 없게 해놨더라구요ㅋㅋ

딸기 케이크가 시그니처인듯 합니다!

저는 시그니처 메뉴인 양재의 봄을 시켰는데

다른 곳이랑 특별히 다른건 없네요 ㅋㅋㅋ

시그니처라고 무조건 시킬 필욘 없습니당!

딸기케이크도 하나 시켰는데

요것도 무난무난하게 잘 먹었습니다ㅋㅋ

살짝 빠바에서 먹어본듯한 느낌도 나고?

제가 제목에 적어놨죠?

뷰 맛집입니다....

날 좋은날에 멍 때리고 오기 너무 좋았어요 ㅎㅎ

근처에 들릴일 있다면 커피 한 잔하러 오기 좋은 카페입니다!!

스크롤 맨 아래 감지 제이쿼리

이안_ian — Tue, 21 Feb 2023 09:58:16 +0900

무한 스크롤에서 사용되는, 스크롤이 맨 아래로 왔을 때 moreData를 호출하는 로직

$(document).ready(function(){
  //window는 "#searchPopup"등 으로 스크롤 주체로 변경가능
  $(window).scroll(function(){
    var scrollTop = $(this).scrollTop();
    var innerHeight = $(this).innerHeight();
    var scrollHeight = $(this).prop('scrollHeight');
    
    if(scrollTop + innerHeight >= scrollHeight) {
      moreData();
    }
  });
});

스크롤 주체가 어떤 영역인지 모를땐,

스크롤을 내리면서
$('#searchPopup').scrollTop(); 를 사용해보면
값이 변하는게 스크롤 주체다.

Spring JPA @Modifying - clearAutomatically

이안_ian — Sat, 29 Oct 2022 13:15:56 +0900

@Query

Spring Data JPA에서는 기본적으로 JpaRepository를 통해서 제공되는 findById 같은 메서드도 있고
메서드 네이밍만을 통해서 쿼리를 실행할 수 있도록 기능을 제공, 하지만 이 방법만으로 만들 수 없는 쿼리가 있다면 쿼리를
직접 작성해야하며 그 때 커스텀 Repository의 메서드에 붙이는 어노테이션이 @Query입니다.
기본적으로 JPQL로 작성할 수 있고, nativeQuery=true 옵션으로 네이티브 쿼리도 사용 가능합니다.

@Modifying

@Query로 작성된 변경, 삭제 쿼리 메서드를 사용할 때 필요합니다. 주로 벌크 연산 시 사용됩니다.
JPA Entity LifeCycle을 무시하고 쿼리가 실행되기 때문에 해당 어노테이션을 사용할 때는 영속성 콘텍스트 관리에
주의해야합니다. 앞으로 설명할 clearAutomatically를 통해 간단하게 해결할 수 있습니다.

벌크 연산

벌크 연산이란 다 건의 update, delete 연산을 하나의 쿼리로 하는것을 의미합니다.

clearAutomatically

이 옵션은 Modifying이 붙은 해당 쿼리 메서드 실행 직후, 역속성 컨텍스트를 clear할 것인지를 지정합니다.
디폴트는 false인데 디폴트로 사용할 경우 영속성 컨텍스트의 1차 캐시와 관련한 문제점이 발생할 수 있습니다.

문제점

JPA에서는 영속성 컨텍스트에 있는 1차 캐시를 통해 엔티티를 캐싱하고, DB의 접근횟수를 줄임으로써 성능 개선을 합니다.
1차 캐시는 @Id 값을 key값으로 엔티티를 관리합니다. 그래서 findById을 통해 엔티티를 조회 했을 시 @Id값이 1차
캐시에 존재한다면 DB에 접근하지않고, 캐싱된 엔티티를 반환합니다.
그렇다면, 벌크 연산을 통해 데이터 변경 쿼리를 실행하고(clearAutomatically = false), 해당 엔티티를 조회하면 어떤일이 발생할까?

예시)

"안녕하세요" 라는 값을 "안녕히계세요" 라고 업데이트 할 경우
DB에는 변경되었고 이후 조회 쿼리를 날려볼 경우 이전에 조회된 엔티티가 존재하여 DB에 새로 접근하지않고 1차 캐시에 있는 값을 불러오기 때문에
"안녕하세요" 값이 리턴될 것이다. 하지만 DB에서 직접 조회해본다면 "안녕히계세요"로 변경되어 있다.

이러한 경우를 방지하려면 clearAutomatically = true로 변경해주어야 한다.
그러면 조회 시 1차 캐시에 해당 엔티티가 존재하지 않기 때문에 DB조회 쿼리를 실행하게 됩니다.

출처 : https://devhyogeon.tistory.com/4

@Autowired의 기본 간단 정리

이안_ian — Thu, 4 Aug 2022 22:25:45 +0900

@Autowired란?

의존성을 주입 할 때 사용하는 어노테이션으로 의존 객체의 타입에 해당하는 bean을 찾아주는 역할을 한다.

사용 가능한 위치

생성자(스프링 4.3부터 생략 가능)
Setter
필드

생성자에 @Autowired (스프링 4.3부터 생략가능)

@Service
public class TestService {

    TestRepository testRepository;
    
    @Autowired
    public TestService(TestRepository testRepository) {
        this.testRepository = testRepository;
    }
}

public class TestRepository {
	....
}

위 코드에서 TestRepository의 의존성 주입이 작동할까?

당연히 작동하지 않는다. @Autowired는 의존 객체의 타입에 해당하는 bean을 찾아 주입하기 때문이다.

즉, TestRepository는 bean으로 등록되어 있지 않기 때문에 스프링이 bean을 찾기 못해 의존성을 주입할 수가 없다.

이를 작동하게 하기 위해서는 @Repository 또는 @Component 어노테이션을 이용해야한다.

@Repository
public class TestRepository {
	....
}

Setter에 @Autowired

@Service
public class TestService {

    TestRepository testRepository;
	
    @Autowired(required = false)
    public void setTestRepository(TestRepository testRepository) {
        this.testRepository = testRepository;
    }
}

필드에 @Autowired (해당하는 타입의 bean이 여러 개 일 때)

@Service
public class TestService {
	
    @Autowired
    TestRepository testRepository;
}

public interface TestRepository {
	....
}

@Repository
public class MyTestRepository implements TestRepository {
  // TestRepository의 구현체
}

@Repository
public class ExampleRepository implements TestRepository {
  // TestRepository의 구현체
}

이럴 경우 스프링은 개발자가 원하는 의존성을 알지 못하기에 bean을 2개 발견했다는 에러 메시지를 뱉는다.

이럴 때 해결법으로 @Primary 와 @Qulifier가 있다.

@Primary

같은 타입의 bean이 여러 개 주입될 경우 먼저 주입하겠다는 의미를 가진다.

public interface TestRepository {
	....
}

@Repository @Primary
public class MyTestRepository implements TestRepository {
  // TestRepository의 구현체
}

@Repository
public class ExampleRepository implements TestRepository {
  // TestRepository의 구현체
}

@Qulifier

주입받을 bean을 직접 선택한다.

@Service
public class TestService {
	
    @Autowired @Qulifier("myTestRepository")   // bean의 Id는 lower Camel Case를 사용한다.
    TestRepository testRepository;
}

추가 설명

Autowired는 기본적으로 의존성 주입이 반드시 성공한다고 가정한다. 그래서 주입할 타입에 해당하는 bean을 DI 컨테이너안에서 못찾는다면 NoSuchBeanDefinitionException 이라는 예외가 발생한다.

만약 이러한 필수 조건을 완화하고 싶다면 다음과 같이 @Autowired 애너테이션의 required 속성에 false를 설정하면 된다. 해당 타입의 빈을 찾지 못하더라도 예외가 발생하지 않고 의존성 주입은 실패했기 때문에 해당 필드의 값은 null이 된다.

컴포넌트 스캔

컴포넌트 스캔은 클래스 로더를 스캔하면서 특정 클래스를 찾은 다음, DI 컨테이너에 등록하는 방법을 말한다.

기본 설정으로 컴포넌트 스캔하기

@Component
@Controller
@Service
@Repository
@Configuration
@RestController
@ControllerAdvice
@ManagedBean
@Named

대표적인 스캔 대상 어노테이션

Annotation	설명
@Controller	클라이언트에서 오는 요청을 받고, 비즈니스 로직의 처리 결과를 응답으로 돌려보내는 기능을 한다. 이때 실제 비즈니스 로직은 @Service가 붙은 컴포넌트에서 처리하도록 위임한다.
@Service	컨트롤러에서 받은 입력 데이터를 활용해 비즈니스 로직을 실행하는 기능을 한다. 이때 영속적으로 보관해야 하는 데이터가 있다면 @Repository가 붙은 컴포넌트에서 처리하도록 위임한다.
@Repository	영속적인 데이터 처리를 수행하는 컴포넌트에 붙이는 애너테이션이다. ORM관련 라이브러리를 활용해 데이터의 CRUD를 처리하는 기능을 한다.
@Component	위의 세 경우에 해당하지 않는 컴포넌트에 붙이는 애너테이션

참고 : https://jjingho.tistory.com/6

SpringBoot에서 Swagger 설정하기(3.0 버전)

이안_ian — Sat, 30 Jul 2022 16:30:39 +0900

의존성 추가하기

implementation group: 'io.springfox', name: 'springfox-boot-starter', version: '3.0.0'

스웨거의 경우 springDoc라는 라이브러리가 1개 더 있고,

2.x 와 3.x 버전의 차이가 있다.

SwaggerConfig.java 추가

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import springfox.documentation.builders.ApiInfoBuilder;
import springfox.documentation.builders.PathSelectors;
import springfox.documentation.builders.RequestHandlerSelectors;
import springfox.documentation.service.ApiInfo;
import springfox.documentation.spi.DocumentationType;
import springfox.documentation.spring.web.plugins.Docket;
import springfox.documentation.swagger2.annotations.EnableSwagger2;


@Configuration  //스프링 실행시 설정파일 읽어드리기 위한 어노테이션
@EnableSwagger2
public class SwaggerConfig {

    @Bean
    public Docket api() {
        return new Docket(DocumentationType.SWAGGER_2)
                .select()
                .apis(RequestHandlerSelectors.any())
                .paths(PathSelectors.ant("/*/**"))
                .build();
    }
}

이렇게 설정 파일만 추가해주고 서버를 켜주면 된다.

그러나 필자는 이때 에러가 하나 발생하게 되었다.

Error starting ApplicationContext. 
To display the conditions report re-run your application with 'debug' enabled.

Failed to start bean 'documentationPluginsBootstrapper';
nested exception is java.lang.NullPointerException: 
Cannot invoke "org.springframework.web.servlet.mvc.condition.PatternsRequestCondition.getPatterns()" 
because "this.condition" is null

뭐 이런식의 에러였는데 application.properties에 한 줄 추가하고 해결했다.

# 스웨거 의존성 추가하고 서버가 안켜질 때
spring.mvc.pathmatch.matching-strategy = ant_path_matcher

결과 화면 : http://localhost:{my-port}/swagger-ui/

오.. 뭔가가 나온다. 하지만 대문짝 만한 Api Documentation이 맘에 들지 않는다..

SwaggerConfig를 수정해보자.

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import springfox.documentation.builders.ApiInfoBuilder;
import springfox.documentation.builders.PathSelectors;
import springfox.documentation.builders.RequestHandlerSelectors;
import springfox.documentation.service.ApiInfo;
import springfox.documentation.spi.DocumentationType;
import springfox.documentation.spring.web.plugins.Docket;
import springfox.documentation.swagger2.annotations.EnableSwagger2;


@Configuration  //스프링 실행시 설정파일 읽어드리기 위한 어노테이션
@EnableSwagger2
public class SwaggerConfig {

    @Bean
    public Docket api() {
        return new Docket(DocumentationType.SWAGGER_2)
        		.apiInfo(apiInfo())
                .select()
                .apis(RequestHandlerSelectors.any())
                .paths(PathSelectors.ant("/*/**"))
                .build();
    }
    
    public ApiInfo apiInfo(){
        return new ApiInfoBuilder()
                .title("게시글 API")
                .version("3.4")
                .description("추삭수가 가능한 게시글 api 입니다잇!!")
                .build();
    }
}

음.. 조금 낫군!

필자는 만들어둔 컨트롤러가 있기 때문에 위와 같이 정보가 조금 더 나오게 되었다.

그 말인 즉슨 이정도 셋팅으로 현재 구현된 controller의 정보를 읽어 편리하게 다 만들어준다는 사실이다!!

여러 컨셉이 공존하는 차이나타운 카페 앵커 1883

이안_ian — Mon, 18 Jul 2022 13:05:44 +0900

안녕하세요

오늘은 인천에 놀러간 뒤 우연히 발견한 카페를 소개할까 합니다.

가볍게 위치부터 올려드리겠습니다.

요즘같이 무더운 여름날 월미도를 갔다가 차이나 타운을 구경하니 너무 힘들었습니다.

그래서 개화거리에 일본식 목조 카페가 유명한 곳도 많았지만 구경만 살짝하고 집에 가려던 찰나!!

차이나타운 카페 앵커 1883을 발견했습니다.

입구쪽에 건담이랑 큰 돌이 눈에 띄고 안쪽으로도 굉장히

넓은 홀이 눈길을 끌게되었고 홀린듯 입장하게 되었어요

카페 시간 및 1~3층까지의 공간이 간단히 설명되어있네요!!

가장 중요한 메뉴판입니다.

깜빡하고 커피 사진을 못찍었는데 ㅠㅠ

사진이 없는 대신 맛을 좀 자세히 다뤄보겠습니다. 우선 처음 방문하는 곳이니 만큼

시그니처 메뉴를 물어봤는데 앵커라떼를 추천해주셨습니다.

이 커피는 일반 라떼 느낌에 커피소금을 넣어주셨습니다.

엥? 무슨 커피소금이지 싶은데 살짝 단맛이 나는 소금이 생각보다 커피랑 굉장히

잘 맞더라구요~ 달고나 커피처럼 유행만 잘 타면 커피소금이 또 붐이될지도 모르겠어요 ㅋㅋㅋ

생소하지만 생각보다 제 입맛엔 괜찮았습니다!! 소금맛 나는 커피 추천해요 ㅋㅋ

커피 외에도 다른 음료와 케이크들이 준비되어있습니다~

1층 전경인데 사진만봐도 상당히 넓은 홀인게 느껴지네요

한 쪽 구성에 저런 박물관같은 공간이 있어서 아주 인테리어적으로도 신경 썼다고 볼 수 있죠!!

화장실 입구에도 감각적인 그림을 빼놓을 수 없네요

2층 올라가는 2개의 길 중 1곳인데 카페 이름처럼 앵커(닻)으로 꾸며진 공간입니닷

아이들이 신나하며 구경하러 갈것 같네요 ㅋㅋ

2층에 이런 쇼파가 있는데 진짜 개편함ㅋㅋㅋㅋ1층과는 사뭇다른 공간이에요

좌석도 많고 좀더 친숙한 예술품(?)이 많더라구요 ㅋㅋ

저런 도자기들은 무슨 도자기일까.. 설명이라도 있음 좋을거 같네요

좀더 안쪽에 편한 좌석도 많이 있고 파란계단을 통해

루프탑으로 이동이 가능하네요 ㅎㅎ

루프탑엔 굉장히 넓은 공간이 나오게되며 파란색으로 칠해진 공간은

아마도 여름에 물을 채워서 시원하게 발담그고 즐길 수 있는 공간 같아요!!!

잔디 공간은 뒤쪽에 해먹도 있고 밖에 시원한 바람을 맞으며 즐기가 너무 좋네요

해먹은 처음 누워봤는데 생각보다 편해서 좋더라구요~

궁금증을 자아내는 분홍 보름달ㅋㅋㅋ밤에 오면 어떨지 궁금하네요!!

규모도 엄청 크고 제가 방문했을 당시 이제 일주일밖에 안된 가오픈시기라

사람들이 없고 한가했는데 곧 입소문 타면 굉장히 많이 올거 같아요

너무 몰리기전에 얼른 다녀오세요!!

쿼리스트링 데이터 넘길 때 값 짤리는 현상 encodeURIComponent

이안_ian — Tue, 19 Apr 2022 15:33:02 +0900

로그인이 필요한 서비스에 접근 시
비로그인일 경우 로그인 페이지로 이동이 될 것이다.

그리고 사용자 편의를 위해 로그인 후 이전 페이지로 돌아와 원래 하려던 작업을 할 수 있도록 소스 구현이 필요한데 아래와 같은 소스가 자주 사용된다.

location.href = "/login?returnUrl="+location.href;

이렇게 사용할 경우 손쉽게 처리가 가능하지만 한 가지 문제를 직면할 수 있다.

만약 location.href의 값이

 "/event/view?mbrId=abc&addr=korea&gender=M"

위와같이 되어 있고 위 정보들이 모두 필요하다면 서버에서 returnUrl은 mbrId=abc까지만 받아지고 그 뒤에 주소와 성별은 짤리게 되는 현상이다.

이는 뒤의 값을 다른 파라미터로 인식하여 생기는 것이므로 하나의 변수안에 &를 포함한 값을 넣고 싶다면 아래와 같이 변환하는 과정이 필요하다.

let url = location.href;
location.href = "/login?returnUrl="+encodeURIComponent(url);

Mybatis 대용량 조회 시 성능향상, fetchSize

이안_ian — Fri, 25 Mar 2022 11:01:37 +0900

mybatis로 DB조회하는 환경에서 업무성격에 따라 대용량을 조회하는 경우 수십초가 걸리는 경우가 있습니다.

이때 같은 쿼리를 툴에서 돌려보면 1초 정도로 아주 빠르게 조회되는 경우가 있는데 어떻게 해결할 수 있을까요?

바로 코드부터 보게된다면 아래와 같습니다.

<select id="selectBorad" resultType="map" featchSize="1000">
  select * 
  from board
</select>

fetchSize는 보통 설정하지 않는 옵션인데 그렇게 될 경우
기본값은 10 입니다.

즉, 조회할 데이터가 1000개라면 100번을 조회하게 됩니다. 하지만 1000으로 설정할 경우 1번만 조회하게 되는것이지요.

어떤 사용자가 성능테스트를 한적이 있는데 109k의 데이터를 조회하는데 1분 40초가 소요 되었지만 fetchSize를 설정하면 아래와 같이 소요되었다고 합니다.

fetchSize=75 -> 15초
fetchSize=500 -> 4초
fetchSize=1000 -> 2.8초

출처
https://m.blog.naver.com/yjhyjh5369/221913532417

제이쿼리 붙여넣기 이벤트 감지하기

이안_ian — Tue, 22 Mar 2022 11:01:30 +0900

앱에서 <textarea>에 붙여넣기 시 텍스트 카운트가 안되는 현상이 있습니다.

이와 같은 이유로는 보통 PC환경에서는 keyup이나 blur 이벤트로 실시간 텍스트 카운트 처리를 하게 되는데 모바일 환경에서도 같은 소스를 적용시키기 때문입니다.

keyup이기때문에 아무래도 모바일의 키패드가 나와서 눌러줘야 keyup이벤트가 발생하는것으로 보이며 이와 관련해서는 다른 처리가 필요합니다.

그것은 keyup 이벤트를 미리 구현해 놓고 bind 함수를 통해서 keyup 이벤트를 트리거하여 처리가 가능합니다.

$("#inputTextarea").on('keyup', function(e) {
  e.preventDefault();
  var content = $(this).val();
  $(".inputWrap .count").text(content.length + '/300');
  
  if(content.length > 300){
    $(this).val(content.substring(0, 300));
  }
});

여기까지는 keyup 이벤트를 활용해서 카운트 처리!

$("#inputTextarea").bind('paste', function() {
  $(this).trigger('keyup');
});

이렇게 사용할 수 있으며 잘 안될 경우에는 아래와 같은 코드도 같이 사용하면 좋을것 같습니다.

$("#inputTextarea").bind('paste', function(e) {
  var el = $(this);
  
  setTimeout(function(){
    var textCnt = el.val();
    alert(text);
  },100);
});

출처
https://blog.naver.com/PostView.nhn?isHttpsRedirect=true&blogId=vucket&logNo=220981510761

https://haandol.wordpress.com/2013/08/23/jquery%EB%A1%9C-ctrlv-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EC%9E%A1%EC%95%84%EB%82%B4%EA%B8%B0/

[위례 카페 / 서일로 카페거리] 남위례 카페 33-3

이안_ian — Tue, 1 Mar 2022 12:10:15 +0900

안녕하세요

오늘은 오랜만에 괜찮은 카페를 소개해 드릴까 합니다.

위례가 신도시로 크게 각광받고 있는데 이것저것 참 많이 들어오고

사람도 굉장히 많아졌는데 이쁜카페는 잘 없고 상가 안에 커피만 파는 그런곳만 있더라구요

그러다가 서일로 카페거리라는 곳이 있어서 구경 하던중에 마음에 드는 카페가 있어서 소개합니다.

정문 입구입니다.

골목에 위치한 곳인데 아무생각없이 지나면 카페인지 모르고

그냥 지나치게 생겼네요 ㅋㅋ 입간판이나 그와 비슷하게 있음 더 좋을거 같네요

시간대는 거의 온종일 하고 있으며 음료뿐만 아니라

음식도 같이 팔고 있어서 브런치 카페로도 사용가능 한것 같네요

프론트 및 메뉴판

카페가 이쁘긴한데 커피값은 만만치 않더라구요..

케익도 여러 종류로 있어서 좋네요

카운터 옆에 이런게 있길래 궁금해서 가봤는데요

딱 사진처럼의 공간만 있고 지하에 따로 마련된 곳이라서

소모임 할 경우에 대관해서 쓰면 아주 좋을것 같더라구요

저희는 아아랑 솔트크림라떼 시켰습니다.

커피는 뭐 무난무난

커피솔트는 빨대를 쓰지말고 커피가 넘어올 때 까지 쭉 들이키는게 좋더라구요

테이블에 있던 메뉴판입니다.

브런치 느낌으로 파는 메뉴들인데 맛이 궁금하네요

내부 사진입니다.

주문하고 이렇게 반층 올라가야 좌석들이 나옵니다.

사진에서 오른쪽으로 더 들어가면 진짜 좋은 자리 나오는데

사람들이 안빠져서 내부는 못찍었네요 노트북들고 가거나 책보기에 너무 좋은

좌석입니다.

그리고 이 카페 감동 포인트가 있었는데

사진 보시면 이런 테이블 좌석엔 콘센트가 없기 마련인데 사진보시면

각 자리마다 어떻게든 만들어주셨어요ㅠㅠ 진짜 이건 너무 최고

앞자리에도 다 있고 다른 좌석들도 앵간하면 근처에 있었습니다.

이렇게 콘센트를 마련해주셨는데 서비스가 거기서 그치지않고

충전기와 삼각대까지 대여해주시는것 같았습니다.

저희는 충전기를 고맙게 잘 빌려썼어요!

이쪽은 후문인데 뒤로 나와보니 주차공간도 있는거 같아서

차타고 오기에도 좋은것 같네요 대신 주차하고 오래 있으면 차빼달라는 요청이

자주 있을 수 있겠네요 ㅋㅋㅋ

위례에 아직 이쁜카페를 못찾았는데..

드디어 하나 찾았네요 ㅋㅋㅋ아주 맘에듭니다.

하지만 커피 가격이 좀 비싸서 자주오긴 힘들어도 가끔 놀러가고 싶을때 여기오면

좋을거 같네요~ 추천합니당

제주도 말차 맛집!! 애월 맛차

이안_ian — Fri, 21 Jan 2022 20:56:04 +0900

안녕하세요
오늘은 일전에 다녀왔던 제주도 여행에서 찾은 말차 맛집을 소개 하려고 합니다.
말차 맛집인 이유는 아무래도 카페 바로 앞에 직접 키우는 녹차잎을 뜯어서
음료로 만들어주니까 더욱 특별하더라구요 ㅋㅋㅋ
사진 보면서 하나씩 보겠습니다~

입구

여기는 작은 카페고 소규모로 운영되고 있어서 이렇게 신발 벗고 들어갑니다.
슬리퍼도 넉넉하게 준비되어 있구요!

녹차 관련 엄청난 상장들... 이거보고
"여기가 뭔데 이런 상장이 이렇게 많아?"
이런생각이 들더라구요 ㅋㅋㅋ

보통은 아래의 세트 메뉴를 추천해주시는데.. 같이 이야기 해주시는게
말차라는게 원래는 굉장히 씁쓸한 맛이기 때문에 처음드시는 분은 남기고 가기때문에
원래 맛을 아시는분 아니면 추천하진 않는다고 해서 저는 모험하지않고 안전하게
말차라떼 시켰습니다 ^^
그리고 베스트 메뉴인 한라봉 허니블랙티랑 크로플도 같이 주문했구요

카페안에서 바라볼 수 있는 녹차밭..
보통 이런건 넓은 개활지? 같은곳에 있기 마련인데 여기는 좀 프라이빗하게 꾸며진 곳으로
이쪽 카페안으로 들어와야 볼 수가 있더라구요 나만의 녹차밭? 같은 느낌이라 더 좋았어요 ㅋㅋ

저희 메뉴입니다.
이 사진만 보면 평범하게 메뉴가 나온거 같지만..
일단 쟁반같은 더 받침대가 무게감이 있는데 손잡이도 쇠로 아주 안정적인게 고급지고
말차라떼에는 나무 티스푼과 한라봉 허니블랙티는 스테인 빨대를 주셨는데
주인분의 섬세함이 느껴졌습니다.. 프랜차이즈 카페의 플라스틱컵과 빨대만 사용하다 이렇게 주니까
정말 제대로 된 카페에 온 기분이였습니다. 포크랑 나이프도 길고 묵직한게 사용하기에 너무 좋고
아무튼 오랜만에 카페 제대로 하는 곳에 온 기분이였습니다.

아래의 빙수는 결국 사장님께 영업 당해버렸습니다..
녹차밭에 대해 물어보던중에 이것저것 대화를 했는데요 그때 사장님이
아무래도 여기는 녹차잎이 풍부하기 때문에 빙수 만들때 파우더를 안쓰고 녹차를 그만큼 더 사용한다.
그래서 더 맛있다고해서 너무 궁금해 마지막날 한 번더 들렸다.
말차빙수는 여기서 처음먹기 때문에 다른곳과의 차이는 모르겠지만 굉장히 맛있게 먹었다~
추천합니다 ㅎㅎ

송리단길 카페 마운틴 누크 [숲속+제주도 감성 ]

이안_ian — Sat, 1 Jan 2022 18:14:50 +0900

안녕하세요
오늘은 새해를 맞아 친구와 같이 점심을 먹고 송리단길에 아주 핫 하다는
마운틴 누크를 다녀왔습니다.
송리단 길에는 아주 이쁜 카페들이 즐비하지만 보통
루프탑+롯데월드 타워의 조합인 곳이 많았죠
살짝 식상하다고 느낄 찰나에 그런거 없이 내부자체만으로도
충분히 이쁜 카페가 드디어 생겼습니다!!

같이 구경하러 가시죠~

영업시간은
10:00 ~ 22:00

2~3층 규모의 큰 카페인 마운틴 누크는
2층에서 주문하시면 됩니다.
여기도 상당히 크기 때문에 사진 한 장으로 다 찍긴 어렵고..
하나씩 설명해야될 것 같습니다 ㅋㅋㅋ

무려 맥으로 메뉴판을 사용하는 곳이네요.. ㄷㄷ
핫한 장소다보니 가격이 착할순 없네요 ㅎㅎ;;
일단 저는 간단하게 아아 마셨고 다음에 또 올땐 시그니처 마셔볼 생각입니다.
아아도 원두를 선택 가능한데 No.7이 무난하고 괜찮네요

베이커리랑 맥주도 있네요
사실 빵 종류가 좀더 있는데 찍질 못했네요 ㅠㅠ
브라우니, 레몬 파운드, 얼그레이 파운드 케이크등등 5천원 정도의 금액으로 판매중이니
디저트 맛집으로 오셔도 좋을것 같습니다.

방명록처럼 사진 찍을 수 있는 공간이 있네요
여기 카페가 오랫동안 유지되서 이 공간이 나중에 더 의미있는 곳이 되었으면..

이걸 무료로 해주시는 사장님...
천사네요!!

주문하고 뒤돌면 있는 나무들 처음에 큰 나무인줄 알았는데..
기둥에 그냥 나무가 여럿 붙어 있구나ㅋㅋ

2명이서 앉을 수 있는 공간인데
살짝 프라이빗 해서 좋네요

다음은 3층 공간입니다.
한 겨울에 갔는데도 이 조화들 덕에 따뜻한
여름에 온것 같은 착각이 들어서 너무 좋았습니다.
중간중간 돌담길에 쓰이는 돌들은 제주도를 연상케 하구요

천장 좀 보세요...

사진이라 어떻게 보일지 모르겠는데 진짜 수목원에

들어와 있는 느낌이 많이 나서 좋았어요!!

아마 이 공간이 이 카페의 메인 장소가 아닐까 싶네요

야외 테라스가 너무 이쁘게 잘 꾸며져 있고

펜스까지 잘 쳐져 있어서 주변 집에 눈치 안보고 놀 수 있을 것 같네요

지금은 겨울이라 아무도 없지만 날 풀리면 사람 가득하겠네요ㅋㅋ

오랜만에 서울에서 잘 꾸며진 카페를 다녀온것 같네요

송리단길에 맛집도 많으니까 식사 하시고 커피 한 잔 하러 오시는걸 추천합니다.

앞에 석촌호수도 있으니 좋네요~~

매봉역 수제버거 맛집!! 원스타 올드패션드 햄버거

이안_ian — Fri, 31 Dec 2021 18:06:05 +0900

안녕하세요

오늘은 21년도 마지막 런치...

그 대미를 장식하고자 매봉역 근처에 맛집을 다녀왔습니다.

평소에 웨이팅이 많아서 먹기 힘든 곳이였는데 연말에 휴가 쓴 사람들이 많아서 인지

다행히 오늘은 웨이팅 없이 바로 다녀왔네요 ㅋㅋㅋ

리뷰 시작합니당!!

골목길에 위치한 가게인데

약간 아웃백이 떠오르는 디자인을 하고 있네요? ㅋㅋㅋ

원래 가게 이름이 상당히 긴데 다 짜르고

햄붜걸스~~

라고만 되어 있네요 ㅋㅋㅋ

운영시간 입니다.

일요일 빼고 11시30분 ~ 8시20분? 이네요ㅋㅋㅋ

중간 브레이크 타임도 조심하세욧

메뉴판이 조금 특이합니다.

영화 팜플렛처럼 생겼더라구요

제일 첫장입니다.

처음에 이거보고 어떤게 시그니처 메뉴인지 좀 헷갈리더라구요

순서대로 A가 시그니처인가 가게 이름이 들어간 B냐 간지나게 줄임말쓴 C냐......

결국 시그니처가 뭔지 모르겠고 저랑 일행은 B,C 이렇게 주문 했습니다.

달랑 햄버거만 먹을 순 없으니 감튀도 하나 주문했습니다.

어니언링도 먹을까 했는데 저게 왜 햄버거보다 비싼지 의문을 갖고 포기했어요..

맥주도 많고 했는데..

그냥 제코 시켰습니당.

제가 먹었던 자리랑 내부를 아주 살짝 찍어봤는데 굉장히 깔끔하게 되어 있습니다.

미국의 모던한 햄버거 느낌도 나고 ㅋㅋㅋ

메뉴판도 죄다 영어고... 컨셉 확실하게 잡고 가는 가게인듯 하네요

햄버거랑 감튀는 이렇게 나오구요

이게 제가 시킨 B 버거 입니다.

역시 수제버거 답게 두툼한 패티와 당장이라도 흘러넘칠것 같은 육즙!!!!!!

야채도 꽤나 오밀조밀하게 잘 들어가 있는것 같습니다.

너무너무 존맛탱이고 안에 야채들과의 조화도 너무 좋아서

굉장히 아삭한 느낌도 나고 암튼 새콤 달콤하네요

다음은 C 버거입니다.

두꺼운 패티와 양상추 치즈 베이컨 등등 기본적인 맛있는 햄버거네요~

하지만 제꺼보다 딱봐도 내용이 부실하네요

B랑은 500원 차이니까 B드세요!!!

블루투스 기계식 키보드!!! 키크론 K8 Retro

이안_ian — Thu, 30 Dec 2021 17:54:43 +0900

안녕하세요!!
오늘은 따근따근한 신제품을 소개하려고 합니다.
키크론에서 새롭게 런칭한 K8 레트로입니다.

우선 키보드를 사게된 이유는
회사가 보안에 민감하여 컴톡을 설치하지 못해 카톡을 할 때면 눈치봐가며 해야했습니다.
그러다보니 블루투스 키보드를 연결하여 사용하면 좋을것 같다는 생각이 들었고
기계식으로 된 키보드를 찾고 있었습니다.

토체티 같은 좋은 제품도 있었지만!!!
찾다보니 새로 런칭하는 k8 레트로를 알게되었고
살짝 흔한 토체티가 아니면서도 가격적인 매리트가 더 좋은
k8 레트로를 구매하게되었습니다.

상세한 부분은 리뷰 사이사이 더 풀어보겠습니다~
시작

박스에만 덜렁 담겨서 오는 경우가 많은데
살짝 고급 비닐로 감싸서 온게 저는 기분 좋드라구요 비닐도 삭~ 뜯어지고 ㅎㅎ

위 박스의 반대편인데 여기에 이 키보드의 장점이 간략하게 정리되어 있네요!!

처음 열었을 때 모습입니다.
window 유저를 위한 교환 키캡과 키캡 리무버가 같이 들어있네요
잘 안보이지만 케이블 to C타입 선도 동봉되어 있습니다.

제일 먼저 할게 블루투스 연결이랑 window/mac/linux 설정관련 가이드 일텐데
이렇게 따로 한 눈에 보기 쉽게 만들어준 건 좋았습니다.
다른 설명서는 굳이 안봐도 될 정도로 핵심 간단 요약 이였습니다 ㅋㅋㅋ

자 이제 드디어 본품 등장합니다!!!!

이렇게 좌측에 토글 버튼이 있습니다.
세번째 버튼이 bt/off/cable 순인데 어차피 off는 필요없을텐데 왜 굳이 가운데
저렇게 만들어놨을까... 오히려 딸칵 하고 한번에 이동했으면 편했을텐데 케이블에서 블루투스로 가려고
드드륵 해야되서 조금 불편하다고 생각했습니다.

아래 두 사진은 알루미늄 프레임을 중점으로 찍은 부분 입니다.
사진으로는 그 느낌이 좀 안나는데 실제로 보면 이 프레임덕에 굉장히 고급스러운 느낌이 듭니다.
가격이 저렴한데 이 프레임 덕에 20만원은 할것 같은 느낌을 줘서 참 만족스럽더라구요
하지만 크게 특별한것은 아니고 기존의 플라스틱으로 된 재질에
알루미늄을 감싼것이라 보면 될것 같네요

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

블루투스 키보드니까 제일 먼저 연결이 어떤지 봐야겠죠?!?!
저는 간략하게 케이블과 휴대폰 연결만 보겠습니다.
처음 케이블로 메모장에 잘 작성되다 좌측버튼으로 블루투스 모드를 켰습니다.

전환하고 페어링된 핸드폰을 찾는데 2~3초 가량 걸리고
바로 핸드폰 메모장에 글씨가 작성되는 모습입니다.
그리고 다시 케이블로 넘어올땐 지연없이 바로 넘어 오는 모습이 확인되네요!!!

연결 상태나 속도면에서는 아주 빠릿하고 좋은것 같네요 본연의 기능은 확실한듯 합니다.

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

다음은 타건 영상입니다.
저는 적축을 구매했는데요 이전에 쓰던 키보드가 저소음적축이라 그런지
소음이 꽤 시끄럽게 들렸습니다... 소음을 위한 후처리가 필요해 보이네요
하지만 키보드가 생각지도 못하게 되게 쫀쫀해서 타건느낌이 굉장히 좋더라구요 이 느낌 그대로
소음까지 잡아줬더라면 진짜 100점 만점 줄 수 있는 키보드 였을텐데
이 부분이 조금 아쉽네요..

하지만 원래 적축이 소음이 없는 축은 아니니까 오해 안하셨슴 좋겠습니다.
~~저적이 사기지..~~

총평

고민 대상이였던 토체티는 비슷 기능으로 20만원에 가까운 금액이였다.
하지만 K8은 10만원 아래의 엄청난 가성비로 1월 초까지 2만원을 더 할인해준다.
가격에서 압승이다.

저적이 아니라서 소음이 시끄럽기 때문에
저적 옵션이 있는 토체티를 구매하는 것도 좋을것 같다.
하지만 적축이여도 괜찮거나 다른 방법으로 소음을 잡아낼 수 있다면
굳이 토체티를 써야하나 싶었다.

타건감은 쫀쫀한 느낌이 굉장히 좋았다.

블루투스 연결은 빠릿하고 좋다.

알루미늄 프레임이 고급짐을 선사해준다.

부산 서면 맛집 나랑히요

이안_ian — Sun, 12 Dec 2021 22:28:50 +0900

안녕하세요
오늘은 서면에 양식 맛집으로 유명한 나랑히요를 다녀왔습니다.
오픈키친으로 구성되어 있으며 작은 골목에 테이블 5~6개 정도 되어 있는
작은 식당이며 부산에서 나름 유명한 곳인것 같더라구요.
근데 상당히 골목에 위치해 있고 골목 들어가는 길에 있는 곳이라 간판도 잘 안보입니다.
지도와 함께 후기 시작해볼게요~

유일하게 나랑히요임을 알려주는 사이드간판입니다.
처음에 도착하고나서도 여기가 맞나.. 간판은 어디있지?
뭔가 양식인거 같고 사람도 많으니 맞는거 같긴한데.... 하다가 찾은 간판입니다 ㅋㅋㅋㅋ

저희가 도착했을 땐 앞에 1팀정도 있는 가벼운 웨이팅이 있어서
기다리는 동안 직원분이 먼저 메뉴 고르라고 메뉴판을 주셔서 고르게 되었습니다.

타코라이스, 먹물파스타, 채끝스테이크

이렇게 3가지 메뉴와 샹그리아 2잔 시켰습니다.
자세한 메뉴 설명은 아래 사진과 함께 하도록 하겠습니다.

깔끔하게 수저가 포장되어 그릇과 함께 올려진 모습은 좋네요

제일 먼저 나온 타코 라이스입니다.
처음에는 나쵸에 사진의 재료들은 올려서 먹는줄 알았는데
볶음밥처럼 아래 밥이 그렇게 깔려 있더라구요ㅋㅋㅋ
맛은 개인적으로 걸쭉함이 없는 마파두부와 비슷한것 같았네요
맛있게 잘 먹었습니다.

다른 블로그에서도 칭찬이 자자했던
시그니처라고 불리는 먹물 파스타입니다.
어떤 면을 썼는지 모르겠는데 특이한 면이긴 했어요 일반적으로 쓰는 파스타면은 아니였고
그 때문에 좀 신선한 맛이였어요 면이 좀더 쫀쫀한 느낌이였는데 얘도 추천합니다!!

스테이크는 흔히 아는 일반적인 비주얼이고
같은 가격이면 일반 레스토랑은 진짜 소똥만한 크기 하나주는데 여긴 양으로는 정말 혜자네요
두명이라 그런지 나이프 2개를 주셨는데 다 썰려나오니까 그냥 드셔도 좋을거 같아요
같이 나온 하얀건 포테이토인데, 나온 음식 다 쌈싸먹듯이해서 먹으면 맛있어요!!!!!

그리고 마지막으로 저희가 시킨 샹그리아 레드&화이트입니다.
이건 안시키는게 좋을것 같아요
한 잔에 9천원인데 솔직히 이거 2잔에 2만원을 태운다?
좀 아까운거 같아요 위 음식 3개랑 이거까지해서 8만원 나왔는데
양도 적은 이 와인을 안 시켰으면 6만원대로 나름 만족했을 거 같은데 살짝 가격이 미스난 요인으로 생각됩니다.
성인 남자 기준으로 3모금 정도 마시면 없어질거 같네요

풀을 싫어하는 우리는 초록색만 빼고 ㅎㅎ
클리어.

매봉역 쌀국수, 차돌된찌 맛집 차돌49

이안_ian — Fri, 10 Dec 2021 07:49:59 +0900

안녕하세요
오늘은 매봉역 근처에 위치한 식당을 하나 소개하려고 합니다.
딱봐도 차돌이 메인인거 같은 간판이지만 메뉴는 다소 그렇지 못하네요 ㅋㅋㅋㅋ점심에만 그런건지는 몰라도 이것저것 팔고 있는 곳 입니다.

그래도 밖에서 보면 늘 사람들로 꽉차 있던 곳이라서 궁금했는데 요번에 점심 먹고 왔습니다.

외관은 뭔가 눈에 딱 띄게 생겼지만 막상 가보면 골목길에 있어서 무심코 지나치기 좋은 위치더라구요..
주변을 잘 살피고 다니시는게 좋을듯 합니다

점심메뉴는 이렇게 판매하는데 저는 쌀국수랑 차돌 된장찌게를 먹고 왔습니다!!!!
쌀국수는 포메인 같은 유명 체인점과 크게 다르지 않았고 라지로 시키면 양 정말 넉넉히 주시더라구요.. 남자분들은 이거로 추천!! 차돌 된찌는 역시 고기가 들어가서인지 너무너무 맛나요.... 이게 좀더 시그니처에 가까운듯 합니다 ㅋㅋㅋ

쌀국수는 딱 이렇게 나오구요 라지인데 아직 숙주로 덮어져서 많은게 잘 안느껴 지는것 같네요 ㅋㅋㅋㅋ

안에 들춰보면 엄청난 양의 면과 숙주가 가득 합니다 ㅋㅋ

비주얼부터 미친 차돌 된찌입니다...

밑반찬도 저렇게 이것저것 소분해서 주시고 먹을게 참 많아요

계란은 날계란인데 즉석으로 깨서 먹으라고 주시네요 ㅋㅋㅋ
저는 이 메뉴 강추합니다!!!!!

먹다보면서 발견한건데 와인잔이랑 고기 환풍구가 있더라구요 아마 저녁에는 차돌을 주력으로 파는 술집인가봐요 점심을 맛있게 먹어서 그런지 나중에 기회되면 저녁으로도 와보고 싶네요~

오션뷰 숙소 네르하21 펜션

이안_ian — Mon, 6 Dec 2021 22:29:41 +0900

안녕하세요

제가 다녀온 역대급 펜션을 소개하러왔습니다.

이번 통영 여행중 하루를 통으로 네르하에서 계속 지냈는데요

일단 카페가 너무 이뻐서 쨍한 하늘, 노을, 야경 이렇게 싹다 보고싶었습니다.

근데 또 여기서 펜션을 같이 운영하는데 여기도 너무 좋아보여서 같이 예약을 하게 되었는데요

해변앞 숙소라 그런지 여기도 너무너무 좋았습니다.

카페에 대한 이야기는 아래 링크로 남겨두겠으니 여기선 숙소에 대해 상세히 다뤄보겠습니다!

https://smujihoon.tistory.com/262

뷰 맛집 통영 카페 네르하21

안녕하세요. 이번에 통영에 갔을 때 정말 소개하고픈 인생 카페가 있어서 열심히 사진 찍어봤습니다. 서울 사람인 저는 바다 보는걸 좋아하는데 이번에 그런 오션뷰 카페를 알아보다 정말 가기

smujihoon.tistory.com

밤이 어둑어둑해지고 야경까지 카페에서 즐기다 배가고파 숙소로 들어가게되었습니다.

체크인하러 가는 정문? 같은 길인데 풍경이 그냥 미쳐서 찍게 되었는데

역시 사진으로는 안담기네요 ㅠㅠ

일단 체크인은 이 길로 나가고 왼쪽으로 가셔서 운영동에서 하시면 됩니다.

수영장 있는 펜션인데 보시는게 성인용 풀장입니다.

이것만 얼핏 보기엔 목욕탕에 냉탕과 흡사하네요 ㅋㅋㅋㅋ

저희는 11월에 갔는데 너무 추워서 수영은 당연히 못하는데 그래도 물은 틀어주더라구요

물은 냉수니까 냉수마찰 할거 아님 들어가심 안되고 10월까지는 수영장으로 운영하는것 같습니다.

여기는 유아용인데 훨씬 크고 넓어서 보통 여기서 많이 놀겠네요

모래가 없는데 이런게 왜 있는지는 모르겠네요..

숙소 코앞에 있습니다.

한 겨울에 냉수 마찰했다간 숙소 사람들이 전부 쳐다볼듯..

숙소에서 바라본 바다인데

여기 위치 자체가 외진 곳인데 앞에도 아무것도 없고하니까

정말 조용하고 바다는 이쁘고 좋네요 진짜....

사진에는 안담겼는데 통영 중앙시장에서 전복이 만원에 6~7마리 주니까

꼭 사셔서 구이해먹으세요!!!

갑오징어도 1마리당 만원정도 하는거 같은데 너무 맛있고 싱싱해서 좋았습니다ㅠ

장보는 건 이마트가 있으니 거기서 필요한거 사시면 되구요!!

숙소는 아마 모두 복층으로 되어 있는듯 하구요

저희방 컨셉은 공사장인가 봅니다..

2층에는 작은 공간과 욕조가 있었는데 나쁘지않네요

자고 일어나서 밖에 봤는데 날씨가 진짜 미쳤어요....

바로 라면 끓여다 밖에 앉아서 먹는데 추위도 잊고 넋 놓고 바라보다 라면 다 퉁퉁 불어버렸네요 ㅎㅎ;

저녁바다, 아침바다가 미쳐가지고 이거 하나 때문에라도 여기 진짜 강추합니다.

제가 가본 오션뷰 숙소중에 최고였던거 같아요

다만 겨울이라서 수영장이 있음에도 즐기지 못한건 꽤나 아쉽더라구요ㅠㅠ

아침에 일어나보니

수영장은 더 이쁘네요

완전 파란 하늘에서 본 네르하 카페

도보 30초 거리라서 아쉬운 마음에 입구샷 하나더 찍어봤네요 ㅋㅋ

하루 꼬박 놀다갔는데 '통영까지와서 이렇게 놀아도 되나~?' 싶은 생각이 들수도 있는데

진짜 대만족하고 갑니다.

카페랑 펜션 같이하면 진짜 너무좋은데 좀 가격적으로 부담스러울 수 있으니

그런분들은 카페라도 가보시는거 추천합니다.

카페링크 한번더 공유 ㅎ

https://smujihoon.tistory.com/262

강릉 수제버거, 초당버거 (동화가든 웨이팅이 너무 길다면..?)

이안_ian — Sun, 5 Dec 2021 18:47:47 +0900

안녕하세요
오늘은 간만에 강릉으로 여행을 다녀왔습니다.
강릉으로 제일 유명한 초당 순두부를 먹기위해 아침부터 기차타고 열심히 갔는데
점심시간에 동화가든은 사람이 정말 너무 많았습니다..
일단 배도 너무 고픈데ㅠㅠ
안고파도 기다리기 겁나는 엄청난 웨이팅 때문에 기다렸다 먹어볼까? 라는 생각 조차안하게 되었습니다.
그리고 이렇게 오래 기다려서 엄청난 맛을 느낄 수 있으리라고도 생각하지 않기 때문에
급하게 다른 밥집을 알아보았습니다.
근데 이미 택시타고 온거라 다시 다른곳으로 택시타고 가기엔
조금 부담이 되어서 근처로 알아보다 같은 초당집인

초당버거를 오게 되었습니다.
위치는 동화가든에서 1분 거리!!!!

카페앞에 이렇게 이정표가 있습니다.

제가 갔을 때가 토요일 점심시간이였는데 웨이팅은 없었어요
하지만 이렇게 대기선도 있고 중간중간 웨이팅 의자도 있는거 봐선 평소에는 줄서서 먹는 집인가보네요
오늘은 왜 적었지.. 운이 좋았나?ㅋㅋㅋ

내부의 좌석이 다소 협소한 편이라 위 사진과 더불어 이렇게 야외에 좌석들이 더 있습니다.
하지만 오늘은 춥고 안에 자리도 많아서 실내에서 식사했습니다 ㅋㅋ
여름에는 밖에서 먹어도 좋을것 같네요

내부에 버거번이 저렇게 쌓아져 있어서 햄덕으로써 느낌은 좋네요!!
내부에는 그냥 길다락 좌석이 대여섯개 정도 있는듯 했습니다.

메뉴는 여느 수제버거와 비슷한것 같습니다.
저희는 초당타노스버거로 통일해서 주문했고 버거만 나오기 때문에
감자튀김 2종류 4개, 음료 하나씩해서
대략 두당 1.9 정도 지출해서 세트 느낌으로 먹었습니다.

위에가 웨지감자 갈릭치즈
아래가 웨지감자 체다치즈입니다.
갠적으로 체다가 더 맛있었습니다. 참고하세요

타노스버거 답게 칼로리 파괴네요..
버거맛은 아주 일품이였습니다.
그러나 살짝 헤비해서 느끼한 감이 있지만 고기맛이 진해서
저같은 육식파는 맛있게 먹을 수 있었네요 ㅎㅎㅎ

사이사이 양파도 있고 사이드로 샐러드도 있어서 그래도 뭐 느끼함을 최대한 잡으려고
노력한 흔적이 보이는듯 합니다 ㅋㅋㅋ

동화가든 갔는데 줄이 너무 길어서 딴 메뉴를 찾는다면 바로 옆에 있기도 하고
맛도 있어서 좋은 대안인 것 같습니다.
같이 갔던 지인들도 전부 맛있다고 칭찬을 했으니 버거를 싫어하지 않는다면 누구나
다 좋아할 것 같습니다.

뷰 맛집 통영 카페 네르하21

이안_ian — Fri, 3 Dec 2021 00:36:58 +0900

안녕하세요.

이번에 통영에 갔을 때 정말 소개하고픈 인생 카페가 있어서 열심히 사진 찍어봤습니다.

서울 사람인 저는 바다 보는걸 좋아하는데 이번에 그런 오션뷰 카페를 알아보다 정말

가기전부터 여긴 역대급일 것 같다는 카페를 찾았습니다.

블로그들을 보다보니 맑고 쨍한 하늘, 노을, 밤에 야경 이렇게 여러 상황의 모습을 보고싶었지만

전부다 보긴 어려울것 같아 노을+야경 위주로 담아봤습니다.

가시기 전에 도움이 되었으면 좋겠네요!!!!

먼저 위치는 통영에서도 굉장히 외진 곳에 존재합니다.

네이버 길찾기로 대중교통을 검색해보면 버스가 있다고는 하는데 보니까

하루에 4번 운행하는 버스고 이마저도 언제올지 기약이 없기 때문에 차를 이용하세요

저희는 택시를 타고 갔으며 터미널에서 12,000원 정도 나옵니다.

노을쯤에 도착한 네르하 입구!!

아직은 빛나지 않는 네온사인이 저희를 반겨주네요 ㅎㅎ

쉬는날 없이 매일 오픈하네요..

10:00 ~ 22:00

보통 해변근처 카페들은 맛이 없기로 유명한데

여기는 벌써 빵들이 박살났네요 ㅋㅋㅋ

일찍 가는 분들은 디저트 하나 주문하는것도 좋을거 같습니다.

메뉴는 당연하게도 1인 1음료 입니다.

역시 가격은 살벌합니다...

그래도 여기까지와서 아아 마시기엔 좀 아쉬워서 시그니처 메뉴를 먹어보자하여

수월슈페너와 무알콜 모히토를 주문했습니다.

제일먼저 옥상을 올라가봤습니다.

좌석 구비도 잘되어 있고 안그래도 절벽위에 있는곳에서

3층정도의 높이를 놀라가니 뻥 뚤린 기분이 아주 상쾌하고 좋더라구요

그리고 노을질 때 가서 그런가 이쪽은 사람도 없고 한산해서 좋았네요!

내부입니다.

보시는거 처럼 태양이 정면으로 떨어지기 때문에 아주굉장히 눈부십니다.

썬글라스 챙겨가시는게 좋을듯 합니다.

하지만 통창 너머로 보이는 바다는 너무 이쁘네요

밖이 너무 춥거나 할 때 안에서도 충분히 즐길 수 있게 잘 제공되는것 같습니다.

그리고 카페 내 이쁜 액자도 많고 콘센트도 많아서

노트북 들고와서 여기서 재택근무하면 참 좋겠다는 생각이 들었네요..

이제 메인 장소로 계단을 타고 내려가 보겠습니다.

앞에 바다가 있음에도 이런 물로된 정원같은게 너무 너무 좋더라구요

중간에 센스 있는 돌담길도 사진찍기 너무 좋고...

포토존도 군데군데 만들어놨더라구요?

사람이 많은거 같지만 규모에 비해 적은 편이긴합니다.

다들 저녁먹으러 간건지 아니면 아직 덜 알려진건지는 알 수 없지만

부산 기장에 이런 카페에는 정말 너무 빠글빠글 했던거 생각하면 진짜 널널쓰네요

하지만 점점 알려지면 아마 여기도 엄청나게 빼곡하게 사람들이 올것 같습니다 ㅋㅋㅋ

맛은 그래도 다른 해변카페보단 나은것 같습니다.

산책길 같은 곳도 있고 아래로 더 내려갈 수도 있고 진짜 그냥 어마어마하게 큽니다!!

시간이 지날수록 점점 파스텔톤으로 바껴 가는 하늘

정말 분위기 깡패입니다...

어둑어둑해져서 조명이 켜진 네르하도 정말 이쁜거 같아요

저희는 카페 바로 옆 숙소를 잡아놔서 저녁 늦게까지 있었는데 맘편히

야경까지 다 보고 가서 너무너무 좋았습니다!!

입장할 때 다소 밋밋했던 네온사인이 아주 이쁘게 켜졌네요!

떠나기전에 입구에서 야경의 느낌을 동영상으로 담아봤습니다.

그리고 끝부분에 보이는 카페 너머가 네르하에서 같이 운영중인 숙소입니다.

저희는 1박 예약을 했기 때문에 바로 넘어가서 고기를 구워먹었습니다 ㅎㅎ

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

너무 좋았던 카페였는데 다음에 통영에 또 오게된다면

저는 여기 다시 오고싶네요

네르하에서 같이 운영중인 역대급 펜션도 궁금하다면 아래 링크 ㄱㄱ

https://smujihoon.tistory.com/264

오션뷰 숙소 네르하21 펜션

안녕하세요 제가 다녀온 역대급 펜션을 소개하러왔습니다. 이번 통영 여행중 하루를 통으로 네르하에서 계속 지냈는데요 일단 카페가 너무 이뻐서 쨍한 하늘, 노을, 야경 이렇게 싹다 보고싶었

smujihoon.tistory.com

통영 맛집 전복마을

이안_ian — Mon, 29 Nov 2021 20:08:28 +0900

안녕하세요

오늘은 통영에 다녀왔는데요 그중에서도

가장 유명한 곳으로 손꼽히는 맛집!!!!

전복마을에 다녀왔습니다.

대로변 근처에 위치해 있기 때문에 찾기에 큰 문제는 없으나 차로 들어갈 경우

좁은 골목길을 들어가야 하니 일행분이 먼저 내려서 주차공간이 있는지

확인하고 자리가 없을 경우 아래와 같이 디피랑 주차장을 이용합시다.

요즘 맛집들은 보통 이거 하나봐요 고객 입장에서는 간편하게

웨이팅걸고 몇명 남았는지 바로바로 확인이 가능해서 넘 좋습니다.

저희는 사람진짜 없을 거라 생각한 2시쯤 도착했는데요

그래도 3팀이나 있어서 20분 가량 대기했네요..

피크시간에는 진짜 어마무시할 것 같으니 점심시간 피해서 가는것도 방법일 것 같습니다.

메뉴는 아래와 같습니다.

그런데 여름메뉴와 겨울메뉴가 조금 다르다고 하네요

저희는 블로그보고 모둠물회랑 회덮밥세트를 주문 하려고 했는데 여름 메뉴라

이미 교체가 되었다고하니 그 부분은 유의해서 가시면 될 것 같습니다.

그래서 저희는 그거랑 최대한 비슷한

전복물회

멍게비빔밥세트를 시켰습니다.

기본 반찬인데 고등어도 한마리 구워주시고 굴전도 주시고 그 외 다른 밑반찬이

너무 많아서 어떻게 다먹지 싶었습니다 ㅋㅋㅋ

반찬만 먹어보면 이 집 잘하는지 못하는지 딱 감이 오는데

먹어보니 정말 그랬네요 ㅋㅋ

특이 이거 존맛...

전복물회입니다.

사진만봐도 진짜 먹음직 스럽고 비주얼도 대박입니다 ㅋㅋㅋ

옆에 회도 많이 주시고 가격이 아깝지 않아요 강추합니다.

그리고 은근 매운맛이 느껴지더라구요

심하진 않으니 크게 신경쓰지 않으셔두됩니다.

다음은 멍게비빔밥인데

이렇게 간단하게 나옵니다.

비벼서 먹어보면 살짝 바다의 맛이 느껴지는 비빔밥이였어요.

이모님이 미역국도 주셔서 같이 먹기 좋았습니다.

전체적으로 맛집이라고 소문날만큼의 맛!!!

바다 근처에서 해산물 많이 먹어서 좋았고 해산물이 주류지만 밥이 사이사이 끼는 메뉴들이라

먹어도 허하지 않아서 참 좋았습니다. 사람이 많아서 기다리는것만 아니면 통영갈 때 또 가고싶네요~

잠실 월드타워 [디 라이프스타일 키친]

이안_ian — Mon, 8 Nov 2021 00:00:39 +0900

안녕하세요

요즘 정말 핫한 레스토랑에 다녀왔습니다.

인스타에 정말 자주 올라오는 곳이고 부부의 세계를 촬영도 했던!!!

(뷰)맛집 디 라이프스타일 키친입니다.

우선 저도 방문하기전에 사진이나 다른 블로그 후기를 보고 굉장히 기대가 컸던 레스토랑입니다.

내부의 고급스러운 인테리어는 정말 무슨 음식을 먹어도 맛있을 것 같다는

인상을 심어주기에 아주 충분했습니다.

음식도 미슐랭 2스타가 해주는 음식이라길래 맛도 보장되었다고 보면 될것 같구요

그래서 좀 특별한 날에 점심으로 다녀왔습니다.

굉장히 핫한 장소이니만큼 그냥 가시면 외관 구경만 하고 돌아오시게 될겁니다.

그렇기 때문에 네이버 예약으로 미리 하시는걸 추천드리며 주말이나 평일 저녁 시간대는

미리 하지않으면 이것도 자리가 없다는점....

저또한 주말에 예약을 하려니 자리가 없어서 전화로 다시 문의를 했습니다.

다행히 전화로 겨우 예약을 했지만 정말 애매한 시간인 2시 30분.....

이날 늦잠 자느라 아침도 못먹어서 2시 반까지 기다린다고 아주 혼났습니다. ㅠㅠ

입구부터 아주 눈길을 사로잡는 거대함과 화려함ㅋㅋㅋㅋ

이 근처 지나가는 모든 사람들이 다들 "이건 뭐야??" 하며 기웃기웃 하게되더라구요

외관도 대단하지만 이런 이력 때문에

더 가고 싶어지더라구요~~

전체 메뉴

전체 메뉴입니다.

다른 메뉴들이 궁금하신 분들은 확대해서 보세요!

입구쪽입니다.

조명이랑 장식이 정말 많아요 ㅋㅋㅋ 저렇게 많지만 식사하는 자리나 통로에는 전혀 거슬리지 않게

꾸며놨더라구요

좌석마다 다 이쁘고 다른 느낌인데 식사중인 테이블이 많아서

이렇게 밖에 못찍었습니다.

넘나 아쉽 ㅠ

저탄고지는 개인이 다이어트할 때나 신경쓰는 줄 알았는데

여기는 레스토랑 자체적으로 저탄고지 지향적이더라구요

이런 팜플렛 같은것도 있고 좀 신기했습니다.

메뉴는 보통 2명이서 커플세트를 많이 드실텐데요.

저희는 커플 세트에서 샐러드 나오는걸 리조또로 바꿔 하나씩 단품으로 시켰는데

왠걸?? 가격이 오백원밖에 차이 안나더라구요?!!?!?!?

심지어 에이드까지 2잔 시켜서 구성이 거의 같은데 말이죠.....

이렇게 하면 세트랑 뭐가 다른지 딱히 물어보진 않았지만 일단 겉보기엔 큰 차이가 없어서

차라리 따로 단품으로 시키는게 더 나은것 같았습니다.

참고하시면 좋을 것 같아요!!

토마토 파스튜

제일 처음 나온 음식입니다.

홍합 정말 많네요..

중간중간 바지락과 가리비도 있었구요.

약간 느낌이 홍합짬뽕에서 홍합 먼저 골라먹기랑 똑같네요.

이렇게 먹고나서 직원한테 면 넣어달라고 하면 파스타로 만들어줍니다.

스테이크

이거쫌 할말 있어요..........

아니.....

5만원짜리 스테이큰데 6조각이 실홥니까??

좋은고기인건 알겠는데 가격대비 진짜 너무 양이 적어서 좀 에바쎄바네요;;

먹물리조또입니다.

그냥저냥 먹을만 해요 오징어 한 마리 거의 통으로 들어보다 보니까

나쁘진 않았습니다.

이게 스튜먹고나면 파스타로 만들어주는건데

일단 홍합이랑 조개를 일부러 좀 남겨서 파스타랑 같이 먹으려고 했는데

뚝배기에서 접시로 그릇이 바뀌는 바람에 저희가 남겨둔 조개들이 포함된건지 아닌지 잘 모르겠네요

스튜 드시는분들은 그냥 다 드시고 파스타 시키세요 어차피 파스타 해줄때

홍합 더 넣어줘서 해주는거 같으니

총평

고급스러운 외관에 비해 음식은 생각보다 실망스러웠다.

인스타 효과로 과한 기대가 불러온 참사일 수 있으나

가격도 상당히 비싸고

다음에는 다른 곳을 가지 않을까?

하지만 이렇게나 고급진 곳에서 음식을 먹을 수 있었던 경험은 좋았다.

특별한 날에 분위기 내러 1번 정도는 가는걸 추천합니다.

선릉 맛집 참치공방

이안_ian — Sun, 7 Nov 2021 19:13:23 +0900

안녕하세요

오늘은 참치가 무한리필이 되는 참치공방에 다녀왔습니다.

처음엔 비싼 참치를 계속 리필 할 수 있다는점이 흥미를 끌었습니다.

그리고 간만에 참치가 매우매우 땡겨서 이번에 마음껏 먹고 1년동안은 안갈 생각으로

다녀왔습니다.ㅋㅋㅋ

하지만 무한리필이 된다는 슬로건이 무색하게도 3번정도 리필해보면 물리게 됩니다......

그리고 이정도 참치 리필은 일반 참치집 가서도 되는것으로 알고 있어서

무한리필에 큰 의미를 둘 필요는 없을 것 같네요

그냥 눈치 안보고 계속 더 달라고하기 좋은 식당정도면 좋을것 같네요

리뷰 시작합니다.

2층에 위치한 선릉점은 입구 바로앞에 입간판으로 메뉴판을 세워놨네요.

맛참치에서 스페샬로 업그레이드하면 참다랑어가 추가되는걸로 알고 있고

참치도 이쁜 틀에다가 담아주는 것으로 알고 있습니다.

하지만 저는 참알못이라 맛참치 이상의 값 지불은 낭비라고 생각되어 저렴미로 가게되었습니다.

나머지는 저도 잘 모르겠네요 ㅋㅋ

약간 근교에 XX랜드 같은 곳에서 볼 수 있을거 같은 빨간 사다리네요ㅋㅋㅋㅋㅋ

하지만 올라가면 고급스러움이 느껴지는 간판이 있습니다.

월~토 운영

브레이크 타임 3시 ~ 5시

이것만 주의하면 될것 같습니다. 깨알 정보로 화장실은 밖에 깨끗하게 관리중이더라구요~

내부사진은 못찍었지만...

가장자리에는 룸으로 구비되어 있으며 가운데 자리에는 룸이 아닌 뚫린 공간에 식탁이 되어있습니다.

예약을 하진 않았지만 자리가 남아 있어서 저희는 룸으로 들어가서 식사를 하게되었습니다.

프라이빗한 공간에서 밥 먹는게 참 좋더라구요!! 그리고 위 사진처럼 밑에가 뚫려있는 구조라 발도 굉장히 편했습니다.

프라이빗한 공간이 있다보니 중요한 자리에 예약하게되면

센스쟁이가 될 것 같습니다 ㅋㅋㅋ

주문은 위에서 언급했다시피 맛참치로 했구요

이날 축하할 일이 있어서 사케도 하나 시켰는데 제일 먼저 나왔네요

위와 같이 사케잔을 따로 주십니다.

계란죽

연어스테이크?

콘샐러드

생선요리

위에가 스끼다시로 나온 음식들인데요. 서빙해주시는 분이 딱히 설명을 해주시진 않아서

정확하진 않지만 처음에 일단 계란죽으로 가볍게 스타트하여 연어 스테이크의 맛으로 느껴지는 샐러드를 먹고

처음에 소고기인줄 알았으나 충격의 생선이였던 생선요리... 저건 별로 손이 안가더라구요;;

마지막으로 치킨텐더 같은건데 딱 인원 수 만큼만 주셨네요 ㅋㅋ

대망의 참치!!!!

처음 사진이 처음 나온거고 두번째는 리필인데 큰 차이는 없고 구성은 조금 달라졌네요

이날 3번째까지 리필했는데 사진은 못찍었지만 그땐 약간 소고기 같은 더 빨간것도 있었어요

리필되는 참치의 종류는 랜덤인가봐요,,, 최대한 여러번 리필하세요

그래야 많은 종류의 참치를 먹어 볼 수 있나봐요

알탕

역시 참치만 먹다보니 넘 물려서 알탕하나 시켰습니다.

근데 얼큰함이 좀 아쉽네요... 추천드리고 싶진 않습니다 ㅋㅋㅋㅋㅋ

저는 이 느끼함을 잡아줄 아주 매콤한 알탕을 기대했는데 생각보다는 잔잔바리 느낌

볶음우동

알밥

위 음식은 리필 3번정도 하면 주는 음식인데 이게 나올줄 알았으면 아마 알탕 안시켰을지도 모르겠네요

얼큰함은 볶음우동이 다 해줬거든요 ㅋㅋㅋㅋ 맛있으나 양은 다소 적습니다.

알밥은 3숟갈이면 끝날정도의 양

일어나기전 마지막 밥상ㅋㅋㅋㅋㅋ

난장판이네요..

참치는 결국 물려서 조금 남기고.. 역시 비싼거 시켰음 돈 낭비될뻔!!

휴

가성비 스피커 브리츠 커브드 사운드바

이안_ian — Sat, 30 Oct 2021 11:03:43 +0900

안녕하세요
오늘은 10년된 스피커를 정리하고 새로 사게된 가성비 스피커
브리츠 커브드 사운드바를 리뷰해보겠습니다.

우선 이전에 쓰던 스피커가 대략 10년 가까이 사용한거 같더라구요... 소리도 이상해지고..
PC로는 소리를 듣기가 힘든 상태여서 새로운 10년을 함께할 스피커를 사게 되었습니다. ㅋㅋㅋ
(안녕? 새로운 노예야 ㅎㅎ)

조건.

그리고 저는 사운드에 그렇게 민감하지 않습니다.
그저 밸런스 있게만 사운드가 출력되어 준다면 만족!
그리고 가격도 착해야 합니다.

이렇게 조건을 설정을 하고 유튜브와 네이버, 쿠팡등등 여러 플랫폼에서 가성비 스피커를 찾게 되었습니다.
근데 요즘 가성비 스피커쪽으로 브리츠라는 회사가 대세인듯 하였고
스피커를 전문으로 하는 회사라는 느낌이 좋아서 여기서 제품을 골라보았습니다.

BA-K9 VS BZ-SP600X

제일 먼저 본 제품은 BA-K9 으로
약 3만원에 구매 가능한 가성비 제품입니다.
아래와 같은 제품인데
http://www.britz.co.kr/product.detail.php?category=3&product=309

Britz International Co., Ltd.

32인치 디스플레이 최적화 (600mm) 벽걸이 마운트 제공 인기상품 모델명 BA-K9 Sound Bar Solo 가격 34,000 원 출시일자 2017-04-24

www.britz.co.kr

처음엔 디자인도 괜찮았고 구매하려고 했었습니다.
그런데 출시일자가 2017-04-24입니다. 무려 5년 가까이 되어가는 제품ㅠ
조금 찝찝하여 조금더 찾아보다가 다른 가성비 제품인

BZ-SP600X를 찾았고 위에꺼보다
1년 뒤에 출시되어서 뭔가 더 업그레이드 되어서 나왔을 것 같은느낌?ㅋㅋㅋ
그리고 커브드 모니터는 안쓰지만 관심은 있기에 스피커 먼저 바꿔보자는 생각으로 구매하였습니다.
http://www.britz.co.kr/product.detail.php?category=3&product=446

Britz International Co., Ltd.

커브드 사운드바, 10W, 52mm 유닛, TV, 모니터 사용가능, 영화, 음악 신상품 인기상품 모델명 BZ-SP600X 커브드 사운드바 가격 79,000 원 출시일자 2018-03-02

www.britz.co.kr

개봉기

처음봤을 때 왜케 커;;;;;;;;;
딱 이 느낌이였던것 같습니다 ㅋㅋㅋ 아무리 미니 탁자위에 올렸다지만
그냥 택배만 받아봤을 때도 크다는 느낌이 확실히 들었습니다.

정품 봉인 라벨실도 있네요 ㅋㅋㅋㅋㅋㅋ
1도 예상하지 못한 부분이라 좀 당황하면서도 이렇게 주니 신경은 좀 썼구나 싶네요

포장은 처음, 중간, 끝에 충격 방지 스티로폼이 끼워져있고 얕은 비닐로 감싸서 왔네요.
간단하게 왔지만 제품손상은 잘 없을 구조인것 같아요 아주 좋네요

화이트 색상의 깔끔한 모습입니다.
버튼도 엄청 심플하고 약간 심심한 느낌이네요ㅋㅋㅋ

스피커, 마이크, 본체연결 usb인데 구성품이 굉장히 단촐하네요.
이전에 쓰던 제품은 스탠드 스피커 2개랑 베이스에 컨트롤러 따로 구비되어 총 4개의 제품에
콘센트로 전원이 공급해야되서 거미줄을 방불케 했는데....

이렇게 간단해질 수 있는거였어??ㅋㅋㅋ

딱히 볼거 없는 측면부

설치 후 모습인데 역시나 생각보다 기네요 지금 보이는 모니터가 23인치인데
대략 32인치 쓰는 분들이면 그 모니터 아래로 쏙 들어갈거 같네요
아그리고 선 저거 너무 거슬리는데 어떻게 처리하면 좋을까요..ㅠ

고민좀 해봐야겠네요 ㅋㅋ

아래는 음향 테스트 삼아 올려보았습니다.
저는 이전꺼가 너무 안좋아서 그런지 이정도면 아주 만족스럽고 좋네요!!

가요 테스트

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

팝송 테스트

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

전동 와인 오프너 크리스탈 클라우드

이안_ian — Sat, 16 Oct 2021 14:53:22 +0900

안녕하세요
여러분들은 어떤 술 좋아하시나요?
저희집은 요새 와인을 즐겨 마십니다. 특히나 40년넘게 줄곧 소주만 드시던 아버지가
연세가 드시면서 소주에서 와인으로 취향이 바뀌셨더라구요

실제로 우리나라 와인 연간 수입량은 꾸준히 증가하여 5년만에 약 2배가까이 증가하였고
삼겹살 식당에서 소주대신 와인을 찾기도 한다고 합니다.
이처럼 와인을 많이 먹다보니 꼭 백화점이나 큰 마트가 아닌 편의점에서 와인판매량이 크게 늘기도 했구요.

오프너가 없을때 열기

오프너로 열기

하지만 와인을 마실 때 처음부터 난관에 봉착하게 되는데요.
오프너 없이는 못 마시거나 오프너를 사용하더라도 사용법을 잘못 익히면
코르크만 뜯겨나간채 난감해지는 경험 다들 한 번씩은 있을겁니다.

그리고 오프너로 숙달되었다 하더라도

술 마실 때 매번 저걸로 힘겹게 따는게 전 너무 귀찮고 불편하더라구요!!!

젊은 저도 불편한데 아빠가...
그것도 술에 취한 아빠가 저걸 매번 따실려면 얼마나 귀찮겠습니까?
그래서 이번에 새로 찾은 아이템을 선물해 드렸죠

전동 와인 오프너 크리스탈 클라우드

찾게된 배경은 뭐 별거 없었어요
이 귀찮음을 나보다 먼저 발견한 누군가가 이걸 자동화해서 팔고 있을거다 라는 믿음으로
네이버에 검색했더니 이게 나왔어요

하지만 여러 제품들이 있었고 정말 값싼 제품과 살짝 가격이 있는 이 제품이 섞여 있었는데
처음에 싼거 사고 와인을 더 좋은걸 사서 선물해드리자 했었는데
그래도 비싼게 더 나을지도 모른다는 생각에 이 제품으로 구매하였습니다.

근데 구매 해보니까 실물이 이게 진짜 고급스럽고 너무 이쁘더라구요
무슨 상패 같기도 하고........... ㅋㅋ
아무튼 디자인이 중요한 선물에는 이게 최고같네요 저혼자 집에서 쓸거였으면 싼거 샀을테지만
부모님한테 드릴거고 또 선물용이니까 이게 훨 나은 선택이였습니다.

간단 사용법
-제품 위 뚜껑으로 비닐을 동그랗게 짜르고 제거한다.
-와인을 기계에 넣고 코르크가 제거되길 기다린다.
-기계를 가로로 눕히고 기다리면 코르크가 빠진다.

사용 후기
위에 보시면 화살표가 있는데 같은 방향으로 압력을 주시고 와인병을 돌리시면
처음 비닐을 아주 이쁘게 뜯을 수가 있어요 근데 이게 잘 안되실 수 있는데
원리가 두번째 사진처럼 칼날이 있는데 저쪽으로 비닐이랑 맞닿게 하고 그걸 돌리는 것입니다.
그리고 와인을 기계안으로 넣고 살짝만 밑으로 눌러주면 알아서 지이이이이잉 하고 코르크를 제거해줍니다.

어때요? 참 쉽죠?

시끄러운 소리가 끝나면 제거된거니까 꺼내서 드시면 되고 기계에 있는 코르크 제거는
기계를 가로로 돌리시면 알아서 빠져나옵니다.
아래에 준비된 조교의 영상을 보시도록 하시죠 ㅎㅎ

아그리고

이 빨간 버튼은 기계를 가로로 돌려 코르크 제거하고 있는데 안빠질 때!!!
3초정도 꾹 눌러주시면 다시 제거 기능이 돌아갑니다.

또 이 제품은 usb충전식입니다.
완충 시 60번인가? 사용 가능하다는데 지금 여러번 사용해봤는데 아직두 절반이나 남았네요
기계를 따로 on/off 하는 기능도 없으니 사용하실 때마다 이 점멸등으로 확인하시고
한 칸 남았을때 잠깐 충전해주시면 될것 같습니다.

제가 구매했던 링크입니다.

참고로 업체로부터 받은건 없습니다.

https://smartstore.naver.com/hk-corp/products/4959141883

※※※※※※※※※※※※※※※※※※※※※※※※※※※

+약 3달간의 후기

일단 아버지가 너무 좋아하시네요, 친구분들에게도 자랑 엄청 많이 하시고..

너무 편해서 2병만 마실걸 3병, 4병 마시게 된다고 하시네요 ㅋㅋㅋ

건강이 조금 걱정이 되지만..

너무 흡족해 하시니까 너무 보람차고 좋네요!!

시범영상

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

다시 가보고싶은 덕천 카페 커피 페어리, 커피 요정

이안_ian — Thu, 14 Oct 2021 23:27:24 +0900

부산 여행하다가 덕천역 근처에서 저녁을 먹게되었어요
번화가 였던 덕천역에서 많은 사람들로인해 오랜만에 젊은 열기를 느끼고 골목마다 맛집들이 많길래
소화도 시킬겸 근처 구경을 하던중 귀여운 카페가 눈에 띄게 되어서 우연히 들리게 되었습니다.
그런데 생각보다 꽤 마음에 들어서 이렇게 소개하게 되었네요

밤의 조명 때문이었을까?
피터팬이 생각나는 깔끔한 마크와 신비감을 주는 영단어 FAIRY
그리고 페어리에 걸맞는 많은 식물들이 오묘한 분위기를 내고있었다.

들어선 카페 내부는 밖에서 보는것과 달리 생각보다 컸다.
그리고 의자와 식탁이 딱봐도 비싼 브랜드를 쓰고 있음에 괜히 사용해보고 싶은 욕구를 불러일으켰다 ㅋㅋㅋ
그리고 의자도 많아서 여럿이서 오기에 좋았으며 혼자왔을 때의 자리 책상도 훌륭하게 많았다.

저녁을 먹고 간단하게 아이스 아메리카노 1잔을 시켰다.

그 중에서도 플레버를 마셨는데 이 커피 정말 추천한다.

왜냐하면 원래 헤이즐넛향을 좋아하는데 너무 달지 않고 기분좋게 그 은은한 향을 내고 있어서
나에겐 아주 만족스러웠다.
카페에서 파는 아아중에선 손꼽히는 맛이였다. 그러다보니 다른 종류의 커피들은 어떨지 좀 궁금해졌다.
그런데 여기는 와플 맛집이라고 한다... 흐.. 알았다면 시켜서 맛이라도 봤을 텐데 너무 아쉽다..
아쉬워야 또 오니까 다음에 오기위한 장치라고 해두자 ㅋㅋ

여기는 커피도 꽤 훌륭했지만 뷰맛집이기도 했다 ㅋㅋㅋ나팔모양의 장식도 느낌있고
식물이 굉장히 많아서 약간 정원카페의 느낌이 나는듯 하다
위 사진처럼 약간은 은밀한? 좌석도 있어서 여긴 커플들에게 인기가 아주 좋았다.

이제 야외로 나가보자!

요정과 장미사이에 뭐가 있나? 라는 착각이 들 정도로 여기는 장미가 정말 많다...
살짝 투머치 한것 같으면서도 시선을 끌어당기는 매력이 있는것 같다.

야외도 꽤나 널찍한 자리가 마련되어 있고 추울껄 대비해 담요도 2개정도 구비되어 있었다.

화장실까지 점령한 장미의 향연...
그래도 화장실도 신경쓰는듯한 모습은 아주 마음에 들었다.
변기 또한 깨끗이 관리중이셨다!

커피도 좋았고 내부 시설도 좋았던 카페
다음에 덕천에 오면 한 번더 놀러오고 싶다.
그때는 꼭 와플먹어서 자랑해야지!!!!

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

기장 맛집 식당연화

이안_ian — Thu, 14 Oct 2021 21:08:40 +0900

안녕하세요
오늘은 부산여행을 다녀오면서 갔던 기장에 있는
맛집을 소개하려고 합니다.
사실 몇 달 전 기장에 갔을 때 처음 방문했었는데요 그때를 잊지 못하고
또!!!!!!!
가게된 재방문율 100%의 빛나는 엄청난 맛집입니다.
살면서 기장 2번 갔는데 모두 갔고 앞으로도 기장에 가면 또 갈것 같네요 ㅎㅎ

지금 소개합니다.

정면

정면으로 봤을 때 1층에 자리한 식당입니다.
가게 바로앞 주차공간이 있지만 다소 협소했고 2층부터는 일반 주민들이 사는것 같더라구요
그래서 한적하게 사진에 보이는 흰색 차 뒤쪽으로 잠깐 주차 했답니다.

가게 측면에서도 보이는 존재감 뿜뿜~~

메뉴는 맛집답게 그렇게 많지 않아요!!
스테이크는 저도 못먹어 봤는데 인기가 많은지 저녁시간에는 sold out이네요 ㅠㅠ
저는 2번의 방문 모두 같은 메뉴를 주문했습니다.

"뚝배기 크림 파스타 + 리조또"
"전복치즈볶음밥"
"연화리멘보샤"

진짜 너무너무너무너무 강추합니다. 처음 가는분들은 일단 이렇게 드시는거 추천!!
우선 감동이 덜했던 멘보샤는 그냥저냥 나쁘지않았습니다. 사이드 메뉴로 soso
하지만 나머지 메인 요리는 정말 대존맛..

다음에는 스테이크와 장어메뉴를 먹어봐야겠어요 ㅋㅋ

식당연화는 선결제 시스템이므로 주문하고 전화번호를 알려주면 연락이 옵니다.
바로 앞에 바다가 있어서 가볍게 산책하기 좋았어요.
밥 먹기 전 잠깐의 산책 추천합니다 ㅎㅎ

실내는 테이블 4~5개 정도 밖에 안들어가는 아주 작은 공간이에요
그 작은 공간에 사람들이 꽉차서 대놓고 사진찍기 힘들어서 우선 초입부 부분만 찍어봤습니다.
공간 활용을 잘해서 나름 이쁘게 꾸며진 입구같네요 ㅎㅎ

아.. 이거 진짜 강추예요 주변에 치즈랑 밥이랑 떠먹는데 너무 너무 맛있어요
저희 테이블 옆에 노부부 두 분이서는 이것만 2개 시켜서 드셨습니다.
어른들 입맛에도 굿인거 같지만 젊은 사람들도 최고예요!!! 맨위에 전복도 엄청 싱싱하고
진짜 맛있더라구요

크림 파스타는 익숙한 맛인데
다들 하나씩 알고 있는 진짜 맛있는 크림 파스타
맛집과 맛과 비슷합니다 ㅋㅋㅋㅋㅋㅋㅋㅋ
그리고 여기만의 특별한 점은 저 아래에 밥이 있어서 리조또로도 먹을 수 있어서
면으로 아쉬운걸 달래줍니다. 진짜 강추예요 그냥;; 먹어야 압니다.

멘보샤는 앞의 음식을 먼저 먹고 너무 기대해서인지 조금 평범....
큰 기대는 안하시고 시키면 좋을 것 같아요 ㅋㅋㅋ 그래도 맛있어서 2개로 조금 아쉽다면
추천합니다 ㅎㅎ 참고로 저는 멘보샤 남아서 3갠가 포장해 갔어요
그만큼 메인 메뉴 2개만으로도 양이 꽤나 된다는..

안쪽 사진 슬쩍..

귀여운 해녀복 데코

진짜 맛있게 먹었다는 증거!!!!!!!!!!

바닥까지 긁어 먹어버렸네;

잠실 장미상가 맛집 정순함박

이안_ian — Sat, 2 Oct 2021 21:55:13 +0900

안녕하세요

오늘!

잠실의 점심을 책임지는 장미상가를 다녀왔습니다.

실제로 장미상가 바로 앞에는 대기업들이 몇개 있는데

롯데, 삼성SDS, 쿠팡, 현대해상 등등 많은 수의 대기업 직원들이 있습니다.

그렇기 때문에 점심시간에 엄청난 인원이 쏟아지게 되는데 그 때문에

맛있는 식당도 많이 있습니다.

그 중 가성비로 유명세 탄지 좀 오래된 정순 함박에

오랜만에 가보았습니다.

B22-1에 위치한 식당

지하 상가가 자리가 매우 협소하여 가보면 조리실 및 메인 구역따로

안쪽으로 더 들어가서 아래 사진처럼 좌석공간 따로... 좀 정신없어요 ㅋㅋㅋ

테이블과 태블릿이 있으면 정순함박 자리일테니 앉아주시면 됩니다.

다소 산만한 분위기 탓인지 사용 설명서가 테이블 마다 붙여 있습니다.

아래의 스텝대로 하나씩 따라하면 됩니다

바로 옆에 있는 테블릿으로 하나씩 주문하면 됩니다.

메뉴는 다 찍진 못했는데 많진 않아요

메뉴

수제버거, 함박스테이크, 튀긴 함박스테이크, 파스타 3종류

참고로 수제버거는 평일 점심에 이미 품절일 수 있으니

유의하시면 될 것 같습니다.

저는 여기 N번째 방문이라 그 사이 또 새로 생긴 메뉴는 주문해 보았습니다.

주문을 했으니 다음 스텝에 따라 스프를 가져와보겠습니다.

조리대 근처에 이렇게 조촐하게 되어 있으니 먹고싶은 만큼 많이 퍼가도 됩니다.

참고로 앞접시가 필요하시면 이 그릇을 똑같이 사용하면 됩니다.

기다리고 있다보니 드디어 음식이 나왔네요

개인적으로 약간 배떡의 로제 떡볶이가 생각났습니다.

우동면도 뭔가 배떡의 그 떡처럼 느껴지고 ㅋㅋㅋ살짝 매콤한게 배떡같아요..

이거말고 매운 파스타 있는데 그걸 더 맛있게 먹은거 같습니다.

튀김함박이라는데

음...... 딱히 튀김옷이 보인다거나 튀김의 맛이 느껴지진 않았습니다.

다른 일반 함박과 비슷한 느낌이였어요

그래도 맛있게 먹긴했지만 기존 음식과 다른점은 잘 모르겠네요

다먹은 그릇은 싹 모아서 여기다 내놓고 퇴식하시면 됩니다.

아래와 같은 자리도 있습니다.

안쪽에 자리랑 이것까지 생각하면 테이블수는 꽤나 많은것 같습니다.

노브랜드 무선 마우스(저소음)

이안_ian — Sun, 19 Sep 2021 18:10:02 +0900

오늘 볼일이 있어서 이마트에 갔다.
온김에 노브랜드 제품중 괜찮은게 뭐가 있는지 둘러보았다.
그때 마침 내 눈에 띈 무선마우스!!

특히 나의 이목을 끈 부분은 바로 엄지 받침대가 들어간 부분이였다. 왜냐하면 로지텍 마우스중에
저런 마우스가 있는데 체험해 봤을 때 저게 굉장히 편했기 때문이다.
묵직한 무게감에 나의 큰 손을 다 감아주는 그립감과
엄지를 올려둘 공간이 있어 손가락이 정~말 편해지는 마우스였다.
하지만 그런만큼 가격도 어마무시하다 10만원에 육박하는 비싼 금액에 살 엄두를 못내던 차에
저거랑 유사한 모습을 보이는 제품을 발견했기 때문이다.
(관련 사진 아래 첨부)

로지텍 무선 마우스

그리고 유선 마우스만 쓰다가 요즘 무선 마우스에 대한 관심이 조금 높아져서 괜찮은 마우스가 없을까 고민중이였다.
멀쩡한 마우스를 냅두고 사는거다보니 지출을 크게 하고 싶지않았다.
그래서 못사고 있었는데 저걸 발견하고 무선 마우스 체험판으로 한 번 써보면 딱이겠다 싶어 구매하게 되었다.

가격

5,980원

6천원도 안하는 가격ㄷㄷㄷ...
그래도 무선 마우스인데 이정도 가격이면 어딘가 문제가 있는게 아닐까 걱정될 수준의 가격이다.
하지만 그렇기에 더 부담없이 시작할 수 있었다.

구성품

구성품은 그냥 비닐에 마우스하나 덜렁 담겨있다;;
가성비 제품이니까 뭐 포장에는 큰 의미부여는 하지말자.

외관

이 부분은 이전 모델인 20B와 비교하면서 봐야할 것 같다.
이번 모델이 21B인데 업그레이드가 굉장히 많이 되었다. 우선 미리 언급했던
엄지 받침대 뿐만이 아니라 뒤로가기, 앞으로가기 버튼이 생겼다는 점이다.
그래서 버튼 갯수 또한 기존 3버튼에서 > 6버튼으로 늘어났습니다.
회사에서 마우스에 달려있는 뒤로가기 버튼을 굉장히 자주 사용하는데 이번 모델에 추가되어있어 다행입니다.

사용시 주의할점

건전지가 안들어가 있다.

AA 건전지가 필요하나 없기 때문에 같이 구매할 필요가 있다.

블루투스 마우스가 아니다.

usb 동글을 사용하여 무선으로 쓰는 제품이지 블루투스 마우스는 아니다. 이점 유의해서 구매하시면 될 것 같다.

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정정액의 수수료를 제공받습니다."

아래는 기존에 사용하고있던 G102와 비교샷

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.