gggg 임신 초기 임신 중기 임신 후기
프론트엔드
🩵 01-01. 리액트의 탄생 페이스북 내부에서 사용하다가 오픈소스로 공개됨 웹사이트 UI 효율적 개발 모바일 웹으로도 만들 수 있음 → React Native (안드로이드/iOS 모두 개발 가능 🩵 01-04. 나의 첫 리액트 프로젝트 개발 환경 → VS Code, Chrome ☁️ 리액트 프로젝트 생성 폴더를 VS Code로 안 열었던 경우 → npm init react-app 폴더를 열고 나서 → 터미널에서 npm init react-app . (리액트 프로젝트 생성) ☁️ 개발 모드 실행 npm run start ☁️ 개발 모드 종료 Ctrl + C 🩵 01-05. 리액트 개발자 도구 살펴보기 React Developer Tools → 크롬 확장 프로그램(React 개발자 도구) 설치! 확장 프로..
이 포스팅의 모든 내용은 https://ko.javascript.info/ 모던 JavaScript 튜토리얼 ko.javascript.info 의 내용을 참고하였습니다 :) 🖤 Hello, world! 웹 페이지에 스크립트를 삽입하는 방법 와 같은 형태로 삽입 url 전체를 경로에 넣기도 가능 복수의 스크립트 삽입도 가능 src 속성이 있으면, 태그 내부의 코드는 무시된다. 🖤 코드 구조 한 줄 주석 : cmd + / 여러 줄 주석 : cmd + opt + / → 중첩 주석은 지원하지 않는다 🖤 엄격 모드 use strict 라는 특별한 지시자로 변경사항이 활성화되게 한 것(ES5 등장 이슈로 인함) 스크립트 최상단에 "use strict" or 'use strict' 가 오면 스크립트 전체가 모던한 방..
04-1 텍스트 입력하기 ~ : 제목을 나타내는 태그 hello hello hello hello hello hello h1이 가장 큰 제목, h6이 가장 작은 제목 닫는 태그 필요하다 태그와 태그 태그 : 텍스트 단락을 만드는 태그 편집기에서 줄 바꿈 해도 웹 브라우저에는 한 줄로 표시됨 → 그야 물론 너무 길면 줄 바꿈이 일어나긴 하죠 닫는 태그 필요 → 줄 바꿈 태그는 없나 ?? → → 태그 태그 : 줄 바꿈 태그, 단독으로 사용(닫는 태그 ❌) 태그 인용문 쓸 때 사용하는 태그 닫는 태그 필요 다른 텍스트보다 약간 들여 쓰게 됨 태그와 태그 텍스트 굵게 표시 strong 태그와 b 태그의 차이점 → strong태그는 경고/주의사항 등 중요한 내용 강조 (화면 낭독기에서도 강조하여 읽어줌) , b태그..
⭐Day 2⭐ [오늘의 목표] HTML 기본 문서 만들기 [공부할 페이지] p.44~p.71 03-1. HTML과 첫 만남 03-2. HTML 구조 파악하기 03-3. HTML 파일 만들기 03-4. 웹 문서 구조를 만드는 시맨틱 태그 HTML : HyperText Markup Language (웹 문서를 만드는 언어) HTML 구조 하이 하이 하이 하이 하이 로 시작 → , : 문서 정보를 알려주는 곳. : 문자 세트 등 문서 정보가 들어있음. 화면에 글자 표시 할 때 인코딩 사용 지정할 수 있다. (한글 표시의 경우, 과 같이 UTF-8이라는 문자 세트 사용한다고 표시해야 한다 ~ : 문서 제목을 나타냄→웹 브라우저의 탭 부분에 들어가는 제목! ~ : 웹 브라우저에 직접 표시할 내용을 나타냄. 프런트..
⭐Day 1⭐ [오늘의 목표] 웹 개발 기본 다지기 [공부할 페이지] p.14~p.42 01. 웹 개발 시작하기 / 02. 웹 개발 환경 만들기 웹 개발 기본 다지기 파트에서는, 기본적으로 설치하고 웹 개발의 기본적인 내용에 대해 다루고 있다. 교재에 나오는 초기 설정의 경우, 몇 달 전 해놓은 적이 있고 확장팩도 설치해놓았다! day2 시멘틱 태그로 바로 넘어가보자
객체 만드는 법(기초) const object = { 키: 값, 키: 값, 키: 값 } 아래와 같이 응용해 볼 수 있음 const array = [100, 20, 30, '응애'] const object = { name: '구름', age: 7 } name을 불러오는 방법 object[’name’] object.name → 두번째 방법을 더 많이 쓴다 console.log(object.name) console.log(object.age) →→ 순서대로 ‘구름’ , 7이 출력된다 키에는 식별자가 들어감 식별자 명명 규칙 숫자로 시작하지 않는다 기호는 $와 _만 포함된다 ☑️ 배열과 객체 모두 [ ]로 접근한다 배열 값도 교체 가능하듯, 객체 값도 교체가 가능하다 const object = { name: '..
윤인성 저자님 혼공JS 강의 듣고 1차 정리 후, 교재 참고하여 2차 정리한 글입니다 자바스크립트에서 함수는 아래와 같은 형태로 만든다 ☑️ const f = function () {} 함수() → 함수를 호출하다 === 함수의 본문을 실행하다 점프 : 호출 위치에서 함수 본문으로 이동하는 것 리턴 : 함수 본문에서 호출 위치로 나오는 것 ☑️ 프로시저 형태의 함수 ☑️ 수학적 함수 f(x) = x + 5 f(1) = 1 + 5 = 6 f(2) = 2 + 5 = 7 함수의 괄호 안에 오는 것: 매개변수 함수의 최종적으로 리턴되는 값 : 리턴값 ex ) f(1) 의 리턴값은 6이다, f(2) 의 리턴값은 7이다 함수의 장점 → 코드의 재사용 가능! 효율적 함수 선언 방법 in javascript (2가지)..
04-1 배열 ☑️문자열 복습 >const str = 'hello' undefined >str[2] 'l' >str[str.length - 1] 'o' 배열 : 여러 개의 값을 모아놓은 것 배열 내부의 값을 요소(element)라고 부름! 기본 연산 a.length : 요소 개수 추출 a[인덱스] : 요소 추출 배열의 메서드 배열 뒤에 요소 추가하기 : push(요소) >const a = [52, 273, 'hello', 'wow'] undefined >a.push(200) 5 >a (5) [52, 273, 'hello', 'wow', 200] 배열 중간에 요소 추가하기 : splice(인덱스, 0, 요소) >a.splice(1, 0, '추가하기') [] >a (6) [52, '추가하기', 273, 'h..
03-1. if 조건문 제어문(control statement) : 코드의 실행 흐름과 직접적인 관련이 있는 문장 if 조건문 형태 ⇒ if(불 표현식){ 문장 문장 } → 불 표현식이 true이면 괄호 안 문장 실행, false이면 실행 X ⇒ 종료만 출력됨 날짜와 시간 구하기 const date = new Date() date.getFullYear() //올해 date.getMonth() //월 (0~11) -> 1월이 0으로 나타난다 date.getDate() //일 (1~31) date.getHours() //시간 (0~23) 오전 오후 구분하는 코드 짜보기! ctrl + F : 전체 수정 기능 제공! if else 조건문 if(불_표현식){ //불 표현식이 true 일 때 실행하는 문장 } el..
