전체 글
인생은 퇴근부터![React] JSX문법 Html 코드변환 방식
import TestPage from "./components/TestPage"; function App() { return ( TEST TEXT ); } export default App; return 쪽에 항상 전체를 div태그를 사용하여 감싸주는 등 전체요소의 틀이 필요하다 이는 JSX문법의 특성때문인데 여타 다른 언어와 같이 웹에서 지원하는 언어로 변환시켜주는 과정이다. JSX코드는 인간의 눈에 익숙한 언어를 js 파일에 편하게 작성할 수 있도록 도와주지만 해당 문법은 브라우저에서 지원하지 않기에 이를 react를 통해서 변환시켜준다. react는 해당 코드를 웹에서 표현하기 위해 html 코드로 변환시켜준다 function App() { return React.createElement("div"..
[JavaScript] 스프레드 연산자
스프레드 연산자는 JavaScript의 연산자 중 하나로 배열이나 객체와 같은 iterable 객체를 확장하여 개별 요소로 분리할 수 있게 해주는 기능이다. ... 으로 표현이 되고 해당 연산자를 사용하면 배열 안에 있는 요소들을 개별적인 값으로 분리하여 전개할 수 있다. 스프레드 연산자는 배열, 객체를 확장하여 개별 요소로 분리할 수 있어 간결한 작성을 도와주고 재사용성을 높일 수 있다. 하지만 복사하는 배열, 객체의 크기가 크다면 성능적인 이슈가 발생할 수 있다 객체 testCode는 메모리에 저장되어 있으며 상수값인 testCode 에는 메모리에 있는 주소를 가리키는 포인터를 저장한다 따라서 testCode 를 testCode2 에 할당하면 포인터가 복사된다 해당 값 (testCode) 을 변경하고..
[Spring Boot , Node.js] 두 개의 프로젝트 연동 CROS 설정
프로젝트를 관리할 때 프론트엔드 작업 프로젝트와 백엔드 작업 프로젝트로 나누어 관리하는게 유지보수도 관리도 가독성도 좋다. 해당 게시글에서는 인텔리제이와 웹스톰을 사용했고, 인텔리제이는 스프링 부트 프로젝트 웹스톰은 node.js , express 모듈을 사용한다. 우선 웹스톰 프로젝트에서 인텔리제이와 api 연동을 위한 npm 패키지들을 설치해준다 설치해야하는 npm 패키지는 다음과 같다 cors , express(사용하는 모듈) , axios npm istall cors npm istall axios npm install express js 파일을 하나 만들어 다음과 같이 테스트 코드를 작성한다 const cors = require("cors"); // CORS 미들웨어 모듈 const express..
Spring Boot 프로젝트 lombok 오류 error: cannot find symbol 경우
프로젝트 실행 시 해당 오류가 발생할 때 위와 같은 경우 실제 코드는 위와 같으나 테스트이름입니다. 라는걸 인식을 못하는 거 같다 cond에는 lombok의 getter, setter가 적용이 되어있고.. 전역 인코딩도 UTF-8 설정이 되어있어서 lombok을 인식 못하는 것 같았다. bulid.gradle 파일로 가서 잘 설정이 되어있는지 체크를 해본다 친절하게 최신파일로 업데이트가 가능하다고 알려준다. 또한 annotationProcessor 'org.projectlombok:lombok:1.18.26' 종속성 선언이 빠져있어 오류가 났었던 것 같다. 해당문구에 대해 알아보니 annotationProcessor 키워드는 gradle 에 Lombok 라이브러리를 주석 프로세서로 취급하도록 하고 일반적..
[Spring Boot] 인텔리제이 실행 시 문구 바꾸기
아스틱 코드 문구 Text to ASCII Art Generator (TAAG) patorjk.com 해당 웹에서 입력한 텍스트를 예쁘게 바꿔줄 수 있다. 해당 텍스트를 복사해서 banner.txt 파일을 만들고 해당 파일에 그대로 붙여넣어주면 끝! 이뻐진 모습