abcdefghklpqrstuvwxyz

editor: vs code 1. Node.js, npm 설치 2. create-react-appcreate-react-app은 리액트 프로젝트를 생성할 때 필요한 웹팩, 바벨의 설치 및 설정 과정을 생략하고 간편하게 프로젝트 작업 환경을 구축해준다.터미널에서 원하는 디렉터리로 이동 후 명령어를 입력한다. npx create-react-app npx는 노드 패키지 실행을 도와주는 도구 그럼 바탕화면에 프로젝트 폴더가 생성됨 3. 프로젝트 기본 구조public: 정적 파일을 저장하는 곳. public 내부의 파일만 public/index.html에서 사용할 수 있다.src: 리액트 컴포넌트와 애플리케이션 로직이 들어있는 곳. Webpack은 여기 있는 파일만 보기 때문에 이 폴더 외에 넣은 것은 Webpa..

난이도 - 브론즈 3 문제세 정수 A, B, C의 평균은 (A+B+C)/3이다. 세 정수의 중앙값은 수의 크기가 증가하는 순서로 정렬했을 때, 가운데 있는 값이다.두 정수 A와 B가 주어진다. 이때, A, B, C의 평균과 중앙값을 같게 만드는 가장 작은 정수 C를 찾는 프로그램을 작성하시오.입력입력은 여러 개의 테스트 케이스로 이루어져 있다. 각 테스트 케이스는 한 줄로 이루어져 있고, A와 B가 주어진다. (1 ≤ A ≤ B ≤ 109) 입력의 마지막 줄에는 0이 두 개 주어진다. 출력각 테스트 케이스에 대한 정답을 한 줄에 하나씩 출력한다.  A는 B보다 작거나 같다. 세 수를 크기순으로 정렬했을 때 나올 수 있는 결과는 아래 3가지이다.A B CA C B C A B평균과 중앙값을 같게 만드는 수 ..

2024.05.24 - [Canvas] - [Canvas] 보일러 플레이트 작성 (캔버스 클래스) [Canvas] 보일러 플레이트 작성 (캔버스 클래스)index.js  CanvasOption.jsexport default class canvasOption { constructor() { this.canvas = document.querySelector('canvas') this.ctx = this.canvas.getContext('2d') this.dpr = window.devicePixelRatio this.fps = 60 this.interval = 1000 / this.fps this.canvagamzaggang7.tistory.com 1. 파티클 생성js 폴더 내에 Particle.js 을 만들..

Vue.jstodo App 제작 footer - 전체 삭제 버튼기존 구조 개선(props, 이벤트 전달) - 입력 시 목록 자동 갱신, clear all 버튼 자동 갱신뷰 애니메이션 추가뷰 모달 추가Canvas불꽃놀이 - 꼬리, 스파크 효과, 다듬기JLPT한자 표기pp.76~78 암기pp.79~84 문풀문맥규정pp.86~89, 97~100, 111~113 암기유의 표현pp.120~123, 129~131 암기용법pp.157~159, 166~168 암기문법1~21(조사), 22~51(필수 문법) 암기pp.262~263 문풀단어 테스트 11회

애플리케이션 구조 개선현재 todoApp은 데이터를 입력했을 때 목록에 바로 반영되지 않으며, clear all 버튼을 눌렀을 때로 목록에 바로 반영되지 않는다. 4개의 컴포넌트로 분리했기 때문에 한 영역에서의 처리 결과를 다른 영역에서 감지하지 못하는 것이다. 그렇다고 하나의 컴포넌트 안에서 데이터 저장, 조회, 삭제를 모두 처리하는 것은 비효율적이다. TodoInput의 newTodoItem과 TodoList의 todoItems은 모두 '할 일' 이라는 같은 데이터 속성을 사용한다. 최상위 컴포넌트인 App 컴포넌트에서 '할 일' 데이터를 정의하고 하위 컴포넌트에 props로 전달한다면 위의 문제점들을 해결할 수 있다. App 컴포넌트에서 데이터 조화, 추가, 삭제를 하고 하위 컴포넌트들은 요청(이벤..

프로젝트 생성 및 초기 설정vue create [프로젝트명]으로 프로젝트 생성 awesome icon 사용 (index.html)link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" /> 컴포넌트 생성할 일 관리 앱의 컴포넌트 구조는 헤더, 입력, 목록, 푸터로 구성된다. 컴포넌트 폴더에 To..

Vue.jsaxios 사용하기template 속성 및 문법, 디렉티브todo app 제작 - header, input (입력 데이터 로컬 스토리지 저장), list (삭제 기능 - 로컬 스토리지 및 뷰 데이터 삭제)Canvas불꽃놀이 - 불꽃 터지는 효과코딩 테스트프로그래머스 입문 1문제JLPT한자 읽기pp.44~51 문풀한자 표기pp.53~55, 61~64, 75 암기pp.56~60, 65~74 문풀단어 테스트 4회

Vue의 template은 html, css 드으이 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 html로 변환해 주는 속성이다. template 속성 및 문법데이터 바인딩데이터 바인딩(Data Binding)은 HTML 화면 요소를 뷰 인스턴스의 데이터와 연결하는 것을 의미한다.1. 텍스트 보간법 - {{ }}template>  span>{{ msg }}span>template>script>export default {  data() {    return {      msg: 'Hello Vue'    }  }}script>이중 중괄호 태그 내 msg 해당 컴포넌트 인스턴스의 msg 속성 값으로 대체된다.2. HTML 출력 - v-html이..

axios는 HTTP 요청을 보내기 위한 라이브러리로, Vue에서 비동기 통신을 쉽게 처리할 수 있다. axios APIaxios.get('url').then().catch(): 해당 url 주소에 대해 HTTP GET 요청을 보낸다. 서버에서 보낸 데이터를 정상적으로 받아오면 then() 안에 정의한 로직이 실행되고, 데이터를 밥아올 때 오류가 발생하면 catch()에 정의한 로직이 수행된다.axios.post('url').then().catch(): 해당 url 주소에 대해 HTTP POST 요청을 보낸다. then()고 catch()의 동작은 위와 같다.axios{( 옵션 속성 )}: HTTP 요청에 대한 자세한 속성들을 직접 정의하여 보낼 수 있다. 데이터 요청을 보낼 URL, HTTP 요청 방식..

라우팅: 웹 페이지 간의 이동 방법 서버 측 라우팅 / 클라이언트 측 라우팅서버 측 라우팅은 사용자가 방문하는 url 경로에 기반하여 서버가 응답을 보내는 것을 의미한다. 전통적인 서버 렌더링 웹 앱에서 링크를 클릭하면 브라우저는 서버로부터 html 응답을 받고 새 html로 전체 페이지를 다시 로드한다. 그러나 싱글 페이지 애플리케이션(SPA)에서는 클라이언트 측 js가 탐색을 가로채고 새 데이터를 동적으로 가져와 전체 페이지를 다시 로드하지 않고 현재 페이지를 업데이트할 수 있다. * 싱글 페이지 애플리케이션(SPA): 페이지를 이동할 때마다 서버에 웹 페이지를 요청하여 새로 갱신하는 것이 아니라 미리 해당 페이지들을 받아 놓고 페이지 이동 시에 클라이언트의 라우팅을 이용하여 화면을 갱신하는 패턴을 ..