4냥이 집사의 개발 공부일지

 JSX란 JavaScript XML을 말하며, JavaScript 파일에 HTML과 유사한 코드를 작성할 수 있게 해주는 JavaScript용 확장 구문이다. JSX는 주로 UI 구축에 많이 사용되는 프레임워크인 React와 함께 사용된다.  만약 우리가 기본 React 문법으로 h1 태그에 내용을 담으려고 하면 다음과 같은 코드를 작성해야 한다. const element = React.createElement("h1", null, "Hello, world!");  React.createElement는 React에서 새로운 가상 DOM 요소를 생성하는데 사용되는 메서드로 세 가지 argument를 받는다. 필요로 하는 argument는 순서대로 type, props, children으로 각각에 들어가는 요소는 다음과 같다. type : "div", "span" 와 같이 만들려는 요소의 유형을 나타낸다. 이는 "h1", "p" 등과 같이 내장 HTML 태그를 나타내는 문자열을 사용할 수도 있다. props : "className", "style"과 같이 요소에 설정하려는 속성을 필요로 한다. 이 argument는 선택적이기 때문에 설정할 필요가 없으면 null을 통해 빈 개체를 전달할 수 있다. childern : 생성 중인 요소 내에 포함하려는 자식 요소로 텍스트 등의 요소를 자유롭게 넣으면 된다. 이것도 선택적 argument이기 때문에 null을 통해 빈 개체를 전달할 수 있다.  위에서 작성한 react 코드를 JSX 문법으로 변환하면 다음과 같다. const element = <h1>Hello, world!</h1>;  이처럼 JSX 문법을 사용하면 HTML과 유사한 모습으로 코드를 작성할 수 있게 되고, 더 간단하고 가독성이 좋게 만드는 게 가능해진다.  당분간 국비교육에서 ai 강화 학...

 [line-height] ۰ line-height는 텍스트 줄 간격을 지정하는 속성이다. 이 속성은 텍스트의 줄 간격을 지정하는데 사용된다. 또한 font-size 속성과 함께 사용되며, font-size에 대한 배수로 지정된다.   예를 들어, line-height: 1.5;를 적용하면 텍스트의 줄 간격이 1.5배로 지정된다. 이때 font-size가 16px이라면 텍스트의 줄 간격은 24px이 된다. [cursor] ۰ cursor 속성은 마우스 커서의 모양을 지정하는데 사용된다. 예를 들어, cursor: pointer는 마우스 커서를 손가락 모양으로 바꿔준다. 또한 cursor: auto는 브라우저가 기본적으로 제공하는 마우스 커서를 사용한다. 이외에도 default, crosshair, help 등의 다양한 값들이 있다. [letter-spacing] ۰ letter-spacing은 글자 간격을 지정하는 속성이다. 이때, px을 값으로 주면 지정한 px만큼의 간격이 지정되고, em을 값으로 주면 font-size의 배수만큼 간격이 지정된다.  예를 들어, font-size: 16px; letter-spacing: 2px; 을 적용하면 글자 간격이 2px로 지정된다. 그리고 font-size: 16px, letter-spacing: 0.1em;을 적용하면 글자 간격이 1.6px로 지정된다. [position] ۰ position은 요소의 위치를 지정하는 속성이다. 이 속성은 요소를 상대적으로 또는 절대적으로 배치할 수가 있다. 이에는 다음과 같은 값들이 있다. - static : default 값으로, 요소를 문서 흐름에 따라 배치한다. - relative : 요소를 자신의 위치를 기준으로 배치한다. - absolute : 요소를 parent 요소를 기준으로 배치한다. - fixed : 요소를 뷰포트를 기준으로 배치한다. - sticky : 스크롤 영역을 기준으로 요소를 배치한다. [text-transform] ۰ t...

내 마음대로 값을 바꿔가며 사이트를 클론 코딩해보는 중이다. 진행 중에 새롭게 알게 된 CSS 속성들에 대해서 조금씩 정리해 봐야겠다. [font-family] ۰ font-family 속성은 CSS에서 사용되는 속성으로 글꼴을 지정하는 속성이다. font-family 속성은 글꼴의 이름을 지정하며 여러 개의 글꼴을 지정할 수 있다. 만약 지정한 글꼴이 pc에 없을 경우 브라우저는 기본 글꼴을 사용한다. vscode에 font-family를 입력하면 기본으로 사용할 수 있는 글꼴을 여러 개 표시해 준다. 그 이외의 글꼴을 사용하기를 원한다면, 관련 사이트에서 다른 글꼴을 다운 받아 적용시켜야 한다. [font-weight] ۰ font-weight 속성은 글자의 굵기를 설정하는 CSS 속성이다. 사용할 수 있는 속성값으로는 lighter, normal, bold, bolder 등이 있습니다. 또한 100~900과 같이 숫자로 텍스트의 두께를 설정할 수도 있습니다. 여기서 normal은 400과 같고, bold는 700과 같다. 그리고 bolder는 부모 요소보다 더 굵게, lighter는 부모 요소보다 더 얇게 표시된다. [text-align] ۰ text-align 속성은 텍스트의 수평 방향 정렬을 설정하는 CSS 속성이다. 사용할 수 있는 속성값으로는 left, right, center, justify 등이 있다. 당연히 left는 왼쪽 정렬, right는 오른쪽 정렬, center는 중앙 정렬이고, justify는 각 줄의 너비를 동일하게 늘려서 줄을 늘린다. [flex-wrap] ۰ flex-wrap 속성은 flex-item 요소들이 강제로 한 줄에 배치되게 할 것인지, 또는 가능한 영역 내에서 벗어나지 않고 여러 행으로 나누어 표현 할 것인지를 결정하는 속성이다. 만약 영역 내에서 벗어나지 못하게 설정한다면, 동시에 요소의 방향 축을 결정할 수 있다.  예를 들어, flex:wrap : wrap; 을 설정하면 flex...

 [Extends] ۰ python에서 사용하던 extend 메서드와 비슷하다. SCSS에서도 지정해 두고 싶은 스타일들을 선택자에 담아뒀다가, 필요할 때 해당 선택자의 스타일을 @extend를 통해 상속받아 사용할 수 있다. 쓰고 보니까 뭔가 비슷하지 않은 것 같지만, 요소를 뭉태기로 집어넣는 다는 점에서 비슷하다고 생각한다. 아래와 같이 사용할 수 있다. -> _extends.scss 선택자들 담아두는 용도로 파일 생성 %btn {     background-color : #fff;     border : 1px solid #ccc;     padding : 5px 10px; } -> style.scss로 돌아와서 상속 받기(import 필수!) bottuon {     @extend %btn;     font-size : 15px; }  이게 끝이다. 매우 간단하게 사용할 수 있어서 내가 자주 사용해야 할 특정 스타일이 있다면, extend로 묶어뒀다가 상속 받아 사용하면 편하게 사용할 수 있을 것 같다. [mixin, @content] ۰ @content는 SCSS의 mixin에서 사용되는 지시어로 mixin에서 선언된 블록을 가져와 mixin의 내용과 함께 렌더링 한다. 이를 통해 mixin의 내용을 재사용하면서 mixin의 내용을 변경할 수 있다. 사용법은 아래와 같다. @mixin responsive ( $width ) {   @if $width == "768" {     @media screen and ( max-width : 768px ) {       @content ;     }   } @else if $width == "900" {     @media screen and ( min-width : 769px )...

۰ SCSS는 CSS보다 심플한 표기법으로 CSS를 구조화 해서 표현할 수 있다. SCSS 사용법은 중괄호로 중첩을 표현하고, 세미콜론으로 속성을 구분한다. 반면, CSS는 중괄호와 세미콜론을 모두 사용한다. 이는 CSS 보다 SCSS가 가독성이 높아지고, 유지보수성이 높아지는 이유이다. [CSS 작성 예시] [SCSS 작성 예시] ۰ 위의 사진처럼 작성하기 때문에 SCSS에서는 가독성이 높아지고, 유지보수성이 더 높아진다. 하지만 브라우저는 scss를 읽을 수 없기 때문에 scss를 사용할 때, scss와 css를 연결한 후 css를 html 파일과 연결해야 한다. 연동하는 방법으로는 Sass와 Live Sass Compiler 확장 프로그램을 설치하면 된다. ۰ scss에서 파일을 만들어 사용할 때, 파일명 앞에 _ (언더바)를 입력하면, 해당 파일은 css로 변경하고 싶지 않다는 표시이다. 오직 scss로 사용하기 위한 파일을 만들 때 사용한다. [Variables] ۰ 위에서 말한 방식으로 _value.scss 파일을 만들었다면, 우리가 css와 연동해서 사용 중인 scss 파일에 해당 파일을 import 해준다. -> @import "_value"; ۰ _value.scss 파일은 우리가 사용할 속성들을 변수로 선언해 뒀다가 해당 변수를 메인으로 사용 중인 style.scss 파일에서 불러서 사용하는 역할이다. 변수를 선언하고 사용하는 방법은 아래와 같다. -> $bgcolor: aqua;  (변수선언) -> body { backgroundcolor : $bgcolor; }     (main scss에서 사용하는 법) [Nesting] ۰ Nesting은 맨 위에 올려둔 SCSS 작성 예시와 같다. 기존의 CSS는 class 안의 요소들 마다 중괄호를 열어서 사용해야 했다. 하지만 SCSS는 중괄호 안에서 해당 요소들을 중첩 해서 사용할 수 있다.  [Nesting 작성 예시] 만약 위처럼 b...

 이전까지 설명한 flexbox를 이용하면 item들의 상하, 좌우, 중앙 정렬 등은 쉽게 가능하지만, 격자(grid) 형태의 구성을 하는 건 어렵고, 오래 걸린다. 그런 수고를 덜어주고자 나타난 게 grid다. [grid] ٠ display : grid; -> CSS grid layout을 사용하기 위한 시작점. ٠ grid-template-columns : 100px 100px 100px; -> grid의 column 수를 정하고, 해당 column들의 크기를 할당해 주는 속성이다. ٠ grid-template-rows : 100px 100px 100px; -> grid에서 선택된 row의 크기를 할당해 주는 속성이다. 만약 선택한 row의 수 보다 실제 row의 수가 많다면, 선택된 row까지만 값을 적용하고 나머지는 default 값이 적용된다. ٠ column-gap : 10px; -> column들의 간격을 할당해 준다. ٠ row-gap : 10px; -> row들의 간격을 할당해 준다. ٠ gap : 10px; -> column과 row의 간격을 한 번에 할당해 준다. ٠ repeat(4, 100px); -> grid-template-columns: repeat(4, 100px)은 grid column을 4개 만들어서 모두 100px을 적용한다는 말이다. repeat을 응용하면 '100px repeat(2, 200px) 100px' 처럼 같은 4개의 column이지만, 할당을 다르게 줄 수도 있다. ٠ grid-template-area :  위의 코드에 노란색 선으로 표시한 것처럼 각 child 마다 이름을 부여하고, child 값을 넣고 싶은 곳을 grid-template-area에 배치하면 그대로 출력 된다. 하지만 grid 내부에 grid-area의 영역이 나눠지지 않고 전부 이어져 있어야 한다. 또한 영역이 ㄴ자, ㄱ자 처럼 꺾이지 않고 직사각형 형태여야 만들어진다. ٠ auto; -...

 flex-box는 width나 height의 크기를 신경 쓰지 않는다. 오직 item을 한 줄에 위치시키는 것만 고려한다. 브라우저의 크기가 줄어든다면, width 값을 줄여서 flex-box를 유지한다. [flex-wrap] flex-wrap : nowrap; -> 사용하지 않을 때에도 적용되는 default로 flex-box가 한 줄에 위치하게 만든다. flex-wrap : wrap; -> itmes의 width, heigth 설정 값을 유지하라는 명령어다. 크기를 유지하기 위해서 라면 줄에서 흩어져도 상관없다. flex-wrap : wrap-reverse; ->wrap 상태로 만들되, 순서를 뒤집어서 정렬한다. [flex-direction] flex-direction : row-reverse; -> item들을 가로로 정렬하되, 그 순서를 뒤집어서 정렬한다. flex-direction : column-reverse; -> item들을 세로로 정렬하되, 그 순서를 뒤집어서 정렬한다. [align-content] align-content : flex-strat; -> 적용하지 않았을 때의 default로 item들을 parent요소의 가장 상단으로 붙인다. align-content : flex-end; -> item들을 브라우저가 표시되는 영역에 한 해서 parent요소의 가장 밑으로 붙인다. [flex-shrink] flex-shrink : 2; -> nth-child()를 통해 하나의 child 요소만 지정하고 사용할 경우, flex-box의 크기가 줄어들 때 해당 child요소만 다른 요소들에 비해서 크기가 2배 더 줄어든다. *flex-shrink : 3;의 경우는 3배로 줄어든다. 즉, nth-child()를 이용해 각 child 요소들에 flex-shrink를 적용한다면, 브라우저의 크기에 따라 원하는 크기로 조정하는 게 가능하다. [flex-grow] flex-grow : 1; -> nth...

[CSS 문법 정리 - 1] flex container는 바로 붙어 있는 children한테만 적용이 된다. <div class="first-parent">     <div class="first-children">          <div class="second-children" />     </div> </div>  이런 html 코드 구성이 있을 때, css에서 first-parent에 flex container를 적용하면, 해당 내용은 first-children한테만 적용되고, second-children에는 적용이 되지 않는다. 즉, display : flex 와 같은 배치를 원할 경우, 우리가 지정하고 싶은 children의 parent요소에 display : flex 값을 적용해야 한다.   main axis는 배치 방향에서 가로 방향의 축을 나타내고, cross axis는 세로 방향의 축을 나타낸다. 만약 내가 가로(main axis)로 요소를 움직이고 싶다면 justify-content를 사용하고, 세로(cross axis)로 요소를 움직이고 싶다면 align-items를 사용한다.   [justify-content] justify-content : center;  -> 지정된 요소를 반응형으로 계속해서 브라우저의 중앙으로 위치하게 조정한다. justify-content : space-between; -> 말 그대로 지정된 요소의 사이에 공간을 준다. justify-content : space-around; -> 지정된 요소의 좌우 공간에 동일한 여백을 만들어 준다. [align-items] align-items : center; -> children을 parent의 세로 축의 중앙에 위치하게 해준다. align-items : stretch; -...

오늘은 GitHub 사용법에 대해서 간단하게 작성해 볼 예정이다.  GitHub은 소프트웨어 개발을 위한 온라인 플랫폼이다. GitHub에서는 Git이라는 버전 관리 시스템을 사용해 코드를 저장하고 공유할 수 있다. GitHub은 오픈 소스 커뮤니티를 지원하고, 코드 리뷰, 버그 추적, CI/CD, DevOps, 코드 보안 등의 기능을 제공한다.   Git에 대해서 GitHub과 비슷한 기능을 하는 tool들은 여러 가지가 있다. GitLab : GitLab은 GitHub과 비슷한 기능을 제공하는 플랫폼이다. GitLab은 오픈 소스이고, 자체 서버에 설치가 가능하다. 또한 CI/CD, DevOps, 보안, 모니터링 등의 기능을 강화하며 GitHub과 비슷한 기능을 수행한다. Bitbucket : Bitbucket은 Atlassian이 만든 Git 기반의 플랫폼이다. 그렇기에 Bitbucket은 Jira, Confluence, Trello 등의 Atlassian 제품과 잘 통합된다. Gitea : Gitea는 가볍고 빠르고 쉽게 설치할 수 있는 Git 서비스입니다.  [GitHub 로그인] -  GitHub.org   <-- GitHub 링크!! - GitHub에 들어가서 회원가입을 하다 보면 authorize git-ecosystem 이라는 문구가 나온다. authorize git-ecosystem은 git-ecosystem이라는 조직의 OAuth 애플리케이션을 인증하고, git-credential-manager라는 프로젝트를 진행하는 조직이다. git-credential-manager는 git에서 자격 증명을 관리하는 도구다.  이런 authorize git-ecosystem를 로그인 시에 해줘야 하는 지는 github의 설정에 따라 다를 수 있다. authorize git-ecosystem을 하면 git-credential-manager를 사용할 수 있어서 자격 증명을 편리하게 관리할 수 ...

* 아래 내용은 '코딩애플' 님의 '쉽게 설명하는 git 기초' 영상을 참고했습니다. [Git 설치] - git을 사용하려면 우선 git을 설치해야 한다. -  https://git-scm.com/download/win  <-- 다운로드 링크! - Standalone Installer 중 내 windows에 맞는 파일을 클릭. 설치한다. * 설치 중 아래 내용을 변경해줘야 한다. - Use Visual Studio Code as Git's default editor (vscode를 기본값으로 설정!) - Override the default branch name for new repositories (git init 명령어를 입력하면, 초기 branch가 생성된다. 이때 위의 내용을 선택하면 git이 설정해주는 branch 이름이 아니라, 내가 지정한 이름으로 초기 branch 이름이 변경된다.) 위 내용만 따라가고 나머지는 다 초기 세팅으로 Next를 눌러주자! [Git 사용방법] - Windows PowerShell을 켜고 아래와 같이 입력해준다. git config --global user.name "이름" git config --global user.email "이메일" 이름과 이메일은 본인 이름과 이메일을 넣으면 된다! - 다음으로 우리가 git을 활용하고 싶은 프로젝트 폴더로 넘어가서 git init을 해준다. 나의 경우는 조금 늦었지만, 이번에 작업한 Momentum2 폴더를 사용해 볼 예정이다. cd Momentum2 git init  git init을 하면 'Initialized empty Git repository in 폴더 위치' 이런 문구가 나온다. git init 명령어는 새로운 Git 저장소를 생성하거나 기존의 저장소를 재설정하는 데 사용된다.  git init 명령어를 사용하면 .git 이라는 숨겨진 디렉토리가 생성되는데, 이 디렉토리는 Git...

    * 아래 진행은 '노마드코더' 님의 무료 JS 강의를 참고했습니다. 이번에는 새로운 메서드를 이용해서 사용자의 위치를 특정하고, 위치를 기반으로 api를 적용해 해당 위치의 날씨 정보를 브라우저 상에 표시해줄 예정이다. [weather.js handling] - 우선 사용자의 위치를 특정하기 위한 메서드를 살펴보자. navigator.geolocation.getCurrentPosition() 위 메서드는 geolocation.getCurrentPosition 에서 두 개의 argument를 받는다. 하나는 사용자가 위치 정보를 넘기는 걸 허용했을 경우이고, 다른 하나는 사용자가 거부했을 경우이다.  그렇기에 우리는   geolocation. getCurrentPosition을 사용하기 위해서 successCallback 함수와 errorCallback 함수를 각각 만들어둬야 한다. function geoSuccess(position) {     console.log(position); } function geoError() {     alert("We can't find your location."); } - 위의 코드를 실행하면 브라우저에서 위치 정보를 보내는 것에 대한 동의가 나오고, 동의를 할 경우 console 창에 GeoLocationPosition이 나타난다.  내부의 요소를 보면 coords(좌표)가 있고, 그 안에 latitude(위도)와 longitude(경도)가 담겨있는 걸 확인할 수 있다. 각 좌표를 활용하기 위해 function 안에서 변수로 선언한다. function geoSuccess(position) {     const lat = position.coords.latitude;     const lon = position.coords.longitude;     console.log(lat...

  * 아래 진행은 '노마드코더' 님의 무료 JS 강의를 참고했습니다. 이번에는 사용자가 원하는 todo-list를 입력할 경우 웹 브라우저 상에 표시해주고, 삭제를 가능하게 만들 예정이다. [index.html handlin] - 먼저 index.html에 새로운 form 태그와 input 태그를 추가해 준다. form id="todo-form" input type="text" placeholder="Write your to do and press enter." required 여기서 새로 추가된 required는 html에서 해당 input에 입력을 필수로 강제한다. 값을 입력하지 않으면 submit 할 수가 없다. - 다음으로 input 된 내용을 담아서 표시해 줄 ul 태그를 추가한다. ul id="todo-list" ul 태그 내부는 todo.js 파일에서 추가해줄 예정이라 비워둔다. ul 요소는 내부의 목록을 숫자 순서가 없는 항목으로 그룹화 하는데 사용된다. 일반적으로 점, 원 등 여러 가지 형태의 글머리 기호로 표시된다. [todo.js handling] - todo-form과 input, todo-list를 불러온다. const todoForm = document.querySelector("#todo-form"); const todoInput = todoForm.querySelector("input"); const todoList = document.querySelector("#todo-list"); 여기서 todoInput 같은 경우는 todo-form 내부에 있기 때문에 위처럼 표기가 가능하다. - 다음으로 todo-form에 submit을 적용하고, todoInput을 변수 선언할 함수를 함께 짜준다. function todoSubmit(event) {     event.preventDefault();...

  * 아래 진행은 '노마드코더' 님의 무료 JS 강의를 참고했습니다.  이번에는 영문으로 된 격언과 그걸 한글로 번역한 문장을 웹 브라우저에 랜덤으로 띄울 예정이다. 이를 위해서 격언 10개를 영/한 버전으로 각각 준비해 둔다.  그 다음으로는 배경 이미지를 마찬가지의 방법으로 랜덤으로 웹 브라우저 상에 띄울 예정이다. 이를 위해서 사전에 배경 이미지 3개를 준비해 둔다. [quotes.js handling] - quotes.js 파일을 추가하고, index.html과 연결한다. - index.html에 영/한 버전의 격언이 들어갈 자리를 추가한다. div 태그 id="quotes"로 만들어서 그 안에 span 태그를 두 개 추가한다. - 여기서 div 태그와 span 태그의 차이점을 짚고 넘어가자. span : 문장 단위로 텍스트 영역을 지정(한 줄로 표현되는 인라인 요소로 줄 바꿈을 하지 않으며 한 줄로 표시) input) <span>text</span>other output) textother div : 문단 단위로 영역을 지정(블록 레벨 요소로 줄 바꿈이 일어나 상하로 분리 된다) input) <div>text</div>other output) text            other 위와 같이 출력 되는 차이점이 있다. - 이제 quotes.js 로 넘어와서 미리 준비했던 격언들을 array 형태로 변수를 선언해 준다. const quotes = [ {  quote : "The dies is cast",  translate : "주사위는 던져졌다.", }, ... ]; - 이제 html에 작성해 둔 div id="quotes"의 span들과 연결해서 변수를 선언한다. const qoute = document.querySelector("#quotes span:first-child"); const traslat...

 * 아래 진행은 '노마드코더' 님의 무료 JS 강의를 참고했습니다. 처음 보는 메서드들은 developer.mozilla.org 에 검색해서 추가로 알아봤습니다.  [clock.js handling] 먼저, 사용자의 현재 시간을 웹 브라우저 상에 띄워주는 코드를 짜보자. - clock.js 파일을 만들고, html에 추가해준다. - 시간을 표시하려면 new Date() 를 활용하면 된다. new Date()를 호출하면 새 Date 객체를 반환해준다. - 그냥 Date() 만 해서 console.log 해봐도 현재 시간이 표시된다. 하지만 Date()는 모든 인수를 무시하고 현재 시간만 표시하는 것으로 new Date().toString() 과 같다. 즉, 우리가 원하는 것들만 표현하는 게 불가능하다. - new Date()에서 불러올 수 있는 값은 다음과 같다. 1) year : 연도를 나타내는 정수 값으로 0에서 99까지의 값은 1900년 - 1999년을 나타낸다. 이외의 모든 값은 실제 연도를 나타낸다. 2) monthIndex : 1월 - 12월의 값을 표시해주는 것으로 1월 = 0 부터 12월 = 11 까지 카운트를 한다. 3) day : 해당 월의 요일을 나타내는 정수 값으로 default는 1이다. 4) hours : 하루의 시간을 나타내는 0 ~ 23 사이의 정수 값으로 default는 0이다. 5) minutes : 시간의 분을 나타내는 정수 값으로 default는 0이다. 6) seconds : 시간의 초를 나타내는 정수 값으로 default는 0이다. 7) milliseconds : 시간의 밀리초를 나타내는 정수 값으로 default는 0이다. 이외에도 new Date().get 을 찍어보면 자동완성으로 나오는 값들이 여러 개 존재한다. - html로 잠시 넘어와서 clock을 넣고 싶은 위치에 h2 태그 id="clock"을 추가한다. - clock.js에 clock을 변수 선언해서 위의 #clock을 불러...

 오늘은 웹페이지 상에 login-form을 만들어 볼 예정이다. 사용자가 이름을 input 하면 localStorage에 해당 내용을 담고, 해당 내용에 인사말을 덧붙여서 출력할 거다. * 아래 진행은 '노마드코더' 님의 무료 JS 강의를 참고했습니다. [HTML handling]  - 우선 index.html에 form 태그를 입력하고, id="login-form"으로 설정한다. 이 id는 이후에 js파일에서 해당 태그의 내용을 handling할 때 사용된다.  - 이제 이 login-form 안에 input 태그를 두 개 작성해준다. 하나는 type="text"로 사용자로부터 이름을 입력 받을 곳이고, 하나는 type="submit"으로 사용자가 해당 버튼을 누르면 함수가 작동하게 만들 예정이다. (HTML에서는 꼭 form 태그 안에 input 태그를 넣어야 동작한다.)  - type="text" 를 기록한 input에는 requeired maxlength="15" 로 최대 입력 길이를 15개로 제한한다. 그리고 placeholder="" 로 칸에 넣었으면 하는 내용을 text로 표시해준다.  - type="submit" 을 기록한 input에는 value="Log in" 으로 설정해 Log in 이라는 이름의 버튼을 생성한다. 이때, value 속성을 설정하지 않으면 사용자 에이전트가 선택한 기본 레이블이 지정된다. ex) 제출 [greetings.js handling] 작성 순서는 다음과 같다. 1) login-form에 입력한 값을 제출해줄 submit 함수를 만든다. 2) 제출한 값을 localStorage에 저장한다. 3) 사용자가 값을 제출할 경우 login-form을 웹 상에서 안 보이도록 만든다. 4) login-form을 대신해서 localStorage에 저장한 값을 불러오고, 거기...

 처음 작성해보는 터라 어떻게 써야 할지 모르겠어서 곱씹는 느낌으로 처음부터 세세히 써보려고 합니다. (Window 기준!) 당분간 작성하는 게시물들은 '노마드코더'님의 무료 JS강의를 바탕으로 작성할 예정입니다. [작업 폴더 생성]  - 우선 vscode에 작업 폴더를 하나 만들기 위해 cmd를 켜서 mkdir Momentum2를 입력합니다. (cmd는 윈도우+r 키를 입력하면 나오는 실행에서 cmd를 입력하면 나옵니다.)  - cd Momentum2를 해서 해당 폴더로 이동한 후, code . 을 입력해 해당 폴더를 vscode에서 띄워줍니다. [파일 분류]  - 작업 폴더 내에 css를 작성할 폴더와 js를 작성할 폴더를 각각 하나씩 만듭니다.  - 당장은 아니지만 이후에 사용할 거기 때문에 css 폴더에는 style.css 파일을 만듭니다.  - js 폴더에는 greeting.js로 파일을 하나 생성합니다. greeting은 우리가 해당 js파일로 구현한 내용을 파일명으로 설정한 겁니다. (페이지가 열릴 경우 가벼운 인사말을 만들 예정)  - 처음의 Momentum2 폴더에 index.html 파일을 하나 생성합니다. 해당 파일을 통해서 우리는 웹 상에 우리가 js로 만들어낸 내용들을 표현해낼 예정입니다. [JS 문법 정리]  - const : 변수 선언을 하는 역할. 무조건 변수를 할당해줘야 하고, 한 번 지정해 두면 밑에 코드에서 변경이나 상대적 응용이 불가능함. 무조건 처음에 할당한 그대로만 사용해야 한다. ex) const a = "hi"; 이렇게 선언할 경우 console.log(a)를 하면 hi값이 출력 된다.  - let : const와 마찬가지로 변수 선언을 하는 역할. 하지만 const와 다르게 밑에 코드에서 업데이트를 원할 경우 업데이트가 가능하다. ex) let a = hi; a = bye; 이렇게 할 경우 a는 bye를 출력하게 업데이트 된다. ...