개발 이야기36

• 

  react-router-dom을 사용하는 이유와 구조 electron.js와 react로 데스크탑 메신저앱을 만들면서 초반에 router path를 잡아야 할 필요성을 느껴 react-router-dom을 사용했다. 또한 electron.js에서 ipcRenderer를 통해 react에서 만든 브라우저를 electron의 새 창으로 띄우고 싶어서, react-router-dom를 통해 새 창으로 띄우려는 path를 잡아 loadURL(path주소) 이벤트를 사용할 수도 있었다. 오늘은 이 react-router-dom 개념에 대해 포스팅 해보려고 한다. react-router-dom react에서 라우팅을 구현하기 위한 라이브러리이다. 기본적으로, SPA(Single Page Application)에서 페이지를 다시 로드하지 않고도 다른 뷰나 컴포넌트를 표.. 개발 이야기/frontend 2023. 10. 12.

• 

  node express에서 html, js, css파일 정상적으로 불러오기 express에서 html을 불러올 때는 주의해야 할 사항이 있다. 우리는 보통 다음과 같은 방식으로 html을 연결하곤 하는데, 이렇게 하면 해당 html에 script로 박아넣은 js파일이나 css파일 등을 바로 읽지 못하고 오류가 날 수 있다. 주의사항 이를테면 아래처럼 html 파일을 연결했을 때, 아래처럼 404에러가 줄줄이 뜨는 것을 확인할 수 있을 것이다. 해결방법 해당 오류에 대해서는 아래 페이지에서 해답을 찾을 수 있었다. Serving static files in Express Serving static files in Express To serve static files such as images, CSS files, and JavaScript files, use the express.. 개발 이야기/backend 2023. 10. 9.

• 

  props로 내려줄때 원하는 부분만 가져오기 서론 코딩앙마 유튜브를 보며 react.js 스터디를 하고있다. next.js안에서만 리액트를 써봤고, 회사 프로젝트를 하느라 3개월동안 바닐라 자바스크립트만 쓰느라 react를 복습하며 놓친 부분을 메우고 있는 중이다! props로 내려줄때 원하는 부분만 가져오기 내가 기존에 알고있던 props 사용방식은 다음과 같다. 출처: https://ko.reactjs.org/docs/components-and-props.html#function-and-class-components function Welcome(props) { return Hello, {props.name}; } function App() { return ( ); } App 컴포넌트에서 name을 넘겨서 Welcome 컴포넌트에서 props... 개발 이야기/frontend 2023. 10. 9.

• 

  리액트 yarn start시 proxy 에러 해결 방법 ERROR 스프링부트와 리액트를 연동하기 위해 proxy를 설정하던 중 오류가 발생했다. 다른 블로그들을 보면서 이런식으로 package.json에서 proxy를 설정한 뒤 저장하고 yarn start를 해서 서버를 구동시키려는데 터미널에서 다음과 같은 오류가 떴다. "Invalid options object. Dev Server has been initialized using an options object that does not match the API schema." SOLUTION 이런 경우 당황하지 말고 터미널 켜서 http-proxy-middleware를 깔아보자 npm install http-proxy-middleware 그리고 src폴더 밑에 setupProxy.js라는 파일을 만들고 아.. 개발 이야기/frontend 2023. 10. 9.

• 

  스프링부트 미니 프로젝트 만들기 - 리액트 연동 초기 세팅 개발환경 포스팅 하기 앞서 내가 만들 미니 프로젝트의 개발환경은 이러하다. BACKEND framework | springboot build tool | gradle ide | STS FRONTEND library | react.js ide | VScode 스프링부트에 리액트를 연동해보고 테스트 데이터도 받아 와보자. 1. 스프링부트 프로젝트 내 React 프로젝트 생성 (1) 터미널 오픈 (2) 리액트 프로젝트 폴더 생성: 터미널에 아래 명령어 입력. 프로젝트명은 영어 소문자로 해야 할거다. npx create-react-app 프로젝트명 이렇게 나오면 성공. 2. 리액트 경로 확인 나는 이클립스 터미널이 영 텍스트도 짤리고 엑박도 많아서 그냥 탐색기 들어가서 확인을 해보았다. 탐색기에 스프링부트 프로.. 개발 이야기/backend 2023. 10. 9.

• 

  스프링부트 미니 프로젝트 만들기 - MVC 모델 큰 그림으로 개념잡기 문제점 일단 이번 프로젝트를 진행하기 전 개념 정립을 한번 더 해야 함을 느꼈다. MVC모델이 이해가 될 듯 하다가 말았던 이유는 직장 프로젝트에 쓰인 class가 책이나 인강에서 접하는 class와 달랐기 때문이다. 또한 이해가 안가는 용어들(dto, dao, vo, controller 등)을 검색해보면 어디는 dto를 쓰고 어디는 안 쓰고, 어디는 entity를 쓰고 어디는 안썼다. 혼란했다...숲을 모른 채로 나무부터 봐서 그런걸까. 서둘러 큰 흐름을 이해해야 할 필요를 느꼈다. MVC모델 개념 MVC모델에 대해서는 찾아보면 뭐가 많이 나온다. 그 중에 가장 직관적인 도식은 아래 그림이였다. 이제 좀 개념이 잡히는 데이터의 흐름. 나만의 버전으로 텍스트로 한번 도식화 해보려 한다. TIL스프링부트 .. 개발 이야기/backend 2023. 10. 9.

• 

  스프링부트 미니 프로젝트 만들기 - lombok, log4j2 설치 한번 날리고 다시 쓰는 포스트. 힘이 없다...... 무튼 나는 이제 gradle로 개발하려고 한다. framework | springboot build tool | gradle ide | STS 스프링부트 초보의 미니 프로젝트 만들기 lombok 설치하기 기존 포스트에서 나는 스프링부트 설치할 때 dependency에 롬복도 설치를 해놔서 추가로 뭘 할게 없다. 그러나 혹시라도 모르는 분들을 위해 기록을 해볼까 함. 1. build.gradle 2. dependencies에 아래 항목 추가 dependencies { // ... compileOnly 'org.projectlombok:lombok' annotationProcessor 'org.projectlombok:lombok' } 3. build.g.. 개발 이야기/backend 2023. 10. 9.

• 

  스프링부트 미니 프로젝트 만들기 - Maven, Gradle 두 버전으로 프로젝트 생성 서론 처음엔 백을 스프링으로 하려고 하다가 스프링부트로 프로젝트를 진행해도 문제 되지 않을 거라는 말을 듣고 그렇게 하기로 했다. 무튼 해당 블로그는 그냥 빈틈이 아주 많을 것으로 예상되는 스프링부트로 프로젝트 만드는 기록이다.. 빌드툴은 Maven으로 하려고 하고 프론트는 리액트로 할까 생각중인데 이건 나중에 상황 봐서 마저 정하련다. Maven 이용할 경우 1. STS와 Java는 이미 준비되어 있는 상태. 기존에 쓰던 workspace에 spring starter project를 생성함. 참고: https://powernote.tistory.com/35 [STS] spring boot 프로젝트 생성하기. spring boot 프로젝트 생성. 기본 환경 ide: sts 4.11.0 spring : s.. 개발 이야기/backend 2023. 10. 9.

• springboot에 log4j2 설정하기(gradle버전) log4j2 설정하기 springboot 모르는 사람이 보기에도 직관적이었고 gradle 버전 7일 경우의 설정방법이라 따라하기 쉬웠다 8. 스프링부트 Log4j2 적용하기 우선 추후 개발하기 편하게끔 스프링부트에 Log4j2 부터 적용하겠습니다. linked2ev.github.io lombok 설치하기 [Spring Boot] 스프링 부트 로그 설정 (log4j2) 목차 0. 환경 windows10 openjdk version "11" 2018-09-25 IntelliJ Tool Spring Boot 2.5.6 Gradle Project MyBatis + Mysql + HikariCP를 이용해 DB(Mysql) 연동할 프로젝트입니다. 1. 성능 log4j2는 Spring Boot에 기본으로 적용되어있는.. 개발 이야기/backend 2023. 10. 9.

• 

  vscode에 tortoise svn 연동하기 (next.js 이용 버전) 아래는 내가 시행착오를 겪으며 알게된 vscode에 svn을 연동하는 방법이다. next.js를 이용한 프로젝트를 만듦과 동시에 svn에 연동도 하는 그런 최적의 루트를 찾아야 하는데 블로그를 찾아봤지만 나와 비슷한 사례를 발견하는 것도 어려웠고(당연하다..) tortoise 홈페이지를 봐도 내가 찾는 부분은 안나오니 답답했었다. 그냥 이것저것 시도해보면서 내게 가장 잘 맞는 프로세스를 찾아서 공유해보겠다. vscode에 tortoise svn 연동하기 (next.js 이용 버전) 1. vscode에 svn 익스텐션 잘 설치하기. 2. 원하는 경로에 원하는 이름으로 svn에 연동할 폴더 하나 생성. 3. svn 저장소 브라우저에 체크아웃 할 폴더 만들기(create folder) -> 경로 복사 4. v.. 개발 이야기/알아두면 유용한 것들 2023. 10. 9.