✔오늘 배운 중요한 🔑 point내 프로젝트를 AWS를 이용하여 배포할때 동일한 동작을 보장받기 위해서 DOCKER를 사용한다.WSL2를 설치하고 Linux용 Windows 하위 시스템을 켜야 하는 이유는 Docker의 원활한 동작과 퍼포먼스 최적화를 위함이다.Docker Desktop은 Docker 환경을 쉽게 설정하고 관리할 수 있는 도구이다. WSL2와의 통합으로 Linux 환경을 설정하지 않아도 Docker의 모든 기능을 사용할 수 있다.🎯 오늘 배운 내용 Docker를 사용하는 이유?직전 프로젝트에서는 간단하게 Planner 사이트를 만들고 로컬 서버에서만 구동을 하였는데 이번 프로젝트는 AWS를 이용하여 서버를 배포할 생각이어서 Docker를 사용하기로 하였다. WSL2 설치Docker는 ..

🕛개인 프로젝트 (Planner)💡 프로젝트 기간BACK :  2024-11-14~2024-11-20FRONT: 2024-11-26 ~ 2024-11-28  프로젝트 목적9월부터 10월 총 2달이 되는 기간동안 Spring을 이용해서 API를 만들지 않았기 때문에 많이 까먹고 헷갈리는 부분이 많아서 처음에는 아주 간단한 TODO 프로젝트를 만들어보자! 해서 이 프로젝트를 시작하게되었다. 즉 이 프로젝트는 Warming-up이자 이전에 배웠던 것들을 복습하기 위한 목적이다.또한 이전까지는 서버API만 만들었는데 이 API를 클라이언트에서 어떻게 통신을 하는지에 대한 궁금증이 이전부터 계속 있었고 클라이언트에서 API와 어떻게 통신을 하는지 이해하게 된다면 내가 API를 설계하는데 있어서 도움이 될수도 ..

public 하위에 create_todo.html 파일을 생성.해당 페이지에서 할일 목록을 작성하는 기능을 수행할 수 있도록 할 예정이다.일정 작성하기create_todo.html 작성1차 수정   일정 생성시 서버 측에서 오류가 발생하였다. POST 비즈니스 로직을 수행하는 함수에 @Transactional(readOnly = false) 를 적용하여 해결하였다. 제출이 되었는지 확인하기 위해 알람추가 및 새로고침 추가.then(data => { alert('제출이 완료되었습니다!'); location.reload();}) 금주 진행률과 금일 진행률 추가하자.해당 기능은 api를 설계할때는 고려하지 못했기 때문에 api에 해당 기능을 추가해줘야한다.일단 html을 먼저 작성해보자.와이어프레임..

프론트와 백엔드 둘다 접속한뒤 연결이 제대로 되었는지 확인해보자F12를 눌러 Network탭 확인해보면 fetch가 제대로 잘 작동하며 200OK 응답이 표시되어있는것을 확인할 수 있다.하지만 현재 API의 각 목록들을 가져오지는 않는 상황이다.코드를 다시 살펴보자.첫번째 줄인 fetch()함수를 이용해서 api에 HTTP요청을 보냄.then(response => response.json())을 통해 response를 json형태로 변환함.const todayList = document.getElementById('today_list'); : HTML에서 id가 today_list인 요소를 찾아서 todayList에 저장.const li = document.createElement('li'): 새로운 를..

API와 연결할 간단한 웹페이지를 HTML과 CSS를 이용해서 만들어보자일단 전체적인 도면을 그리기 위해 FIGMA로 와이어프레임을 그려보았다.https://www.figma.com/design/mWEBF54vyH7iuLlBxTdnzp/PLANNER?node-id=0-1&t=y3WinJFjbGGEyUCG-1 FigmaCreated with Figmawww.figma.com  메인페이지작성하기 페이지, 일정 수정,확인 페이지대충 이런식으로 웹사이트를 만들어서 적용할 생각이다.  메인페이지의 금일 진행률과 금주 진행률은 오늘,이번주 할일 목록에서 완료한 %를 나타낼 예정이라 추후에 API에 추가해야한다. 초간단 ver 웹페이지 Planner ..

css로 표현할 수 있는 애니메이션으로 transition 애니메이션이 있다. (key frame 애니메이션은 다루지 않을 예정) transitiontransition-property효과를 적용할 css속성 지정transition-property: background-color, margin-left;transition-duration효과를 적용할 시간 지정transition-duration:100ms;transition-delay효과가 발생하기까지의 시간 지정transition-delay:0ms;transition-timing-function변화 방식 지정(fade in fade out같은)transition-timing-function: ease-in; input[type="submit"]:hover..