React HooksReact에서 제공하는 주요 Hooks는 함수형 컴포넌트에서 상태 관리와 생명주기 관련 기능을 사용할 수 있도록 도와줌useState컴포넌트에서 상태(state)를 관리하기 위한 Hookstate: 현재 상태 값setState: 상태를 업데이트하는 함수initialValue: 상태의 초기값// 사용법const [state, setState] = useState(initialValue);// Exampleconst [count, setCount] = useState(0);const increment = () => setCount(count + 1); useEffect컴포넌트의 부수 효과(side effects)를 처리하기 위한 Hook데이터 가져오기, 구독 설정, DOM 업데이트 등de..

Tailwind CSS유틸리티 퍼스트(Utility-First) 접근 방식을 기반으로 한 CSS 프레임워크HTML 태그에 직접 적용할 수 있는 미리 정의된 유틸리티 클래스를 제공하여, 별도의 복잡한 CSS 코드를 작성하지 않고도 빠르고 효율적으로 스타일링할 수 있도록 도움전통적인 CSS 작성 방식과 달리, 클래스 기반의 스타일링을 통해 빠르게 UI를 구현할 수 있음설치# tailwindcss 설치npm install -D tailwindcss# tailwind.config.js 파일 생성npx tailwindcss init 레이아웃 (Layout)Container : 반응형 컨테이너를 설정mx-auto : 수평 중앙 정렬flex : Flexbox 컨테이너 생성grid : 그리드 레이아웃 설정space-x..

회사에서 react를 이용해서 project를 진행하게 되었다 ..이 전에 react를 써본 경험이 거의 없어서,, (Vue.js 만 조금 써봤다) 이번 기회에 react에 대해 간단히 정리해 보려고 한다. React 란?React는 컴포넌트 기반의 JavaScript 라이브러리로, UI를 효율적으로 관리할 수 있도록 도와줌# Node.js 설치# install react.jsnpm install -g create-react-app# create projectcreate-react-app my-app# runcd my-app npm start Component재사용 가능한 UI 조각으로, 독립적으로 동작하며 다른 컴포넌트와 결합하여 복잡한 UI를 구성함ex) 버튼이나 폼 같은 UI 요소를 컴포넌트로 만들..

MOM(Message Oriented Middleware, 메세지 지향 미들웨어)응용 소프트웨어 간의 비동기적 데이터 통신을 위한 소프트웨어비동기 방식으로 메세지를 전달함 ex) Queue, Broadcast, Multicast 등메세지를 통해 여러 분산되어 있는 시스템간의 Connector 역할로 결합성을 낮춤메세지를 발행하는 Publisher (Producer), 소비하는 Subscribe (Consumer)로 구성되어 있음메세지를 전달하는 과정에서 보관, 라우팅, 변환할 수 있다는 장점이 있음보관 : 한 은행 시스템에서 고객의 송금 요청이 발생했지만, 수신 측 시스템이 일시적으로 다운된 경우에도 메시지 지향 미들웨어가 해당 요청을 큐에 저장해 둠. 수신 시스템이 복구되면 메시지가 자동으로 처리되어 ..

team-mate 활동이란?팀메이트란 "하나의 팀으로 연결되다" 라는 의미로,선도기업 아카데미 과정 수료생 멘토와의 온·오프라인 멘토링 활동이다!나는 K-디지털 트레이닝 과정인 SSAFY와 SKT FLY AI 과정에 참여했었고,언젠가 취업을 하고 나서 취준생을 돕고 싶다는 마음이 있었어서, 멘토로 지원해서 활동했다 ! 선정 과정어느 날 멘토를 모집한다는 메일이 왔고,간단한 지원서 -> 면접 후 멘토로 선정되었다.면접은 약 15분 정도 진행되었던 것 같고, 다대다 면접이라 질문은 2개 정도 간단하게 하셨다. 내가 진행했던 멘토링우선 멘토/멘티를 선정이 완료되면대한상공회의소 측에서 7~8(멘토/멘티 3~4인씩)인으로 구성된 팀을 빌딩해준다.물론 멘티당 한명의 멘토도 배정해준다!! 나 같은 경우에는 팀 멘토링..

git commit --amend브랜치의 최신 커밋을 수정하는 가장 간단한 방법기능을 만들고 커밋을 했는데, 빠진 내용이 있거나 잘못 올린 경우 수정을 위해 사용만약 워킹 디렉토리에 변경 사항이 없다면 단순히 메시지만 수정할 수도 있음커밋 ID가 변경됨 (즉, 새로운 커밋이 생성되므로 기존의 커밋은 사라지고 새로운 커밋이 그 자리를 대신함)  # ex) 파일을 까먹은 경우$ git add forgotten_file$ git commit --amend# 커밋 메시지만 수정하고 싶을 때 사용하는 옵션# (오타나 불필요한 정보가 포함된 커밋 메시지를 수정할 때 유용함)$ git commit --amend --no-edit

Chrome을 최신 버전으로 업데이트하면서, 자동화 테스트 중 ChromeDriver 설치에 문제가 생겼다 ..구글링을 하던 중 ChromeDriver를 설치하지 않고, webdriver_manager를 이용하는 방식을 알게 되어서관련된 개념을 정리할 겸 글을 작성해 보려고 한다.기존에는 Chrome 버전에 맞는 ChromeDriver를 찾아서 설치해주는 방식을 이용했는데,최신 Chrome 버전에 맞는 ChromeDriver 버전이 chromedriver.storage에 없어서 다운 받지 못하는 문제였다 .. selenium웹사이트 테스트를 위한 도구로 브라우저 동작을 자동화할 수 있음프로그래밍으로 브라우저 동작을 제어해서 마치 사람이 이용하는 것 같이 웹페이지를 요청하고 응답을 받아올 수 있음 Chro..

1. String parameter GIT_BRANCH 추가 2. Branches to build > Branch Specifier에 ${GIT_BRANCH} 넣어주기

잘 트리거 되고 있던 Jenkins 에서 다음과 같은 문제가 발생했다 ,,ERROR: Error cloning remote repo 'origin'...error=0, Failed to exec spawn helper: pid: 2293555, exit value: 1 문제 원인Jenkins 에이전트 프로세스를 중지하고 다시 시작하지 않고 Java 버전을 업데이트한 것computer running that Java process has updated the Java version without stopping and restarting the Jenkins agent process.해결 방법Jenkins Agent 재시작

mDNS / DNS-SDmDNS(Multicast DNS)와 DNS-SD(DNS Service Discovery) 관련 개발을 진행하게 되어 관련 내용을 간단하게 정리해보려 한다! mDNS(Multicast DNS)DNS-SD(DNS Service Discovery) 로컬 네트워크의 다른 기기를 검색하기 위해 논의되고, 개발되어 널리 사용 중(두 기술은 서로 의존성을 가지고 있지는 않음)로컬 네트워크에 참여한 호스트를 찾기위해서 멀티캐스팅 하는 것이 핵심서비스 타입을 기준으로 서비스를 찾는 방식  mDNS를 이용하면 로컬 네트워크에 참여한 호스트를 자동으로 찾을 수는 있지만 어떤 종류의 서비스인지는 확인할 수 없다. 하지만, DNS-SD를 이용하면 서비스 타입(service type)을 설정하는 것으로 ..

프로그램 생성 과정소스코드는 다음 4가지 과정을 거쳐 실행가능한 프로그램이 됩니다.전처리 : 헤더파일 혹은 매크로를 치환하여 .i 파일로 저장 (#include, #define 등)컴파일 : 저수준의 언어인 어셈블리어로 컴파일 후 .s 파일로 저장 (ex. c++ -> 어셈블리어)어셈블 : 저수준 언어인 어셈블리어를 링커가 읽을 수 있는 목적파일로 변환하여 .o 파일로 저장 ( 기계어로 최종 번역 )링킹 : 목적파일들을 하나로 묶어 실행파일(a.out) 생성위 4가지 동작을 Compiler Coleection(컴파일러 모음집)이라고 부르며,GCC(GNU Compiler Collection) 과 LLVM(Low Level Virtual Machine)이 잘 알려진 모음집입니다. 컴파일 과정그럼 이제 컴파일..

#include #include #include int main(){ std::string response = ""; std::ifstream file("/tmp/response.json"); std::stringstream buffer; buffer

git stash 아직 마무리하지 않은 작업을 스택에 잠시 저장할 수 있도록 하는 명령어 아직 마무리하지 않은 작업은 commit 하지 않고 나중에 다시 꺼내와 마무리할 수 있음 # stash 스택에 임시 작업 저장 $ git stash # 혹은 $ git stash save # stash 목록 확인 $ git stash list # stash 적용 ( = 하던 작업 가져오기) $ git stash apply $ git stash apply [apply 이름] $ git stash apply --index # staged 상태까지 저장 # 스택에 남아 있는 stash 제거 $ git stash drop # drop + apply $ git stash pop # stash 적용한 것 되돌리기 git sta..

TOTP(Time Based One Time Password) 공유 비밀키와 시간정보를 사용하여 일회성 비밀번호를 생성

# 현재 디렉토리 내의 모든 파일, 디렉토리의 이름중 A가 포함된 파일, 디렉토리의 이름의 A를 B로 변경 $ find ./ -name "*A*" | sed -e 'p' -e "s/A/B/g" |xargs -n 2 mv # 현재 디렉토리 내의 모든 파일들의 내용중 A를 B로 변경 $ find ./ -type f | xargs sed -i 's/A/B/g'