본문 바로가기

전체 글182

[KDT] HTML 요소의 전역 속성 HTML 요소들은 자기가 사용할 수 있는 속성이 정해져 있다. 하지만, 요소(태그)의 종류와 상관없이 어느 요소에서나 사용할 수 있는 속성이 있는데, 그것을 전역 속성이라고 한다. ㉮ ㉯ ㉰ ㉱ ㉲ ㉳ ㉴ => 이 요소에 잠시 데이터를 저장하기 위한 목적으로 사용하는 속성 사용자가 지정한 color라는 이름으로 데이터(값) red와 yellow를 저장해둘수 있고 이것을 아래 JS 코드에서 보듯이 해당 요소에서 데이터를 찾아 값을 꺼내 활용할 수 있다 ! ※ 위의 JS 코드를 살펴보면 상수 elms는 HTML의 2개의 div 요소를 값으로 갖게 되는 배열이 되고, 배열의 메서드 중 하나인 forEach를 적용하여 배열 요소 각각을 얻어낼 수 있으며, 그렇게 얻어진 각 요소(elm)에 대해 console.l.. 2022. 9. 16.
깃헙에서 파일을 폴더로 관리하고 싶을 때 자습하다 만든 파일을 깃헙에 올릴 때, 동일한 이름의 파일들이 주르륵 올라가는게 보기 싫어 폴더로 관리하고 싶다는 생각이 들었다. 깃헙에서 파일을 폴더화해 정리하고 싶을 때, 여기서 만들 폴더 이름을 작성하고 / 를 넣으면 바로 폴더가 생기고 그 다음에 파일명을 작성하면 된다. 폴더 안에 다시 폴더를 만들고 싶으면 / 를 또 넣어 작성하고, 마지막에 파일 이름을 쓰면 된다. 혹 이름을 바꾸고 싶으면 백스페이스를 눌러 바로바로 수정이 가능하다 ! 2022. 9. 15.
[KDT] 0915 자습 - HTML 무작정 시작하기 VS Code에서 .vscode는 현재 프로젝트의 VS Code 설정 정보가 들어 있는 폴더이다. 삭제해도 VS Code로 프로젝트를 켜면 다시 생성되므로 그냥 무시해도 된다. 보통 파일이나 폴더의 이름이 .(마침표)로 시작하면 숨김 전용 파일/폴더이다. Live Server는 개발을 위해 임시로 로컬(개인의 컴퓨터 환경) 서버를 오픈하는 것이고, 제품(웹사이트 등)은 실제 사용자들이 접근 가능한 호스팅 서버에 업로드해야 한다 ! 공백: 4라고 기본 세팅되어 있는 값을 바꾸고 싶으면 우측 하단의 그 부분을 클릭하면 위의 창에 나타나는 공백을 사용한 들여쓰기를 클릭해 들여쓰기시 원하는 칸 수만큼 지정할 수 있다. 설정을 바꾼 뒤 코드를 다시 정리(beautify)하고 싶다면 원하는 부분만큼 지정하여 정리된.. 2022. 9. 15.
[모자튜] 2.2-2.7 세미콜론(;) 자바스크립트는 줄 바꿈이 있으면 이를 '암시적' 세미콜론으로 해석한다. 이런 동작 방식을 세미콜론 자동 삽입이라고 한다. 줄 바꿈은 세미콜론을 대부분의 경우 의미하지만, 그렇지 않은 경우가 몇몇 있다. 예를 들어 줄이 '+'등의 연산자로 끝나거나, 대괄호 [ ] 가 세미콜론 생략 뒤에 연달아 나오는 경우에는 대괄호 앞에 세미콜론이 있다고 가정하지 않기 때문에, 단일문으로 여겨져 처리된다. ! 줄 바꿈으로 문(statement)을 나눴다 하더라도, 자바스크립트 커뮤니티에서는 세미콜론을 문 사이에 작성하는 규칙을 권장한다. 한 줄 주석은 두 개의 슬래시 //로(단축키; ctrl + / ), 여러 줄의 주석은 /*로 시작하고 */로(단축키; ctrl + shift + / ) 끝낸다. 중첩 주석은.. 2022. 9. 15.
[KDT] 웹앱의 동작원리 웹앱(Web Application); 웹 페이지 주소창에 페이지 주소를 입력하는데, 이 때 주소 앞에 붙이는 HTTP, HTTPS 등은 통신프로토콜(Communication Protocol, 통신 규약)로 컴퓨터나 원거리 통신 장비 사이에서 메시지를 주고 받는 양식 및 규칙의 체계를 의미한다. 그 주소에 맞는 서버로 최초의 요청(Request)이 들어가게 된다. 서버는 요청이 들어온 사용자 브라우저(컴퓨터)로 최초의 응답(Response)을 보내게 된다. 이 때 응답되는 파일은 HTML이다. 이 HTML 파일에서 추가로 요청이 들어가면 서버는 이에 맞는 추가응답을 하게 된다. 이 때 CSS, JS, PNG 등의 요청에 따른 응답에 맞는 정보들이 보내질 것이다. 웹 사이트를 개발할 나의 컴퓨터 환경을 로컬.. 2022. 9. 13.
VS Code에서 npm 설치 후 실행이 안 될 때 가득찬 메모리 용량으로 컴퓨터 성능이 문제가 생겨 컴퓨터를 밀고 다시 프로그램들을 다운로드하여 설치하는데 node.js를 설치하고 cmd에서 node와 npm 버전이 잘 확인되는데 VS Code 터미널에서 npm 실행이 안되는 것이었다. 쉘을 cmd로 설정하고 나서도 마찬가지. (기본 쉘 지정하는 건 알 필요가 있으니 npm 실행과 상관은 없으나 여기에다 방법을 올려놓겠다) ctrl + shift + p로 위의 검색창을 열고 terminal select default profile을 입력해 선택한다. cmd를 기본 쉘로 지정하고 node -v를 실행해도 여전히 다음과 같은 에러 메시지가 뜬다. 그래서 구글링해서 찾아 다음과 같이 하니 해결이 되었다 ! 위와 같이 하고 재부팅하니 cmd이든 powershe.. 2022. 8. 22.
[한 입 리액트] PAGE ROUTING PAGE ROUTING ROUTER 데이터의 경로를 실시간으로 지정해주는 역할을 함 ROUTING이란? 경로를 정해주는 행위 자체와 그런 과정들을 다 포함하여 일컫는 말, 어떤 네트워크 내에서 통신 데이터를 보낼 경로를 선택하는 일련의 과정 PAGE ROUTING이란? 요청(에 명시되어 있는 경로 ex. /home)에 따라서 어떤 페이지를 응답(ex. Home.html)해줄지(돌려줄지) 결정하는 과정 여러 페이지를 준비하고 있다가 요청된 경로에 따라 적절한 페이지를 보내주는 방식을 MPA(Multi Page Application) 반면, 리액트는 SPA(Single Page Application) 방식을 따르고 있다. 이 때의 Web Server는 Node.js, 전달받는 페이지는 index.html !.. 2022. 8. 19.
[한 입 리액트] 배열 사용하기 - 데이터 추가, 삭제, 수정하기 state인 data를 DiaryList 컴포넌트에서 사용하고자 data를 prop으로 받아와 사용하는 것을 볼 수 있다. 새로운 일기 추가할 함수 onCreate를 DiaryEditor 컴포넌트에서 사용하고자 onCreate 함수를 prop으로 받아오는 것을 볼 수 있다. 2022. 8. 19.
JSX 문법 작성시에도 VSCode에서 EMMET 기능 사용하고 싶을 때 저 파란색 박스 부분의 아이콘을 누르면 바로 settings.json으로 이동이 가능하다. 리액트에서 JSX 문법 작성시에도 EMMET 기능 사용하고 싶다면, settings.json 파일에서 다음과 같이 추가해 작성하면 된다 ! 2022. 8. 19.
[알고리즘] 강의복습 - 배열 2022. 8. 18.
[알고리즘] 강의 복습 - 해싱 숫자를 count 할 때는 해싱을 사용할 필요없이 배열을 사용하면 된다. 하지만, 문자나 문자열을 count 해야할 때는 문자열을 key로 하고 int를 value로 할 수 있는 해시라는 기능을 사용한다 ! 해시를 지원해주는 자바스크립트의 자료구조는 map이다 ! nums의 원소가 1000을 넘지 않는 자연수이라고 할 때, 배열의 크기는 숫자 0부터 카운트를 할테니 1001이어야 한다. >> Array(1001) 이라고 작성 2022. 8. 18.
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead. 뭘 설치하거나 명령할 때 계속 저 메세지가 떠서 왜 그런가 했는데, 정말 저 말 그대로 하면 되었다. npm.cmd와 npm 파일로 가서 저렇게 바꿔주니 더 이상 저 메시지가 터미널에서 뜨지 않았다. https://stackoverflow.com/questions/72401421/message-npm-warn-config-global-global-local-are-deprecated-use-loc Message "npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead" I already installed Node.js on my machine, but when I try to run npm in.. 2022. 8. 17.

티스토리툴바