KIM's IT세상

자바스크립트 개념정리

데분 데분 — Sun, 29 Nov 2020 20:41:05 +0900

자바스크립트(JS)

정리에 들어가기에 앞서 자바스크립트에 대한 생각을 정리하려고 한다. 편의상 JS라고 하겠다. 수많은 프로그래밍 언어가 있지만, 그중 가장 많이 사용되는 언어가 JS다. 그 이유는 유일한 프론트엔드 언어로 대체가능한 언어가 없기 때문이다. 모든 브라우저는 JS로 돌아간다고 보면된다.

웹의 발전 = JS의 발전이라고 할 수 있다. 그렇기에 JS는 눈부신 속도로 발전하고 있다. 예전에 봤을땐 React가 분명 최신 기술이었는데 어느새 Vue가 등장하고...Typescript... 등등 빠른 속도로 기술이 개발중이다. 내가 React를 제대로 공부하고 있을 즈음에는 또 다른 강력한 프레임워크가 나올것같다...

JS는 커뮤니티가 활발하고 하나의 언어이기에 어떤 조직에서도 소통이 가능하다는 장점이 있다. 이러한 점에서 JS는 가히 최고의 프로그래밍 언어라고 생각한다. 사실 JS가 발전하면서 프론트와 백의 경계가 모호해지고 있다. JS만으로 풀스텍을 커버할 수 있다.

JS 관련 기술소개

3대장 : React, vue, angular

그외 : ES5, ES6, ES2015, CoffeeScript, TypeScript, ClojureScript,Backbone, Ember, jQuery 등등

다른 블로그에서 세 가지 프레임워크를 재밌게 비유한 글이 있어 첨부한다.

Angular는 모든 것이 준비된 주방으로 우리의 Web App에 필요한 모든 tools와 재료들을 가지고 있다. 만약 수 많은 개발자들이 일하는 거대한 회사라면, 나는 모든 개발자들이 동일한 패턴으로 일을 하는 Angular를 좋아한다.

React는 oven (오븐) 이다. 케이크를 굽는 과정에서 분명히 추가적인 tools가 필요하지만 이것은 필요한 것을 만드는 과정에서 tools를 선택하는 유연함을 줄 수 있다. 내가 기술적인 회사에서 능력있는 몇몇 senior 개발자들과 함께 일을 하고 있다면 React는 좋은 선택이다.

Vue는 쉽고 효율적인 방법으로 요리를 정말 빠르게 만들 수 있다. 만약 startup 회사에서 새로 생긴 팀에서 엄격한 deadline을 가지고 있다면 나는 VueJS를 좋아할 것이다.

바닐라 JS

자바스크립트를 잘 하기 위해서는 바닐라JS가 가장 중요하다고 한다. 위에 소개한것처럼 강력한 기술들이 많은데 왜 바닐라JS를 배워야하고 중요하다고 하는걸까?

라이브러리나 프레임워크는 화장에 비교할 수 있다. 즉, 바닐라 JS가 밑바탕이고 나머지는 이를 꾸미는 도구나 수단에 불과하다. 그렇기 때문에 바닐라 JS에 대한 깊은 공부가 필요하다. 또 다른 예로 사진을 설명할 수 있다. 당신이 사진작가라면 바닐라 JS는 사진에 대한 이해와 찍는 기술이라고 할 수 있다. 즉, 바닐라 JS를 잘 하지 못하고 React나Typescript 등을 잘하는 것은 사진의 색감이나 구도 등에 대한 베이스는 없는데, 포토샵을 잘하는 것과 같다.

이러한 이유로 바닐라 JS는 JS의 근간이라고 얘기하고 싶다.

JS의 기본 문법과 핵심

JS문은 HTML의 <body>안에, 그리고 마지막에 추가하는 것이 좋다.

console.log()가 JS에서 출력코드다.

좋은 코드와 나쁜 코드

JS는 문법의 허용범위가 넓다. 이런점에서 Python과 상당히 유사한 부분이 있다. 다만, 자칫하면 나쁜코드를 계속해서 사용하기 쉽다. 다음은 나쁜 코드와 올바른 코드의 예시다.

//나쁜 코드
a = 221;
b = a-5;
a = 4;
console.log(b,a);

//올바른 코드
let a = 221;
let b = a - 5;
a = 4;
console.log(b,a);

둘 다 [216 4]가 출력되어 결과값은 동일하다.

다만, 모든 언어에 약속이 있듯이 JS에서도 변수를 선언할 때 let이나 const를 붙여준다. 이렇게 간단한 경우에는 문제가 없지만, 코드가 길어질 때는 의도와 다르게 처리될 가능성이 농후하다.

여기서 JS를 공부해본 사람이라면 의문이 생길 수도 있다. 그냥 var를 사용하면 되는 것이 아닌가? 라는 생각이 들 것이다. 하지만 놀랍게도 var는 구식문법이고 let과 const가 최근에 나온 문법이다.

let의 특징은 언제든지 값을 바꿀 수 있고 반면 const는 constant(상수)의 약자로 값을 고정시킨다. 즉, 이전까지는 어떤 구분없이 var를 사용했다면 이제는 상황에 따라 let과 const를 유용하게 사용할 수 있게 되었다. 가령 다른 사람과 협업을 할때 다른 사람이 바꿀수있게 하려면 let을 쓰고, 허용하지 않으려면 const를 쓰면된다. 웬만하면 const를 쓰길 추천!

변수명 작성규칙
camal case에 따른다. camal case란
변수명을 언제나 소문자로 시작해서, 변수명 중간에 스페이스가 필요하면 스페이스 대신 대문자로 대체하는 일종의 rule이다.

Array와 Object

Array는 파이썬의 list와 동일한 개념이고 문법도 비슷하다. [ ] 사용

color = ["red","blue","green","pink","yellow"]
console.log(color[2])

결과값 : "green" 출력

Object는 파이썬의 Dictionary와 동일한 개념이고 문법도 비슷하다. Array와 달리 각 Value에 이름을 부여할 수 있다. { } 사용

info = {
  name : "kim", favorite_color : "blue", age : 20
}
console.log(info.name)

결과값 : "kim" 출력

함수생성

function 함수명(arg1,arg2 ... ){~~~~}

함수의 예...출력문으로 사용하는 console.log()에서 log가 바로 함수다!! console을 출력해보았다.

console.log(console)

이처럼 console이라는 Object안에 log를 포함한 다양한 함수(Function)이 들어있음을 확인할 수 있다. 자바스크립트가 어떤 식으로 만들어지고 구성되어 있는지 알 수 있는 부분이다.

`(백틱) 활용
콤마 없이 $와 {}로 출력가능

`(백틱)을 사용하지 않을경우

function sayhello(name,age){
	return "hello " + name + " you are " + age + " years old" ;
}

const greet = sayhello("kim",20)
console.log(greet)

`(백틱)을 사용할 경우

function sayhello(name,age){
	return `hello ${name} you are ${age} years old` ;
}

const greet = sayhello("kim",20)
console.log(greet)

2. Web개발의 이해 - 웹서버 vs WAS

데분 데분 — Wed, 25 Nov 2020 15:21:23 +0900

웹서버

웹 서버는 웹 서버 소프트웨어가 동작하는 컴퓨터를 말하지만, 보통 (웹 서버) 소프트웨어로 사용된다.
웹 서버의 가장 중요한 기능은 클라이언트(Client)가 요청하는 HTML 문서나 각종 리소스(Resource)를 전달하는 것.
웹 브라우저나 웹 크롤러가 요청하는 리소스는 컴퓨터에 저장된 정적인 데이터이거나 동적인 결과가 될 수 있다.

웹 서버의 시장점유율(2019년 기준)

여기서 주목할 것은 nginx이다. 2008년부터 꾸준한 성장을 보이던 nginx가 2019년부터는 Apache의 점유율을 추월했다.

※생각해보기※
네이버나 구글에서 검색어가 포함된 웹페이지를 어떻게 알 수 있을까?

웹 크롤러로 긁어온 데이터를 DB에 저장한다 -> 클라이언트 요청값(검색값)에 맞게 DB에서 가져와
해당사이트의 URL과 랜더링을 화면에 표현한다.

*구글의 경우 : 웹 크롤러가 주소별로 웹 크롤링( 페이지의 리소스가 업데이트되는 주기가 빨라서 자주 이터레이팅함 )
⇒ 리소스들을 주소별로 검토 ⇒ 검색어가 언급된 횟수 + page rank 알고리즘을 사용해 리소스기준 a tag href = "" 를
다른 사이트에서 많이 받고 영향력있는 웹사이트로 부터 받은 인기를 기준으로 랭크 매김
(기준은 인더스트리적 필요에 따라 계속적으로 바뀐다고 함) ⇒ 해당 쿼리가 발생시 ⇒
위 랭크에 맞게 링크와 리소스 일부를 렌더링 *

WAS

WAS(Web Application Server)는 일종의 미들웨어로 웹 클라이언트(보통 웹 브라우저)의 요청 중 웹 애플리케이션이 동작하도록 지원하는 목적. 웹의 요구사항이 다양해지고 점점 복잡해졌고 이를 위해 생긴 개념

미들웨어(Middle Ware)

클라이언트 쪽에 비즈니스 로직이 많을 경우, 클라이언트 관리(배포 등)로 인해 비용이 많이 발생하는 문제가 있다.

비즈니스 로직을 클라이언트와 DBMS사이의 미들웨어 서버에서 동작하도록 함으로써 클라이언트는 입력과 출력만 담당

클라이언트는 복잡한 로직이 사라지고 단순히 화면에 그 결과만 보여주면 되기에 크기가 매우 작아짐
프로그램 로직이 변경되어도 모든 클라이언트를 다시 배포할 필요없다는 장점을 가짐 (미들웨어만 변경하만 된다)

WAS의 주요기능

프로그램 실행 환경과 데이터베이스 접속 기능을 제공한다.
여러개의 트랜잭션 관리
업무를 처리하는 비즈니스 로직 수행

웹서버의 기능도 기본적으로 제공하기에 톰캣이라는 WAS만 하나 설치하고 이용이 가능
Apache같은 웹 서버를 설치하지 않아도 된다 .

규모가 커질수록 웹 서버와 WAS를 분리한다(주로 장애 처리 극복을 위해서)

WAS로만 정적, 동적 컨텐츠를 모두 처리할 수 있고 정적 컨텐츠 처리에는 웹서버와
큰 성능 차이가 없다. 그럼에도 분리해서 사용하는 이유는?

웹 서버는 상대적으로 WAS보다 간단한 구조
따라서 WAS 자체에 문제가 생겨 재시작해야할 경우, 앞단의 웹 서버가 있으면 해당 WAS를 이용하지 못하도록 하고 WAS를 재시작하면 해당 웹을 사용하는 사람은 WAS의 장애를 인지하지 못하고 이용할 수 있다.
대용량 웹 어플리케이션의 경우 무중단으로 운영하기 위해서 상당히 중요한 기능이다.

웹 서버 vs WAS

WAS도 보통 자체적으로 웹 서버 기능을 내장하고 있다.
현재는 WAS가 가지고 있는 웹 서버도 정적인 콘텐츠를 처리하는 데 있어서 성능상 큰 차이가 없다.
규모가 커질수록 웹 서버와 WAS를 분리
자원 이용의 효율성 및 장애 극복, 배포 및 유지보수의 편의성을 위해 웹서버와 WAS를 대체로 분리

1. Web개발의 이해 - FE/BE

데분 데분 — Wed, 25 Nov 2020 09:38:45 +0900

웹(Web)

월드 와이드 웹(World Wide Web)은 인터넷상으로 정보를 공유하는 공간을 의미한다.

흔히 알고 있는 WWW가 이것의 줄임말이고 간단히 말해 웹(Web)이라고 한다.

웹은 인터넷을 구성하는 다양한 서버 중의 하나이다.

서버는 각각의 포트(port)를 가진다.

위의 그림처럼 웹은 80이라는 포트번호를 가지고 있다.

웹의 작동 원리를 알기 위해서는 HTTP 개념을 알아야 한다.

HTTP

HTTP란 Hyper text transfer protocal의 약자로 서버와 클라이언트가 인터넷상에서 데이터를 주고 받기 위한 프로토콜이다. 즉, 문서뿐만 아니라 영상, 오디오 등 종류를 가리지 않고 전송이 가능하다.

프로토콜은 일종의 규정이라고 생각하면 된다. HTTP의 작동방식은 서버/클라이언트 방식을 따른다.

그림처럼 클라이언트가 서버에 먼저 요청을 하면 서버에서 응답을 하는 방식으로 작동하는 것이 클라이언트/서버 방식이다.

여기서 HTTP의 중요한 특징은 클라이언트가 요청하면 서버는 응답을 하고 연결을 끊는다. 이를 stateless라고 부르는데 stateless로 간단하게 HTTP의 장단점을 알아보면 이해가 쉬울 것이다.

HTTP의 장점 : stateless는 계속 연결 상태를 유지하는 것이 아니기에 클라이언트와 서버 간 최대 연결 개수보다 많은 요청과 응답 처리가능. 즉, 불특정다수로 하는 서비스에 적합.

*윈도우즈(Windows)는 최대 공유할 수 있는 숫자가 10개이다. 10명의 접속자 중 접속을 끊는 사람이 있어야 새로운 클라이언트가 접속할 수 있다.*

HTTP의 단점 : 연결을 끊어버리기 때문에, 클라이언트의 이전 상황을 모른다. 이러한 단점을 보완하고자 나타난 기술이 지금 우리가 잘 알고 있는 쿠키(Cookie)!!

다음은 웹의 핵심 개념인 HTTP로 웹의 동작원리를 살핀 그림이다.

헤더, 빈 줄, 바디 3가지로 나뉜다.
요청 메서드 : GET, PUT, POST, PUSH, OPTIONS 등의 요청 방식이 온다.
요청 URI : 요청하는 자원의 위치를 명시한다.
HTTP 프로토콜 버전 : 웹 브라우저가 사용하는 프로토콜 버전이다.

첫번째 줄의 요청메소드는 서버에게 요청의 종류를 알려주기 위해서 사용됩니다.

각각의 메소드 이름은 다음과 같은 의미를 가집니다.

참고로 최초의 웹 서버는 GET방식만 지원해줬습니다.

GET : 정보를 요청하기 위해서 사용한다. (SELECT)
POST : 정보를 밀어넣기 위해서 사용한다. (INSERT)
PUT : 정보를 업데이트하기 위해서 사용한다. (UPDATE)
DELETE : 정보를 삭제하기 위해서 사용한다. (DELETE)
HEAD : (HTTP)헤더 정보만 요청한다. 해당 자원이 존재하는지 혹은 서버에 문제가 없는지를 확인하기 위해서 사용한다.
OPTIONS : 웹서버가 지원하는 메서드의 종류를 요청한다.
TRACE : 클라이언트의 요청을 그대로 반환한다. 예컨데 echo 서비스로 서버 상태를 확인하기 위한 목적으로 주로 사용한다.

URL

URL(Uniform Resource Location) : 인터넷 상의 자원의 위치를 나타내는 역할

크게 3부분으로 나누어진다.

첫째, 프로토콜의 종류

둘째, 자원이 있는 서버의 IP주소 or 도메인 주소 or 포트번호

셋째, 자원의 위치

IP와 Port의 개념 쉽게 이해해보기

우리는 각자 집이라는 공간에서 살고 있다. 이때,

IP는 집 주소

Port는 집에 있는 각각의 방

로 생각하면 된다.

즉, 하나의 물리적 컴퓨터에는 여러 개의 서버가 동작할 수 있는데 각각의 서버는 포트값이 달라야한다.

생각해보기

HTTP와 HTTP뒤에 S가 붙은 HTTPS는 어떤 차이가 있을까?

HTTPS(Hyper text transfer protocal over secure socket layer)는 HTTP와 달리 서버와 클라이언트 간 주고받는 데이터를 암호화하여 처리함. 즉, HTTP보다 보안이 강화된 버전이라고 보면 된다.

브라우저(Browser)

Browser : 월드와이드웹(WWW)에서 정보를 검색, 표현하고 탐색하기 위한 소프트웨어

서버에서 전송한 데이터(HTML과 같은)가 클라이언트에 도착해야 할 곳이 Browser이다.
Browser에는 데이터를 해석해주는 파서와 데이터를 화면에 표현해주는 렌더링엔진이 포함되어 있다.

랜더링 : 브라우저의 내용들을 하나로 합쳐서 보여주는 작업

렌더링엔진 종류 : Firefox의 Gecko, Safari의 WebKit, Chrome과 Opera의 Blink 등

*크롬의 크로미움은 V8 + Blink을 포함한 구글 브라우저 오픈소스 애플리케이션으로 Blink -> 크로미움으로 바뀐 것이 아님. 크로미움은 여전히 렌더링엔진으로 Blink사용*

HTML은 대게 구조화된 정보를 가지고 있기에 트리형태로 가지게된다.

위 그림은 WebKit의 mainflow

우선 html, css파일을 파싱한다.
파싱 : 문자 단위로 하나하나 해석을 해서 담긴 의미들을 파악하고 그것들을 어떤 데이터 객체로 구조화 시키는것.
Render Tree는 HTML의 변환된 파일인 DOM Tree와 CSS의 변환된 파일인 CSS Tree가 합쳐진 것.

[웹 프로그래밍 풀스텍과정] 웹 프로그래밍 기초 학습 목표

데분 데분 — Mon, 23 Nov 2020 23:54:30 +0900

2020.11.23 부스트코스 시작!

학습 목표

웹에 대한 기본이해를 한다.
웹클라이언트와 웹백엔드의 역할을 안다.
HTML 구조화 설계를 할 수 있다
CSS 기본 스타일을 꾸밀 수 있다.
JAVA기반의 웹 백엔드 환경을 구성할 수 있다.
서블릿을 이해하고 기본 구성을 할 수 있다

기본 cs지식이 얕기 때문에 개념부터 잘 정리하면서 천천히 나아갈 생각이다.

HTML과 CSS는 어느 정도 알고 있기때문에 쉽게 넘어갈것같지만, JAVA와 JAVASCRIPT는 따로 공부를 병행해야 할 것 같다.

JAVA 입문은 '자바의 정석'을 추천받아서 이걸로 하려고 한다.

www.youtube.com/watch?v=oJlCC1DutbA&list=PLW2UjW795-f6xWA2_MUhEVgPauhGl3xIp

"자바의 정석"이라는 책을 토대로 유튜브 강의를 진행하는 방식이다.

웹 앱 개발 챕터부터 자바 지식이 필요할 것으로 보이는데 그때가서 시작할 예정이다.

[백준]DFS와 BFS

데분 데분 — Mon, 2 Nov 2020 20:02:41 +0900

문제

그래프를 DFS로 탐색한 결과와 BFS로 탐색한 결과를 출력하는 프로그램을 작성하시오. 단, 방문할 수 있는 정점이 여러 개인 경우에는 정점 번호가 작은 것을 먼저 방문하고, 더 이상 방문할 수 있는 점이 없는 경우 종료한다. 정점 번호는 1번부터 N번까지이다.

입력

첫째 줄에 정점의 개수 N(1 ≤ N ≤ 1,000), 간선의 개수 M(1 ≤ M ≤ 10,000), 탐색을 시작할 정점의 번호 V가 주어진다. 다음 M개의 줄에는 간선이 연결하는 두 정점의 번호가 주어진다. 어떤 두 정점 사이에 여러 개의 간선이 있을 수 있다. 입력으로 주어지는 간선은 양방향이다.

출력

첫째 줄에 DFS를 수행한 결과를, 그 다음 줄에는 BFS를 수행한 결과를 출력한다. V부터 방문된 점을 순서대로 출력하면 된다.

예제 입력

4 5 1

1 2

1 3

1 4

2 4

3 4

예제 출력

1 2 4 3

1 2 3 4

나의 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

def dfs(v):
    print(v, end=' ')
    visit[v] = 1
    for i in range(1, n + 1):
        if visit[i] == 0 and s[v][i] == 1:
            dfs(i)
 
def bfs(v):
    queue = [v]
    visit[v] = 0
    while(queue):
        v = queue[0]
        print(v, end=' ')
        del queue[0]
        for i in range(1, n + 1):
            if visit[i] == 1 and s[v][i] == 1:
                queue.append(i)
                visit[i] = 0
 
n, m, v = map(int, input().split())
s = [[0] * (n + 1) for i in range(n + 1)]
visit = [0 for i in range(n + 1)]
for i in range(m):
    x, y = map(int, input().split())
    s[x][y] = 1
    s[y][x] = 1
    
dfs(v)
print()
bfs(v)

 

 

풀이

각각 dfs와 bfs를 구현하는 것보다 동시에 출력하는 과정에서 애를 먹었다. dfs 처리 후 visit값을 초기화 해주는 것이 필요함

for i in range(m):

x, y = map(int, input().split())

s[x][y] = 1

s[y][x] = 1

이 코드에서 s[x][y] = 1, s[y][x]를 해줌으로써 입력값에 해당하는 노드를 방문처리하는 것

for i in range(1, n + 1):

if visit[i] == 1 and s[v][i] == 1:

queue.append(i)

visit[i] = 0

bfs 함수 정의 부분의 코드

앞에 dfs 작업 때문에 0과 1의 의미가 바뀜. 0일때가 방문처리한 상태고 1일때가 미방문 상태다.

즉, 방문하지 않았고 v랑 인접해있는 경우 해당 노드를 queue에 전부 담는다.

[백준]숫자판 점프(DFS)

데분 데분 — Mon, 2 Nov 2020 19:31:54 +0900

문제

5×5 크기의 숫자판이 있다. 각각의 칸에는 숫자(digit, 0부터 9까지)가 적혀 있다. 이 숫자판의 임의의 위치에서 시작해서, 인접해 있는 네 방향으로 다섯 번 이동하면서, 각 칸에 적혀있는 숫자를 차례로 붙이면 6자리의 수가 된다. 이동을 할 때에는 한 번 거쳤던 칸을 다시 거쳐도 되며, 0으로 시작하는 000123과 같은 수로 만들 수 있다.

숫자판이 주어졌을 때, 만들 수 있는 서로 다른 여섯 자리의 수들의 개수를 구하는 프로그램을 작성하시오.

입력

다섯 개의 줄에 다섯 개의 정수로 숫자판이 주어진다.

출력

첫째 줄에 만들 수 있는 수들의 개수를 출력한다.

예제 입력 1 복사

1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 2 1 1 1 1 1 1

예제 출력 1 복사

힌트

111111, 111112, 111121, 111211, 111212, 112111, 112121, 121111, 121112, 121211, 121212, 211111, 211121, 212111, 212121 이 가능한 경우들이다.

나의 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

def dfs(x,y,number) :
    if len(number) == 6 :
        if number not in result :
            result.append(number)
        return
    dx = [1,-1,0,0]
    dy = [0,0,1,-1]
    for k in range(4) :
        ddx = x + dx[k] #1칸 이동한 x 좌표
        ddy = y + dy[k] #1칸 이동한 y 좌표
        if 0<=ddx<5 and 0<=ddy<5 : # 범위 벗어나지 않을 때 이동한 좌표에서 다시 dfs 수행
            dfs(ddx, ddy, number + matrix[ddx][ddy])
            
result = []
matrix = [list(map(str, input().split())) for _ in range(5)]
for i in range(5) :
    for j in range(5) :
        dfs(i,j,matrix[i][j])
print(len(result))


 

풀이

처음으로 접한 DFS 문제. 난이도가 매우 쉬운 문제이지만 처음이다보니 이해하는데 한참 걸렸다.

DFS의 기본 개념은 재귀함수를 사용해서 주어진 조건에 맞게 주변을 탐색하는 것이다.

우선 입력값을 받을 수 있는 matrix를 만든다.

탐색방향은 x축으로 1칸, y축으로 1칸 움직일 수 있기 때문에 dx,dy를 다음과 같이 설정하였다.

1칸 움직인 좌표에서 또 다시 dfs를 사용해서 계속해서 이동하게끔 구현했다.

if 문을 써서 길이가 6일 때 return하게끔 함으로써 마무리!

[프로그래머스]2019 KAKAO BLIND RECRUITMENT실패율

데분 데분 — Mon, 26 Oct 2020 14:31:37 +0900

실패율

슈퍼 게임 개발자 오렐리는 큰 고민에 빠졌다. 그녀가 만든 프랜즈 오천성이 대성공을 거뒀지만, 요즘 신규 사용자의 수가 급감한 것이다. 원인은 신규 사용자와 기존 사용자 사이에 스테이지 차이가 너무 큰 것이 문제였다.

이 문제를 어떻게 할까 고민 한 그녀는 동적으로 게임 시간을 늘려서 난이도를 조절하기로 했다. 역시 슈퍼 개발자라 대부분의 로직은 쉽게 구현했지만, 실패율을 구하는 부분에서 위기에 빠지고 말았다. 오렐리를 위해 실패율을 구하는 코드를 완성하라.

실패율은 다음과 같이 정의한다.
- 스테이지에 도달했으나 아직 클리어하지 못한 플레이어의 수 / 스테이지에 도달한 플레이어 수

전체 스테이지의 개수 N, 게임을 이용하는 사용자가 현재 멈춰있는 스테이지의 번호가 담긴 배열 stages가 매개변수로 주어질 때, 실패율이 높은 스테이지부터 내림차순으로 스테이지의 번호가 담겨있는 배열을 return 하도록 solution 함수를 완성하라.

제한사항

스테이지의 개수 N은 1 이상 500 이하의 자연수이다.
stages의 길이는 1 이상 200,000 이하이다.
stages에는 1 이상 N + 1 이하의 자연수가 담겨있다.
- 각 자연수는 사용자가 현재 도전 중인 스테이지의 번호를 나타낸다.
- 단, N + 1 은 마지막 스테이지(N 번째 스테이지) 까지 클리어 한 사용자를 나타낸다.
만약 실패율이 같은 스테이지가 있다면 작은 번호의 스테이지가 먼저 오도록 하면 된다.
스테이지에 도달한 유저가 없는 경우 해당 스테이지의 실패율은 0 으로 정의한다.

입출력 예

Nstagesresult

5	[2, 1, 2, 6, 2, 4, 3, 3]	[3,4,2,1,5]
4	[4,4,4,4,4]	[4,1,2,3]

입출력 예 설명

입출력 예 #1
1번 스테이지에는 총 8명의 사용자가 도전했으며, 이 중 1명의 사용자가 아직 클리어하지 못했다. 따라서 1번 스테이지의 실패율은 다음과 같다.

1 번 스테이지 실패율 : 1/8

2번 스테이지에는 총 7명의 사용자가 도전했으며, 이 중 3명의 사용자가 아직 클리어하지 못했다. 따라서 2번 스테이지의 실패율은 다음과 같다.

2 번 스테이지 실패율 : 3/7

마찬가지로 나머지 스테이지의 실패율은 다음과 같다.

3 번 스테이지 실패율 : 2/4
4번 스테이지 실패율 : 1/2
5번 스테이지 실패율 : 0/1

각 스테이지의 번호를 실패율의 내림차순으로 정렬하면 다음과 같다.

[3,4,2,1,5]

입출력 예 #2

모든 사용자가 마지막 스테이지에 있으므로 4번 스테이지의 실패율은 1이며 나머지 스테이지의 실패율은 0이다.

[4,1,2,3]

나의 풀이

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

def solution(N, stages):
    answer = []
    value = []
    index=[]
    length = len(stages)
    #스테이지별 실패율 구하고 빈 리스트에 담기
    for k in range(1,N+1) :
        length = length - stages.count(k-1)
        if length == 0 :   # v를 구할 때 0으로 나누는 오류를 방지하는 조건
            length += 1
        v = stages.count(k) / length
        value.append(v)
    print(type(length))
    #실패율 리스트에 인덱스를 부여 후 정렬
    for i,j in enumerate(value) :
        index.append([i+1,j])
    index.sort(key=lambda x : x[1],reverse=True)
    for t in index :
        answer.append(t[0])
    return answer


 
[실패율 정의]실패율 = 해당 스테이지에 머물러 있는 사람 수 / 해당 스테이지 이상을 도전하고 있는 전체 사람 수
v = stages.count(k) / length
 
[코드 리뷰]for k in range(1,N+1) :
        length = length - stages.count(k-1)
length는 [전체 스테이지 사람 수 - 이전 스테이지 사람 수]로 정의
 
for i,j in enumerate(value) :
        index.append([i+1,j])
    index.sort(key=lambda x : x[1],reverse=True)
스테이지별 실패율을 담은 리스트 value에 인덱스를 부여 후 lambda를 활용해 정렬함
index = [(index,실패율),(index,실패율)...] 이런 식으로 구성
따라서 x[0] = 인덱스, x[1] = 실패율
 
[느낀 점]실패율을 구한 후 lambda 적용을 못해서 많이 헤맸다. 앞으로 알고리즘 문제에서 lambda 활용을 염두해두고 풀이를 시도해봐야겠다고 느낌
 
 
 
 

[프로그래머스]2018 KAKAO BLIND RECRUITMENT[1차] 비밀지도

데분 데분 — Sat, 24 Oct 2020 22:00:23 +0900

비밀지도

네오는 평소 프로도가 비상금을 숨겨놓는 장소를 알려줄 비밀지도를 손에 넣었다. 그런데 이 비밀지도는 숫자로 암호화되어 있어 위치를 확인하기 위해서는 암호를 해독해야 한다. 다행히 지도 암호를 해독할 방법을 적어놓은 메모도 함께 발견했다.

지도는 한 변의 길이가 n인 정사각형 배열 형태로, 각 칸은 공백(" ) 또는벽(#") 두 종류로 이루어져 있다.
전체 지도는 두 장의 지도를 겹쳐서 얻을 수 있다. 각각 지도 1과 지도 2라고 하자. 지도 1 또는 지도 2 중 어느 하나라도 벽인 부분은 전체 지도에서도 벽이다. 지도 1과 지도 2에서 모두 공백인 부분은 전체 지도에서도 공백이다.
지도 1과 지도 2는 각각 정수 배열로 암호화되어 있다.
암호화된 배열은 지도의 각 가로줄에서 벽 부분을 1, 공백 부분을 0으로 부호화했을 때 얻어지는 이진수에 해당하는 값의 배열이다.

네오가 프로도의 비상금을 손에 넣을 수 있도록, 비밀지도의 암호를 해독하는 작업을 도와줄 프로그램을 작성하라.

입력 형식

입력으로 지도의 한 변 크기 n 과 2개의 정수 배열 arr1, arr2가 들어온다.

1 ≦ n ≦ 16
arr1, arr2는 길이 n인 정수 배열로 주어진다.
정수 배열의 각 원소 x를 이진수로 변환했을 때의 길이는 n 이하이다. 즉, 0 ≦ x ≦ 2n - 1을 만족한다.

출력 형식

원래의 비밀지도를 해독하여 '#', 공백으로 구성된 문자열 배열로 출력하라.

입출력 예제

매개변수값

n	5
arr1	[9, 20, 28, 18, 11]
arr2	[30, 1, 21, 17, 28]
출력	["#####","# # #", "### #", "# ##", "#####"]

매개변수값

n	6
arr1	[46, 33, 33 ,22, 31, 50]
arr2	[27 ,56, 19, 14, 14, 10]
출력	["######", "### #", "## ##", " #### ", " #####", "### # "]

나의풀이

1
2
3
4
5
6
7
8
9
10

def solution(n, arr1, arr2):
    answer = []
    for num1,num2 in zip(arr1,arr2) :
        tmp = str(bin(num1 | num2))[2:] # num1과 num2의 합집합
        if len(tmp) < n :
            tmp = '0' * (n-len(tmp)) + tmp # n보다 길이가 작을 경우 부족한만큼 0을 채워넣는다
        tmp = tmp.replace('1','#')
        tmp = tmp.replace('0',' ')
        answer.append(tmp)     
    return answer
Colored by Color Scripter

cs

 
항상 두 개를 비교하여 연산할 땐 zip 염두해두기
 
tmp = str(bin(num1 | num2))[2:]
bin은 이진법으로 바꿔주는 함수고 앞에 0b가 붙어서 잘라준다. ex) bin(10) = 0b1010num1 | num2 는 합집합을 의미 ex) num1 : 10000, num2 : 00110 -> (num1 | num2) : 10110 
tmp = '0' * (n-len(tmp)) + tmp 
tmp의 길이가 n보다 작을 경우 그만큼 0을 추가ex) n = 6 인데 tmp가 11010 이라면 011010 으로 변환! 이렇게 해야 공백처리가 된다. 

[프로그래머스] 2018 KAKAO BLIND RECRUITMENT [1차] 다트 게임

데분 데분 — Wed, 21 Oct 2020 23:47:13 +0900

문제 설명

다트 게임

카카오톡 게임별의 하반기 신규 서비스로 다트 게임을 출시하기로 했다. 다트 게임은 다트판에 다트를 세 차례 던져 그 점수의 합계로 실력을 겨루는 게임으로, 모두가 간단히 즐길 수 있다.
갓 입사한 무지는 코딩 실력을 인정받아 게임의 핵심 부분인 점수 계산 로직을 맡게 되었다. 다트 게임의 점수 계산 로직은 아래와 같다.

다트 게임은 총 3번의 기회로 구성된다.
각 기회마다 얻을 수 있는 점수는 0점에서 10점까지이다.
점수와 함께 Single(S), Double(D), Triple(T) 영역이 존재하고 각 영역 당첨 시 점수에서 1제곱, 2제곱, 3제곱 (점수1 , 점수2 , 점수3 )으로 계산된다.
옵션으로 스타상(*) , 아차상(#)이 존재하며 스타상(*) 당첨 시 해당 점수와 바로 전에 얻은 점수를 각 2배로 만든다. 아차상(#) 당첨 시 해당 점수는 마이너스된다.
스타상(*)은 첫 번째 기회에서도 나올 수 있다. 이 경우 첫 번째 스타상(*)의 점수만 2배가 된다. (예제 4번 참고)
스타상(*)의 효과는 다른 스타상(*)의 효과와 중첩될 수 있다. 이 경우 중첩된 스타상(*) 점수는 4배가 된다. (예제 4번 참고)
스타상(*)의 효과는 아차상(#)의 효과와 중첩될 수 있다. 이 경우 중첩된 아차상(#)의 점수는 -2배가 된다. (예제 5번 참고)
Single(S), Double(D), Triple(T)은 점수마다 하나씩 존재한다.
스타상(*), 아차상(#)은 점수마다 둘 중 하나만 존재할 수 있으며, 존재하지 않을 수도 있다.

0~10의 정수와 문자 S, D, T, *, #로 구성된 문자열이 입력될 시 총점수를 반환하는 함수를 작성하라

입력 형식

점수|보너스|[옵션]으로 이루어진 문자열 3세트.
예) 1S2D*3T

점수는 0에서 10 사이의 정수이다.
보너스는 S, D, T 중 하나이다.
옵선은 *이나 # 중 하나이며, 없을 수도 있다.

출력 형식

3번의 기회에서 얻은 점수 합계에 해당하는 정수값을 출력한다.
예) 37

입출력 예제

예제dartResultanswer설명

1	1S2D*3T	37	11 * 2 + 22 * 2 + 33
2	1D2S#10S	9	12 + 21 * (-1) + 101
3	1D2S0T	3	12 + 21 + 03
4	1S2T3S	23	11 * 2 * 2 + 23 * 2 + 31
5	1D#2S*3S	5	12 * (-1) * 2 + 21 * 2 + 31
6	1T2D3D#	-4	13 + 22 + 32 * (-1)
7	1D2S3T*	59	12 + 21 * 2 + 33 * 2

나의 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

import re
 
def solution(dartResult):
    bonus = {'S' : 1, 'D' : 2, 'T' : 3}
    option = {'' : 1, '*' : 2, '#' : -1}
    p = re.compile('(\d+)([SDT])([*#]?)')
    dart = p.findall(dartResult)
    print(dart) # [('1', 'S', ''), ('2', 'D', '*'), ('3', 'T', '')] 형태로 출력
    for i in range(len(dart)):
        if dart[i][2] == '*' and i > 0:
            dart[i-1] *= 2
        dart[i] = int(dart[i][0]) ** bonus[dart[i][1]] * option[dart[i][2]]
 
    answer = sum(dart)
    return answer
Colored by Color Scripter

cs


풀이정규 표현식(Regular Expression)을 사용할 수 있는 내장 함수 re를 활용했습니다.
 
bonus = {'S' : 1, 'D' : 2, 'T' : 3}
option = {'' : 1, '*' : 2, '#' : -1}
숫자/보너스/옵션 3가지로 이루어져 있기때문에 각각을 문제에 맞게 딕셔너리에 담았습니다.
 
p = re.compile('(\d+)([SDT])([*#]?)')
(\d+)는 모든 숫자, ([SDT])는 S,D,T중 하나, ([*#]?)은 *,#,공백 중 하나로 구성한다는 코드입니다.
 
dart = p.findall(dartResult)
findall 메소드를 실행하면 해당정규식(p)에 해당하는 모든 문자열을 리스트 형태로 반환합니다.
 
if dart[i][2] == '*' and i > 0:
            dart[i-1] *= 2
*가 처음 이후에 나올 경우 전 단계 스코어에 2배를 곱하라는 조건입니다. 
이렇게 나온 각 시행별 점수를 합하면 정답!! 
 

 

github.com/minjae8138/algorithm_python3.git

minjae8138/algorithm_python3

Contribute to minjae8138/algorithm_python3 development by creating an account on GitHub.

github.com

KIM's IT세상

자바스크립트 개념정리

자바스크립트(JS)

JS 관련 기술소개

3대장 : React, vue, angular

그외 : ES5, ES6, ES2015, CoffeeScript, TypeScript, ClojureScript,Backbone, Ember, jQuery 등등

다른 블로그에서 세 가지 프레임워크를 재밌게 비유한 글이 있어 첨부한다.

Angular는 모든 것이 준비된 주방으로 우리의 Web App에 필요한 모든 tools와 재료들을 가지고 있다. 만약 수 많은 개발자들이 일하는 거대한 회사라면, 나는 모든 개발자들이 동일한 패턴으로 일을 하는 Angular를 좋아한다.

Vue는 쉽고 효율적인 방법으로 요리를 정말 빠르게 만들 수 있다. 만약 startup 회사에서 새로 생긴 팀에서 엄격한 deadline을 가지고 있다면 나는 VueJS를 좋아할 것이다.

바닐라 JS

자바스크립트를 잘 하기 위해서는 바닐라JS가 가장 중요하다고 한다. 위에 소개한것처럼 강력한 기술들이 많은데 왜 바닐라JS를 배워야하고 중요하다고 하는걸까?

이러한 이유로 바닐라 JS는 JS의 근간이라고 얘기하고 싶다.

JS의 기본 문법과 핵심

JS문은 HTML의 <body>안에, 그리고 마지막에 추가하는 것이 좋다.

console.log()가 JS에서 출력코드다.

좋은 코드와 나쁜 코드

JS는 문법의 허용범위가 넓다. 이런점에서 Python과 상당히 유사한 부분이 있다. 다만, 자칫하면 나쁜코드를 계속해서 사용하기 쉽다. 다음은 나쁜 코드와 올바른 코드의 예시다.

둘 다 [216 4]가 출력되어 결과값은 동일하다.

다만, 모든 언어에 약속이 있듯이 JS에서도 변수를 선언할 때 let이나 const를 붙여준다. 이렇게 간단한 경우에는 문제가 없지만, 코드가 길어질 때는 의도와 다르게 처리될 가능성이 농후하다.

여기서 JS를 공부해본 사람이라면 의문이 생길 수도 있다. 그냥 var를 사용하면 되는 것이 아닌가? 라는 생각이 들 것이다. 하지만 놀랍게도 var는 구식문법이고 let과 const가 최근에 나온 문법이다.

변수명 작성규칙 camal case에 따른다. camal case란 변수명을 언제나 소문자로 시작해서, 변수명 중간에 스페이스가 필요하면 스페이스 대신 대문자로 대체하는 일종의 rule이다.

Array와 Object

Array는 파이썬의 list와 동일한 개념이고 문법도 비슷하다. [ ] 사용

결과값 : "green" 출력

Object는 파이썬의 Dictionary와 동일한 개념이고 문법도 비슷하다. Array와 달리 각 Value에 이름을 부여할 수 있다. { } 사용

결과값 : "kim" 출력

함수생성

function 함수명(arg1,arg2 ... ){~~~~}

이처럼 console이라는 Object안에 log를 포함한 다양한 함수(Function)이 들어있음을 확인할 수 있다. 자바스크립트가 어떤 식으로 만들어지고 구성되어 있는지 알 수 있는 부분이다.

`(백틱) 활용 콤마 없이 $와 {}로 출력가능

`(백틱)을 사용하지 않을경우

`(백틱)을 사용할 경우

2. Web개발의 이해 - 웹서버 vs WAS

웹서버

WAS

1. Web개발의 이해 - FE/BE

웹(Web)

HTTP

URL

IP와 Port의 개념 쉽게 이해해보기

생각해보기

브라우저(Browser)

[웹 프로그래밍 풀스텍과정] 웹 프로그래밍 기초 학습 목표

[백준]DFS와 BFS

문제

입력

출력

예제 입력

예제 출력

나의 코드

풀이

[백준]숫자판 점프(DFS)

문제

입력

출력

예제 입력 1 복사

예제 출력 1 복사

힌트

나의 코드

풀이

[프로그래머스]2019 KAKAO BLIND RECRUITMENT실패율

실패율

입출력 예

나의 풀이

[실패율 정의]

[코드 리뷰]

[느낀 점]

[프로그래머스]2018 KAKAO BLIND RECRUITMENT[1차] 비밀지도

비밀지도

입력 형식

출력 형식

입출력 예제

나의풀이

[프로그래머스] 2018 KAKAO BLIND RECRUITMENT [1차] 다트 게임

문제 설명

다트 게임

입력 형식

출력 형식

입출력 예제

나의 코드

변수명 작성규칙
camal case에 따른다. camal case란
변수명을 언제나 소문자로 시작해서, 변수명 중간에 스페이스가 필요하면 스페이스 대신 대문자로 대체하는 일종의 rule이다.

`(백틱) 활용
콤마 없이 $와 {}로 출력가능