기록하기

안녕하세요 제가 요즘 토이프로젝트를 한가지 해보고 싶어서 간단하게 뭘 할 수 있을까.. 생각하다가 친구에게 OpenWeather OpenAPI를 사용해보라는 추천을 받아서 한번 사용해봤습니다! 이번 글은 짧게 제가 어떻게 사용했는지 보여드릴 수 있는 글이 될 것 같네용.. Open Weather 공식홈페이지 ⇩ https://openweathermap.org/ Сurrent weather and forecast - OpenWeatherMap Access current weather data for any location on Earth including over 200,000 cities! The data is frequently updated based on the global and local wea..

안녕하세요 오늘은 조금 새로운 주제를 가지고 왔습니다. 회사에서 인턴으로 생활하면서 백엔드에 접하게 되었고 카프카라는 플랫폼에 접하게 되어 한번 기록을 해보려고 합니다. 우선 카프카의 개념부터 알아보도록 하죠. Apache Kafka란? 실시간으로 기록 스트림을 게시, 구독, 저장 그리고 처리할 수 있는 분산형 데이터 스트리밍 플랫폼입니다. 데이터 스트림을 여러 곳에서 처리하고 여러 사용자에게 그 데이터들을 전달하도록 설계 되어 있습니다. 데이터를 생성하는 애플리케이션과 데이터를 소비하는 애플리케이션의 중간에서 중재자 역할을 하고 데이터를 처리하고 전송 제어하고 관리하는 역할을 합니다. Kafka의 구성 프로듀서 (Producer) 메세지를 생성해서 카프카 클러스터에 메세지를 전송하는 역할을 가지고 있는..

이전 포스트에서 비밀번호 재설정 페이지를 구현한 방법에 대하여 작성 했었다. 이전 포스트에서 마지막 쯤 사용자가 비밀번호를 다 입력한 것 같으면 에러 메세지가 나타날 수 있게 하면 좋겠다고 했는데 오늘 그 방법을 알게 되어 어떻게 작동 하는지 기록해보려고 한다. 이전 포스트 ⬇️ https://developerdaeun.tistory.com/68 [React] 비밀번호 재설정 페이지 이번에 새로 도전해본 웹 개발.. 비밀번호 재설정 페이지 구현하는 역할을 받았는데 이전에 앱 개발할 때보다 코드가 훨씬 깔끔해진 것 같아 기록해보려고 한다. 우선 'useState' 훅을 사용해서 새 developerdaeun.tistory.com 우선 사용한건 debounce이다. Debouncing 이란 인련의 연속적인 ..

이번에 새로 도전해본 웹 개발.. 비밀번호 재설정 페이지 구현하는 역할을 받았는데 이전에 앱 개발할 때보다 코드가 훨씬 깔끔해진 것 같아 기록해보려고 한다. 우선 'useState' 훅을 사용해서 새로운 비밀번호를 관리하는 상태 변수를 선언하고, 상태 변수를 업데이트하는 함수를 생성했다. (비밀번호 재확인도 동일) const [newPassword, setNewPassword] = useState(''); const [confirmPassword, setConfirmPassword] = useState(''); 'newPassword'와 'confirmPassword'는 비밀번호를 저장하는 상태 변수이고, 'setNewPassword'와 'setConfirmPassword'는 이 상태를 업데이트하는 함수..

React Query 기능과 목적 데이터를 가져오고 관리하는데에 사용된다. Rest API, GraphQL 등 기능 쿼리 : 데이터를 가져오기 위한 쿼리 함수 정의, 실행 뮤테이션 : 데이터를 변경하는 뮤테이션 처리 인피니트 스크롤링 및 페이지네이션 지원 자동 캐싱 및 데이터 유효성 검사를 통한 최적화 에러 처리 및 재시도 메커니즘 내장 SWR 기능과 목적 주요 데이터 가져오기와 캐싱에 중점을 둔다. Rest API, GraphQL 또 다른 http 요청 기능 데이터 가져오기 및 캐싱 : http 요청을 통해 가져오고 자동으로 캐싱 데이터 구식 여부 확인 : 자동으로 업데이트함 기존 API fetching과 차이점 자동 캐싱 및 데이터 관리 React Query / SWR : 내부적으로 데이터 캐싱 및 ..

Basic RCE L05 이 프로그램의 등록키는 무엇인가 다운로드한 프로그램을 실행 시키면 이러한 창이 뜬다. 이 프로그램의 등록키를 찾아야 하는 것 같다! 1. 다음 어떻게 해야할지 몰라서 서치를 해보니 UPX로 패킹 되어 있다는 사실을 알게 됐다. 그래서 UPX를 Window 버전에 맞게 다운로드를 한 뒤 언패킹을 하기 위해 프로그램과 UPX 프로그램의 위치를 동일하게 만들어 준 뒤 명령어 : upx -d 05.exe 명령어를 입력해서 프로그램을 언패킹하는데 성공했다! 2. 올리디버거라는 프로그램을 다운로드 한 후 05.exe 파일을 실행 시켰다. 그리고 무한 스크롤을 내려.. 성공 구문을 찾았다. 그런데 자세히 보면 성공 구문 위에 Registered User와 아스키코드로 등록키가 적혀 있는 것을..

CesiumJS 정의 CesiumJS는 3D 지리 정보 시각화를 위한 오픈 소스 JavaScript 라이브러리이다. 이 라이브러리는 웹 브라우저에서 3D 지리 정보 및 지리 공간 데이터를 시각적으로 표현하고 상호 작용할 수 있는 강력한 도구를 제공한다. CesiumJS를 사용해서 지구 표면 위의 다양한 데이터를 보다 직곽적으로 이해하고 탐색할 수 있다. CesiumJS를 사용하면 가상 지구 환경을 생성하거나 실제 지리 데이터를 시각화하고 분석하는 웹 기반 애플리케이션을 개발할 수 있다. CesiumJS 주요 특징과 기능 3D 지구 시각화 : CesiumJS는 지구를 3D로 랜더링하고, 지형, 지오메트리, 이미지 레이어 및 다른 공간 데이터를 시각적으로 표현할 수 있다. 다양한 데이터 형식 지원 : Ces..

명령형 프로그래밍이란? 입력 데이터를 얻고 가공한 다음, 결과를 출력하는 형태, 주로 for문을 사용해서 구현한다. 명령형 프로그래밍 예시 let sum = 0 for(let val=1; val T, initValue: T) => { let result: T = initValue for(let i=0; i result + value, 0) console.log(result) '범용적이고 재사용 가능'이라는 관점에서 다른 예시 1부터 100까지 숫자 중 홀수만 더하는 문제 명령형 프로그래밍 예시 let oddSum = 0 for(let val=1; val boolean): T[] => { let result: T[] = [] for(let index: number=0; index n % 2 != 0 let..

문제 1 원하는 이미지를 불러오고 이미지 창으로 출력 후 q 키를 누르면 창이 꺼질 수 있도록 코드를 작성하면 되는 문제이다. 작성한 코드 import cv2 # 이미지 파일 경로 image_path = '/Users/parkdaeun/Desktop/openCVImage.jpeg' # 이미지를 읽어옵니다. image = cv2.imread(image_path) # 이미지를 화면에 표시합니다. cv2.imshow('Image', image) # 키 이벤트를 대기합니다. 'q' 키를 누르면 종료됩니다. while True: key = cv2.waitKey(1) # 1밀리초 동안 대기 if key == ord('q'): # 'q' 키를 누르면 종료 break # 창을 닫습니다. cv2.destroyAllWin..

다이나믹 프로그래밍 다이나믹 프로그래밍이란? 다이나믹 프로그래밍은 컴퓨터 과학과 알고리즘 설계 분야에서 사용되는 중요한 문제 해결 기법 중 하나입니다. 이 기법은 주로 최적화 문제나 최단 경로 문제와 같은 문제들을 해결하는데 사용됩니다. 다이나믹 프로그래밍의 핵심은 중복 계산을 피하고 계산 결과를 저장하여 재활용하는 것입니다. 다이나믹 프로그래밍 단계 1. 문제를 작은 부분 문제로 나눕니다. 2. 각 부분 문제를 해결하기 위한 연산을 정의합니다. 3. 작은 부분 문제들을 해결하면서 결과를 저장합니다. 4. 저장된 결과를 활용하여 더 큰 부분 문제를 해결합니다. 5. 최종적으로 전체 문제의 해결 방법을 얻습니다. 다이나믹 프로그래밍의 두 가지 유형 상향식 다이나믹 프로그래밍 : 작은 부분 문제부터 시작하여..