profile
공부 정리용 블로그
post-thumbnail

node js설치 후 맛만보기

nodejs는 자바스크립트가 브라우저 밖에서 동작하도록 해주는 런타임 환경이라고 한다. 백엔드 지식은 하나도 없지만 node js를 활용하여 어느 정도의 감을 잡아보고 싶다.https://nodejs.org/ko/에서 node js를 최신버전으로 설치한 후 V

약 1시간 전
·
0개의 댓글

기둥과 보 설치

https://programmers.co.kr/learn/courses/30/lessons/60061 전형적인 구현 문제였다. 완성된 코드의 틀을 짜는 데에는 대충 1시간 남짓 걸린 것 같은데 뭐가 틀린지 몰라서 헤매는 지옥같은 디버깅에 3시간 정도를 썼다. 풀지

3일 전
·
0개의 댓글

치킨 배달

이것 또한 구현문제였다. 그냥 치킨집을 없애는 경우의 수를 조합으로 구해서 문제의 조건대로만 푸는 문제였는데 왜 이코테에서는 이게 기둥과 보 문제보다 더 어려운 난이도로 표시되었는지 의문이다... 푸는데 30분도 안걸린 것 같다.

3일 전
·
0개의 댓글

문자열 압축

https://programmers.co.kr/learn/courses/30/lessons/60057처음 문제를 봤을 때는 좀 어려워 보였는데 천천히 구현해보니 별 이상 없이 풀 수 있었다. 다만 주석에도 있듯이 파이썬에서 문자열에 길이를 넘어가는 인덱스를 주

4일 전
·
0개의 댓글

[포기] 자물쇠와 열쇠

https://programmers.co.kr/learn/courses/30/lessons/60059구현 문제인데, 테스트 케이스에는 맞는 코드가 작성되긴 했으나 62점 정도만 테스트에서 통과하여 아무리 생각해도 반례가 생각나지 않아서 결국 포기한 문제이다..

4일 전
·
0개의 댓글

form 제출을 자바스크립트에서 처리하기

이러한 form이 존재할 때 form에 입력된 정보를 자바스크립트로 핸들링 하려면 어떻게 해야 할까?먼저 자바스크립트에서 form에 접근한 후에(이 html문서에서 form은 하나밖에 없음) eventlistener를 추가한다. 이때 event의 type으로는 ‘sub

2022년 6월 30일
·
0개의 댓글

자바스크립트 for of, for in

자바스크립트에도 반복문이 존재하는데, 그냥 for문은 c언어의 그것과 문법이 유사했으나 for of과 for in은 처음보는 문법이었다.배열에서 사용하는 for문이다. 배열의 모든 요소를 반복한다.이때 배열의 요소를 불러오고 이를 굳이 변경할 필요가 없다면 let대신

2022년 6월 27일
·
0개의 댓글

자바스크립트 연산자

자바스크립트가 파이썬과 유사한 점이 많아 비교연산자도 비슷할거라 생각했지만 다른 점이 많았다.==와 =====는 값만 비교할 수 있는 연산자이고, ===는 값과 데이터 타입을 비교하는 연산자이다5 == ‘5’ -> true5 === ‘5’ -> false그러므로 값만

2022년 6월 27일
·
0개의 댓글
post-thumbnail

글자수에 동적으로 반응하는 입력창 만들기

글자를 입력할 때마다 오른쪽의 숫자가 그만큼 줄어드는 입력창을 만들어보자출처 - 100일 코딩 챌린지 - 2022 Web Development 부트캠프탐지해야 할 이벤트는 키 입력이다. addEventListene의 첫 번째 파라미터 값으로는 ‘input’을 넣어준다.

2022년 6월 26일
·
0개의 댓글
post-thumbnail

자바스크립트 이벤트 객체

이러한 변수와 함수가 존재할 경우 retrieveInput함수의 파라미터로 아무 이름을 설정하면(이벤트가 발생하면 브라우저가 해당 기능을 실행할 때 함수의 첫 번째 파라미터를 이벤트 객체 값으로 설정하므로 이름이 무엇이든 상관 없다.)이 events라는 이름을 가진 파

2022년 6월 26일
·
0개의 댓글

자바스크립트 'click' event listener 추가하기

event란 유저가 사이트의 특정 부분에 입력, 클릭, 스크롤 하는 등의 행동을 의미한다. 자바스크립트를 사용하면 이벤트를 탐지하여 특정 코드를 실행하도록 할 수 있다.이를 위해서는 addEventListener메서드를 사용한다. 이 메서드는 요소에 이벤트 리스너를 추

2022년 6월 26일
·
0개의 댓글

DOM 요소 삭제/이동

DOM에서 요소를 삭제하려면 두 가지를 기억하면 된다.1\. 삭제할 요소를 선택하고 2. 그 요소를 삭제한다.삭제할 요소 선택에서 h1태그를 삭제하려고 할 때, 여러 가지 방법이 있다. ID로 선택하거나 querySelector를 사용하는 등.요소 삭제선택한 요소를 삭

2022년 6월 26일
·
0개의 댓글

JS를 통해 새로운 HTML요소 삽입하기

JS에서 새로운 요소를 추가하려면 1. 새로운 요소를 생성하고 2. 생성한 요소를 담고 있는 부모 요소에 접근해야 하며(DOM에 접근하기 위함) 3. 새 요소를 부모 요소의 콘텐츠에 삽입해야 한다.I’m new!라는 텍스트를 담고 있는 p태그에 a태그를 추가하려고 한다

2022년 6월 26일
·
0개의 댓글
post-thumbnail

DOM트리와 DOM탐색

HTML에서 볼 수 있는 중첩구조는 DOM에도 적용된다. 이를 트리 구조처럼 생각할 수 있다.출처 - 100일 코딩 챌린지 - 2022 Web Development 부트캠프탐색 방법에는 두 가지가 있다.점 표기법으로 탐색이 방법은 DOM의 중첩구조를 정확히 알고 있어야

2022년 6월 25일
·
0개의 댓글
post-thumbnail

html요소의 선택과 변경을 위한 DOM드릴링

드디어 종강 후 복습 후 포스팅...현재 a태그에는 아무런 주소도 입력되어 있지 않으므로 눌러도 반응이 없다. 자바스크립트를 이용해 주소를 입력하려면 어떻게 해야 할까?개발자 도구에서 a를 찾아보면 이는 document – body – children – p – chi

2022년 6월 25일
·
0개의 댓글
post-thumbnail

DOM이란?

출처 - 100일 코딩 챌린지 - 2022 Web Development 부트캠프DOM은 웹개발의 개념으로, 작성된 HTML코드를 분석하여 데이터와 브라우저의 내부를 표현한 것이라고 한다.브라우저는 HTML코드를 분석(parsing)하여 화면에 표시할 내용이 무엇인지 알

2022년 5월 29일
·
0개의 댓글
post-thumbnail

전역 객체 window, document

출처 - 100일 코딩 챌린지 - 2022 Web Development 부트캠프활성화된 브라우저의 윈도우(탭)과 관련된 정보와 기능을 저장하는 객체이다. 이는 내가 현재 어떤 페이지에 있는지를 알려주거나 alert같은 유틸리티 함수에 접근할 수 있게 해준다.보안상의 이

2022년 5월 29일
·
0개의 댓글
post-thumbnail

validation 관련 속성들

이러한 email type의 input요소는 잘못된 양식의 이메일이 들어왔을 경우 박스 자체적으로 검증과정을 거쳐 경고 메시지를 보낸다. 이 검증을 없애고 싶다면 form 요소에 novalidate 속성을 추가하면 된다.이 속성은 불리언 속성(파이썬의 bool값으로 생

2022년 5월 23일
·
0개의 댓글

button 요소에 대한 추가사항

form 요소에 중첩되어 있는 button은 디폴트로 폼을 서버에 제출하게 되지만 반드시 button은 form안에 있을 필요가 없다. form 밖의 button의 동작을 지정하려면 자바스크립트를 사용한다. 또한 form에 중첩된 button은 type속성을 사용하여

2022년 5월 23일
·
0개의 댓글
post-thumbnail

textarea 요소와 드롭다운 사용하기

이는 여러 줄을 입력 받기 위해 사용하는 요소이다. 특이한 점은 컨텐츠가 없는 빈 태그임에도 관습적으로 종료 태그를 같이 써준다는 점이다.cols와 rows는 박스의 크기를 지정해준다.또한 여기에 입력한 후 인풋을 제출하게 되면 user-message=dsfadsf%0

2022년 5월 22일
·
0개의 댓글