본문 바로가기

분류 전체보기

 (122)
Unix Command 용어 unix 1970년대 개발된 운영체제. 소프트웨어를 개발하고 실행할 수 있는 편리한 플랫폼. 쉽게 수정해서 다른 컴퓨터에 적용할 수 있었음. 유닉스를 기반으로 하는 다양한 운영체제들이 탄생. windows를 제외하고 모든 운영체제들이 unix를 기반으로 한다. shell 커맨드를 해석해주는 프로그램. 터미널에서 입력한 커맨드는 shell이 컴퓨터가 이해할 수 있도록 번역 후 컴퓨터에게 전달하고, 받아온 값 또한 번역해서 출력해준다. 커맨드를 입력하는 검은 화면을 shell이라고 부르는 경우도 많다. bash shell의 종류중 하나로, Bourne agin shell. 가장 보편적이고, 많은 유닉스 운영체제에서 shell을 기본으로 사용한다. ubuntu의 기본 shell이기도 하다. (mac은 b..
Git / GitHub (정의, 시작하기) 정의 git : 버전관리 프로그램. gitHub : 깃으로 관리하는 프로젝트를 올려둘 수 있는 원격 저장소 서비스. 구성 working directory : 내가 작업중인 디렉토리 staging area : 새로운 커밋에 변경사항을 저장할 파일들을 담아주는 곳. local repository : git이 관리하고있는 파일들이 보관되어있는 로컬 저장소. remote repository : local repository에서 push하면 remote repository에 저장된다. 깃으로 관리되는 파일의 상태 untracked 상태 : git이 변동사항을 추적하고있지 않은 상태. tracked 상태 : 파일이 git에 의해 변동사항이 추적되고 있는 상태. staged 상태 : 파일 내용이 수정된 후, stag..
CSS - grid 수평선과 수직선으로 이루어진 집합. 사용방법 .container { display: grid; } 기능 격자 나누기 간격 미리 크기 정하기 원하는 위치에 원하는 칸만큼 배치 이름으로 배치 1. 격자 나누기 grid-template-rows grid-template-columns grid-template grid-template-rows 와 grid-template-columns를 동시에 작성하는 것이 grid-template 이고, 문법은 아래와 같다. .container{ grid-template-rows: 100px 100px 100px 100px 100px; grid-template-columns: repeat(8, 100px); } .container{ grid-template: repeat(5,..
CSS - Flexbox 가로 또는 세로로 요소를 배치/정렬하기 쉽게하기 위한 모듈. 1차원 레이아웃 모델이므로 한 번에 하나의 차원(행 또는 열) 만을 다룬다. 사용방법 .page{ display: flex; flex-direction: column; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10em; } 기능 방향 설정 정렬 요소가 넘치는 경우 요소사이의 간격 크기를 늘리거나 줄일 때 유연한 크기를 정할 때 1. 방향 설정 flex-direction 으로 정의하며 아래 4개의 값을 가질 수 있다. row column row-reverse column-reverse * 기본축과 교차축 - flex-dirction이 row인 경우 기본축 : 행 교차..
HTML - 시맨틱 태그(Semantics) 기능 div와 같은 기능을 한다. 영역을 나눌 때, 의미를 가지는 이름으로 나눌 수 있다. 장점 SEO(Search Engine Optimization). 검색엔진 최적화로 검색사이트에서 상단에 자리잡을 수 있다. 웹 접근성이 좋다. 시각장애가 있는 사용자가 스크린리더로 페이지를 탐색할 때 도움이 된다. 의미없는 div들을 탐색하는 것 보다 시맨틱태그를 사용한 코드블록을 찾는 것이 훨씬 쉽다. 개발자에게 태그 안에 채워질 데이터의 유형을 제안한다. 종류 1. header 소개 및 탐색에 도움을 주는 컨텐츠. 제목, 로고, 검색폼, 작성자 이름 등의 요소도 포함될 수 있다. 2. footer 일반적으로 작성자, 저작권 정보, 관련문서 등의 내용을 담는다. 작성자 정보는 태그로 감싼 후 footer에 배치한..
CSS - position의 속성과 특징 * position 속성값 static relative absolute fixed sticky * 사용 방법 .page{ position: relative; top: 30px; right: 50px; } 1. static 기본값. 요소를 일반적인 문서흐름에 따라 [ 왼쪽 -> 오른쪽 , 위 -> 아래 ] 로 배치한다. top, right, bottom, left, z-index 속성이 아무런 영향을 주지 않는다. 2. relative 기준 : 원래 있던 위치 요소를 일반적인 문서 흐름에 따라 배치한다. 자기 자신을 기준으로 top, right, bottom, left 속성으로 주어진 픽셀만큼 오프셋을 적용한다. 오프셋은 다른 요소에 영향을 주지 않는다. (레이아웃에서 요소가 차지하는 공간이 static ..
CSS - Cascading HTML Element는 여러 스타일의 영향을 받을 수 있으며 우선순위에 의해 적용되는 스타일이 정해지는 것을 캐스케이딩이라고 한다. CSS의 정식 명칭이 Cascading Style Sheets인 만큼, 캐스케이딩의 원리가 중요하게 적용된다. - cascading : 계단식의 작은 폭포이다. 캐스케이딩은 다음의 두 원칙을 통해 어떤 요소에 스타일을 적용할지 결정한다. 스타일 우선순위 스타일 상속 1. 스타일 우선순위 스타일요소는 각각 우선순위를 가지고 있으며 우선순위가 가장 높은 스타일이 적용된다. 다음의 세가지 요소를 통해 우선순위가 결정된다. 중요도 명시도 코드 순서 ① 중요도 중요도는 스타일이 선언된 위치에 따라서 우선순위를 매기는 것. [ 작성자 스타일 시트 > 사용자 스타일 시트 > 사용자 도..
react - 예외 처리 방법 1. UI 렌더링 과정의 예외처리 * Error Boundary(React 16에서 도입) - 해당 컴포넌트를 최상위 컴포넌트로 만들면, 생명주기에서 발생하는 모든 예외 처리 가능. - 자식 컴포넌트에서 에러 발생시 호출되므로, 메세지 렌더링에 실패하면 위쪽으로 전파됨. - getDerivedStateFromError : rener 과정에서 호출됨. Error 를 UI에 보여주는 용도로 사용. - componentDidCatch : 자식컴포넌트에서 오류 발생시, 가장 마지막에 호출. 에러 정보를 기록하는 등 side effect 용도로 사용. - ErrorBoundary컴포넌트로 처리되지 않은 에러 발생시, 모든 컴포넌트 언마운트. 따라서 폴백 UI를 보여줘야함. - 생명주기 메서드가 아닌 곳에서 발생한..

티스토리툴바