천천히, 꾸준히

😺 Study/JavaScript, jQuery

'버튼' 클릭 > 알림창 나타남 '닫기' 클릭 > 알림창 사라짐 알림창임 닫기 버튼 function close(){ document.getElementById('alert-box').style.display = 'none'; } btn()은 실행이 되는데, close()는 반응이 없었다. 혹시나 해서 함수 이름을 바꿨더니 제대로 실행됨; 알림창임 닫기 버튼 자바스크립트에서 close는 window.close(), self.close()...등에서 특정 개체에서만 적용되는 메소드이다. 단순히 결과를 반환하는 독립적인 함수가 아닌 window와 self라는 특정 개체에서 반응한다는 의미로 이해된다. 나는 일단 함수 이름을 단순히 close라고 지었더니, 무반응에 에러도 안 떠서 난감; 함수와 메소드의 차이를..

2022. 12. 9.

😺 Study/JavaScript, jQuery

- 회사에서 JS, React 관련 과제가 주어졌다. 아직 맨땅에 헤딩이지만, 좋은 레퍼런스가 많아서 무사히 완료(?) 온라인 스터디에서 배운 내용과 연관성이 있어서 정리할 겸 기록 각 작업순서와 관련된 상세 포스팅을 따로 게시할 예정이다. 진행된 작업순서: NodeJS > React > Babel > Webpack > Material-ui > qrcode NodeJs 브라우저 외부에서 JS를 실행 할 수 있는 환경 (=런타임 환경) $ npm init -y React 가상돔을 이용하여 돔의 변화 처리 → 실제돔에 변화를 일으키지 않고 변화를 가상돔에 기록한 후 그리는 방식 Create React App은 새 React 싱글 페이지 어플리케이션을 만들기에 적합 React를 사용할 때는 생산성을 높이기 위..

2021. 8. 9.

😺 Study/JavaScript, jQuery

/* 사용자가 이름을 입력하면 저장되고 인사말이 출력되는 페이지를 만들어 보자 */ 먼저, 이름을 입력할 form과 input을 만든다. css에서 .form, .sayHello를 display: none; 해준다. //사용자가 이름을 입력하면 창이 안 보여야 하기 때문에 사용자가 이름을 입력하면 다시 창이 보일 수 있도록 .showing { display: block; } 을 추가한다. *로컬 스토리지 local storage : 저장되는 데이터 각 이름들은 내가 알아보기 쉽게 변경할 수 있다. (nameForm, nameInput, sayHello, userName, SAVE_NAME, SHOWING_CLASS) 1. 사용자의 이름을 저장하는 함수 localStorage.setItem은 로컬 스토리지..

2020. 12. 9.

😺 Study/JavaScript, jQuery

변수, 상수, 대입 연산자에 대해 알아보자. 변수: 바뀔 수 있는 값 (variable) 상수: 바뀌지 않는 값 (constant) 예를 들어, 텍스트가 많을 때 특정 값만 텍스트를 바꾸고 싶은 경우. 변수로 설정한다. var name='hello'; alert("lorem ipsum blabla"+name+"lorem ipsum blabla"); - 변수 name 위치에 hello가 할당되어 경고창이 뜬다. - 변수 name을 다른 값으로 할당해도 적용된다. (대입 연산자) - 텍스트가 많은 경우, 변수에 다른 값으로 할당하면 되기 때문에 유용하다. 참고: edwith [부스트코스] 자바스크립트의 시작 by 생활코딩 www.edwith.org/boostcourse-web-106/joinLectures/..

2020. 11. 23.

😺 Study/JavaScript, jQuery

자바스크립트 데이터 타입 중에 숫자(Number)와 문자열(String)에 대해 알아보자. (총 6개의 타입과 객체가 있다.) 콘솔창에 숫자와 연산를 이용해보면. 1+1 2 2-1 1 2*4 8 6/2 3 - 더하기, 빼기, 곱하기, 나누기로 연산된다. "1"+"1" "11" - 문자열 타입은 작은 따옴표(' ') 또는 큰 따옴표(" ")를 사용한다. - 문자열 + 문자열이기 때문에 실행값도 문자열이다. - 문자열의 길이를 구한다면, 'Hello world'.length -> 11이 출력된다. 'Hello world'.indexOf('world'); 6 - world의 배열 값을 검색하는 코드 - 0부터 시작, 6번째에 위치한다는 것을 알 수 있다. 참고: edwith [부스트코스] 자바스크립트의 시작 ..

2020. 11. 23.

😺 Study/JavaScript, jQuery

콘솔을 통해서 간단한 javascript 코드를 실행시킬 수 있다. 브라우저의 개발자 모드 - console 메뉴에서 바로 적용하기 예를 들어, 텍스트의 글자 수를 알고 싶다면. alert('글자'.length) - 2라는 경고창이 뜬다. - 작은 따옴표(' ')안의 내용은 문자열로 인식한다. - 문자열의 길이를 구할 땐, .length *이렇게 콘솔창에 직접 입력한 자바스크립트는 해당 웹 페이지를 대상으로 실행된다. *콘솔을 이용하면 웹 사이트에서 간단한 문제를 간편하게, 자바스크립트를 실행시켜서 해결할 수 있다. 참고: edwith [부스트코스] 자바스크립트의 시작 by 생활코딩 www.edwith.org/boostcourse-web-106/joinLectures/52258

2020. 11. 23.

😺 Study/JavaScript, jQuery

자바스크립트가 실행되는 원리는 html에서 onclick 속성의 명령을 기억했다가, 사용자가 해당 태그와 상호작용하면 (예를 들어, 클릭한다면) 기억했던 명령을 브라우저가 실행하는 것이다. 웹 브라우저에서 일어나는 유용한 사건을 이벤트(event)라고 한다. 예를 들면, - 버튼 타입의 hi를 누르게 되면 onclick이 실행되면서 hi라는 경고창이 뜨게 된다. - onclick 이벤트: 사용자가 어떤 것을 클릭하는 사건 - 그 외의 다른 이벤트 속성들: onchange, onkeydown, onmouseover 등등 참고: edwith [부스트코스] 자바스크립트의 시작 by 생활코딩 www.edwith.org/boostcourse-web-106/joinLectures/52258

2020. 11. 23.

😺 Study/JavaScript, jQuery

자바스크립트를 처음부터 다시 공부해보니 언어를 받아들여야 한다는 거부감이 들었다. 무엇보다 어떻게 읽히고 동작하는지부터 알아야 훨씬 쉽게 받아들일 수 있을 것 같았다. 그래서 찾다가 알게된 edwith 사이트..! edwith은 네이버와 네이버커넥트재단이 제공하는 온라인 교육 플랫폼이다. 강의를 무료로 이용한 뒤 실무자에게 코드리뷰를 받을 수도 있다. 참고로 코드리뷰는 유료다. 자세한 내용은 아래 링크 참고// https://www.edwith.org/ 에듀케이션위드 : edwith 에드위드(edwith)는 네이버(NAVER)와 네이버 커넥트재단(NAVER Connect)이 제공하는 온라인 강좌(MOOC : Massive Online Open Course) 교육 플랫폼입니다. 에듀케이션위드(educati..

2020. 11. 23.

😺 Study/JavaScript, jQuery

자바스크립트에서 스코프는 2가지 타입이 있다. global(전역)과 local(지역). 더 자세한 내용은 아래 링크를 참고해보자. https://medium.com/@yeon22/javascript-%EC%8A%A4%EC%BD%94%ED%94%84-scope-%EB%9E%80-bc761cba1023 (JavaScript) 스코프(Scope)란? 자바스크립트를 공부할 때 스코프(Scope)란 단어를 많이 접할 수 있는데요. 이 스코프란 무엇인지에 대해 알아보겠습니다. medium.com global scope(전역 스코프)는 파일 안에 바로 정의해서 쓸 수 있다. 따라서 어디에 위치해도 읽을 수 있다. (출력 가능) let globalScope = 1; { console.log(globalScope); }..

2020. 11. 19.

😺 Study/JavaScript, jQuery

지난 포스팅에 언급한 var이 갖고 있는 오류는 console.log(age); age = 28; console.log(age); var age; 이처럼 변수를 나중에 선언해도, 콘솔창에 age값이 출력되는 것을 알 수 있다. 어디에 선언했냐에 상관없이 상단으로 선언을 끌어올려주는 것을 hoisting(호이스팅)이라고 한다. name = 'happy'; let name; 하지만 let으로 변수를 선언할 경우, 위처럼 순서가 뒤바뀌었을 때 콘솔창에 오류가 나는 것을 확인할 수 있다. *hoisting(호이스팅)은 block scope(블럭 스코프)도 무시하는데, 이와 관련된 내용은 아래 링크에서 확인할 수 있다. https://haeeeell.tistory.com/24 참고: 드림코딩 by 엘리

2020. 11. 19.