본문 바로가기
반응형

웹개발25

[웹개발] 개발자가 꼭 알아야 하는 명명법 📌 명명법 명명법(Naming Convention)은 어떠한 대상의 이름을 짓는데 있어 개발자들간에 정해져 있는 약속이다. 틀리면 진짜 큰일나고 3년 동안 명명법 모르는 애로 소문나도 할 말 없으니 꼭 외워야 한다. ① 카멜 케이스 (Camel Case) : 공백, 대쉬(-), 언더스코어(_) 등 특수문자를 사용하지 않고, 첫자 소문자, 단어 간 구분을 대문자로 하는 명명법이다. 자바나 자바스크립트의 변수, 읽기 전용 값, 메서드, 함수 등의 이름에 사용한다. namingConvention camelCase someName ② 파스칼 케이스(Pascal Case) : 공백, 대쉬(-), 언더스코어(_) 등 특수문자를 사용하지 않고, 첫자 대문자, 단어간 구분을 대문자로 하는 명명법이다. 자바의 클래스, .. 2023. 5. 26.
[웹개발] 웹개발 프로젝트 시 사용 가능한 유용한 리소스 📌 웹개발 프로젝트 시 사용 가능한 유용한 리소스 웹개발하는데 유용한 리소스를 알려드릴게요~! 프로젝트 야물딱지게 성공하세용 ① Pexels : 원하는 스톡 이미지 혹은 비디오를 라이센스 관련 문제 없이 무한정 다운박아 사용할 수 있다. https://www.pexels.com/ko-kr/ ② HTML Color Codes : HTML 테마별 색상을 Chart 메뉴를 통해 사용할 수 있다. https://htmlcolorcodes.com/ HTML Color Codes Easily find HTML color codes for your website using our color picker, color chart and HTML color names with Hex color codes, RGB and .. 2023. 5. 26.
[웹개발 - DIOS] DIOS 팀 프로젝트 🖥 DIOS : 머신러닝을 이용하여 운동 횟수를 세어주고, 기록하여 운동 습관을 만들 수 있게 도와주는 웹 서비스 📌 DIOS 제작 계기 Teachable Machine 이라는 머신러닝 API 를 알게됐다. 머신러닝에 대해 전혀 모르던 나도 쉽게 사용이 가능할 만큼 쉽고 재밌는 기능이었다. 프로젝트에 꼭 사용해 보고싶어서 생각하던 중, 포즈 학습 기능을 통해 운동 자세를 학습시켜 운동 횟수를 세어주는 기능을 만들어 보고싶다는 생각이 들었다. 팀원들에게 이 아이디어를 제안했더니 흔쾌히 수락하여 프로젝트를 진행하게 되었다. 요즘 사람들은 매체에 '홈 트레이닝' 을 검색만 해도 알 수 있듯이, 운동을 통한 자기관리에 관심이 많다. 꾸준히 하는 사람들도 많겠지만 작심삼일로 끝나버리는 사람들도 분명 있을 것이다... 2023. 2. 26.
[웹개발 - DIOS] 홈 페이지 ⌦ 홈 페이지 ☑︎ 홈 페이지 홈 페이지는 길어지더라도 모든 팀원들이 만든 기능이 보여졌으면 좋겠다는 생각을 했다. 그래서 모든 기능을 다 넣었다. • 메인 문구 들어가자마자 보이는 열심히 운동하는 사진들에 마우스를 올려보면 문구가 뜬다. • 사용설명서, 기록장 바로가기, 쇼핑몰 바로가기 다음은 사용설명서와 기록장, 쇼핑몰 바로가기 버튼이 뜬다. 이 웹 서비스를 처음 이용하는 사용자는 사용법을 모를 수 있을 것 같아 설명서를 만들었다. • 회원가입 바로가기 회원가입 버튼에 마우스를 올리면 광택이 나는 효과를 주고싶어서 찾아보고 넣었다. - HTML 회원가입 하기 - CSS #hover { border: 0.1rem solid rgb(0, 0, 0); overflow: hidden; position: re.. 2023. 2. 26.
[웹개발 - DIOS] 랜덤으로 상품 추천하기 ☑︎ 랜덤으로 상품을 추천하는 기능 • 쇼핑몰 상품 목록 페이지 추천 상품은 한 번에 8개씩이다. 4개의 추천 상품이 랜덤으로 뜬 다음 1.5 초 뒤에 다른 4개의 상품이 뜬다. 새로고침하면 다른 8개의 상품이 같은 방식으로 뜬다. - Mapper, xml int[] selectIndex(); SELECT `index` AS `index` FROM `dios_store`.`items` items table 에는 DIOS 쇼핑몰에 존재하는 모든 상품의 정보가 담겨있다. items table 의 index 를 모두 select 하여 배열에 담아준다. - Service public int[] getIndex() { return this.goodsMapper.selectIndex(); } - Controller.. 2023. 2. 26.
[웹개발 - DIOS] 주문완료 페이지 ⌦ 주문완료 페이지 ☑︎ 배송지 정보와 상품 정보 출력 기능 - Controller @RequestMapping(value = "orderSuccess", method = RequestMethod.GET) public ModelAndView getOrderSuccess(@SessionAttribute(value = "user", required = false) UserEntity user, @RequestParam(value = "num") BigInteger orderNum) { ModelAndView modelAndView; if (user == null) { modelAndView = new ModelAndView("redirect:/dios/login"); } else { modelAndView .. 2023. 2. 25.
[웹개발 - DIOS] 주문 페이지 ⌦ 주문 페이지 ☑︎ orders table (DB) 장바구니 페이지(2) 에서도 다루었지만 orders table 을 따로 만든 이유는 하나로 만들게 되면 주문 완료하여 지워진 상품의 레코드를 더 이상 select 하지 못하게 되어 주문 내역 페이지를 만들 수 없다는 점이 문제가 되었다(주문이 완료가 되면 장바구니에서는 지워져야 하는데 장바구니 select 부분은 table 의 모든 레코드를 select 하므로 레코드가 영구 삭제되어야만 한다.). 그래서 carts table 과 orders table 을 따로 만들어 정보를 저장하기로 했다. 주문 페이지에서 최종 주문이 완료되면 장바구니에 담겨있다가 넘어온 상품들이 삭제되어야 한다. 주문 완료가 되었는데도 장바구니에 주문 한 상품이 남아 있으면 안되기.. 2023. 2. 25.
[웹개발 - 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.
반응형