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..

안녕하세요. 오늘은 Typescript로 싱글톤 패턴에 대해서 알아보도록 하겠습니다. 싱글톤 패턴이란? 특정 클래스의 인스턴스가 단 하나만 존재해야 하는 경우가 있다. 이때 싱글톤 패턴을 사용합니다. 예제 소스 class Singleton { private static _default: Singleton; public static get default(): Singleton { if (!Signleton._default) { Signleton._default = new Signleton(); } return Signleton._default; } } 이러한 접근 방식의 또 다른 이점은 초기화 지연이다. 따라서 객체는 처음 액세스할 때 초기화 됩니다. 모두 즐거운 코딩하세요~

안녕하세요. 오늘은 Xcode에서 앱스토어로 앱을 배포하려고 하는데, Archive 버튼이 비활성화되어 있을때 활성화하는 방법을 알아보도록 하겠습니다. Archive 버튼이 비활성화 되는 이유는 buildDevice가 시뮬레이터로 설정되어 있을때 비활성화가 됩니다. 따라서, buildDevice를 Generic iOS Device 또는 실제 디바이스로 변경해주시면 Archive 버튼이 활성화됩니다. 모두 즐거운 코딩하세요~

안녕하세요. 오늘은 CSS에서 background-repeat 속성에 대해서 간단히 알아보도록 하겠습니다. background-repeat이란?background-repeat으로 배경 이미지의 반복 여부 또는 반복 방향을 정할 수 있습니다.특정 패턴의 이미지를 width의 길이에 상관없이 반복하고자할 경우 사용합니다. 아래와 같은 패턴이 반복될 경우, 작은 패턴의 이미지를 하나 만들고 background-repeat을 사용해 구현할 수 있습니다. 예제 코드 body { width: 100%; background-image: url("이미지 경로 입력"); background-repeat: repeat-x; // repeat-y, no-repeat 등의 옵션 사용 가능 } 참조https://www.w3sc..

안녕하세요. 서버를 운영하다보면 서버의 하드 디스크 사이즈가 부족한 경우가 생길 수 있습니다.오늘은 서버의 루트 볼륨을 늘리는 방법에 대해서 알아보도록 하겠습니다. 해당 글은 운영중인 서버의 디스크 용량을 빠르게 확장하기 위해서 상세한 내용은 생략되어 작성되었습니다. 따라서, 자세한 내용을 확인하고자 하는 분들은 AWS 공식 문서를 확인해주세요. : ) 볼륨을 확장하기 위해서는 2가지 단계가 진행되어야합니다.첫 번째는 EBS 볼륨을 확장해야하고, 두 번째는 파일 시스템을 확장해야 합니다. 확장한 볼륨을 모두 사용하기 위해서는 파일 시스템의 크기를 조정해야만 합니다. 파일 시스템 관련 명령을 사용하여 확장한 볼륨에 맞게 파일 시스템의 크기를 조정합니다. ext2, ext3, ext4 파일 시스템의 경우 이..

안녕하세요. 오늘은 자주 사용되는 GIT 커맨드라인 몇 가지에 대해서 알아보겠습니다. 목표git add 취소하기 staging -> unstaging 상태로 되돌리는 방법 git commit 취소하기 commit된 상태에서 staging 상태로 되돌리는 방법 작업중인 파일들 되돌리기 git add 취소하기 $ git reset HEAD git commit 취소하기commit을 취소하는 방법은 세 가지가 있습니다. 1. git reset --soft 옵션을 사용하는 방법2. git reset --mixed 옵션을 사용하는 방법3. git reset --hard 옵션을 사용하는 방법 // --soft 옵션: commit을 취소하고 staging 상태로 돌아온다.$ git reset --soft HEAD^ /..