전체글 보기

[tip] README에 gif 첨부할 때 사용하면 좋은 유용한 툴/사이트 모음 - 영상 자르기, gif 변환, gif 압축

README에 내가 만든 프로젝트 시연 영상을 올리고 싶은데 영상 촬영부터 편집, gif 변환, gif 용량 압축까지 하려니 막막해서 이것저것 시행착오를 겪은 결과를 공유하려고 한다. 영상 촬영부터 gif 올리는 과정까지 하나의 루틴으로 만들어봤다. 나는 고퀄 녹화 필요 없고 그냥 윈도우 기본 녹화를 쓸거다!하는 사람은 2번부터 보면 된다. 1. 화면 녹화 (OBS) 윈도우 기본 녹화를 하고 난 뒤에 원하는 부분만 확대해서 자르면 화질이 떨어져서 깨져보인다. OBS는 원하는 부분을 애초에 자르거나 확대한 상태에서 녹화하기 때문에 그럴 염려가 없다. 다운은 여기서. Open Broadcaster Software | OBS 영상 녹화와 실시간 방송을 할 수 있는 무료 및 공개 소프트웨어입니다. 윈도우, 맥 ..

[CSS] 상하반전, 좌우반전, 크기조절 - scale, scaleX, scaleY 속성

scale은 보통 크기 조절을 할 때 쓰는 속성이라고 알고 있을 것이다. 그런데 scale로도 상하좌우 반전을 할 수 있다. 음수 값을 주면 된다. 상하반전 - scaleY transform: scaleY(-1); 좌우반전 - scaleX transform: scaleX(-1); scale로 한번에 모두 설정 * 반전도 시키면서 크기 조절을 하고 싶으면 값을 크거나 작게 조절 하면 됨 상하좌우 모두 반전 transform: scale(-1); // 또는 transform: scale(-1, -1); 좌우만 반전시키고 싶을 때 transform: scale(-1, 1); 상하만 반전시키고 싶을 때 transform: scale(1, -1); 좌우로 2배로 늘리면서 높이는 0.5배로 줄이는 동시에 상하반전 ..

[CSS] a 태그 padding, margin 제거하기 (React router dom의 Link 태그에도 해당)

a 태그를 다른 태그의 내부에 집어넣으면 위 아래에 미묘하게 padding이 생긴다. 또 a 태그를 inline 혹은 inline-block으로 만들었을 때 좌우로 margin이 생겨서, 좌우로 딱 붙이고 싶어도 붙지않는 경우가 생긴다. 이럴 때는 a 태그를 감싼 부모 태그에 font-size: 0을 준다. React에서 react-router-dom의 태그를 사용하고 있다면 Link 태그의 부모에도 마찬가지로 font-size: 0을 주면 된다.

[React] emotion 설치 및 typescript에서 사용하기 (pragma 제거방법)

react typescript 프로젝트 생성 및 emotion 설치 npx create-react-app [만들 프로젝트 경로] --template typescript npm install @emotion/react React가 v17 이후에 emotion을 사용하려면 다음과 같은 pragma를 앞에 입력해줘야 한다. /** @jsxImportSource @emotion/react */ import { css } from "@emotion/react"; 제거하는 방법은 바벨 설정을 건드리는 것인데 CRA로 만든 프로젝트에서는 eject(숨겨진 웹팩 설정 파일들을 보이게 하는 것)을 하면 되돌릴 수 없기 때문에 eject 하지 않고도 설정을 건드릴 수 있는 craco라는 패키지의 도움을 받을 것이다. pr..

[CI/CD] Docker 이미지 build -> 컨테이너 생성 -> run하는 방법

이미지 build 명령어 docker build -t [이미지명] [dockerfile 경로] 이미지 명 없이 build하면 무작위의 UUID로 이름이 붙여진다. 그래서 다른 명령어를 입력할 때 복사 붙여넣기를 해야 하는 불편함이 있으므로 이름을 붙여주자. docker file 경로는 빌드한 Dockerfile이 위치한 폴더를 절대/상대 경로로 적어주면 된다. 예시 docker build -t my-auth . 경로가 점(.) 인 이유는 docker 파일이 있는 디렉토리 안에 들어와 위의 명령문을 입력했기 때문이다. 만약 빌드하려고 하는 docker 파일이 현재 위치와 다른 곳에 있다면 절대/상대경로를 입력하면 된다. 컨테이너 생성 명령어 docker run --name [컨테이너명] -p [로컬포트]:..

[Project] React Login 프로젝트로부터 배운 점 회고

프로젝트 소개 완성된 코드 보러가기 https://github.com/bluepebble25/react-login 최근 styled-component와 Typescript, TDD를 연습하고자 프로젝트를 하나 해보기로 했다. 프론트엔드의 중요 개념들을 연습하기에는 로그인 제대로 만들어보기만한게 없는 것 같아서 로그인을 구현해보려고 했다. 그런데 통신과 인증을 연습하기 위해서는 더미 데이터가 아니라 API를 하나 만드는 게 좋을 것 같았다. API를 만들자면 못 만들것도 없지만 인증과 예외처리를 구현하자니 머리가 아팠다. 배보다 배꼽이 더 큰 것 같던 차에, 마침 감사하게도 개발바닥의 leejaycoke님께서 배포하셨던 API (https://github.com/leejaycoke/pilot-react)를..

[CSS] left로 가운데 정렬하기

left 속성이란? left 속성은 position이 static이 아니라 relative, absolute, fixed일 때 사용할 수 있다. static일 때 사용하면 아무 일도 벌어지지 않으므로 꼭 position 속성과 함께 사용되어야 한다. left는 absolute, fixed일 때는 브라우저 내부의 칸으로부터 지정한 만큼 떨어질 수 있게 한다. .div1 { left: 50%; transform: translateX(-50%); } 좌상단의 꼭짓점을 가운데에 맞추고, 좌상단 꼭짓점을 기준으로 했기 때문에 오른쪽으로 약간 쏠린 몸체를 가운데로 옮기기 위해 엘레먼트의 반만큼 왼쪽으로 옮기기 위해 transform: translateX(-50%)을 준다.

[CSS] position과 transform 이용해 요소 가운데에 배치하기

{ position: absolute; // 혹은 fixed left: 50%; transform: translateX(-50%); } left로 가운데에 위치시킨다. 왼쪽 위의 꼭짓점을 기준으로 가운데에 위치하게 된 것이므로 몸체를 기준으로 가운데에 위치시키기 위해서 -50% (몸체의 반만큼 왼쪽으로)를 해준다.