jji_veloper

■ 쿠키 저장하기 // 쿠키 저장하기 함수 export function setCookie(name, value = "", expireDays = "", path = "/") { let expires = ""; if (expireDays) { let date = new Date(); date.setTime(date.getTime() + expireDays * 24 * 60 * 60 * 1000); expires = `expires=${date.toUTCString()};`; } document.cookie = `${name}=${value || ""};${expires}path=${path}`; } 웹브라우저에 쿠키를 저장하는 함수이다. 매개변수로는 저장할 쿠키의 key 이름, 저장할 값, 그리고 만료일을..

JavaScript 2021. 11. 30. 09:39

참고: https://webisfree.com/2016-06-15/[자바스크립트]-이벤트-버블링-제거방법-stoppropagation() 이벤트 버블링 막기 { alert("전체 영역 클릭"); }} > 전체 영역 { alert("겹쳐진 영역 클릭"); }} > 겹쳐진 영역 이렇게 div나 다른 html 태그들이 겹쳐져 있을 때 겹쳐진 영역에서 클릭을 했을 때 클릭한 영역의 이벤트 1개만 일어나야 할 때가 많다. 겹쳐진 영역을 클릭 시 처음에는 겹쳐진 영역의 onClick 이벤트가 발생한다. 하지만 그 이벤트 이후..!! 이렇게 뒤에 있는 영역의 onClick 이벤트까지 겹쳐져서 발생하게된다. 이런 것을 이벤트 버블링이라고 하는데, 어떻게 해결해야될지 막막하다. 하지만 한 줄만 추가해주면 끝이다!!! 이..

JavaScript 2021. 11. 29. 17:47

다들 아시다싶이 formData에 들어있는 값은 console에 그냥 찍으면 나오질 않는다. 이럴 땐 반복문을 돌려서 안에 들어있는 값을 일일이 확인해주어야한다. 귀찮긴해도 안에 값이 제대로 들어갔는지 확인이 필요할 때가 많기 때문에...ㅠㅠ 1. formdata key와 값 확인하는 법 let formData = new FormData(); // ... formData.append("키이름", "값"); 생략 for (let key of formData.keys()) { console.log(key, ":", formData.get(key)); } formdata를 생성 후 안에 값을 넣어준다. 그 다음 formData.keys()를 통해 해당 form에 들어있는 key를 배열로 가져온 후 반복문을 돌..

JavaScript 2021. 11. 24. 11:11

개발하다가 처음으로 변수를 동적으로 추가해야할 일이 생겼다. 웬만하면 배열에 값을 추가하는 방법을 사용했는데 이번에는 그런식으로 개발했더니 기능이 제대로 동작을 안하더라ㅠㅠ (외부 API 연동하다가 생긴 일...) 처음에는 eval()이라는 함수를 이용하여 변수 명 뒤에 다른 변수(나는 count)를 붙여줬는데 ES버전이 올라가면서 전역변수로 생성이 안된다는 말도 있고... (다른 곳에서 값을 조회하려니까 존재하지 않는 변수라는 Warning창이 떴다.) 정말 다른 방법이 없는 것이 아니라면 eval()을 쓰지말라는 글이 굉장히 많았다. 그래서 다른 방법을 모색하던 차에 발견한 window 함수... 브라우저 내에서 글로벌 변수로 만들어진다고 한다. window['변수'+"3"] = "변수"+"3"; c..

JavaScript 2021. 11. 23. 09:32

내가 반나절 동안 삽질했던 history.push 페이지 이동 시에 url 뒤에 parameter를 넘겨줄 때 한 실수를 적어보고자 한다. 상황) 페이지 이동 시 history에 props를 담아서 전달해주면서 동시에 url 뒤에 query string에 값을 달아주고 싶었다. 1. /test 페이지에서 /push 페이지로 값 전달하면서 이동 >Test.js import React from "react"; import { useHistory } from "react-router"; export default function Test() { const history = useHistory(); let data = { key: "value", key2: "value2" }; return ( 아리를 클릭하면 ..

React, Node.js, Express 2021. 11. 16. 10:59

개발에서 정규식은 떼고싶어도 뗄 수 없는... 정규식 공식문서를 아무리 쳐다봐도 내가 원하는 패턴을 만들기란 넘 힘들다... 그래서 자주 쓰는 정규식 패턴을 함수형태로 만들어 놓고, 내가 필요할 때마다 꺼내보려고 글을 쓴다. (겸사겸사 도움도 됐으면 하는 마음ㅋㅋ) 1. 핸드폰 번호 하이픈 넣어주기 정규식 const regPhone = (data) => { data = data.replace(/[^0-9]/g, ""); data = data.replace(/(\d{3})(\d{4})(\d)/, "$1-$2-$3"); return data.slice(0, 13); }; 1. 숫자 외의 문자가 들어오면 지워준다. 2. 3자리 4자리 4자리 중간에 - 를 넣어준다. 3. 마지막 slice는 13자리 이상의 문..

Hello, World 2021. 11. 11. 16:25

JAVA MultipartFile 사진 한 장 업로드하기 /**사진 한 장 업로드**/ public Boolean uploadImage(MultipartFile image, String dirName) throws Exception { Boolean result = Boolean.FALSE; try{ File folder = new File(dirName); if (!folder.exists()) { folder.mkdirs(); } File destination = new File(dirPath + File.separator + image.getOriginalFilename()); image.transferTo(destination); result = Boolean.TRUE; }catch (Except..

Java, Spring, SpringBoot 2021. 10. 29. 10:08

오늘 갑자기 프로그래머스에 꽂혀서 이것 저것 풀어봤다. (풀어본 문제 5문제도 안되는 코테린이임...) 다른 사람의 풀이를 보고 배우는 것도 좋지만, 문제를 해결하기 전 검색 능력을 키우는 것이 목적이라 풀이를 검색하기 보단 내가 원하는 기능을 검색해서 찾아보고 적용하는 것에 의의를 두었댜. 그래서 풀이가 비효율적일 수도 있다는 점 양해부탁드려욥... 우선 동일한 Array.from()함수를 이용해 푼 모습을 보자. 버전 1이다. function solution(number) { let number_arr = Array.from(number.toString(), Number); //각 자리 수의 배열 생성 let final_sum = number_arr.reduce((sum, single_digit) =..

JavaScript 2021. 10. 14. 01:20

프로그래머스의 직사각형 별찍기 문제 풀다가 우연히 알게된 함수! 핸드폰 번호, 카드 번호, 아이디 일정 길이만큼 보여주고 나머지는 가려줘야하는 기능을 사용할 때에도 유용할 듯 하다. 아래는 모질라재단의 함수 설명 글! https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/padStart https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/padEnd 얘를 이용해서 핸드폰 가리기 문제 또한 정규식을 사용하지 않고 편하게 풀 수 있을 듯 하다! 우선 js를 이용해 풀어 본 프로그래머스 직사각형 별 찍기 문제이다...

JavaScript 2021. 10. 13. 23:36

1. putty로 Linux 접속 2. sudo vi /etc/hostname 입력 후 Alt + i 키보드 눌러서 원하는 이름으로 수정하기 3. 수정 완료 후 :wq! 를 입력해 저장해준다. 4. cat /etc/hostname 입력하면 변경한 hostname이 출력된다 5. sudo -s 를 입력해 root권한을 반영구적으로 빌려 실행한다. 6. hostname 명령어를 입력하면 현재 설정된 hostname이 뜬다 7. hostnamectl set-hostname 변경할 host이름 명령어를 통해 hostname을 변경해준다. 8. 다시 hostname을 통해 확인해보면 이름이 변경된 것을 확인할 수 있다. 9. Putty를 끄고 다시 접속하면 변경된 hostname이 반영된 것을 확인할 수 있다.

Server 2021. 10. 7. 16:28

김영한님의 JPA 인프런 강의 시청 중 JUnit을 통해 테스트하는 데, 아무리 JUnit을 실행해도 아무런 반응이 없음ㅠㅠ 그래서 열심히 삽질해가면서 해결했는데, 어떤 부분에서 해결된건지를 모르겠네..ㅠㅠ 언젠가 알게될 날을 기대하며 우선 JUnit 등록하기! 이렇게 등록해주면?@Test 관련해서 뜬 오류가 1차적으로 사라졌다. 그리고 제일 중요한 Gradle 설정!! plugins { id 'org.springframework.boot' version '2.4.5' id 'io.spring.dependency-management' version '1.0.11.RELEASE' id 'java' }// plugins group = 'jpabook' version = '0.0.1-SNAPSHOT' sour..

Java, Spring, SpringBoot 2021. 10. 1. 15:05

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method. 회원 가입시 회원의 주소를 입력 받아야 한다. 주소찾기 버튼이나 상세주소 입력 란을 클릭하면 이렇게 다음 지도 API가 뜨도록 해놨음 문제는 얘를 입력하고 창이 닫히고 나면?? 이렇게 보기 싫은 빨간 에러가 뜬다는 것... 여기서 쓰이는 것만 코드 뽑아보쟈... function Join({hist..

React, Node.js, Express 2021. 9. 29. 14:28

리액트가 싱글페이지인 것은 알았으나 새로고침 한다고 위와 같이 Cannot GET 경로 에러가 뜨는 것은 아니였을 것이다... 올해 4월 한달가량 만들었던 나의 첫 react 쇼핑몰 프로젝트... 어느순간 새로고침 할 때 저렇게 해당 url의 서버를 찾을 수 없다는 에러가 계속 떴었다. 해당 버그의 원인은 정말 다양할 것이다. 1. 해당 주소의 요청을 처리하는 backend api가 없다. 2. 서버가 불안정하다. 3. 서버 설정을 해주지 않았다. 등등... 프로젝트 별로 원인이 다양할 것이다. Webpack설정을 해주라는 글을 봤었는데, 나는 그런걸 안써서... 뭔지도 정확히 몰라서 설정도 못했었고 이런 식으로 backend의 app.js 하단에 위에서 처리하지 못한 모든 요청을 받아서 index.ht..

React, Node.js, Express 2021. 9. 24. 17:03

이미지 file을 서버에 업로드하기 전, 등록한 파일을 화면에서 미리 보여주고 싶을 때가 있다. URL.createObjectURL() 이용하기 부제: 이미지 미리 보기 url 생성 거두절미하고 리액트 코드부터 보시죠... import React, { useState } from "react"; function ImageUploadExample() { //파일 미리볼 url을 저장해줄 state const [fileImage, setFileImage] = useState(""); // 파일 저장 const saveFileImage = (e) => { setFileImage(URL.createObjectURL(e.target.files[0])); }; // 파일 삭제 const deleteFileImage..

React, Node.js, Express 2021. 9. 23. 15:07

1. split() ___문자열.split( 기준 문자 ) 문자열을 배열로 바꾸기 split() 안에 매개변수를 넣지 않는 것과 "," 쉼표를 넣어주는 것은 동일한 결과를 반환함! let exampleString = "홍길동,이순신,유관순"; // exampleString 문자열을 "," 쉼표 기준으로 배열로 나눈다. let stringToArray = exampleString.split(",");//exampleString.split(); 과 동일함 console.log(stringToArray); //출력: ["홍길동","이순신","유관순"]; 만약 공백을 기준으로 나누고 싶다면? split() 함수에 " " 공백이 들어간 문자열을 넣어주면 된다. let exampleString = "홍길동 이순신 ..

JavaScript 2021. 9. 20. 23:03

우선 사용할 것은 location 객체의 search 파라미터이다. 리액트에서의 location은 javascript의 window.location과 동일하다. search는 url의 ? 뒤에 부분을 가져와줌 url뒤에 ?를 붙인 후 name을 넣어주자. 1번. 변수로 만들어서 쓰기 function 컴포넌트(location) { console.log("location >>> ", location); console.log("location.search >>> ", location.search); const params = new URLSearchParams(location.search); let name = params.get("name"); console.log("params.get('name') >>>..

React, Node.js, Express 2021. 9. 17. 12:54