전체 글 71

[React] 리액트 프로젝트 생성하기

터미널로 리액트 프로젝트 생성하기 프로젝트 폴더를 만들고 거기서 터미널을 연다. npm create vite@latest  -> Vite 라이브러리 빌드 툴 (소스코드 사이즈 압축 가능, 자바스크립트로 컴파일가능, 빠른 미리보기)열고 위 명령어를 쳐보자 근데 나는 에러가 났다.   SyntaxError? 머지 모듈 문제인가 흠냐뤼,, 고민중하다가버전을 확인해보았다. npm version 을 확인해보니 6. 대 버전이었다.   nvm 도 12 버전이라 22 로 높이니 npm이 22로 알아서 높아졌다. 이후 명령어를 실행하니 설치가 되었다. 이 명령어는 설치를 위함이 아닌 프로젝트 이름과 설정을 위함인데,  아까 과정을 겪고 나면 위 사진 처럼 프로젝트 네임을 적고,  프레임워크를 고르고,  사용할 스크립트..

FrontEnd/react 2025.03.04

[Node.js] 라이브러리 사용하기

https://www.npmjs.com npm | HomeBring the best of open source to you, your team, and your company Relied upon by more than 17 million developers worldwide, npm is committed to making JavaScript development elegant, productive, and safe. The free npm Registry has become the center of Javawww.npmjs.com위 주소를 들어간다. 여기는 라이브러리 백화점!쓰고싶은 라이브러리를 찾아서 갖다 쓰면 된다.   설치완료 후 package.json에 들어가보면 추가한 라이브러리의 버전이 d..

FrontEnd 2025.02.28

[Node.js] 모듈 시스템 만들어보기

간단 모듈 만들어보기먼저 CJS common jsmath.js 파일 만든다.  아래 module.exports로 이 모듈에서 꺼낼 수 있는 키와 값들을 정의 해준다. (키 값이 이름이 같다면 저렇게 하나씩만 적어도 됨) index.js 파일에서는 require기능을 이용하여 해당 기능을 가져온다.  결과 : 객체로 출력된다. 인자를 전달해보자. 결과:   근데 modeData.add 이런식으로 하지 않아도 되고 선언당시 구조분해할당으로  아예 이렇게 해버려도 된다. 결과는 똑같다. 다음은 ESM(ES 모듈 시스템) 이게 훨씬 최신식으로 리액트에 사용된다.  package.json 파일에 "type":"module"을 추가해준다. 이게 ESM을 쓰겠다고 한건데, 이제 이걸 쓰게된 이상 위에 썼던 cjs를..

FrontEnd 2025.02.28

[Node.js] Node.js 설치 후 실행

길을 잃어따 따따ㅏ다따따다다..갑자기 Node.js 를 대충 훑습니다. 예 그 https://nodejs.org/ko Node.js — 어디서든 JavaScript를 실행하세요Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.orgLTS 버전으로 다운로드 받습니다. 다음. 터미널을 실행 후 node -v 로 node 가 설치 잘 되었나 확인해봅니다.음.. 짝수버전이면서 20버전 이상이 나와야합니다. 뭔가 잘못되었죠?아마 전 프로젝트영향같습니다. 전 node 버전 리스트가 있죠 하하!흠냐리 아무튼 20 버전은 깔리지 않았군요 다운 받아줍니다.nvm install version lts/iron 생겨났군요 여기서 nvm..

FrontEnd 2025.02.28

VsCode 플러그인 설치 및 설정하기

뜬겁새로 돌아온 살찐만두 ㅋㅎ VsCode 를 쓴다면 설치해두면 좋을 플러그인 1. Prettier - 정렬 플러그인2. Material Icon Theme - 파일 아이콘 테마 플러그인  각 플러그인 설정 방법 레츠고Prettier1. VsCode 에 확장팩 Prettier를 설치한다.  2. mac 이라면 cmd + ,  window 라면 ctrl + , 를 누른다.   3. 설정 영역에 진입 후 검색창에 'format on save' 를 검색한다.4. Editor: Format On Save 체크버튼 클릭  결과 효과: 같이 그지같이 썼거나 정렬이 그지같아 졌더라도 파일을 수정을 저장하면 알아서 이뿌게 정렬됨~! Material Icon Theme1. 확장팩 설치 : materail icon the..

기타 2025.02.20

sts4 응용프로그램을 열 수 없습니다?

오랜만에 놑북 끄고 출근했다가sts를 실행하는데 이게 웬 걸 갑자기"sts 응용프로그램을 열 수 없습니다"  후에에에ㅔ엥 어제까지 잘 썼잖아~~~ㅠㅠ그래서 찾아보니 머 맥 자체의 인증 문제 라고 해서 혹시 또 이런일이 있을때기억해두려고 써둡니다. 터미널 창에 codesign --force --deep --sign - /Applications/SpringToolSuite4.app  했더니 됐다!!!! 열린다!!!! 프로젝트 실행도 잘 된다!!!! 샤라웃 투 배짱보다개미스~!https://bombo96.tistory.com/2 sts4 응용프로그램을 열 수 없습니다.mac m1 에서 sts4 설치 후 어느 날 springtoolsuite4 응용 프로그램을 열 수 없다는 경고창이 나왔다. 검색해보니 맥 자체의..

기타 2024.07.05

Mac maven 설치 방법...인데 그라데이션으로 찾아나가는 글임

**mvn을 bash에 저장했는데 터미널을 껐다가 키면 저장이 안되는 분들은 아래로 내리십쇼**  그지같은 mvn 이자식이 자꾸 사라져서 남겨 놓는다. (끝까지 읽으면 재미난 복선임) 일단 터미널에서 mvn -version 을 쳐보면 응 없엉!~!하구 알려준다 아~~~등록했다고요~~~ 휴..만약 brew 가 있다면 brew update > brew install maven > mvn -v  하면 아주 간단스 하게 완료인데, 나는 지금 brew 를 쓸 수 없는 상황이기에.. 1. Maven 홈페이지에서 maven을 설치한다. 난 대충 맨 위 파일로 받았음https://maven.apache.org/download.cgi Maven – Download Apache MavenDownloading Apache ..

Sping boot Maven project jar 생성 및 실행

Maven project 를 jar로 실행을 하려면 Maven 으로 일단 빌드를 해야한다. 전 sts 를 쓰고 있다는 것을 참고해주세요 해당 프로젝트 > Run As > Maven build 를 하면 maven으로 빌드가 되는 건데      이 화면이 나온다면 Goals에 clean package spring-boot:repackage 나는 이렇게 넣었다. 넣고 Run을 해보면 콘솔에서 Spring 서버가 뜨고 어쩌고 저쩌고 촤라락 읽히면서 Build Success가 뜨면 빌드 완료임! 그럼 이제 해당 프로젝트의 jar 파일이 생성 되었을 것이다.  프로젝트의 target 경로에서 java -jar (생성된 해당 jar)  started 성공하면 Maven으로 생성한 jar 파일 실행까지 완료!!!   ..

MockServer란..?

MockServer란?MockServer는 HTTP 및 HTTPS 서버를 모방하여 클라이언트-서버 간의 상호작용을 테스트하고 개발하는 데 사용되는 강력한 도구 이다. MockServer는 HTTP/HTTPS 응답을 모의하고, 요청이 올바르게 전송되었는지 확인하며, 서비스 간의 통신을 테스트 주도 개발(TDD)이나 행동 주도 개발(BDD) 접근 방식으로 테스트할 수 있다.내가 필요한건 딱 이거 요청 , 기대값 반환.이거하면서 아주 gpt랑 개친해짐  일단 먼저 나는 spring boot maven project 로 구성을 했다. 그럼 뭘 해야하냐.1.  dependency 추가 해야지 org.mock-server mockserver-netty 5.11.2 org.mock-serve..

BackEnd/SpringBoot 2024.07.03

HTTP 웹 기본 지식(6) - HTTP 상태코드

상태코드?클라이언트가 보낸 요청의 응답 처리 상태 • 1xx (Informational): 요청이 수신되어 처리중• 2xx (Successful): 요청 정상 처리• 3xx (Redirection): 요청을 완료하려면 추가 행동이 필요• 4xx (Client Error): 클라이언트 오류, 잘못된 문법등으로 서버가 요청을 수행할 수 없음• 5xx (Server Error): 서버 오류, 서버가 정상 요청을 처리하지 못함 231, 421 이라던지 상세한 코드들이 나타났을 때 당황하지 않고,상위 상태 코드인 큰 단위만 보고 응답을 파악하고 대처하면 된다! 차례대로 자세히 살펴보자~!-2xx(Successful)-200: ok요청 성공! -201: createdlocation header 여부 확인 필요!생성..

기타 2024.06.21