Study/FrontEnd14 React 서버 연동 =>Client:https://github.com/ggangpae1/react_todo -SOP (Same Origin Policy) 문제: CORS(Cross Origin Resources Sharing)설정 SOP:동일 출처 정책 - JS는 동일한 도메인의 데이터만 사용할 수 있음 server 와 client 를 나눠서 하는 이유 1. client 하고 server 를 하나로 해놓으면 monolithic 이라 하는데, 이러면 자격 영역도 나눠져야 함 2. 유지/보수 => 예전에는 대기업에서 하청을 줘서 개발시킴. 자바스크립트 애플리케이션에서 다른 도메인의 데이터를 사용하는 방법 -서버에서 특정 도메인은 접근이 가능하도록 설정: CORS설정 -클라이언트에서 자신의 로컬 서버에게 접근한 후 로컬 서버에서.. 2024. 4. 29. React 1.개요1)SPA(Single Page Application)=>html 파일 1개로 동작하는 웹 애플리케이션 =>여러 개의 html로 구성된 웹 애플리케이션(Multi Page Application)은 페이지 전환을 할 때 이전 페이지를 제거하고 새로운 페이지를 랜더링을 하게 되는데 이 과정에서 깜빡임이 발생 =>SPA를 이용하면 위 와 같은 깜빡임을 제거할 수 있습니다. 하나의 html로 구성되기 때문에 새로운 페이지를 랜더링하지 않음 =>이런 SPA 프레임워크로 angular, vue, react 가 있음 2)Template Engine=>웹 서버 프레임워크는 대부분 HTML 템플릿 엔진을 제공 =>HTML 템플릿 엔진은 서버에서 제공하는 데이터 와 html 태그를 결합해서 웹 클라이언트에게 출력 .. 2024. 4. 26. JavaScript(5) 1.ajax 1)개요 =>Asynchronous JavaScript XML(eXtensible Markup Language) 의 약자 =>원래 의미는 비동기적으로 XML 데이터를 가져오는 것이었는데 최근에는 XML 대신에 JSON을 많이 사용 2)사용 이유 =>전체 페이지를 새로고침하지 않고 서버로부터 데이터를 받아서 일부분만 다시 출력하는 용도로 주로 이용 =>여러 콘텐츠를 하나의 화면에서 제공하는 경우에 사용 3)구현 객체 =>XMLHttpRequest 4)알아야 할 내용 =>GET 과 다른 방식으로 데이터를 포함(텍스트, 파일 등)시켜 요청을 전송하고 데이터(JSON, XML, Text 등)가 왔을 때 사용 =>SOP 와 CORS - SOP(Same Origin Policy - 동일 출처 정책) 자.. 2024. 4. 23. JavaScript(4) 1.Function 1)개요 =>자주 사용되는 코드를 하나의 이름으로 묶어두고 하나의 명령의 형태로 호출하는데 독립적으로 메모리를 할당받아서 실행 2)종류 =>Javascript에서 제공하는 함수 =>사용자 정의 함수 =>3rd party 함수: 다른 개발자가 만든 함수 3)함수는 일급 객체 =>함수도 하나의 자료형, 데이터 =>함수를 변수에 대입하는 것이 가능 =>함수를 리턴하는 것이 가능 =>함수 안에 함수를 만드는 것이 가능 =>함수를 매개변수로 사용하는 것이 가능 4)함수 생성 =>function 다음에 이름을 기재 function 함수이름(매개변수 나열){ 함수의 내용 } =>함수를 변수에 대입 var | let | const 이름 = function(매개변수 나열){ 함수의 내용; } 5)함수.. 2024. 4. 23. JavaScript(3) 1.개요 1)등장 배경 =>웹 페이지의 동적인 처리를 향상시키기 위해서 등장 - HTML: 웹 브라우저에 보여지는 내용의 구조를 위한 언어 - CSS: 디자인 적용 2)특징 =>스크립트 언어: 컴파일하지 않고 줄 단위로 읽어서 번역하는 언어 스크립트 언어는 아래쪽에 에러가 있더라도 에러가 발생하기 전까지는 수행을 합니다. =>유니코드 기반의 언어이고 대소문자 구별 =>웹 브라우저에서 번역해서 실행 웹 브라우저마다 다르게 동작할 수 있음 =>동적 바인딩: 실행할 때 또는 데이터가 대입될 때 자료형이 결정 - 동적 바인딩은 장점이 많지만 컴파일 시간에 에러를 알 수 없고 어떤 데이터가 필요한 지 예측할 수 없기 때문에 개발자 입장에서는 반드시 좋은 것 만은 아님 - 동적 바인딩이지만 미리 자료형을 결정해서 .. 2024. 4. 18. React(3) **CSR - 클라이언트 사이드 랜더링: 서버와 클라이언트 애플리케이션을 따로 구현 1.node 기반의 프로젝트를 clone 한 후 사용하는 방법 1) git에서 clone 2)필요한 패키지 설치 npm install *강제 설치 npm install --save --legacy-peer-deps@material-ui/core npm install --save --legacy-peer-deps@material-ui/icons 3)실행 yarn start 2.삭제 구현 1) 삭제 아이콘 구현 =>mui.com활용 https://mui.com/material-ui/material-icons/ import React from "react" import { ListItem, ListItemText, InputB.. 2024. 1. 31. 이전 1 2 3 다음
