전체 글

1. CSS 개요 CSS (Cascading Style Sheets)는 웹 페이지의 스타일 및 레이아웃을 정의하는 스타일 시트 언어이다. 사용자가 HTML 문서에 작성된 콘텐츠를 잘 이해할 수 있도록 돕는 역할을 한다. 1) CSS와 프론트엔드 개발 사용자 인터페이스(UI : User Interface)는 사용자가 컴퓨터와 상호작용하는 시스템이다. 사람과 사물 또는 시스템 사이에서 의사소통을 할 수 있도록 일시적 또는 영구적인 접근을 목적으로 만들어진 물리적, 가상적 매개체를 뜻한다. 이전에는 사용자가 애플리케이션과 소통하기 위해 명령어 인터페이스(CLI :Command Line Interface)를 사용하였다. 원하는 기능을 이용하기 위해서는 컴퓨터 자판 등을 이용해 명령 문자열을 입력하여 체계를 조작..

1. HTML 1) 개요 웹 개발은 하나의 건물을 세우는 것에 비유할 수 있다. HTML은 구조, CSS는 스타일, JS는 사용자와 상호작용하는 역할을 한다. 2) HTML의 기본 구조와 문법 HTML(HyperText Markup Language)은 웹페이지의 틀을 만드는 마크업 언어이다. 내부는 부등호로 묶인 HTML의 기본 구성 요소인 태그들의 집합으로 이루어져있으며 .html 확장자를 사용한다. 3) 시맨틱 태그 시맨틱 태그는 HTML5에서 처음으로 등장하는, 의미가 있는 태그들이다. 모든 요소를 태그에 css로 스타일링하면 어떤 작업도 가능하지만 그다지 효율적인 방법은 아니다. 그러나 시맨틱 태그를 사용하면, 브라우저도 개발자도 이 요소가 어떤 의미를 가지고 있는지 한 눈에 이해할 수 있다. ✅..

* 소수 판별하기 // 소수 : 수학에서 1과 그수 자신 이외에는 자연수로 나눌 수 없는, 1보다 큰 자연수 function isPrime(num) { // 제곱근 Math.sqrt() let sqrt = Math.sqrt(num); // 1. 소수는 1보다 커야 한다.(=1은 소수가 아니다) if (num === 1) { return false; } // 2. 2를 제외한 짝수는 소수가 아니다 (2는 소수) if (num === 2) { return true; } if (num % 2 === 0) { return false; } // 3. 3부터 자기 자신 '전'까지 나누어 떨어지는 수가 하나라도 있으면, 소수가 아니다. for (let i = 3; i < sqrt; i++) { if (num % i ..

1. 조건문 1) if문 주어진 조건식의 true / false 여부에 따라 실행을 결정한다. 따라서 조건식의 결과는 boolean 타입이 되도록 작성해야 한다. 2) else문 조건이 true일때와 false일때 각각 다른 코드가 실행되도록 해준다. else문은 독립적으로 사용할 수 없으며 if문 바로 뒤에 작성해야 한다. 조건을 더 추가해야할 경우에는 else if문을 사용한다. if, else문은 두번 이상 사용할 수 없지만 else if문은 여러번 사용이 가능하다. 3) 삼항 조건 연산자 조건문 ? 참일때 실행할 코드 : 거짓일때 실행할 코드 if문과 else문은 삼항 조건 연산자로 바꿔쓸수있다. 조건에 따라 실행할 코드가 간단할 경우 - 삼항 조건 연산자 사용(간단함. 가독성👍) 조건에 따라 실..

오늘은 자바스크립트의 기초와 타입, 변수에 대해 공부했다. 어느정도 알고 있는 내용이 있긴 했지만, 그래도 다시한번 꼼꼼히 공부할 기회가 생겨서 좋았다. 내가 안다고 생각했어도 부족한 부분이 분명히 있다. 그러니까 아는 부분이라도 한번 더 정독하고 정말로 아는건지 한번 더 생각해보자. 또 연습문제를 풀때는 자연어로 먼저 의사코드를 작성하는 것을 습관화 하자. * 오늘 배운 것 자바스크립트 주석 작성 한줄의 경우 // 로, 여러줄의 경우 /* */ 사이에 작성함 // 한줄은 이렇게 /* 여러개는 이렇게 */ 자바스크립트 타입 자바스크립트에는 총 7개의 타입이 있음. 오늘 배운건 Number, String, Boolean 세가지. 자바스크립트의 모든 값은 타입을 갖고 있으며 타입으로 쉽게 분류할 수 있다. ..

코드스테이츠 첫날~!~!~!! 솔직히 긴장 많이 했는데 생각보다 괜찮았음! 오늘은 오리엔테이션 위주다보니 전체적으로 수업 진행되는거나 전반적인 규칙이나 부트캠프를 진행하면서 가져야할 마음가짐 같은 내용들로 일정이 진행됐다. 자료들 읽어보면서 어떻게 해야할지 생각도 해보고 긴장되는 마음도 좀 가라앉힐 수 있어서 좋았다. 부트캠프를 시작하면서 다잡는 내 목표는 수료 후 6개월 내로 취업하기! 가능하다면 여름 전이나 늦어도 추석 전에는 취직하고싶다...ㅎㅎ 빠른 취업을 바란다면 역시 그만큼 내가 열심히 해야겠지 그런 김에 세워보는 하루 루틴😎 나는 시간단위로 계획을 세우면 잘 안해서ㅎ 그냥 할일 목록을 만들거다 9시부터 6시까지는 정규수업 * 수업 이후에 해야할 일 - 수업때 배운내용 정리해서 블로그에 TIL..

07장 연산자 산술 연산자 피연산자를 대상으로 수학적 계산 수행해 새로운 숫자 값을 만듬. 이항 산술 연산자 +(덧셈) -(뺄셈) *(곱셈) /(나눗셈) %(나머지) 단항 산술 연산자 ++(증가) --(감소) + ( 먼저 피연산자의 값을 증가/감소 시킨 후 나머지 연산 증가/감소 연산자가 피연산자의 뒤에 있을 경우 => 먼저 연산을 수행한 후 피연산자의 값을 증가/감소 var x = 5, result; // 선 할당 후 증가 result = x++; // result(5), x(5->6) console.log(result, x); // 5 6 // 선 증가 후 할당 result = ++x; // result(7), x(7) console.log(result, x); // 7 7 // 선 할당 후 감소 r..

06장 데이터 타입 숫자 타입 1. 자바스크립트는 모든 수를 실수로 처리함. 그래서 정수로 표시되는 수끼리 나누더라도 실수가 나올 수 있음. 📂 ex 1 var integer = 10; // 정수 var double = 10.123; // 실수 var negative = -10; // 음의 정수 2. 정수, 실수, 2진수, 8진수, 16진수 리터럴 모두 메모리에 배정밀도 64비트 부동소수점 형식의 2진수로 저장되나 2진수, 8진수, 16진수를 표현하기 위한 데이터 타입이 제공되지 않기 때문에 해당 값을 참조할 경우 모두 10진수로 해석함. 📂 ex 2 var integer = 65; // 10진수 var binary = 0b01000001; // 2진수 var octal = 0o101; // 8진수 va..

05장 표현식과 문 값 표현식이 평가되어 생성된 결과 . 리터럴 사람이 이해할 수 있는 문자, 또는 약속된 기호를 사용해 값을 생성하는 표기법. (값을 생성하기 위해 미리 약속한 표기법) 자바스크립트 엔진은 런타임에 리터럴을 평가해 값을 생성함. 📂 ex // 숫자 리터럴 3 // 문자열 리터럴 'Hi Hello' // 객체 리터럴 { name: 'Harry', age: 13 } // 배열 리터럴 [10, 20, 30] // 함수 리터럴 function() {} 표현식 값으로 평가될 수 있는 문. 다른 표현식의 일부가 되어 새로운 값을 만들어 낼 수 있음. 📂 ex // 리터럴 표현식 100 'abcde' // 식별자 표현식(선언이 이미 존재한다고 가정) sum person.age array[3] // ..

벨로퍼트 리액트 - 7. 리덕스 미들웨어 7-12. saga에서 라우터 연동하기 ⇒ 예제는 react-router-dom v6에서 더이상 사용되지 않는 history를 사용한 예제라 useNavigate를 사용하여 구현해보기로 했다 (참고) https://literate-t.tistory.com/369 ⇒ 위 링크를 참고해서 구현하려고 했더니 아래와 같은 오류 발생. useNavigate는 saga에 바로 넣어서 사용할수는 없는것같다… react-saga에서 라우터를 사용하는 예제를 구글링하고 있는중인데 아무래도 잘 안보인다 ㅜ