목록분류 전체보기 (307)

혼자 적어보는 노트

[Next.js] 세팅 / pages / Link / layout component

데이터베이스 관련 상태관리에 대한 강의를 찾던 중 next.js를 접하게되어 해당 내용을 정리해보려 한다. ✅ 준비사항 수동 설치방법 1. 폴더 생성 후 npm init 으로 세팅 2. 생성된 package.json의 script부분의 test를 dev로 변경 “dev”:”next” ( npm run dev를 해보면 서버주소가 나오며 해당 local주소로 들어가면 적용된 것을 확인할 수 있다.) 3. next, react, react-dom 설치 npm i next react react-dom 📂 pages 폴더 생성 react에서 경로설정을 하려면 router를 사용했어야했는데 next는 pages 폴더로 경로 설정이 손쉽게 가능하다. * 폴더 명이 pages여야 next가 인식 가능 1. pages ..
NextJS 2022. 3. 1. 01:50
[Javascript] 날짜 및 시간 변환

날짜데이터를 데이터베이스에 넣어야 할 일이 생겨서 데이터를 변환하게 되어서 정리 했다. Sun Feb 27 2022 06:03:11 GMT+0900 (한국 표준시) -> 2022-02-27 06:03:11 const dateForData = (date) => { const getYear = date.getFullYear(); const getMonth = date.getMonth() + 1; const getDate = date.getDate(); const getHour = date.getHours(); const getMinutes = date.getMinutes(); const getSeconds = date.getSeconds(); return `${getYear}-${getMonth < 10 ?..
Javascript 2022. 2. 27. 06:12
브라우저의 렌더링 원리, 과정

브라우저가 화면에 렌더링을 할 때는 렌더링 엔진을 사용한다. 렌더링 엔진의 역할은 요청받은 내용을 화면에 표시하는 일이다. 파이어폭스는 게코엔진, 사파리와 크롬의 경우 웹킷 엔진을 사용한다. 렌더링 엔진이 HTML, CSS, Javascript를 렌더링 할 때 CRP(Critical Rendering Path)프로세스를 사용하며 단계는 아래와 같다. 1. HTML문서를 파싱하여 DOM 트리 구축 (Constructing the DOM Tree) 2. CSS를 파싱하여 CSSOM 트리 구축 (Constructing the CSSOM Tree) 3. 자바스크립트를 실행한다. (Running JavaScript) 4. DOM트리와 CSS트리를 조합하여 렌더트리 구축. (Creating the Render Tr..
기타 2022. 2. 26. 04:54
[React] 영역 밖 클릭시 이벤트 / 모달 닫기

영역 밖 클릭 시 이벤트 발생되는 것들을 몇차례 했었는데 이번에는 모달 컴포넌트의 바깥 영역을 클릭할 경우 해당 모달이 닫히는 것을 구현해보려한다. const modalRef = useRef(); const [profileModal, setProfileModal] = useState(false); const handleCloseModal = (e) => { if (profileModal && !modalRef.current.contains(e.target)) { setProfileModal(false); } }; useEffect(() => { window.addEventListener("click", handleCloseModal); return () => { window.removeEventListe..
React 2022. 2. 24. 05:10
[Redux] 미들웨어와 DevTools 같이 사용하기

Redux DevTools를 사용하려면 아래와 같이 store에서 세팅을 해주어야 한다. const store = createStore( rootReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() ); 하지만 미들웨어를 추가해야 할 때 rootReducer, Redux DevTools Extension코드, applyMiddlewere 이렇게 세 가지를 적어버리면 에러가 발생한다. import { createStore, combineReducers, applyMiddleware } from "redux"; import { composeWithDevTools } from "redux-devtools-ext..
기타 2022. 2. 23. 22:05
프로그래머스 자바스크립트 스터디 - mission4 / 마지막 후기

미션 4 - TodoList App 업그레이드하기 2 mission2에서 만든 TodoList를 업그레이드해서 api호출로 데이터를 CRUD하는 과정이였다. 1. 컴포넌트별 state 관리 이번과제를 진행하면서 크게 고민했던 것은 각 컴포넌트별 state관리였다. 어찌보면 단순한 문제로 보일 수 있겠지만, 상위컴포넌트에서 데이터를 담고 그 담은 데이터를 부모컴포넌트의 setState로 관리하고 한번 더 자식들의 setState라는 함수를 통해서 전달하는 방식이 익숙치 않았던 것 같다. // initialData 선언 this.$target = $target this.todoData = { currentUser: 'jinist', todos: [], } this.isLoading = false this.u..
스터디 2022. 2. 22. 04:05
[Git] 같은 계정으로 다른 컴퓨터에서 Git 사용하기

이번에 데스크탑이 고장나서 수리를 맡기는 바람에 그동안 맥북을 다시 사용하게 되었는데 git에 작은 프로젝트를 하고 있었어서 노트북에서 이어서 하고 싶었다. git clone 명령어를 사용하여 원격 저장소에 있는 데이터를 새로운 컴퓨터에 복제할 수 있다. 1. 새로운 컴퓨터에 등록되어 있는 계정 정보 확인. git config --list 2. 계정 정보가 없다면 원격 저장소에서 사용하던 이름과 email을 새로운 컴퓨터에 등록. git config --global user.name [name] git config --global user.email [email] 3. 복제하려고 하는 원격 저장소의 url을 clone. git clone [URL] 4. 터미널로 해당 폴더에 들어가서 log 확인 git ..
기타 2022. 2. 21. 18:56
[Javascript] 배열(Array)을 객체(object)처럼 사용?

기본 코테 문제를 풀고 다른 사람들의 코드를 구경하던 중 배열에 관해 새로운 사실을 알게 되었다. const arr = ["A", "B", "C"]; 자주 볼 수 있는 배열인데, 여기에 key-value를 추가할 수 있다는 사실..!! const arr = ["A", "B", "C"]; arr["First"] = "AAA"; arr["Second"] = "BBB"; console.log(arr); // ['A', 'B', 'C', First: 'AAA', Second: 'BBB'] console.log(arr.length); // 3 console.log(arr["First"]); // AAA console.log(arr["Second"]); // BBB 배열 안에 속성을 추가해 줄 수 있는 것이다. c..
Javascript 2022. 2. 21. 04:08
Prev 1 ··· 21 22 23 24 25 26 27 ··· 39 Next