💭 쿠키의 구성// 기본 쿠키 설정document.cookie = "username=John Doe";// 쿠키에 만료일을 추가document.cookie = "username=John Doe; expires=Fri, 31 Dec 2024 23:59:59 GMT";// 도메인, 경로, 보안 설정document.cookie = "username=John Doe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/; domain=example.com; Secure; HttpOnly";ChatGPT가 알려준 cookie의 구성 모습입니다. cookie를 삽입할 때, 다양한 형태로 저장하게 되는데, 왜 이런 형태가 나왔는지를 알아보도록 하겠습니다. 💭 쿠키의 기본 규칙// 기..
🥠 Promise 코드 사용하기//promisefunction gogo() { console.log('start'); let pro = new Promise((resolve, reject) => { let success = false; if(success) { //성공 resolve('this is success'); } else { reject('fail'); } }); pro.then(resolve => { console.log(resolve); }) .catch(reject => { console.log( reject); }) ..
Spring Project 생성하기Eclipse에서 Project를 만들 때 New Dynamic Web Project를 선택해야 합니다. New Dynamic Web Project를 만드는 과정은 JSP를 만드는 과정과 동일합니다.과정은 복잡하지만, 이클립스와 Java Version마다 만드는 방법이 달라지므로 해당 방법을 고안했습니다. 이 방법이 귀찮았다면, SpringBoot로 만드는 것을 추천드립니다. 해당 방법의 Version은 Java 11과 Tomcat 9.0을 사용합니다.이클립스는 2022 - 03 버전을 사용합니다. Spring Legercy가 제대로 안 만들어지는 이상한 호환성을 가진 이들의 조합이라고도 할 수 있습니다.만들기 전에 자신의 Version을 제게 맞추실 필요는 없습니다. ..
Router 을 설명하기 앞서서React에서의 Page 이동을 한 마디로 표현 하자면, 빨간색 레고블럭을 뜯고 파란색 레고블럭으로 변경한다라는 의미이다.이를 정확하게 알기 위해서는 Component라는 개념을 먼저 숙지를 하고 있으면 매우 좋다. React에서 한 페이지를 표현 할 수 있는 것을 Component라고 부른다.Component는 독립적이며, Component 하나가 하나의 React 코드이자, 이 하나로 하나의 페이지를 표현이 가능하다.그런 이를 한 개의 소스코드라고 가정할 때, 이러한 Component들이 모여서 하나의 페이지를 이룬다. 그러면 하나의 페이지를 이루기 위해서 최소 1개의 Component에서 여러개의 Component들의 집합이 형성 되었다.그렇다면, 만약 이 하나의 페이..
AXIOS으로 파일 보내기 axios로 파일을 보내기 위해서는 간단하게 알아야 할 것이 있다. FormData라는 객체이다. Object처럼 Key와 Value로 이루어져 있지만, 데이터를 넣는 방법은 append를 이용해야 한다. let formData = new FormData(); console.log(formData); formData.append('input', this.inputText); formData.append('inputFile', document.getElementById('input File ID').files[0]); 여기서 중요한 점은 FILE을 formData안에 append 한다는 부분이다. try { axios.post('http://localhost:3000/fileIn..
시작하기 전에 알아두면 좋은 기초지식 JavaScript - Object 만들기 2023.06.01 - [Web/JavaScript] - [JavaScript] Object 만들기 [JavaScript] Object 만들기 JavaScript, Object 만들기 Object 만들기 Object란, 하나의 변수 안에 여러 개의 값을 담는 것을 뜻 한다. 보통 Java에서 유명한 dataType은 String 혹은 int(number)가 있다. 이들은 각각 하나의 변수 안에 하나의 mollangpiu.tistory.com CallBack 함수 배우기 전 CallBack 함수를 알기 전에 JavaScript의 실행순서에 대해서 먼저 짚고 넘어가야 합니다. 또한 이를 온전히 사용하기 위해서는 JavaScrip..
Error 상황 리엑트 프로젝트 생성 명령어를 입력했지만, ERROR가 발생되면서 실행이 되지 않는 상황이다. 이럴 때는 기존의 갖고 있는 npm에서 문제가 발생했을 수도 있으니 그 부분부터 먼저 살펴봐야 한다. 📃 대처방법 ✔️ 대안 1 기존의 npm을 지웠다가 다시 설치한다. # 기존 npm 삭제하기 npm uninstall -g create-react-app # npm 설치하기 npm install -g create-react-app # 프로젝트 다시 생성하기 npx create-react-app [프로젝트명] 기존의 npm의 create-react-app를 삭제하고 다시 설치하는 방법이다. npm의 create-react-app가 문제가 생길 경우 설치가 안 될 수도 있다. ✔️ 대안 2 관리자모..
프로젝트 만들기 프로젝트를 만들 때, 내 프로젝트 위치를 먼저 정의한다. 필자는 D드라이브 안의 Project명을 정의하였다. 프로젝트 저장경로는 가급적 한글이 없는 것을 추천한다. 그러면 나의 프로젝트 저장위치의 폴더에서 Shift + 마우스 우클릭을 하게 되면, 설치한 PowerShell창 열기가 작성된다. npx create-react-app [프로젝트명] 프로젝트 설치 명령어를 작성하면 끝. 나의 프로젝트 파일을 불러왔을 때, 이렇게 src, App.js가 있으면 정상적으로 완료된 것이다. 만약 해당 파일이 없을 때는 project 생성 명령어를 다시 입력해야 한다. project 생성시 Error 발생할 경우 2023.11.12 - [Web/React] - [React] npx create-ap..
React 설치 전 React를 설치하기 전, 필요한 것에 대해서 먼저 설치를 진행하려고 한다. 단순하게 React설치하기 위한 또는 향후 React프로젝트하는 도중 lib 설치를 하기 위한 단계이기도 하다. 이 부분에 대해서 문제가 없다고하면 그냥 넘어가도 된다. Node 설치하기 먼저 Node를 설치해야 한다. Node.js는 Google에서 'node' 검색만 해도 쉽게 나온다. https://nodejs.org/en Node.js nodejs.org 혹은 링크를 통해서 받으면 된다. 버전 상관없이, 가급적이면 왼쪽 LTS로 받는 것을 추천한다. PowerShell 설치하기 2023.11.08 - [Computer/기타] - PowerShell 설치하기 PowerShell 설치하기 링크 https:..
사용하기 전에 알아두면 좋은 글 React, props 사용방법 2023.11.11 - [Web/React] - [React] props 사용하기 [React] props 사용하기 앞의 설명한 사용자정의 Component에 값을 전달하는 방법 중 하나이다. 이 부분을 이해하기 위해서는 다음 글을 이해하는 것을 추천한다. React, 사용자정의 Component 2023.11.11 - [Web/React] - [React] 사용자 mollangpiu.tistory.com React, 사용자정의 Component 2023.11.11 - [Web/React] - [React] 사용자 정의 Component 만들기 [React] 사용자 정의 Component 만들기 Component 💡 재사용이 가능한 각각의 ..
앞의 설명한 사용자정의 Component에 값을 전달하는 방법 중 하나이다. 이 부분을 이해하기 위해서는 다음 글을 이해하는 것을 추천한다. React, 사용자정의 Component 2023.11.11 - [Web/React] - [React] 사용자 정의 Component 만들기 [React] 사용자 정의 Component 만들기 Component 💡 재사용이 가능한 각각의 독립된 모듈. 웹 컴포넌트는 W3C에서 새로 정의가 되었으며 보통 Header, Footer등 각 영역을 담당하기도 한다. 대표적으로 Header, Nav, Aside, Footer 등이 있다. 사용방 mollangpiu.tistory.com JavaScript, Object 이해하기 2023.06.01 - [Web/JavaScri..
Component 💡 재사용이 가능한 각각의 독립된 모듈. 웹 컴포넌트는 W3C에서 새로 정의가 되었으며 보통 Header, Footer등 각 영역을 담당하기도 한다. 대표적으로 Header, Nav, Aside, Footer 등이 있다. 사용방법은 첫글자는 반드시 대문자로 시작되며, 해당 영역만 재사용을 목적이다. import logo from './logo.svg'; import './App.css'; function App() { return ( ); } function Modal() { return test 입니다. } export default App; 여기서 우리가 확인해야 할 것은 Modal이라는 함수 사용이다. 사용자 Component를 만드는 방법은 매우 단순하다. function을 통해..
화면 여기에 Button '버튼' 하나만 있는 화면이 있다. 저 화면을 누를 경우, JavaScript에서 Object를 생성할 것이고, 그 Object가 console창에 log를 남기게 된다. log의 내용은 다음과 같다. Object 변수에는 객체에 'a'에는 '몰라', 'b'에는 '피노키오'를 담았다. 그리고 test라는 Object를 또 하나를 생성하게 되는데, 여기에는 기존의 Object를 담게 된다. test는 Object의 변수에서 값을 가져왔기 때문에 Object의 내용과 일치하게 된다. 그리고 test에서 'a'의 키를 변경했을 때, Object의 변화를 알아보는 실험이다. 변경은 test 변수에서 했기 때문에 Object에서는 변화가 있어서는 안 된다. 그러나 Object 또한 tes..
출처: 김영한 강의 https://www.inflearn.com/course/ORM-JPA-Basic/dashboard 자바 ORM 표준 JPA 프로그래밍 - 기본편 - 인프런 | 강의 초급자를 위해 준비한 [웹 개발, 백엔드] 강의입니다. JPA를 처음 접하거나, 실무에서 JPA를 사용하지만 기본 이론이 부족하신 분들이 JPA의 기본 이론을 탄탄하게 학습해서 초보자도 실무에서 자 www.inflearn.com JPA의 버전 맞추기 org.hibernate hibernate-entitymanager 5.6.15.Final com.h2database h2 2.2.220 23. 08. 19. 기준 JPA를 사용하기 위한 POM.XML의 설정입니다. JPA를 사용하기 위해서는 Hibernate와 사용할 DB의..
JPA를 사용도중 이상한 버그가 발생되었습니다. 코드를 연습하는 과정에서 JPA의 기능 중 하나인 DROP TABLE이 동작되지 않아서 기존의 TABLE에 내용이 그대로 남게 되었으며, 동시에 같은 PK를 INSERT 하는 과정에 의해 개체무결성 오류가 발생되는 문제였습니다. 이는 강의의 코드 중, 과거의 H2 버전을 참고하다 발생된 문제이며 H2의 1.4.199는 상위 hibernate를 가져올 경우 상속된 CLASS의 Entity는 DROP TABLE이 제대로 동작되지 않는 버그였습니다. 이를 간단히 해결하기 위해서는 JPA를 사용하기 위한 라이브러리를 최신버전으로 Update를 해야 할 필요가 있었습니다. 상위 버전 맞추기 SELECT H2VERSION() FROM DUAL; H2의 SQL를 입력하..