전체 글 (97) 썸네일형 리스트형 네트워크의 작동원리 (캡슐화 비캡슐화) 네트워크의 계층(물리계층) 네트워크의 계층에는 크게 5가지로 나뉜다. 1. 응용계층 2. 전송계층 3. 네트워크 계층 4. 데이터 계층 5. 물리계층 여기서 우리가 먼저 넘어가야할 부분은 네트워크를 통해 데이터가 넘어간다? 라고 쉽게 말할 수 있지만 절대 그렇지 않다. 우리가 말하는 01010 데이터는 전기신호로 바뀌어서 전달되 나중에 설명하게 될 스위치, 라우터를 통해서 전기신호에서 데이터 신호로 바뀌게 된다. 내가 이 말을 왜 했을까? 이러한 데이터를 전기신호로 바꿔주는 것이 물리 계층의 역할하기 때문이다. 물리계층에서 데이터로 바뀐 01010 이 숫자들은 이제 어떻게 될까?(데이터 계층) 이러한 숫자들은 이제 적절한 확인 작업들을 진행하게 될 것이다. 정말 수신하는 컴퓨터가 원하는 데이터인지 송신하.. reduce의 활용 *기존 배열의 중복을 점검하라!! 문제 배열의 중복 요소를 제거해라!! reduce 함수의 장점은 요소의 합을 계속 누적하기 때문에 includes 함수를 활용하면 return 된 누적된 집합 요소와 현재 요소를 비교할 수 있는 결과가 확인가능하다. 해결 array.reduce((acc,cur)=>{ if(acc.includes(cur)){ return acc }else{ return [...acc,cur] } }) (3) ['b', 'c', 'a'] callback 지옥 setTimeout편 문제 웹의 API 중에 setTImeout은 비동기적으로 움직이기 때문에 함수의 실행을 했을 때 절차적으로 읽지를 못하는 문제가 생긴다. 예를 들어 다음 함수의 결과는 second -> first이다 function call(){ settimeout(()=>{ console.log("first") },2000) console.log("second") } 해결 이를 해결하기 위해 호출 할 때 함수를 콜백지옥으로 함수가 실행되면 다음 함수가 실행되는 코드를 짜야 하는 한계가 있다. 이를 보여주면 다음과 같다. function getFlightTicket(callback){ setTimeout(()=>{ callback() },2000) } undefined getFlightTicket(()=>{ consol.. 브라우저 가동 원리 정규식으로 이메일 유효성 검사하기 1.모든 영어 문자에 이 값이 있는지 체크 /[A-z]/.test('z') 2. 모든 기호 표현은 \S. 그대신 문자열 하나를 뜻함 /\S/.test('$') 3.이메일 형식이 dfadf@asdf.com 이라면 어떻게? (+ 표현은 뒤에 문자열이 쭉 나온다는 것을 의미) /\S+@\S+\.\S+/.test('sdfa@asdf.com') (. 는 기호 중에서도 특수한 케이스이기 때문에 \붙이기) 제이쿼리 css 추가 하기 & animate 넣기 문제 화면을 보였다가 없었다가 하게 만들기 해결 $('#menu-btn').on('click',()=>{ $('#hi').animate({marginLeft:'0px'},[5000]) }) $('#btn').on('click',()=>{ $('.alerm-box').toggle() $('.jumbotron-box').css('opacity','0.5') }) 문제 과연 자바스크립트에서 css를 만들고 없애는 것이 효울적인가? 해결 자바스크립트에서 css를 짜는 것 보다 첫 화면 마지막 화면을 미리 짜고 동작을 컨트롤 하는 것이 서로의 역할을 독립적으로 바꾸기 때문에 좋다. 1.먼저 css에 속성과 속성이 나오는 속도를 정하자 transition 2. transition 으로 시간대 조절 3. transf.. cache 상황 만약에 어떤 똑같은 이미지를 계속 요청을 한다면 계속 네트워크에 요청해서 받아야 할까? 해결 HTTP/1.1 200 OK content Type image/jpeg Cache-control: max-age=60. (60초 동안 캐시에 유지시켜줌) Content-Length=34012 브라우저 속도가 빨라짐 => 빠르게 데이터를 볼 수 있기 때문에 사용자 경험이 좋아짐 캐시 덕분에 네트워크 사용 x 문제 if 캐시 시간 초과했을 때? 같은 이미지를 또 다운 받아야 하나? 해결 1.Hedaer에 추가 서버에서 Last-Modified : 2020 11월 10일 10:00(검증 값) 2.클라이언트에서 if-modifed-since (만약 이후에 바꼈니?) 3.서버에서 304 NOt found +헤더 메타.. HTTP HEADER 개념 represation header : Content-Type. ex) application/JSON ( 어떤 형식으로 전달할지 모르기 때문에 알려줘야 함 ex) byte JSON html) Content-Length Content-Language. ex) ko en en-US content-negotiation : ex) 클라이언트가 해더로 /evnt GET /event ACCEPT-Language: ko 요청 협상과 우선순위 1. 언어 가중치에 따라 준다 2. 구체적인 것을 우선한다. =========================== 전송방법 1.Content-Encoding =gzip 2.Transfer-Encoding: chunked 방식 한번에 보내지 말고 나눠서 보내는거 이럴 때는 컨텐트 .. 이전 1 2 3 4 5 ··· 13 다음
