hyeran's page

북마크 관리자 회고록

Thu, 13 Nov 2025 10:00:00 +0000

배경

나는 “오 이 블로그 유용하다” 거나 “오 이 툴 좋다 쓸 일 있을 때 써봐야지” 하면서 저장해놓는 북마크들이 많다. 폴더 안에 폴더가 있을정도로… 그러다보니 느꼈던 몇 가지 불편함이 있었다.

북마크만으로는 이걸 왜 저장했는지, 뭔 내용인지 알기 어려움
북마크했던 것 같은데 어디에 했는지 못 찾겠음
내가 북마크했다는 사실을 잊어버리고 검색하고 있음
과거엔 의미 있었으나 이젠 의미 없어진 링크들이 많음
나중에 봐야지 하고 저장했다가 까먹고 잊혀진 링크들 있음

나만 느낀 불편함이었을까? 주변인들에게 물어봤을 때 다들 비슷한 불편을 느낀 적이 있었다. 딱히 문제라고 느끼지를 못했을 뿐. 레딧에도 검색해보니 북마크 관리자에 대한 수요가 정말 많았다. 당연히 기존 서비스들도 많았다..

가장 대표적인건 raindrop. 이건 크롬 북마크랑 연계되진 않고 개별적인 북마크 관리자다. 근데 실제로 쓸 때는 메모라든가 태깅이라든가 약간 기능이 과하다? 조금 번거롭다?라는 생각이 들었다. 근데 미리보기도 가능하고 검색도 가능하고 카드 레이아웃이라 뭔 내용인지 1번과 2번 문제는 해결하기 좋겠다는 생각이 들었다.

그 외에 markmind, savespace, 이제는 멈춘 pocket 등 많은 서비스를 찾아봤다. 찾아보면서 공감됐던 댓글은 레인드롭이 인기있는 이유이자 많은 사람들이 북마크에 대한 불편함을 느끼면서도 관리자를 쓰지 않는 이유, “아무도 북마크를 관리하는데 그런 비용을 내고 싶지는 않을거야”

비용을 최소화하면서 내가 느낀 불편을 해결할 완벽한 서비스는 없어서 내가 한 번 만들어보기로 했다.

핵심은

내가 느낀 불편들을 해결할 수 있을 것
기존 북마크와 연동이 가능할 것
최대한 사용자가 번거롭지 않게 할 것
생성형 ai는 자제할 것(비용 때문)

으로 잡았다. 그럼 각각 어떻게 해결할 수 있을까

1. 북마크만으로는 이걸 왜 저장했는지, 뭔 내용인지 알기 어려움

현재 상단 뷰에 뜨는 북마크는 파비콘과 제목만 뜬다. 이걸 카드 형식으로 바꾸기로 했다. 이미지만 보아도 이게 어떤 내용인지 떠올리기 쉬워진다. 난 여기에 내용 요약을 추가하기로 했다.

카드형식 레이아웃
요약과 썸네일
클릭하면 해당 url로 이동

요약은 Gemini api를 활용했다. 단순히 크롤링해서 요약하기엔 페이지마다 html이 너무 달라 본문 콘텐츠를 찾기 어려웠기 때문이다.

썸네일은 Google Cloud Function을 활용했다.

대표 사진(og:image)
본문에서 가장 큰 이미지
파비콘

우선순위대로 썸네일을 저장했다.

이후 북마크 저장 팝업을 구현했다. 팝업을 열면 메타데이터가 자동으로 작성되고 사용자는 저장 버튼만 누르면 된다. 그럼 알아서 요약하고 썸네일을 만들어 원래의 북마크바에 연동되어 저장된다. 카드뷰에는 url, 썸네일, 요약, 폴더가 뜬다.

여기에 키워드 태깅도 추가할 생각이다. 레딧을 뒤져보니 생각외로 많은 사람들이 태그로 내용을 기억하더라고 ㄴㅇㄱ

추가로 이런 태깅에는 단순히 tf-idf로 희소성이 높은 키워드를 쓰는 게 아니라 논리적이고 구조적인 흐름이 보이게끔 해야 한다는 피드백이 있길래 제로샷 분류(ZSC)를 활용해서 “북마크가 쓰이는 활용 상황”이라는 컨텍스트를 담아내는 태깅을 할 생각이다.

그리고 원래는 이 카드 형식을 브라우저 상단 뷰에서 바로 보이게 하고 싶었다. 왜냐면 그렇게 한 서비스가 아무도 없어서 ㅎㅅㅎ

-> 찾아보니 그건 확장자의 권한 밖의 일이었다. 그래서 다들 안 한 거였어… 어쩔 수 업이 나도 manage.html을 만들었다. 후순위지만 사이드 패널로 개선할 예정이다. 단축키 기능도 생각중

2. 북마크했던 것 같은데 어디에 했는지 못 찾겠음

검색 기능을 구현하면 된다. 임베딩 벡터를 이용해 의미기반검색이 가능하도록 하면 될 거라 생각했다.

transformer와 Univertial Sentence Encoding으로 의미 기반 검색
WebGL 기반의 임베딩 모델을 사용
입력 쿼리와의 코사인 유사도를 측정해 상위 n개만

이랬더니 테스트했을 때 성능이 너무 안 좋게 나왔다. 이유는?

USE는 영어로 사전학습된 모델, 한국어 문맥 이해 능력이 부족
USE는 각 단어의 임베딩 벡터를 평균 내어 문장 벡터를 생성하는데, 다음처럼 [“햄버거”, “뭐야”] 와 [“감자”, “튀김”, “뭐야”]처럼 단어 구조만 비슷하면 높은 유사도로 판단 -> 문장의 의미보다는 단어 구성의 유사성이 유사도 계산에 더 큰 영향을 줌

그렇다면 어떻게 하는가 한국어 임베딩 모델을 올려야 하나?

한국어 임베딩 모델을 쓰려면 파이썬 기반 모델을 확장자 위에 올려야 하므로 js로 변환 하고 경량화도 해야한다.(Chrome 확장 프로그램의 크기 제한 때문)

근데 이렇게 하자니…꼭 그렇게 한국어 모델이 필요한가? 그냥 번역하면 될 것을… 노력이나 비용 대비 효용이 크지 않아 보였다.

임베딩하는 메타데이터를 모두 영어로 설정하고 사용자에게 보이는 단계에서만 번역 과정을 거치기로 했다!

이제 의미 기반 검색은 잘 되는데 단어 하나 정도의 키워드만으로는 검색 성능이 안 나왔다. 실제 사용자는 키워드 위주로 간단하게 검색할텐데…?

결국 키워드 만으로도 검색 가능하게 하이브리드 검색 구현

TF-IDF를 사용하여 검색어와 북마크 텍스트 간의 키워드 중요도를 측정하고 의미 점수와 키워드 점수에 가중치($\alpha, \beta$)를 주어 스코어 내렸다.

3. 내가 북마크했다는 사실을 잊어버리고 검색하고 있음

내가 가장 필요를 느낀 부분이다. 실제로 나는 저장하고도 검색하는 경우가 허다하기 때문.. 어떻게 이 문제를 해결할까 고민을 많이 했는데 검색했을 때 검색 결과보다 먼저 “어? 이거 이미 있어!”를 알려주면 해결할 수 있지 않을까 싶었다.

검색엔진에 특정 키워드를 검색할 경우 “잠깐! 이 검색어에 필요한 관련 북마크가 있습니다.”라고 팝업 아이콘 배지로 알림을 주는 기능

기존에 있는 임베딩 모델로 활용 상황 정의 -> 토픽 벡터 생성
크롬 api 활용해서 검색어 가로채기
추출한 쿼리로 임베딩 벡터 계산
유사도 계산

생각하고 이런 기능 시중에 있나? 하면서 찾아봤는데 있긴 하더라…

Stacks

깃허브가 없어서 구현 방식은 모르지만 구현 가능하다는 걸 확인했으니 나도 할 수 있을거다!

실제로 이 서비스는 사용자가 꽤 많았다. 레딧에서도 은근히 많이 언급되고 있었다.

4,5 합쳐서 링크 무덤

이건 좀 더 고민을 해봐야 한다. 단순하게 그냥 자주 안 들어간 것들 리마인드하거나 삭제하자! 라고 하기엔

정말 쓸모 있고 필요할 때 잘 참고하고 있지만 참고할 때 자체가 적어 자주 안 들어가는 링크도 무덤으로 판별할 수 있다. 즉 안 들어간다고 의미없는 링크가 아닌데 오히려 맘대로 삭제했다간 사용자 입장에서 화날 것 같았다.

리마인드도 걸리는 것이 생각해보면 그 북마크 내용을 주기적으로 떠올려야 할 필요가 없다. 필요할 때만 보면 되는데 왜? 그리고 그 안 내용을 충분히 숙지할 필요도 없다. 보면 되는데 왜? 완벽 숙지했어도 또 들어가서 볼 수도 있는거고. 또 리마인드를 하기엔 이게 필요한 상황이 아닌데 자꾸 뜨면 나라도 짜증날 것 같다는 생각이 들었다.

조금 더 고민해볼것!

개선 혹은 문어발

개선 요소들을 생각해보다가 이게 처음 계획했던 목적에 부합한가? 에 막혀 사라진 아이디어들.. 모르지 나중에 어떻게 결합시킬 수 있을지

1. 가장 유사한 폴더 추천/디폴트 설정

기존 폴더들 중에 제일 유사한 폴더를 디폴트로

기존 폴더에 속한 북마크 임베딩의 평균 벡터(Centroid)를 계산하고, 클러스터링으로 새 북마크 벡터와 가장 가까운 폴더를 추천하는 방식

하지만 현재 폴더가 front, git, design, tip 뭐 이렇게 되어있을때 그냥 이거 이름 가지고 유추하는건 tip, front처럼 광범위하거나 애매모호한 이름도 많다 보니 결과 오류 가능성이 매우 높음

그리고 원래 목적과 상관 없이 그냥 편의성 키우는 기능이랑 탈락

2. 시간 정보 처리

“지난주에 봤던 리액트 성능 최적화 방법＂이 가능하도록

시간 구문 파악: “지난주에 봤던” 부분을 추출

시간 구문을 검색 쿼리에서 제거해 순수 의미만 남기고 시간구문은 타임스탬프 범위로 변환해서 검색 성능 높이기

검색 성능 향상 면에서 쓸만하지만 중요하지 않음, 후순위

3. 북마크 정렬

최근에 들어간 순대로, 가장 많이 클릭한 순대로, 가장 오래 체류한 순대로 각각 가중치를 주고 스코어를 내려서 점수 높은 순대로 정렬하기

이건 manage.html에선 구현이 되어있는데 브라우저 상단 뷰에서 적용할 수 있을까?를 고민했다.

확장자 권한 문제로 될 수도 있고 안 될 수도 있다. 찾아보니 정설은 안된다지만 편법이 있는 것 같았다. 해보고 더 자세히 조사해봐야 알텐데 이것도 폴더와 마찬가지로 편의성 키우는 기능에 그쳐서 탈락

아쉬운 점

Wed, 12 Nov 2025 14:00:00 +0000

TeachTouch : 디지털 약자를 위한 키오스크 학습 가이드 서비스📚

Github: 2025_SEASONTHON_TEAM_77_FE

2025.09

아쉬운 점 혹은 개션시켜야 할 점

React 19를 도입한 이유가 없다.

사실 vite를 이용해 initial setting을 하고 시작한거라 React19를 어떤 의도나 이유를 가지고 쓴 게 아니었다. 그냥 최신 버전을 쓴 거지. 근데 use, useOptimistic 등을 활용했으면 기술 도입의 의미를 좀 살릴 수 있지 않았을까..싶다.

어떻게 구현했느냐 보다 왜 이걸 썼느냐가 더 중요해지는 것 같은 요즘이다.
HTML 메타데이터가 기본값으로 방치되어 있다.

이건 사실 생각도 못했던건데 프로덕션 관점에서는 이런 것도 중요한 문제구나를 체감했다. 크롤링 할 때 메타데이터로 긁어오기도 하고, 카톡에 공유할 때도 그냥 s3링크만 보이니 미흡해보이는 것 같다. 내 서비스를 노출시키는 영역인 만큼 사소한 것도 신경쓰는 것이 좋을 것 같다.
lazy loading

프로젝트에서 이미지 최적화가 얼마나 중요한지는 알지만 사실 마감기한을 맞추다 보면 계속 후순위가 되는것 같다. 어렵다..ㅜ
JWT 토큰을 localStorage에 직접 저장

로그인을 할 때 액세스 토큰, 리프레시 토큰을 로컬스토리지에 setItem하고 api 쓸 때 getItem으로 가져왔었다. 아마 해커가 우리 서비스를 보면 엄청 좋아하겠다…ㅜ

해커톤을 포함해 학생 프로젝트에서 보안까지 신경 쓰는 것이 참 어려운 일인 것 같다.
도메인 정보 하드코딩

이건 사실 잘못했다. 이러면 안되는거 알고 있었는데 할 때는 까먹었다. .env 파일 만들고 api url을 변수 설정해야했는데 그냥 무지성으로 api 파일에 하드코딩했다. 유지보수를 해야했다면 아찔했을 것이다. 담부턴 이러지 말자

TTS

Wed, 12 Nov 2025 14:00:00 +0000

TeachTouch : 디지털 약자를 위한 키오스크 학습 가이드 서비스📚

Github: 2025_SEASONTHON_TEAM_77_FE

2025.09

TTS

본선 진출 후 리팩토링 과정에서 못다한 tts 기능을 넣기로 했다.

이미 api는 만들어졌고 text를 서버에 보낸 후 응답값으로 나온 audioContent인 base64를 MP3 변환해서 재생하면 된다.

React Context

일단 TTS on/off 상태를 한 컴포넌트 내에서만 아니라 전역적으로 관리하고 싶어서 React Context를 사용했다.

(isTTSEnabled라는 true/false만 전역으로 관리하면 되기 때문에 이것만을 위해서 redux같은 라이브러리는 헤비하다고 생각했다)

useTTSPlayer 훅

여러 컴포넌트에서 동일한 TTS 재생 로직을 사용할 수 있도록 TTS 기능을 useTTSPlayer 훅으로 분리했다

base64 오디오 처리

서버에서 base64로 인코딩된 MP3 데이터를 받음
atob()로 base64 -> 바이너리 문자열로 변환
Uint8Array로 실제 바이너리 데이터로 변환하여 Blob 객체를 생성
URL.createObjectURL()로 브라우저에서 재생 가능한 URL을 만들어 Audio 객체로 재생
Audio 객체 사용 후 URL.revokeObjectURL()로 메모리 해제해서 메모리 누수 방지

응답값이 base64라 오디오로 재생할 수 있도록 MP3 타입의 Blob으로 만들어야 했다.

이렇게 하고나니 중간에 TTS를 끄더라도 재생 중인 Audio 객체는 멈추지 않는다는 문제가 있었다. 사용자가 TTS 기능을 끄거나 화면을 이동했을 때 즉시 재생이 중단되지 않는 것이다.

TTS 시작 전에 무조건 이전 TTS를 stop 시키고 나서 재생을 시작하거나
isTTSEnabled 값이 false로 바뀌는 순간 자동으로 재생 중인 음성을 끄는 useEffect를 추가하거나
페이지 이동 시 stopTTS()를 호출하거나

등으로 발전시켜야 할 것 같다…

트러블 슈팅 - 예선전

Wed, 12 Nov 2025 14:00:00 +0000

TeachTouch : 디지털 약자를 위한 키오스크 학습 가이드 서비스📚

Github: 2025_SEASONTHON_TEAM_77_FE

2025.09

예선전

예선전에는 프론트, 백, 기획, 디자인 부문별로 피드백을 받을 수 있었다. 근데 디자인을 피드백 받아오더니 수정하고 싶단다… 솔직히 미웠다. 근데 피드백 반영을 하지 말라 할 수도 없고…

다행히 내가 맡은 부분은 에러도 모두 고쳤기에 바뀐 디자인을 보면서 코드를 재사용 가능하게 조금씩 리팩토링 했다. 추가로 코드상에서 많은 수정이 필요할 경우 다른 방식으로 바꾸는 건 어떤지 물어보면서 수정했다.

한창 새벽에 pm이 tts 기능을 모든 페이지에 넣을 수 있는지 물어봤다. 며칠 내내 잠도 못 자고 여러 수정사항 반영하느라 바쁜 상태였어서 이때는 솔직하게 얘기했다.(예선전 장소가 에어컨이 안돼서 몹시 더웠다. 이것도 영향을 미쳤을듯)

지금까지 한 양만으로도 프론트에게 매우 부담이었다.
시연이 5분인데 이때 이 모든 걸 다 보여줄 수도 없을 거다.
지금 다른 프론트 분이 맡은 부분도 계속 에러나고 미완성 상태인데다 디자인도 수정사항 반영해야 할 게 많다.
급한 거 먼저 처리하고 시연할 부분만 골라 시간 남을 때 시도해봐도 늦지 않다.

디자이너분도 시연할 부분만이라도 완성하는 것이 좋을 것 같다 하니 pm도 “현실적으로 어렵다는 말씀이시죠?” 라는 말과 함께 알겠다고 수긍했다.

이후엔 에러나 여러 수정사항들을 고치는 것에 집중했고 다행히 시연 전까지 잘 끝마칠 수 있었다. 그리고 결과적으론 본선 진출 상위 20팀에 호명되었다.

어려운 여건 속에서도 할 수 있는 최선을 다했다고 생각했기에 당당하게 얘기할 수 있었던 것 같다. 늘 ‘그냥 참고 하자..’ 라는 마음으로 불만이 있어도 굳이 말 안 하고 넘어가곤 했었는데 때때론 단호하게 내 의견을 피력해야 함을 느낀 날이었다.

상태 기반 흐름 전환

Wed, 12 Nov 2025 14:00:00 +0000

TeachTouch : 디지털 약자를 위한 키오스크 학습 가이드 서비스📚

Github: 2025_SEASONTHON_TEAM_77_FE

2025.09

상태 기반 흐름 전환

가이드를 구현하는 중 각 카테고리별로 화면이 너무 다르게 생겨서 공용 컴포넌트를 만들어 여러 카테고리에서 사용하긴 어려워보였다.

-> 카테고리별로 컴포넌트를 만들고 그 안에서 제어하기로 결정

그렇다면 학습 시나리오를 어떻게 구성해야할까. 고려사항은 다음과 같았다.

각 카테고리는 intro, content, complete라는 흐름으로 진행
intro, content, complete 화면이 각각 전환되지만 화면 구조는 크게 다르지 않고, 각 단계는 동일한 컴포넌트 위에 모달, 툴팁, 오버레이, 하드웨어 위치 강조 등 시각적 요소들이 쌓이며 변화
특정 조건이 충족될 때 다음 단계로 넘어갈 수 있도록
카테고리 내부 상태는 저장될 필요 없이 시작과 끝만 저장되면 됨
사용자의 경로는 시작과 끝을 통해서만 이동(중간 콘텐츠로 url 변경해서 들어갈 수 없도록)

따라서 하나의 컴포넌트 내부에서 상태를 기반으로 전체 흐름을 관리하기로 결정했다.

이유는?

라우팅 기반 전환은 url 변경을 수반하므로 사용자가 url을 직접 변경해 중간 과정으로 들어갈 수도 있음
특정 조건이 충족될 때만 다음 단계로 넘어갈 수 있도록 해야 하는데 사용자가 url 직접 입력, 뒤로가기, F5 등으로 의도되지 않은 이동을 할 수 있어 학습 시나리오가 깨질 수 있음
화면 간 전환보다는 같은 뷰 안에서 맥락의 변화를 표현해야 하는 경우에 가까움

구현 방식

const [page, setPage] = useState<'intro' | 'content' | 'complete'>('intro');

현재 보여줄 화면을 결정하는 라우터 역할

intro와 complete 단계에선 IntroScreen, CompleteScreen컴포넌트를 만들어서 여러 카테고리에서 재활용했다.

안에 content 부분은

if (step !== null && step < structureSteps.length - 1) {
  setStep(step + 1);
} else {
  setStep(null);
  setPage('complete');
}

step을 사용해 화면 내 세부 단계를 제어하게 했다.

확실히 useState를 쓰다보니 코드가 길어진 감이 있긴 하다. 단순한 페이지 흐름 제어에서 useState를 쓴 것은 나름 합리적인 선택이긴 했지만 다른 대안들도 있었을 것 같다.

useReducer

 const reducer = (state, action) => {
 switch(action.type) {
     case 'TO_CONTENT': return { page: 'content', step: 0 };
     case 'NEXT_STEP': return { ...state, step: state.step + 1 };
     ...
 }
 }

상태 간 의존성이 있거나 전이가 복잡할 경우에 유용하다는데 우린 단순하므로 패스

useSearchParams, useLocation + useNavigate

 const [searchParams, setSearchParams] = useSearchParams();
 useEffect(() => {
 const step = Number(searchParams.get('step')) || 0;
 setStep(step);
 }, []);

학습을 도중에 나갔다가 다시 이어서 해야 하는 경우가 있다면 유용할 것 같다.

Redux, Zustand 등 전역 상태

학습 완료율 등을 추적하는 대시보드 등과 연동하거나 전역으로 학습 흐름 상태를 관리해야 한다면 유용할 것 같다. 하지만 해커톤이기도 하고 전역 상태는 비용이 과도할 것 같다는 생각에 패스

지금 단계에서는 useState로도 충분하지만 확장을 고려한다면 다른 훅을 고려해봐도 좋을 것 같다.

버거웠던 예선 전 1주

Wed, 12 Nov 2025 14:00:00 +0000

TeachTouch : 디지털 약자를 위한 키오스크 학습 가이드 서비스📚

Github: 2025_SEASONTHON_TEAM_77_FE

2025.09

예선 전 1주

연합동아리 구름톤 유니브 4기 수료증을 받으려면 꼭 참여해야 하는 과정이 있다. 바로 시즌톤.

말은 해커톤이지만 본선까지 포함하면 대략 한달과정이다. 프로젝트 개발 시작 기간부터 일주일 후가 예선, 2주 후가 본선이다. 예선은 무박 2일, 해커톤처럼 진행되고 총 100팀이 넘는 팀이 참가한다. 그리고 그 중 20팀이 본선으로 올라간다. 같은 학교 내에선 2명까지밖에 팀을 못 하고 사실상 처음 보는, 모르는 사람들과 팀을 이루는 해커톤이다.

내가 합류한 팀은 디지털 약자를 위한 서비스를 만드는 팀이었다. 이 서비스의 핵심은 키오스크 사용법을 알려주는 가이드 부분과 실제 주문 과정을 테스트할 수 있는 티치맵이다.

근데 일단 처음 피그마를 보고선 경악했다. 페이지가 많아도 너무 많았다. 프론트 개발 시작부터 해커톤 예선까지 기간은 4일 정도, 프론트는 2명, 근데 나와야 하는 페이지는 대략 100페이지에 api는 대략 30개였다.

‘이게 가능하다고?’ ‘디자이너는 왜 이렇게 디자인한 것이며 pm은 이걸 왜 보고만 있는가 이상하다고 못 느꼈나?’ 하는 의문과 의심만 계속 들었다. ‘이렇게 다 만들어봤자 시연 때 다 보여주지도 못할텐데 이게 무슨 노가다지?’ 라는 생각이 들었다. 거기다 디자인도 페이지마다 너무 달라서 재활용하기도 어려웠다.

그래서 디자이너분께 연락 드렸다. 디자인이 너무 달라 노가다 작업이 될 것 같다고 최대한 위치며 레이아웃이며 비슷하게 만들어줘야 그나마 할 수 있다고. 그 후 디자인이 조금 수정되긴 했지만 여전히 양이 많은 것은 부정할 수 없었다.

백엔드에서 만든 명세서를 보는데 api도 완벽하지 않았다. 처음엔 가이드 CRUD 기능을 기획했었기에 가이드를 생성/수정/삭제하는 api가 있었다. 근데 각 가이드 카테고리마다 구성이 너무 다른데도 api는 통합으로 처리되어있었다. CRUD를 할거면 “주문하기/상품추가” 처럼 더 세부적으로 api를 만들어야 하는데 “가이드 생성”으로 퉁쳐져 있었다…

api부터 전면 수정이 필요할 뿐만 아니라 필수 기능도 아니라 생각해 CRUD는 pm과 백엔드에게 연락해 후순위로 미루겠다 했다.(사실상 안 하고 싶다는 뜻) 추가로 필요없는 api들도 많아 몇가지는 구현하지 않아도 괜찮을 것 같다고 전달했다.

급한 불은 껐음에도 너무 막막하고 답답했다. 하지만 일단 해보기로 결정했다. 현실적으로 불가능해서 못 하는거면 어쩔 수 없지만 시작하기 전부터 “너무 많아요 못 하겠어요ㅠ” 하고 싶진 않았다. 그렇게 4일 정도의 시간 동안 잠도 하루에 4시간 정도만 자면서 쉬는 시간 없이 개발했다. 페이지 구현부터 api 연동까지. 클린 코드 같은 건 생각할 수 없었다.

생각해보면 이때가 가장 힘들었다. 개발이 늘 즐거웠고 천직이라고 생각해왔었는데 처음으로 ‘안 맞는다.’, ‘하기 싫다.’ 생각이 들었다. 프론트엔드에 대한 회의감도 많이 들었다. 막막함에 눈물이 나오다가도 그래도 해야지.. 하면서 다시 노트북 앞에 앉았다.

결과적으로 예선전 시작까지 몇몇 api 에러를 남겨두고 완성할 수 있었다. 물론 하드코딩도 있고 코드는 매우 더러웠다..ㅋㅋㅋ

framer-motion

Wed, 12 Nov 2025 14:00:00 +0000

한줌 : 감정과 이야기를 꽃다발로 디자인하고, 공유하고, 기록하는 서비스🌸

Github: ganadiiiii/client

2025.06 - 2025.10

이번 프로젝트에서 가장 인상깊은 부분은 바로 애니메이션… 확실히 페이지가 그림처럼 딱 박혀 있어서 클릭만 가능한 느낌이 아니라 실제로 이 서비스를 쓰고 있구나 느낌이 난다. 인터랙션이 이렇게 중요하구나를 체감했다. 난 framer-motion에서도 spring 정도만 쓴 게 다인데 동료가 다양한 방식으로 활용해서 공부할 겸 분석해봤다.

spring

const springConfig: SpringOptions = {
	stiffness: 150,
	damping: 20,
};

stiffness: 얼마나 빠르게 목표 값으로 수렴할지 (높을수록 빠름)

damping: 얼마나 흔들림 없이 정착할지 (높을수록 잔진동 없음)

간단한 랜덤 로테이션

const handleMouseEnter = () => {
	const rotationList = [-2, -1, 1, 2];
	const randomIndex = Math.floor(Math.random() * 4);
	const randomRotation = rotationList[randomIndex];
		setRotation(randomRotation);
	};

return (
	<motion.div
		className={}
		style={}
		onClick={onClick}
		onMouseEnter={handleMouseEnter}
		whileHover={{
			rotate: rotation,
			scale: 1.05,
			boxShadow: "0.2em 0.2em 0.4em rgba(0, 0, 0, 0.15)",
		}}
	transition={{
		rotate: { type: "spring", bounce: 0.6 },
		scale: { type: "tween", duration: 0.1 },
	}}
	>
    ...
)

호버 시에 랜덤 방향으로 기울어진다.

마우스 호버 틸트 효과

const rotateX = useSpring(0, springConfig);
const rotateY = useSpring(0, springConfig);
const scale = useSpring(1, springConfig);

const handleMouseMove = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
	if (!ref.current) return;
	const rect = ref.current.getBoundingClientRect();
	const offsetX = e.clientX - rect.left - rect.width / 2;
	const offsetY = e.clientY - rect.top - rect.height / 2;
	const rotationX = (offsetY / (rect.height / 2)) * -ROTATE_AMPLITUDE; //ROTATE_AMPLITUDE = 8
	const rotationY = (offsetX / (rect.width / 2)) * ROTATE_AMPLITUDE;
	rotateX.set(rotationX);
	rotateY.set(rotationY);
	}, []);

const handleMouseLeave = useCallback(() => {
	rotateX.set(0);
	rotateY.set(0);
}, [rotateX, rotateY]);

return (
	<motion.div
		className=""
		style={{ rotateX, rotateY, scale }}
		onMouseMove={handleMouseMove}
		onMouseLeave={handleMouseLeave}
	>
    ...
)

handleMouseMove: 카드 중심 대비 마우스 오프셋 비율을 회전 각도로 변환
handleMouseLeave: 마우스가 카드 영역을 벗어나면 회전 각도 초기화

카드를 잡아 땡기는? 누르는? 느낌이 된다.

플립

const [isFlipped, setIsFlipped] = useState(false);
const canFlip = Boolean(flowerCard.message && flowerCard.receiver);

const handleFlip = useCallback(() => {
	if (!canFlip) return;
	setIsFlipped((v) => !v);
}, [canFlip]);

return (
	<motion.div
		className=""
		style={{
			transformStyle:
				"preserve-3d" as React.CSSProperties["transformStyle"],
		}}
		animate={{ rotateY: isFlipped ? 180 : 0 }}
		transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}
	>
		{/* Front */}
		<div
			className={`${canFlip ? "cursor-pointer" : "cursor-default"}`}
			style={{
				backfaceVisibility:
					"hidden" as React.CSSProperties["backfaceVisibility"],
			}}
			onClick={handleFlip}
		>
			<Front />
		</div>

		{/* Back */}
		<div
			className={`${canFlip ? "cursor-pointer" : "cursor-default"}`}
			style={{
				backfaceVisibility:
					"hidden" as React.CSSProperties["backfaceVisibility"],
				transform: "rotateY(180deg)",
			}}
			onClick={handleFlip}
		>
            <Back />
        </div>
    ...
)

transform-style: preserve-3d로 입체 회전
뒷면은 transform: “rotateY(180deg)”로 미리 180도 돌아간 상태로 렌더링해놔야 전체 카드가 180도 회전했을 때 바르게 정면을 보게 됨
backface-visibility: hidden으로 회전 시 뒷면(정면이 아닌 면)은 안 보이도록

클릭에 따라 플립하는 애니메이션 완성

날아오기

<motion.div
	initial={{
		scale: 0.3,
		rotateY: 0,
		rotateX: 40,
		x: "100vw",
		y: "100vh",
	}}
	animate={{
		scale: 1,
		rotateY: 720,
		rotateX: 0,
		x: 0,
		y: 0,
		transition: {
			duration: 1.5,
			ease: [0.33, 1, 0.68, 1],
		},
	}}
	exit={{
		scale: 0.1,
		rotateY: 360,
		rotateX: 25,
		x: "-15vw",
		y: "-10vh",
		opacity: 0.05,
		transition: {
			duration: 1,
			ease: [0.33, 1, 0.68, 1],
		},
	}}
>
	<AnimatedFlowerCard ... />
</motion.div>

처음에는 화면 바깥 (100vw, 100vh)에서 시작
중심으로 날아오며 크기가 커지고(scale: 1), 720도 rotateY 회전하며 착지
종료 시에는 작아지며 특정 위치로 빠지는 exit 애니메이션 실행

검색 hook

Wed, 12 Nov 2025 14:00:00 +0000

한줌 : 감정과 이야기를 꽃다발로 디자인하고, 공유하고, 기록하는 서비스🌸

Github: ganadiiiii/client

2025.06 - 2025.10

검색

    [검색 입력창]
        ↓ (setSearchTerm)
    [searchTerm 상태 변경]
        ↓
    [useEffect로 검색어 입력에 따라 Search api 호출]
        ↓ (friendAPI.search(term))
    [searchResults 업데이트]
        ↓ (검색 결과 상태 저장)
    ┌────────────────────┐
    │ filteredFriends    │ ← 친구 목록에서 검색어와 매칭된 사람
    │ filteredSearchRes. │ ← 검색 결과 중 친구 아닌 사람
    └────────────────────┘
        ↓
    [컴포넌트 렌더링]

useFriendsManager 훅을 만들어서 내부에서 api 통신, 상태 업데이트, 요청 처리, 검색 필터링을 관리

-> ui 컴포넌트는 뷰만 담당하기 때문에 ui 변경 시 로직엔 손 안대도 되고 유지보수가 편하다
검색어 기반 필터링을 이중화

1차: 서버에서 search api 호출 -> 전체 사용자에서 필터링

2차: filteredFriends는 현재 친구 중 검색어로 로컬 필터링

이렇게 하면 친구 외 사용자가 서버 필터링 되는 사이에 친구 먼저 로컬 필터링으로 빠르게 떠서 거의 실시간처럼 보인다!

팀플의 단점

Wed, 12 Nov 2025 14:00:00 +0000

한줌 : 감정과 이야기를 꽃다발로 디자인하고, 공유하고, 기록하는 서비스🌸

Github: ganadiiiii/client

2025.06 - 2025.10

팀플의 단점

모두에게 동일한 양의 기여를 기대할 수 없다.

기획 단계부터 삐그덕거렸다. 나 역시 독일로 전공연수를 가 있는 상황이였고 팀장도 미국에서 인턴십 중인 상태, 다들 내성적인건지 활발하지 않은 회의… 잠수탄 한명…

처음 팀을 구성할 때 상황이 어떻고 사정이 어떻고 그런거 상관없이 할 일은 하자 신신당부를 했건만.. 상황은 그렇게 좋게 흘러가지 않았다.

처음에 열정이 있을 때 많이 했어야 했는데 외국에 있는 사람도 있고 기획이 전체적으로 지연되면서 팀의 힘이 빠져버린 느낌이 들었다. 심지어 한 명은 이번이 첫 개발이었는데 말 없이 회의를 빠지거나 연락조차 잘 되지 않았다.

그래도 어떻게든 해야했다. 시차가 있다보니 연수 일정 때문에 참여 못하는 경우가 아니라면 회의에는 꼬박꼬박 참여했다. 연구소를 돌아다니면서 시간 날때 설문조사를 만들고 새벽에는 IA, userflow를 만들었다. 팀장은 아니지만 팀장이 바빴던 탓에 관리하는 역할을 맡았던 거 같다. 상황을 보며 와이어프레임 단계라든가, 개발 시작 단계라든가 팀원들에게 지시 내리기도 했다.

참여하지 않는 팀원에게는 1차적으로 무슨 일 있냐고 물어보았다. 자세한 사정은 말해주지 않았지만 바빴다고 했다. 내가 할 수 있는 말은 “그래도 해야한다.” 밖에 없었다. 추가로 언제까지 바쁜거냐 묻고 작은 일만 해달라고 부탁했다. 내 일이 너무 많아서 시켰다기보단 누구 하나가 다 하지 않도록 분배하려던 것도 있었고 그 팀원 스스로 죄책감을 느끼지 않았으면 하는 마음도 있었다. 하지만 부탁한 일에 대해 지피티를 돌려서 글을 적어오는등 사실상 도움이 되지 않았다. 남들보다 더 시간 투자해서 공부하고 개발해야 하는 상황에서 차라리 맡기지 않는 것이 더 나은 팀원이 되어버린 셈이다.

2차적으로는 솔직하게 할 생각이 있는건지를 물었다. 이미 회의에 안 나온지도 오래되었고 다른 팀원들도 연락이 안된다고 했다. 그 팀원은 미안하다고 잘 참여하겠다고 했다. 하지만 바뀌는 것은 없었다.

그렇게 한달이 지나고 나와 팀장 역시 한국으로 돌아와 본격적인 개발에 들어갔다. 이 시점에서 그 팀원은 비용이 너무 커졌다는 생각이 들었다. 개발도 공부해야 하는데 기획도 참여를 안 했으니 뭐를 개발해야하는지, 어떻게 개발해야하는지를 알도록 기다려줄 수 없었다. 팀장이 개별적으로 연락했고 결국 개발은 남은 인원끼리 진행하기로 결정했다…

독일에 있는 동안 사실 불만이 많았다. 조용한 디자이너들, 바빠서 참여 못하는 팀장, 연락 안되는 팀원 등. 누군 안 바쁘나 하는 생각과 함께 이걸 위해 휴학을 포기했나..하는 회의감도 들었다.(원래 휴학 예정이였으나 이 대회에 참여하면서 휴학을 못하게 되었다)

근데 결국 모두가 나와 동일한 노력을 들이는 것은 불가능하고 그럴거라고 기대할 수도 없는 것 같다. 어쨌든 내가 하기로 결정했으면 남이 어떻든, 열심히 하든 안 하든 그냥 최선을 다하면 된다.

결과가 어떻든, 누가 어쨌든 내가 마음 먹은 일을 하면서 후회 남기지만 않는다면 그걸로 충분하지 않을까…하는 생각이 들었다

aws - computing

Sun, 13 Apr 2025 14:00:00 +0000

AWS 컴퓨팅 실습 기록

실습 목표

FastAPI 앱을 Docker 컨테이너로 EC2에서 실행
Application Load Balancer(ALB)와 Target Group 설정
Launch Template 및 Auto Scaling Group 구성
ab (ApacheBench)를 통한 부하 테스트 수행
Auto Scaling에 따라 인스턴스 자동 확장 확인
리소스 비용 방지를 위한 마무리 정리

EC2 인스턴스 생성 및 Docker 세팅

EC2 생성
- AWS 콘솔 > EC2 > 인스턴스 시작
- Ubuntu 22.04 선택
- 인스턴스 유형: t2.micro
- 키페어 새로 생성
  - 로컬에서 .pem 키 파일 (예: private.pem) 다운로드 및 chmod 400 설정
  - chmod 400 ~/Downloads/private.pem
- 네트워크: 기본 VPC, 퍼블릭 서브넷 선택
- 퍼블릭 IP 자동 할당: 활성화
- 보안 그룹 설정:
  - SSH (22), 본인 IP 허용
  - HTTP (80), 0.0.0.0/0
  - HTTPS (80), 0.0.0.0/0

EC2 접속 후 Docker 설치

  sudo apt update
  sudo apt install -y docker.io
  sudo systemctl start docker

FastAPI 앱 작성 및 Dockerfile 작성

mkdir fastapi-app && cd fastapi-app

# app/main.py 생성
cat <<EOF > main.py
from fastapi import FastAPI
app = FastAPI()
@app.get("/") def read_root():
return {"message": "Hello, ECS & FastAPI"}
EOF

# Dockerfile 생성
cat <<EOF > Dockerfile
FROM python:3.10-slim
WORKDIR /app COPY main.py .
RUN pip install fastapi uvicorn
CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "80"]
EOF

# Docker 이미지 빌드 및 실행
docker build -t fastapi-app .
docker run -d -p 80:80 --restart always fastapi-app

# 정상 확인
curl -i http://localhost/

도커 허브 푸시 (멀티 아키텍처)

EC2는 amd64 아키텍처이므로 M1/M2 Mac에서 빌드할 땐 반드시 buildx 사용해야 함

아니면 no matching manifest for linux/amd64 에러 발생

# Dockerfile, main.py를 Mac으로 복사
scp -i ~/Downloads/private.pem ubuntu@<EC2 IP>:~/fastapi-app/* ~/Desktop/fastapi-app/

# 빌드 및 푸시
cd ~/Desktop/fastapi-app
docker buildx build --platform linux/amd64,linux/arm64 -t username/fastapi-app:latest --push .

Launch Template 생성

EC2 콘솔 → Launch Template → 새 템플릿 생성

애플리케이션 및 OS 이미지: 최근 사용 > 현재 사용중

인스턴스: t2.micro

키페어: 쓰던 키페어

User data 설정:

#!/bin/bash
sleep 30
sudo apt update
sudo apt install -y docker.io
sudo systemctl start docker
docker run -d -p 80:80 --restart always username/fastapi-app:latest

보안 그룹: 80, 22 포트 허용

Load Balancer 설정 (ALB)

EC2 → Load Balancers → 생성
유형: 인스턴스
리스너: HTTP 80
VPC 및 퍼블릭 서브넷 선택
상태검사(Health check)

프로토콜: HTTP

경로: /
Application Load Balancer 생성

체계: 인터넷 경계

퍼블릭 서브넷 2개 이상 선택

대상 그룹 생성

Auto Scaling Group 설정

EC2 콘솔 > Auto Scaling Group > 생성
이름: fastapi-asg
Launch Template 선택
네트워크: 퍼블릭 서브넷 2개 이상 선택
로드밸런싱: 기존 로드밸런서에 연결 > 로드 밸런서 대상 그룹에서 선택
최소: 1 / 최대: 3 / 시작 용량: 1

부하 테스트 (ab)

# 로컬에서 실행
brew install httpd

ab -n 10000 -c 100 http://<ALB-DNS>/

확인 사항
- Target Group > 등록 대상 → 인스턴스 수 증가
- 상태 Healthy 유지 확인

주요 오류 & 해결 과정

오류 메시지	원인	해결 방법
`Permission denied (publickey)`	키 경로 또는 권한 문제	`.pem` 파일 권한 `chmod 400`, 경로 확인
`no matching manifest for linux/amd64`	Docker 이미지 아키텍처 불일치	`buildx`로 멀티 아키텍처 이미지 빌드 및 푸시
`curl: Failed to connect to localhost port 80`	컨테이너가 비정상 종료됨	컨테이너 재시작 (`docker run ...`)
Target Group 상태 Unhealthy	FastAPI 미실행 / 포트 불일치	컨테이너가 80포트로 실행 중인지 확인 (`docker ps`, `curl localhost`)
`scp: ~/Dockerfile: No such file or directory`	경로 오기 또는 잘못된 호스트	EC2에서 정확한 파일 경로 확인 후 복사

spring - 기본3

Wed, 12 Mar 2025 14:00:00 +0000

인프런 김영한님 스프링 핵심 원리 - 기본편 강의를 듣고 정리한 내용입니다
https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-%ED%95%B5%EC%8B%AC-%EC%9B%90%EB%A6%AC-%EA%B8%B0%EB%B3%B8%ED%8E%B8/dashboard

1. 스프링 컨테이너 생성
2. 컨테이너에 등록된 모든 빈 조회
3. 스프링 빈 조회 - 기본
4. 스프링 빈 조회 - 동일한 타입이 둘 이상
5. 스프링 빈 조회 - 상속 관계
6. BeanFactory와 ApplicationContext
7. 스프링 빈 설정 메타 정보 - BeanDefinition

스프링 컨테이너와 스프링 빈

스프링 컨테이너 생성

ApplicationContext applicationContext = new AnnotationConfigApplicationContext(AppConfig.class);

ApplicationContext
- 스프링 컨테이너
- 인터페이스
스프링 컨테이너를 생성할 때는 구성 정보를 지정해주어야 함
- 여기서는 AppConfig.class 를 구성 정보로 지정

스프링 빈 등록

스프링 컨테이너는 파라미터로 넘어온 설정 클래스 정보를 사용해서 스프링 빈을 등록
@Bean(name="memberService2")
- 빈 이름은 메서드 이름을 사용하지만 직접 부여도 가능
- 대신 빈 이름은 꼭 다르게 부여해야함

스프링 빈 의존관계 설정

스프링 컨테이너는 설정 정보를 참고해서 의존관계를 주입(DI)

컨테이너에 등록된 모든 빈 조회

package hello.core.beanfind;

import hello.core.AppConfig;
import org.junit.jupiter.api.DisplayName;
import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.config.BeanDefinition;
import org.springframework.context.annotation.AnnotationConfigApplicationContext;

public class ApplicationContextInfoTest {

    AnnotationConfigApplicationContext ac = new AnnotationConfigApplicationContext(AppConfig.class);

    @Test
    @DisplayName("모든 빈 출력")
    //스프링에 등록된 모든 빈 정보를 출력
    void findAllBean(){
        String[] beanDefinitionNames = ac.getBeanDefinitionNames();
        //ac.getBeanDefinitionNames(): 스프링에 등록된 모든 빈 이름 조회
        for (String beanDefinitionName : beanDefinitionNames) {
            Object bean = ac.getBean(beanDefinitionName);
            //ac.getBean(): 빈 이름으로 빈 객체 조회
            System.out.println(beanDefinitionName + "bean = " + bean);//soutv로 자동완성
        } //iter + tab으로 리스트나 배열 for문 간단하게 만들 수 있음
    }

    @Test
    @DisplayName("애플리케이션 빈 출력")
    //스프링이 내부에서 사용하는 빈은 제외하고, 내가 등록한 빈만 출력
    void findApplicationBean(){
        String[] beanDefinitionNames = ac.getBeanDefinitionNames();
        for (String beanDefinitionName : beanDefinitionNames) {
            BeanDefinition beanDefinition = ac.getBeanDefinition(beanDefinitionName);

            if (beanDefinition.getRole() == BeanDefinition.ROLE_APPLICATION) {
                Object bean = ac.getBean(beanDefinitionName);
                System.out.println(beanDefinitionName + "bean = " + bean);
            }
            //ROLE_APPLICATION: 직접 등록한 애플리케이션 빈 
            //ROLE_INFRASTRUCTURE: 스프링이 내부에서 사용하는 빈
        }
    }
}

스프링 빈 조회 - 기본

ac.getBean(빈이름, 타입)
ac.getBean(타입)
조회 대상 스프링 빈이 없으면 예외 발생
- NoSuchBeanDefinitionException: No bean named 'xxxxx' available ```java package hello.core.beanfind;

import hello.core.AppConfig; import hello.core.member.MemberService; import hello.core.member.MemberServiceImpl; import org.junit.jupiter.api.Assertions; import org.junit.jupiter.api.DisplayName; import org.junit.jupiter.api.Test; import org.springframework.beans.factory.NoSuchBeanDefinitionException; import org.springframework.context.annotation.AnnotationConfigApplicationContext;

import static org.assertj.core.api.AssertionsForClassTypes.assertThat;

public class ApplicationContextBasicFindTest { AnnotationConfigApplicationContext ac = new AnnotationConfigApplicationContext(AppConfig.class); @Test @DisplayName(“빈 이름으로 조회”) void findBeanByName() { MemberService memberService = ac.getBean(“memberService”, MemberService.class); assertThat(memberService).isInstanceOf(MemberServiceImpl.class); } @Test @DisplayName(“이름 없이 타입만으로 조회”) void findBeanByType() { MemberService memberService = ac.getBean(MemberService.class); assertThat(memberService).isInstanceOf(MemberServiceImpl.class); } @Test @DisplayName(“구체 타입으로 조회”) void findBeanByName2() { MemberServiceImpl memberService = ac.getBean(“memberService”, MemberServiceImpl.class); assertThat(memberService).isInstanceOf(MemberServiceImpl.class); } @Test @DisplayName(“빈 이름으로 조회X”) void findBeanByNameX() { //ac.getBean(“xxxxx”, MemberService.class); Assertions.assertThrows(NoSuchBeanDefinitionException.class, () -> ac.getBean(“xxxxx”, MemberService.class)); //오른쪽 로직을 실행할 때 왼쪽 예외가 터지는지 확인 } }

## 스프링 빈 조회 - 동일한 타입이 둘 이상
- 타입으로 조회시 같은 타입의 스프링 빈이 둘 이상이면 오류 발생 -> 이때는 빈 이름을 지정해야함

- `ac.getBeansOfType()` 을 사용하면 해당 타입의 모든 빈을 조회 가능
```java
package hello.core.beanfind;

import hello.core.member.MemberRepository;
import hello.core.member.MemoryMemberRepository;
import org.junit.jupiter.api.DisplayName;
import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.NoUniqueBeanDefinitionException;
import org.springframework.context.annotation.AnnotationConfigApplicationContext;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

import java.util.Map;

import static org.assertj.core.api.AssertionsForClassTypes.assertThat;
import static org.junit.jupiter.api.Assertions.assertThrows;

public class ApplicationContextSameBeanFindTest {
    AnnotationConfigApplicationContext ac = new
            AnnotationConfigApplicationContext(SameBeanConfig.class);

    @Test
    @DisplayName("타입으로 조회시 같은 타입이 둘 이상 있으면, 중복 오류가 발생한다") 
    void findBeanByTypeDuplicate() {
        //MemberRepository bean = ac.getBean(MemberRepository.class);
        assertThrows(NoUniqueBeanDefinitionException.class, () ->
                ac.getBean(MemberRepository.class));
    }
    @Test
    @DisplayName("타입으로 조회시 같은 타입이 둘 이상 있으면, 빈 이름을 지정하면 된다") 
    void findBeanByName() {
        MemberRepository memberRepository = ac.getBean("memberRepository1",
                MemberRepository.class);
        assertThat(memberRepository).isInstanceOf(MemberRepository.class);
    }
    @Test
    @DisplayName("특정 타입을 모두 조회하기") 
    void findAllBeanByType() {
        Map<String, MemberRepository> beansOfType =
                ac.getBeansOfType(MemberRepository.class);
        for (String key : beansOfType.keySet()) {
            System.out.println("key = " + key + " value = " +
                    beansOfType.get(key));
        }
        System.out.println("beansOfType = " + beansOfType);
        assertThat(beansOfType.size()).isEqualTo(2);
    }
    @Configuration
    static class SameBeanConfig {
        @Bean
        public MemberRepository memberRepository1() {
            return new MemoryMemberRepository();
        }
        @Bean
        public MemberRepository memberRepository2() {
            return new MemoryMemberRepository();
        }

    }
}

스프링 빈 조회 - 상속 관계

부모 타입으로 조회하면, 자식 타입도 함께 조회됨 -> 모든 자바 객체의 최고 부모인 Object 타입으로 조회하면 모든 스프링 빈을 조회 ```java package hello.core.beanfind;

import hello.core.discount.DiscountPolicy; import hello.core.discount.FixDiscountPolicy; import hello.core.discount.RateDiscountPolicy; import org.junit.jupiter.api.DisplayName; import org.junit.jupiter.api.Test; import org.springframework.beans.factory.NoUniqueBeanDefinitionException; import org.springframework.context.annotation.AnnotationConfigApplicationContext; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration;

import java.util.Map;

import static org.assertj.core.api.AssertionsForClassTypes.assertThat; import static org.junit.jupiter.api.Assertions.assertThrows;

public class ApplicationContextExtendsFindTest { AnnotationConfigApplicationContext ac = new AnnotationConfigApplicationContext(TestConfig.class); @Test @DisplayName(“부모 타입으로 조회시, 자식이 둘 이상 있으면, 중복 오류가 발생한다”) void findBeanByParentTypeDuplicate() { //DiscountPolicy bean = ac.getBean(DiscountPolicy.class); assertThrows(NoUniqueBeanDefinitionException.class, () -> ac.getBean(DiscountPolicy.class)); } @Test @DisplayName(“부모 타입으로 조회시, 자식이 둘 이상 있으면, 빈 이름을 지정하면 된다”) void findBeanByParentTypeBeanName() { DiscountPolicy rateDiscountPolicy = ac.getBean(“rateDiscountPolicy”, DiscountPolicy.class); assertThat(rateDiscountPolicy).isInstanceOf(RateDiscountPolicy.class); } @Test @DisplayName(“특정 하위 타입으로 조회”) void findBeanBySubType() { RateDiscountPolicy bean = ac.getBean(RateDiscountPolicy.class); assertThat(bean).isInstanceOf(RateDiscountPolicy.class); } @Test @DisplayName(“부모 타입으로 모두 조회하기”) void findAllBeanByParentType() { Map<String, DiscountPolicy> beansOfType = ac.getBeansOfType(DiscountPolicy.class); assertThat(beansOfType.size()).isEqualTo(2); for (String key : beansOfType.keySet()) { System.out.println(“key = “ + key + “ value=” + beansOfType.get(key)); } } @Test @DisplayName(“부모 타입으로 모두 조회하기 - Object”) void findAllBeanByObjectType() { Map<String, Object> beansOfType = ac.getBeansOfType(Object.class); for (String key : beansOfType.keySet()) { System.out.println(“key = “ + key + “ value=” + beansOfType.get(key)); } } @Configuration static class TestConfig { @Bean public DiscountPolicy rateDiscountPolicy() { return new RateDiscountPolicy(); } @Bean public DiscountPolicy fixDiscountPolicy() { return new FixDiscountPolicy(); } } } ```

BeanFactory와 ApplicationContext

BeanFactory
- 스프링 컨테이너의 최상위 인터페이스
- 스프링 빈을 관리하고 조회하는 역할 담당
- getBean() 을 제공
- 지금까지 우리가 사용했던 대부분의 기능 제공
ApplicationContext
- BeanFactory 기능을 모두 상속받아서 제공
- BeanFactory + 부가기능
- 부가기능
  1. 메시지소스를 활용한 국제화 기능
    
    한국에서 들어오면 한국어로, 영어권에서 들어오면 영어로 출력
  2. 환경변수
    
    로컬, 개발, 운영등을 구분해서 처리
  3. 애플리케이션 이벤트
    
    이벤트를 발행하고 구독하는 모델을 편리하게 지원
  4. 편리한 리소스 조회
    
    파일, 클래스패스, 외부 등에서 리소스를 편리하게 조회

스프링 빈 설정 메타 정보 - BeanDefinition

BeanDefinition: 빈 설정 메타정보
스프링 컨테이너는 자바 코드이든 XML이든 상관없이 BeanDefinition을 만들기만 하면 되기 때문에 다양한 설정 형식 지원 가능
@Bean , <bean> 당 각각 하나씩 메타 정보가 생성됨
- XxxBeanDefinitionReader를 만들어서 BeanDefinition 을 생성
BeanDefinition 정보
- BeanClassName: 생성할 빈의 클래스 명(자바 설정 처럼 팩토리 역할의 빈을 사용하면 없음)
- factoryBeanName: 팩토리 역할의 빈을 사용할 경우 이름
  - 예) appConfig
- factoryMethodName: 빈을 생성할 팩토리 메서드 지정
  - 예) memberService
- Scope: 싱글톤(기본값)
- lazyInit: 스프링 컨테이너를 생성할 때 빈을 생성하는 것이 아니라, 실제 빈을 사용할 때 까지 최대한 생성을 지연 처리 하는지 여부
- InitMethodName: 빈을 생성하고, 의존관계를 적용한 뒤에 호출되는 초기화 메서드 명
- DestroyMethodName: 빈의 생명주기가 끝나서 제거하기 직전에 호출되는 메서드 명
- Constructor arguments, Properties: 의존관계 주입에서 사용한다. (자바 설정 처럼 팩토리 역할의 빈을 사용 하면 없음)
BeanDefinition을 직접 생성해서 스프링 컨테이너에 등록할 수 도 있음

spring - 기본2

Mon, 03 Mar 2025 14:00:00 +0000

인프런 김영한님 스프링 핵심 원리 - 기본편 강의를 듣고 정리한 내용입니다
https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-%ED%95%B5%EC%8B%AC-%EC%9B%90%EB%A6%AC-%EA%B8%B0%EB%B3%B8%ED%8E%B8/dashboard

1. 새로운 할인 정책 개발
2. 새로운 할인 정책 적용과 문제점
3. 관심사의 분리
4. AppConfig 리팩터링
5. 새로운 구조와 할인 정책 적용
6. 좋은 객체 지향 설계의 5가지 원칙의 적용
7. IoC, DI, 그리고 컨테이너
8. 스프링으로 전환하기

객체 지향 원리 적용

새로운 할인 정책 개발

정률 할인으로 변경
RateDiscountPolicy 추가

discount > RateDiscountPolicy

package hello.core.discount;
import hello.core.member.Grade;
import hello.core.member.Member;
public class RateDiscountPolicy implements DiscountPolicy {
    private int discountPercent = 10; //10% 할인 

    @Override
    public int discount(Member member, int price) {
        if (member.getGrade() == Grade.VIP) {
            return price * discountPercent / 100;
        } else {
            return 0;
        }
    }
}

📌 cmd + shift + t 해서 테스트 파일 만들고 할인 잘 되는지 확인

package hello.core.discount;

import hello.core.member.Grade;
import hello.core.member.Member;
import org.junit.jupiter.api.DisplayName;
import org.junit.jupiter.api.Test;

import static org.assertj.core.api.Assertions.*;
import static org.junit.jupiter.api.Assertions.*;

class RateDiscountPolicyTest {
    RateDiscountPolicy discountPolicy = new RateDiscountPolicy();
    @Test
    @DisplayName("VIP는 10% 할인이 적용되어야 한다.") 
    void vip_o() {
        //given
        Member member = new Member(1L, "memberVIP", Grade.VIP);
        //when
        int discount = discountPolicy.discount(member, 10000);
        //then
        assertThat(discount).isEqualTo(1000);
    }
    @Test
    @DisplayName("VIP가 아니면 할인이 적용되지 않아야 한다.") 
    void vip_x() {
        //given
        Member member = new Member(2L, "memberBASIC", Grade.BASIC);
        //when
        int discount = discountPolicy.discount(member, 10000);
        //then
        assertThat(discount).isEqualTo(0);
    }

}

새로운 할인 정책 적용과 문제점

할인 정책을 변경하려면 클라이언트인 OrderServiceImpl 코드를 고쳐야 함

FixDiscountPolicy -> RateDiscountPolicy

order > OrderServiceImpl

public class OrderServiceImpl implements OrderService {
 //    private final DiscountPolicy discountPolicy = new FixDiscountPolicy();
     private final DiscountPolicy discountPolicy = new RateDiscountPolicy();
 }

이 방식은 SOLID 방식에서 두가지를 위반 중

DIP

지금 클래스는 인터페이스 뿐만 아니라 구현체에도 의존하고 있음

DiscountPolicy 인터페이스에만 의존해야하지만 FixDiscountPolicy, RateDiscountPolicy 둘 다에 의존

기대했던 의존관계

실제 의존관계
OCP

기능을 확장해서 변경할 때 클라이언트 코드에 영향을 주고 있음

FixDiscountPolicy를 RateDiscountPolicy로 변경하는 순간 OrderServiceImpl 의 소스 코드도 함께 변경해야함

✅ 인터페이스에만 의존하도록 설계를 변경

하지만 인터페이스에만 의존하도록 코드를 변경하면

public class OrderServiceImpl implements OrderService {
     //private final DiscountPolicy discountPolicy = new RateDiscountPolicy();
     private DiscountPolicy discountPolicy;
}

구현체가 없기 때문에 코드가 실행될 수 없음
실제 실행을 해보면 NPE(null pointer exception)가 발생

✅ 누군가가 클라이언트인 OrderServiceImpl 에 DiscountPolicy 의 구현 객체를 대신 생성하고 주입해주어야 함

관심사의 분리

AppConfig

애플리케이션의 전체 동작 방식을 구성(config)하기 위해, 구현 객체를 생성하고, 연결하는 책임을 가지는 별도의 설정 클래스

AppConfig

package hello.core;
import hello.core.discount.FixDiscountPolicy;
import hello.core.member.MemberService;
import hello.core.member.MemberServiceImpl;
import hello.core.member.MemoryMemberRepository;
import hello.core.order.OrderService;
import hello.core.order.OrderServiceImpl;
public class AppConfig {
    public MemberService memberService() {
        return new MemberServiceImpl(new MemoryMemberRepository());
}
    public OrderService orderService() {
        return new OrderServiceImpl(
                new MemoryMemberRepository(),
                new FixDiscountPolicy());
    }
}

애플리케이션의 실제 동작에 필요한 구현 객체를 생성

MemberServiceImpl

MemoryMemberRepository

OrderServiceImpl

FixDiscountPolicy

생성한 객체 인스턴스의 참조(레퍼런스)를 생성자를 통해서 주입(연결)

MemberServiceImpl -> MemoryMemberRepository

OrderServiceImpl -> MemoryMemberRepository, FixDiscountPolicy

member > MemberServiceImpl

  package hello.core.member;
  public class MemberServiceImpl implements MemberService {
      //private final MemberRepository memberRepository = new MemoryMemberRepository();
      private final MemberRepository memberRepository;
      public MemberServiceImpl(MemberRepository memberRepository) {
          this.memberRepository = memberRepository;
  }
      public void join(Member member) {
          memberRepository.save(member);
  }
      public Member findMember(Long memberId) {
          return memberRepository.findById(memberId);
  } }

이제 MemberServiceImpl 은 MemoryMemberRepository(구체화) 를 의존하지 않고 MemberRepository 인터페이스(추상화)만 의존
MemberServiceImpl 의 생성자를 통해서 어떤 구현 객체를 주입할지는 오직 외부( AppConfig )에서 결정
✅ MemberServiceImpl 은 이제부터 의존관계에 대한 고민은 외부에 맡기고 실행에만 집중하면 된다.
비슷하게 OrderServiceImpl도 수정

appConfig 객체는 memoryMemberRepository 객체를 생성
그 참조값을 memberServiceImpl 을 생성하면서 생성자로 전달

✅ 클라이언트인 memberServiceImpl 입장에서 보면 의존관계를 마치 외부에서 주입해주는 것 같다고 해서 DI(Dependency Injection) 우리말로 의존관계 주입 또는 의존성 주입이라 부름

MemberApp

package hello.core;

import hello.core.member.Grade;
import hello.core.member.Member;
import hello.core.member.MemberService;

public class MemberApp {
    public static void main(String[] args) {
        //MemberService memberService = new MemberServiceImpl();
        AppConfig appConfig = new AppConfig();
        MemberService memberService = appConfig.memberService();
        Member member = new Member(1L, "A", Grade.VIP);
        memberService.join(member);

        Member findMember = memberService.findMember(1L);
        System.out.println("new member = " + member.getName());
        System.out.println("find Member = " + findMember.getName());
    }
}

OrderApp도 비슷하게 구성

테스트 코드 오류도 수정

class MemberServiceTest {
    MemberService memberService;
    @BeforeEach
    public void beforeEach() {
        AppConfig appConfig = new AppConfig();
        memberService = appConfig.memberService();
    }
    //생략..
}


class OrderServiceTest {
    MemberService memberService;
    OrderService orderService;
    @BeforeEach
    public void beforeEach() {
        AppConfig appConfig = new AppConfig();
        memberService = appConfig.memberService();
        orderService = appConfig.orderService();
    } 
    //생략..
}

AppConfig 리팩터링

현재 AppConfig

중복

new MemoryMemberRepository()
역할에 따른 구현이 잘 안 보임

📌 option + command + m 으로 리팩토링 -> 중복된 거도 같이 고쳐줌

package hello.core;

import hello.core.discount.DiscountPolicy;
import hello.core.discount.FixDiscountPolicy;
import hello.core.member.MemberRepository;
import hello.core.member.MemberService;
import hello.core.member.MemberServiceImpl;
import hello.core.member.MemoryMemberRepository;
import hello.core.order.OrderService;
import hello.core.order.OrderServiceImpl;

public class AppConfig {
    public MemberService memberService() {
        return new MemberServiceImpl(memberRepository());
    }
    public OrderService orderService() {
        return new OrderServiceImpl(
                memberRepository(),
                discountPolicy());
    }
    public MemberRepository memberRepository() {
        return new MemoryMemberRepository();
    }
    public DiscountPolicy discountPolicy() {
        return new FixDiscountPolicy();
    }


}

역할에 따른 구현이 잘 보임

새로운 구조와 할인 정책 적용

FixDiscountPolicy -> RateDiscountPolicy AppConfig만 수정

public DiscountPolicy discountPolicy() {
//        return new FixDiscountPolicy();
        return new RateDiscountPolicy();
    }

좋은 객체 지향 설계의 5가지 원칙의 적용

SRP 단일 책임 원칙:

한 클래스는 하나의 책임만 가져야 한다.

구현 객체를 생성하고 연결하는 책임은 AppConfig가 담당

클라이언트 객체는 실행하는 책임만 담당

DIP 의존관계 역전 원칙

프로그래머는 “추상화에 의존해야지, 구체화에 의존하면 안된다.” 의존성 주입은 이 원칙을 따르는 방법 중 하나다.

새로운 할인 정책을 개발하고, 적용하려고 하니 클라이언트 코드도 함께 변경해야 했음(왜냐하면 기존 클라이언트 코드는 DiscountPolicy 추상화 인터페이스와 FixDiscountPolicy 구체화 구현 클래스에도 함께 의존했기 때문)

클라이언트 코드가 DiscountPolicy 추상화 인터페이스에만 의존하도록 코드를 변경

-> 하지만 클라이언트 코드는 인터페이스만으로는 아무것도 실행할 수 없음

-> AppConfig가 FixDiscountPolicy 객체 인스턴스를 클라이언트 코드 대신 생성해서 클라이언트 코드에 의존관계 주입

OCP

소프트웨어 요소는 확장에는 열려 있으나 변경에는 닫혀 있어야 한다

다형성 사용하고 클라이언트가 DIP를 지킴

애플리케이션을 사용 영역과 구성 영역으로 나눔

-> AppConfig가 의존관계를 FixDiscountPolicy RateDiscountPolicy 로 변경해서 클라이언트 코드에 주입하므로 클라이언트 코드는 변경하지 않아도 됨

소프트웨어 요소를 새롭게 확장해도 사용 영역의 변경은 닫혀 있다!

IoC, DI, 그리고 컨테이너

제어의 역전 IoC(Inversion of Control)

구현 객체는 자신의 로직을 실행하는 역할만 담당하고 프로그램의 제어 흐름은 이제 AppConfig가 가져감

프로그램의 제어 흐름을 직접 제어하는 것이 아니라 외부에서 관리하는 것

의존관계 주입 DI(Dependency Injection)
- 정적인 클래스 의존관계
  
  클래스가 사용하는 import 코드만 보고 의존관계를 쉽게 판단 가능
- 동적인 객체 인스턴스 의존 관계
  
  애플리케이션 실행 시점에 실제 생성된 객체 인스턴스의 참조가 연결된 의존 관계
  
  의존관계 주입을 사용하면 클라이언트 코드를 변경하지 않고 클라이언트가 호출하는 대상의 타입 인스턴스를 변 경 가능
  
  의존관계 주입을 사용하면 정적인 클래스 의존관계를 변경하지 않고 동적인 객체 인스턴스 의존관계를 쉽게 변경 가능
IoC 컨테이너, DI 컨테이너

AppConfig 처럼 객체를 생성하고 관리하면서 의존관계를 연결해 주는 것

어샘블러, 오브젝트 팩토리라고도 함

스프링으로 전환하기

AppConfig

package hello.core;

import hello.core.discount.DiscountPolicy;
import hello.core.discount.FixDiscountPolicy;
import hello.core.discount.RateDiscountPolicy;
import hello.core.member.MemberService;
import hello.core.member.MemberServiceImpl;
import hello.core.member.MemoryMemberRepository;
import hello.core.order.OrderService;
import hello.core.order.OrderServiceImpl;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

@Configuration
public class AppConfig {

    @Bean
    public MemberService memberService() {
        return new MemberServiceImpl(memberRepository());
    }
    
    @Bean
    public MemoryMemberRepository memberRepository() {
        return new MemoryMemberRepository();
    }

    @Bean
    public OrderService orderService() {
        return new OrderServiceImpl(
                memberRepository(),
                discountPolicy());
    }

    @Bean
    public DiscountPolicy discountPolicy() {
//        return new FixDiscountPolicy();
        return new RateDiscountPolicy();
    }

}

설정을 구성한다는 뜻의 @Configuration 을 붙여주기
각 메서드에 @Bean 을 붙여주기 -> 스프링 컨테이너에 스프링 빈으로 등록됨 MemberApp ```java package hello.core;

import hello.core.member.Grade; import hello.core.member.Member; import hello.core.member.MemberService; import org.springframework.context.ApplicationContext; import org.springframework.context.annotation.AnnotationConfigApplicationContext;

public class MemberApp { public static void main(String[] args) { //MemberService memberService = new MemberServiceImpl(); // AppConfig appConfig = new AppConfig(); // MemberService memberService = appConfig.memberService();

    ApplicationContext applicationContext = new AnnotationConfigApplicationContext(AppConfig.class);
    MemberService memberService = applicationContext.getBean("memberService", MemberService.class);

    Member member = new Member(1L, "A", Grade.VIP);
    memberService.join(member);

    Member findMember = memberService.findMember(1L);
    System.out.println("new member = " + member.getName());
    System.out.println("find Member = " + findMember.getName());
} } ```

OrderApp

package hello.core;

import hello.core.member.Grade;
import hello.core.member.Member;
import hello.core.member.MemberService;
import hello.core.member.MemberServiceImpl;
import hello.core.order.Order;
import hello.core.order.OrderService;
import hello.core.order.OrderServiceImpl;
import org.springframework.context.ApplicationContext;
import org.springframework.context.annotation.AnnotationConfigApplicationContext;

public class OrderApp {
    public static void main(String[] args) {
        //MemberService memberService = new MemberServiceImpl();
        //OrderService orderService = new OrderServiceImpl();
//        AppConfig appConfig = new AppConfig();
//        MemberService memberService = appConfig.memberService();
//        OrderService orderService = appConfig.orderService();

        ApplicationContext applicationContext = new AnnotationConfigApplicationContext(AppConfig.class);
        MemberService memberService = applicationContext.getBean("memberService", MemberService.class);
        OrderService orderService = applicationContext.getBean("orderService", OrderService.class);

        Long memberId = 1L;
        Member member = new Member(memberId, "memberA", Grade.VIP);
        memberService.join(member);
        Order order = orderService.createOrder(memberId, "itemA", 10000);
        System.out.println("order = " + order);
    }
}

ApplicationContext: 스프링 컨테이너
스프링 컨테이너는 @Configuration 이 붙은 AppConfig 를 설정(구성) 정보로 사용
- 여기서 @Bean 이라 적힌 메서드를 모두 호출해서 반환된 객체를 스프링 컨테이너에 등록
- 스프링 컨테이너에 등록된 객체를 스프링 빈이라 함
스프링 컨테이너를 통해서 필요한 스프링 빈(객체)를 찾아야 함
- 스프링 빈은 applicationContext.getBean() 메서드를 사용 해서 찾을 수 있음

spring - 기본1

Wed, 26 Feb 2025 14:00:00 +0000

인프런 김영한님 스프링 핵심 원리 - 기본편 강의를 듣고 정리한 내용입니다
https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-%ED%95%B5%EC%8B%AC-%EC%9B%90%EB%A6%AC-%EA%B8%B0%EB%B3%B8%ED%8E%B8/dashboard

예제 만들기

비즈니스 요구사항과 설계

회원
- 회원을 가입하고 조회할 수 있다.
- 회원은 일반과 VIP 두 가지 등급이 있다.
- 회원 데이터는 자체 DB를 구축할 수 있고, 외부 시스템과 연동할 수 있다. (미확정)
주문과 할인 정책
- 회원은 상품을 주문할 수 있다.
- 회원 등급에 따라 할인 정책을 적용할 수 있다.
- 할인 정책은 모든 VIP는 1000원을 할인해주는 고정 금액 할인을 적용해달라. (나중에 변경 될 수 있다.)
- 할인 정책은 변경 가능성이 높다. 회사의 기본 할인 정책을 아직 정하지 못했고, 오픈 직전까지 고민을 미루 고 싶다. 최악의 경우 할인을 적용하지 않을 수 도 있다. (미확정)

회원 도메인 설계

아직 어떤 DB를 사용할지 모르기 때문에 Memory Repo 와 DB Repo가 다름

회원 도메인 개발

회원 등급

member > Grade

package hello.core.member;
public enum Grade {
    BASIC,
    VIP
}

회원 엔티티

member > Member

constructor와 getter setter 만들기

package hello.core.member;

public class Member {

    private Long id;
    private String name;
    private  Grade grade;

    public Member(Long id, String name, Grade grade) {
        this.id = id;
        this.name = name;
        this.grade = grade;
    }

    public Long getId() {
        return id;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Grade getGrade() {
        return grade;
    }

    public void setGrade(Grade grade) {
        this.grade = grade;
    }
}

회원 저장소 인터페이스

member > MemberRepository

package hello.core.member;

public interface MemberRepository {
    void save(Member member);
    Member findById(Long memberId);
}

메모리 회원 저장소 구현체

member > MemoryMemberRepository
save와 findByID를 override

package hello.core.member;

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

public class MemoryMemberRepository implements MemberRepository {

    private static Map<Long, Member> store = new HashMap<>();

    @Override
    public void save(Member member) {
        store.put(member.getId(), member);
    }

    @Override
    public Member findById(Long memberId) {
        return store.get(memberId);
    }
}

회원 서비스 인터페이스

member > MemberService

package hello.core.member;

public interface MemberService {
    void join(Member member);
    Member findMember(Long memberId);
}

회원 서비스 구현체

한 인터페이스 아래에 구현체가 하나면은 이렇게 이름을 짓는게 좋다
member > MemberServiceImpl

package hello.core.member;

public class MemberServiceImpl implements  MemberService{

    private final MemberRepository memberRepository = new MemoryMemberRepository();

    @Override
    public void join(Member member) {
        memberRepository.save(member);

    }

    @Override
    public Member findMember(Long memberId) {
        return memberRepository.findById(memberId);
    }
}

회원 도메인 실행과 테스트

테스트 코드 ```java package hello.core.member;

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

public class MemberServiceTest {

MemberService memberService = new MemberServiceImpl();

@Test
void join(){
    //given
    Member member = new Member(1L, "A", Grade.VIP);

    //when
    memberService.join(member);
    Member findMember = memberService.findMember(1L);

    //then
    Assertions.assertThat(member).isEqualTo(findMember);
} } ``` member 하나 만들고 이걸 join -> findMember로 찾음 -> 내가 만든 member와 찾은 findMember가 같은지 Assertions로 확인

✅ 현재까지의 설계는 의존관계가 인터페이스 뿐만 아니라 구현까지 모두 의존하는 문제점이 있음(추상화에도 의존, 구체화에도 의존)

주문과 할인 도메인 설계

주문 생성

클라이언트는 주문 서비스에 주문 생성을 요청
회원 조회

할인을 위해서는 회원 등급이 필요 -> 주문 서비스는 회원 저장소에서 회원을 조회
할인 적용

주문 서비스는 회원 등급에 따른 할인 여부를 할인 정책에 위임
주문 결과 반환

주문 서비스는 할인 결과를 포함한 주문 결과를 반환

주문과 할인 도메인 개발

할인 정책 인터페이스

discount > DiscountPolicy

package hello.core.discount;

import hello.core.member.Member;

public interface DiscountPolicy {
    int discount(Member member, int price); //할인 금액 return
}

정액 할인 정책 구현체

VIP면 1000원 할인 해주고 아니면 안 해줌
discount > FixDiscountPolicy

package hello.core.discount;

import hello.core.member.Grade;
import hello.core.member.Member;

public class FixDiscountPolicy implements DiscountPolicy{

    private int discountFixAmount = 1000;
    
    @Override
    public int discount(Member member, int price) {
        if (member.getGrade() == Grade.VIP){
            return discountFixAmount;
        } else {
            return 0;
        }
    }
}

주문 엔티티

constructor와 getter setter 만들기
order > Order

package hello.core.order;

public class Order {
    private Long memberId;
    private String itemName;
    private int itemPrice;
    private int discountPrice;

    public Order(Long memberId, String itemName, int itemPrice, int discountPrice) {
        this.memberId = memberId;
        this.itemName = itemName;
        this.itemPrice = itemPrice;
        this.discountPrice = discountPrice;
    }

    public int calculatePrice(){
        return itemPrice - discountPrice;
    } //원래 금액 - 할인 금액

    public Long getMemberId() {
        return memberId;
    }

    public void setMemberId(Long memberId) {
        this.memberId = memberId;
    }

    public String getItemName() {
        return itemName;
    }

    public void setItemName(String itemName) {
        this.itemName = itemName;
    }

    public int getItemPrice() {
        return itemPrice;
    }

    public void setItemPrice(int itemPrice) {
        this.itemPrice = itemPrice;
    }

    public int getDiscountPrice() {
        return discountPrice;
    }

    public void setDiscountPrice(int discountPrice) {
        this.discountPrice = discountPrice;
    }

    @Override
    public String toString() {
        return "Order{" +
                "memberId=" + memberId +
                ", itemName='" + itemName + '\'' +
                ", itemPrice=" + itemPrice +
                ", discountPrice=" + discountPrice +
                '}';
    }
}

주문 서비스 인터페이스

order > OrderService

클라이언트는 주문 생성(=createOrder)할 때 파라미터로 회원id, 상품명, 상품가격을 넘김

package hello.core.order;
public interface OrderService {
    Order createOrder(Long memberId, String itemName, int itemPrice);
}

주문 서비스 구현체

order > OrderServiceImpl

package hello.core.order;

import hello.core.discount.DiscountPolicy;
import hello.core.discount.FixDiscountPolicy;
import hello.core.member.Member;
import hello.core.member.MemberRepository;
import hello.core.member.MemoryMemberRepository;

public class OrderServiceImpl implements OrderService {

    private final MemberRepository memberRepository = new MemoryMemberRepository(); //회원 찾기 위해 MemberRepository가 필요
    private final DiscountPolicy discountPolicy = new FixDiscountPolicy(); //할인 정책 찾기 위해 DiscountPolicy 필요

    @Override
    public Order createOrder(Long memberId, String itemName, int itemPrice) {
        Member member = memberRepository.findById(memberId);
        int discountPrice = discountPolicy.discount(member, itemPrice);
        
        return new Order(memberId, itemName, itemPrice, discountPrice);
    }
}

할인 여부를 할인 정책에 위임하고 할인결과만 받음으로써 단일체계 원칙을 지킴

주문과 할인 도메인 실행과 테스트

package hello.core.order;

import hello.core.member.Grade;
import hello.core.member.Member;
import hello.core.member.MemberService;
import hello.core.member.MemberServiceImpl;
import org.assertj.core.api.Assertions;
import org.junit.jupiter.api.Test;

public class OrderServiceTest {
    MemberService memberService = new MemberServiceImpl();
    OrderService orderService = new OrderServiceImpl();
    @Test
    void createOrder() {
        long memberId = 1L;
        Member member = new Member(memberId, "memberA", Grade.VIP);
        memberService.join(member);
        Order order = orderService.createOrder(memberId, "itemA", 10000);
        Assertions.assertThat(order.getDiscountPrice()).isEqualTo(1000);
    }
}

Spring Boot와 MySQL 연결 시 오류

Thu, 20 Feb 2025 12:00:00 +0000

Could not find mysql:mysql-connector-java

에러 내용

> Task :compileJava FAILED

Execution failed for task ':compileJava'.
> Could not resolve all files for configuration ':compileClasspath'.
   > Could not find mysql:mysql-connector-java:9.0.
     Required by:
         project :

Possible solution:
 - Declare repository providing the artifact, see the documentation at https://docs.gradle.org/current/userguide/declaring_repositories.html

에러 원인

의존성 문제인 것 같아서 버전도 붙여보고 별 거 다 해봤지만 계속 안돼서 구글링 했다

원래

build.gradle

implementation 'mysql:mysql-connector-java'
runtimeOnly 'mysql:mysql-connector-java'

로 의존성을 추가했었는데 그 사이에 뭐가 바뀌었나보다

해결 방법

8.0.31 버전 이후부터는 이렇게 해야 에러가 안 난다

implementation 'com.mysql:mysql-connector-j'
runtimeOnly 'com.mysql:mysql-connector-j'

aws - S3, CloudFront

Wed, 12 Feb 2025 12:00:00 +0000

인프런 JSCODE 박재성님 비전공자도 이해할 수 있는 AWS 입문/실전 강의를 듣고 정리한 내용입니다
https://www.inflearn.com/course/%EB%B9%84%EC%A0%84%EA%B3%B5%EC%9E%90-%EC%9D%B4%ED%95%B4%ED%95%A0%EC%88%98%EC%9E%88%EB%8A%94-aws-%EC%9E%85%EB%AC%B8%EC%8B%A4%EC%A0%84/dashboard

웹 서비스를 배포할 때 사용하는 S3, CloudFront

S3

파일 저장 서비스 뿐만 아니라 정적 웹 사이트 호스팅 기능도 함
웹 서비스를 다른 사용자들도 쓸 수 있게 인터넷에 배포

CloudFront란?

컨텐츠(파일, 동영상 등)를 빠르게 전송하게 해주는 서비스
CDN(Content Delivery Network)이라고도 함
전세계 곳곳에 컨텐츠(파일, 동영상)의 복사본을 저장해놓을 수 있는 임시 저장소를 구축해놓고 가장 가까운 임시 저장소에서 컨텐츠를 가져오면 훨씬 속도가 빨라짐
컨텐츠를 전송 받는 성능을 향상시키기 위해 사용
HTTPS를 적용하려면 CloudFront를 사용해야 함(S3에는 HTTPS를 적용시키는 기능을 제공x)
보안 강화

S3 버킷 생성하고 IAM 키 발급 받는 것 까진 동일

S3에 업로드하기 / 웹 호스팅 설정하기

S3에 배포할 웹 서비스 파일 업로드
S3에 정적 웹 사이트 호스팅 설정

버킷 > 속성 > 정적 웹 사이트 호스팅 > 편집
- 정적 웹 사이트 호스팅: 활성화
- 호스팅 유형: 정적 웹 사이트 호스팅
- 인덱스 문서: 업로드 한 파일
잘 배포됐는 지 체크
- 밑에 링크

CloudFront 생성하기

AWS > CloudFront > CloudFront 배포 생성

원본 도메인 입력
- 아까 만든 도메인 선택
- 웹 사이트 엔드포인트 사용 클릭
- S3 버킷 엔드포인트(static-practice.s3.ap-northeast-2.amazonaws.com)를 사용하지 말고 S3 정적 호스팅 웹 사이트의 엔드포인트(static-practice.s3-website.ap-northeast-2.amazonaws.com)를 사용
HTTP, HTTPS에 대한 정책 선택
- 기본 캐시 동작 > 뷰어 프로토콜 정책: Redirect HTTP to HTTPS
- HTTP로 들어오는 거 강제로 HTTPS로 변환
WAF 설정
- 웹 애플리케이션 방화벽(WAF): 보안 보호 비활성화
설정
- 가격 분류: 북미, 유럽, 아시아, 중동 및 아프리카에서 사용
- 기본값 루트 객체
  - 루트 url을 요청할 때 반환할 객체
  - 여기선 아까 업로드한 파일명
잘 배포됐는 지 확인
- 배포 도메인 이름 = CloudFront 주소

도메인 연결하기, HTTPS 적용하기

ACM에서 SSL/TLS 인증서 발급

AWS > Certificate Manager
- Cloudfront는 HTTPS를 적용하려면 인증서를 미국 동부(버지니아 북부)에서 발급받아야 함
- 리전: 버지니아 북부
- 인증서 요청
  - 도메인 이름은 내가 가지고 있는 도메인 이름 입력
- Route 53에서 레코드 생성
CloudFront 설정에서 SSL 인증서 추가

AWS > CloudFront
- 편집
  - Alternative domain name (CNAMEs) - optional: 내가 인증서 요청한 도메인 이름
  - Custom SSL certificate - optional: 아까 만든 인증서 선택
Route53에서 CloudFront에 도메인 연결

AWS > Route53 > 호스팅 영역 > 레코드 생성
- 별칭
  - CloudFront 배포에 대한 별칭 선택
  - 배포 선택
  - 레코드 생성
잘 접속되는 지, https 적용되는지 체크

비용 나가지 않게 S3, CloudFront 깔끔하게 종료하기

S3 종료
- 안에 있는 파일 삭제
- 버킷 삭제
CloudFront 비활성화
CloudFront 삭제

aws - S3

Tue, 11 Feb 2025 12:00:00 +0000

인프런 JSCODE 박재성님 비전공자도 이해할 수 있는 AWS 입문/실전 강의를 듣고 정리한 내용입니다
https://www.inflearn.com/course/%EB%B9%84%EC%A0%84%EA%B3%B5%EC%9E%90-%EC%9D%B4%ED%95%B4%ED%95%A0%EC%88%98%EC%9E%88%EB%8A%94-aws-%EC%9E%85%EB%AC%B8%EC%8B%A4%EC%A0%84/dashboard

S3

파일 저장 서비스

이미지 파일 업로드 과정

이미지가 저장된 S3 주소를 RDS에 저장
이미지 파일 다운로드 과정

S3 버킷 생성하기

버킷(Bucket)
- 깃허브의 레포지토리 같은 개념
- S3에서도 여러 개의 저장소를 만들 수 있는데 여기서 하나의 저장소를 버킷(Bucket)이라고 부름
객체(Object)
- S3 버킷에 업로드된 파일

AWS > S3 > 버킷 만들기

버킷 이름 설정
모든 퍼블릭 액세스 차단 해제
버킷 만들기
버킷에 정책 추가하기
- 정책(Policy)
  - 권한을 정의하는 JSON 문서
  - AWS는 기본적으로 대부분의 권한이 주어져있지 않아서 AWS의 특정 소스에 접근하려면 권한을 허용해주어야 함
- 버킷 > 권한 > 버킷 정책 > 편집 > 새 문 추가
  - 서비스 선택: s3
  - 이미지 조회 위한 GetObject 추가
  - 리소스 추가
    - 서비스 유형: object
    - 리소스 ARN: arn:aws:s3:::{내가 만든 버킷명}/*의 형식으로 입력
    - ARN(Amazon Resource Number): AWS에 존재하는 리소스를 표현하는 문법
    - 모든 객체들에 대해 권한 허용
  - "Principal": "*", 로 변경
    - 모두에게 이 권한 허용

IAM에서 액세스 키 발급받기

기본적으로 AWS의 리소스에 아무나 접근을 못하기 때문에 S3에 접근해서 파일을 업로드할 수가 없음

하지만 백엔드 서버가 S3에 접근해서 파일을 업로드할 수 있어야 하기 때문에 S3에 접근할 수 있는 권한을 받기 위해 IAM에서 액세스 키를 발급받아야 함

AWS > IAM > 액세스 관리 > 사용자 > 사용자 생성

사용자 이름 설정
권한 설정
- 권한 옵션: 직접 정책 연결
- 권한 정책
  - S3Full 검색해서 AmazonS3FullAccess 선택
액세스 키 만들기
- 사용자 > 보안 자격 증명 > 액세스 키 > 액세스 키 만들기
  - AWS 외부에서 실행되는 애플리케이션
  - 액세스 키 따로 저장해두기

비용 나가지 않게 S3 깔끔하게 종료하기

버킷 안에 있는 객체 전부 삭제
버킷 삭제

React Native - 기초2 Challenge

Mon, 10 Feb 2025 14:00:00 +0000

해당 내용은 노마드 코더의 React Native 강의를 보고 정리한 내용입니다. https://nomadcoders.co/react-native-for-beginners/lobby

목표

1. Work / Travel 상태 저장해놓고 앱 처음 켰을 때 그 상태에 있게 하기

const STORAGE_WORKING_KEY = "@working";

useEffect(() => {
    loadState();
    loadToDos();
  }, []);

const travel = () => {
    setWorking(false);
    saveState(false);
  }
  const work = () => {
    setWorking(true);
    saveState(true);
  }

const saveState = async (toSave) => {
    await AsyncStorage.setItem(STORAGE_WORKING_KEY, JSON.stringify(toSave));
  };

const loadState = async () => {
    const a = await AsyncStorage.getItem(STORAGE_WORKING_KEY);
    a !== null ? setWorking(JSON.parse(a)) : null;
  };

const doneToDo = async (key) => {
    const newToDos = {
      ...toDos,
      [key]: { ...toDos[key], completed: !toDos[key].completed },
    };
    setToDos(newToDos);
    await saveToDos(newToDos);
  };

work 상태일 때 saveState(true);을 호출하여 새로운 상태를 AsyncStorage에 저장

2. list에 todo 상태 볼 수 있게 하기

todo 아이콘 두기
completed 상태 넣어서 bool 값
함수 만들고 키 값으로 찾아서 completed 수정 -> newState

const doneToDo = async (key) => {
    const newToDos = {
      ...toDos,
      [key]: { ...toDos[key], completed: !toDos[key].completed },
    };
    setToDos(newToDos);
    await saveToDos(newToDos);
  };

key의 completed 값을 변경

<TouchableOpacity onPress={() => doneToDo(key)}>
    <Fontisto 
        name={toDos[key].completed ? "checkbox-active" : "checkbox-passive"}
        size={18}
        color={theme.grey} 
    />
</TouchableOpacity>
<Text style={[styles.toDoText, toDos[key].completed ? styles.completedText : null]}>{toDos[key].text}</Text>

<Text style={[styles.toDoText, toDos[key].completed ? styles.completedText : null]}>{toDos[key].text}</Text>
- style 안을 [] 배열로 감싸면 styles.toDoText는 항상 적용되고 completedText는 completed 상태일 때만 적용됨

3. text 수정 가능하게 하기

수정 아이콘 두기
수정 상태에서는 text input 상태

const [editingKey, setEditingKey] = useState(null);
const [editText, setEditText] = useState("");

editingKey: 현재 수정 중인 To-Do의 key를 저장
editText: 사용자가 입력한 수정된 텍스트를 저장

const startEditing = (key) => {
    setEditingKey(key); // 수정할 To-Do의 key 저장
    setEditText(toDos[key].text); // 해당 To-Do의 기존 텍스트를 가져와 editText에 저장
  };

const finishEditing = async (key) => {
    const newToDos = { 
      ...toDos, 
      [key]: { ...toDos[key], text: editText } // 텍스트 업데이트
    };
    setToDos(newToDos); // 상태 업데이트
    await saveToDos(newToDos); // AsyncStorage에 저장
    setEditingKey(null); // 수정 모드 종료
  };

{editingKey === key ? (
    <TextInput 
        style={styles.toDoEditInput}
        value={editText}
        returnKeyType="done"
        onChangeText={setEditText}
        onSubmitEditing={() => finishEditing(key)}
    />
    ) : (
    <Text style={[styles.toDoText, toDos[key].completed ? styles.completedText : null]}>{toDos[key].text}</Text>
)}

React-tip - 인자 넘기기

Mon, 10 Feb 2025 13:00:00 +0000

콜백함수인 이벤트 핸들러에 인자를 넘기는 경우의 수

1. 콜백함수에 어떤 인자도 넘기지 않을 때

import React from "react";
export default function App(){
    const onClickHandler = () => alert("aaa");

    return{
        <div className = "App">
            <button onClick={onClickHandler}>Click</button>
            //또는 따로 함수 구현하지 않고
            <button onClick={() => alert("aaa")}>Click</button>
        </div>
    }
}

2. (이밴트 객체가 아닌) 어떤 인자를 넘길 때

✅ 함수 자체를 불러와야지 실행값을 넣어주면 안됨

<button onClick={onClickHandler("aaa")}>Click</button> 가 아니라
<button onClick={() => onClickHandler("aaa")}>Click</button> 이렇게

3. 이밴트 객체만을 인자로 넘길 때

import React from "react";
export default function App(){
    const onClickHandler = e => alert(e.target.value);

    return{
        <div className = "App">
            <button value = {"clickBtn"} onClick={e => onClickHandler(e)}>Click</button>
            //또는 
            <button value = {"clickBtn"} onClick={onClickHandler}>Click</button>
            </div>
    }
}

4. 이벤트 객체와 이벤트 객체가 아닌 인자를 함께 넘길 때

import React from "react";
export default function App(){
    const onClickHandler = (name, e) => {
        alert(e.target.value);
        console.log(name);
    }

    return{
        <div className = "App">
            <button value = {"clickBtn"} onClick={e => onClickHandler("aaa", e)}>Click</button>
            //또는 
            <button value = {"clickBtn"} onClick={e => onClickHandler("aaa")(e)}>Click</button>
        </div>
    }
}

또는

import React from "react";
export default function App(){
    const onClickHandler = name => e => {
        alert(e.target.value);
        console.log(name);
    }

    return{
        <div className = "App">
            <button value = {"clickBtn"} onClick={onClickHandler("aaa")}>Click</button>
            </div>
    }
}

출처

https://velog.io/@devjade/%EB%A6%AC%EC%95%A1%ED%8A%B8-onClick%ED%95%A8%EC%88%98%EB%A1%9C-%ED%8C%8C%EB%9D%BC%EB%AF%B8%ED%84%B0%EB%A5%BC-%EC%A0%84%EB%8B%AC%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95

React Native - 기초2

Mon, 10 Feb 2025 11:00:00 +0000

해당 내용은 노마드 코더의 React Native 강의를 보고 정리한 내용입니다. https://nomadcoders.co/react-native-for-beginners/lobby

전체 코드

import { StatusBar } from "expo-status-bar";
import React, { useEffect, useState } from "react";
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  TextInput,
  Alert,
  ScrollView,
} from "react-native";
import { Fontisto } from "@expo/vector-icons";
import AsyncStorage from '@react-native-async-storage/async-storage';
import { theme } from "./colors";
const STORAGE_KEY = "@toDos";

export default function App() {
  const [working, setWorking] = useState(true);
  const [text, setText] = useState("");
  const [toDos, setToDos] = useState({});
  useEffect(() => {
    loadToDos();
  }, []);

  const travel = () => setWorking(false);
  const work = () => setWorking(true);
  const onChangeText = (payload) => setText(payload);
  const saveToDos = async (toSave) => {
    await AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(toSave));
  };
  const loadToDos = async () => {
    const s = await AsyncStorage.getItem(STORAGE_KEY);
    s !== null ? setToDos(JSON.parse(s)) : null;
  };
  const addToDo = async () => {
    if (text === "") {
      return;
    }
    const newToDos = {
      ...toDos,
      [Date.now()]: { text, working },
    };
    setToDos(newToDos);
    await saveToDos(newToDos);
    setText("");
  };
  const deleteToDo = (key) => {
    Alert.alert("Delete To Do", "Are you sure?", [
      { text: "Cancel" },
      {
        text: "I'm Sure",
        style: "destructive",
        onPress: () => {
          const newToDos = { ...toDos };
          delete newToDos[key];
          setToDos(newToDos);
          saveToDos(newToDos);
        },
      },
    ]);
  };
  return (
    <View style={styles.container}>
      <StatusBar style="auto" />
      <View style={styles.header}>
        <TouchableOpacity onPress={work}>
          <Text
            style={{ ...styles.btnText, color: working ? "white" : theme.grey }}
          >
            Work
          </Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={travel}>
          <Text
            style={{
              ...styles.btnText,
              color: !working ? "white" : theme.grey,
            }}
          >
            Travel
          </Text>
        </TouchableOpacity>
      </View>
      <TextInput
        onSubmitEditing={addToDo}
        onChangeText={onChangeText}
        returnKeyType="done"
        value={text}
        placeholder={
          working ? "What do you have to do?" : "Where do you want to go?"
        }
        style={styles.input}
      />
      <ScrollView>
      {Object.keys(toDos).map((key) =>
          toDos[key].working === working ? (
            <View style={styles.toDo} key={key}>
              <Text style={styles.toDoText}>{toDos[key].text}</Text>
              <TouchableOpacity onPress={() => deleteToDo(key)}>
                <Fontisto name="trash" size={18} color={theme.grey} />
              </TouchableOpacity>
            </View>
          ) : null
        )}
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: theme.bg,
    paddingHorizontal: 20,
  },
  header: {
    justifyContent: "space-between",
    flexDirection: "row",
    marginTop: 100,
  },
  btnText: {
    fontSize: 38,
    fontWeight: "600",
  },
  input: {
    backgroundColor: "white",
    paddingVertical: 15,
    paddingHorizontal: 20,
    borderRadius: 30,
    marginVertical: 20,
    fontSize: 18,
  },
  toDo: {
    backgroundColor: theme.toDoBg,
    marginBottom: 10,
    paddingVertical: 20,
    paddingHorizontal: 20,
    borderRadius: 15,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
  },
  toDoText: {
    color: "white",
    fontSize: 16,
    fontWeight: "600",
  },
});

TextInput 안에 많은 props기 있음
- keyboardType, returnKeytype, secureTextEntry, multiLine 등 찾아서 하기
onChangeText={onChangeText}
- 내가 쓴 내용으로 함수 실행
onSubmitEditing={addToDo}
- done 누르면 함수 실행
const [toDos, setToDos] = useState({});
- useState([]) 해서 array를 넣어도 되지만 여기선 hashmap 적용

  const addToDo = () => {
      if (text === "") {
      return;
      }
      const newToDos = Object.assign({}, toDos, {
      [Date.now()]: { text, work: working },
      });
      setToDos(newToDos);
      setText("");
  };

state는 언제나 setState로 바꿔야 함 -> 그래서 object에 새로 assign 하는 방식 적용
Object.assign({}, toDos, {[Date.now()]: { text, work: working },})
- 기존 toDos에 {현재시간: text, workstate} 추가

  const newToDos = {
      ...toDos,
      [Date.now()]: { text, work: working },
      };

이 방식도 가능
이전 object 내용을 가진 새로운 object 만들기

Object.keys(x).map(key => x[key])
- object key 값들에 map 써서 불러오기

  {Object.keys(toDos).map((key) =>
          toDos[key].working === working ? (
              <View style={styles.toDo} key={key}>
              <Text style={styles.toDoText}>{toDos[key].text}</Text>
              </View>
          ) : null
          )}

현재 work 아니면 안 보이게 하기

✅ AsnyncStorage

- 브라우저의 local storage처럼 작동

- await 필요

- https://react-native-async-storage.github.io/async-storage/docs/usage/ 참고

JSON.stringify(toSave)
- object -> string 변환
JSON.parse(s);
- string -> object 변환
```
  const newToDos = { ...toDos };
  delete newToDos[key];
```
- 이전 todo 내용 복사해서 이전 내용으로 되돌리고 newtodo 삭제
- const newToDos = {...toDos} 처럼 새로운 객체 내에 기존 객체의 key-value를 풀어놓는 대신 const newToDos = todo 와 같은 형태로 복사하게 되면 이후 setToDos(newToDos)로 state를 변경할 때 자동으로 re-render가 되지 않음

aws - RDS

Sat, 08 Feb 2025 08:00:00 +0000

인프런 JSCODE 박재성님 비전공자도 이해할 수 있는 AWS 입문/실전 강의를 듣고 정리한 내용입니다
https://www.inflearn.com/course/%EB%B9%84%EC%A0%84%EA%B3%B5%EC%9E%90-%EC%9D%B4%ED%95%B4%ED%95%A0%EC%88%98%EC%9E%88%EB%8A%94-aws-%EC%9E%85%EB%AC%B8%EC%8B%A4%EC%A0%84/dashboard

RDS

RDS(Relational Database Service)

관계형 데이터베이스 서비스
MySQL, MariaDB 등 여러 관계형 데이터베이스 서비스를 AWS로부터 빌려서 사용하는 형태

EC2 안에 있는 백엔드 서버가 RDS로 직접 요청을 보냄

RDS 생성하기

AWS > RDS > 데이터베이스

리전 선택
데이터베이스 생성
- 생성 방식 선택: 표준
- 엔진 옵션: MySQL
- 템플릿 선택: 프리티어
- 설정
  - 인스턴스 식별자와 암호 생성
- 인스턴스 구성, 스토리지 - 그대로
- 연결
  - 퍼블릭 액세스 “예”
  - 여러 환경(로컬 환경, 개발 환경 등)에서 편하게 DB에 접근 가능
  - 보안성 높이고 싶으면 “아니오”(“예”로 해도 보안이 떨어지는 것은 아님)
- 데이터베이스 인증, 모니터링 - 그대로

보안그룹 설정하기

AWS > EC2 > 네트워크 및 보안 > 보안 그룹

보안 그룹 생성
- 인바운드 규칙
  - DB에 접근하기 위해 MySQL 3306번 포트 추가
  - 소스는 IPv4로 들어오는 누구나
- 아웃바운드 규칙
  - 모든 트래픽을 허용

RDS > 데이터베이스 > db

수정
- 연결 > 보안 그룹
- 생성한 보안그룹을 RDS에 붙이기
- 즉시 적용

파라미터 그룹 추가하기

AWS > RDS > 파라미터 그룹

데이터베이스 설정 옵션 세팅 가능

파라미터 생성
- 파라미터 그룹 이름과 설명 설정
- 엔진 유형: MySQL Community
- 파라미터 그룹 패밀리: mysql 8.0
- 유형: DB Parameter Group
편집
- 아래 속성 전부 utf8mb4로 설정하기
  - character_set_client
  - character_set_connection
  - character_set_database
  - characater_set_filesystem
  - characater_set_results
  - character_set_server
  utf8 대신에 utf8mb4를 사용하면 ‘한글’ 뿐만 아니라 ‘이모티콘’도 지원 가능
- 아래 속성 전부 utf8mb4_unicode_ci로 설정하기
  - collation_connection
  - collation_server
  utf8mb4_unicode_ci은 정렬, 비교 방식을 나타냄
- time_zone을 Asia/Seoul로 설정
  
  데이터베이스 자체에서 시간을 어떻게 표시할 건지를 나타냄
time_zone을 Asia/Seoul로 설정

AWS > RDS > 데이터베이스

수정
- 추가 구성 > 데이터베이스 옵션
  - DB 파라미터 그룹: 방금 만든걸로 바꿔주기

📌
DB 파라미터 그룹을 변경한 뒤에는 RDS의 DB를 재부팅해야만 정상적으로 적용

작업>재부팅

RDS 접속하기

DataGrip 사용

New>data source>mysql
- Host: RDS의 엔드포인트를 입력
  - 엔드포인트: 특정 리소스(서버, DB 등)에 접근할 수 있도록 해주는 URL
- User: 마스터 사용자 이름(AWS RDS 데이터베이스 만들 때 정함) 입력
- Password: 마스터 암호(AWS RDS 데이터베이스 만들 때 정함) 입력
- Test Connection 으로 연결 확인
- ok

비용 나가지 않게 RDS 깔끔하게 종료하기

AWS > RDS > 데이터베이스 > 작업 > 삭제

최종 스냅샷 생성, 자동 백업 보존 해제

git-tip - 커밋 올바르게 하기

Fri, 07 Feb 2025 13:00:00 +0000

단계별로 특정 코드 블록만 커밋하는 방법

파일 변경 사항 확인:
먼저, git status를 사용해 어떤 파일이 변경되었는지 확인
```
 git status
```
git add -p 사용:
파일을 통째로 스테이징하지 않고 파일 내 특정 변경 사항만 스테이징하기 위해선 git add -p를 사용
```
 git add -p <파일명>
```
ex> src/components/MyComponent.js 파일 내에서 특정 변경 사항만 스테이징하려면:
```
 git add -p src/components/MyComponent.js
```
patch 모드 사용법:
git add -p 명령어를 실행하면 Git이 변경된 부분을 블록 단위로 보여주며, 해당 블록을 어떻게 처리할지 선택 가능
- y: 이 변경사항을 스테이징함
- n: 이 변경사항을 스테이징하지 않음
- s: 더 작은 단위로 변경사항을 나눔 (부분적으로 나누어 커밋할 때 유용)
- q: patch 모드 종료
- d: 변경사항을 무시하고 나중에 처리함
- e: 직접 수정 모드로 들어가서 스테이징할 부분을 수정
커밋하기:
변경 사항을 선택적으로 스테이징한 후 커밋
```
 git commit -m "첫 번째 변경사항 커밋"
```
다른 변경 사항 커밋하기:
앞에서 선택하지 않은 부분이나 나머지 변경 사항을 다시 스테이징하고 다른 커밋 메시지로 커밋
```
 git add -p <파일명>
 git commit -m "두 번째 변경사항 커밋"
```
(보충) 여러 파일을 수정했는데 파일 단위로만 커밋하고 싶다면:
git status로 변경한 파일 확인하고
```
 git add <파일명1> <파일명2> <파일명3> <파일명4>...
```
하고 커밋하면 된다

요약

git add -p 명령어를 사용하여 파일 내 특정 부분만 스테이징
각 변경 사항에 대해 스테이징 여부를 선택
스테이징된 부분을 커밋
나머지 변경 사항을 다시 커밋

aws - ELB

Fri, 07 Feb 2025 08:00:00 +0000

인프런 JSCODE 박재성님 비전공자도 이해할 수 있는 AWS 입문/실전 강의를 듣고 정리한 내용입니다
https://www.inflearn.com/course/%EB%B9%84%EC%A0%84%EA%B3%B5%EC%9E%90-%EC%9D%B4%ED%95%B4%ED%95%A0%EC%88%98%EC%9E%88%EB%8A%94-aws-%EC%9E%85%EB%AC%B8%EC%8B%A4%EC%A0%84/dashboard

ELB

ELB(Elastic Load Balancer)

트래픽(부하)을 적절하게 분배해주는 장치 = 로드밸런서(Load Balancer)

서버를 2대 이상 기용할 때 필수 도입
사용자들이 EC2에 직접적으로 요청을 보내지 않고 ELB를 향해 요청을 보내도록 구성

SSL/TLS

HTTP를 HTTPS로 바꿔주는 인증서

HTTPS 인증을 받은 웹 사이트가 백엔드 서버와 통신하려면, 백엔드 서버의 주소도 HTTPS 인증을 받아야 함
- 웹 사이트 주소 :https**://jscode-edu.co.kr
- 백엔드 API 서버 주소 :https**://api.jscode-edu.co.kr

ELB 셋팅하기

AWS > EC2 > 로드밸런싱 > 로드밸런서

리전(Region)을 선택
로드 밸런서 생성
3가지 로드 밸런서 유형 중 Application Load Balancer(ALB)를 선택
- 기본 구성
- 체계
  - 인터넷 경계와 내부라는 옵션이 있음
  - 내부 옵션은 Private IP를 활용할 때 사용
  - 여기선 인터넷 경계 옵션을 선택
- IP 주소 유형
  - IPv4와 듀얼 스택이라는 옵션이 있음
  - IPv6을 사용하는 EC2 인스턴스가 없다면 IPv4를 선택하면 됨

네트워크 매핑
- 로드 밸런서가 어떤 가용 영역으로만 트래픽을 보낼 건지 제한하는 기능

AWS > EC2 > 네트워크 및 보안 > 보안 그룹

보안 그룹 생성
인바운드 규칙
- 80(HTTP), 443(HTTPS) 포트로 모든 IP에 대해 요청을 받을 수 있게 설정
- 소스는 IPv4로 들어오는 누구나

AWS > EC2 > 로드밸런싱 > 로드밸런서

ELB 만드는 창으로 돌아와서 보안 그룹 등록
- 리스너 및 라우팅
- 대상 그룹(Target Group, ELB로 들어온 요청을 어디로 보낼지) 생성
- 대상 유형 선택
  - EC2에서 만든 특정 인스턴스로 트래픽을 전달할 때는 인스턴스 옵션을 선택
- ELB가 사용자로부터 트래픽을 받아 대상 그룹에게 어떤 방식으로 전달할 지 설정
  - 프토토콜 : 포트 - HTTP 80
  - IP 주소 유형 - IPv4
  - 프로토콜 버전 - HTTP1
- 상태 검사(= Health Check, 헬스 체크)
  - ELB는 주기적으로(기본 30초 간격) 대상 그룹에 속해있는 각각의 EC2 인스턴스에 요청을 보냄
    - 그 요청에 대한 200번대(HTTP Status Code) 응답이 잘 날라온다면 서버가 정상적으로 잘 작동되고 있다고 판단
    - 만약 요청을 보냈는데 200번대의 응답이 날라오지 않는다면 서버가 고장났다고 판단, 그 EC2 인스턴스로는 요청(트래픽)을 보내지 않음
  - 특정 EC2 인스턴스 내에 있는 서버가 예상치 못한 에러로 고장나도 효율적인 요청(트래픽)의 분배가 가능해짐
  - 정상적인 헬스 체크 기능을 위해 EC2 인스턴스에서 작동하고 있는 백엔드 서버에 Health Check용 API를 만들어야 함
- 대상 등록
ELB 만드는 창으로 돌아와서 대상 그룹(Target Group) 등록
로드밸런서 생성
health check api를 서버에서 넣어주고 서버를 다시 실행시켜주기

로드밸런서에 들어가면 나오는 DNS 이름으로도 접근 가능

ELB에 도메인 연결하기

Route 53에서 EC2에 연결되어 있던 레코드 삭제
Route 53에서 ELB에 도메인 연결
- 레코드 생성
- 레코드 유형은 A
- 별칭 키고 트래픽 라우팅 대상은 Application/Classic Load Balancer에 대한 별칭
- 리전과 로드밸런서 선택
- 레코드 생성 완료 후 해당 도메인으로 연결 잘 되는지 확인

HTTPS 적용을 위해 인증서 발급받기

AWS Certificate Manager

인증서 요청
- 퍼블릭 인증서 요청
- 만든 도메인 이름
인증서 검증 : 내가 소유한 도메인이 맞는 지 검증
- Route 53에서 레코드 생성
- 레코드 생성
새로고침해서 검증 완료
- 인증서 나열에서도 확인 가능

ELB에 HTTPS 설정하기

EC2 > 로드 밸런서 > server > 리스너 및 규칙

리스너 추가
- HTTPS에 대한
- 프로토콜: HTTPS
- 대상 그룹 선택
- 보안 리스너 설정
  - 인증서 선택
아까 구매한 도메인에 https://를 붙여서 접속 확인
HTTP로 접속할 경우 HTTPS로 전환되도록 설정
- 기존 HTTP:80 리스너를 리스너 관리>삭제
- 리스너 추가
  - 프로토콜: HTTP
  - 라우팅 액션: URL로 리디렉션
  - 포트 입력
HTTP로 접속해도 HTTPS로 잘 전환되는 지 확인

비용 나가지 않게 ELB 깔끔하게 종료하기

로드밸런서>작업>로드밸런서 삭제
EC2 대시보드>인스턴스>인스턴스 상태>종료
탄력적 IP 연결 해제>릴리즈

React Native - 기초1

Thu, 06 Feb 2025 07:00:00 +0000

해당 내용은 노마드 코더의 React Native 강의를 보고 정리한 내용입니다. https://nomadcoders.co/react-native-for-beginners/lobby

환경설정

ios simulator로 확인할 예정
시작할 때는

cd 폴더 이름 #프로젝트 위치로 이동
code . #vscode로 이동
npm start #터미널에 입력 -> i 입력하면 ios simulator로 확인 가능

Layout

반응형으로 만드는 것이 좋음

import React from "react";
import { View } from "react-native";

export default function App(){
  return (
    <View style=>
      <View style=></View>
      <View style=></View>
      <View style=></View>
    </View>
  );
}

display:flex 필요 없음 ->
- 기본적으로 모든 View가 flexContainer
기본값 Column
- <View style=> 해줘야 Row
웹이 아니라서 요소들이 화면 바깥으로 나가도 스크롤 x
부모에 flex:1을 추가하면 자식들이 가진 비율만큼 차지
- tomato : teal : orange = 1 : 2 : 1

Style

요구사항:

현재 내가 있는 도시를 보여줄 것
그 위치의 16일간의 기상예보를 가져올 것

✅ https://reactnative.dev/docs/components-and-apis 참고

import { View, Text, Dimensions, ScrollView, StyleSheet } from 'react-native';
import React from 'react';

const{ width:SCREEN_WIDTH }=Dimensions.get("window");
//내 기기 화면 너비 가져오기

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.city}>
        <Text style={styles.cityname}>서울</Text>
      </View>
      <ScrollView
        pagingEnabled //자유로운 스크롤 방지(한 페이지만 바로 보이게)
        horizontal //가로 스크롤
        indicatorStyle='gray' //스크롤 색상(ios만 가능)
        contentContainerStyle={styles.weather} //스크롤은 contentContainerStyle로 해야함
      >
        <View style={styles.day}>
          <Text style={styles.temp}>0</Text>
          <Text style={styles.desc}>Snowy</Text>
        </View>
        <View style={styles.day}>
          <Text style={styles.temp}>0</Text>
          <Text style={styles.desc}>Snowy</Text>
        </View>
        <View style={styles.day}>
          <Text style={styles.temp}>0</Text>
          <Text style={styles.desc}>Snowy</Text>
        </View>
        <View style={styles.day}>
          <Text style={styles.temp}>0</Text>
          <Text style={styles.desc}>Snowy</Text>
        </View>
      </ScrollView>
    </View>

  );
}

const styles = StyleSheet.create({
  container:{
    flex:1, 
    backgroundColor:"#fff",
  },
   city: {
    flex: 1,
    backgroundColor: "transparent",
    justifyContent: "center",
    alignItems:"center",

   },
   cityname: {
    fontSize: 38,
    fontWeight: "500",
   },
   weather: {
   },
   day: {
    width: SCREEN_WIDTH,
    backgroundColor: "transparent",
    alignItems: "center",
   },
   temp: {
    fontSize: 158,
    fontWeight: "600",
    marginTop: 50,
   },
   desc: {
    fontSize: 38,
    fontWeight: "300",
    marginTop: -30,
   }

})

Location

import { View, Text, Dimensions, ScrollView, StyleSheet } from 'react-native';
import * as Location from "expo-location";
import React, { useEffect, useState } from "react";

const{ width:SCREEN_WIDTH }=Dimensions.get("window");

export default function App() {
  const [city, setCity] = useState("Loading..."); //기본값 로딩
  const [location, setLocation] = useState();
  const [ok, setOk] = useState(true);
  const ask = async () => {
    const { granted } = await Location.requestForegroundPermissionsAsync(); //앱 사용 중에만 location을 받음

    /*const permission = await Location.requestForegroundPermissionsAsync();
    console.log(permission);

    (NOBRIDGE) LOG  {"canAskAgain": true, "expires": "never", "granted": true, "status": "granted"}
    */ //위치 요청하기 가능 상태


    if (!granted) {
      setOk(false); //유저가 권한 요청 거절할 경우
    }
    const {
      coords: { latitude, longitude },
    } = await Location.getCurrentPositionAsync({ accuracy: 5 }); //사용자 위도, 경도 받기(얼마나 정확하게 위치 받을지를 옵션으로)
    const location = await Location.reverseGeocodeAsync(
      { latitude, longitude },
      { useGoogleMaps: false }
    ); //reverseGeocode로 위도 경도 받아서 위치 출력


    //console.log(location);
    /* 
    {"city": "샌프란시스코", "country": "미 합중국", "district": "Union Square", "isoCountryCode": "US", "name": "Powell St", "postalCode": "94108", "region": "CA", "street": "Ellis St", "streetNumber": "2–16", "subregion": "샌프란시스코", "timezone": "America/Los_Angeles"}]
    */ //ios simulator를 돌리면 항상 미국으로 뜸


    setCity(location[0].city);
  };
  useEffect(() => {
    ask();
  }, []);
  return (
    <View style={styles.container}>
      <View style={styles.city}>
        <Text style={styles.cityname}>{city}</Text>
        // 생략..
      </View>
    </View>
  )
}

Weather

import { View, Text, Dimensions, ActivityIndicator, ScrollView, StyleSheet } from 'react-native';
import * as Location from "expo-location";
import React, { useEffect, useState } from "react";

const{ width:SCREEN_WIDTH }=Dimensions.get("window");

const API_KEY = ""; //자바스크립트 키 가져오기

export default function App() {
  const [city, setCity] = useState("Loading...");
  const [days, setDays] = useState([]);
  const [ok, setOk] = useState(true);
  const getWeather = async () => {
    const { granted } = await Location.requestForegroundPermissionsAsync();
    if (!granted) {
      setOk(false);
    }
    const {
      coords: { latitude, longitude },
    } = await Location.getCurrentPositionAsync({ accuracy: 5 });
    const location = await Location.reverseGeocodeAsync(
      { latitude, longitude },
      { useGoogleMaps: false }
    );
    setCity(location[0].city);
    const response = await fetch(`https://api.openweathermap.org/data/2.5/forecast?lat=${latitude}&lon=${longitude}&appid=${API_KEY}&units=metric`); //날씨 api로 가져오기
    //&units=metric : 섭씨로 바꾸기
    const json = await response.json();
    setDays(
        json.list.filter((weather) => {
          if (weather.dt_txt.includes("0:00:00")) {return weather;} //온도 가져오기
          })
        );
  };
  useEffect(() => {
    getWeather();
  }, []);
  return (
    <View style={styles.container}>
      <View style={styles.city}>
        <Text style={styles.cityname}>{city}</Text>
      </View>
      <ScrollView
        pagingEnabled
        horizontal
        indicatorStyle='gray'
        contentContainerStyle={styles.weather}
      >
        {days.length === 0 ? (
        <View style={styles.day}>
          <ActivityIndicator
              color="gray"
              style={{ marginTop: 10 }}
              size="large"
            /></View>
          ) : (
            days.map((day, index) => (
              <View key={index} style={styles.day}>
                <Text style={styles.tinyText}>{new Date(day.dt * 1000).toString().substring(0, 10)}</Text>
              <Text style={styles.temp}>
                {parseFloat(day.main.temp).toFixed(1)}
              </Text>
              <Text style={styles.desc}>{day.weather[0].main}</Text>
              <Text style={styles.tinyText}>{day.weather[0].description}</Text>
            </View>
          ))
        )}
      </ScrollView>
    </View>

  );
}

const styles = StyleSheet.create({
  //생략..
   tinyText: {
    fontSize: 20,
  },
})

삼향 연산자
- {조건 ? (true일 때) : (false일 때) }
- 위에선 day 길이가 0일 경우 ActivityIndicator로 로딩 애니메이션이 뜨도록 함
{parseFloat(day.main.temp).toFixed(1)}
- 소수점 아래 한 자리만 보이도록

Icons

import { Fontisto } from "@expo/vector-icons";

const icons = {
  Clouds: "cloudy",
  Clear: "day-sunny",
  Atmosphere: "cloudy-gusts",
  Snow: "snow",
  Rain: "rains",
  Drizzle: "rain",
  Thunderstorm: "lightning",
};
//생략..
return (
    //생략..
    {days.length === 0 ? (
         <View style={{ ...styles.day, alignItems: "center" }}> //스타일 2개를 적용시키는 방법 {} 2개 열고 스타일1, 스타일2
          <ActivityIndicator
              color="gray"
              style={{ marginTop: 10 }}
              size="large"
            /></View>
          ) : (
            days.map((day, index) => (
              <View key={index} style={styles.day}>
                <Text style={styles.tinyText}>{new Date(day.dt * 1000).toString().substring(0, 10)}</Text>
                <View
                style={{
                  flexDirection: "row",
                  alignItems: "center",
                  width: "100%",
                  justifyContent: "space-between",
                }}
              >
                <Text style={styles.temp}>
                  {parseFloat(day.main.temp).toFixed(1)}
                </Text>
                <Fontisto
                  name={icons[day.weather[0].main]} //api로 가져온 날씨 이름 넘겨주기
                  size={68}
                  color="black"
                />
              </View>
              <Text style={styles.desc}>{day.weather[0].main}</Text>
              <Text style={styles.tinyText}>{day.weather[0].description}</Text>
            </View>
            );
            ))}
)

spring - 입문4

Mon, 03 Feb 2025 04:00:00 +0000

인프런 김영한님 스프링 입문 강의를 듣고 정리한 내용입니다
https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-%EC%9E%85%EB%AC%B8-%EC%8A%A4%ED%94%84%EB%A7%81%EB%B6%80%ED%8A%B8#

회원 관리 예제 - 웹 MVC 개발

홈 화면

controller/HomeController.java

@Controller
public class HomeController {

	@GetMapping("/")
	public String home(){
		return "home";
	}
}

✅ ‘/’ 으로 GET 요청이 들어오면 templates/home.html 을 리턴

templates/home.html

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div class="container">
    <div>
        <h1>Hello Spring</h1> <p>회원 기능</p>
        <p>
            <a href="/members/new">회원 가입</a>
            <a href="/members">회원 목록</a>
        </p>
    </div>
</div>
</body>
</html>

결과

정적 콘텐츠에서는 관련 컨트롤러를 먼저 찾고 없으면 html 파일을 찾음 -> HomeController 에서 매핑된 게 있기 때문에 기존 index.html보다 우선순위가 높음

회원 등록

controller/MemberController.java

@GetMapping("/members/new")
	public String createForm(){
		return "members/createMemberForm";
	}

/members/new로 매핑

resources/templates/members/createMemberForm.html

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div class="container">
    <form action="/members/new" method="post">
        <div class="form-group">
            <label for="name">이름</label>
            <input type="text" id="name" name="name" placeholder="이름을 입력하세요">
        </div>
        <button type="submit">등록</button>
    </form>
</div> 
</body>
</html>

✅ name이 /members/new로 POST 방식으로 넘어감

controller/MemberForm.java

public class MemberForm {
	private String name; 
    //getter setter
	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name; 
	}
}

controller/MemberController.java

@GetMapping("/members/new")
	//생략..
@PostMapping("/members/new")
	public String create(MemberForm form){
		Member member = new Member();
		member.setName(form.getName()); 
		
		memberService.join(member);

		return "redirect:/";
	}

✅ POST 로 넘어오는 내용을 받아서 메모리에 저장
✅ form.getName() 으로 꺼내서 setName

회원 조회

controller/MemberController.java

@GetMapping("/members")
	public String list(Model model) {
		List<Member> members = memberService.findMembers();

		model.addAttribute("members",members);
		return "members/memberList";
	}

✅ model에 전체 members 리스트로 addAttribute

templates/members/memberList.html

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div class="container">
    <div>
        <table>
            <thead>
                <tr>
                    <th>#</th>
                    <th>이름</th>
                </tr>
            </thead>
            <tbody>
                <tr th:each="member : ${members}"> 
                    <td th:text="${member.id}"></td>
                    <td th:text="${member.name}"></td>
                </tr>
            </tbody>
        </table>
    </div>
</div> 
</body>
</html>

✅ th:each로 루프 돌기

결과

spring - 입문3

Sun, 02 Feb 2025 11:00:00 +0000

인프런 김영한님 스프링 입문 강의를 듣고 정리한 내용입니다
https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-%EC%9E%85%EB%AC%B8-%EC%8A%A4%ED%94%84%EB%A7%81%EB%B6%80%ED%8A%B8#

스프링 빈과 의존관계

컴포넌트 스캔과 자동 의존관계 설정

스프링 빈(Spring Bean)

Spring 컨테이너가 관리하는 자바 객체
스프링 빈으로 등록을 해야 Spring 컨테이너가 인식할 수 있음

스프링 빈 등록 방법

어노테이션을 활용한 컴포넌트 스캔과 Autowired 설정
자바 코드로 직접 스프링 빈 등록하기

memberController 에서는 memberService 객체를 사용
memberService 에서는 memberRepository 객체를 사용

1. 어노테이션을 활용한 컴포넌트 스캔과 Autowired 설정

controller/MemberController.java

@Controller
public class MemberController {
    private final MemberService memberService;

    @Autowired
    public MemberController(MemberService memberService){
        this.memberService = memberService;
    }
}

✅ @Controller 어노테이션을 달면 MemberController라는 객체를 만들어서 스프링에 넣어서 관리 = 스프링 컨테이너에 스프링 빈으로 등록
✅ @Autowired가 있으면 스프링이 스프링 컨테이너에 있는 memberService를 가져다가 연결
-> MemberController 객체가 생성될 때 스프링 빈으로 등록된 memberService 객체를 가져다가 넣어줌 = DI(의존관계 주입)

service/Memberservice.java

@Service
public class MemberService {

    private final MemberRepository memberRepository;

    public MemberService(MemberRepository memberRepository) {
        this.memberRepository = memberRepository;
    }
    //생략..
}

✅ 그냥 MemberService 는 스프링 빈에 등록 안 된 순수한 자바 클래스라서 @Service 어노테이션을 달아줘야 스프링 컨테이너에 스프링 빈으로 등록

📌 cmd + option + b 로 구현체로 navigate

repository/MemoryMemberRepository.java

@Repository
public class MemoryMemberRepository implements MemberRepository{
	// 생략 ..
}

✅ 이것도 @Repository 어노테이션을 달아줘야 스프링 컨테이너에 스프링 빈으로 등록

📌 컴포넌트 스캔 범위

spring.hello.spring/HelloSpringApplication.java

package spring.hello.spring;

메인함수가 속한 패키지까지만 스프링이 스캔(여기선 hello.hellospring만)

2. 자바 코드로 직접 스프링 빈 등록하기

컨트롤러는 그대로 두고 @Service, @Repository지우기

SpringConfig.java 생성

@Configuration
public class SpringConfig {

	@Bean //스프링 빈 등록
	public MemberService memberService() {
		return new MemberService(memberRepository()); //memberService는 memberRepository 사용하도록 함
	}

	@Bean
	public MemberRepository memberRepository() {
		return new MemoryMemberRepository();
	}
}

📌 Bean 등록 경우

정형화된 코드(컨트롤러, 서비스, 리포지토리)는 컴포넌트 스캔을 쓰는 것이 편리
정형화되지 않거나 상황에 따라 구현 클래스를 변경해야 하면 직접 스프링 빈을 등록하는 것이 편리

spring - 입문2

Fri, 31 Jan 2025 11:00:00 +0000

인프런 김영한님 스프링 입문 강의를 듣고 정리한 내용입니다
https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-%EC%9E%85%EB%AC%B8-%EC%8A%A4%ED%94%84%EB%A7%81%EB%B6%80%ED%8A%B8#

웹 개발 방식

정적 컨텐츠
MVC 와 템플릿 엔진
API

회원 관리 예제 - 백엔드 개발

컨트롤러 : MVC 의 컨트롤러
서비스 : 핵심 비즈니스 로직 구현(회원 중복 가입 x 등 )
리포지토리 : 데이터베이스에 접근, 도메인 객체를 DB에 저장하고 관리 도메인 : 비즈니스 도메인 객체(회원, 주문, 쿠폰 등 데이터베이스에 저장되는 객체)

회원 도메인과 레포지토리 만들기

도메인

spring.hello.spring>domain>Member

package spring.hello.spring.domain;

public class Member {
    private Long id;
    private String name; //멤버

    public Long getId() {
        return id;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
    //getter setter
}

리포지토리

repository/MemberRepository

package hello.hellospring.repository;

import hello.hellospring.domain.Member;

import java.util.List;
import java.util.Optional;

public interface MemberRepository {
    Member save(Member member);
    Optional<Member> findById(Long id);
    Optional<Member> findByName(String name);
    //NULL 이 리턴됐을 때의 예외를 쉽게 처리하기 위해서 Optional 사용
    List<Member> findAll();
}

리포지토리 구현체

repository/MemoryMemberRepository
📌 option + enter로 implement 쉽게 구현
📌 임포트는 option + enter 또는 ctrl + space

package hello.hellospring.repository;

import hello.hellospring.domain.Member;

import java.util.*;

public class MemoryMemberRepository implements MemberRepository{

    private static Map<Long, Member> store = new HashMap<>();
    private static long sequence = 0L; //0,1,2 키값 생성
    @Override
    public Member save(Member member) {
        member.setId(++sequence); //id 세팅
        store.put(member.getId(), member); //스토어 저장
        return member;
    }

    @Override
    public Optional<Member> findById(Long id) {
        return Optional.ofNullable(store.get(id)); //optional로 null이어도 감쌀 수 있음
    }

    @Override
    public Optional<Member> findByName(String name) {
        return store.values().stream()
                .filter(member -> member.getName().equals(name))
                .findAny();
    }

    @Override
    public List<Member> findAll() {
        return new ArrayList<>(store.values()); // 전체 value(=Member)들을 리턴
    }
}

📌 java

store.values() :
- Map에 저장된 모든 value들을 Collection 형태로 반환
.stream()
- store.values()로 얻은 Collection을 스트림으로 변환
.filter(member -> member.getName().equals(name))
- 람다 표현식으로 member의 getName() 메서드를 호출해서 반환된 값이 name과 같은지를 판단
- true인 요소들만 남기고 그렇지 않은 요소들은 스트림에서 제거해서 필터링
.findAny()
- 필터링된 스트림에서 임의의 하나의 요소를 찾아 반환
- 반환 타입은 Optional<Member>
- 찾은 요소가 있으면 해당 요소를 감싸서 반환하고 없으면 Optional.empty()를 반환

회원 리포지토리 테스트 코드

정상적으로 작동하는지 검증
MemoryMemberRepositoryTest.java

class MemoryMemberRepositoryTest {

    MemoryMemberRepository repository = new MemoryMemberRepository();

    @Test
    public void save(){
        Member member = new Member();
        member.setName("spring");

        repository.save(member);

        Member result = repository.findById(member.getId()).get(); // Optioanl에서 값을 꺼낼 때는 get()으로
        //System.out.println("result =" + (result == member)); 로도 확인 가능
        ////Assertions.assertEquals(member, result); 로도 확인 가능

        // test
        // member 와 result 가 같은지 검사
        assertThat(member).isEqualTo(result);
    }

    @Test
    public void findByName(){
        Member member1 = new Member();
        member1.setName("spring1");
        repository.save(member1);

        //멤버 하나 더 추가
        Member member2 = new Member();
        member2.setName("spring2");
        repository.save(member2);

        Member result = repository.findByName("spring1").get();

        assertThat(result).isEqualTo(member1);

    }

    @Test
    public void findAll(){
        Member member1 = new Member();
        member1.setName("spring1");
        repository.save(member1);

        Member member2 = new Member();
        member2.setName("spring2");
        repository.save(member2);

        List<Member> result = repository.findAll();

        assertThat(result.size()).isEqualTo(2);

    }
}

📌 변수 rename은 ctrl + shift + R 또는 fn + shift + f6으로 한 번에 하기

✅ 전체 코드를 돌려보면 에러가 남 ->

테스트 코드 메서드는 임의대로 실행
findAll() 메서드에서 repository 에 이름이 spring1 인 member1 을 save 했는데, 뒤이어 실행되는 findByName() 메서드에서 이름이 spring1 인 객체를 이용하여 테스트하고 있음
서로 다른 테스트 메서드가 사용하는 데이터에서 충돌
테스트메서드가 끝나면 사용한 데이터를 초기화 해줘야 함

MemoryMemberRepositoryTest.java

@AfterEach
    public void afterEach() {
        repository.clearStore();
    } //store 초기화

repository/MemoryMemberRepository.java

public void clearStore() {
        store.clear();
    }

회원 서비스 개발

회원 가입

service/MemberService

public class MemberService {

	private final MemberRepository memberRepository = new MemoryMemberRepository();

	// 회원가입
	public Long join(Member member) {
		// 같은 이름이 있는 중복 회원 X
		memberRepository.findByName(member.getName())
				.ifPresent(m -> {
					throw new IllegalStateException("이미 존재하는 회원입니다.");
				}); // 이 방식 권장

		/* 
        Optional<Member> result = memberRepository.findByName(member.getName());
        
        result.ifPresent(m -> {
			throw new IllegalStateException("이미 존재하는 회원입니다.");
		}); // result가 null이 아닌 다른 값이 있으면 이미 존재하는 회원입니다 뜨게 하기
		*/

		memberRepository.save(member);
		return member.getId();

	}

    // 전체 회원 조회
	public List<Member> findMembers() {
		return memberRepository.findAll();
	}

	// 회원 한 명 조회
	public Optional<Member> findOne(Long memberId) {
		return memberRepository.findById(memberId);
	}
}

📌 cmd + option + v로 변수 추출 가능
📌 ctrl + t 하고 8번 extract method 하거나 그냥 바로 extract method(cmd + option + m) 하기 -> more option으로 함수명 설정

회원 서비스 테스트

MemberServiceTest.java
📌 cmd + shift + t로 테스트코드 바로 만들기 가능

class MemberServiceTest {

    MemberService memberService = new MemberService();
    MemoryMemberRepository memberRepository = new MemoryMemberRepository();

    @AfterEach
    public void afterEach() {
        memberRepository.clearStore();
    }

    @Test
    void 회원가입() { //test코드는 한글 가능
        //given
        Member member = new Member();
        member.setName("hello");

        //when
        Long saveId = memberService.join(member);

        //then
        Member findMember = memberService.findOne(saveId).get();
        assertThat(member.getName()).isEqualTo(findMember.getName());
    }

    @Test
    public void 중복회원예외(){
        // given
        Member member1 = new Member();
        member1.setName("spring");

        Member member2 = new Member();
        member2.setName("spring");

        // when
        memberService.join(member1);
        /*
        try {
            memberService.join(member2);
            fail();
        } catch (IllegalStateException e){
             assertThat(e.getMessage()).isEqualTo("이미 존재하는 회원입니다.");
        }*/

        //then
        IllegalStateException e = assertThrows(IllegalStateException.class, () -> memberService.join(member2));
        assertThat(e.getMessage()).isEqualTo("이미 존재하는 회원입니다.");
    }

    @Test
    void findMembers() {
    }

    @Test
    void findOne() {
    }
}

✅ IllegalStateException e = assertThrows(IllegalStateException.class, () -> memberService.join(member2));

두 번째 인자인 람다함수 실행 시, 첫 번째 인자값인 IllegalStateException이 발생하는지 확인

📌 ctrl + r로 이전에 실행했던 거 바로 실행
📌 cmd + b 로 navigate

MemberService.java

private final MemberRepository memberRepository;

    public MemberService(MemberRepository memberRepository) {
        this.memberRepository = memberRepository;
    }

✅ memberRepository를 직접 new로 생성하는 게 아니라 외부에서 넣어주도록 수정

MemberServiceTest.java

class MemberServiceTest {

    MemberService memberService;
    MemoryMemberRepository memberRepository; //1

    @BeforeEach
    public void beforeEach() {
        memberRepository = new MemoryMemberRepository();
        memberService = new MemberService(memberRepository);
    }
    //생략..
}

각 테스트를 실행하기 전에 MemoryMemberRepository를 만들고 1에다 넣어줌, 걔를 memberService에 넣어줌, 같은 MemoryMemberRepository 사용 -> DI

스프링을 실행하면 발생하는 에러

Wed, 29 Jan 2025 14:00:00 +0000

Web server failed to start. Port 8080 was already in use

에러 내용

Web server failed to start. Port 3000 was already in use.
Action:
Identify and stop the process that's listening on port 3000 or configure this application to listen on another port.
2019-11-06 22:00:06.094  INFO 8996 --- [           main] o.s.s.concurrent.ThreadPoolTaskExecutor  : Shutting down ExecutorService 'applicationTaskExecutor'

에러 원인

포트가 이미 실행 중일 때 스프링을 실행하면 발생하는 에러

해결 방법

실행중인 포트 끊어주기

lsof -i tcp:8080

나온 PID 확인 후

sudo kill -9 {PID 번호}

spring - 입문1

Fri, 24 Jan 2025 11:00:00 +0000

인프런 김영한님 스프링 입문 강의를 듣고 정리한 내용입니다
https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-%EC%9E%85%EB%AC%B8-%EC%8A%A4%ED%94%84%EB%A7%81%EB%B6%80%ED%8A%B8#

프로젝트 환경설정

프로젝트 생성

스프링 부트 스타터 사이트로 이동해서 스프링 프로젝트 생성 https://start.spring.io/

Project - 보통 gradle
Language - java
Spring Boot - M1과 SNAPSHOT이 아닌 제일 높은 버전
Group은 회사명, Artifact는 프로젝트명
Dependencies - 웹 프로젝트를 하기 위한 Spring Web, html 만들어주는 템플릿 엔진을 위한 Thymeleaf 추가
GENERATE
다운로드 후 압축 해제해서 intelliJ에서 build.gradle 프로젝트로 오픈

View 환경 설정

HelloController.java

@Controller
public class HelloController {

    @GetMapping("hello") // GET /hello 요청을 의미
    public String hello(Model model){
        model.addAttribute("data", "hello!!");
        return "hello"; // templates/hello.html 을 의미

    }
}

서버가 받아서 HelloController 안에 있는 메소드 실행
컨트롤러에서 리턴값으로 문자를 반환하면 viewResolover가 화면 찾아서 처리
기본적으로 resources > templates 밑에 있는 파일 찾아서 템플릿 엔진 처리
resources::templates/ + {ViewName} + .html

빌드

cd hello-spring
./gradlew build
cd build
cd libs
ls -alrth # 상태 확인
java -jar hello-spring-0.0.1-SNAPSHOT.jar
# 실행 확인

잘 안되면 원래 빌드 날리고 새롭게 빌드

./gradlew clean build

memo - 복사방지 해제

Fri, 24 Jan 2025 07:00:00 +0000

1

개발자 모드 열기
ctrl + shift + p
Disable javascript

2

개발자 모드 열기
설정 > 환경설정 > 디버거
자바스크립트 사용 중지

이미지 렌더링 개선

Tue, 10 Dec 2024 14:00:00 +0000

SIMTER : 고민을 부담없이 털어놓는 나만의 공간 🏡

Github: git1uv/client

2024.05 - 2024.10

이미지 렌더링 개선

장기 프로젝트고 규모가 나름 큰 서비스였던만큼 뒤로 가면 갈수록 이미지를 포함해 gif 등 애셋이 정말 너무 많아졌다. 그렇다보니 당연히 렌더링이 오래 걸렸다. 로컬에선 바로바로 뜨길래 문제점을 못 느꼈는데(이게 사고였다) 마감 즈음 배포하고 나니 화면은 바로 뜨는데 이미지만 늦게 떠서 내가 개발했음에도 답답하다는 생각이 들었다…

마감 근처라 성능을 개선하기엔 시간이 충분하지 않아서 할 수 있는 걸 했다 -> 발표날은 일단 background color는 바로 뜰 테니까 애셋이랑 같은 색으로 해서 “뭐가 뜨고 있구나”를 느끼게 해서 그나마 덜 답답하게 하고 발표 이후에 이미지 최적화 과정을 거쳤다.

찾아보니 대표적인 이미지 최적화가 lazy loading이라 좀 찾아봤다.

lazy loading: 중요도가 떨어지거나 당장은 화면에 보이지 않는 요소들의 로딩을 미루는 방식

lazy loading을 하면 페이지 초기 로딩 때 리소스 요청이 줄고 그로인해 더 빠른 처리가 가능하다는 것 같다.

사용할 때는 Suspense, fallback이랑 같이 쓰면 된다.

<Suspense fallback={<Loading />}>
  <Result />
</Suspense>

Suspense 안에 있는 컴포넌트들이 뜰 때까지 fallback에 들어있는 컴포넌트를 대신 띄워준다. Result가 뜨면 Loading은 사라진다.

근데 이건 기본적으로 뷰포트에 들어오지 않는 이미지들을 대상으로 적용하는 건데 우린 그런게 없다.. 그래서 다른 방식을 적용했다. 바로 react-image-file-resizer

react-image-file-resizer: 이미지 리사이징과 인코딩을 위해 사용하는 라이브러리

사용하는 이미지가 다 png, gif라 webp같은 압축률이 높은 확장자로 바꾸기 위해 사용했다. 이런 이미지 변환 라이브러리는 되게 많지만 여유 시간이 많지 않은 시점에서 간단하고, 프론트에서 전부 처리 가능하며, react용으로 랩핑되어있는 라이브러리라는 점에서 선택했다.

모든 이미지들에 다음과 같은 최적화 로직을 넣었다.

fetch로 이미지 리소스를 받아와 Blob 형태로 변환(Resizer 라이브러리에 넘기기 위한 전처리 단계)
Resizer를 통해 크기와 포맷을 정하고 리사이징
각 이미지를 리사이징한 후 메모리 내 URL로 등록한 후 리액트 상태에 저장해서 UI 렌더링에 바로 사용 가능하게 하기

지금 생각해보니 이렇게 이미지 리사이징을 해놓고 정작 얼마나 빨라졌는지 테스트를 안 했다. 왜 그랬지.. 로딩이 아예 없이 모든 이미지가 바로 뜬다 이런건 아니었지만 체감상 이전보다는 빠르게 떴던 거 같다. 기분탓일 수도 있고..

기본적으로 이미지가 너무 많았던거 같다. 모든 걸 다 이미지로 처리하지 않고 어떻게든 재활용하면서 줄였어야 했는데 아쉽다. 첫 프로젝트여서 너무 구현에만 급급했던 것 같다. 다음부턴 유의하면서 작업해야겠다.

hyeran's page

북마크 관리자 회고록

배경

1. 가장 유사한 폴더 추천/디폴트 설정

2. 시간 정보 처리

3. 북마크 정렬

아쉬운 점

아쉬운 점 혹은 개션시켜야 할 점

TTS

TTS

트러블 슈팅 - 예선전

예선전

상태 기반 흐름 전환

상태 기반 흐름 전환

구현 방식

버거웠던 예선 전 1주

예선 전 1주

framer-motion

spring

간단한 랜덤 로테이션

마우스 호버 틸트 효과

플립

날아오기

검색 hook

검색

팀플의 단점

팀플의 단점

aws - computing

AWS 컴퓨팅 실습 기록

실습 목표

EC2 인스턴스 생성 및 Docker 세팅

FastAPI 앱 작성 및 Dockerfile 작성

도커 허브 푸시 (멀티 아키텍처)

Launch Template 생성

Load Balancer 설정 (ALB)

Auto Scaling Group 설정

부하 테스트 (ab)

주요 오류 & 해결 과정

spring - 기본3

스프링 컨테이너와 스프링 빈

스프링 컨테이너 생성

스프링 빈 등록

스프링 빈 의존관계 설정

컨테이너에 등록된 모든 빈 조회

스프링 빈 조회 - 기본

스프링 빈 조회 - 상속 관계

BeanFactory와 ApplicationContext

스프링 빈 설정 메타 정보 - BeanDefinition

spring - 기본2

객체 지향 원리 적용

새로운 할인 정책 개발

새로운 할인 정책 적용과 문제점

관심사의 분리

AppConfig 리팩터링

새로운 구조와 할인 정책 적용

좋은 객체 지향 설계의 5가지 원칙의 적용

IoC, DI, 그리고 컨테이너

스프링으로 전환하기

spring - 기본1

예제 만들기

비즈니스 요구사항과 설계

회원 도메인 설계

회원 도메인 개발

회원 도메인 실행과 테스트

주문과 할인 도메인 설계

주문과 할인 도메인 개발

주문과 할인 도메인 실행과 테스트

Spring Boot와 MySQL 연결 시 오류

Could not find mysql:mysql-connector-java

에러 내용

에러 원인

해결 방법

aws - S3, CloudFront

웹 서비스를 배포할 때 사용하는 S3, CloudFront

S3

CloudFront란?

aws - S3

S3

S3

React Native - 기초2 Challenge