사이드 프로젝트/인프런 - 올인원 개발 클래스7 HTTP 통신 쉽게 이해하기 HTTP 통신이란? 컴퓨터끼리 네트워크 통신을 할 때 여러가지 방식으로 통신이 가능한데, 이를 통틀어서 "통신 프로토콜"이라고 한다 메일은 SMTP 프로토콜, 파일을 전송할 땐 FTP 프로토콜 등이 있다 HTTP 프로토콜은 원래 브라우저가 웹 서버와 통신을 하기 위해 생긴 프로토콜이다 HTTP 통신은 HTTP 프로토콜을 활용한 통신으로, 요청(request)과 응답(response)으로 나뉜다 요청과 응답은 모두 아래와 같은 구조를 같는다 요청 라인 : URL, Method 같은 핵심 요청 정보가 들어간다. 요청과 응답에 따라 구성요소가 다르다 헤더 : HTTP 관련 여러 설정 값이 들어간다 Body : 통신에 필요한 데이터가 들어간다 (옵션) HTTP 요청 HTTP 통신으로 서버에게 정보를 요청하려면 .. 2021. 8. 12. 클라이언트와 서버 1. 네트워크 기본 네트워크란 컴퓨터와 컴퓨터간의 연결을 의미한다 2. 클라이언트와 서버 클라이언트 (Client) : 네트워크에서 정보를 요구해서 받는 쪽 서버 (Server) : 정보를 제공해 주는 쪽 실제로 우리가 사용하는 웹, 앱 서비스는 다양한 서버들과 통신한다 - 브라우저에서 웹에 접속한다는 것은 웹 서버에서 웹 (HTML, CSS, JS)를 다운받은 것이다 - 웹에서 보는 이미지들은 모두 파일 서버에서 이미지를 다운받은 결과물이다 - 웹에서 로그인을 할 때는 로그인을 돕는 인증 서버와 통신을 한 것이다 - 앱에서 상품 정보들을 불러올 때는 상품 정보를 제공하는 API 서버와 통신을 한 것이다 3. 서버의 기본 구조 우리가 사용하는 모든 프로그램은 OS의 관리 하에 돌아간다! 일반적으로 서버란.. 2021. 8. 11. Javascript 비동기 처리 💦 비동기 처리 👉 비동기 개념 - Code Interpreter(인터프리터)는 개발자가 짠 javascript 코드를 읽고 순차적으로 코드를 실행시키고, 결과가 나오면 다음 코드를 읽는 방식으로 동작한다. - javascript는 프론트엔드 개발자가 짠 javascript 코드가 브라우저에서 실행시키기 위해서 code interpreter는 대표적으로 브라우저 내부에 탑재되어 있다. - 그러나 만일 특정 코드에서 결과를 얻기까지 오랜 시간이 걸리면 아래 줄의 코드는 실행되지 않게 되기에 제대로 동작하지 않는다 -> 네트워크 통신(결과를 받기까지 꽤 걸리는 작업), 복잡한 계산을 실행하는 코드 - 이를 방지하기 위해서 javascirpt는 비동기 방식을 지원한다 - 비동기 처리가 적용된 코드의 경우, 실.. 2021. 8. 10. Javascript 콜백과 익명함수 🎪 Javascript 콜백과 익명함수 - callback(콜백) 함수 : 함수가 나중에 불리는 함수 - 보통 콜백 함수 구현 시, 함수의 인자에 함수를 넣는 방식으로 진행한다 //1. sayHello라는 함수가 콜백 함수로 사용되는 예시를 보여줍니다. function sayHello(){ //sayHello 라는 함수를 만듭니다. console.log('수강생 여러분 안녕하세요'); } function getHuman(callback){ //getHuman 함수의 파라미터에는 함수가 들어갑니다. callback(); //callbackFunc 파라미터는 함수이기에 실행시킬 수 있습니다. } //getHuman의 파라미터인 callbackFunc에는 sayHello가 들어가고 sayHello가 실행됩니다.. 2021. 8. 10. javascript 공부하기 🎈 Javascript 개요 - javascript는 웹 개발에 쓰이는 프로그래밍 언어로, java, pyhton 등과 달리 웹 브라우저에서 동작된다. - 현재는 서버, 게임 개발 등 다양한 분야에서 사용되고 있다 🎈 Chrome의 개발자 도구 - 맥 : Cmd+Oprion+I, 윈도우 : Ctrl+Shift+F12 - Elements : HTML, CSS를 보고 수정할 수 있다 - Console : javascript 코드를 실행하고 결과를 볼 수 있다 - Network : 브라우저가 네트워크 통신하는 내역들을 볼 수 있다. 🎈 기본 로그 함수 - console.log('로그 내용'); - ; 는 안붙여도 상관 없으나 코드를 마무리한다는 의미가 있다 🎈 변수 - 변수는 데이터를 담는 공간이다 - 변수 .. 2021. 8. 8. flex 레이아웃 🧐 지금까지 만든 HTML 요소를 자유롭게 배치하려면 어떻게 해야할까? Q. 기존에 DIV 요소는 줄바꿈이 되어 수직으로 배치가 된다. 그렇다면 이를 수평적으로 배치하거나 자식을 부모 기준으로 가운데 정렬을 하려면 어떻게 해야할까?? => A. 옛날에는 float와 display 속성 (table, inline-box) 등을 사용했으나, 요새는 flex를 통해 배치한다! 1. Flex 기본 flex는 container와 items로 나뉜다. Container : items를 감싸는 부모 요소로, item을 정렬하려면 container는 필수다! 조심할 점은 container와 items에 적용하는 속성이 구분되어 있다는 것이다. container : display, flex-flow, justify-co.. 2021. 8. 4. 이전 1 2 다음
