PROJECT 6

프로젝트 회고

'스프링 부트3 백엔드 개발자 되기'를 읽으며 쭉 흐름대로 따라해 본 프로젝트였다.아직 익숙하지 않은 부분은 빌더 패턴이랑 oauth 설정 (전에 인강에서 한 번 마주침...그 사이에 호로록 까먹,노드 프로젝트에선 구글 로그인 구현할 때 제공하는 라이브러리가 있고 스프링만큼 설정할 게 많지 않아서 비교적 쉽게 접근할 수 있었던 기억이 남),특히 테스트 코드 짜는 부분은 아직도 낯설다요이건 관련해서 책이나 관련 연습할 수 있는 것들 찾아보자요 !한 번 한다고 절대 내 것이 되는 게 아니란 걸 알고 있다.많이 부딪히면서 경험하고 연습하다 보면 흐름을 더 유연하게 파악하고 원리를 이해할 수 있게 되겠지 ? 내 나름 구간을 나눠서 점진적으로 브랜치를 구분해두었는데다음 프로젝트할 때도 파트를 나누어서 연습하면 좋..

PROJECT/미제 2024.11.08

[maple] 5. 프로젝트 배포 및 문제 & 회고

# 배포  리드미 작성 후 배포 시도 cloudtype으로 프록시 서버 배포부터 해보자 클라우드타입 프리티어를 쓰고 있어서 프로젝트 추가는 안 됨 !기존 워크스페이스 내에서 플러스 버튼 클릭 → github 저장소 배포하기 선택사용 프레임워크, 버전, 포트 번호, 환경 변수, 실행 명령어 등을 설정해주고 배포 버튼을 누르면 된다.난 이미 프로젝트 서버를 2개 돌리고 있었어서 막혔다. 하 하 일단 개인 프로젝트 서버 하나를 중단하고 재시도해서 배포 올리기 성공이제 프론트 파일을 배포하고 기존 로컬호스트 url 대신 배포 주소로 변경해보자 !넷리파이 배포 완료 → 넷리파이 환경변수에도 배포한 프록시서버 url 넣어줌 배포한 프론트 url로 가서 테스트해보려고 하는데 띠용 ??...... 갑자기 netlify..

PROJECT/toy-project 2024.09.26

[maple] 4. 이미지 저장 기능 수정 및 UI 구현

# 이미지 저장 로직 점검 현재 이미지 저장 버튼을 누르면 순간적으로 아래같은 부분이 뜨고다운로드된 이미지를 보면 이미지가 좀 짓눌린 ? 느낌처럼 잡혀 있는 상태이다. gpt에게 질문하고 받은 답변 중 일부ㄴ>이미지 저장 시 화면이 아래로 밀리거나 캡처된 이미지가 왜곡되는 문제는 html2canvas가 캡처할 때 DOM 요소가 실시간으로 변화하면서 발생할 수 있다.특히, DOM의 크기나 배치가 변경되면 캡처 결과가 예상과 달라질 수 있다. html2canvas 사용 시 순간적으로 캡처 영역이 보이는 문제는 DOM을 캡처하는 방식에서 발생하는 일반적인 문제입니다. 이 현상을 피하려면 DOM을 직접 렌더링하지 않는 방식을 사용하거나 다른 라이브러리를 활용할 수 있습니다. ㄴ> dom-to-image 라이브러..

PROJECT/toy-project 2024.09.23

[maple] 3. 메모 기능 & 이미지 저장 기능 구현

1. 메모 상태 추가  CharacterSearch.js에서 캐릭터 검색 결과 옆에 메모를 작성할 수 있는 텍스트 입력박스 추가 const [memo, setMemo] = useState(''); // 메모 상태 추가 textarea            value={memo}            onChange={(e) => setMemo(e.target.value)}            placeholder="메모를 작성하세요"          />결과 : 메모 입력 후 상태에 저장된 내용을 화면에 표시 → 이렇게 메모를 사용자에게 입력받고 상태를 통해 저장한다. 추후 css 입혀서 말풍선 ?! 레트로 느낌 나게 꾸며봐야겠다.2. 이미지와 메모를 합쳐서 PNG로 저장하기 이미지와 메모 부분을 함께 이미..

PROJECT/toy-project 2024.09.21

[maple] 2. 프로젝트 셋팅 및 조회 기능 구현

0. 리액트 셋팅하기npx create-ract-app 프로젝트명 1. 넥슨 api 호출을 위해 axios 라이브러리 설치npm install axios 기본 파일 구조 설정 2. API 통신 설정하기 src/api/nexonApi.js 파일 생성 및 Nexon API 호출 로직 작성발급받았던 api키는 깃허브에 올라가지 않게 따로 .env 파일로 뺐다.캐릭터 이름으로 식별자 가져오기 → 그 식별자로 캐릭터 기본 정보를 조회할 것임 !!캐릭터 조회할 때 일단 date 선택 파라미터를 안 넣어도 기본적으로 최근걸로 조회해주는 듯?!import axios from 'axios';// API 기본 설정const API_BASE_URL = 'https://open.api.nexon.com/maplestory/v..

PROJECT/toy-project 2024.09.20

[maple] 1. 넥슨 API 키 발급 & 테스트 호출

이전부터 넥슨 api로 무언가를 만들고싶단 생각을 했었는데스터디 듣기 바쁘단 핑계로 미뤄 두었던 버킷리스트(?)를 실행해보려고 한다. 이전에 생각해두었던 내 나름의 기획은 !메이플 캐릭터를 조회해서 자신의 캐릭터 이미지를 찾고말풍선 ui를 옆에 넣어서 간단한 메모같이 작성할 수 있고png파일로 다운받거나 저장하는 기능이 있는짤로 쓰면 재밌을 것 같은 웹사이트를 상상했었다. 우선 테스트를 해보면서 어떤 식으로 api 사용하는지부터 확인해보자 !https://openapi.nexon.com/ko/넥슨 로그인 후 애플리케이션 목록에 들어가면기존에 이미 앱 등록해봤던 것이 있던 상태 상세 내역을 확인해보면 api 키를 확인할 수 있다.https://openapi.nexon.com/ko/game/maplestor..

PROJECT/toy-project 2024.09.20
320x100