본문 바로가기

전체 글

 (139)
[React] Axios 를 이용한 Api 호출 Axios를 이용한 프론트엔드 서버와 백엔드서버 사이의 통신Introduction서버와 데이터를 주고받기 위해 Api통신을 사용하는 방법에 대해 알아봅니다. fetch라는 기본적인 api호출 방식이 있지만, Axios 라이브러리를 통한 api 호출을 하려고 합니다.그렇다면, 왜 Axios를 사용할까??json 형식의 데이터 처리서버 응답을 자동으로 json으로 변환해줍니다.fetch를 사용하면 .json() 메서드를 호출해야 하고, 이 과정에서 에러 처리가 필요합니다.프로미스 기반의 비동기 작업 처리intercepter를 통한 요청 전, 후 관여요청과 응답을 가로채어 처리할 수 있는 인터셉터 기능이 있습니다.이를 통해 공통된 작업처리, 요청과 응답의 전,후처리를 할 수 있습니다.이에 비해, fetch에서..
실시간 협업 그림판 만들기 02 - 그림판 구현하기 02. 그림판 만들기(2) 그림판 구현 03 - 그림판 만들기2이미지 넣기이미지 파일을 넣을 수 있는 input 을 만들어줍니다.img input 에는 비디오도 넣을 수 있기 때문에, 파일 타입을 설정해줍니다.```html```이젠 자바스크립트에서 사진요소를 불러오고,```javascriptconst fileInput = document.getElementById("file");```불러온 파일을 다음 순서로 가공합니다.1. 발생된 이벤트의 그림데이터를 가져옵니다.2. 그림데이터의 url을 만듭니다.3. 새로운 이미지 변수를 만들어 url을 할당해줍니다.4. 이미지 요소의 값을 null로 만들어줍니다.```javascriptfunction onFileChange(event) { const file = event.target...
실시간 협업 그림판 만들기 02 - 그림판 구현하기 02. 그림판 만들기 그림판 구현 02 - 그림판 만들기선 긋기마우스 클릭 이벤트로 선 긋기 마우스의 클릭 이벤트를 감지해서 클릭한 점들을 선으로 연결해줍니다. onClick function 내부에서 event의 console.log를 확인해보면 클릭의 위치가 offsetX, offsetY로 표현되어 데이터가 보내진다는 것을 알 수 있습니다. 완성 코드 ctx.lineWidth = 2; ctx.moveTo(0, 0); function onClick (event) { ctx.lineTo(event.offsetX, event.offsetY); ctx.stroke(); } canvas.addEventListener( "click", onClick )마우스 무브 이벤트로 선 긋기 마우스가 움직일 때 마다..
실시간 협업 그림판 만들기 01 - 그림판 구현하기 01. CANVAS 이해하기 그림판 구현 01 - CANVAS 라이브러리 기본 알아보기CANVAS Library참고자료 01 - CANVAS 라이브러리 공식문서참고자료 02 - 무료강의캔버스 라이브러리 공식문서와 무료강의의 내용을 통해 그림판 그현을 공부해보았습니다.Live Server, Live Preview자바스크립트의 실행화면 확인을 위한 익스텐션을 설치해주세요!html 파일에서 마우스 우클릭 -> Open with live Server를 이용하면 새로고침 없이 코드가 변할때마다 실시간으로 바뀌는 화면을 볼 수 있습니다.기본 구현우선 index.html, style.css, app.js 파일을 준비합니다.index.html!를 입력하면이렇게 나오는데 이때, !를 클릭하거나 enter 혹은 tab키를 눌러서 자동완성시킬 수 있습..
02. 01 파이썬 기초 01 - 파이썬 기본 구조 표현식과 값표현식값, 변수, 연산자 등을 조합하여 계산되고 결과를 내는 코드 구조문장실행 가능한 동작을 기술하는 코드 (일반적으로 여러 표현식을 포합한다.)평가표현식이나 문장을 실행하여 그 결과를 계산하고 값을 결정하는 과정타입과 연산자타입 : 데이터의 종류 및 처리방식 등을 정의해놓음데이터 타입Numeric Typesint (정수), float (실수), complex (복소수)Sequence Typeslist, tuple, rangeText Sequence Typestr (문자열)Set TypessetMapping Typesdict기타None, Boolean, Functions연산자기호연산자-음수 부호+덧셈-뺄셈*곱셈/나눗셈//정수 나눗셈 (몫)%나머지**지수 (거듭제곱)연산자의 우선순위우선순위연산자..
Baekjoon 7662. 이중 우선순위 큐 / Python https://www.acmicpc.net/problem/7662문제 설명연산들을 수행하고 최종적으로 큐에 남아있는 데이터 중 최대, 최솟값을 출력한다.비어있다면 EMPTY를 출력한다.코드 설명최대 힙, 최소 힙을 모두 사용한다.find 배열을 사용해 해당 인덱스의 숫자의 유효성을 체크한다.시간복잡도삽입 : O(log n) (최악)삭제 : O(log n) (최악)전체 : O(n log n)import sysinput = sys.stdin.readlinefrom heapq import heappop, heappush# 테스트 케이스 수 입력T = int(input())for _ in range(T): # 연산의 개수 입력 n = int(input()) # 최대 힙과 최소 힙 q..
Baekjoon 14500. 테트로미노 / Python https://www.acmicpc.net/problem/14500문제 설명n * m 크기의 종이에 테트로미노 하나를 놓아 테트로미노가 놓인 칸들의 수들의 합을 최대로 만들어야 한다.회전, 대칭이 가능하다.코드 설명 DFS 함수 구현:dfs 함수는 재귀적으로 테트로미노의 각 칸을 탐색한다.현재까지의 합 sums와 탐색한 칸의 수 cnt를 추적한다.가지치기를 통해 가능성이 없는 경로는 미리 차단한다.상하좌우로 이동하면서 테트로미노의 모양을 형성한다.ㅗ 모양의 테트로미노를 만들기 위해 두 번째 칸에서 다시 시작하는 경우도 고려한다.최대 합 계산:모든 칸을 시작점으로 하여 DFS를 수행하고, 최댓값을 갱신한다.최종적으로 최대 합을 출력한다.시간복잡도 : O(N * M * 256)  import sysinput..
Baekjoon 2503. 숫자 야구 / Python, Java https://www.acmicpc.net/problem/2503알고리즘 설명문제 설명숫자 야구 게임세 자리 숫자를 맞춥니다.말한 세 자리의 숫자 중에 위치와 숫자가 모두 일치하는 경우엔 스트라이크,숫자는 정답숫자 안에 있으나, 위치가 다르다면 볼이 됩니다.코드 설명102 부터 987까지 모든 가능한 세자리 숫자를 생성한다.스트라이크와 볼의 입력에 따라서 숫자 후보를 제거하는 방식1. 자바코드import java.io.*;import java.util.*;import java.text.*;public class Main { public static ArrayList arr = new ArrayList(); public static ArrayList noAns = new ArrayList(); ..
Baekjoon 11729. 하노이 탑 이동 순서 / Python https://www.acmicpc.net/problem/11729알고리즘 설명문제 설명이 문제는 유명한 하노이의 탑(Tower of Hanoi) 문제입니다.세 개의 장대와 여러 개의 원판을 사용하여 특정 규칙을 따라 첫 번째 장대에 있는 원판을 세 번째 장대로 옮기는 문제입니다.각 원판은 크기가 다르고, 큰 원판은 작은 원판 아래에만 놓일 수 있습니다.한 번에 하나의 원판만 이동할 수 있으며, 더 큰 원판은 작은 원판 위에 올려 놓을 수 없습니다.하노이 탑의 이동 횟수는 2 ^ n - 1 로 잘 알려져 있습니다.이 문제는 그 이동 횟수와 이동 순서를 구하는 문제입니다.풀이를 3번 했는데,앞선 두번의 풀이를 하고나면 좋은 방법이 떠올라서 한번씩 더 풀었습니다.코드 설명 1from copy import d..
01. 03 파이썬 IDE 설치하기 02 / VSCode for macOS https://developer-traxer.tistory.com/42 01. 01 파이썬이란????파이썬이란??파이썬은 인터프리터 프로그래밍 언어이다.인터프리터 언어는 컴파일러 언어와 달리 컴파일 과정 없이 바로 실행할 수 있다는 특징이 있다.직관적이고 쉬운 문법과 다양하고 풍부developer-traxer.tistory.com 위의 글을 읽고 파이썬을 설치하고 실행해봅시다.파이썬을 설치했다면 코드 편집을 도와주는 VSCode를 깔아봅니다.VSCode를 쓰는 이유windows, linux, mac을 모두 지원기존 개발 도구들 보다 가볍고 빠르다높은 점유율Extension을 통해 다양한 기능을 설치할 수 있는 무한한 확장성무료Visual Studio Code 설치하기macOS 운영체제에서 Visual S..

티스토리툴바