JJAE CODING DIARY

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.static bu..

코딩앙마 유튜브를 보며 react.js 스터디를 하고있다. next.js안에서만 리액트를 써봤고, 회사 프로젝트를 하느라 3개월동안 바닐라 자바스크립트만 쓰느라 react를 복습하며 놓친 부분을 메우고 있는 중이다! react.js 스터디 - 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 컴..

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라는 파일을 만들고 아..

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

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

한번 날리고 다시 쓰는 포스트. 힘이 없다...... 내가 뭐라고 썼었지? 무튼 나는 이제 gradle로 개발하려고 한다. framework | springboot build tool | gradle ide | STS 내가 날린 포스트는 정말 사족도 많고 재밌었는데 나는 이제 다시 그런 드립들을 생각해 낼 자신이 없기때문에 그냥 무미건조하게 쓸 예정임ㅜ 스프링부트 초보의 미니 프로젝트 만들기 lombok 설치하기 기존 포스트에서 나는 스프링부트 설치할 때 dependency에 롬복도 설치를 해놔서 추가로 뭘 할게 없다. 그러나 혹시라도 모르는 분들을 위해 기록을 해볼까 함. 1. build.gradle ㄱㄱ 2. dependencies에 얘네 추가 dependencies { // ... compileOn..

ㅇ.... ㅇㅇ,,, 결론: 복구 안된다! 저기 블로그들 다 복구 못함!!!

나는 스프링이랑 스프링부트를 잘 모른다.. 이미 회사에서 짜여져있는 코드에 수정만 해본 경험이 있을 뿐. 맨날 모르는 용어 검색만 하고 책도 부분부분 읽다가 이거는 영 이렇게하면 mvc 원리를 못깨우치겠다 싶어서 프로젝트 하나 만들어보기로 했다. 처음엔 백을 스프링으로 하려고 하다가 스프링부트로 프로젝트를 진행해도 문제 되지 않을 거라는 말을 듣고 그렇게 하기로 했다. 무튼 해당 블로그는 그냥 빈틈이 아주 많을 것으로 예상되는 스프링부트로 프로젝트 만드는 기록이다.. 빌드툴은 Maven으로 하려고 하고 프론트는 리액트로 할까 생각중인데 이건 나중에 상황 봐서 마저 정하련다. 스프링부트 초보의 미니 프로젝트 만들기 Maven 이용할 경우 1. STS와 Java는 이미 준비되어 있는 상태. 기존에 쓰던 wo..

log4j2 설정하기 https://linked2ev.github.io/gitlog/2019/08/26/springboot-mvc-8-%EC%8A%A4%ED%94%84%EB%A7%81%EB%B6%80%ED%8A%B8-Log4j2-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0/ springboot 모르는 사람이 보기에도 직관적이었고 gradle 버전 7일 경우의 설정방법이라 따라하기 쉬웠다 이것도 봐야함.. https://veneas.tistory.com/entry/Spring-Boot-%EC%8A%A4%ED%94%84%EB%A7%81-%EB%B6%80%ED%8A%B8-%EB%A1%9C%EA%B7%B8-%EC%84%A4%EC%A0%95-log4j2 lombok 설치하기 https://d..

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