삐뚤빼뚤 프론트 개발

오랜만에 주말에 타입스크립트를 공부해볼까 하다가,

이번에 맡게된 회사 프로젝트에 필요한 공부를 더 하기로 했다.

거의 단독으로 처음 구조부터 잡게 되고, 웹앱의 data 흐름도 더 잘 알게 될 꺼 같다.

api, 인터페이스 많이 쓰는 단어지만, 구체적 의미를 몰랐던 단어도 다시한번 알게 되었음!!

api, 인터페이스 둘 다 상호작용을 하기 위한 문서임! - 근데 이 문서가 어렵게 느껴지는거슨.. 흠냐리;

리액트 생명주기 공부

리액트의 성능저하를 가져오는 생명주기 함수를 주의하자.

뷰를 하고 하니까 좀 더 props, state 개념이 편하게 들어온당

Array(5) : 함수로 빈배열 생성

위코드를 치면 length가 5인 빈 배열이 생성됨. 아무런 값도 없고, 5개가 들어갈 수 있는 공간이 생김. 없는값 = undefined

array.map 함수 : array에 있는 모든 요소에 대해서 각각 함수를 수행해서 새로운 함수를 반환함

• for문 : 정확하게 몇번 반복문을 돌아야 될지 알때
• while문 :  정확하게 몇번을 반복문을 돌아야하는지 모를때, 혹은 기준값이 계속 바뀔때
• slice :  배열을 자르는 메서드 예) 배열.slice(몇번째자리부터, 몇번째자리전까지)

getElementByClassName('클래스명')[인덱스]; //해당 클래스를 가진 요소가 여러개일수있으니까!

• for문에 비동기함수가 들어가는건 피해야함. 클로저 문제가 생김
• js로 css 조작 예) 대상.style.border = '1px solid red' ; 대상.style.borderRadius = '50px' //대시로붙은 속성은 카멜로표현
• 함수를 만들때 달라지는 부분은 매개변수로, 고정된 부분은 함수로 만들기
• html 요소에 js로 css 클래스를 붙이는 법 : 요소.className = "kgh" //js에서 class는 중요한 단어이기에, html의 클래스는 className로 부여함
• querySelectAll -> 여러 태그 동시 선택
• querySelector(.'클래스명') 으로 해당 요소를 찾을 수 있음
• NaN : 숫자가 아님. 숫자가 아닌 하나의 값
• document.body.clientHeight , document.body.clientWidth: 윈도우의 타이틀, 툴바, 스크롤바를 제외한 브라우저 윈도으의 내부 공간 넓이와 높이

• js로 html 만드는 법

  • const  폼 = document.createElement('form');
    document.body.append(폼) //Html에 위에서 만든 valHtml을 붙이는 구문
    폼.append(입력창)
    폼.append(버튼)
    
    폼.addEventㅣistener['submit', function(이벤트){
    이벤트.preventDefault(); //기본동작을 못하게함
    }]

• 배열과 관련한 함수

  • push: 마지막에 추가
    pop: 마지막것 뽑기
    unshift: 처음에 추가
    shift: 처음것 뽑기
    // pop, shift, splice로 뽑은것들은 기존 배열에서 사라진다.

• 배열을 문자열로 한방에 합치는 메서드 : join

  • var 배열 = [2,4,6,7]
    숫자배열.join(''); // -> "2467"
    
    문자.split(구분자) ->  배열로 바뀜
    배열.join(구분자) -> 문자로 바뀜

• 배열.indexOf(값) : 값의 위치를 알 수 있음. 없으면 -1을 반환
•  i++ , ++i 는 다름. i +=1 을 쓰는게 좋음
• 배열 안에 넣을 수 있는 것들
  •  var 배열 = [[],()<-객체,  function(){} <-함수, null, undefined]
• target 메서드 : 만약 click 이벤트에  .target을 붙이면 클릭한 요소의 정보를 가져옴
  • e.target <- 클릭된 애
  • e.target.parentNode <- 클릭된 애 부모 태그
  • e.target.parentNode.parentNode <- 클릭된 애 부모의 부모
  • e.target.children <- 자식
• input의 값 : .value
• 태그 안 글자 : .textContent

1. console.dir(document) 로 document를 객체 형식으로 볼 수 있음. Dom 객체(Document Object Model)

2. DOM : html과 js의 통역사 역할

3. js로 HTML 태그 만들기

var 바디 = document.body;
var 단어 = document.createElement('div'); //createElement 이 함수가 HTML태그를 만들어줌
단어.textContent = '넣을 글자'; //이 구문으로는 브라우저에 등록만 하고 화면에 표시되는 것은 아님
document.body.append(단어); //바디 안에 단어 추가. 표시됨

var 버튼 = document.createElement('button');
버튼.textContent = '입력';
document.body.append(결과창);

버튼.addEventListener('click', function(){
 //이거시 콜백함수
 if(단어.textContent[단어.textContent.length] - 1 === 입력창.value[0]) {
 결과창.textContent = '딩동댕';
 단어.textContent = 입력창.value;
 } else {
	결과창.textContent = '땡!'	
 }
})
//인풋 박스에 저절로 커서가 찍히게 하려면 입력창.focus(); 구문 사용

1. 평범한 문자열에 .을 붙이면 그 문자열은 객체(문자객체)가 된다.

2. 객체.속셩명, 객체['속성명']

    둘 다 속성(프로퍼티)에 접근 가능. 차이점은 대괄호 안에는 변수를 쓸 수 있지만 점 뒤에는 안됨.

 ex) var 값 = '이름'
     객체.값 -> 안됨
     객체[값]-> 됨

3. 원래 있는 속성 지우고 싶을땐 null 대입(undefined 는 안됨)

4. 배열 같은 객체 만들기

var 배열같은 객체 = {
	0: '코끼리',
    1: '고양이',
    2: '강아지',
    length: 3
    }

이렇게 만든 객체에 접근하면 자칫 배열처럼 보이지만, 배열은 아님

5. Array.isArray(변수명) : 변수가 배열인지 아닌지 True / False로 판단해줌.

6. 브러우저 제공 객체 중 첫글자가 대문자로 시작하는 애들은 '생성자' , 첫글자가 소문자로 시작하는 애들은 window.document 입

7. Math.random()은 엄밀하게는 랜덤이 아니다.

//1부터 9까지 나오게 하려면 구구단 이용
Math.floor(Math.random()*9) + 1
Math.ceil(Math.random()*9)

8. Window 객체

• 브라우저 전체를 담당하는 객체(Object)
• window['document'] : document객체(페이지(탭))는 window 객체 안에 들어 있음
• window는 생략가능, 메서드만 써도 실행됨.
  • window.alert('hi') 와  alert('hi') 는 같음
• 윈도는 모든 것에서 접근 가능한 객체임(전역 객체)
• 전역 변수는 전역 객체의 속성이 된다.

  • var a = 'b';
    window.a; //'b'

9. 전역 변수와 함수 안의 변수가 다른 이유는 함수의 특수성(함수스코프) 때문(es5 문법에서)

10. 자바스크립트를 실행시켜주는 2가지 : 브라우저, node

1. 제이쿼리와 같이 화면 개발을 편하게 할 수 있는 자바스크립트 기능들을 모아 놓은 라이브러리

2. 사용법 : new Vue 라는 가장 큰 object? 데이터 덩어리를 만드는것을 시작으로한다. (아래와 같이)

<div id="app">
</div>


<script>
var app = new Vue({
	el : "#app",
    data: {
    	message: "내꿈은 cto"
    }

})
</script>

3. 이렇게 하고 나면 html 코드는 단순히 엔트리포인트(컴퓨터에서 제어권이 컴퓨터 자체에서 컴퓨터내에 응용프로그램에게로 넘어가는것, = 진입점)가 되며 이후의 해당 프로젝트내에서의 일어나는 모든 일들은 vue에서 컨트롤 하게 된다.

역시 문서를 제대로 읽으니 드문드문 이해가 되지 않는것들이 큰 줄기로 이어지는 닉김!! 😻😍👍

json web token
별도의 인증과정없이 서버에서 내려받은 jwt를 서버에 보내면 그걸로 인증을 허가하는것?!