Fall in IT.

안녕하세요. 오늘은 웹 작업을 할때 발생하는 Target container is not a DOM element 에러에 대해서 알아보겠습니다. 리액트를 사용할때, (리액트를 사용하지 않을때도 발생할 수 있습니다.) UInvariant Violation: Target container is not a DOM element 가 발생하는 이유는 DOM(Document Object Model 즉, HTML)이 렌더링 되기 전에 DOM element를 참조할 경우에 발생합니다. 예제코드 아래 예제 코드처럼 javascript 파일을 head에서 불러올 경우 하단에 있는 body 엘리먼트가 읽혀지지 않은 상태에서 javascript 파일이 호출되어 DOM element를 참조할 경우 에러가 발생하게 됩니다. 해결 ..

안녕하세요. 오늘은 공유기(Router)의 개념에 대해서 간단히 알아보도록 하겠습니다. 공유기란? 하나의 공인 IP를 사용하여 여러개의 기기가 인터넷을 사용하기위해 사용되는 네트워크 기기입니다. 아파트 또는 학교에서 많이 사용되며 라우터라고도 불립니다. 공유기를 사용하는 이유는? 통신사와 회선 계약을 하면 인터넷 케이블(공인 IP가 할당 된)을 하나 받습니다. 이때 여러개의 기기를 사용하려면 통신사와 계약을 여러번 해서 많은 수의 케이블을 할당 받아야하는데 이럴 경우 돈이 많이 들게 됩니다. 이때, 공유기를 사용하면 하나의 공인 IP를 사용하여 다수의 기기를 연결할 수 있어 경제적입니다. 필수 개념 # 1. WAN (Wide Area Network) 통신사에게 전달받은 케이블을 WAN에 연결합니다. 공인..

안녕하세요. 오늘은 NAT(Network Address Translation)의 개념에 대해서 간단히 알아보도록 하겠습니다. NAT란? 한국어로 직역하면 네트워크 주소 변환로 사설 IP를 공인 IP로 변환해주는 기술입니다. NAT를 사용하는 이유는? 사설 네트워크에 속한 여러 개의 기기(호스트)가 하나의 공인 IP 주소를 사용하여 인터넷에 접속하기 위해서 사용합니다. 가정에 많이 사용되는 공유기(=라우터)에서 사용되는 기술입니다. (아래 그림 참고) NAT 동작 원리 예를들어 공유기에 연결되어있는 192.168.0.4의 사설 IP를 사용하는 컴퓨터에서 구글 사이트(www.google.com)에 접속할 경우 아래와 같은 순서로 처리가 됩니다. # 1. Gateway Address에 해당하는 IP의 머신에게..

오늘은 Onpremise 환경으로 사용하던 Gitlab 저장소를 Cloud 환경의 Github 저장소로 이전해보려고 합니다. 목적 Onpremise 환경의 Gitlab서버를 Cloud 환경의 Github 저장소로 이전한다. 요구사항 이전 commit 이력(history)이 모두 이전되어야 한다. Git 명령어를 사용하여 이전한다. 구축방법 1. Git 명령어 중 git clone --mirror 옵션을 사용해서 원본 저장소의 모든 기록을 clone(복사) 한다. 2. 이동할 원격 저장소의 경로를 지정한다. 3. 지정한 원격 저장소로 모든 데이터를 push 한다. # 1. 원본 저장소의 모든 이력(history) 복사 $ git clone --mirror [원본 저장소 경로] # 2. clone한 디렉터리..

box-sizing 이란? 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성 box-sizing 속성을 사용하면 엘리먼트의 패딩과 테두리가 너비에 영향을 주지 않습니다. 이렇게 하면 모든 엘리먼트가 직관적인 방식으로 크기가 설정되기 때문에 아에 전역 설정으로 사용하곤 합니다. * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } box-sizing 설정 값 box-sizing: content-box | border-box | initial | inherit content-box border와 padding을 제외하고 content 영역을 기준으로 박스 사이즈가 결정된다. border-box..