[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.
[프로그래머스💯] 코딩테스트 연습 > 탐욕법(Greedy) > 구명보트
해답) def solution(people, limit): people.sort() boat = 0 last_index = len(people)-1 for i in range(last_index): for j in range(last_index, i-1, -1): boat += 1 last_index -= 1 if people[i] + people[j] 무거운사람에게 1인용 보트를 준 후(boat +=1) 방금 검사했던 가벼운사람과 그 다음 무거운 사람을 다시 검사합니다. 2-2. 같이 탈 수 있을 경우 => 두 사람에게 보트를 1개 준 후(boat +=1), 다음으로 가벼운사람과 다음으로 무거운 사람을 검사합니다. 3. 루프가 다 돌았으면 , boat를 리턴합니다. * 첫번째 for문이 처음 설정된 l..
2020. 1. 12.
[프로그래머스💯] 코딩테스트 연습 > 스택/큐 > 주식가격 / *스택 활용
해답) def solution(prices): time = 0 stk = [(0,prices[0])] res = [0] * len(prices) print(stk[0]) for i, v in enumerate(prices[1:]): # 들어오려는 숫자가 더 작은 경우 while len(stk) > 0 and v < stk[len(stk)-1][1]: for (s_i, s_v) in stk: res[s_i] += 1 # 스택 안에있던 요소들 시간 증가 stk.pop() stk.append((i+1,v)) while stk: # 남아있는 것들 시간 넣어주기 (i,v) = stk.pop() res[i] += time time += 1 return res 1. 스택을 반드시 이용하겠다는 마인드로 풀었습니다. 2..
2020. 1. 11.
[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..
[프로그래머스💯] 코딩테스트 연습 > 탐욕법(Greedy) > 구명보트
해답) def solution(people, limit): people.sort() boat = 0 last_index = len(people)-1 for i in range(last_index): for j in range(last_index, i-1, -1): boat += 1 last_index -= 1 if people[i] + people[j] 무거운사람에게 1인용 보트를 준 후(boat +=1) 방금 검사했던 가벼운사람과 그 다음 무거운 사람을 다시 검사합니다. 2-2. 같이 탈 수 있을 경우 => 두 사람에게 보트를 1개 준 후(boat +=1), 다음으로 가벼운사람과 다음으로 무거운 사람을 검사합니다. 3. 루프가 다 돌았으면 , boat를 리턴합니다. * 첫번째 for문이 처음 설정된 l..
[프로그래머스💯] 코딩테스트 연습 > 스택/큐 > 주식가격 / *스택 활용
해답) def solution(prices): time = 0 stk = [(0,prices[0])] res = [0] * len(prices) print(stk[0]) for i, v in enumerate(prices[1:]): # 들어오려는 숫자가 더 작은 경우 while len(stk) > 0 and v < stk[len(stk)-1][1]: for (s_i, s_v) in stk: res[s_i] += 1 # 스택 안에있던 요소들 시간 증가 stk.pop() stk.append((i+1,v)) while stk: # 남아있는 것들 시간 넣어주기 (i,v) = stk.pop() res[i] += time time += 1 return res 1. 스택을 반드시 이용하겠다는 마인드로 풀었습니다. 2..