Next에서의 Routing 방식app폴더 내부의 파일 시스템으로 경로를 표시해 라우팅을 제공최상단에 위치한 page.tsx는 '/' root경로에서 보여주는 페이지를 담당폴더에 page.tsx가 존재하지 않는경우 해당 폴더 경로로 접근 시 404오류 발생다만 폴더가 중간 경로로 사용되는 경우 경로명으로는 사용가능하단의 사진의 경우 middle/basement로 접근시 page.tsx의 내용에 해당하는 페이지를 보여줌Not Found 페이지 파일404오류가 발생할 때 보여주는 페이지not-found.tsx로 최상단에 생성Linknext/link에서 import해오며 기존의 a태그의 역할을 함. href에 이동하려는 폴더구조 경로를 입력한다.HomeusePathnamenext/navigation에서 가져..
수동 설치원하는 프로젝트 폴더명 선언 후 이동npm initnpm install react@latest next@latest react-dom@latest- 최신 버전 react, next, reactdom을 설치package.json에 다음 내용을 추가 (next js를 실행시키는 명령어 선언) "scripts": { "dev" : "next dev" },page.tsx 파일을 app이라는 폴더에 넣기기본적으로 next js가 해당 app폴더의 page파일을 찾아 실행시킴npm run dev 명령어를 실행 시 4번의 선언을 통해 next를 실행시키며 5번의 page파일의 확장자를 ts로 선언한 경우 자동으로 typescript가 설치가 됨이후 자동으로 layout.tsx또한 기본적인 구조로 ..
본 글은 하단의 링크의 글들을 공부하며 필사한 글임. Proxy 객체란?프록시 객체는 특정 객체와의 인터렉션을 조금 더 용이하게 컨트롤 할 수 있게 도와준다.마치 은행계좌와 신용카드, 현금이 있는경우 신용카드는 현금의 프록시로 작용한다.결제라는 같은 인터페이스를 구현하며, 소비자는 현금을 잃어버리거나 일일이 관리하지도 않아되는 편리함이 존재합니다.ex) 특정 객체의 값을 설정하거나 값을 조회할 때 등의 인터렉션을 직접 제어할 수 있다. 여기서 프록시(proxy)란 무언가의 대리인으로, JS에서도 해당객체를 다루는 것이 아닌 Proxy 객체와 인터렉션하게 된다.const student = { name: "minkyu", age: 25, major: "computer",};const studentPro..
본 글은 하단의 링크의 글들을 공부하며 필사한 글임. 디자인 패턴 : 소프트웨어 디자인 과정에서 자주 발생하는 문제들에 대한 일반적인 해결책들임.이를 통해 반복적으로 되풀이되는 디자인 문제들을 해결하기 위해 맞춤화할 수 방법들임.하지만, 디자인 패턴은 라이브러리나 함수들을 코드에 복사해 재사용하는 것처럼 사용할 수 없음.패턴은 재사용하는 코드조각이 아닌 특정 문제에 대해 설계 시, 올바른 설계를 빠르고 올바르게 만들 수 있도록 도와주는 일종의 해결책임.디자인 패턴의 카테고리 생성 패턴(Creational Pattern), 구조 패턴(Structural Pattern), 행동 패턴(Behavioral Pattern) 생성 패턴 : 이러한 패턴들은 기존 코드의 유연성과 재사용을 증가시키는 다양한 객체 생성..
리액트 재 복습 route, state 강의 듣고오기 React Hooks
지난시간 만든 firebase.js의 Config의 키 값들을 .env파일안에 넣고 값은 process.env.~로 대체 깃허브 같은 오픈소 사이트에 올리게 될 경우 적나라하게 볼 수 있기에 .env파일을 사용 애플리케이션 실행 시 .env에 포함된 값들이 내가 사용하려는 파일(나의 경우 firebase.js Config의 값들로 넘어감. 브라우저상에선 내 키값들이 전부 적용되어 실행되기에 완전 보안이라고는 볼 수 없음 내 firebase Config의 value가 있음 깃허브 업로드 시 env파일은 볼 수 없음 (환경변수파일)
