분류 전체보기
-
JavaScript 100제 오답노트 37번_반장선거Language/JavaScript 2022. 10. 24. 11:05
37. 반장 선거 Q 새 학기를 맞아 호준이네 반은 반장 선거를 하기로 했습니다. 그런데 표를 하나씩 개표하는 과정이 너무 번거롭게 느껴진 당신은 학생들이 뽑은 후보들을 입력받으면 뽑힌 학생의 이름과 받은 표 수를 출력하는 프로그램을 작성하기로 하였습니다. 입력 원범 원범 혜원 혜원 혜원 혜원 유진 유진 출력 혜원(이)가 총 4표로 반장이 되었습니다. //답안 // 1. 입력된 str을 arr로 만든다. => (split) // 2. 최다 요소를 뽑는다. // -> 배열 요소를 프로퍼티 키로 갖는 객체를 생성하고 요소의 개수를 프로퍼티의 값으로 지정한다. // => (for in 문) // 3. 최다 요소 갯수를 뽑는다. // -> 객체의 프로퍼티 값을 비교한다. // => (reduce) const n..
-
개발자도구 Element(요소) 패널Server/기타 2022. 10. 23. 18:46
1. Element 패널의 기능은? 웹 페이지의 구성 (DOM)을 확인할 수 있다. DOM ? ⇒ (Document Object Model) 텍스트 파일로 만들어져 있는 웹 문서를 브라우저에 렌더링하려면 웹 문서를 브라우저가 이해할 수 있는 구조로 메모리에 올려야 한다. 브라우저의 렌더링 엔진은 웹 문서를 로드한 후, 파싱하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하는데 이를 DOM이라 한다. 정적인 웹페이지에 접근하여 동적으로 웹페이지를 변경하기 위한 유일한 방법은 메모리 상에 존재하는 DOM을 변경하는 것이고, 이때 필요한 것이 DOM에 접근하고 변경하는 프로퍼티와 메소드의 집합인 DOM API이다. 참고자료 : https://poiemaweb.com/js-dom 구성요소..
-
다시 봐도 헷갈리는 배열 메소드 정리_filter, map, forEachLanguage/JavaScript 2022. 10. 21. 21:50
배열 메소드를 공부하고 돌아서면 까먹는다. 화.난.다.정.말 이 메소드가 배열을 반환하는지, 평가만 하는지 혼란스럽고 결국 MDN을 찾아보게 된다. 물론 언제든지 메소드를 사용할 때 찾아보면서 코딩하면 되겠지만, 언제까지나 그럴 수는 없다. 그래서 이참에 이번 프리코스 기간동안 나를 괴롭혔던 배열 메소드를 정리해본다. 1. filter() filter 메소드는 주어진 조건에 맞는(함수의 return을 true로 만드는) 요소 전체를 담은 배열을 반환한다. 어떠한 요소도 테스트를 통과하지 못하면 빈 배열을 반환합니다. filter는 배열 내 요소를 탐색해서 원하는 요소를 뽑아낼 때 사용합니다. 함수명 그대로 필터링 하는 것이죠. let results = arr.filter(function(item, ind..
-
컴퓨팅적 사고...? 컴퓨터처럼 생각하라는건가?Server/기타 2022. 10. 20. 17:31
컴퓨팅적 사고 컴퓨터처럼 사고하는 것이 무엇인가? 컴퓨터가 효과적으로 일을 할 수 있도록 사람이 문제를 정의하고 그에 대한 답을 기술하는 것이 포함된 사고과정의 일체. 컴퓨터가 되라는 말이 아니다. 사람과 컴퓨터는 사고방식이 다르다. 사람은 의지와 창의력을 갖지만 컴퓨터는 사람이 주는 전기신호가 없이는 그 무엇도 할 수 없다. 창의적인 사람의 사고에 맞게 컴퓨터가 움직여줄 수 있도록, 어떤 면에서는 멍청하지만 사고방식은 겁나 복잡한 컴퓨터에게 "이렇게, 저렇게 하도록 해" 라고 친절하게 설명해주어야 한다. 즉, 컴퓨팅적 사고란 사람없이는 의미있는 아웃풋을 낼 수 없는 컴퓨터를 사려깊게 배려해주는 자세라고 뭉뚱그려 표현해 본다. 아키텍쳐 개념을 빌리면 순차, 분기, 반복의 개념을 사용하면 알고리즘을 완성할..
-
개발자라며? 인터넷과 웹의 차이가 뭐야?Server/기타 2022. 10. 19. 13:57
백앤드 개발자가 되기 위해 위코드에 온지 2일째 되는 날이다. 세션을 진행하는 멘토님께서 “Internet과 WEB의 차이에 대해서 알고 계신 분 있으신가요?” 물어보셨다. 사전스터디때 학습한 내용인 것 같긴 한데, 잘 떠오르지 않았다. 나는 무엇을 하든 엄밀하게 why, what, how를 먼저 고민하고 정립한 후 움직인다. 그런데 이번에는 하지 못했다. 웹개발자가 되겠다고 공부를 하고있는데, 웹이 무엇인지 모르고 있다는 사실이 부끄러웠다. 그래서 오늘 세션의 내용은 복습 후에 꼭 다시 내 언어로 정리해야겠다고 생각했다. 웹 서비스의 역사 - Part.1 1. Internet 1.1 Internet 인터넷은 쉽게 말해 컴퓨터와 컴퓨터를 이어주는 통신망, 네트워크이다. 단순히 물리적으로 떨어져 있는 두 ..
-
[CSS] Position : 레이아웃을 독립적으로 배치하는 방법Language/HTML&CSS 2022. 10. 19. 09:39
Position position은 페이지의 어떤 레이아웃을 특정 위치에 배치하기 위해 사용하는 CSS 속성이다. 핵심적으로 기억해야 할 내용은 언제 이 속성을 사용하는지이다. (출처 : https://velog.io/@yeonbot/CSS-position-absolute-fixed-%EC%B0%A8%EC%9D%B4) 1. position:fixed는 스크롤이 내려가더라도 떠있는 header modal 오른쪽 하단에 항상 떠있는 floating 버튼 2. position: absolute는 특정 엘리먼트 내에서 다른 엘리먼트와 관계 없이 움직여야 하는 경우 position 프로퍼티는 요소의 위치를 정의한다. 프로퍼티 값으로 fixed, absolute, relative, static이 있으며 보통 부모요소..
-
[HTML] box-sizing: border-boxLanguage/HTML&CSS 2022. 10. 19. 09:09
css는 산수다 css를 적용하면서 느껴왔던 것이다. Box-model에 의해서, 패딩값이나 마진값 등등 요소의 사이즈를 조절할 때, 계산하는 것이 골치 아팠기 때문이다. 그래서 웬만하면 크기 조절을 rem과 em 등 상대 단위로 하고 있다. 상대단위란 ? - 상대단위란 고정되지 않고 어떤 기준에 따라서 유동적으로 바뀔 수 있는 길이를 나타내는 단위이다. 따라서, 상대 단위로 작성된 사이즈는 그 기준 수치만 바꿔주면(일단 처음에 상대 단위 사이즈를 넣을 때 레이아웃을 반영했을 것이기 때문에) 일괄적으로 함께 바뀐다. - em, rem, %, vw, vh 등이 있다. - em과 rem은 font-size의 속성 값에 비례해서 결정되는 상대 단위이다. 둘의 차이는, em은 해당 단위가 사용되고 있는 요소의 ..
-
src와 href, 차이는 무엇일까Language/HTML&CSS 2022. 10. 19. 08:52
등등 우리는 태그에서 참조할 자료주소를 가져올 때 href, src 속성을 사용한다. 그.런.데 href와 src의 의미는 무엇이고, 왜 link에는 src를 안쓰고, img에는 href를 쓰지 않는 것일까? 아래는 stackoverflow에서 그 이유에 대해 설명해주는 글들을 가져와봤다. 1. 쉬운 설명 참고: https://stackoverflow.com/questions/12032337/differences-between-url-src-and-href src -- I want to load up this resource for myself. -> src는 이 요소를 직접 로드하고 싶을 때 사용하는 속성 href -- I want to refer to this resource for someone e..
-
[HTML] div 태그는 현업에서 어떻게 쓰일까?Language/HTML&CSS 2022. 10. 19. 08:16
태그 div는 의미론적으로 아무런 의미가 없는 태그이다. CSS와 JS를 적용할 태그를 자식요소로 묶을 때 쓰는 태그로 썼던 경험은 있는데 현업에서는 주로 어떤 패턴의 작업을 할 때 사용하는지 궁금해져서 알아봤다. div 태그의 정의 : div 태그는 division(분할하다)의 약자로 HTML 문서 내에 한 줄의 가로(Block) 공간을 만드는 태그이다. 정의부터, div 태그에 담긴 정보에 대한 context는 읽을 수 없다. div 의 사용 패턴 : 위에 서술한대로 웹페이지에서 화면의 특정 영역에 스타일을 적용하거나, 전체 화면 레이아웃을 잡는데 자주 사용이 된다. 즉, 공간을 만드는 태그이기 때문에, 단순히 콘텐츠를 그룹화하는데만 사용이 된다. 그래서, SEO에 좋은 태그를 사용하려면 Semant..