sy의 코딩 개발일지

클라이언트 - 서버 아키텍처 비번한 데이터 업데이트 필요 -> 리소드 존재하는 곳 , 리소스 사용하는 앱을 분리시키는 것(2티어 아키텍처) 클라이언트 : 리소스를 사용하는 앱 서버: 리소스를 제공하는 곳 클라이언트와 서버는 요청과 응답을 주고 받는 관계아다. 기존2티어+데이터베이스 추가(3티어) 데이터베이스 : 리소스를 저장하는 공간 데이터베이스는 데이터 제공자로 일종의 서버이다. 클라이언트-서버통신과 API 웹 애플리케이션 아키텍처에서는 클라이언트와 서버가 서로 HTTP라는 프로토콜을 이용해서 서로 대화를 나눈다. 프로토콜은 통신 규약, 즉 약속 응용계층 HTTP : 웹에서 HTML,JSON등의 정보를 주고받는 프로토콜 HTTPS: HTTP에서 보안이 강화된 프로토콜 FTP: 파일 전송 프로토골 SMT..

Props 전달 ReactDOM.render( , document.getElementById('root') ); App.js // TODO : MyPage, About 컴포넌트를 import 합니다. import MyPage from './Pages/MyPage'; import About from './Pages/About' ; //props를 전달받음 const App = (props) => { return ( {/* TODO : 유어클래스를 참고해서, 테스트 케이스를 통과하세요. TODO : React Router DOM 설치 후 BrowserRouter, Routes, Route의 주석을 해제하고 Routes, Route 컴포넌트를 적절하게 작성합니다. */} {/* Route 예시: */} ); ..

State : 내부에서 변화하는 값 ,컴포넌트의 사용중 내부에서 변할수 있는 값 ex)나이,사는 곳 ,취업 여부 , 결혼/연애 여부 Props : 외부로부터 전달받은 값 ex) 이름 , 성별 특징 컴포넌트의 속성 부모 컴포넌트(상위 컴포넌트)로부터 전달 받은 값 ->React 컴포넌트는 JavaScript 함수와 클래스로, props를 함수의 전달인자(arguments)처럼 전달받아 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환 객체 형태 읽기 전용(외부로부터 전달받아 변하지 않는 값) 사용하는 방법 하위 컴포넌트에 전달하고자 하는 값(data)과 속성을 정의 props를 이용하여 정의된 값과 속성을 전달 전달받은 props를 렌더링 unction Parent() { ret..

App.js import React from 'react'; import './App.css'; import './global-style.css'; // TODO - react-router-dom을 설치 후, import 구문을 이용하여 BrowserRouter, Routes, Route 컴포넌트를 불러오세요. import { BrowserRouter, Routes, Route} from "react-router-dom"; import Sidebar from './Sidebar'; import Tweets from './Pages/Tweets'; // TODO - import문을 이용하여 MyPage, About 컴포넌트를 불러오세요. import MyPage from './Pages/MyPage'; i..

업데이트에 필요한 데이터만 받아 JavaScript가 이 데이터를 조작하여 HTML요소를 생성하여 화면에 보여주는 방식이 개발 SPA(Single-Page Application) 화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트하는 방식으로 작동하는 웹 애플리케이션이나 웹 사이트 SPA 장,단점 장점 : 사용자와의 행동에 빠르게 반응 서버에서는 요청 받은 데이터만 넘겨주면 되기 때문에 서버 과부하 문제가 현저하게 줄어둠 전체 페이지를 렌더링 할 필요가 없기 때문에 나은 사용자 경험 제공 단점 : JavaScript 파일의 크기가 크기 때문에 기다리는 시간으로 인해 첫화면 로딩시간이 길어진다. 검색엔진 최적화가 좋지 않다. 검색 로봇은 자료를 수집할 때에 웹 ..

리액트 : 프론트엔드 개발을 위한 JavaScript 오픈 소스 라이브러리 선언형 명시적으로 작성 ( 코드의 의도를 알수있다.) 컴포넌트 기반 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둠(독립적 , 재사용) 범용성 Javascript 프로젝트 어디에든 적용 JSX(JavaScript XML) react에서 UI를 구성할때 사용하는 문법(자바스크립트를 확장한 문법) Babel은 JSX를 브라우저가 이해할 수 있는 JavaScript로 컴파일 JSX -> babel -> js -> browser React DOM(css , jsx) JavaScript 문법과 HTML 문법을 동시->기능과 구조를 한번에 확인 JavaScript 만으로 마크업(markup) 형태의 코드를 작성하여 DOM에 배치 JSX ..

JavaScript의 가장 큰 장점 중 하나인 비동기 흐름 ex ) 강아지 구름이와 호빵이가 있다. 한마리씩 산책을 할수있는데 (blocking) 구름이가 산책을 완료를 하고 호빵이가 산책을 시작하게 되었다. 시작 시점과 완료 시점이 같은 상황을 동기적(synchronous)이다. 시작 시점과 완료 시점이 같지 않아도 되는 상황을 비동기적이다.(non-blocking) 자바스크립트에서 동기와 비동기 동기 : 특정 코드의 실행이 완료될 때까지 기다리고 난 후 다음 코드를 수행하는 것 비동기:‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드들을 수행하는 것 JavaScript는 싱글 스레드 기반으로 동작하는 언어 -> 동기적으로 작동한다. 런타임 환경에서 비동기 처리를 도와줌 *싱글 스레드 기반?..

local git repository 디렉토리를 만들고 해당 디렉토리에 로컬 git repository 생성 ( git init) stataging area (git add) staging area(commit 하기전에 내용을 기록하는 장소)의 파일은 commit 가능(git commit) -> commit으로 로컬 git repository에 내 코드를 기록 index.html과 style.css의 각 코드들(저장하고 싶은 코드들)을 하나로 모아두는 과정 -> staging area로 넣는다.(git add or git add.) git status(staging area로 잘 옮겨졌는지 확인,git repository 변경사항 확인하기) staging area의 코드 묶음을 저장하기로 결심(git c..