반응형 front-end6 자바스크립트 CORS(Corss Origin Resource Sharing)과 대처방안에 대하여! -- 안녕하세요? 오늘은 CORS (Corss Origin Resource Sharing)과 그에따른 대처방안에 대해서 알아보도록 하겠습니다. CORS (Corss Origin Resource Sharing)란? : CORS(교차 출처 리소스 공유)는 웹 브라우저에서 구현된 보안 기능으로, 한 출처(도메인)에서 실행되는 웹 애플리케이션이 다른 출처에서 리소스를 요청할 수 있도록 허용하거나 제한합니다. 이는 웹 애플리케이션의 보안을 유지하고 악의적인 사이트가 민감한 데이터에 접근하는 것을 방지하기 위해 중요합니다. CORS (Corss Origin Resource Sharing) 발생 이유는, 보통 Https에서 Http로 요청을 하였을때 혹은, 서로 다른 도메인에서 자료를 가져올 때 발생합니다. 그럼, .. 2024. 9. 27. vue 설치 및 개발환경 셋팅 - -안녕하세요?오늘은, 프론트엔드 중에서 자바스크립트 기반의 프레임워크인 Vue.js의 설치에 대해서 알아보도록 하겠습니다. vue 프로젝트를 만들기 위해서는, 우선 node.js와 npm이 설치가 되어야 합니다. 아래 사이트에서 node.js를 다운합니다. https://nodejs.org/ko/ 다운로드가 완료 되었으면, 설치파일을 실행시켜 줍니다. Next 버튼 클릭동의에 체크를 해 주신 후, Next 버튼 클릭 설치 경로를 지정해 줍니다. Next 버튼 클릭 설치할 항목들을 선택 해줍니다. Next 버튼 클릭 Next 버튼 클릭 Install 버튼 클릭 설치 완료 모습입니다. Finish 버튼 클릭 - 이제, vue 명령어와 빠른 프로젝트 생성 및 관리를 할 수 있도록 .. 2024. 9. 9. 리액트 프로젝트 만들기! 리액트 프로젝트 간단 생성 (create-react-app 사용) - 1. create-react-app 설치명령어 입력 : npm install -g create-react-app (=npm i -g create-react-app) npm을 이용해, create-react-app 설치 완료 화면 2. create-react-app 을 이용해 프로젝트 생성 명령어 입력 : create-react-app 프로젝트명 create-react-app을 이용한, 리액트 프로젝트 생성 완료 화면 3. 개발 서버 실행 프로젝트 디렉토리 위치에서 명령어 입력 : npm start npm을 이용한, 리액트 프로젝트 개발서버 실행 화면 npm을 이용한, 리액트 프로젝트 개발서버 정상 실행 화면 리액트 프로젝트 실행 완료 후, 정상 브라우저 접속 화면 2024. 9. 5. 앵귤러 (=Angular) 개념 및 특징 정리 - [정의]2009년에 발표한 구글에서 만든 자바스크립트 프레임워크자바스크립트로 만든 클라이언트 측 MVC/MVVM 프레임워크 모던 단일 페이지웹 어플리케이션 개발의 정수 [특징]자바스크립트로 작성할 코드량을 줄여줌: DOM을 선택/조작하는 코드 작성 불필요 양방향 데이터 바인딩이 가능: 모델의 데이터와 뷰 데이터가양방향 데이터 바인딩이 되어모델이 바뀌면 뷰 데이터도 같이 변경됨 HTML, CSS, 로직 등의 개발 영역의 분리: 기존에는 DOM 조작과 이벤트 처리를 위해HTML을 숙지하고 있어야 했지만,AngularJS는 뷰 코드와 로직 코드가명확히 분리 [개념 및 주요요소] Model: 단순 자바스크립트 객체로 된 데이터: 보통 JSON으로 표현되는 어플리케이션의특정한 데이터 구조: JSON 데이.. 2024. 9. 5. 리액트 프로젝트 만들기! 리액트 (React) 설치 부터, 환경설정, 기본 셋팅까지! -오늘은, 리액트에 대해서 알아보고,리액트 사용을 위한 필수 설치 및 환경 설정을 해보도록 하겠습니다. - 리액트 사용을 위한 필수 설치 및 환경입니다. node.js 설치 (npm)React project 설정webpack 설치babel 설치React 설치 및 설정 (webpack+babel 프로젝트)Hot module replacement 설치... 1. node.js 설치합니다. (npm) : 다운로드 사이트 → https://nodejs.org/en/ Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org ※ npm ( Node P.. 2024. 9. 2. 리액트 (=React) 개념 및 특징 정리 - - 단순 개념 : 페이스북이 만든 사용자 UI 구축을 위한 컴포넌트 기반 라이브러리: 오직 사용자의 View에만 초점을 맞춤: Reuting 같은 기술이 미포함( but, 현재는 프레임워크 위치 수준 > 커뮤니티의 활발성 ) - 대표적인 특징 1. JSX 문법: 자바스크립트 안에서 html 문법을 사용하여 view를 구성할 수 있게 도와주는 자바스크립트 문법 2. Component 기반: 하나의 html 코드가 아닌, 여러 부분을 분할해서 코드의 재사용성과 유지보수성을 증가 3. Virtual DOM: DOM의 한계를 탈피기 위해 나온 대안: 변화를 가상 돔에서 미리 인지 후 변화( = 불필요한 렌더링 및 연산 비용의 절감화 ): 바뀌지 않은 부분과 바뀐 부분을 자동으로 감지 후 업데이트( = 가상 .. 2024. 9. 2. 이전 1 다음 반응형
