HOME
[Git] 변경한 상태 임시 저장 후 브랜치 이동 방법 — Git Stash
[Git] 변경한 상태 임시 저장 후 브랜치 이동 방법 — Git Stash
2024.04.25특정 브랜치에서 파일을 수정하고 git checkout 명령어로 잠시 다른 브랜치로 이동하려고 하면 아래 메시지가 나온다.Please commit your changes or stash them before you switch branches. 변경한 내용을 commit하거나 stash 해야만 다른 브랜치로 이동할 수 있다는 메시지다. 아직 완료하지 않은 작업을 commit하기 껄끄러울 때 stash 명령어를 활용할 수 있다. 마무리하지 않은 작업을 stash 스택에 임시 저장한 후 다른 브랜치로 이동할 수 있다. Stash 명령어stash했던 브랜치가 아니어도(다른 브랜치에서도) stash에 저장한 내용을 복원(적용)할 수 있다 stash 스택에 저장# 현재 상태 임시 저장 ⭐️git stash sta..
[JS] console.log 콘솔 로그 더 잘 사용하기
[JS] console.log 콘솔 로그 더 잘 사용하기
2024.04.25console.log는 브라우저에서 제공하는 console API중 하나. console 객체에는 log 외에도 다양한 메소드들이 존재한다. log 레벨 종류정말 필요한 정보가 아니면 log와 info는 제품 배포 단계에선 출력되지 않도록 한다. 배포할 때 log나 info는 출력하지 않도록 하거나 네트워크 요청이 발생하지 않도록 하는 등의 설정을 할 수 있기 때문에 중요도 레벨에 맞는 console 메소드를 사용하는 것이 중요하다. console.logconst dog = { type: "🐶", name: "츄츄", owner: { name: "John" } };console.log("logging", dog); 가장 자주 사용하는 console 메소드로 개발 도중 필요한 데이터를 출력하고 싶을 때 ..
[React] 리액트에서 SVG 사용법
[React] 리액트에서 SVG 사용법
2024.04.25💡 SVG는 색상, 크기 등을 동적으로 조절할 수 있는 장점이 있다 방법 1 — src 속성에 svg 경로 입력 ; 💡 파일 경로 지정 참고 내용❶ JSX 엘리먼트 속성의 루트 기준은 `public` 폴더만약 `` 태그의 `src` 속성(JSX 태그 속성)에 `src` 폴더에 있는 이미지 파일을 지정하려면…파일 최상단에서 불러온 이미지 파일을 `src` 속성에 할당하거나,`src` 속성 안에서 `require()` 사용 ex) ``❷ CSS 파일 루트 폴더 기준은 `src` 폴더❸ 파일 최상단 `import` 구문에선 `src` 폴더만 처리 가능(`public` 폴더에 있는 파일은 불가) 태그 src 속성에 svg 파일 경로를 적어준다. 경로를 적을 때 public 폴더에 있는 파일은 public..
[JS] 자바스크립트 배열 중복 요소 제거 방법 모음
[JS] 자바스크립트 배열 중복 요소 제거 방법 모음
2024.04.25방법 1 — Set 이용 ⭐️Set을 이용해 중복 요소를 제거하는 방식의 성능이 가장 좋다 Set은 유니크한 값만 저장할 수 있기 때문에 new Set() 인자에 들어온 배열의 중복 요소는 자동으로 제거된다. Array.from은 ➊유사 배열 객체나 ➋반복 가능한 객체를 얕게 복사해 새로운 배열을 반환한다. 전개문법을 사용해도 결과는 동일.const arr = ["A", "B", "A", "D", "B", "F"];const deDuplicated = [...new Set(arr)];// const deDuplicated = Array.from(new Set(arr))console.log(deDuplicated); // [ 'A', 'B', 'D', 'F' ] Set, Map 관련 더 자세한 내용은 Ma..
[HTML/CSS] CSS 팝업 애니메이션 만들기
[HTML/CSS] CSS 팝업 애니메이션 만들기
2024.04.25요소 숨김 방식 차이점 렌더 트리리플로우리페인트이벤트 핸들러DOM 트리`display: none`제외발생발생비활성유지`visibility: hidden`유지발생 안함발생비활성유지`opacity: 0`유지발생 안함발생활성유지display: none렌더 트리 : 제외리플로우 : 발생 (렌더트리 상태가 변경됐으므로)리페인트 : 발생 (리플로우 발생시 리페인트도 함께 발생)이벤트 핸들러 : 비활성DOM 트리 : 유지 (자바스크립트로 조작 가능)visibility: hidden렌더 트리 : 유지 (화면에선 안보이지만 공간은 차지함)리플로우 : 발생 안함 (레이아웃에 영향을 미치지 않으므로)리페인트 : 발생 (요소가 보이지 않도록 변경했으므로)이벤트 핸들러 : 비활성DOM 트리 : 유지 (자바스크립트로 조작 가능)..
[HTML/CSS] 아이폰 사파리에서 입력창 자동확대 방지
[HTML/CSS] 아이폰 사파리에서 입력창 자동확대 방지
2024.04.25, , 태그를 모바일에서 터치하면(포커스하면) 화면이 자동으로 확대될 때가 있다. 입력창의 폰트 크기가 16px보다 작으면 자동으로 확대되기 때문에 발생하는 현상. 대표적으로 아래 3가지 해결 방법이 있다. 확대 금지 — 모바일용으로 적절하게 디자인된 경우폰트 크기를 16px 이상으로 변경 — 추천폰트 크기를 16px로 변경하고 `transform: scale()`을 이용해 원하는 만큼 줄이는 방법 — 복잡함 방법1 — 확대 금지html 파일 메타 태그의 content 속성에 최대 확대 배율을 1배수만 허용하고, 단말기 확대 기능을 사용하지 못하도록 명시하면 방법. 작은 글씨를 잘 보지 못하는 사람들은 확대할 수 없기 때문에 접근성이 떨어지는 단점이 있다. initial-scale 초기 화면 배율max..
[HTML/CSS] 줄바꿈(개행문자) 표시 / 넘치는 텍스트 생략 기호 표시 방법
[HTML/CSS] 줄바꿈(개행문자) 표시 / 넘치는 텍스트 생략 기호 표시 방법
2024.04.25💡 미립자 팁 : textarea 태그에 readonly 속성을 추가하면 읽기만 가능하고 쓰기는 불가능하다. 로그인하지 않은 유저는 댓글을 쓰지 못하게할 때 유용하다. `` 줄바꿈 적용하기 textarea 태그에 엔터키(개행문자)를 눌러 줄바꿈을 적용해도, 입력한 value를 p 태그 등에 출력해보면 줄바꿈이 하나도 적용되지 않는다. 가장 간단한 해결 방법은 텍스트를 표시할 태그의 스타일에 white-space 속성을 추가하는 것. white-space는 공백 문자를 어떻게 처리할지 결정하는 속성이다. white-space: normal — 기본값 여러 공백 : X (1개로 표시)改行문자 \n 표현 : XWrap : O white-space: nowrap — normal과 동일하나 wrap이 안됨 여러..
[JS] 자바스크립트 경과 시간 표시 / UTC / ISO 8601
[JS] 자바스크립트 경과 시간 표시 / UTC / ISO 8601
2024.04.25Date 객체 톺아보기유닉스 타임스탬프자바스크립트에서 Date 객체는 유닉스 타임스탬프를 사용한다. SNS을 보면 “1분 전 게시", “방금 전 게시" 같은 경과일로 포스팅 날짜를 표시하는 것을 자주볼 수 있다. 경과일은 Date 객체의 getTime() 메서드를 이용해 변환한 밀리초와 현재 시간의 밀리초 차이를 계산하는 방법으로 구현할 수 있다. getTime() 메서드는 1970년 1월 1일 0시 0 분 0초(UTC)부터 현재까지의 시간을 밀리초 단위로 환산한 값을 반환한다. 이를 유닉스 시간(유닉스 타임스탬프)으로 부른다. 1000밀리초(millisecond)는 1초(second)다.const date = new Date();console.log(date); // Tue Jun 15 2021 15:..
[JS] 자바스크립트 랜덤 숫자, 데이터 생성 예시
[JS] 자바스크립트 랜덤 숫자, 데이터 생성 예시
2024.04.25랜덤 게시글(혹은 댓글)을 구현한다고 가정, 기본적으로 여러개의 유저 이름, 메시지 텍스트가 필요하다. 유저 이름이나 랜덤 텍스트는 영문 Lorem처럼 자동 생성해주는 사이트를 활용하면 된다. 10개 정도 더미 데이터를 생성한 후 자바스크립트의 Math.random을 활용하면 유저별로 다른 메시지 텍스트를 생성할 수 있다. 필요한 데이터 리스트유저 이름 : 한글 랜덤 이름 생성기 이용const randomUser = ['예세희', '허선숙', '제갈지훈', '심성태', ...]메시지 텍스트 : 한글 Lorem 사이트인 간세네 혹은 한글입숨 이용const randomMessage = ['광야에서 무엇을 보내는...', '...', '...', ...]생성일 : new Date() 이용 랜덤 숫자 생성 함수..
[JS] 캔버스 Canvas 도형 확대 축소 후 원점 조정하기
[JS] 캔버스 Canvas 도형 확대 축소 후 원점 조정하기
2024.04.24도형 사이즈 조정 메서드ctx.scale(x, y) : 도형 크기 확대/축소. 캔버스에서 1 단위는 1픽셀. scale(2, 2)는 하나의 단위를 2픽셀로 확대(좌표 사이의 간격 증가) ctx.translate(x, y) : 캔버스의 원점 이동. 기본값은 왼쪽 좌상단 (0, 0) ctx.rotate(angle) : 도형을 라디안(angle) 단위 만큼 시계 방향으로 회전. 항상 캔버스 원점이 회전의 중심 ctx.transform(scaleX, skewX, skewY, scaleY, translateX, translateY)scale(), rotate(), translate() 일괄 적용하는 메서드이전 변형 결과 값에 이어서 수행초기 상태에서 transform(1.2, 0, 0, 1.2, -30, -30)..
[React] Canvas API 기본 내용 정리 / 리액트에서 사용법
[React] Canvas API 기본 내용 정리 / 리액트에서 사용법
2024.04.24캔버스 기본 세팅 for React💡 캔버스는 HTML 요소 중 하나로 스크립트 언어로 그림을 그리는데 사용한다. canvas를 사용하기 위해선 캔버스 context에 DOM으로 접근해야 한다. React에선 useRef()를 사용해서 Ref 객체를 만들고 접근하고 싶은 DOM의 ref 값으로 설정해주면 된다. 그럼 Ref 객체의 .current 값은 해당 DOM을 가리킨다. 캔버스 엘리먼트 생성 및 useRef 설정import React, { useRef, useEffect, useState } from 'react';import styled from 'styled-components';const Canvas = () => { const canvasRef = useRef(null); // 생략 ..
[TS] 타입스크립트 - 타입 추론 / 단언 / 가드
[TS] 타입스크립트 - 타입 추론 / 단언 / 가드
2024.04.24타입 추론기본💡 타입추론이란 타입스크립트가 코드를 해석해 나가는 동작을 의미한다. 아래처럼 x 에 대한 타입을 따로 지정하지 않더라도 변수 x에 숫자 3을 할당했으므로 number 타입으로 간주한다. 이처럼 변수를 선언하거나 초기화할 때 타입이 추론된다. 변수, 속성, 함수 인자의 기본 값, 함수 반환 값 등을 설정할 때도 타입 추론이 일어난다.let x = 3; // 변수를 선언하고 할당함으로서 x는 number 타입이라는 추론이 일어났다. 아래 코드에서 DetailedDropdown 인터페이스는 extends 키워드를 이용했으므로 Dropdown 인터페이스의 속성도 가진다. DetailedDropdown의 타입은 DetailedDropdown에 있는 로 넘어간 후, 다시 Dropdown 인터페..