Projects 10

4. 오류/에러

- 2024.04.15 firebase에 넣었던 데이터 가져와서 보여주는데 줄바꿈 안되는 오류 있었고, 아래 적은것처럼 처리함. https://springdream0406.tistory.com/82 firebase 줄바꿈 적용안됨 우선 해결방법부터 말하자면 내용 보여주는 곳 css를 white-space: pre-wrap; 처리 해주면 된다. 이제 오류 얘기를 해보자.. textarea로 데이터 받아서 firebase에 등록하고, 이를 가져와서 보여주는데 줄바 springdream0406.tistory.com - 2024.04.14 firebase 사용량 초과에 걸렸다. 참고로 firebase의 무료 요금 하루 읽기 제한이 5만건 정도이다. 문제는 방명록의 게시글을 삭제하고 나면 변경된 firebase..

3. 구현

-2024-04-15_23:03게시판 끝남. 글쓰기 이미지 눌러서 선택가능, 로그인해야지 작성하기 버튼 활성화UID, username, 글내용 없으면 작성하기 거절당함.글 써져있는건 데이터 가져온 모습이고, 삭제버튼 클릭시 UID 체크하고, firebase에서도 제약걸어두었음. 홈 페이지도 대략 끝남.실제 배포하게되면 업데이트 정보에 버전 정보랑 날짜 변경하면 되고, 공지사항 날짜도 그때 맞춰서 수정해주고.작업안들어간 놀이터랑 사진첩 빼고는 요약정보도 들어가있고, 대충 알림으로 알릴만한 내용들 적은것 같고..  -2024-04-14_02:19유저 연동하는 부분 수정하고, firebase의 posts 데이터들 불러오는 설정하고, firebase 제한사항 설정해둠.같은 이메일 계정 인증 오류 alert 설정..

2. 구상

누나뮤직 백엔드 서버 확인 - 하루에 한번씩 꺼지도록 되어있음 => 변경 필요 04.16 03.47 홈,방명록 여러번 왔다갔다 했으니 그 시간대 연결수랑 데이터 요청수 확인하기 - 2024.04.15 _23:09 프로젝트 세부정보 모달로 띄울 수 있도록 작업 필요. 세부정보로 뭐 띄울지 미리 생각 좀 해둬야할듯. 지금 페이지도 내용들 너무 추상적인가? 한번 생각 필요. 세팅 페이지 음악 자동 추천 기능 만들어야함. 날씨 지역 선택 기능 추가해야함. 어느정도 거의 끝났으니 다시 백엔드쪽 진도 좀 내고, 어짜피 배포하려면 배포부분도 공부해야하니 포트폴리오 작업은 이제 좀 늦추고 백엔드쪽 달려야할듯 - 2024.04.15 _13:14 firebase 사용량 제한 당해서 글이 안나온다.. 글쓰기 기능 구현했는데..

1. 발상

취업 준비를 시작하면서 포트폴리오를 만들 생각을 가졌었다. 그런데 광인사에서 백앤드만 담당했던 터라 갑자기 페이지를 만들려니 막막해서 같이 교육들었던사람의 포트폴리오 기본양식을 받아서 간단하게 수정했다. 그렇다 보니 뭔가 내가 원했던 느낌도 아니고 해서 나중에 포트폴리오를 새로 만들어야지 라고 생각하고 있었다. 그러다가 인프런에서 node 백엔드 부트캠프 강의를 보는데, html/css 강의 내용으로 싸이월드만들기가 나왔다. 그걸 보면서 아! 이거다! 라는 생각이 들었고, 이 포맷을 사용해서 나만의 유니크한 포트폴리오 페이지를 만들어봐야겠다고 생각했다.

6. 회고/생각

- 2024.03.25 수업을 듣다가 재밌겠다고 생각이 들어서 갑작스럽게 시작하게 되었다. 오랜만에 리액트를 실행하니 낯설었는데, 처음 리액트를 배울때와 다르게 기본설정되어있는 코드들 중에 지워도 되는게 무엇인지 어느정도 구분이 되는걸 보고 그래도 실력이 늘긴 했다는 생각이 들더라. 수업은 index.html에 js까지 쓰는 코드였지만, 나는 react를 쓰고, 값 몇개는 받아와 사용하는 거기 때문에 코드가 달라지면서 이론적으로 배운거랑 실제 써보는건 다르다는걸 다시한번 느꼈다. 환경변수 설정한 값이 노출되는거 때문에 몇시간 붙들고 고생했는데 일단은 에러가 아닌걸로 예상된다. 고생은 했지만 덕분에 더 발전했다고 생각한다. 구상한대로 바로 구현하고 싶지만, 프론트적인 실력이 부족해서 바로 구현하기가 힘들다..

4. 오류/에러

- 2024.03.24. 21:04 일단 1차적으로 만들고 gh-pages를 사용해 git에 배포를 해보았다. 그런데 소스에 환경변수에 넣어둔 고객사식별코드가 노출되었다. 열심히 검색해보면서 환경변수 우선순위나 테스트/배포용 환경변수 설정 같은 글을 보긴 했지만, 답은 없었다. 그래서 gh-pages는 local에서 배포작업을 하니 git repository를 가져다 배포하는 netlify를 통해 배포해보기로 했다. 그렇게 netlify에 배포해봤는데도 똑같이 고객사식별코드가 노출이 되었다. 그런데 gh-pages와 netlify 모두 다 환경변수 설정을 안해줬는데 고객사식별코드 값을 가지고 있었다. 그래서 로컬의 .env 파일을 지우고 배포하면 둘 다 고객사식별코드가 없다고 나온다. 뭐지?? gh는 그..

3. 구현

- 2024.03.25 우선 Repository를 fake-kakaopay로 만들고 react를 만들어 연동했다. https://github.com/SpringDream0406/fake-kakaopay GitHub - SpringDream0406/fake-kakaopay Contribute to SpringDream0406/fake-kakaopay development by creating an account on GitHub. github.com 수업때 배운건 html과 js로 구성되었기 때문에 포트원에서 제공한 리액트에서 아임포트 결제 연동하기 페이지를 참고했다. https://github.com/iamport/iamport-react-example/blob/master/manuals/PAYMENT...

2. 구상

- 2024.03.25 발상하면서 구상도 대충 해두었다. 일단 변경 가능한 결과값은 금액과 상품명이다. 일단 1차 구상으로는 위 왼쪽 사진처럼의 결과에 내가 변경 할 수 있는 부분을 위 오른쪽 사진처럼 빈칸 input으로 입력하여 실행하는걸 생각했는데, 은근히 시각적인 면이나 입력하는 방법이나 불편할 것 같다는 생각이 들어서, 입력하는게 2개 밖에 안되니 입력하는 공간을 왼쪽에 만들고, 오른쪽에 예상 결과값을 보여주는 방식으로 하는게 좋을듯 싶다.

1. 발상

NestJS 수업을 듣는데 결제 연습으로 포트원을 통해 kakaopay 를 이용했다. 그런데 이게 예전에는 당일 결제 내역을 환불해주는 식이었던것 같은데 지금은 가상의 금액으로 가상결제를 하는 식이다. (아니면 카카오페이만 지원해주는 기능인듯?) 실제 카톡 알림으로 구매내역이 온다. 구매처가 KakaoDevelopers로 나오는걸 보면 카카오에서 제공해주는 기능인것 같다. (KakaoDevelopers에는 무통장 입금 생성기능말고는 없는게 결제사를 위해 제공해주는 기능인듯?) 무튼 구매처가 KakaoDevelopers로 나오는걸 제외하면 실제 결제결과와 같다고 볼 수 있고, 이걸 활용해서 가짜 카카오페이 결제 결과를 얻는걸 만들어 보면 재밌을 것 같다고 생각했다. 이런식으로 말이다. 이렇게 가짜 카카오페..