오늘 회고

- HTML,CSS로 상단바 하나 만드는 것도 힘든 실력이다.

- 어제 강의로 깃을 배워서 오늘 실전으로 사용해 봐서 다행이고 좋았다.

- 어제 한다고 했던 것 : 10분전에 입실전에 당일 계획 리스트로 정리해 볼것

- 오늘 블로그를 작성하다가 html의 주석 처리를 알았다. 

<!-- --> 감싸면 된다. 어제는 저걸 발견하지 못했다.

바로 팀프로젝트때문에 계획이 날아갔다. 못했다고 실망하지 맙시다.

10분이라도 나가서 뛰자

 

=================================================================================

오늘 공부 한것

[코딩이 처음이어도 쉽게 배우는 웹 개발 2주차]

JavaScript란 웹을 움직이게 하는 코드이다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script></script>로 공간을 만들어준다. 이 안에 javascript 코드를 작성-->
    <script>
        
    </script>
</head>

<div class="css"></div>
<body>
    
</body>
</html>

 

let a='안녕하세요'; 
// 여기서는 a라고 사용했지만 변수이름은 최대한 직관적으로 작성
console.log(a);

 

자바 스크립트의 대표적인 자료형 : 리스트와 딕셔너리

리스트: 데이터를 나란히 저장하는 자료형이다. 순서가 있지만 1번으로 시작하지 않고 0번 부터 시작한다.

ex) let list=['a','b'] 라고 할때  a는 list[0] 이고 b는 list[1] 이다.

꺼낼땐, console.log(list[1]) 처럼 사용

딕서녀리:키와 값은 키-값 쌍을 구성하는 자료구조 =자바에서 map같은 느낌

ex) let dict={'name':'준민','age':'26'}

꺼낼떈, console.log(dict['name'])을 하면 준민이 출력된다

* 리스트와 딕셔너리의 조합

let students = [
	{'name':'영수','age':27},
	{'name':'철수','age':15},
	{'name':'영희','age':20}
]
console.log(a[0]['name']) //영수
console.log(a[1]['age']) //15

 

활용문법

자바 스크립트로 alert띄우기 <= 함수로 만들어 두면 된다.

function hey(){
alert('안녕');
}

하지만 hey()가 호출되어야지 alert가 실행된다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
    	function hey(){
		alert('안녕');
		}    
    </script>
</head>
<body>
	<button class="form-button" type="button" onclick="hey()">hey()호출</button>
</body>
</html>

지금은 자바스크립트로 사용하면 괜찮지만 만들면 만들수록 코드가 더 길어져 복잡해진다 => Jquery로 간단하게 사용가능하다.

document.getElementById('hello').innerHTML = '안녕';

이런 코드를 jquery로 나타내면 $('# id값 입력').명령어 여기

$('#hello').html('안녕');

jquery를 사용하기 위해서 jquery임포트하기 위한 코드를 작성해 줘야한다.

 

우리가 자바 스크립트로 html코드로 작성하려면 ``(백틱)안에 작성을 해서 변수에 저장해 jquery로 html을 저장한다.

$('#q1').append(temp_html)

작성한 html ``안에 변수를 넣어주려면 ${변수}로 표시한다.

 

=================================================================================

[팀프로젝트]

처음으로 어제 강의에서 배운 깃 활용

코드를 사용해서  깃에 푸쉬한적이 없었는데 배운걸 사용해보았다.

깃 충돌

깃 충돌이 났다. 해결 방법은 git pull(원격 저장소에 있는 프로젝트의 변경사항을 그대로 로컬 저장소에 옮겨와 자동으로 병합)로 다시 해주면 되지만 이게 혼자하면 상관없는데 협업하는 코드라서 아직 pull 을 해본적없어서 걱정은 했지만 일단 아직 시작단계라 시도해보았다. 다 걱정과 달리 변경사항을 가져오고 병합하는데  내가 그 변경사항과 병합과정의 내용만 맞게 해주면 사용하는데 문제는 없을것 같다. 

아직 많이 부족하지만 내가 만들어본 메인페이지

 

 

 

'TIL' 카테고리의 다른 글

[TIL] 스파르타 백엔드 캠프 6일차  (0) 2024.10.07
[TIL] 스파르타 백엔드 캠프 5일차  (3) 2024.10.04
[TIL] 스파르타 백엔드 캠프 4일차  (1) 2024.10.03
[TIL] 스파르타 백엔드 캠프 3일차  (2) 2024.10.02
[TIL] 스파르타 백엔드 캠프 1일차  (6) 2024.09.30

티스토리툴바