본문 바로가기

분류 전체보기131

Javascript 강의 자료 : https://learnjs.vlpt.us/ Javascript란? nodeJS를 통해서 runtime을 통해서 javascript를 실행가능 템플릿 리터럴 (javascript) backtick(`) 문자를 사용하여 문자열을 표현 1) 줄바꿈을 쉽게 할 수 있고, 2) 문자열 내부에 표현식을 포함할 수 있다. 2022. 7. 5.
13. 배열에 항목 추가하기 with 복습 출처 - 벨로퍼트 https://react.vlpt.us/basic/13-array-insert.html 이제까지 공부한 것을 복습하며 다시금 코드를 읽어보자. CreateUser.js import React from 'react'; function CreateUser({ username, email, onChange, onCreate }) { return ( 등록 ); } export default CreateUser; props를 통해 컴포넌트에 값 전달 (5. props 를 통해 컴포넌트에게 값 전달하기) UserList.js import React from 'react'; function User({ user }) { return ( {user.username} ({user.email}) ); }.. 2022. 7. 4.
12. useRef로 컴포넌트 안의 변수 만들기 출처 - 벨로퍼트 링크 useRef Hook의 용도 1) DOM 선택 2) 컴포넌트 안에서 조회 및 수정할 수 있는 변수 관리 e.g. 고유 id 관리하는 용도 관리가능한 값 1) setTimeout, setInterval 을 통해서 만들어진 id 2) 외부 라이브러리를 사용하여 생성된 인스턴스 3) scroll 위치 useRef() 를 사용할 때 파라미터를 넣어주면, 이 값이 .current 값의 기본값이 된다. .current 로 수정, 조회를 하면된다. 예시) const nextId = useRef(4) 2022. 7. 2.
11. 배열 렌더링하기 출처 - 벨로퍼트 https://react.vlpt.us/basic/11-render-array.html 리액트에서 배열을 렌더링 할 때에는 key 라는 props를 설정해야한다. key 값은 각 원소들마다 가지고 있는 고유의 값으로 설정을 해야하는데 아래의 경우에는 id 이다. UserList.js import React from 'react'; // {user} : props를 통해 컴포넌트에 값 전달 function User({ user }) { return ( {user.username} ({user.email}) ); } function UserList() { const users = [ { id: 1, username: 'velopert', email: 'public.velopert@gmail.. 2022. 7. 1.
[백준] 해시를 사용한 집합과 맵 - 2910번 빈도 정렬 (Java) 문제링크 2910번: 빈도 정렬 첫째 줄에 메시지의 길이 N과 C가 주어진다. (1 ≤ N ≤ 1,000, 1 ≤ C ≤ 1,000,000,000) 둘째 줄에 메시지 수열이 주어진다. www.acmicpc.net 풀이방법 ( 순서를 유지하면서 중복은 허용하지 않으며 값을 갖고있는 자료구조가 필요해 ! ) LinkedHashMap을 활용한다. LinkedHashMap을 정렬하는 메소드도 새로 추가한다. 소스코드 작성방법 숫자를 입력받으면서 이미 맵에 포함되어있으면, 그 값에 1을 더하여 맵의 값을 변경한다. 그렇지 않으면, 맵에 숫자를 추가한다. LinkedHashMap을 정렬하는 메소드를 선언한다. LinkedHashMap을 입력받아 map을 list로 변환한 후 Collections.sort를 활용하여.. 2022. 6. 29.
[백준] 해시를 사용한 집합과 맵 - 13414번 수강신청 (Java) 문제링크 13414번: 수강신청 입력 데이터는 표준 입력을 사용한다. 입력은 1개의 테스트 데이터로 구성된다. 입력의 첫 번째 줄에는 과목의 수강 가능 인원 K(1 ≤ K ≤ 100,000)와 학생들이 버튼을 클릭한 순서를 기록한 대기목 www.acmicpc.net 풀이방법 ( 순서를 유지하면서 중복은 허용하지 않는 자료구조가 필요해 !) - LinkedHashSet을 활용한다. 소스코드 작성 방법 학생을 입력받으면서 set에 이미 포함되어있으면 set에 해당 문자열을 제거한다. set에는 항상 입력받은 학생을 추가한다. set을 배열로 변환한다. 만약, 배열의 크기가 k(수강 가능 인원)보다 작으면 k를 배열의 크기로 변경한다. k만큼 출력한다. 소스코드 package baekjoon.array_map.. 2022. 6. 28.
10. useRef로 특정 DOM 선택하기 출처 - 벨로퍼트 https://react.vlpt.us/basic/10-useRef.html useRef : JavaScript의 getElementById , querySelector 같은 DOM Selector함수를 사용해서 DOM을 선택하는 것과 같은 의미 useRef() 를 사용하여 Ref 객체를 만들고, 이 객체를 우리가 선택하고 싶은 DOM에 ref 값으로 설정 그러면 Ref객체의 .current 값은 우리가 원하는 DOM을 가리킴 focus() : DOM 객체에 focus하는 함수 import React, { useState, useRef } from 'react'; function InputSample() { const [inputs, setInputs] = useState({ name:.. 2022. 6. 25.
11. 배열 렌더링하기 출처 - 벨로퍼트 https://react.vlpt.us/basic/11-render-array.html 리액트에서 배열을 렌더링 할 때에는 key 라는 props를 설정해야한다. key 값은 각 원소들마다 가지고 있는 고유의 값으로 설정을 해야하는데 아래의 경우에는 id 이다. UserList.js import React from 'react'; // {user} : props를 통해 컴포넌트에 값 전달 function User({ user }) { return ( {user.username} ({user.email}) ); } function UserList() { const users = [ { id: 1, username: 'velopert', email: 'public.velopert@gmail.. 2022. 6. 24.
10. useRef로 특정 DOM 선택하기 출처 - 벨로퍼트 https://react.vlpt.us/basic/10-useRef.html useRef : JavaScript의 getElementById , querySelector 같은 DOM Selector함수를 사용해서 DOM을 선택하는 것과 같은 의미 useRef() 를 사용하여 Ref 객체를 만들고, 이 객체를 우리가 선택하고 싶은 DOM에 ref 값으로 설정 그러면 Ref객체의 .current 값은 우리가 원하는 DOM을 가리킴 focus() : DOM 객체에 focus하는 함수 import React, { useState, useRef } from 'react'; function InputSample() { const [inputs, setInputs] = useState({ name:.. 2022. 6. 24.
9. 리액트 상태에서 객체 수정 출처 - 벨로퍼트 https://react.vlpt.us/basic/09-multiple-inputs.html inputs[name] = value; ☝ 이런식으로 직접 수정하면 안됨 setInputs({ ...inputs, [name]: value }); ☝ 새로운 객체를 만들어서 새로운 객체에 변화를 주고, 이를 상태로 사용 ... : spread문법 객체의 내용을 모두 펼쳐서 기존 객체 복사 예시) const slime = { name: '슬라임' }; const cuteSlime = { ...slime, attribute: 'cute' }; console.log(cuteSlime) // 출력 결과 { name: '슬라임' attribute: 'cute' }; 2022. 6. 24.
8. input 상태 관리하기 출처 - 벨로퍼트 https://react.vlpt.us/basic/08-manage-input.html input의 이벤트 onChange 이벤트 객체 e를 파라미터로 받아와서 사용 e.target : 이벤트가 발생한 DOM인 input DOM을 가리킴 따라서, const { value, name } = e.target 하면, value = “김다인” , name = “name” 인 상수가 선언된다. e.taraget.value : 현재 input에 입력한 값 input의 개수가 여러개 됐을 때는 객체 형태의 상태를 관리해주어야한다. 2022. 6. 23.
7. useState를 통해 컴포넌트에서 바뀌는 값 관리하기 출처 - 벨로퍼트 https://react.vlpt.us/basic/07-useState.html 이벤트 설정 import React from 'react'; function Counter() { const onIncrease = () => { console.log('+1') } const onDecrease = () => { console.log('-1'); } return ( 0 +1 -1 ); } export default Counter; 함수를 만들고, button 의 onClick 으로 각 함수를 연결해주었습니다. 리액트에서 엘리먼트에 이벤트를 설정해줄때에는 on이벤트이름={실행하고싶은함수} 형태로 설정해주어야 합니다. 여기서 주의하셔야 하는 점은, 함수형태를 넣어주어야 하지, 함수를 다음과 같.. 2022. 6. 23.
반응형

티스토리툴바