React, JavaScript 10

[Javascript] 객체(Object) 생성과 참조, 삭제, 조회

아래의 프로그래머스 문제를 해결하며 사용한 객체에 대해 정리하고자 합니다. https://school.programmers.co.kr/learn/courses/30/lessons/92341 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 객체? - 객체는 이름(key, name)과 값(value)으로 구성된 프로퍼티의 집합이다. 1. 객체의 생성 new Object() 변수에 빈 객체를 생성 ( let obj = {}; ) 생성자 함수를 사용한 객체 생성 2. 객체의 프로퍼티 추가 - key의 값은 문자열로 작성해야 한다. (따옴표로 감싸는게 원칙! but..

React, JavaScript 2023.06.09

[Javascript] sort 함수

기본적으로 함수는 값을 문자열 sort()로 정렬 한다. => 배열 자체가 변경되는 함수이기에 사용시 주의해야 한다. 그러나 다음과 같이 숫자로 정렬할 경우 예상과 다른 결과를 얻게 된다. const points = [40, 100, 1, 5, 25, 10]; points.sort(); //1,10,100,25,40,5 1, 5, 10, 25, 40, 100 이렇게 순차적으로 정렬이 되기 원했지만 sort()메서드로 정렬 할경우 2가 1보다 크기 때문에 25가 100보다 크다고 처리 된다. 그래서 위와 같은 결과가 나타나게 된다. 이러한 문제는 비교함수를제공해서 해결 할 수 있다. const points = [40, 100, 1, 5, 25, 10]; points.sort(function(a, b) { ..

React, JavaScript 2023.05.31

[Javascript] 문자열 잘라주기 substr(), substring(), slice()

백준 알고리즘 문제를 풀며 문자열을 잘라주는 3가지 함수 substr(), substring(), slice()에 대한 사용법을 정리해보았습니다. 1. substr(start, length) substr() 함수는, 시작 index부터 잘라내고자 하는 length만큼 문자열을 잘라내어 return해주는 함수입니다. length를 생략할 경우 시작 위치부터 문자열 끝까지를 잘라내어 반환합니다. const s = "안녕하세요?"; const sub = s.substr(0, 2); // index 0부터 length 2만큼 잘라내어 반환 console.log(sub); // 안녕 2. substring(start, end) substring() 함수는 시작 위치에서 종료 위치까지 문자열을 잘라내어 return..

React, JavaScript 2022.09.28

[JavaScript] Set 객체

Set 객체는 ES6에서 등장한 데이터 타입으로 배열의 중복되는 값을 가지지 않는 값들의 리스트를 말한다. 그리고 이 때 값은 순서가 존재하지 않는다. Set 객체 선언하기 const set = new Set(); 특정 요소 추가하기: add Set 객체에 주어진 값을 갖는 새로운 요소를 추가한다. //Set.add(value) set.add(1);// Set { 1 } set.add('a');// Set { 'a' } set.add('hi');// Set { 1, 'a', 'hi' } 특정 요소 확인하기: has Set 객체에 주어진 값을 갖는 요소가 있는지 확인한다. (true / false) // Set { 1, 'a', 'hi' } //Set.has(value) set.has(1);// true ..

React, JavaScript 2022.09.26

[JavaScript] forEach()를 사용하여 key-value 생성하기

백준 알고리즘 문제를 풀며 key-value 생성 방법을 메모하기 위해 작성하였습니다. https://www.acmicpc.net/problem/18870 18870번: 좌표 압축 수직선 위에 N개의 좌표 X1, X2, ..., XN이 있다. 이 좌표에 좌표 압축을 적용하려고 한다. Xi를 좌표 압축한 결과 X'i의 값은 Xi > Xj를 만족하는 서로 다른 좌표의 개수와 같아야 한다. X1, X2, ..., XN에 좌 www.acmicpc.net 기존에 알던 방식으로 제출하였을 경우 시간초과 문제가 발생하여 이를 해결하기 위해 인덱스를 key - value 값으로 지정하여 시간초과 문제를 해결하였습니다. const fs = require("fs"); let input = fs.readFileSync("/..

React, JavaScript 2022.09.16

[JavaScript] 배열의 중복 요소 제거하기

백준 알고리즘 문제를 풀며 배열의 중복 값 제거 방법을 메모하기 위해 작성하였습니다. https://www.acmicpc.net/problem/1181 1181번: 단어 정렬 첫째 줄에 단어의 개수 N이 주어진다. (1 ≤ N ≤ 20,000) 둘째 줄부터 N개의 줄에 걸쳐 알파벳 소문자로 이루어진 단어가 한 줄에 하나씩 주어진다. 주어지는 문자열의 길이는 50을 넘지 않는다. www.acmicpc.net 1. filter(), indexOf()를 사용하여 중복을 제거하는 방법 const arr = ['i', 'im', 'it', 'no', 'no', 'but', 'more', 'more']; console.log(arr); // ['i', 'im', 'it', 'no', 'no', 'but', 'mor..

React, JavaScript 2022.09.13

[JavaScript] 숫자 배열의 최소,최대 값 구하기

알고리즘 문제를 풀며 배열의 최소,최대 값을 구할 시 기존의 min, max를 사용하면 NaN 값이 생기게 되어 해결법을 찾아 정리해보고자 한다. 기존 최대 또는 최소 함수를 사용하는 예시. Math.max(1, 2, 3) // 3 Math.min(1, 2, 3) // 1 하지만 만약 숫자의 배열을 가지고 있고 그 안에서 최소값과 최대값을 찾고자 한다면 다음과 같은 현상이 발생한다. Math.min 또는 Math.max 메서드에 배열을 넘기면 NaN이 나온다. const nums = [1, 2, 3] Math.min(nums) // NaN Math.max(nums) // NaN 그 이유는 Math.min 또는 Math.max 함수는 배열이 아니라 고유한 변수를 기대하기 때문이다. 이를 해결 하기 위해 E..

React, JavaScript 2022.09.06

[JavaScript] join()

백준 문제를 공부하며 문자열을 이어주는 방법을 찾아보던 중 join()이라는 함수를 알게되어 이를 정리하고자 한다. arr.join([구분자]); 구분자를 지정하지 않으면 기본적으로 쉼표(,)를 통해 배열을 연결해준다. 아래의 예시를 참고하여 결과값을 알 수 있다. const arr = ['사과', '바나나', '딸기']; arr.join(); cosole.log(arr); // 사과,바나나,딸기 arr.join(''); cosole.log(arr); // 사과바나나딸기 arr.join('/'); cosole.log(arr); // 사과/바나나/딸기

React, JavaScript 2022.08.23

[백준] JavaScript로 문제 풀기(Node.js 입출력 관리)

프로그래머스나 다른 알고리즘 사이트는 JavaScript의 input을 제공해주지만 백준은 JavaScript로 제출하는 조건이 없다. 그래서 node.js를 이용해 입출력을 관리하여 문제를 제출하여야 한다. node.js: JavaSript 엔진으로 빌드된 JavaScript 런타임 환경 따라서 이번 시간에는 node.js를 통한 입출력 관리 방법을 기록하고자 한다. 1. 입력이 한 줄인 경우 // 입력 예 => 3 1 const fs = require('fs'); let input = fs.readFileSync('/dev/stdin').toString(); // 문자 하나만 입력받을 경우 input = input.split(' '); // 한칸 띄어쓰기로 구분 input[0], input[1] 배열..

React, JavaScript 2022.08.14

리액트(React)

프론트엔드 라이브러리와 프레임워크 요즘의 웹 페이지들은 정적인 페이지가 아닌 웹 앱 혹은 웹 어플리케이션이라 불릴 정도로 복잡하고 동적으로 바뀌었다. 이처럼 복잡하고 동적인 웹 페이지가 늘어나고 웹의 크기가 커지자, 자바스크립트 파일의 관리가 어려워졌고 이를 효율적으로 관리하기 위해 그리고 UI를 더욱 동적으로 나타내기 위해서는 복잡하고 많은 상태를 관리해야 했고 이를 위해서 프론트앤드 라이브러리 / 프레임워크가 등장하게 되었다. 리액트(React) 란? 리액트(React, React.js)는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 리액트를 사용함으로서 최신의 다채화된 사용자 인터페이스를 간편하게 사용할 수 있고 높은 수준의 구현을 가능하게 한다. 리액트의 특징 리액..

React, JavaScript 2022.07.16