인프런 김영한님 [모든 개발자를 위한 HTTP 웹 기본 지식] 강의를 듣고 정리한 내용입니다. 틀린 부분이 있으면 답글 달아 주세요😊😊 1. 인터넷 통신 인터넷에서 컴퓨터 둘은 어떻게 통신할까? 다른 컴퓨터 두 대가 케이블로 연결되어 있다면, 문제 없이 요청과 응답을 주고 받게 될 것이다. 하지만, 다른 두 대의 컴퓨터가 멀리 있다면 인터넷 망을 통해서 통신할 수 있다. 인터넷은 수많은 노드, 서버와 링크들을 거쳐서 메시지가 전달되어야 한다. 복잡한 인터넷 망을 거쳐서 안전하게 message를 전달하려면 어떻게 해야할까?를 이해하려면 IP(인터넷 프로토콜) 에 대해서 이해해야 한다. 2. IP (Internet Protocol) 인터넷 망을 거쳐 원하는 서버로 요청 또는 메시지를 보내고자 하는 경우 IP..
혼자서 프로젝트를 하기 위해 프론트 부트스트랩에 대해서 스터디 중입니다. 틀린 부분이 있으면 답글 달아 주세요😊😊 👉 리액트 부트스트랩 (react-bootstrap) 이란 • 부트스트랩(bootstrap)은 오픈 소스 프론트엔드 프레임워크이다. • react에서 Bootstrap5을 사용 가능하도록 개발한 라이브러리입니다. • 웹사이트를 쉽게 만들 수 있도록 각종 레이아웃, 버튼, 입력창 등의 디자인을 CSS와 Javascript로 만들어 React에서 컴포넌트를 불러 사용가능합니다. • 프로젝트 내 따로 bootstrap.js 파일을 둘 필요가 없고 react-bootstrap 라이브러리만 설치하면 사용 가능합니다. 👉 Bootstrap 라이브러리 패키지 설치하기 •react Bootstrap 문서에..
코딩애플 - 리액트 기초 : 블로그 프로젝트 만들기 기반으로 스터디하며 작성하였습니다. 이전글 1. Modal 창으로 띄우는 상세 페이지 👉 Modal UI 디자인하기 위 예시처럼 return 내에서 연속된 태그들은 사용 불가능 ❌❌❌ 복잡하고 어려운 div 지옥😈 2. HTML을 한 단어로 줄여서 쓸 수 있는 방법 : 리액트의 Component 문법 👉 Component 만드는 법 1. 함수를 만들고 이름을 짓는다. 2. 축약을 원하는 HTML 넣는다. 3. 원하는 곳에서 사용 🚨 Component 유의사항 1. 이름은 대괄호로 시작한다. 2. return() 안에 있는 건 태그 하나로 묶어야함 - return() 내부를 묶을 때 의미없는 쓰기 싫으면 을 사용한다. 3. Component는 functi..
코딩애플 - 리액트 기초 : 블로그 프로젝트 만들기 기반으로 스터디하며 작성하였습니다. 이전글 1. 버튼을 누르면 첫째 제목이 '수원 카페 추천' 으로 변경하는 법 (하드코딩 버전) 🚨유의사항🚨 - 제목변경() 함수에 소괄호()를 넣을 경우, 버튼 클릭시가 아닌 바로 함수가 실행 된다. 2. 버튼을 누르면 첫째 제목이 '수원 카페 추천' 으로 변경하는 법 (복사본 만들기) 수정된 [데이터]를 만듭니다. 다만, 원본 state 수정은 불가❌❌ 👉 state 데이터 수정 테크닉 deep copy 해서 수정하는 방법 deep copy : 값 공유❌, 서로 독립적인 값을 가지는 복사 👉 Array, Object state 데이터 수정 방법 - 일단 변경함수를 써야한다. - 변경함수(대체할 데이터) - state..
코딩애플 - 리액트 기초 : 블로그 프로젝트 만들기 기반으로 스터디하며 작성하였습니다. 이전글 1. 터미널에 뜨는 warning 없애는 방법 - eslint가 잡아주는 문법 체크사항 - eslint란, 잘못된 코딩 관습을 바로 잡아주는 작업 warning을 보고 싶지 않다면, /* eslint-disable */ 작성하기 2. 좋아요 버튼을 만들어보자👍 onClick={클릭될 때 실행할 함수} onClick={()=>{실행할 내용}} 3. 따봉 누를 때마다 1 증가 시키기 따봉은 자주 변하는 숫자이므로 useState로 만들어야 한다. state는 그냥 변경이 안된다. 하단 예시로는 사용이 어렵다. 👉 state 변경 방법 따봉이랑 같이 만들었던 따봉변경() 함수 따봉변경(대체할 데이터) 따봉을 누르면 ..
코딩애플 - 리액트 기초 : 블로그 프로젝트 만들기 기반으로 스터디하며 작성하였습니다. 이전글 리액트에서 데이터는 1. 변수에 넣거나 2. state에 넣어서 사용하는 두가지 방법이 있다. 👉리액트의 데이터 저장공간 state 만드는 방법 1. { useState } 상단에 첨부 2. useState(데이터) 3. (참고) ES6 destructuring 문법 [10,100]; array 된 이 두개 데이터를 변수로 담고 싶으면? var [a,b] = [10, 100]; 이렇게 작성할 경우, 10을 a 라는 변수에 100을 b라는 변수에 담는 다는 뜻이다. ⭐⭐⭐ array, object 에 있던 자료를 변수에 쉽게 담고 싶을 때 사용 ⭐⭐⭐ 👆 [state 데이터, state 데이터 변경 함수] 👆 예..
코딩애플 - 리액트 기초 : 블로그 프로젝트 만들기 기반으로 스터디하며 작성하였습니다. 이전글 App.js 에서 필요없는 코드 기존 작성된 header 부분 삭제 왜 App.js가 메인 페이지냐? index.js가 App.js에 있는 HTML을 index.html로 넣어주기 때문에 App.js의 코드가 보여지는 것이다. 1. 블로그 navbar 만들기 React에서는 HTML처럼 생겼지만 똑같지는 않은 JSX 문법을 사용한다. 기존 으로 사용할 수 없고, 으로 사용해야 한다. 2. css 수정 3. 리액드에서 데이터 바인딩 하는 법 중괄호 { }에 변수명 또는 함수 등을 넣어서 데이터를 쉽게 넣을 수 있다. 1) 변수명 적용 2) 함수 적용 3) 이미지 적용 ⭐⭐⭐상상하는 모든 곳에 중괄호 {} 로 변수..
코딩애플 - 리액트 기초 : 블로그 프로젝트 만들기 기반으로 스터디하며 작성하였습니다. 1. Node.js 설치 https://nodejs.org/ko 사이트에서 가장 최신버전 설치 2. Visual Studio Code 설치 - 코드편집을 위한 에디터 https://visualstudio.microsoft.com/downloads/ 사이트에서 최신 무료버전 다운로드한다. 설치가 완료되면 실행한다. 3. 작업폴더 생성 프로젝트 저장을 원하는 곳에 폴더만 생성해준다. 4. Visual Studio Code 에디터에서 상단 File -> Open Folder -> 만든 작업 폴더 열어준다. 직접 작명한 작업폴더명이 뜨면 성공 5. 리액트 프로젝트 생성 Terminal -> New Terminal 누른다. O..
Servlet 이 왜 나왔는가? 🤔 1. 정적데이터만 전달하는 Web Server 초창기 웹 어플리케이션은 단순히 html 파일과 같은 정적 데이터만 제공할 수 있었습니다. 즉, 그림과 같이 모든 사용자는 같은 화면만 제공받을 수 있었습니다. 정적 컨텐츠만 제공하는 웹서버는 사용자들에게 다양한 화면을 제공하기 위해 동적 컨텐츠의 필요성을 느끼게 됩니다. 🚨문제점🚨 사용자(요청)에 따라 다른처리를 해줄 수 없다. 동적인 처리를 해주는 웹 어플리케이션이 없다. 2. 동적 데이터를 처리하는 CGI(Common Gateway Interface) 이러한 문제 해결을 위해 CGI(Common Gateway Interface)라는 동적인 데이터를 제공하기 위한 규약이 나오게 됩니다. 1) Client로 부터 요청이 ..
동기(Synchronous) - 현재 작업의 응답이 끝남과 동시에 다음 작업이 요청된다. - 함수를 호출하는 곳에서 호출되는 함수가 결과를 반환할 때까지 기다린다. - 작업 완료 여부를 계속해서 확인한다. 비동기(Asynchronous) - 현재 작업의 응답이 끝나지 않은 상태에서 다음 작업이 요청된다. - 함수를 호출하는 곳에서 결과를 기다리지 않고, 다른 함수(callback)에서 결과를 처리한다. - 작업 완료 여부를 확인하지 않는다. 블로킹(Blocking) - 제어권이 호출된 함수에게 넘어가서 호출된 함수 내에서 작업이 모두 끝난 후 호출한 함수에게 다시 제어권이 넘어온다. - 작업이 완료된 후 새로운 작업을 수행할 수 있다. 논블로킹(Non-Blocking) - 제어권이 계속 호출한 함수에 있..
