개발을항해

Date 값에 toLocaleDateString() 함수를 사용했더니 다음과 같은 오류가 발생했다. item.due.toLocaleDateString is not a function. item.due가 Date 객체로 인식되지 않아서 생긴 오류이다. 혹시 해당 값을 JSON.stringfy()한 후 다시 JSON.parse() 했다면 item.due 값이 객체가 아니라 string으로 콘솔에 찍힌다. new Date()로 감싸서 다시 객체로 만들어주자. new Date(item.due).toLocaleDateString()

Next.js는 React의 서버 사이드 렌더링(SSR)을 쉽게 하도록 도와주는 프레임워크입니다. React는 기본적으로 클라이언트 사이드 렌더링(CSR)입니다. CSR은 한 페이지만 화면에 띄웁니다. 그 후 사용자의 요청에 따라 필요한 부분만 다시 렌더링 합니다. 하지만 모든 정보를 처음에 다 불러오기 때문에 초기 로딩 시간이 길어집니다. SSR은 서버에서 필요한 페이지를 완성한 후 이를 브라우저에 보냅니다. 처음 렌더링 된 html만 브라우저에 보내기 때문에 초기 로딩 시간이 짧습니다. 하지만 페이지를 요청할 때마다 정보를 다시 불러 와서, 사용자가 페이지를 이동하는 시간은 더 오래 걸립니다. # 설치, 실행 npm install next npx create-next-app 1️⃣ Router 비교 ..

⚛️React란? React는 facebook에서 만든 JS 라이브러리로, component를 사용해 웹페이지를 효과적으로 렌더링(rendering)합니다. 무슨 소리냐 하면, 예를 하나 들어보겠습니다. 어느 사이트에 회원가입을 한다고 해봅시다. 이름이랑 아이디, 비밀번호, 비밀번호 확인, 닉네임, 이메일, 전화번호 등을 입력하고 가입하기를 눌렀습니다. '비밀번호가 일치하지 않습니다'라는 알림 창이 뜨네요. 아니 근데 알림 창의 확인을 누르는 순간, 화면이 새로고침 되면서 제가 채운 정보가 다 사라지는 겁니다. 이러면 사용자가 실수했을 때 모든 정보를 계속 다시 입력해야 합니다. 이런 불편함을 해결하기 위해 생각해낸 것이, 필요한 부분만 바꾸자입니다. 사용자와 정보가 오가면서 변화를 줘야 할 부분이 생기..

코딩을 이제 막 시작했다면 알아두면 좋을 정보 4가지를 정리해봤습니다. 프로젝트 규모가 커지면 혼자 개발할 일이 거의 없을텐데, 그때는 '알아두면 좋을'이 아닌 '꼭 알아두어야 할' tip입니다. 기본적인 개발 tip도 있지만 웹 개발에만 해당하는 내용도 있습니다. 그럼 같이 보시죠..!! 1. 변수 이름은 신경 써서 짓는다 우리가 변수 이름을 짓고, 커밋 메세지를 보내고, 주석을 달 때 항상 고려해야 하는 것은 다른 사람이 알아보기 쉬워야 한다는 것이다. 나만 알아보는 변수명을 쓰고 주석을 열심히 다는 것보단, 처음부터 좋은 변수 이름을 지어서 주석을 달 필요가 없는 게 낫다. 변수 이름을 잘 지으면 주석이 없어도 직관적으로 쉽게 이해할 수 있다. 변수 길이는 평균적으로 10~16이라고 한다. 그러니 ..

DOM이란 무엇일까? DOM(Document Object Model)은 XML이나 HTML같은 웹 문서의 정보를 담고 있는 인터페이스입니다. 우리는 DOM에 있는 문서의 구조부터 스타일, 내용 등을 변경할 수 있습니다. DOM의 전제는 HTML 코드가 담긴 페이지를 문서(Document)라고 한다는 것입니다. DOM에 접근하고 조작하기 JavaScript로 DOM에 접근하거나 조작할 수 있습니다. HTML 요소나 속성, CSS 스타일을 변경하고, HTML 이벤트를 추가하여 적절한 반응을 하도록 합니다. JS로 DOM에 접근하기 const form = document.querySelector("form"); const input = form.querySelector("input"); 1. document에..