사이드 프로젝트 (30) 썸네일형 리스트형 클라이언트와 서버 1. 네트워크 기본 네트워크란 컴퓨터와 컴퓨터간의 연결을 의미한다 2. 클라이언트와 서버 클라이언트 (Client) : 네트워크에서 정보를 요구해서 받는 쪽 서버 (Server) : 정보를 제공해 주는 쪽 실제로 우리가 사용하는 웹, 앱 서비스는 다양한 서버들과 통신한다 - 브라우저에서 웹에 접속한다는 것은 웹 서버에서 웹 (HTML, CSS, JS)를 다운받은 것이다 - 웹에서 보는 이미지들은 모두 파일 서버에서 이미지를 다운받은 결과물이다 - 웹에서 로그인을 할 때는 로그인을 돕는 인증 서버와 통신을 한 것이다 - 앱에서 상품 정보들을 불러올 때는 상품 정보를 제공하는 API 서버와 통신을 한 것이다 3. 서버의 기본 구조 우리가 사용하는 모든 프로그램은 OS의 관리 하에 돌아간다! 일반적으로 서버란.. 2주차 개념 스터디 - HTTP (2) 🟡 HTTP 요청 메서드 HTTP는 요청 메서드를 정의하여 주어진 리소스에 수행하길 원하는 행동을 나타내며, HTTP 동사라고도 한다. 각각의 메서드는 서로 다른 의미를 구현하지만, 일부 기능은 메서드 집합 간에 서로 공유하기도 한다. - GET GET 메서드는 특정 리소스의 표시를 요청한다. GET을 사용하는 요청은 오직 데이터를 받기만 한다. - HEAD HEAD 메서드는 GET 메서드의 요청과 동일한 응답을 요구하지만, 응답 본문을 포함하지 않는다. - POST POST 메서드는 특정 리소스에 엔티티를 제출할 때 쓰인다. 이는 종종 서버의 상태의 변화나 부작용을 일으킨다. - PUT PUT 메서드는 목적 리소스 모든 현재 표시를 요청 payload로 바꾼다. - DELETE DELETE 메서드는 특.. Javascript 비동기 처리 💦 비동기 처리 👉 비동기 개념 - Code Interpreter(인터프리터)는 개발자가 짠 javascript 코드를 읽고 순차적으로 코드를 실행시키고, 결과가 나오면 다음 코드를 읽는 방식으로 동작한다. - javascript는 프론트엔드 개발자가 짠 javascript 코드가 브라우저에서 실행시키기 위해서 code interpreter는 대표적으로 브라우저 내부에 탑재되어 있다. - 그러나 만일 특정 코드에서 결과를 얻기까지 오랜 시간이 걸리면 아래 줄의 코드는 실행되지 않게 되기에 제대로 동작하지 않는다 -> 네트워크 통신(결과를 받기까지 꽤 걸리는 작업), 복잡한 계산을 실행하는 코드 - 이를 방지하기 위해서 javascirpt는 비동기 방식을 지원한다 - 비동기 처리가 적용된 코드의 경우, 실.. Javascript 콜백과 익명함수 🎪 Javascript 콜백과 익명함수 - callback(콜백) 함수 : 함수가 나중에 불리는 함수 - 보통 콜백 함수 구현 시, 함수의 인자에 함수를 넣는 방식으로 진행한다 //1. sayHello라는 함수가 콜백 함수로 사용되는 예시를 보여줍니다. function sayHello(){ //sayHello 라는 함수를 만듭니다. console.log('수강생 여러분 안녕하세요'); } function getHuman(callback){ //getHuman 함수의 파라미터에는 함수가 들어갑니다. callback(); //callbackFunc 파라미터는 함수이기에 실행시킬 수 있습니다. } //getHuman의 파라미터인 callbackFunc에는 sayHello가 들어가고 sayHello가 실행됩니다.. 2주차 개념 스터디 - HTTP (1) 🎨 HTTP - 거의 모든 웹 요청은 http가 기반이며 웹 서비스의 가장 핵심이다 - 그 중에서도 주요 키워드들에 대해 공부하려고 한다! > http 1.1 / 2.0 > 상태코드 > 요청 메서드 > http vs https > http vs tcp vs ip 🔴 HTTP 1.1 / 2.0 1. HTTP 1.1 - HTTP 1.1 은 기본적으로 connection 당 하나의 요청을 처리하도록 설계되어 있다 - 따라서 동시 전송 문제와 다수이 리소스를 처리하기에 속도와 성능 이슈가 존재한다 - 이로 인해 HTTP 1.1 은 HOL(Head Of Line) Blocking - 특정 응답 지연, RTT(Round Trip Time) 증가, 헤비한 Header 구조라는 문제점들을 가지고 있다 > HOL (He.. javascript 공부하기 🎈 Javascript 개요 - javascript는 웹 개발에 쓰이는 프로그래밍 언어로, java, pyhton 등과 달리 웹 브라우저에서 동작된다. - 현재는 서버, 게임 개발 등 다양한 분야에서 사용되고 있다 🎈 Chrome의 개발자 도구 - 맥 : Cmd+Oprion+I, 윈도우 : Ctrl+Shift+F12 - Elements : HTML, CSS를 보고 수정할 수 있다 - Console : javascript 코드를 실행하고 결과를 볼 수 있다 - Network : 브라우저가 네트워크 통신하는 내역들을 볼 수 있다. 🎈 기본 로그 함수 - console.log('로그 내용'); - ; 는 안붙여도 상관 없으나 코드를 마무리한다는 의미가 있다 🎈 변수 - 변수는 데이터를 담는 공간이다 - 변수 .. 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.. HTML & CSS 기본 👩💻웹의 본질은 뭐다?! 정보를 시각적으로 보여주는거다!!👩💻 이걸 염두하고 강의 시작함미당~ ㅋㅋㅋㅋㅋ 이번 포스트에선 HTML과 CSS의 기본 문법을 정리할것임 물론! 내가 헷갈리는것만 쓸거임 난 html&css 경력직이니까(?) (귀찮은건,,,아니라고 해두자,,,,) 1. HTML 🌝 : 콘텐츠를 보여주는 것 이외의 모든 설정 태그를 넣는다 🌝 : 실제로 화면을 구성하는 태그를 넣는다 Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! 네이버로 넘어가기 요것들은 잘 아니까 패thㅡ~ 🌝 : 내부에 입력하는 값들을 관리해주는 태그로, 주요 속성 중 action은 'Submit'을 눌렀을 때 입력된 서버 URL로.. 이전 1 2 3 4 다음
