souvenir

[오늘 공부한 것] 1. POS기 백엔드 기능 구현 : 아래 목록 중 1-4번, 6번을 구현하였다. 메뉴를 누르면 구매 목록에 추가하는 함수 (백엔드) => addItemToList 장바구니에 담긴 총 금액 계산하는 함수 => calculateList 장바구니에서 메뉴 삭제하는 함수 (백엔드) => deleteItemFromList 탭 클릭 시 해당하는 카테고리 메뉴들을 출력해주는 함수 => handleCategorySelect Pay 버튼을 눌렀을 때 팝업창을 띄워주는 함수 => handlePayPressed Cancel 버튼을 눌렀을 때 장바구니 전체를 비워주는 함수 (백엔드) => handleCancelPressed Quit 버튼을 눌렀을 때 윈도우를 닫아주는 함수 => handleQuitPress..

[오늘 공부한 것] : POS기 만들기 중 프론트 작업 - 내가 맡은 역할 : 프론트엔드로서 HTML 하드코딩하기 - 진행상황 : MVP 설정, 와이어프레임 만들기, 프로토타이핑, HTML 구조 하드코딩까지. 대략적인 css로 위치조정은 마침 MVP 설정 및 와이어프레임 기획 특정 메뉴를 누르면 구매 목록에 추가되고 해당 가격이 총 금액 화면에 출력되도록 하는 기능 (가격 및 갯수 포함) 추가한 순서대로 구매 목록에 추가 되도록 하는 함수 구현 추가한 구매 목록에서 삭제할 수 있는 기능 추가 상품 카테고리에 따른 탭 추가 추가한 구매 목록에서 수량 변경할 수 있는 셀렉터 추가 음료 탭을 선택했을 때 HOT/ICE 선택할 수 있는 메뉴 추가로 띄워주기 관리자 메뉴 추가 상품 추가 ( 금액, 카테고리, 사진..

DOM(Document Object Model) : HTML 요소들을 JavaScript 객체로 표현하는 문서 DOM =JavaScript 는 아니며 HTML의 트리 구조를 JS의 객체 형식으로 표현한 것. Document라는 전역변수로 접근 가능 Console.dir을 통해 HTML의 내용을 JS의 객체처럼 확인할 수 있음. 1. 활용 용도 JS를 통해 HTML 문서 중 해당 사항을 검색 혹은 수집하여 묶거나, 수정하는 것도 가능함. 아래와 같은 내용을 주로 확인함. 1) 태그이름(tagName), id(id), class 목록(classList), class 문자열(className) classList : 해당 태그의 속한 class들의 목록을 '객체 형식'으로 보여줌 Ex) $0.classList...

[오늘 공부한 것] 1. 스터디에서 원가 계산 사이트 만들기 시작 - react 등을 이용해서 전반적인 프론트엔드 부분을 연습해 볼 계획임. - dom 연습이 많이 필요함 2. 유효성 검사 만들기 - html과 대략적인 css는 만들었으나 바닐라 js 문법이 어색함. - 뭔가 정확하게 설명되지 않은 개념들이 난무하다는 느낌을 받음. 바닐라 js도 수업중 누구도 이야기 하지 않아서 스스로 찾아봄. 3. Do it! 클론 코딩으로 영화 리뷰 웹사이트 만들어보기 - 스텝 3까지 시도함. - npm과 리액트가 대략 어떤식으로 시작하고 작업하는지는 이해가 되기 시작함. - 컴포넌트 개념 복습은 필요함. - 컴포넌트 : js에서 일종의 클래스 개념과 비슷한 것 같음. 컴포넌트들을 연결해서 동일한 형식의 컨텐츠를 자..

[오늘 공부할 것] 1. twittler 목업 시작하기(70% 수준 완료) - 밤에 거의 완료 함. 2. webber-study html/css 초급 부분 정독하기 3. html 시범 웹 페이지 만들어보기 [내일 공부할 것] 1. twittler 목업 완료하기 2. udemy html/css 강의 중 html 부분 1스텝은 듣기