본문 바로가기
반응형

전체 글353

[웹개발 - DIOS] 장바구니 페이지 (2) ⌦ 장바구니 페이지 ☑︎ 체크박스 기능 - JavaScript // 체크박스 전체선택 / 전체해제 function selectAll(selectAll) { const checkboxes = document.getElementsByName('select'); checkboxes.forEach((checkbox) => { checkbox.checked = selectAll.checked; }) } // 체크박스 하나라도 해제되면 전체선택 체크박스 풀리는 거 function checkSelectAll(check) { // 전체 체크박스 const checkboxes = document.querySelectorAll('input[name="select"]'); // 선택된 체크박스 const checked = .. 2023. 2. 25.
[웹개발 - DIOS] 장바구니 페이지 (1) ⌦ 장바구니 페이지 ☑︎ 장바구니 상품 목록을 출력하는 기능 carts table 을 몇 번을 고쳤는지 모르겠다. items table 과 관련이 있기 때문에 items table 만드는 것부터 items 파트 담당 팀원과 같이 머리 싸매서 만들었다. 이 프로젝트 하면서 가장 머리통 깨질 뻔 한 일이다. 제일 효율적인 table 을 만들기 위해 에러도 많이 내고 여러가지 방법으로 바꿔가면서 만들었다. - CartVo public class CartVo extends CartEntity { private String itemName; private int price; private byte[] image; private String imageMime; } 장바구니 페이지에서 필요한 정보는 carts tab.. 2023. 2. 24.
[웹개발 - DIOS] 기록장 페이지 ⌦ 기록장 페이지 ☑︎ 운동 개수를 기록장에 기록해 주는 기능 • 목표 개수를 달성했을 때 목표 개수를 달성하면 화면이 멈추고 2초 뒤에 성공화면이 뜨면서 record(기록) 버튼과 exit(home 화면으로 돌아가기) 버튼이 뜬다. record 버튼을 누르면 기록장으로 이동하며, 측정 기록이 저장된다. • 목표 개수를 달성하지 못했을 때 목표 개수를 달성하지 못해도 기록하기 버튼을 누른 뒤, RECORD 버튼을 누르면 기록장에 기록은 할 수 있다. 마찬가지로 기록장으로 이동하며, 측정기록이 자동으로 저장된다. - Controller @RequestMapping(value = "count", method = RequestMethod.POST, produces = MediaType.APPLICATION_J.. 2023. 2. 23.
[웹개발 - DIOS] Teachable Machine 를 이용한 운동 횟수 세는 페이지 / Teachable Machine / 티처블머신 / 머신러닝 ⌦ Teachable Machine 를 이용한 운동 횟수 세는 페이지 ☑︎ Teachable Machine https://teachablemachine.withgoogle.com/ Teachable Machine Train a computer to recognize your own images, sounds, & poses. A fast, easy way to create machine learning models for your sites, apps, and more – no expertise or coding required. teachablemachine.withgoogle.com 2023. 2. 23.
[웹개발 - DIOS] 운동 목표 개수 설정 페이지 ⌦ 목표 개수 설정 페이지 ☑︎ 운동의 종류를 선택하는 기능 - HTML - CSS body > .main > .form > .select-container > .select:hover, body > .main > .form > .select-container > .select:focus, body > .main > .form > .select-container > .select.selected { background-color: rgb(30, 28, 28); color: rgb(255, 255, 255); font-weight: 500; border: 0.2rem solid rgb(30, 28, 28); } - javaScript const form = document.getElementById('fo.. 2023. 2. 22.
[웹개발 - 회원가입] 비밀번호 암호화 public class CryptoUtils { public static String hasSha512(String input) { try { StringBuilder passwordSaltHashBuilder = new StringBuilder(); MessageDigest md = MessageDigest.getInstance("SHA-512"); md.update(input.getBytes(StandardCharsets.UTF_8)); for (byte hashByte : md.digest()) { passwordSaltHashBuilder.append(String.format("%02x", hashByte)); // 난수를 생성한 뒤, 10진수의 문자열로 변경 } return passwordSal.. 2023. 2. 11.
[웹개발] parameter 0 of constructor in ~ 오류 Service 에 의존성 주입하기만 하면 parameter 0 of constructor in 에러가 떴다. 이 때까지 한 번도 이런 적 없었는데 잉 찾아보니까 @Service 안 적어서 그런 경우가 많은 것 같던데 난 잘 적어줬다. 혹시 몰라서 pom.xml 가서 버전 낮춰줬는데 (3.0.2 ➡️ 2.7.5) 에러 안 뜬다. 2023. 2. 11.
[프로그래머스 - JavaScript] Lv.2 튜플 문제 https://school.programmers.co.kr/learn/courses/30/lessons/64065 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 풀이 function solution(s) { let arr = s.replace(/{/g, " "); // '{' 빈칸으로 바꾸기 arr = arr.replace(/}/g, ""); // '}' 삭제 arr = arr.trim(); // 문자열의 앞, 뒤 공백 삭제 arr = arr + ', '; let tempList = []; let tempList2 = []; let index = 0.. 2023. 2. 11.
[웹개발] checkbox 안에 font Awesome 아이콘 넣기 checkbox 색깔을 바꾸고 싶어서 input 의 checkbox 타입을 쓰지 않고 font Awesome 에서 체크 아이콘을 가져와서 만들어보겠다. HTML 위 서비스 이용약관 및 개인정보 처리방침을 읽어보았고 이해하였으며 동의합니다. i 태그는 font Awesome 에서 뽀려온 거다. CSS /* 체크박스 */ .--object-check { align-items: center; cursor: pointer; display: flex; flex-display: row; justify-content: flex-start; user-select: none; } .--object-check > input[type=checkbox] { display: none; } .--object-check> .--c.. 2023. 2. 11.
[웹개발] CSS 밑줄 긋는 효과 글자:after { display:block; content: ''; border-bottom: solid 3px rgb(11, 94, 4); transform: scaleX(0); transition: transform 250ms ease-in-out; transform-origin: 0% 50%; } 글자:hover:after { transform: scaleX(1); } 2023. 2. 10.
[프로그래머스 - JavaScript] Lv.2 숫자의 표현 문제 https://school.programmers.co.kr/learn/courses/30/lessons/12924 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 풀이 function solution(n) { let count = 0; // 몇 갠지 세는 count (나중에 return 해 줄 정답을 담을 변수) for (let j = 1; j 2023. 2. 9.
[웹개발] thymeleaf 를 이용한 공통 Header 만들기 일단 모든 페이지에 공통으로 들어갈 거라서 common 으로 빼준다. home.html 에 넣어볼 거다. CommonBody 에 만든 뒤, class 주고 타임리프 이렇게 적어준다. 공통 header를 넣고 싶은 페이지(home.html)의 body 안에 넣어준다. 옴메 진짜 잘 들어간다. 이렇게 따로 빼 놓으면 나중에 모든 페이지에 한 줄만 적어도 상단메뉴 넣을 수 있다. footer 까지 넣어봤다. 그리고 css 도 공통으로 주기 위해 common.css 를 commonHead.html 에 적어야한다. home.html 에서 main 에는 내용이 들어가야 하고, footer는 바닥에 붙어있어야 하기 때문에 css 는 이렇게 주면 된다. body { top: 0; left: 0; width: 100%;.. 2023. 2. 9.
반응형

티스토리툴바