0. 프론트엔드 개발자가 되기 위해 알아야 할 것들
1) 취업 시장 현황
- HTML, CSS(기본으로 다룰 수 있어야함)
- javascript(매우 중요함)
- jQuery(어디에 취업하느냐에 따라 중요도가 다름)
- react(최근 프론트엔드의 꽃, 자바스크립트 라이브러리)
- typescript(네카라쿠배 필수)
2) 필요로하는 기술
- HTML(시맨틱 태그)
- CSS(Flex)
- jQuery(선택자, 기본적인 문법, ajax)
- javascript(변수 선언 방식[var, let, const], 함수 선언 방식, ES6, 디스트럭쳐링, 템플릿 리터럴)
- react(hook, state, memo)
3) 신입으로서의 자세와 마음가짐
- 매일 최소 2시간 이상 공부
- 직접 만들어보기(게시판, 채팅 프로그램, 게임 등)
- 내가 공부한 것 기록하기(velog, tistory, notion 등)
1. 프론트엔드 기초
0) 실행 순서
- html → css → js
1) 기본 틀
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- css 연결 -->
<!-- <link rel="stylesheet" href="파일 위치, 파일 이름"> -->
<link rel="stylesheet" href="./index.css">
</head>
<body>
<!-- jquery -->
<!-- 항상 최신 버전 -->
<!-- <script src="http://code.jquery.com/jquery-latest.min.js"></script> -->
<!-- 원하는 버전을 사용하고 싶을 때 다음 주소에서 복사 붙여넣기 하기 -->
<!-- https://jquery.com/download/ -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<!-- js 연결 -->
<!-- <script src="파일 위치, 파일 이름"></script> -->
<script src="./index.js"></script>
</body>
</html>2) 자바스크립트
-
일반함수 선언
function add () {} -
화살표 함수 선언
() => {}- 함수 이름을 주고 싶으면 변수를 선언해야 함
-
변수
- var : 호이스팅
- let : 변해도 되는 값
- var에는 문제점이 있기에 let을 씀
- const : 변하면 절대 안되는 값
3) jquery
-
jquery 선언 : $()
-
선택자
-
기본 선택자
- div : 태그 선택자
- . : 클래스 선택자
- '#' : 아이디 선택자
- , : 결합 선택자
/* 클래스 이름 div-01 과, 아이디 이름 div-02 를 div1 으로 선언 */ const div1 = $('.div-01', '#div-02'); /* div1 의 배경색을 초록색으로 변경 */ div1.css('background-color', 'green'); -
계층 선택자
/* 부모가 section 이면서 클래스 이름 div-01을 가진 자식을 선택 */ const div1 = $('section > .div-01'); -
속성 선택자
/* input의 타입이 text인 것을 선택 */ const input = $('input[type=text]'); -
그 외
/* 첫번째 요소 */ $(선택자).first(); /* 마지막 요소 */ $(선택자).last(); /* index 번호에 해당하는 요소를 가져옴 */ $(선택자).eq(index); /* 엘리먼트 뒤에 요소 */ $(선택자).next(); /* 엘리먼트 앞에 요소 */ $(선택자).prev(); /* 엘리먼트 형제 태그를 가져옴 */ $(선택자).slblings(); $(선택자).slblings('div'); /* 엘리먼트 자식 태그를 가져옴 */ $(선택자).children(); $(선택자).children('.test'); /* 부모 입장에서 자식을 찾을 때 */ $('.parent').find('.children'); /* 자식 입장에서 부모를 찾을 때 */ $('.children').closest('.parent');- 여러개 이어 붙여 사용할 수 있음
/* 예시 */ $(선택자).first().children();- 너무 길어지지 않게 작성할 것
- 여러개 이어 붙여 사용할 수 있음
-
-
이벤트
/* html파일이 준비가 되었으면 다음 함수 내용을 실행함 */ $(document).ready(function() { }) /* div-01의 영역을 클릭하면 '안녕!' 이라는 내용의 경고창이 발생함 */ $('.div-01').on('click', function() { alert('안녕!'); })-
항상 event 라는 매개변수를 받을 수 있음
$('.div-01').on('click', function (event) { /* 이벤트 나 자신을 target이라 선언 */ const target = $(event.target); target.css('background-color', 'red'); -
자주쓰는 이벤트 : ready, click, keyup, change
-
원하는 이벤트를 구글링하여 가져다 쓸 수 있어야 함
-
-
클래스 핸들
- removeClass : 클래스 제거
- addClass : 클래스 추가
- hasClass : 클래스를 가지고 있는지 판단
/* test-01에 last클래스가 있는지 확인 */ if ($('.test-01').hasClass('last')) { /* test-01의 last 클래스 제거 */ $('.test-01').removeClass('last'); } else { /* test-01에 last 클래스 추가 */ $('.test-01').addClass('last'); }
