뚝딱뚝딱 코딩 기록_

[Javascript_ 타겟 넘버] 📢 문제 📢 n개의 음이 아닌 정수들이 있습니다. 이 정수들을 순서를 바꾸지 않고 적절히 더하거나 빼서 타겟 넘버를 만들려고 합니다. 사용할 수 있는 숫자가 담긴 배열 numbers, 타겟 넘버 target이 매개변수로 주어질 때 숫자를 적절히 더하고 빼서 타겟 넘버를 만드는 방법의 수를 return 하도록 solution 함수를 작성해주세요. 제한사항 주어지는 숫자의 개수는 2개 이상 20개 이하입니다. 각 숫자는 1 이상 50 이하인 자연수입니다. 타겟 넘버는 1 이상 1000 이하인 자연수입니다. 입출력 예 numbers target return [1,1,1,1,1] 3 5 [4,1,2,1] 4 2 ❗아이디어 - 깊이 우선 탐색을 이용하여 모든 경우의 수를 확인한..

[Javascript_ 최댓값과 최솟값] 📢 문제 📢 문자열 s에는 공백으로 구분된 숫자들이 저장되어 있습니다. str에 나타나는 숫자 중 최소값과 최대값을 찾아 이를 "(최소값) (최대값)"형태의 문자열을 반환하는 함수, solution을 완성하세요. 제한 조건 s에는 둘 이상의 정수가 공백으로 구분되어 있습니다. 예시) s return "1 2 3 4" "1 4" "-1 -2 -3 -4" "-4 -1" "-1 -1" "-1 -1" ❗아이디어 - 문자열을 배열로 바꾼 후 max와 min 값을 찾는다. function solution(s) { let answer = ''; const list = s.split(" "); let numbers = []; for (let i = 0; i < list.leng..

[Vanilla Javascript_ 프로젝트 환경 설정] Webpack과 Babel을 이용한 프로젝트 초기 환경 세팅 💡 프로젝트 생성 프로젝트 폴더(빈 폴더)에 src 폴더를 생성하고 하위에 HTML파일과 JS 파일을 만든다. 이때, 파일 이름, 위치는 원하는 대로 설정 가능! ** 꼭 src 폴더에 넣지 않아도 된다 ** 💡 package.json 생성 npm init 프로젝트에서 사용할 패키지 매니저를 사용하여 init 명령어를 사용하면 몇 가지를 물어보는데 프로젝트에 맞게 설정하고 작성해 주면 된다. 완료되면 node_modules 폴더와 package.json, README.md 파일이 생성된다. 💡 패키지 설치 npm install -D //패키지 이름 위 //패키지 이름// 부분에 아래에 ..

[Javascrip_ new Date()] sns처럼 00분 전, 00시간 전 같이 표기하는 방법에 대해 알아보자 ❓ SNS처럼 시간 표기하기 - 위 사진과 같이 00분 전, 00시간 전으로 표기하기 위해서는 시간차를 계산해 주어야 한다. 1. 시간 나누기 💡 위처럼 시간을 split 하여 "연, 월, 일, 시, 분, 초"로 나눈다. 💡 오늘 날짜를 new Date()로 구한 뒤 게시글 생성 날짜와 오늘 날짜를 따로 정의해준다. 2. 시간 차 계산 💡 new Date() 안에 "0000-00-00 00:00:00"의 형태로 넣어준 뒤 뺀다. 💡 시간 계산 ❕ beforeHours / 1000 : 초 ❕ beforeHours / 1000 / 60 : 분 ❕ beforeHours / 1000 / 60 / 6..

[JS_URL.createObjectURL()] 로컬 객체 경로를 만들어 주는 URL.createObjectURL()을 img 태그 안에 직접 입력했을 때 반복적으로 객체를 생성하는 것과 그에 대한 해결 방법 대해 알아보자 ❓ URL.createObjectURL()을 이용하여 이미지 미리보기를 구현하던 중 text를 입력할 떄마다 계속해서 이미지 객체를 생성하는 현상을 발견했다. 이전 프로젝트와 같은 방법으로 구현했는데 이번에만 발생한 이슈라서 이유를 몰라 조금 헤맸다. 전역 스테이트 (useReducer, useContext 이용)로 관리하며 state를 복사해서 그런 것인 줄 알고 따로 빼서 분리하는 등 이것 저것 시도해 보았지만 똑같은 현상이 일어났다. 그런데 이유는 바로 img 태그 안에 바로 U..

[React_input[type='file']] 같은 파일 연속 업로드 시 생기는 문제에 대해 알아보자 input 태그를 이용하여 이미지 첨부 및 미리보기 포스팅 👉 [리액트] input [type='file'] 폼 꾸미기_🎵 / 버튼으로 파일 첨부 👉 [리액트] input 이미지 미리보기_🎨 ⚡ input file 업로드 코드 같은 파일 (이미지)를 연속으로 업로드 하는 경우 onChange 이벤트가 실행되지 않는 오류가 발생되었다. 즉, 같은 파일이 연속적으로 추가되지 않는 문제였는데 바로 input 으로 파일 추가시 value를 초기화하지 않으면 이전 값을 그대로 가지고 있기 때문이었다. ❓ 해결방법 💡 onClick 이벤트 발생시 value 초기화하기 e.target.value = null}> -..

[HTML_a tag] 파일 다운로드 하는 방법에 대해 알아보자 📂 a tag 사용하기 다운로드 - href : 다운받을 파일의 url 📂 파일명을 다르게 하고싶은 경우 다운로드 - download='파일명' 으로 넣어주면 된다.

[React_header title] 웹 페이지의 header title을 바꾸는 방법에 대해 알아보자 사진과 같이 header에 있는 title을 페이지마다 다르게 하고 싶을 수 있다. 그런 경우는 간단하게 바꿀 수 있다. import React, { useEffect } from 'react'; `````` useEffect(() => { const titleElement = document.querySelector("title"); titleElement.innerHTML = `바꾸고 싶은 내용`; }, []); 💡 document.querySelector로 title을 가져온 후 innerHTML을 사용하여 내용을 바꿔준다 💡 페이지마다 useEffect 를 사용하여 페이지가 렌더링 되었을 때 바..

[Project_EKHANA Renewal] 🚍 프로젝트 소개 📄 목적 : EK하나관광 기존 홈페이지 리뉴얼 📄 내용 관광버스 견적을 요청하고 이를 처리할 수 있는 서버 재구축 불필요한 기존 기능들 (게시판, 공지사항 등)을 제외 기존 기능 보완/강화 (견적요청시 알람-이메일 기능) 홈페이지 UI 리뉴얼 📄 기능 견적 요청하기 견적 목록 확인하기 나의 견적 목록 확인하기 회사 정보 관리자 페이지에서 업데이트 / axios REST API 모바일 웹 화면 / react-device-detect 📄 개발 기간 : 약 4주 🚍 사용 기술 📄 front Library : React, Material-UI API : axios, useNavigate 📄 back Spring boot, Thymeleaf, Spri..

[Project_PaperPlane] 🛫 간단한 웹 채팅 어플_종이비행기 [Paper Plane] ⭐ 자바스크립트를 이용한 웹 채팅 어플 ⭐ node.js / socket.io ⭐ 헤로쿠(Heroku), Namecheap - 배포 및 도메인 연결 🛫 결과물 자바스크립트 공부를 시작한 후 첫 프로젝트여서 어려운 부분이 많았지만 배운 점도 많았던 프로젝트였다. 특히 서버 통신 (socket.io, fetch 등)을 처음 접하다 보니 가장 힘든 과정이었던 것 같다. 부족한 점들은 계속해서 업데이트 할 예정이다. 코드 전체보기는 🔗ez1n_github 클릭하기! 👉ez1n github 구경하기👈 ez1n - Overview Study -ing. ez1n has 8 repositories available. Fo..