오늘한것

1. React로 Todolist 만들기 완료

 

예상치 못하게 생각보다 빠르게 Todolist를 끝냈다...

처음에는 구글링 했을 때 나온자료들이 하나도 이해가 안갔다. 

각 component를 function으로 만들고 props와 useState만을 이용해서 Todolist를 만드는 것인데 어찌저찌 만들었지만

제대로 이해하고 만든건지 잘 모르겠어서 다만들고 주석을 달면서 최대한 내것으로 만들어 보려고 했다.

 

만들면서 막힌 부분이 많았는데

그 중 한가지는 나는 기능을 구현하기위해 굳이 기능이 일어나는 컴포넌트에서만 props를 받아와서 event handler 함수를 이용해 무언가를 하려고 했던것이다.

음... 한마디로 부모 컴포넌트에서 event handler함수를 props로 보내서 자식 컴포넌트에다 달아만 두고, 해당 함수는 부모컴포넌트에서 처리하여 부모에게 있는 데이터를 가지고 더 자유롭게 조작가능해진다.

 

두번째는 객체들로 구성된 배열에서, 객체의 값 하나만 바뀌게 만드는 것이었다.

리액트에서는 배열이나 객체를 다른 변수에 할당하거나 그대로 값만 수정해주는 경우에는 값이 바뀌어도 같은 메모리 주소, 같은곳을 참조하기 때문에 변화를 인지하지 못해서 렌더링이 다시 일어나지 않는다.

때문에 배열의 경우에는 스프레드 문법으로 얕은 복사를 하는 것과 같이 값이 다른 메모리주소에 복사되어 바뀌게 할 수 있는 방법을 사용해야 한다.

라고 알고 있는데 이부분은 완벽하게 이해한것은 아니기때문에 좀 더 자세히 찾아서 작성하겠다.

 

다음 목표 및 개선해야할점

- 주 1회 알고리즘 풀이( 평일에는 힘들것 같으니 주말을 이용)

- 드림코딩 javascript 문법 훑기 

- react 주특기 전 추천영상 시청(CSS grid, Grid Garden, 코딩앙마- 자바스크립트 DOM & EVENT 구조)

- 내일은 객체 리터럴에대해 

- 팀과제 질문 정리하기

오늘한것

1. 발제, S.A 문제 풀기 

2. 자바스크립트 혼공스 스터디 5챕터 끝

3. ReactJS 입문학습자료 학습, Todolist 만들기 진행중

 

 

 

아침은 치아바타? 샌드위치로 든든~하게 먹었고, 발제를 들었다. 드디어 React 입문이다!

조는 4조가 되었다. 알고리즘 테스트의 결과로 달리기반이 되었다고 하는데,,, 자바스크립트 문법을 어느정도 안다는 가정하에 짜여진것 같다.. 나는 아직 자바스크립트 기초가 안되어있는것 같은데 달리기 반이 된 것 같아 조금 부담스럽지만 잘따라가보려고 한다.

 

조 분위기도 좋고 잘짜여진 것 같다.

 

새로운 것을 배워서 쓸게 많을것 같았지만... 제대로 이해한게 맞는지 몰라서 아직은 쓰기가 좀 그런것 같고

스터디 준비를하면서 책의 내용을 정리하는 것이 나름 도움이 되는 것 같다.

음... 이런게 있다는것만 알고 사용도 해봤는데.. 왜 그때는 이렇게 썼는지 이유와 정확한 명칭 같은것들을 알 수 있게 되어 도움이 되는듯하다.

 

입문수준이지만 React를 배우면서 중요한 개념을 정리하겠다.

 

App.js

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <Hello name="react" />
  );
}

export default App;

Hello.js

import React from 'react';

function Hello(props) {
  return <div>안녕하세요 {props.name}</div>
}

export default Hello;

props는 이런식으로 부모컴포넌트에서 자식 컴포넌트로 어떠한 값을 전해줘야 할 때 사용한다. 

 

props가 여러개일 경우

import React from 'react';

function Hello({ color, name }) {
  return <div style={{ color }}>안녕하세요 {name}</div>
}

export default Hello;

이렇게 구조 분해를 이용하여 사용할 수 있다. 이건 자바스크립트 문법이다.

 

 

다음 목표 및 개선해야할점

- 주 1회 알고리즘 풀이( 평일에는 힘들것 같으니 주말을 이용)

- 드림코딩 javascript 문법 훑기 

- react 주특기 전 추천영상 시청(CSS grid, Grid Garden, 코딩앙마- 자바스크립트 DOM & EVENT 구조)

- Todolist 내일까지 완성 해보자

- 내일은 객체 리터럴에대해 

 

 

참고자료

- https://react.vlpt.us/basic/05-props.html

오늘한것

1. 알고리즘 테스트 1번, 3번 문제

2. 자바스크립트 혼공스 스터디 5챕터 P232 ~ 241

3. ReactJS 강의 #3.3까지 ~ 

4. 알고리즘 테스트 전 이전에 풀었던 문제들 복기

5. D반 사람들과 mingle ?이었나 미니게임

 

오늘도 15분정도 산책을 했는데 산이 가고 싶어졌다. 일요일에 가볼까 고민중.

오늘은 테스트를 보기도했고 그게 끝이나니 조금 느슨해졌던 날인것 같다. 

다시금 내가 왜 이걸 하려고 했는지 생각을 해보며 마음을 다잡도록 하자 

 

오늘은 크게 블로그에 쓸 내용은 없는 것 같다. 알고리즘 테스트에서 사용했던 배열 메소드들은 이미 한번 블로그에서 다뤘었고... 혼공스 스터디 자료를 준비하다가 헷갈린 개념을 정리해보겠다. 

 

attribute

attribute 는 html 문서에서 elements 에 추가적인 정보를 넣을 때 사용되는 요소입니다.

<div class='my-class'></div>

라는 ‘my-class’라는 클래스 속성을 가진 div 요소에서

  • div 는 element(요소) 이고
  • class 는 attribute(속성) 가 되며
  • ‘my-class’ 는 class attribute의 value(값)가 됩니다.

 

property

property는 html DOM 안에서 attribute 를 가리키는(혹은 대신하는) 표현입니다.

위 내용은 <div class= ‘my-class’></div> 태그를 DOM 으로 표현한 것인데

위에서 className이 property가 되는 것이죠.

 

 

 

 

 

 

다음 목표 및 개선해야할점

- 주 1회 알고리즘 풀이( 평일에는 힘들것 같으니 주말을 이용)

- 드림코딩 javascript 문법 훑기 

- react 주특기 전 추천영상 시청(CSS grid, Grid Garden, 코딩앙마- 자바스크립트 DOM & EVENT 구조)

 

 

참고자료

- https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-DOM-attribute-%EC%99%80-property-%EC%B0%A8%EC%9D%B4

 

오늘한것

1. ReactJS 강의 #3.0까지 

2. 자바스크립트 혼공스 스터디 5챕터 P220~ 230

3. Flexbox 게임 - Flexbox Froggy 

4.DOM 개념 정리 - https://www.youtube.com/watch?v=mFawNZz_Uu0&feature=youtu.be

 

 

오늘 산책 15분 했는데 날씨가 정말 좋아서 동기부여도 되고 기분 전환이 되었다. 

ReactJS 입문 강의를 들었지만 아직 TIL에 의미있게 쓸만한 내용은 없었던것 같다.

대신 스터디 준비하면서 알게된 내용을 적어보겠다.

 

 

apply() 

스터디를 하면서 구 버전 자바스크립트에 대해서도 알게되었는데,

전개연산자가  없던 구 버전에서는 apply() 함수를 사용했습니다.

// 가변 매개변수 함수 생성
function sample(...items){
	console.log(items)
}

const array = [1, 2, 3, 4]
sample(array)
console.log(sample.apply(null, array))

이런식으로 적용시켜 사용.

 

 

OR 논리연산자

보통 논리 연사자를 사용할 때 불린값을 조작하는데 쓰입니다. 

다들 알고 있다시피 아래와 같은 4가지 조합이 나오게 됩니다.

alert( true || true );   // true
alert( false || true );  // true
alert( true || false );  // true
alert( false || false ); // false

이 경우에는 피연산자가 불린형인 경우만 다룬것입니다.

자바스크립트에서만 제공하는 논리연산자의 OR의 '추가' 기능이 있습니다.

 

아래와 같은 알고리즘으로 동작합니다.

 

OR || 연산자는 다음 순서에 따라 연산을 수행합니다.

  • 가장 왼쪽 피연산자부터 시작해 오른쪽으로 나아가며 피연산자를 평가합니다.
  • 각 피연산자를 불린형으로 변환합니다. 변환 후 그 값이 true이면 연산을 멈추고 해당 피연산자의 변환 전 원래 값을 반환합니다.
  • 피연산자 모두를 평가한 경우(모든 피연산자가 false로 평가되는 경우)엔 마지막 피연산자를 반환합니다.

여기서 핵심은 반환 값이 형 변환을 하지 않은 원래 값이라는 것입니다.

 

예시

lert( 1 || 0 ); // 1 (1은 truthy임)

alert( null || 1 ); // 1 (1은 truthy임)
alert( null || 0 || 1 ); // 1 (1은 truthy임)

alert( undefined || null || 0 ); // 0 (모두 falsy이므로, 마지막 값을 반환함)

 

OR는 첫번째 truthy를 찾는 연산자 이지만

첫번째 falsy를 찾는 AND 연산자 '&&' 도 있습니다.

 

더 자세한 내용은 아래 참고자료를 확인해주세요.

 

다음 목표 및 개선해야할점

- 못푼문제, 애매했던 문제 복기

- react 주특기 전 추천영상 시청(CSS grid, Grid Garden, 코딩앙마- 자바스크립트 DOM & EVENT 구조)

- 내일 메소드 3개정리

- JS카테고리 만들기

 

참고자료

- 혼자 공부하는 자바스크립트

- https://ko.javascript.info/logical-operators#ref-260

오늘한것

1. 알고리즘 challenge 문제풀기 (프로그래머스) 

2. 자바스크립트 혼공스 스터디 5챕터 P196 ~ 207

3. 알고리즘 모의고사 2문제 

 

중난이도 문제를 푸는데 절반까지는 무난했으나 나머지 절반이 까다로워서 잘 풀리지 않는다. 

계속 붙잡고 있으니 쳐지는 기분이 든다.

 

3문제정도 남긴했지만 이제부터 나머지문제들은 시간을 정해두고 고민해보다가 정답을 확인해보고 내방식으로 다시 적용해서 풀어보도록 해야겠다.

 

그리고 아직 시작은 못했지만 틈틈히 react강의를 맛보기라도 할 수 있도록 해야겠다. 

또 정규표현식으로만 풀 수 있는 문제를 봤는데 그것도 어느정도 공부해놓으면 편할 것 같다.

 

오늘은 challenge문제를 푸는데 정답을 낸게 없었기 때문에 배열에서 자주 쓰이는 method 복습 해보겠습니다.

 

reverse()

- 배열을 역순으로 정렬

const items = [1, 2, 3];
console.log(items); // [1, 2, 3]

items.reverse();
console.log(items); // [3, 2, 1]

 

map()

- map() 메서드는 호출 배열의 모든 요소에 대해 제공된 함수를 호출한 결과로 채워진 새 배열을 만듭니다.

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

위처럼 제공된 함수 x * 2를 호출한 결과로 array1에 모든 요소에 * 2가 된 새 배열 map1이 만들어진 것을 확인 가능

 

const array1 = ["1", "2", "3"]

const map1 = array1.map(Number)

// map1 == [1, 2, 3]

이렇게 map(Number)를 이용해서 문자형으로 변환된 숫자도 다시 숫자로 만들어 줄 수 있다.

 

 

splice

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at index 1
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May');
// replaces 1 element at index 4
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "May"]
splice(start, deleteCount, item1, item2, itemN) // syntax

start는 지우기 시작할 인덱스

deleteCount는 시작부터 몇개를 지울지 갯수

item1, item2, ... itemN 지우고 그 자리를 대체할 요소들 

 

만약 하나도 안지우고 start만 지정해준경우

아래와 같이 start 부터 item을 추가한다.

const myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
const removed = myFish.splice(2, 0, 'drum', 'guitar');

// myFish is ["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"]
// removed is [], no elements removed

 

 

잘한점

- 밥 삼시세끼 잘 챙겨먹었다.

 

 

다음 목표 및 개선해야할점

- 매일 자바스크립트 스터디 준비

- 챌린지 문제 끝내기 (3문제 정도)

- 못푼문제, 애매했던 문제 복기

- react 주특기 전 추천영상 시청

- 알고리즘 문제 고민하는데 시간을 많이 썼다. 시간을 정해놓고 풀고, 풀리지 않는다면 정답을 참고해보자.

- 될 수 있으면 JS카테고리를 만들어서 TIL은 키워드만 적고, JS 카테고리에 좀 더 자세하게 정리하자

 

참고자료

https://developer.mozilla.org/en-US/docs/Web/JavaScript

 

JavaScript | MDN

JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many non-browser environments also use it, such as Node.js, Apache

developer.mozilla.org

 

오늘한것

1. 알고리즘 challenge 문제풀기 (프로그래머스) (29 ~ 36)

2. 자바스크립트 혼공스 스터디 배정

3. 잘 안풀렸던 이전 문제 2개 해결

 

오늘은 자바스크립트 스터디반이 오전에 새로 배정되고, 조도 갑자기 재편성 되었던날.

알고리즘 문제도 나름 잘 해내고 있다고 생각한다. 

 

오늘 몇가지 풀기 까다로웠던 문제와  사용했던 방법들을 복기해보고자 한다.

 

자바스크립트에서 진법 변환

n = 3
let three = n.toString(3) // 10진수 3이 3진수로 변환

// 3진수에서 10진수로 변환
// parseInt안의 매개변수 3이 원래 n이 가진 진수가 몇진수인지를 설정
let answer = parseInt(n, 3)

 

최소직사각형 문제

https://school.programmers.co.kr/learn/courses/30/lessons/86491

function solution(sizes) {
  var answer = 0;
  let maxArr = [];
  let minArr = [];

  //배열안의 두 값을 비교해서 큰값은 0번 인덱스로, 작은값은 1번인덱스로 자리를 바꿔준다.
  for (let i = 0; i < sizes.length; i++) {
    if (sizes[i][0] < sizes[i][1]) {
      sizes[i] = sizes[i].reverse();
    }
  }
  //최대값끼리(0번 인덱스끼리), 최솟값끼리(1번 인덱스끼리) 배열 만들기
  for (let i = 0; i < sizes.length; i++) {
    maxArr.push(sizes[i][0]);
    minArr.push(sizes[i][1]);
  }
  console.log(maxArr, minArr);

  // 0번 인덱스의 최댓값 과 최솟값의 곱
  // min, max 함수는 각각 () 안에 나열된 수를 비교하는 것이기 때문에 배열 그대로 넣으면 오류, 전개연산자를 이용하여 객체나 배열의 원소들을 하나씩 꺼내어서 펼쳐서 리턴시켜야 한다.
  answer = Math.max(...maxArr) * Math.max(...minArr);

  return answer;
}

이때 Math.max를 사용할때 배열을 그냥 집어넣었더니 안됐고, 찾아보니 그냥 쉼표로 나열된 수를 넣어줘야했다.

쉽게 할 수 있는 방법이 없나 찾아보던도중 전개연산자를 알게 되었고,  배열의 원소들을 하나씩 꺼내서 넘겨주기 때문에 적용할 수 있다는 것을 알게 되었다.

 

 

 

로또의 최고 순위와 최저 순위

https://school.programmers.co.kr/learn/courses/30/lessons/77484

function solution(lottos, win_nums) {
  // 포함하지 않는값
  let arr1 = lottos.filter((x) => !win_nums.includes(x));

  // 중복값 == 맞춘 최소 숫자
  let arr2 = lottos.filter((x) => win_nums.includes(x));

  // lottos에 포함된 0의 갯수
  let zero = lottos.filter((x) => x === 0);

  // 3가지 예외 경우
  if (zero.length == 6) {
    // lottos에 0이 6개면 1 or 6등이므로
    return [1, 6];
  } else if (arr2.length == 6) {
    // lottos를 전부 다 맞추면 1등만이므로
    return [1, 1];
  } else if (arr1.length == 6) {
    // lottos를 전부 다 틀릴 경우
    return [6, 6];
  } else {
    // 두 경우 다 아니라면 arr2의 갯수와 zero의 갯수로 최고, 최저 순위를 구할 수 있다.
    return [7 - arr2.length - zero.length, 7 - arr2.length];
  }
}

이것은 if문으로 예외를 만들어 처리하는것이 2개의 예외는 test에 나오는데 lottos를 전부 다 틀릴경우는 나오지 않았다. 지금보니 그렇게 생각하는게 어렵지 않은것처럼 보이는데 ㅎㅎ 그 당시에는 조금 까다로웠던것 같다. 문제도 읽고 싶지않게 길기 때문에 괜히 어려워보이기도했는데, 막상 풀어보니 그렇게 어렵지는 않은듯..?

 

 

문자열 내 마음대로 정렬하기

https://school.programmers.co.kr/learn/courses/30/lessons/12915

 

 

사실 이문제는 sort 함수를 이용해서 하면 분명 풀릴것 같은데 내부에 조건문을 제대로 못써서 고민하다가 답을 확인하였다.

 

function solution(strings, n) {
  let answer = strings.sort((a, b) => {
  	// n번째 인덱스끼리 비교하여 a[n]이 크면 1을 반환하여 a와 b의 자리를 바꾼다.
    if (a[n] > b[n]) return 1;
    // n번째 인덱스끼리 비교하여 b[n]이 크면 -1을 반환하여 a와 b의 자리를 바꾸지 않는다.
    if (a[n] < b[n]) return -1;
    // n번째 인덱스끼리 비교했을때 두값이 같다면 a와 b를 비교
    if (a[n] === b[n]) {
      if (a > b) return 1;
      if (a < b) return -1;
      return 0;
    }
  });

  return answer;
}

 

참고:

 

잘한점

- reduce, fliter, sort같은 메소드들은 어느정도 익숙해진듯하다.

- 문제를 풀며 기록을 잘 해뒀기 때문에 TIL 작성시간 감소

 

다음 목표 및 개선해야할점

- 내일 자바스크립트 스터디 준비

- 챌린지 문제 끝내기

- 못푼문제, 애매했던 문제 복기

- react 주특기 전 추천영상 시청

 

 

1. 1주차동안 한것

  • 웹개발 플러스 강의를 바탕으로 팀과 함께 웹사이트 만들기
  • 알고리즘 문제 마라톤 완주

 

 이번주차의 KEYWORD

1. JWT(Jason Web Token)

- 정보를 비밀리에 전달하거나 인증할 때 주로 사용하는 토큰으로, Json객체를 이용함

 

JWT는 Json Web Token의 약자로 일반적으로 클라이언트와 서버 사이에서 통신할 때 권한을 위해 사용하는 토큰이다. 웹 상에서 정보를 Json형태로 주고 받기 위해 표준규약에 따라 생성한 암호화된 토큰으로 복잡하고 읽을 수 없는 string 형태로 저장되어있다.

 

JWT의 구성요소

JWT는 헤더(header), 페이로드(payload), 서명(signature) 세 파트로 나눠져 있으며, 아래와 같은 형태로 구성되어 있다.

 

JWT의 동작원리

JWT의 동작원리에 대해서는 다음과 같이 설명할 수 있다.

  1. 사용자가 id와 password를 입력하여 로그인 요청을 한다.
  2. 서버는 회원DB에 들어가 있는 사용자인지 확인을 한다.
  3. 확인이 되면 서버는 로그인 요청 확인 후, secret key를 통해 토큰을 발급한다.
  4. 이것을 클라이언트에 전달한다.
  5. 서비스 요청과 권한을 확인하기 위해서 헤더에 데이터(JWT) 요청을 한다.
  6. 데이터를 확인하고 JWT에서 사용자 정보를 확인한다.
  7. 클라이언트 요청에 대한 응답과 요청한 데이터를 전달해준다.

 

 

2. API(Application Programming Interface)

API는 정의 및 프로토콜 집합을 사용하여 두 소프트웨어 구성 요소가 서로 통신할 수 있게 하는 메커니즘입니다.

 

 만약 자판기를 우리가 사용하고자 한다. 

우리는 자판기 기계가 내부적으로 어떻게 동작하는지 몰라도 인터페이스를 통해 기계를 쉽게 사용할 수 있다.

 

 다양한 기기에서 서버에 잇는 데이터를 읽고 쓰기 위해서는 서버에서 제공하는 Web API를 이용해서 처리할 수 있습니다. 

네트워크에서 기기들과 의소소통을 해나가는 규격사항을 HTTP라고 부르고 이런 Web API를 어떻게 디자인해서 만들건지 정의하는 것이 있다. 

 

 과거에는 SOAP이라는 모든 네트워크 요청과 반응을 HTML처럼생긴 XML이라는 데이터 포맷에 저장해서 주고 받았다면, 

요즘에는 REST가 보편적으로 많이 사용되어진다.  

 

REST는 총 4가지로 구성되어져 있다.

=> Post, Get, Put, Delete

=> Get을 이용하여 유저에 대한 정보를 요청하면 서버로부터 유저에 대한 데이터를 JSON이라는 포맷을 통해서 받아올 수 있다. 

이처럼 서버에서 제공하는 Web API를 통해서 서버에 있는 데이터를 읽어오거나 업데이트 할 수 있습니다. 

 

이제는 이런 Web API 뿐만아니라 라이브러리나 프레임워크에서 이용할 수 있는 클래스나 함수들을 API라고 부른다. 

=> filesAPIs, DOMAPIs, LocationAPIs....

 

이처럼 API들은 내부에서 구현사항들을 잘 숨겨두고 외부에서 사용하는 사람이 필요한 것만 노출해 두고 이것을 인터페이스, API라고 부른것.

 

 

2. 좋았던점

  •  좋은 팀을 만나 하나의 결과물을 낸 것
  • 처음 도전해서 막막했던 알고리즘 문제도 쉬운난이도지만 하나씩 해결해 나가면서 마라톤 문제들을 끝냈다는것.

 

3. 개선할점 / 아쉬운점

  • 아무래도 하루를 끝낼즈음에 TIL을 몰아서쓰려니 쉽게 쓰여지지 않고, 정리할 양이 많아져서 쓰는게 쉽지 않아진다. 
  • 문제를 풀면서 배우는게 있을때, 간단하게라도 원리나 개선사항을 메모장에 적어놓는 습관을 들였으면 시간도 절약하고, 효율적으로 TIL을 쓸 수 있었을 것.
  • 배우는게 있을 때마다 간단하게라도 메모해두면서 미리 TIL 쓸것을 적어두자.

 

4. 목표

  • 알고리즘 문제 

       마라톤 문제까지 끝냈으니, challenge 문제 끝까지 도전하기

 

  • JS문법 및 메소드 정리 

        자주 사용하는 메소드부터 정리해보자

 

  • 웹개발 플러스 강의 JWT 부분 수강하기

 

참고자료

https://www.youtube.com/watch?v=ogT267HvNuQ 

https://mangkyu.tistory.com/56

 

[Server] JWT(Json Web Token)란?

현대 웹서비스에서는 토큰을 사용하여 사용자들의 인증 작업을 처리하는 것이 가장 좋은 방법이다. 이번에는 토큰 기반의 인증 시스템에서 주로 사용하는 JWT(Json Web Token)에 대해 알아보도록 하

mangkyu.tistory.com

https://velog.io/@hahan/JWT%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80

 

JWT란 무엇인가?

JWT(Json Web Token) > 정보를 비밀리에 전달하거나 인증할 때 주로 사용하는 토큰으로, Json객체를 이용함 JWT는 Json Web Token의 약자로 일반적으로 클라이언트와 서버 사이에서 통신할 때 권한을 위해

velog.io

 

오늘한것 

1. 알고리즘 연습문제풀기 (프로그래머스) 1 ~ 11

 

몇가지 있지만 그중에서 풀기 어려웠던 문제를 써보고자 한다.

 

직사각형 별찍기

https://school.programmers.co.kr/learn/courses/30/lessons/12969

 

process.stdin.setEncoding('utf8');
process.stdin.on('data', data => {
    const n = data.split(" ");
    const a = Number(n[0]), b = Number(n[1]);
    console.log(a);
    console.log(b);
});

난생처음 제대로 풀어보는 알고리즘 문제라 어떤식으로? 뭘 건드려야 정답제출이 되는거지 같은 것도 감이 안잡혀서 고민했던 문제이다. 

process.stdin.setEncoding("utf8");
process.stdin.on("data", (data) => {
  const n = data.split(" ");// 받은 데이터를 공백으로 나눈다.
  const a = Number(n[0]),// n의 0번째 값
    b = Number(n[1]);// n의 1번째 값
  const str = "*".repeat(a);//*을 a번 반복한다.
  //직사각형의 세로길이가 b이고, i가 0부터 시작이니까 <를 사용 
  for (let i = 0; i < b; i++) {
    // str을 b-1번 반복, i가 0부터 시작이니까
    console.log(str);
  }
});

 

 

글자 가운데오게 하기

 

function solution(s) {
  // 5글자의 경우 2
  let i = s.length / 2;

  // 홀수인지 짝수인지 판별
  let j = i % 2;

  if (j) {
    // 홀수인 경우
    let k = s[Math.floor(i)];
    var answer = k;
  } else {
    //짝수인 경우
    let k = s[i - 1] + s[i];
    var answer = k;
  }

  return answer;
}

 

 

없는 숫자 더하기 

0부터 9까지의 숫자 중 일부가 들어있는 정수 배열 numbers가 매개변수로 주어집니다. numbers에서 찾을 수 없는 0부터 9까지의 숫자를 모두 찾아 더한 수를 return 하도록 solution 함수를 완성해주세요.

function solution(numbers) {
  let arr1 = [];
  let sum = 0;
  for (let i = 0; i < 10; i++) {
    arr1.push(i);
  }
  let difference = arr1.filter((x) => !numbers.includes(x));

  for (let i = 0; i < difference.length; i++) {
    sum += difference[i];
  }
  var answer = sum;
  return answer;
}

이문제는 filter를 사용하고 싶었는데, 찾아보다가 includes의 존재를 알게 되어 사용. 

 

 

 

개선해야할점

1. 자바스크립트 문법과 자료형, 기본 문법등 전체적으로 부족하다.

=> 기본적인 for문과 if 문을 이용하는 것밖에 모르고 좀 더 문제를 쉽게 간결하게 풀어주는 메소드를 활용하지 못함. 

=> 내가 푼문제도 중요하지만 새로운 해답이 없는지 찾아보거나 다른 해답도 참고해가며 풀이.

 

2. 

+ Recent posts