(2023.05.25) 클라이언트에서 서버에 뭔가를 요청할때 http요청을 보내고 그걸 프로미스로 처리한다. http요청/프로미스는 3가지의 상태가 있다. 진행중,성공,실패 '진행중'은 요청을 보내고 아직 응답을 받지 못한 상태이며, '성공'은 서버로부터 응답을 받은 상태(데이터 받음), '실패'는 서버에 보낸 요청이 어떠한 이유로 실패한 상태이다(성공했는데 응답 본문에 오류가 담길수도 있다). 리액트에선 요청상태를 나타내는 state를 만들어(loading, error, data) 조건문으로 엘리먼트를 반환한다. 어떠한 요청이든 세가지 경우를 다 처리해야 한다. 그러면 코드가 조금 커질 수 있지만 시스템 안정성을 위해 반드시 필요하다. 코드의 가독성을 높이고, 유지보수성 향상, 코드량을 줄이기 위해 서..

(2023.05.24) 현대의 웹 페이지에서 grid는 매우 유용하다. 컨테이너를 만들고 그 안의 아이템들을 자유롭게 배치할 수 있다. 잘 알아두자. /* 그리드 컨테이너를 먼저 만든다. 이 상태면 아무일도 일어나지 않는다. */ .container { display: grid; } /* column은 열이다. 컨테이너 안에 아이템을 가로로 나눈다. fr은 fraction(부분,분수)이며 1:1 비율로 나눈다. 원하는 부분을 fr대신 px로 해도 됨. 100px 1fr 이런식으로. */ .container { display: grid; grid-template-columns: 1fr 1fr; } /* row는 행이다. 컨테이너 안에 아이템을 세로로 나눈다. */ .container { display: g..

(2023.05.23) 코딩테스트를 보며 다시금 개념을 제대로 잡은 연산자 두가지. 1. || (논리합 연산자) A || B -> A 또는 B가 true이면 true를 리턴한다. 논리합 연산자를 안다고 생각하지만 코테에서 틀린걸 보면 제대로 아는게 아니다. 자신을 객관적으로 보자. function Test(type) { if (type !== '1' || type !== '2') { type = '3'; } return type; } // 위 함수를 실행할때 결괏값은 무조건 '3'만 나온다. // 기억하자. 둘 중 하나라도 true이면 true이다. // 평소 A || B에서 A,B가 표현식이 아닌 값일때만 생각했어서 헷갈렸던 것이다. // A가 falsy한 값일때 B를 리턴한다(truly하면 A를 리턴..

(2023.05.22) 웹개발자라면 반드시 알아야 하는 웹 스토리지. html5 스펙에서 처음 도입되었다. 기존의 쿠키를 개선하는 저장소로 키와 값을 쌍으로 데이터를 저장한다(물론 쿠키는 지금도 유효한 좋은 저장소임). 쿠키와의 가장 큰 차이점은 쿠키는 서버에 무언가를 요청할 때마다 같이 보내진다는 것(웹스토리지는 수동으로 첨부해야함). 종류는 2가지. window 객체에 있는 localStorage, sessionStorage이다. 이것을 이용해 브라우저에 데이터를 저장, 조회할 수 있는데 주로 서버로부터 받은 사용자 정보를 저장할때 사용한다. ex) jwt token 등 둘의 차이점은 localStorage는 한번 저장하면 개발자가 지우지 않는 이상 계속 보존되며 sessionStorage는 저장된 ..

(2023.05.21) CSS란 Cascading Style Sheet의 약자이다. cascade는 폭포라는 뜻인데 윗물은 아랫물에 영향을 끼치지만 그 반대로 아랫물은 윗물에 영향을 못끼친다. 개발에선 스타일이 위에서 아래로 흐른다는 의미이다. 즉, 우선순위가 높은 스타일이 우선순위가 낮은 스타일을 제치고 적용된다. - 선택자의 우선순위 : id 선택자 > class 선택자 > 태그 선택자 - 스타일 우선순위 : 태그의 스타일 속성 > html파일의 style태그 > 외부 스타일 시트

(2023.05.20) 여러개의 프로미스를 다룰때 쓸 수 있는 메소드들 1. Promise.all - 모든 프로미스가 fulfilled(이행)되었을때 콜백함수를 실행한다. 하나라도 거부되면 다른 프로미스의 이행여부와 상관없이 거부되며 then이 아닌 catch로 잡아줘야 한다(거부되는 프로미스가 여러개인 경우 먼저 끝나는 프로미스의 결괏값 리턴). 1. 모두 성공 Promise.all([ Promise.resolve(123), new Promise((resolve, reject) => { setTimeout(resolve, 100, 'one')}), ]) .then((res)=>console.log(res)) .catch((error)=>console.log(error)); // result: [123,..