소소한 코딩일지

스키마(Schema) 데이터 타입의 집합, API에 반환할 데이터의 타입에 대해서 생각해야 하고, 이 타입에 대해서 충분한 이야기를 나누고, 제대로 정의해두어야 한다. 스키마 우선주의(Schema First)는 디자인 방법론으로 이를 통해서 모든 팀원이 데이터 타입에 대해서 숙지할 수 있도록 유도한다. 백엔드 팀에서는 어떤 데이터를 저장하고 전달해야 하는지 이해할 수 있고, 프런트엔드 팀에서는 사용자 인터페이스를 작업할 때 필요한 데이터를 정의할 수 있다. GraphQL에서도 스키마 정의를 위해 SDL(Schema Definition Language)를 지원한다. 프로그램 언어, 프레임워크에 상관없는 GraphQL의 쿼리 언어처럼, 사용법이 항상 동일하다. SDL을 통해 GraphQL 스키마 문서를 만 ..

프로그래머스 '가장 긴 팰린드롬' 문제 풀이입니다. 문제 링크 코딩테스트 연습 - 가장 긴 팰린드롬 앞뒤를 뒤집어도 똑같은 문자열을 팰린드롬(palindrome)이라고 합니다. 문자열 s가 주어질 때, s의 부분문자열(Substring)중 가장 긴 팰린드롬의 길이를 return 하는 solution 함수를 완성해 주세요. 예를들 programmers.co.kr ● 문제 간단 설명 주어진 문자열 내에서 찾을 수 있는 가장 긴 팰린드롬(palindrome)을 찾는 문제이다. - 팰린드롬(palindrome): 앞뒤로 뒤집어도 똑같은 문자열 ex) 토마토 ● 문제 해결 방향 가장 긴 문자열을 찾는 문제이기 때문에 가장 긴 부분 문자열 (len(s))에서부터 1까지 반복하면서 팰린드롬이 나오면 return 하도..

프로그래머스 '[3차] 방금 그 곡' 문제 풀이입니다. 문제 링크 코딩테스트 연습 - [3차] 방금그곡 방금그곡 라디오를 자주 듣는 네오는 라디오에서 방금 나왔던 음악이 무슨 음악인지 궁금해질 때가 많다. 그럴 때 네오는 다음 포털의 '방금그곡' 서비스를 이용하곤 한다. 방금그곡에서는 TV, programmers.co.kr ● 문제 간단 설명 멜로디에 해당하는 문자열 'm'과 음악이 플레이된 시간과 멜로디를 담고 있는 플레이리스트 배열 'musicInfos' 두 가지가 주어진다. 플레이리스트 중에서 멜로디를 오래 재생한 곡의 이름을 return 하는 문제이다. ● 문제 해결 방향 멜로디 문자열과 플레이리스트 배열 내 각각의 재생된 멜로디 문자열을 문자마다 1대 1로 비교가 필요하다고 생각했다. 그래서 멜..

SQL과 GraphQL GraphQL은 쿼리 데이터베이스용으로 만들어진 개념을 인터넷에 적용해 만들어진 것 GraphQL 쿼리 하나로 데이터 베이스 내에 존재하는 데이터를 모아서 전달할 수 있다. GraphQL과 SQL 둘다 Query Language이지만 사용환경이 다르다. SQL의 경우 데이터 베이스로 보내지만, GraphQL은 API로 보낸다. SQL의 데이터는 데이터 테이블 내에 존재하지만, GraphQL의 데이터는 단일 데이터 베이스, 여러 개의 데이터 베이스, 파일 시스템, RestAPI, WebSocket, 다른 GraphQL API에서 데이터를 받아올 수 있다. 정리하면 SQL은 데이터 베이스용, GraphQL은 인터넷용 쿼리 언어이다. SELECT, INSERT, DELETE, UPDAT..

그래프 ( Graph ) 그래프는 상호 연관 관계에 놓여 있는 객체 집합을 표현할 때 사용, 객체 간의 관계를 그래프라고 생각하면 편하다. 각 포인트를 노드(Node)나 정점(Vertex)라고 하고, 각 노드/정점을 잇는 선을 엣지(Edge)라고 한다. 그래프는 표현식으로도 나타낼 수 있다. // 노드 or 정점 vertices = { 1, 2, 3, 4 } // Edge edges = { {1, 2}, {1, 3}, {1, 4}, {2, 4}, {3, 4}, } 위 표현식을 그림으로 나타내면 다음과 같이 그려진다. 시작 노드와 끝 노드의 구분 여부에 따라 그래프 종류를 구분할 수 있다. 무방향 그래프: 시작 노드와 끝 노드를 마음대로 정하면 된다. 특정한 번호 순서를 따르지 않는다. 비선형 데이터 구조..

GraphQL 이란 API를 만들 때 사용할 수 있는 쿼리 언어, 쿼리에 대한 데이터를 받을 수 있는 런타임이기도 하다. GraphQL 쿼리는 사용자가 필요한 데이터만 받도록 작성할 수 있다. 쿼리문을 중첩하여 다양한 객체를 응답 데이터로 받아올 수 있고, 하나의 요청으로 두 가지 데이터 타입에 대한 응답을 얻어낼 수 있다. 마찬가지로 원하지 않는 데이터에 대해서는 제외하여 요청을 보낼 수 있다. GraphQLdms 선언형(declarative) 데이터 페칭(fetching)라고 불린다. 어떤 데이터를 불러올 것인지, 요구사항만 작성하면 되고, 어떻게 데이터를 가져올 것인지는 신경 쓰지 않아도 된다. GraphQL의 서버 라이브러리는 다양한언어로 만들어져 있기 때문에 유연한 사용성을 보인다. GraphQ..

프로그래머스 '약수의 개수와 덧셈' 문제 풀이입니다. 문제 링크 코딩테스트 연습 - 약수의 개수와 덧셈 두 정수 left와 right가 매개변수로 주어집니다. left부터 right까지의 모든 수들 중에서, 약수의 개수가 짝수인 수는 더하고, 약수의 개수가 홀수인 수는 뺀 수를 return 하도록 solution 함수를 완성해주 programmers.co.kr ● 문제 간단 설명 주어진 두 숫자 사이의 수에 대해서 약수의 개수가 홀수인 경우 그 값을 빼고, 짝수인 경우 값을 더하여 그 계산 값을 return 하는 문제 ● 문제 해결 방향 약수를 다 찾아내는 방식이 가장 먼저 떠올라 반복문을 통해 각 수의 약수의 개수를 구하고, 그 개수의 홀 짝 여부를 판단하여 값을 계산해주었다. ● 문제 해결 코드 de..

프로그래머스 '신고 결과받기' 문제 풀이입니다. 문제 링크 코딩테스트 연습 - 신고 결과 받기 문제 설명 신입사원 무지는 게시판 불량 이용자를 신고하고 처리 결과를 메일로 발송하는 시스템을 개발하려 합니다. 무지가 개발하려는 시스템은 다음과 같습니다. 각 유저는 한 번에 한 명의 programmers.co.kr ● 문제 간단 설명 신고 Report를 통해 k번 이상 신고당한 유저를 찾고, 신고한 유저가 정지시킨 유저의 수를 배열로 return 하는 문제입니다. ● 문제 해결 방향 우선 각 report를 통해 유저들의 신고당한 횟수를 카운트하고, 신고당한 횟수가 k번이 넘는 유저의 경우, report에서 신고한 유저를 찾아 그 유저가 정지시킨 횟수를 카운트 해주었습니다. ● 문제 해결 코드 def solu..

반복문은 아주 많이 사용되는 문법이다. JS에는 많은 반복문이 존재한다. 일부 잘 사용하지 않던 반복문에 대해 잘 기억나지 않아, 이번에 살짝 정리해보려고 한다. 반복문의 종류 for 문 while문 do…while문 lable 문 for …in 문 for …of 문 forEach문 for 문 for문은 특정 조건이 거짓이 되기 전까지 반복한다. for(let i = 0; i < 5; i++) { console.log(i); } 이후 나올 while과의 차이점은 정해진 횟수만 반복한다는 점이다. for 문 내부에는 초기 값선언, 반복 조건 구문, 업데이트 구문 세 가지 구문을 작성해야 한다. while문 특정 조건이 참일 경우 계속 반복한다. let n = 0; let x = 0; while ( n < ..

현상 Vuex의 store에서 state가 update 되었지만, 새로운 state에 대해서 UI는 업데이트되지 않는 현상이 발생했다. 해결 과정 두 가지 부분에서 잘못된 부분을 발견했다. 우선, 평가지 파일을 업로드하는 부분에서 업로드한 파일을 곧바로 사용하지 않고, 배열에 push 해서 사용하고 있었다. 파일 객체를 사용하는 부분에서는 모두 배열의 0번째를 가리키고 있어, 파일이 추가되어도 절대 바뀌지 않았다. 무슨 생각으로 코드를 짠 건지... 첫 번째 문제를 해결했지만 위 파일명이 새로운 파일의 이름으로 바뀔 뿐 아래 테이블에 새로운 데이터 반영되지 않았다. 테이블 컴포넌트의 created()를 통해 확인해보니, 처음 파일을 업로드했을 때는 아래 컴포넌트가 파일 데이터로 랜더링 되지만 다음 새로운..