seohyun han

▶ _app.js 페이지 전환 시 레이아웃을 유지할 수 있다 페이지 전환 시 상태값을 유지할 수 있다. componentDidCatch 를 이용해서 에러 핸들링을 할 수 있다. 추가적인 데이터를 페이지로 주입시켜주는게 가능하다. 글로벌 CSS 를 선언한다. function MyApp({ Component, pageProps }) { return ( ); } export default MyApp; Props 로 넘어온 Component 는 현재 페이지를 의미한다. 페이지 전환 시에 Component Props 가 변경된다. pageProps 는 데이터 패칭 메서드를 통해 미리 가져온 초기 객체이다. 이 메서드를 사용하지 않는다면 빈 객체가 전달된다. ▶ public public 폴더로 정적 파일들을 제공할..

▶ Optional Chaining Js 의 Optional Chaining 은 객체 속성이나 메소드에 접근할 때 해당 객체가 null 또는 undefined 인 경우 발생하는 TypeError 예외를 방지할 수 있는 기능이다. name, address 정보를 가진 person 객체가 있다. const person = { name: "John", address: { city: "New York", state: "NY" } }; person 객체에서 address 속성의 city 값을 가져오는 코드를 작성하고자 할 때, 일반적으로는 다음과 같은 코드를 작성할 수 있다. const city = person.address.city; 하지만 ! 만약 person 객체가 null 또는 undefined 라면 ....

Next js 는 Node 에서 실행되기 때문에 웹브라우저에서 제공하는 전역객체 (window, document 등) 에 접근할 수 없다. ▶ 코드분할 코드분할이란 서로 다른 URL 에서 접근할 수 있는 여러 페이지로 분할하는 것이다. 이렇게 분할된 각 페이지는 응용프로그램에 대한 고유한 진입점이 된다. Next.js 에는 코드분할을 지원하는 기능이 내장되어있다. pages/ 디렉토리 내의 각 파일은 빌드 단계에서 자동으로 자체 자바스크립트 번들로 코드분할된다. ㄴ .. 이게 무슨말일ㄲ ㅏ? ▷ pages 디렉토리 pages 디렉토리는 Next.js 에서 핵심적인 역할을 하는 디렉토리 중 하나로, 각 페이지에 대한 엔드포인트를 정의하는 역할을 한다. 즉 'pages' 디렉토리에 파일을 생성하면, 해당파일..

▶ 도커 볼륨 도커 이미지로 컨테이너를 생성하면 이미지는 읽기 전용이 된다. 이미 생성된 이미지는 어떤 경우로도 변경되지 않으며, 컨테이너 계층에 원래 이미지에서 변경된 파일시스템 등을 저장한다. 컨테이너를 삭제하면 ? 컨테이너 계층에 저장되어있는 DB 정보도 삭제된다. 도커 볼륨은 이를 방지하기 위해 컨테이너의 데이터를 영속적 데이터로 활용할 수 있는 방안 중 하나이다. ▶ 도커 볼륨 활용 방안 1. 호스트와 볼륨을 공유한다. 2. 볼륨 컨테이너를 사용한다. 3. 도커과 관리하는 볼륨을 생성한다. 이처럼 컨테이너가 아닌 외부에 데이터를 저장하고 컨테이너는 그 데이터로 동작하도록 설계하는 것을 stateless 하다고 말한다. 컨테이너 자체는 상태가 없고 상태를 결정하는 데이터는 외부로부터 제공받는다. ..

이미지와 컨테이너는 도커 엔진의 핵심이다. ※ 도커 이미지 이미지는 컨테이너를 생성할 때 필요한 요소이다. 이미지는 여러개의 계층으로 된 바이너리 파일로 존재한다. ( 바이너리 파일 : 데이터의 저장과 처리를 목적으로 0과 1의 이진 형식으로 인코딩된 파일) 컨테이너를 생성하고 실행할 때 읽기 전용으로 사용된다. ▷ 이미지 이름 기본형식 [저장소 이름]/[이미지 이름]:[태그] 저장소(Repository) : 이미지가 저장된 장소. 이미지 이름 : 이미지 이름 설정은 생략할 수 없다. 태그 : 이미지의 버전관리에 사용한다. 일반적으로 버전 (=2.0) 을 명시하지만 태그를 생략하면 도커 엔진은 이미지의 태그를 latest 로 인식함 ※ 도커 이미지 구조 이미지의 이름을 구성하는 저장소, 이미지 이름, 태..

읽을꺼임 .. 진자 ... 맹세맹세 ~~ .. !

아래는 회사 OT 때 들었던 강의를 간단하게 정리한 것입니다.  장치들은 네트워크를 통해 통신할 수 있다.통신은 송신자와 수신자가 정보를 정확하게 전달하는 것이다. 매체가 없다면 통신은 이뤄질 수 없다.대표적인 통신 매체로는 랜선, 광케이블 등이 있다.  네트워크에서 매체를 통해 통신하는데, 이 매체는 일정한 정보 전송속도를 갖고있고, 이를 대역폭이라고 한다. '인터넷속도 100Mbps(bit per second)' 는 매체의 대역폭이 초당 100메가바이트의 정보를 전송할 수 있다는 뜻이다. 자원을 공유하기 위해 네트워크를 연결한다. 자원을 공유하기 위해 LAN 과 WAN 을 사용한다. (=네트워크)LAN 은 지역 내에 있는 컴퓨터들을 연결하는 네트워크이다.WAN 은 LAN 의 집합으로, 지역을 초과하여..

https://feelfreetothink.tistory.com/173 [React & Typescript 프로젝트] Happy-Christmas ! ▶ 소개 크리스마스 편지를 ('나' 한정) 주고 받을 수 있는 웹사이트 ▶ 요구사항 이름을 입력해 등록된 메세지가 있는지 확인할 수 있다. 비밀번호를 입력해 본인에게 등록된 메세지를 확인할 feelfreetothink.tistory.com 크리스마스때 진행했던 토이프로젝트는 BackEnd / FrontEnd 두개의 폴더로 구성되어있다. 그 중 BackEnd 폴더를 Docker 에 올려서 실행시켜보려고 한다. 서버는 AWS RDS 인스턴스와 연결해 두었다. ▶ 루트경로에 Dockerfile 생성 - BackEnd 폴더만 docker 에 올릴예정이라서 Back..

사용하던 컴퓨터를 변경했다. 맨 처음에 EC2 인스턴스를 생성하고 SSH 접속 설정을 하는데 정 ~ 말 힘들었던 기억이있어서 새로운 컴퓨터의 접속 설정을 미루고 있었다. (인스턴스 접근할 일이 생기면 이전 컴퓨터로 접속하면서..) 당연하게도 한계가 왔다. USB로 프로젝트를 옮겨서 배포하는데에 현타가 왔고 현재컴퓨터에 EC2 SSH 접속 설정을 하기로 (((큰))) 맘을 먹었다. ▶ .ssh 경로로 이동 cd ~/.ssh ▶ 키 생성 ssh-keygen 명령어를 실행하면 ~/.ssh/ 경로에 아래와 같은 파일들이 생성된 걸 확인할 수 있을 것이다. ▶ Pem 파일 이동 가장 헤멨던 부분인데, Pem 파일을 재발급 받아야하는줄 알았다. 잃어버린 사람들은 재발급 받도록.. 근데 인스턴스 중지시키고 쿵짝쿵짝 ..