본문 바로가기

전체 글

 (81)
타입스크립트 컴포넌트 스타일링 className에 line-clamp-{} 괄호안에 동적으로 숫자를 변경하고 싶다. 1. makeClassName함수는 className에서 line-clamp를 백팃을 이용해 동적으로 생성한다 export const makeClassName = (setting: string, _className?: string, numberOfLines?: number) => [setting, numberOfLines ? `line-clamp-${numberOfLines}` : '', _className].join(' ') 2. 리액트에서 구조 분해 할당을 사용하여 _className과 numberOfLines 값을 props로 전달, 이 값들은 makeClassName 함수에 전달되어 최종 클래스 이름을 생성하는 ..
daisyui css 송금 버튼 만들기 송금버튼을 클릭하면 송금글자가 사라지고 loading-dot 아이콘이 뜬다. 이외에도 로딩 아이콘이 다양하다. https://daisyui.com/components/loading/Tailwind Loading Component — Tailwind CSS Components ( version 4 update is here )Tailwind Loading examples: Loading shows an animation to indicate that something is loading. componentdaisyui.com useToggle 커스텀 훅을 넣어 조건부랜더링으로 토글버튼의 상태값을 다르게 구현하였다. 1. true일때 로딩 아이콘이 뜬다. 2. false일때 송금버튼이 뜬다. import {..
리액트 타입스크립트 File Drag & Drop 1. FileReader에서 readAsDataURL() 메서드는 File 타입 객체를 읽어서 Base64로 인코딩된 문자열 형태의 데이터를 제공한다. File 객체는 바이너리 데이터를 Blob으로 저장하며, 이 데이터를 readAsDataURL() 메서드를 통해 문자열로 변환하여 이미지 등의 데이터를 처리할 수 있게 해준다. // Blob 타입의 파일을 읽어 Base64로 인코딩된 문자열을 반환하는 함수export const imageFileReaderP = (file: Blob) => new Promise((resolve, reject) => { // FileReader 객체 생성 const fileReader = new FileReader() // onload는 파일을 성공..
DOM 조작 ref 부모컴포넌트에 있는 ref를 자식컴포넌트로 전달하고 싶으면 forwardRef를 사용, 이때 자식컴포넌트에 있는 함수를 forwardRef 훅으로 감싼뒤 두번째 인자 props에 ref를 넣어준다. 그러면 부모컴포넌트에 있는 ref가 자식컴포넌트 속성으로 연결된다.  1. 부모 컴포넌트에서 시간이 만료되면 자식컴포넌트에 ref를 전달해서 모달창을 띄우게 하고싶다. import { useState, useRef } from "react";import ResultModal from "./ResultModal";export default function TimerChallenge({ title, targetTime }) { // 타이머 시작 상태를 관리하는 상태 변수 (true: 타이머 시작됨, false:..
uniq 명령어 for FILE in $ROOT/*.txt; do BASENAME=$(basename "$FILE") uniq $FILE > ${OUT_DIR}/${BASENAME}.out uniq -c $FILE > ${OUT_DIR}/${BASENAME}.c.out done uniq 명령어를 사용하여 three.txt 파일의 중복된 줄을 제거하고, 반복되는 문자의 개수의 결과를 두 개의 다른 파일 형식으로 저장하는 스크립트 basename은 파일의 경로에서 디렉터리 경로를 제거한 파일 이름만을 추출. 예를 들어, three.txt가 된다. 에코명령어로 출력을하여 출력 리다이렉션을 사용해 three.txt로 저장 uniq를 사용해 중복된 줄을 제거한다 -c 옵션을 사용해 반복되는 문자의 개수를 계산한다.
러스트 뮤텍스와 세마포어 1. 뮤텍스는 단일 자원을 보호하는데 사용 이때 단점은 다른 스레드 자원해제 될 때까지 무한히 대기하는 상황이 발생해 DeadLock이 발생한다. (정보처리기사 실기 운영체제 파트 공부를 하면서 나온내용이다!!!) use std::thread; use std::sync::Mutex; // counter를 전역변수로 지정 static counter: Mutex = Mutex::new(0); // counter에 접근할 때 뮤텍스로 잠금해서 상호베제를 한다. fn inc_counter() { let mut num = counter.lock().unwrap(); *num = *num +1; } fn main(){ // 스레드를 저장할 벡터 생성 let mut thread_vec = vec![]; for _ i..
Bufreader read_line()으로 파일 한줄씩 읽고 바이트 반환, Cursor 로 Read 구현 1. 데이터를 효율적으로 읽을 때 버퍼링을 사용한다. 이 때 Bufreader의 메서드 read_line()을 쓰면 한줄씩 데이터를 읽어오고 바이트를 반환해준다. (주석 설명 참고)use std::io::prelude::*; use std::io::BufReader; use std::fs::File; fn main() -> std::io::Result{ let s = File::open("tests/inputs/test.txt")?; // 버퍼 인스턴스 생성 let mut reader = BufReader::new(s); // String 타입 인스턴스 생성 let mut line = String::new(); // read_line은 한줄을 읽고 바이트를 반환한다. let len = reader.rea..
러스트로 리눅스 wc명령어 구현 wc명령어는 줄,단어, 바이트 수를 알려주는 기본 명령어이다 1. 파생패턴을 이용해 명령줄 인수를 파싱을 한다. // 파생패턴 #[derive(Debug,Parser)] #[command(author,version,about)] struct Args{ #[arg(value_name="FILE", default_value="-")] // 연속된 문자열은 연속된 배열인 벡터에 담긴다 files:Vec, // 줄수 #[arg(short,long)] lines:bool, // 단어 수 #[arg(short,long)] words:bool, // 바이트 수 #[arg(short('c'),long)] bytes:bool, // 문자 수 #[arg(short('m'),long, conflicts_with("bytes..

티스토리툴바