본문 바로가기

Study/실무

 (34)
Docker 도커란? 도커는 애플리케이션을 신속하게 구축, 테스트 및 배포할 수 있는 소프트웨어 플랫폼이다. 소프트웨어를 컨테이너라는 표준화된 유닛으로 패키징하며, 컨테이너는 라이브러리, 시스템 도구, 코드 등 소프트웨어 실행에 필요한 모든 것이 포함되어 있다. 즉, 도커는 컨테이너 환경에서 독립적으로 애플리케이션을 실행할 수 있도록 컨테이너를 만들고 관리하는 것을 도와주는 도구이다. 도커를 통해 애플리케이션을 실행하면 독립적인 환경에서 일관된 결과를 보장한다. 도커의 핵심 개념은 이미지와 컨테이너다. 컨테이너 컨테이너는 격리된 공간에서 프로세스가 동작하는 기술이다. 기존의 가상화 방식인 OS 가상화가 아닌 프로세스를 격리하는 방식으로 동작한다. 단순히 프로세스를 격리하기 때문에 가볍고 빠르다. 또한 CPU나 메모리..
styled-components svg 스타일링하기 import ArrowIcon from '/assets/icons/header/downArrow.svg'; ... ... // styled-components의 확장 기능을 사용해서 svg 스타일링 const Arrow = styled(ArrowIcon)` path { stroke: blue; fill: blue; } &:hover { path { stroke: red; fill: red; } } `;
Clean Code 작성하기 “우리는 저자이다. 저자에게는 독자가 있다. 그리고 저자에게는 독자와 잘 소통해야할 책임이 있다.” ⌈Clean Code⌋의 저자, Robert C. Martin 클린코드란? 클린 코드란 코드를 읽는 사람들이 이해하기 쉽도록 작성된 코드라고 정의할 수 있습니다. => 유지 보수(코드 파악, 디버깅, 리뷰)의 시간을 단축할 수 있는 코드 가독성이 중요한 이유? 일반적으로 기존 코드를 변경하고자 할 때, 해석하는 시간과 수정하는 비율이 10:1이라고 합니다. 코드를 변경하는데 걸리는 전체 시간이 10시간이라고 하면, 코드를 분석하는 시간이 9시간 이상 걸린다는 말 입니다. 해석이 어려운 코드는 그만큼 분석하는 시간이 더 오래 걸리고 또한, 대부분의 결함은 기존 코드를 수정하는 동안에 발생한다고 합니다. 그러..
Jira 와 Github 연동하기 Jira Cloud와 연동할 Github OAuth 정보 생성 Jira Cloud와 Github 연동을 위해서는 OAuth 정보 연동이 필요합니다. Jira 와 Github 둘다 관리자 권한이 필요합니다. Github의 사용자 정보 메뉴 선택 Settings 메뉴 선택 3. 좌측 하단의 Developer settings - OAuth Apps 메뉴를 선택. 4. 우측 상단의 New OAuth App 선택. 5. 생성하고자 하는 OAuth 정보 입력 후 Register application 선택 OAuth 예시 - Application name : OAuth 이름 - Homepage URL : 연결할 Jira Cloud URL 정보 ex) https://aaa.atlassian.net - Authoriza..
CSS - boarder gradation 다음과 같은 Board gradation을 사용하게 되었는데, 좀처럼 되지 않아 구글링을 해봤다. //html //css .borderDiv { width: 100px; height: 100px; border: 3px solid; border-radius: 50px; border-image: linear-gradient( 180deg, #0485ff -32.14%, #7d5cf8 53.24%, #ec033f 150% ); border-image-slice: 1; } 다음과 같이 코드를 작성하였고 결과물은 아래와 같습니다. border-image로 gradient를 줬지만 border-radius가 먹지 않는다. 찾아보니 border-image와 border-radius는 두개가 혼용 될 수 없다고 합니다..
CSS aspect-ratio - 가로 세로비율 조정하기 aspect-ratio aspect-ratio(종횡비)는 요소의 크기를 비율대로 조정할 수 있게 합니다. 만약 요소의 너비를 300px로 지정하고, aspect-ratio: 3/1을 하면 높이는 100px이 됩니다. aspect-ratio는 div 뿐만 아니라 이미지, 테이블 등 모든 엘리먼트에 종횡비 적용이 가능하며, 앞에 하나만 지정했을 경우 높이는 1로 간주합니다. aspect-ratio: 1/2; aspect-ratio: 2; aspect-ratio: auto; aspect-ratio: auto 1 / 1; //요소가 고유한 종횡비를 가지는 경우 auto로 해당 종횡비를 따르며 그렇지 않은경우에는 원하는 비율로 지정합니다. 위와 같이 모든 브라우저에서 지원하는 css 속성입니다. See the P..
React-toastify 가이드 react-toastify 설치하기 npm i react-toastify App ToastContainer 넣고, 스타일 설정해주기. toast 부르는 함수 설정하기 함수 주요 설정 옵션 postion - 위치 지정 ex) position: "top-left", "top-right", "top-center", "bottom-left", "bottom-right", "bottom-center" autoClose - 꺼지는데 걸리는 시간 (ms) ex) autoClose : 1000 hideProgressBar - 진행시간 바 숨김 ex) hideProgressBar : true icon - 아이콘설정 또는 제거 ex) icon: '' closeOnClick - 클릭으로 토스트 제거 ex) closeOnCl..
React GlobalStyle Font 적용하기 제일 먼저 사용할 폰트를 다운받았습니다. 폰트 사용을 위해 index.css에 폰트를 등록해줍니다. 제일 중요한 점은 otf 파일은 format에 'opentype'을 지정해 줘야 합니다. 왜인지 format('otp')를 먹지를 않습니다. 글로벌스타일을 사용하기위해 atoms에 GlobalStyle을 만들어주고, App에 적용해줬습니다. 다음과 같이 적용이 잘 된것을 확인 할 수 있었습니다.

티스토리툴바