전체 글
-
REST API - 나만의 언어로 블로깅 해보기codeStates front-end/node(server) 2023. 1. 31. 20:01
📌 REST API 📍REST( Representational State Transfer ) API 작동 방식에 대한 조건을 부과하는 소프트웨어 아키텍쳐 대규모의 고성능 통신을 안정적으로 지원 📍API 애플리케이션 프로그래밍 인터페이스 다른 소프트웨어 시스템과 통신하기 위해 따라야 하는 규칙을 정의 📍 REST API 웹에서 사용되는 데이터나 자원을 HTTP URI로 표현하고, HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식 REST 구성 자원(RESOURCE) - URI 행위(Verb) - HTTP METHOD 표현(Representations) REST 특징 1) 균일한 인터페이스 : 서버가 표준 형식으로 정보를 전송 2) 무상태 : 서버가 이전의 모든 요청과 독립적으로 모든 클라이언트 요청을 ..
-
[React] 실습 - React Twittler State & PropscodeStates front-end/React 2023. 1. 30. 20:30
📌 react twittler SPA 📖 학습 목표 React Router 설치 React Router를 npm으로 설치해야 합니다. 상세 컴포넌트 구현하기 원하는 레이아웃에 끼워 넣을 수 있게 상세 컴포넌트를 먼저 구현합니다. Sidebar 컴포넌트 (Sidebar.js) Sidebar 컴포넌트는 이미 구현되어 있습니다. Sidebar.js 파일에서 직접 확인하세요. Footer 컴포넌트 (Footer.js) Footer 컴포넌트의 후손 엘리먼트로 시멘틱 엘리먼트 가 있어야 합니다. Tweet 컴포넌트 (Tweet.js) 각 트윗에 꼭 필요한 정보를 담고 있어야 합니다. (프로필 사진, 유저 이름, 트윗 생성 일자, 트윗 메시지) 프로필 사진을 넣기 위해 엘리먼트를 작성하고, src 속성에 전달받은 p..
-
Daily Coding 9codeStates front-end/Algorithm 2023. 1. 30. 20:22
📍문제 9( ABCheck ) 문자열을 입력받아 문자열 내에 아래 중 하나가 존재하는지 여부를 리턴해야 합니다. 'a'로 시작해서 'b'로 끝나는 길이 5의 문자열 'b'로 시작해서 'a'로 끝나는 길이 5의 문자열 📥입력 인자1 : arr string 타입의 문자열 📤 출력 boolean 타입의 문자열 ❗️주의사항 대소문자를 구분하지 않습니다. 공백도 한 글자로 취급합니다. 'a'와 'b'는 중복해서 등장할 수 있습니다. 나의 생각 문자열을 입력받아 -> str 하나가 존재하는지 여부 -> 포문으로 돌려서 조건을 걸어야겠군 존재여부 -> 맞으면 true 틀리면 false a'로 시작해서 'b'로 끝나는 길이 5의 문자열 -> i === 'a' && str[i+4] === 'b' a'로 시작해서 'b'로..
-
브라우저의 작동 원리(보이는 곳) - AJAX, SSR과 CSRcodeStates front-end/node(server) 2023. 1. 30. 19:35
📌 브라우저의 작동 원리(보이는 곳) 🔗 AJAX(Asynchronous JavaScript And XMLHttpRequest) 비동기식 자바스크립트와 XML 웹 페이지에 필요한 부분에 필요한 데이터만 비동기적으로 받아와 화면에 그려낼 수 있는 기법 보통 웹페이지는 문서 객체라는 것으로 구성 -> HTML 여기는 환테크 티스토리 공간입니다 실제 브라우저의 처리 과정(문서 객체 모델) html -> head -> title -> text:"환테크 티스토리" -> body -> text:"여기는 환테크 티스토리 공간입니다" -> img -> src="hwan.jpg" 이미지를 바꾸려면 이미지만 분해하여 조작 가능하지만 웹페이지에 새로 보여줘야 하는 내용이 서버에서 와야 할 경우, 서버에 그 내용을 요청해놓고..
-
브라우저의 작동 원리(보이지 않는 곳) - URL/URI, IP, port, domain, DNScodeStates front-end/node(server) 2023. 1. 30. 18:35
📌 브라우저의 작동 원리(보이지 않는 곳) 🔗 URL(Uniform Resource Locator)과 URI(Uniform Resource Identifier) https://hwantech.tistory.com/ HwanTech hwantech.tistory.com URL이란, 네트워크 상에서 웹 페이지, 이미지, 동영상 등의 파일이 위치한 정보를 나타내는 곳 scheme, hosts, url-path로 구분 가능하다 scheme은 통신 방식(프로토콜)을 결정 -> 일반적으로 http(s) 사용 hosts는 웹 서버의 이름이나 도메인, IP를 사용하며 주소를 나타냄 url-path는 웹 서버에서 지정한 루트 디렉토리부터 시작 각 파일의 위치한 경로와 파일명을 나타냄 URI란, URL의 기본 요소를 더해..
-
HTTP/네트워크 기초codeStates front-end/node(server) 2023. 1. 30. 17:31
📌 HTTP/네트워크 기초 📍클라이언트 - 서버 아키텍처 리소스가 존재하는 곳과 리소스를 사용하는 앱을 분리시킨 것이 2티어 아키텍처, 또는 클라이언트-서버 아키텍처라고 부른다 리소스를 사용하는 앱 - 클라이언트(client) // 카페로 치면 손님 리소스를 제공하는 곳 - 서버(server) // 커피를 가지고 있는 점원 -> 클라이언트는 서버에 요청을 보내고, 응답을 받는다 🔗 3-Tier 아키텍처 일반적으로 서버는 리소스를 전달해 주는 역할만 담당 리소스를 저장하는 공간 - 데이터베이스(창고) 창고가 추가되면 3티어 아키텍처라고 부름 🔗 프론트엔드와 백엔드 프론트엔드 - 클라이언트처럼 사용자가 직접 눈으로 보고, UI를 클릭 또는 터치하는 등의 개발 백엔드 - 눈에 보이지 않지만, 상품 정보를 AP..
-
[React] 이벤트 처리 & Controlled Component & React 데이터 흐름codeStates front-end/React 2023. 1. 26. 14:08
📌리액트 개념 📍이벤트 처리( Event handling ) React 에서 이벤트는 소문자 대신 카멜 케이스를 사용 JSX를 사용하여 문자열이 아닌 함수로 이벤트 처리 함수를 전달 Event // html Event // react 🔗 onChange 폼(Form) 엘리먼트 () 는 입력값을 제어하는 데 사용 변경될 수 있는 입력값 -> 컴포넌트의 state로 관리 function NameForm() { const [name, setName] = useState(""); const handleChange = (e) => { setName(e.target.value); // onChange 이벤트가 발생하면 e.target.value를 통해 input 값을 읽어옴 } return ( {/* input태그..
-
[React] State & Props & 렌더링 정의codeStates front-end/React 2023. 1. 25. 23:11
📌리액트 개념 📍State & Props State : 살면서 변할 수 있는 값(상태) 컴포넌트의 사용 중 컴포넌트 내부에서 변할 수 있는 값 Props : 성별이나 이름처럼 변하지 않는 외부로부터 전달받은 값 ex) 어떤것이 Props 또는 State에 적합할까? 이름 성별 나이 현재 사는 곳 취업 여부 결혼/연애 여부 정답 : Props - 이름, 성별 State - 성별, 나이, 이름, 현재 사는 곳, 취업 여부, 결혼/연애 여부 props의 특징 컴포넌트 속성(property) 웹어플리케이션에서 해당 컴포넌트가 가진 속성에 해당 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값 컴포넌트가 최초 렌더링 될 때 화면에 출력하고자 하는 데이터를 담은 초깃값 객체 형태 읽기 전용이다 -> 함부로 변경될 수..