전체 글 101

[백준/JAVA] 15552 빠른 A+B (BufferedWriter)

문제 이전 A+B-3 문제와 똑같지만 시간 제한이 존재한다. 따라서, 문제에서 언급한 BufferedReader와 BufferedWriter를 사용해서 풀어야한다. 여기서 잠깐🖐 BufferedWriter? BufferedWriter는 BufferedReader와 함께 빠른 입출력 퍼포먼스를 낸다. 사용하는 방법은 다음과 같다. // BufferedWriter 선언 BufferedWriter br = new BufferedWriter(new OutputStreamWriter(System.out)); // 출력할 문자열 String str = "abcdef"; // 출력 bw.write(str); // 줄바꿈 bw.newLine(); // 버퍼에 남아있는 모든 데이터 출력 bw.flush(); // 닫기 ..

코딩테스트 2021.04.27

[백준/JAVA] 10950번 A+B-3

문제 나의 접근 방법 테스트 케이스 개수(T)를 크기로 갖는 배열을 하나 만들어야겠다. (for A+B 값 저장) 기본적인 for문 문제이기 때문에 어려움은 없었다. 풀이 - scanner 사용 import java.util.*; public class Main { public static void main(String[] args) { Scanner sc = new Scanner(System.in); // 테스트케이스 개수 입력받기 int n = sc.nextInt(); // 개수만큼의 크기를 가진 배열 생성(=왼/오 값이 담긴 변수가 될 것임) int arr[] = new int[n]; // 테스크케이스 개수 만큼 값 왼,오 값 받기 for(int i=0; i

코딩테스트 2021.04.27

[백준/JAVA] 2884 알람 시계

문제 나의 접근 방법 단지, 45분전의 시간만 구하면 되는 것이다. 1. 만약 입력받은 분이 45분보다 작다면 시간은 -1이 되며, 45분전의 시간의 분(M)은 기존의 분 +15분이 된다. 1-1. 이렇게 생각한 이유 2. 시간이 0보다 작아진다면 해당 시간을 23으로 설정하면 된다. 두 가지 입력 방법을 가지고 해결해보자 - Scanner 사용 (소요시간 256ms) import java.util.*; public class Main { public static void main(String[] args) { Scanner sc = new Scanner(System.in); int H = sc.nextInt(); int M = sc.nextInt(); // 분이 45분보다 작다면 if(M

코딩테스트 2021.04.27

리액트(ReactJS) 성능 최적화를 해보자 - shouldComponentUpdate()

해당 게시물은 생활코딩의 이고잉님 강의를 듣고 개인적으로 정리한 내용을 담고 있습니다👩‍💻 리액트로 기능을 구현하다보면 값의 변형이 거의 없는 요소가 호출되는 불필요한 경우가 있다. 이런 경우 렌더링 성능이 떨어지게 되므로 좋지 않다. 따라서, 조건을 걸고 특정한 경우에만 호출 되도록 shouldComponentUpdate()를 사용한다. 해당 메소드는 오직 성능 최적화를 위해서만 사용한다. shouldComponentUpdate(newProps, newState) 해당 메소드의 기본값은 true이다. 조건을 통해 false로 지정하여 특정 경우에 호출되지 않도록 설정하면 된다. 우선, 위 메소드를 적용하기 전을 살펴보자 관리자 도구를 보면 홈페이지의 네비게이션 역할을 하는 TOC 컴포넌트의 렌더 함수도..

React 2021.04.25

배열에 데이터를 추가하는 방법 - Array push()와 concat()

임의의 배열에 새로운 데이터를 추가하는 방법으로 자주 사용되는 push와 concat 의 특징과 차이점을 알아보자 push( ) push는 기존 배열에 새로운 데이터를 추가하는 방법이다. 데이터 추가 전과 후를 비교하면 true var arr1 = [1,2,3]; arr1.push(4); console.log(arr1); // 1,2,3,4 출력 var arr2 = arr1.push(4); console.log(arr1, arr2); // 1,2,3,4 와 1,2,3,4 출력 concat( ) concat은 기존 배열을 복사한 후, 새로운 데이터를 추가하는 방법이다. 데이터 추가 전과 후를 비교하면 false var arr1 = [1,2,3]; arr1.concat(4); console.log(arr1)..

Javascript 2021.04.25

리액트(ReactJS) 컴포넌트 이벤트 생성하기

해당 게시물은 생활코딩의 이고잉님 강의를 듣고 개인적으로 정리한 내용을 담고 있습니다👩‍💻 여러가지 컴포넌트 이벤트 중, 목차의 요소를 클릭하면 해당 요소의 내용을 출력하는 이벤트를 만들어볼 것이다. e.target 속성과 bind 두 가지 방식을 사용해서 구현해 볼 것이다. e.target 속성 이용 // App.js 파일 내 목차 구현 부분만 명시 return ( ... ... ... ); // NAV.js // 실제 목차 로직 컴포넌트 바인드(bind) 이용 // App.js 파일 내 목차 구현 부분만 명시 return ( ... ... ... ); // NAV.js // 실제 목차 로직 컴포넌트

React 2021.04.19

이벤트가 발생한 대상의 데이터 값 가져오기 - event.target

자바스크립트는 event.target 속성을 통해 이벤트가 발생한 대상(요소)의 데이터 값을 가져올 수 있다. Event.target (=e.target) 예를 들어, 아래와 같은 코드가 있다고 예를 들어보자 $("a").click(function(e){ console.log(e.target); }); 실행시키면 콘솔창에 a 요소가 출력될 것이다. 즉, 위의 코드를 해석하자면 a요소 클릭 시 이벤트가 발생하며, 그 이벤트가 발생할 때마다 e.target 속성 때문에 이벤트의 대상인 a 요소가 출력된다. 만약, 데이터 속성 값(data-)을 지정한 요소의 이벤트 값은 어떻게 불러올까? e.target을 통해 현재 이벤트가 일어난 요소를 가져오고, 그 요소의 data-id로 저장한 데이터 값은 data 속성..

Javascript 2021.04.19

데이터 속성 값(data-)의 개념과 활용을 알아보자

Data 속성 기술문서에 따르면, HTML5 버전부터 추가된 개념으로, HTML 요소의 'data-'로 시작하는 속성이다. 이러한 데이터 속성은 특정 데이터를 DOM 요소에 저장하기 위함이 목적이다. 브라우저는 해당 데이터 속성에는 어떠한 행동도 관여하지 않기 때문에 개발자 스스로 어떠한 요소에 특정 데이터를 저장하고 싶은 경우 자유롭게 사용할 수 있다. 여기서 속성명은 data-value이지만 HTML의 표준 속성인 value와 전혀 관계가 없다. 임의로 만들어진 사용자 지정 데이터이기 때문이다. JavaScript에서 Data 속성 접근하는 방법 dataset 속성을 통해 접근할 수 있다. 이때, 'data-' 속성의 뒷부분을 사용한다. // ES6 let article = document.getEl..

Javascript 2021.04.19

리액트(ReactJS) 컴포넌트 생성하기

해당 게시물은 생활코딩의 이고잉님 강의를 듣고 개인적으로 정리한 내용을 담고 있습니다👩‍💻 본문에 들어가기 앞서, 리액트를 사용하지 않는다면 우리는 아래와 같은 코드를 작성한다. 나쁘지 않지만 코드가 100줄, 1000줄이 넘어가면 한눈에 들어오지 않는다. 이를 해결하기 위해 리액트를 사용한다. [목표] 위의 코드를 리액트를 사용하여 전환해보자 첫 번째, 태그를 이름의 사용자 정의 태그로 변경해볼 것이다. 이때, 왼쪽과 같이 return 안에 Subject 이름의 태그로 사용할 html 코드를 넣어주면 된다. 이후, 적용 시 App 컴포넌트에 생성한 Subject 컴포넌트를 넣으면 된다. * 컴포넌트를 생성할 때 해당 컴포넌트는 와 처럼 하나의 최상위 태그로 시작해야 한다. 위의 코드를 간단하게 설명하자..

React 2021.03.15