본문 바로가기

Study

 (114)
[React] Verification code & SMS code Input - 보안코드 인풋 만들기 1. 코드 길이를 정하여 직사각형을 만들어주고, 보안코드를 정중앙에 배치하기 위해 display flex를 사용하였습니다. import styled from "styled-components"; const CODE_LENGTH = 5; const App = () => { return ( {Array(CODE_LENGTH) .fill(0) .map((v, i) => { return {codes[i]}; })} ); }; const Container = styled.div` display: flex; flex-direction: column; align-items: center; margin: 200px 0; `; const Box = styled.div` display: flex; justify-conte..
[React] CopyToClipboard 구현하기 Copy-To-Clipboard 구현하기 개발을 하다 보면 특정 값을 복사해야 하는 경우가 있는데, 이러한 상황에서 자동으로 복사하는 버튼을 구현할 수 있습니다. 텍스트를 복사하는 방법에는 여러가지가 있지만 그중에서도 Navigator Web API 를 사용하면 복사하는 기능을 쉽게 구현할 수 있습니다. Navigator Navigator 인터페이스는 사용자에이전트의 상태와 신원 정보를 나타내며, 스크립트로 해당 정보를 질의할 때와 어플리케이션을 특정 활동에 등록할 때 사용합니다. Navigator 객체는 window.navigator 읽기 전용 속성으로 접근할 수 있습니다 - MDN navigator.clipboard.writeText(text) 장점 1. 간단한 코드로 복사 기능을 구현 할 수 있습..
JS - 문자열에서 숫자 추출하기 숫자를 문자열로 추출하기 '1J2A3V4A5S6C7R8I9P0T' 같은 문자 사이에서 숫자들을 하나의 숫자로 추출하는 방법입니다. 이럴 때는 정규식을 사용하여 추출하는 방법을 사용합니다. /[^0-9]/g 는 숫자가 아닌 문자들을 의미하며, /[^0-9]/g는 대괄호 안의 패턴을 문자열에서 모두 매칭하라는 뜻입니다. string.replace(regex, "")를 이용하여 regex에 해당하는 숫자가 아닌 모든 패턴을 ""으로 변환해줍니다. const string = "1J2A3V4A5S6C7R8I9P0T"; const regex = /[^0-9]/g; const result = string.replace(regex, ""); console.log(result); // 1234567890
overflow/underflow 1. 비트와 바이트 비트 컴퓨터는 모든 데이터를 0 또는 1만으로 표현합니다. 0 또는 1만 표현할 수 있는 하나의 메모리 조각을 비트(bit)라고 합니다. 바이트 1바이트는 8개의 비트로 구성돼 있습니다. 1비트마다 2가지 값을 표현할 수 있기 때문에 1바이트는 총 256(2^8) 개의 값을 표현할 수 있습니다. LSB(Least Significant Bit) - 최하위 비트 일단 LSB의 위치는 가장 값이 작은 비트인 2^0에 위치하고 있는 것을 알 수 있습니다. 이 LSB의 값을 이용하여 해당 데이터 형에 들어있는 실제 숫자가 짝수인지 홀수인지 손쉽게 알아낼 수 있습니다. MSB(Most Significant Bit) - 최상위 비트 MSB를 살펴보면 MSB 위치가 부호자리를 나타내고 있는 것을 알..
JS - 배열 순서 바꾸기 1. 배열의 마지막 요소를 맨 앞으로 이동하기 let fruits = ["grape", "orange", "peer", "apple"]; let last = fruits[fruits.length-1]; fruits.splice(fruits.length-1, 1); fruits.unshift(last) console.log( fruits ); // ['apple', 'grape', 'orange', 'peer'] 2. 요소 맞교환하기 let fruits = ["grape", "orange", "peer", "apple"]; let tmp = fruits[3]; fruits[3] = fruits[0]; fruits[0] = tmp; console.log(fruits) // ['apple', 'orange',..
[Next.js] globalsStyle, customApp next.js에서 globalsStyle을 적용하려면 appComponent를 custom해줘야 한다. 기본적으로 숨어져있는 app을 수정하려면 1. pages에 _app.js를 만들어야한다. 2. _app.js에서 App component를 생성하고, Component와 pageProps를 parameter로 받은 후 불러와준다. export default function App({ Component, pageProps }) { return ( ); } 3. 그 후 styles폴더안의 globals.css 를 불러온다. (module이 아닌 css는 커스텀app에서만 불러올 수 있음) import "../styles/globals.css"; export default function App({ Comp..
[Next.js] next.js css - module NavBar.js NavBar.module.css 처럼 모듈을 만들어서 import 해준다. 사용할 컴포넌트 안에서 style jsx를 열어주고 css를 적기만하면 끝난다. → import 하지 않아도되는 장점과 클래스네임을 일일히 기억할 필요가 없는 장점이 있음. module.css와 마찬가지로 다른 컴포넌트에서 같은 이름을 사용해도 겹치지 않는다. → 무작위로 추가적인 클래스네임이 생성되기때문 → 변수이름짓는데 자유로워지며 충돌을 피할 수 있는 장점이있다. .active { color: tomato; } .link { text-decoration: none; } import styles from "./NavBar.module.css"; Home About // 백틱으로 여러개의 스타일을 주는방법과 배..
Docker 도커란? 도커는 애플리케이션을 신속하게 구축, 테스트 및 배포할 수 있는 소프트웨어 플랫폼이다. 소프트웨어를 컨테이너라는 표준화된 유닛으로 패키징하며, 컨테이너는 라이브러리, 시스템 도구, 코드 등 소프트웨어 실행에 필요한 모든 것이 포함되어 있다. 즉, 도커는 컨테이너 환경에서 독립적으로 애플리케이션을 실행할 수 있도록 컨테이너를 만들고 관리하는 것을 도와주는 도구이다. 도커를 통해 애플리케이션을 실행하면 독립적인 환경에서 일관된 결과를 보장한다. 도커의 핵심 개념은 이미지와 컨테이너다. 컨테이너 컨테이너는 격리된 공간에서 프로세스가 동작하는 기술이다. 기존의 가상화 방식인 OS 가상화가 아닌 프로세스를 격리하는 방식으로 동작한다. 단순히 프로세스를 격리하기 때문에 가볍고 빠르다. 또한 CPU나 메모리..

티스토리툴바