빼곡히 채울 프론트엔드 일기장

🌈형 변환 명시적 형 변환 암시적 형 변환 데이터 → 문자 / 데이터 → 숫자 / 데이터 → 불리언 데이터 → 문자 const YEAR = 2023; console.log( typeof String(YEAR) ); // 명시적 형 변환 console.log( YEAR + ' '); // 암시적 형 변환 문자형으로 변환 명시적 형 변환은 typeof String을 붙여 명시적으로 문자형으로 바꾼다고 보여줍니다. 암시적 형 변환은 ' ' 공백 문자를 이용하여 암시적으로 형 변환을 합니다. 데이터 → 숫자 // string let num = '250'; console.log(typeof(num)); //문자 console.log(Number(num)); //숫자 - 명시적 형 변환 console.log(+nu..

🚩 변수와 상수 변수(variable)를 사용하는 이유 코드의 유지보수에 좋습니다. 성능 이슈를 위해 사용 합니다. 선언방법 1. let 2. const 3. var 선언부와 할당부 let name = ‘hello’; let name: 선언부 = : 대입(할당) 연산자 'hello' : 할당부 let user = 'John', age = 25, message = 'Hello'; 위와 같이 한 줄에 여러 변수를 선언하는 것도 가능하지만 가독성을 위해 아래와 같이 한줄에 하나의 변수를 작성하는 것이 좋습니다. let user = 'John'; let age = 25; let message = 'Hello'; 이 외에도 let은 하나만 사용하고 나머지 변수를 ,(쉼표)를 통해 선언하는 방식인 Single le..

1. 리액트의 모듈화 아이디어 우리가 실제로 만들어야 하는 웹사이트는 간단하지 않다. 실제로 HTML/CSS, Javascript를 배우면서 여러가지 용어들과 함수들을 사용하다 보니 간결하게 하려 했던 코드들이 자연스럽게 길어질 수 있고 반복적인 코드들이 들어갈 수 있다. 예를들어 메인 페이지를 위해 필요한 CSS, Javascript 코드가 하나의 style.css, 하나의 script.js 파일에 들어있다고 한다면? 아래와 같은 단점들이 생긴다. = 구현해야 하는 기능이 많아져서 Javascript 가 복잡해지면 하나의 script.js 파일 안에 모든 코드를 넣기가 힘들어 진다. ex) 이 script 코드가 어떤 element 를 제어하고 있는지 잘 파악하기 힘들고, 가독성도 안 좋아진다. ex)..

#.1)display 모든 div 는 block 요소이다 block을 써주지 않아도 적용이 된다. 본인이 속한 한 줄이 전부 자기만의 값을 가지고 있고 그다음의 요소가 올 경우 바로 밑에 쌓이게 된다. 여기서 display: inline; 속성을 사용하면 요소가 가지고 있는 값들의 범위만큼만 크기를 가지게 되고 한 줄로 나열하게 된다. 그리고 inline 속성들의 특징(?)이 있는데 밑의 사진을 보면 중간중간 띄어쓰기가 되어 있는 부분을 볼 수 있을 것이다. 이 이유는 위의 사진 중 html에서 div들을 가독성을 위해 한 줄에 1개씩 작성하였기 때문에 띄어쓰기가 적용된 것이다. 한 줄에 3개의 div를 모두 같이 쓰게 된다면 결과 창에서 띄어쓰기가 사라지는 대신에 코드의 가독성이 떨어질 것이다. #.2..

#1 핵심 CSS 복습하기! position에 대하여 알아보자! 아무것도 선언해주지 않는다면 기본값은 relative이다. position:abdolute는 지금과 같은 경우 기준점이 div로 바로 위의 조상을 기준으로 움직인다. body를 길게 늘린경우 (웹사이트) 우측에 스크롤바가 생긴다. position: fixde를 이용하면 스크롤을 아무리 내리더라도 설정한 값의 위치에 따라 고정할 수 있다. 예를 들면 쇼핑몰의 카톡상담 아이콘이 있다. position: fixde 사용시 주의할 점은 위의 내용과 같이 P 태그와 겹쳐서 보여질 수 있다는 것을 염두해 두고 사용 하여야 한다. position: sticky 는 주로 모바일에서 많이 사용한다. 스크롤을 따라 올라가지다가 요소가 딱 걸쳐질 경우 고정된다..

#1 핵심 CSS 복습하기! 저번주에는 핵심 HTML에 대하여 복습을 하는 시간을 가져 보았고 이번주는 CSS에 대하여 조금씩 정리를 해보려고 한다. #2 CSS란? 종속형 시트 또는 캐스케이딩 스타일 시트(영어: Cascading Style Sheet)는 마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어(영어: Style sheet language 스타일 시트 랭귀지[*])로[1], HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다. W3C의 표준이고, 레이아웃과 스타일을 정의할 때의 자유도가 높다. 자유도 - 위키백과, 우리 모두의 백과사전 위키백과, 우리 모두의 백과사전. ko.wikipedia.org CSS MDN 에서는 Cascading Style Sheets(CSS)는 ..

#1 생각보단 행동으로 누구나 생각만 하기는 쉽다 그것을 행동으로 옮기는 것이 매번 어렵게 느껴진다. 그래서 나는 블로그 글쓰기를 통하여 학습한 내용들을 복습하고 생각을 정리할 수 있는 곳이라고 생각한다. 글쓰기는 미래의 나 그리고 다른 사람들에게 도움을 줄 수 있다는 것을 알게 되었다. 예를 들어 컴퓨터의 문제로 코드들이 날아갈 경우 코드들을 하나하나 전부 기억하지 못하기 때문에 글을 작성해서 정리해 놓으면 블로그를 통하여 어느 정도는 살릴 수 있다. 위의 사진은 강의를 들으면서 매우 인상적이고 나에게 자극을 주어서 첨부하게 되었다. #2 22.12.05 ~ 22.12.11 학습내용 HTML은 프론트엔드를 배우는 사람이라면 제일 처음 접하는 것이라고 생각한다. 지금 현재로서는 HTML의 강의를 들은 후..