Programming 개발은 구글로/Web[프론트엔드&백엔드]47 [Web] VS Code Git 기능 추가 및 History 관리 VS Code Git 기능 추가 및 History 관리 1. Git 기능 추가 ■ git-scm.com 에서 현재 최신 버전인 2.37.1 릴리즈를 다운로드 후 설치합니다. ■ 파일 - 기본설정 - 설정에서 Exclude로 검색 후 **/.git 항목 제거합니다. 소스 제어 탭에서 변경 내용 스테이징 및 스테이징 제외, Commit 메시지 작성을 해서 Commit를 할 수 있습니다. ※ user.name이랑 user.email 이 저장되어 있지 않을 경우 터미널 창에서 아래의 명령어들을 입력해주세요. git config --global user.name "copymaster" git config --global user.email "copymaster@gmail.com" 2. Git History 관리 .. 2022. 7. 28. [Web] React 에러 처리 : 'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. React Error 'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. npm install 후 npm start 진행 시 해당 에러가 발생이 된다면, 아래 명령어들을 입력하면 됩니다. npm update npm start npm install -g react-scripts 2022. 7. 26. [Web] Web 개발 관련 유용한 Study 자료 Web 개발 관련 동영상 강좌 Web 개발을 하는 중에 필요한 강좌를 찾다가 아래의 동영상 강좌를 알게 되었습니다. 많은 분들에게 도움이 되었으면 좋겠습니다. 만약 게시물로 인해 누군가의 피해나 손해가 발생이 된다면 댓글로 남겨주세요. 해당 게시물을 바로 삭제하도록 하겠습니다. 2022. 7. 25. [Web] WebView 사용 관련 Android, iOS 관련 정리 WebView : 프레임워크에 내장된 웹 브라우저 컴포넌트로 뷰(View)의 형태로 App에 Embedding 하는 것을 말합니다. 즉 모바일 앱 애플리케이션의 Part, Page를 웹 애플리케이션 및 웹 페이지로 제공하는 기능을 말합니다. WebView 장점 배포 주기가 빠르다. 네이티브 앱을 수정해서 배포하려면 거쳐야 하는 절차들이 있는 반면, WebView로 구성된 부분은 Web 배포만 하면 바로 수정된 내용이 반영이 됩니다. 개발 기간이 줄어든다. Android/iOS를 둘다 서비스하는 제품인 경우 WebView만 수정이 되면 동시에 반영이 되기 때문에 개발 기간이 줄어들 수 있습니다. WebView 단점 네이티브 App 과 동일한 기능을 제공하지 못한다. 네이티브 API를 직접 가져와서 사용할 .. 2022. 7. 20. [Typescript] 1. 타입스크립트란? TS(타입스크립트) : MS(MicroSoft)가 개발하고 유지하고 있는 자바스크립트(JavaScript)를 기반으로 정적 타입 문법을 추가한 오픈소스 프로그래밍 언어입니다. 🟩 자바스크립트 대비 타입스크립트가 좋은 이유 버그를 줄일 수 있음 쉬운 유지 보수 퀄리티가 좋은 코드 타입 표기: 변수 값에 데이터 타입 지정 가능 예제코드) // Javascript function add(a, b) { return a+b; } console.log(add('3', '5')); 결과값: 35 // Typescript function add(a: number, b: number) { return a+b; } console.log(add('3', '5')); Compile error 발생 🟥 객체 지향 프로그래밍 지.. 2022. 7. 19. [Web] 하이브리드 앱과 Cordova 하이브리드 앱 : 앱의 기반이 되는 콘텐츠 영역은 HTML 기반의 웹 앱으로 제작, 최종 앱 배포에 필요한 패키징 처리만 아이폰, 안드로이드 플랫폼 안에서 처리하는 애플리케이션입니다. 네이티브 앱과 비교되어 사용되며 운영체제별로 각각 개발해야 하는 네이티브 앱과는 달리 하이브리드 앱은 외부 형태는 네이티브 앱이지만 별도의 하이브리드 앱 프레임워크를 통해 내부는 모바일 웹 앱으로 실행되기 때문에 반응속도에 차이가 있습니다. (반응속도 : 하이브리드 앱 2022. 7. 18. [Web] Route 사용법(react-router-dom) 및 페이지 설정 Route 사용법(react-router-dom) 및 페이지 설정 1. 설치방법 터미널 창에서 아래 명령어 입력 npm install react-router-dom@6 2. 환경 설정 index.js 파일에서 아래처럼 App을 BrowserRouter로 감싸주시면 됩니다. import { BrowserRouter } from "react-router-dom"; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); 3. 라우터(Router)로 페이지 설정 App.js 파일에서 import 후 페이지 설정을 하면 됩니다. import { Routes, Route, Link } from 'react-router-do.. 2022. 7. 12. [Web] HTML/CSS 링크(a href, Link) Underline, Decoration, Color 변경하기 HTML/CSS 링크(a href, Link) Underline, Decoration, Color 변경 // App.js 홈 1. 밑줄 제거 // App.css .link { text-decoration-line: none; } ※ text-decoration-line 속성입니다. none : 선 없음 underline : 밑줄 overline : 윗줄 line-through : 취소선 - 'text-decoration: none;'으로 해도 됩니다. 2. 밑줄 Color 변경 // App.css .link { text-decoration-color: red; } 3. 밑줄 Dot(점선)로 변경 // App.css .link { text-decoration-style : dotted; } ※ text-d.. 2022. 7. 11. [Web] Node.js - HTTP 서버 및 클라이언트 예제로 확인하기 HTTP 서버 및 클라이언트 1. server.js // index.html Hello!!! // server.js var http = require('http'); var fs = require('fs'); var url = require('url'); // 서버 생성 http.createServer( function (request, response) { // URL 뒤에 있는 디렉토리/파일이름 파싱 var pathname = url.parse(request.url).pathname; console.log("Request for " + pathname + " received."); // 파일 이름이 비어있다면 index.html 로 설정 if(pathname=="/"){ pathname = "/ind.. 2022. 7. 8. [Web] React 프로젝트 생성 시 보안 오류인 PSSecurityException, UnauthorizedAccess 에러 발생 React 프로젝트 생성 시 스크립트 (신뢰하지 않는 스크립트) 에러 발생 node에서 script를 실행 시 PSSecurityException, UnauthorizedAccess 에러가 발생할 수 있습니다. 이유는 MS(마이크로소프트)에서 스크립트 정책을 'Restricted'로 설정을 해놓아서 발생이 됩니다. npx create-react-app 프로젝트명 으로 React 프로젝트 생성 시 스크립트 관련 에러가 발생이 되면, 검색에서 PowerShell을 관리자 권한으로 실행 또는 Window key + x 로 아래와 같이 선택하시면 됩니다. PowerShell(관리자) 실행 후 명령어("Set-ExecutionPolicy Unrestricted")를 입력, y 입력 후 Enter 하시면 됩니다. 2022. 7. 6. [Web] Node.js - Blocking & Non-Blocking code Blocking & Non-Blocking code 1. Blocking Code : 프로그램이 메서드가 끝날 때까지 대기를 한 후 다음 명령어로 진행이 됩니다. - Blocking 예제 코드 // input.txt Let's understand what is a callback function. What the HELL is it? // main.js var fs = require("fs"); var data = fs.readFileSync('input.txt'); console.log(data.toString()); console.log("Program has ended"); 결과를 확인하면, $ node main.js Let's understand what is a callback function... 2022. 7. 5. [Web] Redux(리덕스) 시작하기 Redux : Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너입니다. Redux는 일관적으로 동작하고, 서로 다른 환경(서버, 클라이언트, 네이티브)에서 작동하고, 테스트하기 쉬운 앱을 작성하도록 도와줍니다. 1. Redux 기본 예제 import { createStore } from 'redux' /** * 이것이 (state, action) => state 형태의 순수 함수인 리듀서입니다. * 리듀서는 액션이 어떻게 상태를 다음 상태로 변경하는지 서술합니다. * * 상태의 모양은 당신 마음대로입니다: 기본형(primitive)일수도, 배열일수도, 객체일수도, * 심지어 Immutable.js 자료구조일수도 있습니다. 오직 중요한 점은 상태 객체를 변경해서는 안되며, * 상태가 바뀐다면 .. 2022. 7. 4. 이전 1 2 3 4 다음 728x90
