본문 바로가기

전체 글

 (137)
JavaScript 구문 - 조건문과 반복문 if // if if( 조건 ){ // 조건이 참일 경우 실행 } // if - else if( 조건 ){ // 조건이 참일 경우 실행 }else{ // 조건이 거짓일 경우 실행 } // if - else if - else if( 조건1 ){ // 조건 1이 참일 경우 실행 } else if( 조건2 ){ // 조건 1이 거짓이고, 조건 2가 참일 경우 실행 } else { // 조건 1과 조건 2가 모두 거짓일 경우 실행 } - 조건구문입니다. - 해당 조건에 성립되지 않는 값을 따로 조건으로 걸 경우 else를 사용합니다. - else 뒤에 if를 붙인 else if 구문을 통해 앞의 조건에 속하지 않으면서 추가 조건을 걸 수도 있습니다. switch // switch 구문 // switch(조건){..
JavaScript 연산자 산술 연산자 ( + , - , * , / , % ) console.log(1+2) // 3 console.log(3-2) // 1 console.log(2*4) // 8 console.log(10/2) // 5 console.log(8%3) // 2 - 더하기, 빼기, 곱셈, 나눗셈을 수행하는 연산자입니다. 할당연산자 ( = ) let a = 3 a+=2//5 a-=3//2 a*=6//12 a%=8//4 a/=2//2 - 왼쪽의 데이터에 오른쪽의 값을 할당하는 연산자입니다. - 산술연산자와 함께 사용하여 왼쪽 데이터에 산술을 수행한 값을 할당할 수도 있습니다. 증감연산자 ( ++ , -- ) let a = 3; console.log(a++)// 3 (3에서 출력 후 증가되므로) console.log(++..
JavaScript 데이터 - 데이터 타입 확인과 형변환 JavaScript 데이터 형변환 console.log(123+'a') // 123이 String으로 변환되어 '123a'가 됩니다. - javascript의 데이터들은 상황에 따라 적절한 데이터 타입으로 변환됩니다. 동등 연산자와 일치 연산자 // true로 출력되는 값 console.log(123=='123') console.log(1==true) console.log(0==false) console.log(null==undefined) console.log(''==false) - 동등 연산자(==) 를 사용하면 데이터 타입 변환을 확인해 볼 수 있습니다. // false로 출력되는 값 console.log(123==='123') console.log(1===true) console.log(0===f..
JavaScript 데이터 - 참과 거짓 데이터마다 참으로 취급되는 데이터가 존재하고 거짓으로 취급되는 데이터가 존재합니다. if( true && {} && [] && 42 && '0' && 'false' && new Date() && -42 && 12n && (3.14) && (-3.14) && (Infinity) && (-Infinity) ) { console.log('참') } - 참이되는 값 1. true 2. 0이 아닌 Numbers , BigInt 3. 값이 존재하는 문자열 4. Object 데이터 5. Array 데이터 if( false || null || undefined || 0 || -0 || NaN || 0n || '' ){console.log('거짓')} - 거짓이 되는 값 1. false 2. 0의 값을 가지는 Numbe..
JavaScript 데이터 Javascript를 사용하기 위해서는 데이터를 원하는 대로 다룰 줄 알아야 합니다. 데이터 선언 JS 데이터 선언에는 크게 두가지로 const와 let이 존재합니다. const는 값이 변하지 않는 데이터를 의미합니다. let은 코드에 의해 값이 변할 수 있는 데이터를 의미합니다. var라는 선언방식이 존재하지만, 호이스팅관련 문제를 일으킬 수 있으므로 가급적 사용을 피하는것이 좋습니다. 데이터 타입 JS 데이터 타입에는 크게 원시형과 참조형 두가지가 존재합니다. 원시형 원시형 타입에는 String, Number, Boolean, null, undefined 의 5가지가 있습니다. 1. String // 문자는 따옴표를 사용합니다. const s1 = "Thomas" const s2 = '12' // 템..
JavaScript 시작하기 시작하기 이전에 - vscode 내의 extension(확장) 부분에서 Live Server를 설치해 주세요. 1. html 파일 만들기 - index.html 파일에 들어가 ! 를 입력하면 기본적인 html 형식을 제공받습니다. 이를 Emmet Abbreviation 이라고 합니다. 2. main.js 파일을 만들고, script 태그로 헤더에 연결해주기 - script 태그에 src를 입력하여 외부 js파일을 만들 수 있습니다. - javascript를 먼저 읽은 뒤에 body 태그를 읽을 수 있도록 하기 위해 defer 속성을 추가해 줍니다. 3. js 파일이 잘 작동하는지 확인해보기 - main.js 파일에 hello world 를 출력하는 코드를 입력해봅니다. - 그 뒤, index.html 파..
[제로베이스] 한달 동안 프론트엔드 스쿨을 수행하면서 제로베이스 프론트엔드 스쿨 25기를 진행한지 한달째입니다. 4주동안 열심히 배웠고, 마크업 부분에서 어느정도 성과를 보았다고 생각하고 있습니다. 마크업 디자인 부분이 아직은 서투르고, 확실하게 이해하지 못했던 지난달에 비해 position, flex 와 grid layout, 시멘틱 웹 등의 지식들을 많이 배울 수 있었다고 생각하고 있고, 그 외에도 sr-only, ARIA 등의 스크린리더 사용자를 위한 마크업 설계 등 프론트 엔드 개발자로서의 시야를 넓힐 수 있었던 점이 좋았다고 생각합니다. 사실 완전하게 잘 따라가고 있느냐 라는 질문에는 그렇다 라고 대답하기는 힘들것 같습니다. 주어진 미션에 대해 고민하느라 조금씩 밀렸고, 이 때문에 마지막 4주차 강의가 좀 밀렸거든요. 하지만 최대한 빠르게 따라잡아..
제로베이스 프론트엔드 스쿨 - HTML/CSS프로젝트를 수행하면서 프론트엔드 스쿨을 신청한 뒤 수행한 첫번째 과제입니다. 총 5개의 미션이 있었고, 강의를 들은 것들을 다시한번 활용하면서 부족한 부분을 채울 수 있던 것 같습니다. 이번 미션을 하면서 가장 많이 든 생각은 react나 vue를 사용하고 싶다는 것이었습니다. 반복되는 태그를 하나하나 수정해야 했고, div 지옥에서 벗어나고 싶은 생각이 많이 들었습니다. 미션을 수행하면서 이부분을 컴포넌트로 만들면 더 깔끔하게 작성될 수 있을텐데 라는 생각이 자주 들었습니다. 그러면서도, HTML과 CSS 만으로 구현할 수 있는 범위가 꽤 넓다는 생각 또한 들었습니다. 이번 미션을 진행하면서 이전에 고민했던 부분을 이렇게 해결할 수 있었구나 라는 생각이 자주 들었습니다. 제가 가장 부족하다고 생각한 부분이 마크업 디자인 부..

티스토리툴바