Frontend (29) 썸네일형 리스트형 [NextJS] NextJS 시작하기 - 1. 프로젝트 생성 (feat. windows nodejs 최신버전 설치) 아래 강의 중 "NextJS 시작하기"를 보고 정리한 내용입니다. (+ 추가적인 것도 있음) https://nomadcoders.co/nextjs-fundamentals/lectures/3436 All Courses – 노마드 코더 Nomad Coders 초급부터 고급까지! 니꼬쌤과 함께 풀스택으로 성장하세요! nomadcoders.co 1. 프로젝트 생성 리액트에서 create-react-app을 통해 프로젝트를 생성한 것과 비슷하다. npx create-next-app@latest //최신버전 npx create-next-app@latest --typescript // +타입스크립트 그런데.. 문제가 발생했다. 기존 node의 버전이 낮아 최신 버전의 node를 설치해야 한다는 것이다. 2. node.. [JavaScript] 시계 만들기 (feat. setInterval, Date, padStart) [바닐라 JS로 크롬 앱 만들기] 를 수강 후 정리한 내용입니다. 1. setInterval 첫 번째 인자에 반복적으로 실행할 함수를, 두 번째 인자에 시간을 넣으면 된다. 주기적으로 실행해야 할 함수가 있을 때 사용한다. setInterval(func, ms) //ms마다 func을 실행한다 참고) setTimeout setInterval과 사용법은 동일하다. 다만, 일정 시간이 지나고 딱 한 번 수행해야 할 일이 있을 때 사용한다. setTimeout(func, ms) //ms초가 지나고 func을 한 번 실행한다 2. Date 객체 자바스크립트에 내장되어 있는 객체로, 날짜를 표현할 때 사용한다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Refe.. [JavaScript] 바닐라 JS가 기억이 안날 때 빠르게 복습하기 1. 개요 React만 주로 사용하다가 vanillaJS로 테스트를 봐야하는 상황에 놓였다. 분명 처음에는 JS로만으로 이것저것 할 수 있었는데, 지금은 프로젝트 구조는 어떻게 해야할지, 데이터 통신을 어떻게 하는지.. 기억이 전혀 나지 않는다😱. 즉, 이 글은 같은 상황에 놓일 미래의 나를 위해 정리해두는 글이다. 약 1년 반 전 수강했던 노마드 코더의 [바닐라 JS로 크롬 앱 만들기]를 다시 복습하면서 필요한 부분만 기록할 것이다. 2. HTML, CSS, JS 연결 이런 것까지 해야되나? 해야 된다. 지금의 나를 믿으면 안된다. 프로젝트 구조 > tree /f HTML에 연결하기 참고) js 파일을 연결하는 방법은 다양하지만 위의 코드를 기본값으로 기억하되, 추가로 여기서 4가지 방법을 자세히 설명.. [React] CRA 프로젝트에 serviceWorker 적용하기 개요 create-react-app으로 만든 프로젝트 진행하다가 푸시 알림때문에 serviceWorker를 적용할 일이 생겼다. 찾아보니 cra로 프로젝트 생성하면 기본적으로 serviceWorker.js가 있다고 하는데 현재 프로젝트(2021.08기준)에는 그런 파일이 없다. cra의 버전이 업데이트 되면서 serviceWorker가 사라지고 reportWebVitals가 생겼다고 한다. 그럼 serviceWorker를 적용하려면 어떻게 해야 하나?? 방법 1. 템플릿 사용 프로젝트 시작 전 애초에 serviceWorker를 사용할 생각이 있었다면, create-react-app을 할 때 service worker template으로 프로젝트를 생성하면 된다. npx create-react-app [a.. [Javascript] LocalStorage는 데이터를 string으로 저장한다. 개요 LocalStorage를 이용해서 Object값과 Boolean 값을 저장해야 하는 상황이 있었다. 각각의 값들을 그대로 setItem으로 저장하고 getItem으로 불러와 사용했더니, 타입 에러가 발생했다. 데이터의 타입 로그를 찍어보니 모두 string으로 나왔다. 원하는 결과가 아니다. 데이터 원본 타입 그대로 저장하고 그대로 가져오고 싶다! 1. Object 🔒 문제 window.localStorage.setItem("chat", chatObj); //객체 저장 const chat = window.localStorage.getItem("chat"); Object를 저장했는데 로컬스토리지를 거치고 나니까 String이 되어버림. console.log(typeof chatObj); //Objec.. 이전 1 2 3 4 다음
