꺾이지 않는 마음

호이스팅 개념을 공부하다가 'var는 왜 안쓰게 됐을까?'라는 궁금증이 생겨 간단하게 정리해 보았다. var 사용법 var name = '철이'; var name = '민철'; console.log(name); // 결과: 민철 name = '신민철'; console.log(name); // 결과: 신민철 결론: 1. var 키워드를 사용하여 선언한 변수는 재선언, 재할당 가능 2. 잠재적인 오류를 야기할 수 있으므로 사용하지 말자 let 사용법 let name = '철이'; let name = '민철'; console.log(name); // 결과: 에러발생 /*----------------------------------------------------------*/ let name = '철이'; ..

Try-catch문은 주로 서버와 관련된 네트워크 작업에서 발생할 오류를 잡고 처리하기 위해 사용한다. 제어문에서는 Try-catch문을 사용할 일이 거의 없지만, 그래도 알아두면 좋은 개념이므로 한번 연습해보았다. Try-catch문의 기본 문법은 아래와 같다. try { 검사할 코드 } catch (매개변수) { 오류 발생시 실행할 코드 } 앞에 서술한 {}는 오류 발생 여부를 확인할 코드를 감싼다. 뒤에 서술한 {}는 앞서 {}로 감싼 코드에서 오류가 발생할 시 오류를 무시하고 실행할 코드를 작성한다. 원래 에러가 발생하면 해당 실행문이 중단되지만 후술한 catch () {}를 통해 에러를 무시하고 새로운 코드를 실행할 수 있게 되는 것이다. 즉, Try-catch문은 에러가 발생했을 때를 대비하여..

Q1. DOM이란? Document Object Model의 줄임말로, 문서 내의 HTML 요소들을 객체화하여 트리 구조의 형태로 표현한 모델을 말한다. 이는 문자열로 표현된 HTML 파일을 자바스크립트가 이해할 수 있도록 한 것이며, 이를 통해 자바스크립트로 HTML 요소에 접근하여 다양한 조작을 가할 수 있다. Q2. DOM을 사용하는 이유? HTML, CSS를 조작하여 사용자와 상호작용 하기 위함이다. HTML과 CSS만으로 작성된 웹 페이지는 정적이다. HTML과 CSS는 짜여진 코드대로 웹 페이지에 내용을 표시할 뿐, 사용자와의 다양한 상호작용 기능을 구현하기 위해선 자바스크립트를 활용해야 한다. 자바스크립트는 HTML과 CSS에 접근하여 조작함으로써 보다 동적인 기능을 웹에 구현한다. 하지만 ..

얼마 전 다른 개발자 분의 기술 블로그를 읽다가 const와 let도 호이스팅이 일어난다는 글을 보았다. 내가 아는 호이스팅은 var를 사용할 경우에만 발생하는데?.. 원래 어설프게 알던 개념이라 마침 잘됐다! 하고 이 기회에 제대로 정리해 보았다. 우선 웹 개발의 기본 개념서인 MDN에 들어가서 호이스팅을 검색해 보았다. JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화합니다. 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않습니다. 오.. 진짜로 MDN 문서에서도 let과 const가 호이스팅의 예제로서 등장..

오늘 Node.js 강의를 듣기 시작했는데 처음부터 큰 문제에 봉착했다. 터미널에서 node.js로 자바스크립트 코드를 출력하려는데 오류가 뜨는 것이다. 상황은 다음과 같다. 1. app.js 파일을 생성 2. 변수 값을 출력하는 간단한 코드 작성 3. 터미널에서 node app.js 명령어 입력 4. Error: Cannot find module 어쩌고 문제 발생.. 듣던 강의에서는 이 문제에 관한 내용이 없었다. 안그래도 node.js를 처음 다뤄봐서 낯선데 설치하자마자 쓴 첫 명령어부터 오류라니.. 해결하기 위해 개발자의 기본인 구글링부터 해보았다. node.js를 오늘 처음 설치해본 나로서는 수많은 글들을 읽어도 해결이 되지 않았다. 그래도 끝까지 포기하지 않고 글들을 모아서 요약했고, 대학교 커..

웹 페이지에 아이콘을 삽입하는 방법에는 여러 가지가 있다. 구글 material-icons를 활용하는 방법도 있고, jpg, png 등 여러 형식의 이미지 파일을 활용하는 방법도 있다. 본 포스팅에서는 그중 웹 디자인 영역에서 가장 각광 받는 SVG 파일을 활용해보고자 한다. 스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식이다. 개인적으로 학습하면서 이번에 SVG 파일을 아이콘으로 HTML 내에 삽입하게 되었는데, 예전에 사용했던 구글 material-icons 활용 방식 보다 훨씬 편리..

오늘 실무에서 자주 쓰이는 유용한 CSS 스킬을 하나 배웠다! 바로 요소를 영역 내에서 중앙에 고정하는 방법이다. position과 margin, calc() 함수를 사용하면 쉽게 할 수 있다. 순서는 다음과 같다. 1. 중앙 배치할 요소에 position: absolute; 를 주고, 부모 요소에게 position: relative를 준다. (부모 요소 안에서 독립적으로 포지셔닝을 하기 위함) 2. 중앙 배치할 요소에 left: 50%; 를 준다. (부모 영역 가로의 정 중앙 위치에서부터 콘텐츠가 배치된다.) 3. 중앙 배치할 요소에 margin-left: (요소의 가로 길이 / -2); 를 준다. (중앙 배치할 요소도 자체의 가로 길이를 가지기 때문에 2번 과정을 통해 정 중앙에서 요소가 시작되도록..

(블로그를 이전하면서 3~14일차 글이 날아갔음을 알립니다.. 고로 15일차부터 티스토리에 작성) 3주차에는 travel page 만들기를 시작하였다. 애니메이션이나 트랜지션 같은 비교적 복잡한 기능은 넣지 않았고, 기본적인 HTML&CSS 개념을 가지고 간단한 정적 페이지를 만드는 과정이다. 본 과정에서는 문서 HTML 기본 구조 및 스타일링 방법을 익히고, 더 나아가 시멘틱 짜는 연습 + 포지션 속성에 대한 이해가 중점이 되는 것 같다. #1. 시멘틱 태그로 전체 구조 짜기 웹 페이지를 제작할 때 가장 먼저 해야할 것은 시멘틱 요소로 전체 틀을 짜는 것이다. 실질적인 내용이 들어가는 태그 영역 안에서 구조화하며, , , 의 3단 구조가 가장 기초적인 틀이라고 할 수 있다. 이 태그들은 실질적인 의미..