dev/프론트엔드 20

코딩앙마 리액트 강좌 정리 (1)

리액트리액트는 페이지단위로 html을 작성하는게 아니라, 컴포넌트 단위로 코드를 작성 (헤더 컴포넌트, 광고 컴포넌트, 언론사 목록 컴포넌트 등) -> 비슷한 역할을 하는 컴포넌트들을 여러 창에서 재사용 가능컴포넌트 = ui를 구성하는 개별적인 뷰 단위함수형 컴포넌트 = 컴포넌트가 함수로 표현되어 있고, return값으로 jsx를 반환하는 컴포넌트모든 함수형 컴포넌트 이름은 대문자로 시작하는 것이 문법 (컨벤션이 아닌 문법 ! -> html과의 구별을 위한 것 . html 태그는 소문자로, 컴포넌트는 대문자로 표현 )컴포넌트는 함수형이 아닌 클래스형도 있지만, 지금은 대부분 함수형을 사용함수형 컴포넌트들은 jsx를 리턴함 (html처럼 생긴)jsx = javascript extension : js의 확장..

dev/프론트엔드 2024.02.12

Javascript 중급 강좌 정리(1)

https://www.youtube.com/watch?v=4_WLS9Lj6n4 해당 포스팅의 모든 캡쳐사진 출처는 위 영상입니다 변수 : var / let / const (var는 예전 버전, 최근엔 let,const 권장) var는 한번 선언된 변수를 다시 선언할 수 있음 (let은 안됨) var는 선언하기 전에 사용할 수 있다 : 호이스팅 -> 할당하기 전에 사용하면, 선언은 호이스팅 되지만 할당은 호이스팅 되지 않기 때문에 해당 변수의 값이 undefined로 찍힘 호이스팅 : 스코프 내부 어디서든 변수 선언은 최상위에 선언된 것처럼 행동 *let, const도 사실 호이스팅 된다 ! 하지만 왜 let,const는 선언 전에 사용될 수 없을까? -> let,const는 temporal dead zo..

dev/프론트엔드 2024.01.27

Javascript 기초 강좌 정리

https://www.youtube.com/watch?v=KF6t61yuPCY 변수 변수 : 정보에 이름을 붙여 저장하고 싶을 때 사용 변수명은 문자/숫자/_/$만 사용 첫글자에 숫자 불가능 문자열에는 " " 필수임 (홑/겹 상관없음) 변수명으로 예약어는 사용 불가능 nm = "자바스크립트"; alert(nm); console.log(nm); 그런데 이렇게 변수를 선언하는것은 위험 ! 한번 선언한 이름과 같은 이름의 변수를 또 선언하게 될 수 있기 때문 (그렇게 되면 마지막에 선언한 변수 내용으로 덮어써지게됨) => 이러한 상황을 방지하기 위해 let / const 가 등장함 let (변하는 값을 선언) let nm = "자바스크립트"; alert(nm); //경고창 띄움 console.log(nm); ..

dev/프론트엔드 2024.01.23

html : semantic tag, inline vs block element

Semantic Tag 1. Semantic Tag : 의미를 가지는 태그 div,span과 같이 의미는 없지만 구획을 나눠주는 태그와 구분 과거엔 class명으로 구분(클래스명이 header,main,footer 등)된 여러개의 div태그를 사용했었음 2. Semantic Tag 사용 이유 웹 접근성 : 시각장애인들이 웹 사이트를 이용하기 위해선 화면 낭독기와 같은 웹 보조기구를 이용하는데, 이때 시맨틱 태그를 사용하면 제목과 내용 부분을 구별하여 정보를 정확히 전달할 수 있음검색 엔젠 최적화(Search Engine Optimization) : div와 span만 사용하는 문서는 어떤 것이 해당 웹의 주요 키워드인지 파악하기 어려움 -> 글제목에 해당하는 h1, 본문 영역인 main 등의 태그가 있다..

dev/프론트엔드 2024.01.16

HTML : 태그

https://www.inflearn.com/course/%EC%9B%B9%EA%B0%9C%EB%B0%9C-%EA%B8%B0%EC%B4%88-html-css/dashboard [지금 무료] 1. 웹개발 기초 [HTML, CSS] 강의 - 인프런안녕하세요. 웹페이지의 틀을 제작하는 HTML과 웹페이지를 꾸미는 CSS강의를 준비했습니다. 웹개발에 앞서 가장 기초에 해당하며 초보자분들 또한 쉽게 배울 수 있도록 준비했습니다., 웹 개발의 www.inflearn.comhttps://www.inflearn.com/course/%EC%99%95%EC%B4%88%EB%B3%B4-%EC%9B%B9%EA%B0%9C%EB%B0%9C-%EC%9E%85%EB%AC%B8 [지금 무료] 입문자를 위한, HTML&CSS 웹 개발 ..

dev/프론트엔드 2024.01.09