[프로그래머스💯] 코딩테스트 연습 > 힙(HEAP) > 이중우선순위큐
해답) def solution(operations): q = [] for i in operations: if i[0] == "I": q.append(int(i[2:])) elif i == "D 1" and len(q)!=0: q.pop(q.index(max(q))) elif i == "D -1" and len(q)!=0: q.pop(q.index(min(q))) if len(q) == 0 : return [0,0] return [max(q), min(q)] 풀이) 그냥 문제 말 그대로 조건문만 걸고 풀었습니다. 이중순위 뭐시기로 머리쓰기 귀찮아서 혹시나 하고 해봤는데 바로 되더라구요... 출처: 프로그래머스 코딩 테스트 연습, https://programmers.co.kr/learn/challenges
2020. 1. 26.
[React🌌] 초보를 위한 create-react-app 없이 빌드하기 / ③ webpack-dev-server & react-hot-loader 적용/ 실시간 업데이트 기능
전 포스팅에도 말했듯이, 새로 코드를 수정할 때마다 ,웹팩을 계속해서 다시 구성하면 개발하는데에 시간이 엄청나게 소요될 것입니다.😒 오늘 우리의 목표는, webpack-dev-server와 react-hot-loader 를 이용해, React 프로젝트의 실시간 리로딩 기능을 구현할 것입니다!👍 설치 이전 모듈들과 마찬가지로 다음과 같이 개발자 모드로 설치를 해줍시다. 설치된 것을 확인 후, 바벨 로더 플러그인 부분에 react-hot-loader를 추가해줍니다. babel 과 webpack-dev-server 를 연결해 주는 역할입니다. 우리는 앞으로 webpack-dev-server 를 이용해 구성을 할 것이므로 package.json 에서 빌드 방식을 변경해주어야 합니다. 이제는 webpack 이아닌..
2020. 1. 25.
[프로그래머스💯] 코딩테스트 연습 > 완전탐색 > 카펫
해답) def solution(brown, red): answer = [] wid_hei_sum = int(brown/2 + 2) for height in range(1,wid_hei_sum): width = wid_hei_sum-height redsum = (width-2)*(height-2) if redsum == red : answer.append(width) answer.append(height) break return answer red는 안에 직사각형이고 brown 은 직사각형을 감싸는 테두리입니다. 수학적으로 생각해본다면 테두리 가로세로에서 각각 -2 를 한 길이가 직사각형의 가로세로 입니다. 세로의 길이를 1부터 높여가며 완전탐색을 돌면서 red 타일 개수가 일치하는지를 찾습니다. 출처: ..
2020. 1. 25.
[React🌌] 초보를 위한 create-react-app 없이 빌드하기 / ② babel이란? babel 밑 webpack 세팅
babel 이란? 아시다시피 자바스크립트는 시대가 변함에 따라 점점 발전하고 있습니다. 그만큼 그 발전한 버전을 따라주지 못하는 브라우저 혹은 환경이 있기 마련이죠. babel은 최신 문법을 써도 이전 버전 브라우저 환경에서도 사용할 수 있도록 최신 문법을 특정 예전버전의 js 로 변환해주는 툴 입니다! 쉽게말하자면 최신문법을 이전문법으로 바꿔주는 API 이죠. 😮 babel 사이트에서 지원하는 예시입니다. // Babel Input: ES2015 arrow function [1, 2, 3].map((n) => n + 1); // Babel Output: ES5 equivalent [1, 2, 3].map(function(n) { return n + 1; }); 바벨 가이드 : https://babelj..
2020. 1. 21.
[JS] event.preventDefault() 간단 설명 😊/ preventDefault란?
preventDefault 란? a 태그나 submit 태그는 누르게 되면 href 를 통해 이동하거나 , 창이 새로고침하여 실행됩니다. preventDefault 를 통해 이러한 동작을 막아줄 수 있습니다. 주로 사용되는 경우는 1. a 태그를 눌렀을때도 href 링크로 이동하지 않게 할 경우 2. form 안에 submit 역할을 하는 버튼을 눌렀어도 새로 실행하지 않게 하고싶을 경우 (submit은 작동됨) 1번은 직관적이니까 예시는 생략하고 2번을 예시로 들자면 예시 이러한 구구단의 정답을 받는 form 이 있고, 거기에 EventListener 를 추가해주었습니다. 정답 form 밑에는 resultDiv 가 있어서 정답 여부를 출력하게끔 하였습니다. 이 함수를 실행하면 밑에 정답! 혹은 땡! 이..
2020. 1. 19.
[React🌌] 초보를 위한 create-react-app 없이 빌드하기 / ① 설치 및 세팅
아마 대부분 React 개발을 하실 때 $ npx create-react-app 요런 명령어를 이용하셔서 간편하게 설치하셨을거라 생각합니다. 이 명령어 하나만으로 참 편리하게 알아서 뚝딱뚝딱 필요한 것들이 절로 생성되죠.😮 하지만 이러한 명령어 없이 맨 바닥에서도 react 웹을 만들 수 있습니다! 이것은 React의 원리와 모듈들의 기능을 이해하는데에 도움이 됩니다. 그럼 시작해봅시다!😆 * Node.js 는 기존에 설치가 되어있어야 합니다. ( 설치 바로가기 : https://nodejs.org/ko/download/ ) 1. 기본이 될 HTML 만들기 C:\no_create_react_web\index.html 웹의 틀이 될 html 을 만들어줍니다. 저는 C:\no_create_react_web ..
2020. 1. 17.
[프로그래머스💯] 코딩테스트 연습 > 깊이/너비 우선 탐색(DFS/BFS) > 네트워크 > 다른 사람의 풀이
해답) def solution(n, computers): check = [1] * n network = 0 def find(Coms, Com, Com_index): check[Com_index] = 0 for objCom_i,obj_com in enumerate(Com): if obj_com: if check[objCom_i]: find(Coms, Coms[objCom_i], objCom_i) for index, com in enumerate(computers): if check[index]: find(computers, com,index) network += 1 return network 풀이) * check = 컴퓨터가 네트워크에 포함되었는지 여부를 반환합니다. (1: 아직안됨 0: 연결됨) 1. 한..
2020. 1. 16.
[CSS] display란? / display 속성 / display 종류 / 🖼
display 속성이란? display 태그는 화면에 어떻게 드러나게 할지를 결정하는 속성입니다. 사실 이렇게 들으면 감이 잘 안오는데 요소 크기를 어떻게 결정할건가 를 결정하는 속성이라고 이해하시는게 조금 더 감이 잘 잡히는 것 같습니다! display 속성값의 종류 display 속성값은 4가지 입니다. none block inline inline-block 예제를 보면서 설명하는게 이해가 가장 빠를 것 같습니다. HTML I am none I am block I am inline I am inline-block CSS body div { font-size: large; margin-bottom: 50px; } .none_div { display: none; background-color: bluev..
2020. 1. 14.
[프로그래머스💯] 코딩테스트 연습 > 힙(HEAP) > 이중우선순위큐
해답) def solution(operations): q = [] for i in operations: if i[0] == "I": q.append(int(i[2:])) elif i == "D 1" and len(q)!=0: q.pop(q.index(max(q))) elif i == "D -1" and len(q)!=0: q.pop(q.index(min(q))) if len(q) == 0 : return [0,0] return [max(q), min(q)] 풀이) 그냥 문제 말 그대로 조건문만 걸고 풀었습니다. 이중순위 뭐시기로 머리쓰기 귀찮아서 혹시나 하고 해봤는데 바로 되더라구요... 출처: 프로그래머스 코딩 테스트 연습, https://programmers.co.kr/learn/challenges
[React🌌] 초보를 위한 create-react-app 없이 빌드하기 / ③ webpack-dev-server & react-hot-loader 적용/ 실시간 업데이트 기능
전 포스팅에도 말했듯이, 새로 코드를 수정할 때마다 ,웹팩을 계속해서 다시 구성하면 개발하는데에 시간이 엄청나게 소요될 것입니다.😒 오늘 우리의 목표는, webpack-dev-server와 react-hot-loader 를 이용해, React 프로젝트의 실시간 리로딩 기능을 구현할 것입니다!👍 설치 이전 모듈들과 마찬가지로 다음과 같이 개발자 모드로 설치를 해줍시다. 설치된 것을 확인 후, 바벨 로더 플러그인 부분에 react-hot-loader를 추가해줍니다. babel 과 webpack-dev-server 를 연결해 주는 역할입니다. 우리는 앞으로 webpack-dev-server 를 이용해 구성을 할 것이므로 package.json 에서 빌드 방식을 변경해주어야 합니다. 이제는 webpack 이아닌..
[프로그래머스💯] 코딩테스트 연습 > 완전탐색 > 카펫
해답) def solution(brown, red): answer = [] wid_hei_sum = int(brown/2 + 2) for height in range(1,wid_hei_sum): width = wid_hei_sum-height redsum = (width-2)*(height-2) if redsum == red : answer.append(width) answer.append(height) break return answer red는 안에 직사각형이고 brown 은 직사각형을 감싸는 테두리입니다. 수학적으로 생각해본다면 테두리 가로세로에서 각각 -2 를 한 길이가 직사각형의 가로세로 입니다. 세로의 길이를 1부터 높여가며 완전탐색을 돌면서 red 타일 개수가 일치하는지를 찾습니다. 출처: ..
[React🌌] 초보를 위한 create-react-app 없이 빌드하기 / ② babel이란? babel 밑 webpack 세팅
babel 이란? 아시다시피 자바스크립트는 시대가 변함에 따라 점점 발전하고 있습니다. 그만큼 그 발전한 버전을 따라주지 못하는 브라우저 혹은 환경이 있기 마련이죠. babel은 최신 문법을 써도 이전 버전 브라우저 환경에서도 사용할 수 있도록 최신 문법을 특정 예전버전의 js 로 변환해주는 툴 입니다! 쉽게말하자면 최신문법을 이전문법으로 바꿔주는 API 이죠. 😮 babel 사이트에서 지원하는 예시입니다. // Babel Input: ES2015 arrow function [1, 2, 3].map((n) => n + 1); // Babel Output: ES5 equivalent [1, 2, 3].map(function(n) { return n + 1; }); 바벨 가이드 : https://babelj..
[JS] event.preventDefault() 간단 설명 😊/ preventDefault란?
preventDefault 란? a 태그나 submit 태그는 누르게 되면 href 를 통해 이동하거나 , 창이 새로고침하여 실행됩니다. preventDefault 를 통해 이러한 동작을 막아줄 수 있습니다. 주로 사용되는 경우는 1. a 태그를 눌렀을때도 href 링크로 이동하지 않게 할 경우 2. form 안에 submit 역할을 하는 버튼을 눌렀어도 새로 실행하지 않게 하고싶을 경우 (submit은 작동됨) 1번은 직관적이니까 예시는 생략하고 2번을 예시로 들자면 예시 이러한 구구단의 정답을 받는 form 이 있고, 거기에 EventListener 를 추가해주었습니다. 정답 form 밑에는 resultDiv 가 있어서 정답 여부를 출력하게끔 하였습니다. 이 함수를 실행하면 밑에 정답! 혹은 땡! 이..
[React🌌] 초보를 위한 create-react-app 없이 빌드하기 / ① 설치 및 세팅
아마 대부분 React 개발을 하실 때 $ npx create-react-app 요런 명령어를 이용하셔서 간편하게 설치하셨을거라 생각합니다. 이 명령어 하나만으로 참 편리하게 알아서 뚝딱뚝딱 필요한 것들이 절로 생성되죠.😮 하지만 이러한 명령어 없이 맨 바닥에서도 react 웹을 만들 수 있습니다! 이것은 React의 원리와 모듈들의 기능을 이해하는데에 도움이 됩니다. 그럼 시작해봅시다!😆 * Node.js 는 기존에 설치가 되어있어야 합니다. ( 설치 바로가기 : https://nodejs.org/ko/download/ ) 1. 기본이 될 HTML 만들기 C:\no_create_react_web\index.html 웹의 틀이 될 html 을 만들어줍니다. 저는 C:\no_create_react_web ..
[프로그래머스💯] 코딩테스트 연습 > 깊이/너비 우선 탐색(DFS/BFS) > 네트워크 > 다른 사람의 풀이
해답) def solution(n, computers): check = [1] * n network = 0 def find(Coms, Com, Com_index): check[Com_index] = 0 for objCom_i,obj_com in enumerate(Com): if obj_com: if check[objCom_i]: find(Coms, Coms[objCom_i], objCom_i) for index, com in enumerate(computers): if check[index]: find(computers, com,index) network += 1 return network 풀이) * check = 컴퓨터가 네트워크에 포함되었는지 여부를 반환합니다. (1: 아직안됨 0: 연결됨) 1. 한..
[CSS] display란? / display 속성 / display 종류 / 🖼
display 속성이란? display 태그는 화면에 어떻게 드러나게 할지를 결정하는 속성입니다. 사실 이렇게 들으면 감이 잘 안오는데 요소 크기를 어떻게 결정할건가 를 결정하는 속성이라고 이해하시는게 조금 더 감이 잘 잡히는 것 같습니다! display 속성값의 종류 display 속성값은 4가지 입니다. none block inline inline-block 예제를 보면서 설명하는게 이해가 가장 빠를 것 같습니다. HTML I am none I am block I am inline I am inline-block CSS body div { font-size: large; margin-bottom: 50px; } .none_div { display: none; background-color: bluev..