코딩을 보라

순수 Valnilla JS를 사용해 가계부 웹페이지를 만드는 프로젝트를 진행하고 있습니다.JS만을 사용하다보니, Next.js같은 프레임워크에서 제공하는 기능들을 직접 구현해보는 기회가 되었어요.아무래도 실무에서는 프레임워크를 사용할 확률이 훨씬 높겠지만, 프레임워크에서 어떤 부분들이 개발자의 수고를 덜어주는지 안다면 작동원리를 한층 깊게 이해하며 사용할 수 있게됩니다. ✅그래서 오늘은! JavaScript만으로 SPA를 직접 만들어보고 작동원리를 이해해보는 시간을 가져볼게요. SPA 화면 전환 오늘 만들어 볼 가계부 UI입니다.(Figma에서 expense tracker를 검색하면 나오는 템플릿을 사용했어요.) 페이지는 3개입니다.1. Home: 지출 내역을 날짜별로 보는 페이지2. Add/Edit..

async await 을 함수에서 리턴을 할 때 주의할 점이 있다. Bad 사례처럼, 이미 async가 붙은 함수에서는 리턴값 가장 바깥에 Promise가 붙기 때문에, 리턴값은 Promise가 붙으면 안된다. updateUserGoalVisible = async ( goalId: number, visible: boolean, ): Promise => { /* 👎 Bad 이미 async가 붙었기 때문에 리턴값은 순수한 Goal이어야 하는데, this.prisma.goal.update({}) 를 리턴함으로써 리턴값은 Promise이 되어버린다. 그래서 이 함수의 최종 리턴값은 Promise 이 되는 것이다. */ return this.prisma.goal.update({ where: { id: goalId..

const today = new Date(); const nextMonthFirstDate = new Date(today.getFullYear(), today.getMonth() + 1, 1); const currentMonthLastDate = new Date(nextMonthFirstDate - 1); // 1일을 빼준다 const lastDate = currentMonthLastDate.getDate(); // 원하는 마지막 날짜를 얻었다!

개발자 도구 network 탭 -> example 보면 데이터관련..? 그런거 볼 수 있음 - 비동기어떤 코드로 인해 1 2 3 코드 순서대로가 아니라 1 다음에 3이 실행될 수도 있다.=> callback 함수 이용해서 얘가 잘 끝났는지 코드 잘 실행됐는지 알아볼 필요가 있어// ajax때문에 비동기가 일어남.// 익명함수function fn(foo){ // 비동기 시작 // 비동기 끝 $.ajax({...}) .then(function(){ //비동기가 끝났을 때 실행됨 foo(); });ㅋㅋ //foo(); // 비동기 시작 끝 상관없이 걍 실행될 수 있으므로 then안에 써주긔} function a(){ } fn(a); // a라는 함수가 인자로 전달됨.fn(function(){}); // 함수도..

https://github.com/YOOGOMJA/javascript_study github - wiki 보면 전체 볼 수 있음 https://github.com/YOOGOMJA/javascript_study/wiki/Week2 1.2.2onkeypress에 return false;를 넘겨주면 키 입력을 막을 수 있습니다. onkeydown='on(0,this,event)' function on(type, obj, evt){ return false; } 그러면 입력 못함. clear() console 꺠끗 // click이벤트 주기 document.getElementById('btn').addEventListener('click' , function(event){ // 클릭이벤트가 실행됐을 때 실행되는 ..

https://github.com/YOOGOMJA/javascript_study solution branch에 답 있음 [example1.html] 1. getElementById로 요소 찾기 개발자도구(f12) - console을 보자! 입력) document.getElementById("head1")결과) Hello World! - class와 id의 차이class는 카테고리화id는 그 요소 하나를 딱 집어서 할 때! 2. getElementsByClassName으로 요소 찾기입력) document.getElementsByClassName("head1")[0]결과) Hello!class는 여러 개의 '의자'를 가져온다고 생각하기 때문에 (이게 표준) elements인거다! 3. 요소 생성하기입력) d..