전체 글

이번에는 파일 드라이브라는 클라우드 웹을 만들었다. 지난 토이 프로젝트 회고때 말한 것 처럼 이번 토이 프로젝트는 스프링 부트를 이용해 백엔드 서버를 만들고 리액트로 프론트를 만들었다. "파일 드라이브" 라는 걸 만들기로 결심한 이유는, 여느때와 같이 유튜브를 보다가 Next.js로 FileDrive라는 웹 사이트를 만드는 영상을 보았다. 맨 앞에 완성된 프로젝트가 어떻게 돌아가는 지 조금 보다가 만들어보면 재밌겠다🤔 생각이 들었고, 바로 프로젝트 구상을 했다. 저분의 기능에 폴더 관리 기능을 추가하기로 했다. 그리고, 저 영상은, 다 보게 되면 왠지 저 분의 코드 구조를 따라하고 따라 칠 것만 같아서 영상은 더 이상 보지 않았다. 구성은 스프링 부트와 MySQL를 백엔드로 하고 업로드할 파일들은 파일..

개인 Spring Boot 프로젝트 중 Github에 yml, properties 파일에 있는 중요한 정보(예, 데이터베이스 계정 정보)와 같은 것들은 어떻게 숨겨야하는지 찾아보았고, 저는 환경변수(.env)를 이용해서 정보를 숨기기로 했습니다. 더보기 TMI 왜 이 방법을 선택했냐면, 엄청 중요한 이야기는 아니구요... 찾아보니 가장 많이 사용하시는 방법이 Jasypt를 이용한 방법이었습니다. 제 생각엔 이 방법의 단점이 암호화 키를 갖고 있어야 한다는 점인데, 그 암호화 키는 어디다 저장해서 갖고 있어야 할까요? 🧐 ( 어떤 분들은 Github Secrets 에 보관하시더라구요. ) 그리고 자바에 코드를 또 작성해야하구요. 사실 개인 프로젝트라 정보 털려도 괜찮은데 정보 노출되면 깃헙에서는 보안 ..

지난번 단어장 웹에 이어서 이번에는 더키라는 블로그 웹을 만들었다. 더 큰 프로젝트다 보니 많은 리액트 라이브러리를 사용했다. 물론 별도의 라이브러리 없이 직접 만들면 좋겠지만 나는 편리하고 좋은 라이브러리를 찾아서 사용하는 것도 좋은 방법이라 생각한다. 미천한 나의 실력으로 직접 만든 불안정한 라이브러리를 사용하여 사이드 이슈를 많이 발생시키는 것보다 많은 사용 하며업데이트고 관리되는 라이브러리를 찾아 사용하는 것도 프로젝트를 구현하는 데 있어서 좋은 방법이라 생각한다. (구차한 변명 같네ㅎ) 이번 프로젝트 개발 기간은 ( 라이브러리를 많이 써서 그런가 ) 이전보다 짧은 총 6일 걸렸다(첫 커밋 ~ 마지막 커밋). 아무래도 이전 프로젝트에서 파이어베이스 인증을 제외한 간단한 쿼리 사용법에 대해 배웠다..

프론트엔드 개발자로 전향하기 위해 최근 리액트를 배우고 있다. [리액트를 다루는 기술]이라는 책 한권을 완독했고, 게시판 만들기보다 더 재미난걸 만들어 보고 싶어 고민하다가 단어장이라는 웹을 만들어 보았다. 자바스크립트는 알지만 리액트뿐만 아니라 처음 접하는 라이브러리가 많았기 때문에 원하는 걸 구현하려면 어떻게 사용하면 되는지 문서를 찾느라 고생했다. 그래서 코딩하는 시간보다 구글링하는 시간이 더 많았다. 개발 기간은 총 7일 걸렸다(첫 커밋 ~ 마지막 커밋). 순수 개발시간은 아마 30시간정도 되지 않을까 싶다. # 구상 게시판처럼 리스트 조회/수정/삭제가 있으면서 간단한 걸 만들어 보고 싶었다. 초기 UI 구상은 피그마를 사용하면 참 좋겠지만 할 줄 모르니... 아래와 같이 종이에 끄적거렸다. 처음..

[MySQL] MacOS ventura 13 에서 MySQL Workbench 가 실행되지 않을때 해결 방법 기존에 workbench 는 몇 버전이었는지 기억은 안납니다. 원래 업데이트 같은거 잘 안하는 스타일인데,,,,, 테스트를 위해 ios 시뮬레이터 돌릴려고, xcode 설치를 위해 mac os 업데이트 했다가 workbench 실행 안되서 2시간 날린...🤯 Ventura 13 으로 macOS 업데이트 후 기존에 설치되어 있던 Workbench 를 실행하면 "MySQLWorkbench 응용 프로그램이 예기치 않게 종료되었습니다." 메세지가 나오면서 Workbench 가 실행되지 않았습니다. 무시해도 계속 무한반복으로 떴습니다... 오류 메세지를 구글링해보니 2021년 글 기준 MySQL 8.0.2..

[Vue.js] Vue-cli 와 webpack-bundle-analyzer 👩‍💻 webpack-bundle-analyzer webpack-bundle-analyzer는 웹팩을 통해 번들링되는 모듈의 크기를 시각적으로 보여준다. 번들 파일의 용량을 확인함으로써 번들 크기에 문제가 있는 번들을 확인하고 줄일 수 있도록 하여 속도 향상시킬 수 있도록 도움을 준다. ⛏️ 설정하기 기본적으로 build 를 하게되면 자동으로 실행되며, pluginOptions.webpackBundleAnalyzer에 옵션을 추가할 수 있다. // vue.config.js pluginOptions: { webpackBundleAnalyzer: { // 이곳에 webpack-bundle-analyzer 옵션을 추가하면 된다. an..