이번에는 실제 웹페이지를 개발해보겠습니다. 개발한 웹페이지는 크롬익스텐션으로 변환해, 크롬창을 열때마다 시작화면으로 사용하 수 있도록 함께 설정까지 할 예정입니다. 먼저 개발할 웹페이지를 살펴보겠습니다. 먼저 오늘의 날짜와 현재 시간을 나타내는 시계를 만들어보고, 검색어를 입력하면 검새 결과 페이지로 이동하는 기능도 만들고, api를 통해 명언 데이터를 받아와서 화면에 나타내보고 마지막으로 북마크를 추가하고 삭제하는 기능까지 개발해 볼 예정입니다. 참고자료 https://www.inflearn.com/course/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%B2%..
display display는 HTML요소들을 어떻게 보여줄지를 결정하는 속성으로, 꼭 알아야하는 속성 중 하나입니다. display속성에는 none, block, inline, inline-block 그리고 grid, flex 등의 다양한 값들이 있습니다. class 이름이 속성값-setting으로 되어있는 모든 요소들은 오른쪽 코드처럼 width와 height의 값을 각각 300px, 200px로 설정해주겠습니다. 코드를 실행하면 다음과 같습니다. block 기본적으로 가로의 길이가 100%로 설정이되며, 한 줄의 하나만 div만 배치됩니다. block-setting이라고 적힌 div를 보면, 우리가 설정했던 길이와 높이의 값이 적용이 되어 표시되는 것을 알 수 있습니다. inline inline값은..
position position 속성은 웹 문서 상에 요소를 배치하는 방법을 지정합니다 static 오른쪽에 보이는 파란화면을 우리가 보는 웹페이지 라고 가정하겠습니다. 모든 웹 요소들은 기본적으로 postion값이 static 입니다. static의 경우, css를 다음과 같이 작성하면, 노랑 파랑 초로순서로 쌓입니다. relative position 값이 static 일 때의 위치를 기준으로, 웹 요소들의 위치를 변경하고 싶을 때, 값을 relative로 설정합니다. right 50px이 적용된 노랑 div는 static 속성일 때의 상태를 기준으로 오른쪽으로 50px 만큼 떨어져 있고 left 50px은 왼쪽으로 50px만큼 떨어져 있고 bottom 50px은 아래에서부터 50px만큼 이동된 것을 ..
localStorage local storage는 웹 브라우저에 데이터를 저장할 수 있는 기능으로, 이 로컬스토리지를 사용하면, 사용자가 브라우저를 닫아도 저장한 데이터를 계속해서 유지할 수 있습니다. 이 로컬 스토리지는 보통 사용자의 로그인 정보나 설정 등을 저장하기 위해 사용됩니다. 예를들어, 사용자가 웹 페이지에서 로그인 정보를 입력해 로그인을 성공했다면, 해당 아이디를 로컬스토리지에 저장해, 사용자가 다음에 다시 동일한 페이지에 방문했을 때, 아이디 정보를 불러와서 이전에 입력했던 정보를 유지할 수 있습니다. 로그인과 비밀번호를 입력할 수 있는 input태그와 로그인버튼을 만들어보겠습니다. 로그인 그다음 js파일에서 input태그에 입력된 아이디와 비밀번호의 값을 가져와보겠습니다. const id..
6장. 아키텍처 설계 설계의종류 아키텍처 설계(소클사알프) 소프트웨어를 서브시스템과 컴포넌트로 분할 어떻게 연결될 것인가? 어떻게 상호작동 할 것인가? 인터페이스는? 클래스 설계 클래스의 여러기능 사용자 인터페이스 설계 알고리즘 설계 컴퓨팅 메커니즘의 설계 프로토콜 설계 통신 프로토콜의 설계 응집력(우논시절교순기) 설계원리2 : 응집력을 증진 서브시스템이나 모듈이 서로 관련 있는 것들은 같이 있게 하고 그 외의 것은 외부에 존재하게 함 전체시스템을 이해하거나 변경하기 쉬워짐 응집력의 종류 기능적응집 : 단일 결과를 계산하기 위한 코드만이 모여 있고 나머지는 밖으로 추출할 때 달성 됨 즉 모듈이 단일 작업을 수행하여 결과를 내고 외부효과(side-effect)가 없는 것 수학 함수 모듈 화학 공정에 필요한..
input태그 아래의 html코드를 작성해, input태그를 작성해주겠습니다. 그리고 ex.js에 dom api를 사용해 input요소를 inputElement 변수에 담아보겠습니다. const inputElement = document.getElementById("input"); console.log(inputElement); addEventListener를 사용해 inputElement에 마우스를 올리면, 이 inputElement에 작성된 값을 가져오는 코드를 작성해보겠습니다. const inputElement = document.getElementById("input"); inputElement.addEventListener("mouseover",()=>{ console.log(inputEleme..
DATE객체 DATE객체는 특정 날짜의 시간과 오늘의 날짜와 시간을 알 수 있어 유용하게 사용되는 자바스크립트의 내장객체 입니다. nowDate라는 변수에, 생성자를 사용해서 Date 객체를 생성하고, "YYYY-MM--DD"의 형태로 "2023-12-21"을 전달해 nowDate 변수를 출력해보겠습니다. let nowDate = new Date("2023-12-21"); console.log(nowDate); 이렇게 Date객체에 특정 날짜를 전달하면, 그 해당 날짜의 연도, 월 일, 요일을 알 수 있습니다. 이번에는 아무런 값도 전달하지 않고 코드를 실행시켜보면 let nowDate = new Date(); console.log(nowDate) 오늘의 값이 나오게 됩니다. Date객체의 메서드를 사용..
요소노드생성 class이름이 clock인 div의 아래쪽에 새로운 요소를 추가해보겠습니다. createElement createElement 메서드를 통해 새로운 요소노드를 생성할 수 있습니다. class이름이 season이고, div로 이루어진 요소를 추가 해보겠습니다. const seasnsonElement = document.createElement("div"); 이 createElement의 매개변수로는, 생성할 요소의 태그 이름을 넣어줍니다. 그 다음 classList를 사용해 season이라는 class이름을 생성해주겠습니다. const seasonElement = document.createElement("div"); seasonElement.classList.add("season"); di..
요소 찾고 선택하기 먼저 다음 코드를 작성해줍니다. 02.10.금요일 15:03 위 코드의 브라우저 실행화면입니다. document.getElementById(id) 특정 요소를 찾을 때에는, 가장 먼서 문서노드 document에 접근해야하기 때문에, document를 작성해줍니다. getElementById는 말 그대로 특정 요소를 id값으로 가져온다는 의미이고, 실제로 특정 요소객체를 반환합니다. console.log(document.getElementById("date")); 실제로 id값이 date인 요소가 반환된 것을 볼 수 있습니다. 만약 동일한 id를 갖고 있는 요소가 여러개인 경우, 가장 위에 있는 첫 번째 요소만 반환하는 API입니다. dcoument.querySelector(cssSel..
웹이란 웹이란 인터넷에 연결된 사용자들이 서로의 정보를 공유할 수 있는 공간을 의미합니다.(출처 - 위키백과) 이러한 웹에서 HTML로 작성된 페이지를 웹 페이지라고 하고, 이 웹페이지들이 여러개 모여있는 집합을 웹사이트라고 부릅니다. 웹 사이트란, http://google.com/과 같은 주소, url에 접속해서 볼 수 있는 웹 페이지들을 통틀어 말하는 말로, 흔히 말하는 홈페이지라고 할 수 있습니다. HTML과 CSS HTML : Hyper Text Markup Language의 약자로, 쉽게 말하면 브라우저에게 웹 페이지의 요소들이 어떻게 구성되어있는지를 알려주는 역할 CSS : Cascading Style Sheets의 약자로, 말 그대로 웹 페이지의 요소들을 꾸며주는 역할을 하는 sheet 입니..
API란 API란 Application Programming Interface로, "컴퓨터나 컴퓨터 프로그램 사이의 연결"이라고 나와있습니다. 클라이언트와 서버의 통신 API에 대해 이해하려면, 먼저 클라이언트와 서버의 데이터 통신 즉, 우리가 웹이나 앱을 이용할 때 어떻게 원하는 데이터를 요청하고 받을 수 있는지를 먼저 이해해야합니다. 커피숍과 클라이언트-서버 통신 이러한 과정은 우리가 커피숍에 가서 커피를 주문하고 마시는 과정을 떠올려보면 쉽게 이해할 수 있습니다. 1. 손님이 바리스타에게 원하는 커피를 주문 2. 바리스타는 주문받은 커피를 만들기 위해 필요한 원두를 파악하고, 창고에서 원두를 선택 3. 바리스타는 창고에서 선택한 원두를 가져옴 4. 선택한 원두로 커피를 제작하고, 완성된 커피를 손님..
저번시간에 배운 프로미스 객체에 대해 복습할 겸, 프로미스 객체를 사용해 간단한 비동기 처리 함수를 작성해보겠습니다. delay라는 함수를 작성하고, delay함수에서는 setTimeout 함수에서 사용할 매개변수를 받습니다. 프로미스 객체를 반환하고 resolve함수를 호출해주고, delay함수 아래에는 start함수를 생성하고 delay함수를 호출했습니다. delay함수의 인수로는 2000을 넘겨 2초동안 지연하게 해주고, then 메서드를 사용해, "대기"라는 단어를 출력합니다. const delay = (ms)=>{ return new Promise((resolve)=>{ setTimeout(()=>{ resolve(); },ms); }); }; const start = () => { delay(..
동기 프로젝트의 목표 중 하나는사용자가 메뉴담고 주문을 하였을 때 사장(가게주인)님이 주문을 확인할 수 있도록 하는것 이었습니다. 해당 기능을 구현하기 위해 먼저 사용자가 선택한 데이터들을 DataBase의 Enttity에 저장하도록 해보겠습니다. 처음생각한 방식 처음에는 아래의 결제 화면에서 결제버튼(카드결제 or 현금결제)를 클릭하였을때의 액션에서 과정들이 이루어졌습니다. payBlock의 Order에 현재 담긴 메뉴들의 정보가 LIst형태로 담겨있습니다. 그리고 해당 데이터탭에서 Order의 Entity를 보면 자동으로 생성된 액션중 CreatOrUpdateOrder를 이용하여 선택한 메뉴의 정보를 업데이트 해주려고했습니다. 그리고 Server Action에서 Actino을 하나 만들어 주고 로직에..
오늘 프로젝트를 진행하면서 팀원과 함께 많은 부분을 수정했습니다. 수정한 내용을 목록으로 보여드리겠습니다. 선택한 필수옵션 체크해제시 부모블록화면에서 값 안보이게 하기 필수옵션 선택(체크) 안 하고 담기버튼 눌렀을 경우 메시지(필수옵션을 선택해야합니다)출력 필수옵션이 없는 메뉴에서 담기버튼 눌렀을경우 위의 해결한 과정에서 메시지(필수옵션을 선택해야합니다)출력 안 하게하기 개수를 1미만으로 시도했을때 메시지(1개이상선택해야합니다)출력 차례대로 어떻게 해결하였는지 살펴보겠습니다. 첫번째 문제 : 선택한 필수옵션 체크해제시 부모블록화면에서 값 안보이게 하기. 위의 문제는 필수옵션 체크 액션에서 previousOptionName이라는 입력매개변수를 만들어 이전에 선택한 필수옵션을 담아주고 현재선택한 옵션과 같으..
비동기 처리 우리는 setTimeout 함수를 이용해 작업을 비동기적으로 처리했었고, setTimeout함수는 작성된 코드와 같이 콜백함수와 ms단위의 지연 시간을 매개변수로 입력받는 함수라고 배웠습니다. https://myeongsu0257.tistory.com/117 자바스크립트 - 비동기 처리 동기 동기란 하나의 작업이 실행되는 동안은 다른 작업을 수행하지 않는 방식으로, 다시 말해 하나의 작업이 종료될 때 까지 다른 작업을 실행하지 못하고, 앞선 작업이 끝나야 다음 작업을 할 myeongsu0257.tistory.com 지난시간에 작성했던 코드에서, 함수를 호출할 때 출력할 단어와, 단어를 출력하는 함수를 인수로 넘겨주도록 하겠습니다. const workA = (value, callback) =>..
