티스토리

기록

검색하기

블로그 홈

기록

bgprg.tistory.com/m

시간이 얼마나 있는지는 상관 없어. 어떻게 쓰느냐가 중요하지.

구독자: 0

방명록 방문하기

주요 글 목록

안내 옛날에 혼자서 리액트 개인프로젝트 진행할 때 썼었던 문서들이 대부분이어서 (경력1~2년차 때) 글을 너무 신뢰하지는 마세요!이제 사내 컨플루언스에만 글을 써서 이 블로그는 잘 업데이트 하지 않을 것 같아요모든 개발자분들 화이팅 공감수 0 댓글수 0 2025. 2. 24.
framer-motion 아래에서 위로 올라오는, 위에서 아래로 내려오는 모달 팝업 import { motion, AnimatePresence } from "framer-motion"; ... 생략 ... {/* 🔽 아래에서 위로 올라오는 팝업 */} {isBottomOpen && ( 아래에서 위로 올라오는 팝업 setIsBottomOpen(false)}>닫기 )} {/* 🔼 위에서 아래로 내려오는 팝업 */} {isTopOpen && ( 위에서 아래로 내려오는 팝업 setIsTopOpen(fals.. 공감수 0 댓글수 0 2025. 2. 24.
AWS EC2 인스턴스 접속 & ssh 설정파일로 쉽게 접속하기 mac os에서 기본으로 제공하는 터미널을 이용하여 인스턴스에 접속하는 방법먼저, pem 파일이 필요하다. aws 내에서 인스턴스를 생성하면서 발급한 pem를 잘 보관해두자. 먼저 pem 키 파일의 권한을 변경한다.chmod 600 filename.pem 접속 명령어ssh -i [파일명] [호스트네임]@[Public IPv4 또는 도메인]ssh -i filename.pem ec2-user@50.50.50.50 끝. 그런데...이렇게 매번 접속하면 번거로울 수 있다. ssh 설정파일을 생성하는 법을 알아보자. SSH 설정파일 만들기1. 키페어 pem 파일을 ~/.ssh/로 복사cp test.pem ~/.ssh/ 2. pem 권한 설정chmod 600 ~/.ssh/test.pem 3. config파일 생성.. 공감수 0 댓글수 0 2024. 7. 31.
[Spring] JSP페이지 직접호출 스프링부트 프로젝트를 할 때, thymeleaf를 이용하려고 html로 웹 개발을 진행중이었다. 그런데 갑자기 SSO 연동을 해야한다며 소스코드를 툭 던져주셨는데 웬걸 JSP .. html로 개발해 놓은걸 jsp로 모두 수정하는게 불가능해서.. jsp 호출로 열심히 삽질을 했는데.. 뭐 이런식으로 설정하면 html 과 jsp를 둘다 쓸수있다고 했다. 컨트롤러에서 그냥 "index"로 리턴을 하면 jsp 쪽 웹페이지를 호출했고 "thymeleaf/index"로 리턴을 하면 html 쪽 웹페이지로 호출이 됐다. 오호 이렇게 하면되는구나! 하는 찰나에... url이 반드시 .jsp 로 호출이 되어야한다는 규칙이 있었는데 컨트롤러로 하다보니 .jsp 호출 관련해서 잘 진행이 되지 않더라... 충격적.. 그러니까.. 공감수 0 댓글수 0 2024. 2. 21.
[C++] 백준 1389 케빈 베이컨의 6단계 법칙 💟 오랜만에 DFS/BFS 공부를 열심히하고 풀어보았다. 풀고나니까 쉬운 난이도였다. 1. 먼저 n명의 사람 케빈 베이컨 수를 구해야 해서 go를 인원수 만큼 반복해서 돌린다. 2. 현재 나의 번호를 기준으로해서 n-1명이 각각 몇번만에 갈 수 있는지 체크해야함 따라서, go함수 내에서 n만큼 돌린다. 3. bfs 함수로 들어와서 케빈의 수를 구한다. 4. 케빈의 수를 구해야하는 사람(goal)이라면 k 에 현재 p값이 min이라면 집어넣기. 5. 아니라면 방문했음을 체크하고 bfs를 한번더 돌린다. bfs가 끝나면 방문 체크해제를 해야함. 6. 난 vector 로 result를 꾸렸다. 인덱스 오름차순으로 정렬 후 답을 출력한다. #include #include #include #include usin.. 공감수 0 댓글수 0 2023. 7. 7.
[C++] 백준 15828 라우터 백준 15828 C++ #include #include #include using namespace std; int n, t; int main() { cin >> n; queue q; while(1) { cin >> t; if(t == -1) break; if(t == 0) { q.pop(); continue; } if(q.size() == n) continue; q.push(t); } if(q.empty()) cout 공감수 0 댓글수 0 2023. 6. 23.
[C++] stack, queue, priority_queue 예제 알고리즘 문제풀때 스택과 큐 그리고 우선순위 큐는 기본적으로 쓸 줄 알아야 하므로.. 기본적인 예제를 저장해 놓는다. +겸사겸사 블로그 환기 이미 다 아는 개념이지만 priority_queue, queue, stack 순서대로 (보통 stack을 먼저 하지만. 개인적으로 priority_queue를 먼저 연습해본다고 순서가 이렇게 됐다.) #include #include #include #include using namespace std; int main() { int n; priority_queue pq; for (int i=0; i> n; pq.push(n); } cout 공감수 0 댓글수 0 2023. 6. 22.
[C++] sort 정렬 🟦 sort 배열 정렬 sort(arr, arr+N) +N 배열의 길이 만큼 오름차순 정렬한다. 예제 #include #include using namespace std; int main() { int arr[5] = { 3, 8, 1, 5, 4 }; sort(arr, arr+5); for (int i=0; i 공감수 0 댓글수 0 2023. 6. 22.
Express 미들웨어 응용예제 💗 Express Express는 자체적인 최소한의 기능을 갖춘 라우팅 및 미들웨어 웹 프레임워크이며, Express 애플리케이션은 기본적으로 일련의 미들웨어 함수 호출입니다. 💜 미들웨어 미들웨어 함수는 요청 오브젝트(req), 응답 오브젝트(res), 그리고 애플리케이션의 요청-응답 주기 중 그 다음의 미들웨어 함수에 대한 액세스 권한을 갖는 함수입니다. 그 다음의 미들웨어 함수는 일반적으로 next 라는 이름의 변수로 표시됩니다. 💚 미들웨어 함수 태스크 1️⃣ 모든 코드를 실행 2️⃣ 요청 및 응답 오브젝트에 대한 변경을 실행 3️⃣ 요청-응답 주기를 종료 4️⃣ 스택 내의 그 다음 미들웨어 함수를 호출 현재의 미들웨어 함수가 요청-응답 주기를 종료하지 않는 경우에는 next()를 호출하여 그 다.. 공감수 0 댓글수 0 2023. 6. 1.
[Git] Git 명령어 정리 🟨 들어가기전에 약 1년간 git desktop이라는 UI의 도움을 받고 살았는데 (그냥 버튼만 딸깍딸깍!) 개발(일)을 계속하다보니 git desktop을 켰다껐다하는것도 너무 귀찮고… visual code에서 터미널로 git 명령어를 치면서 처리하다보니 손에 익어버렸다. Desktop을 사용할 당시에 '저 명령어를 언제 다외워' 하면서 안썼는데.. 외울 것도 없다. 외워진다. 리눅스 기초 명령어 처럼말이다. 너무나도 간단한 Git 명령어를 메모해두려고 한다. 🟦 ADD, COMMIT, PUSH, PULL 의 개념 및 사용법 ◼ add 내가 작업한 코드를 커밋하기 전에 git에 올릴 것을 add 하는 작업이다. git add ./ 또는 git add * 위 명령어는 내가 작업한 모든 코드를 올리겠다는 .. 공감수 0 댓글수 0 2023. 5. 16.
[forever] forever 로그 파일 경로 및 월별로그 생성 🟨 로그를 월별로 관리하려고 한다. forever start --uid "drrf" --minUptime 3000 --spinSleepTime 3000 -l /home/ubuntu/.forever/drrfam-`date +%Y%m`.log -a index.js --minUptime : Minimum uptime (millis) for a script to not be considered “spinning” --spinSleepTime : Time to wait (millis) between launches of a spinning script. -l : LOGFILE Logs the forever output to LOGFILE --minUptime : 스크립트가 실행된다고 볼 수 없는 최소 가동 시간 .. 공감수 0 댓글수 0 2023. 4. 26.
우여곡절 끝에 상경 서울로온지 9일. 일주일동안 계속 청소만 하느라 공부도 운동도 게임도 아무것도 못했다. 청소하고 씻고 뻗어서 자고, 무한반복 … 혼자사는게 이렇게 힘들구나 그리고 이번집에서 지내게되면서 알게된건 1. 공동현관문이 있는 원룸빌라 or 오피스텔을 가자 2. 1층에 음식점/카페도 금지 3. 빌트인 가구 및 주방타일 색 확인 꼼꼼하게하기.. (주방 벽이 오렌지색인걸 왜못봤었지 엄청 촌스러) 4. 담배냄새.. (들어갔는데 냄새나면 무조건 걸러라.. 1. 이사람이 담배를 폈거나 2. 화장실 환풍구를 통해서 누군가가 담배핀다는소리) 폐암걸리기싫어서 숯도 샀구. 공기청정기도 샀다. 그리고 오늘은 공기청정기랑 마지막 가구인 파티션이 도착했다. 빨리 집가고싶다 와아아앙 오늘부터 갓생살래 헬스가자 공감수 0 댓글수 0 2023. 4. 25.
카카오맵 가지고 놀기 💚 뭐하고 있어? 인구 밀집 시뮬레이션을 개발을 위해 오늘도 끄적끄적 연구중 카카오맵을 쓸지는 모르겠지만 일단 만져보고 있다. 이것은 인구 밀집을 이런식으로 나타내라 안내해주는 글이 아님을 밝힙니당.. (혼자 삽질 기록용임!) 🧀 카카오맵을 사용하기 앞서 카카오맵을 사용하기 위해서는 개발자 등록(Kakao developers)을 해야한다. 이건 개발 공부하는 사람이라면 다 알거라 생각하니 패스 (절대 귀찮아서가 아니다.) 나는 nodejs + express 로 진행했고, 앱키는 JavaScript키를 이용했다. 각자 개인 페이지에서 필요한 키를 확인해서 쓰면 된다. 카카오 맵 개발을 위한 상세 내용은 이미 가이드 페이지에 상세하게 나오므로 사용방법은 여기에서 알아보자 (나는 지금 카카오맵 연동과 사용법을.. 공감수 0 댓글수 0 2023. 4. 24.
[ubuntu] hostname 변경, user에 root 권한 부여하기 🔹 hostname 확인 $ hostname 🔹 hostname 변경 hostnamectl set-hostname nunu 🔹 user에 root 권한 부여하기 가끔씩 권한이없어서 npm install이나 파일 변경에 있어서 권한 거절이 일어날때가 있었다. sudo를 붙여서 명령어를 실행하기에 너무 불편했다. 🤔 오늘은 user에 root 권한을 그냥 부여해보는 방법을 알아보겠다. (권한때문에 수정 저장이 안될 수 있으므로, 맨 앞에 sudo를 미리 붙이는 것도 좋겠다.) $ sudo vi /etc/sudoers vi 사용법은 다들 아시겠지만 혹시나 작성하겠다. 방향키를 이용해 특정위치로 커서를 옮기고 a를 누르면 편집모드가 활성화된다. 이제 거기에서 엔터를 치고 공감수 0 댓글수 0 2023. 4. 21.
밸런스 페이지 만들기 현황 😶 개발환경 클라이언트 : React , React-Redux 서버 : nodejs (Riot API) 😊 개발기간 약 3주정도 걸렸었다. Redux 에 2-3일정도 허덕이고, CSS변경 이슈 등ㅠㅠ.. (드래그하는게 생각보다 불편했음) 서버구축 2일? (라이엇 API 당겨오는것 밖에 없음) 😆 결과물 1. Riot API 를 통해 유저 티어와 모스트 챔피언 7개 불러오기 2. Redux 를 이용해서 페이지를 닫더라도 내가 작성했었던 데이터를 기억함 😑 후기 React 개발 연습으로 개발진행했다. 무슨 주제로 할까하다가 내가 자주하는 롤 내전 밸런스 맞추기를 만들어보기로 결심. 뭔가 뿌듯하긴 하지만 디자인이 마음에 들지 않는다.. 난 웹 디자이너가 아니니까 어쩔수없긴하지만 원래 구글클라우드에 다른분들도 .. 공감수 0 댓글수 0 2023. 4. 21.
[ubuntu] git 설치, git clone, aws에서 서버 실행 - 개인 기록용 💚 깃허브 설치 (nodejs, npm이 설치되어 있어야함. 이전 글 참고하기) $ npm install git 🤎 Git Clone git clone https://github.com/*****/onionbot.git username과 password 입력하면 git clone완료! ※ 단, 아이디와 아이디 인증 토큰이 필요하다. (이제 git은 비밀번호를 사용하지 않음..!) (앗!! token이 만료됐다 이왕 이렇게 된거 발급까지 다시해보자.) 💙 git token 발행하기 (비밀번호를 대신할...) 1. Setting으로 이동 2. Setting 가장 하단에 Developer settings로 이동 3. Personal access tokens - Tokens (classic) 이동 4. Gene.. 공감수 0 댓글수 0 2023. 4. 21.
[ubuntu] npm 설치 🛵 NPM 설치 ubuntu 에서 npm을 사용하려면 nodejs를 설치하면 된다. 먼저 node를 설치하기전에 CURL를 먼저 설치한다. $ sudo apt-get install -y curl 그리고 apt를 이용하여 nodejs를 설치한다 $ sudo apt update # nodejs 다운로드 # [Y/n]에서 y 입력후 엔터하면된다. $ sudo apt install nodejs # 설치확인 & 버전확인 $ nodejs -v # npm 다운로드 $ sudo apt install npm # 설치확인 & 버전확인 $ npm -v 공감수 0 댓글수 0 2023. 4. 21.
[AWS EC2] No supported authentication methods available (server sent: publickey) No supported authentication methods available (server sent: publickey) 해결방법 💎 에러 상황 AWS EC2 에 디스코드 봇을 실행시켜 놓기위해 신규계정 생성 후 인스턴스를 생성하고, pem도 발급받고 (puttygen으로 ppk로 만들고...) 이제 로그인을 하려고 하는데.. 자꾸 No supported authentication methods available (server sent: publickey) 에러가 뜬다. 항상 아무 생각없이 ec2-user로 로그인했었는데! 왜 안돼!🤣 ✨ 해결 방법 알고보니 인스턴스 별 기본 사용자 이름 (username) 이 다르다. 나는 ubuntu로 생성했기 때문에 username을 ubuntu로 입력해야한다.. 공감수 0 댓글수 0 2023. 4. 21.
[React Hooks] useEffect 팁 🍦 useEffect useEffect는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있드록 하는 Hook이다. 덕분에 클래스형 컴포넌트에서 사용할 수 있었던 생명주기 메소드를 함수형 컴포넌트에서도 사용할 수 있게됐다. 🍰 기본형태 import { useEffect } from "react"; - import 필수! useEffect(function, deps) - function : 수행하고자 하는 작업 - deps : 배열 형태로 검사하고자하는 특정 값 또는 빈 배열을 넣는다. 1️⃣ 컴포넌트가 mount 됐을 때 useEffect(() => { console.log('마운트 될 때만 실행된다.'); }, []); deps에 [] 빈 배열을 넣게되면 마운트 될 때, 즉 실행 후 한번만 .. 공감수 0 댓글수 0 2023. 3. 30.
[React] input Value 다루기 / (+페이지이동 없이 탭 변경 ) 토이 프로젝트를 진행하면서 회원가입 페이지를 만들고 있습니다 회원가입 정보가 모두 입력되면, 각 input box에 입력된 정보들을 서버로 보내야합니다. 리액트에서 input box의 value를 어떤식으로 다루면 편리할까 알아봅시다..💛 🥞 input Value 다루기 (state를 이용하여..) 먼저 저는 회원가입에 필요한 정보를 많이 두진 않았습니다! 미니 프로젝트니까 간단하게 아이디, 비밀번호, 비밀번호확인, 이름, 전화번호, 이메일, 주소 정도로 7개의 state가 필요합니다. 그래서 저는 이렇게 작성했습니다. 그리고 input값이 변경되면 위의 state 값이 자동으로 바뀌게 (저장되도록) 할겁니다. 각 input 필드에 name, onChange, value를 입력해줍니다. 그리고 handl.. 공감수 0 댓글수 0 2023. 3. 23.
[axios] urlencoded 데이터 보내는 법 axios를 사용하여 urlencoded 데이터 보내는 법을 알아보겠습니다. POST 테스트 할때는 너무 편한 postman을 이용해서 axios에서 urlencoded 데이터를 어떻게 보낼지 몰랐습니다. postman에선 그냥 이렇게 입력해주면 끝이죠... 먼저 qs, (querystring) 모듈이 필요합니다. 설치해줍니다. npm install qs 그 다음에 리액트 프로젝트 상단에 import해줍니다. (또는 require) import qs from 'qs' import axios from 'axios' axios에서 urlencoded 데이터 보내는 법 qs에서 제공하는 stringify를 사용하고, 헤더에 content-type을 추가해주면 됩니다. 예시코드) axios({ method: '.. 공감수 0 댓글수 0 2023. 3. 23.
[무중단실행/무한실행] 리눅스 실행 명령어 무중단실행과 프로세스가 죽어도 자동으로 재실행시켜주는 명령어를 찾다가 pm2와 forever를 알게되었다. 이것을 메모해보려고 한다. AWS에 구글 클라우드에 프로젝트를 구축하려고 한다. 예를 들어서 node index.js / node app.js / npm start 등으로 단순하게 실행한다면 원격 화면창 (AWS/구글클라우드)을 닫는 순간 서버도 같이 닫히게 된다. 내가 연결을 종료하더라도 프로세스가 계속 실행되도록 하려면 pm2를 써야한다. pm2 사용법은간단하다 🟪 pm2 실행 명령어 pm2 start index.js 👉 node명령어로 실행할 때, 즉 node index.js pm2 start npm -- start 👉 npm 명령어로 실행할 때, 즉 npm start 🟪 pm2 실행중인 프로.. 공감수 0 댓글수 0 2023. 2. 23.
[깃허브/github] 기존 프로젝트를 새로 생성한 Repository에 올리기 기존에 visual code에서 react 연습하던 프로젝트를 AWS에 처음 올릴때 그냥 zip으로 압축해서 넘겼는데, 내용 수정하고 업데이트하는게 너무 번거롭다.. 그래서 깃허브에 올려서 관리하려고 한다. 1. 깃허브 새 레포지토리 만들기 꼭 Public을 선택해주길 바란다! Private하고싶다면 추후에 Private으로 수정하면 됨. 2. Visual Code 프로젝트 터미널에서 git remote add origin https://github.com/내아이디/새로만들프로젝트이름 git push -u origin main 깃에 연결 완료! 3. 깃에 파일 올리기 - add : 수정된 파일 모두 추가 git add ./ - commit 커밋 git commit -m "all" -m "all"은 커밋할.. 공감수 0 댓글수 0 2023. 2. 21.
CORS 에러 팁 리액트로 매칭 페이지를 개발하면서 닉네임을 입력하면 티어와 모스트 챔피언을 가져오는 것을 만들려고 했다. 1. RIOT API 이용 2. axios 라이브러리 이용 그런데 리액트는 클라이언트 페이지여서 CORS 오류가 생겼다. 라이엇에서는 클라이언트에서의 호출을 막고있다고 했다. 서버에서 호출하라고 한다. 서버를 만들어서 서버에서 라이엇 API를 호출 하도록 하자. nodejs를 통해서 API를 구축했고, 클라이언트에서는 내가 구축한 API를 통해 정보를 가져올 수 있었다. 1. 서버 API 호출하면 JSON으로 반환하도록 했고 2. 클라이언트에서는 API를 이런식으로 가져왔다. 롤 API 페이지 https://developer.riotgames.com/ 공감수 0 댓글수 0 2023. 2. 16.
[html/css] 스크롤바 꾸미기 (스크롤바 커스텀) 너무 쉬운데 항상 까먹는 스크롤바 꾸미기 예제 화면 개인적으로 나는 스크롤바 색깔있는 걸 좋아해서 하늘+분홍의 조합으로 꾸며보았다. 소스코드 Custom Scrollbar Example Note: The -webkit-scrollbar is not supported in Firefox or in Edge, prior version 79. Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum Lore.. 공감수 0 댓글수 0 2023. 2. 16.
[리액트] 개인 프로젝트.. 리액트를 이용해서 만들었고, react-draggable / react-modal 라이브러리 도움을 받았다. 롤하면서 내전 밸런스를 맞출때 쓰려고 만들어보았다. 그런데 사실 점수는 내 맘대로 실버1~4 ==> 각 9 8 7 6 점 골드 1~4 ==> 각 13 12 11 10점 이런식으로 배분해서,,, 정확할진 모르겠다 코드는 추후에 정리해서 공유하겠다. 3일차 진행사항 공감수 0 댓글수 0 2023. 2. 14.
[리액트] select box (option이 많을때 ,list map으로 옵션 불러오기) select box를 만들때, 옵션이 많으면 내부에 이 많아지면서 길어지면 보기가 싫다.. 그래서 해결방안 import React, { useState, useRef } from "react"; const options = [ { value: "iron", name: "아이언"}, { value: "silver", name: "실버"}, { value: "gold", name: "골드"}, { value: "platinum", name: "플레티넘"}, { value: "diamond", name: "다이아몬드"}, { value: "master", name: "마스터"}, { value: "grandmaster", name: "그랜드마스터"}, { value: "challenger", name: "챌린.. 공감수 0 댓글수 0 2023. 2. 14.
Redux 예제 (Redux를 알아보자) 리액트를 독학하기 시작하면서 Redux도 알게돼서 스스로 이해하고 알아본 내용을 작성해봅니다. 공홈을 통해서 공부했고, 영어 번역을 제대로 하지 않아서 제가 알고있는 내용이 정확하지 않을 수 있으므로 공홈을 꼭 참고하시길 바랍니다. Counter 예제를 만들어보자 먼저 완성된 화면부터 보자면, 위와 같고, +를 누르면 1 증가, -를 누르면 1 감소 Add Amount : 왼쪽박스에 적힌 수 만큼 증가 Add Async : 왼쪽박스에 적힌 수 만큼 Async 증가 (사용자가 지정한 Async, 여기서는 setTimeout 1000.) Redux는 새로고침을 해도 변한 값이 유지가 된다는 장점이 있다. Application Content /src index.js : app 시작점 App.js : React.. 공감수 0 댓글수 0 2023. 2. 14.
Spring Initailizr 사이트 https://start.spring.io/ 위와 같은 사이트인데, GENERATE를 누르면 선택한, 입력한 값들로 이루어진 spring 프로젝트가 생성된다. 나는 Gradle 프로젝트를 만들꺼고 java 언어쓰고, jdk 11버전 쓸꺼다~! => ( jdk 17을 써야한다..!!!) 그리고 오른쪽엔 의존성 주입~ 선택! 스프링부트 개발할꺼니까,, 두가지를 골랐다 끝. (버전은 모르겠다 그냥 기본적으로 선택된 3.0.2를 씀) 공감수 0 댓글수 0 2023. 2. 9.
[react-router-dom] export 'Switch' (imported as 'Switch') was not found in 'react-router-dom' 에러 export 'Switch' (imported as 'Switch') was not found in 'react-router-dom' react-router-dom이 버전 6로 업그레이드되면서, Switch를 더이상 지원하지 않는다. Switch -> routes로, component -> element로 변경됨. 기존 위와 같이 쓰던 것을 아래와 같이 쓰면 된다. 공감수 0 댓글수 0 2023. 2. 8.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.