[Web] 웹(Server, Front-end, Back-end)
·
Programming/Web
클라이언트-서버 구조 웹 서비스를 제공하기 위해서는 서버(Server) 컴퓨터와 서버에서 동작하는 여러 프로그램이 필요하다. 이때 서버에서 동작하는 프로그램 영역을 백엔드(Back-end)라고 한다. 서비스를 이용하는 쪽은 클라이언트(Client)라고 한다. 클라이언트는 스마트폰, 데스크톱이 될 수 있으며 자동차, TV, 냉장고 등에서도 인터넷과 웹 사용이 가능하기 때문에 이러한 기기까지도 클라이언트로 볼 수 있다. 클라이언트에서 웹 서비스를 이용하려면 웹 브라우저라고 하는 소프트웨어가 필요하며 클라이언트에서 동작하는 프로그램 영역을 프론트엔드(Front-end)라고 한다. 웹 프로그래밍의 구조 클라이언트 : 웹 서비스를 이용하는 사용자이다. 서버 : 웹 서비스를 제공하기 위한 서비스 공급자이다. 프런트..
[Web] 웹(Network, TCP/IP, Internet, Protocol, Port, DNS)
·
Programming/Web
웹의 특징 인터넷은 컴퓨터 네트워크망을 의미하고, 웹은 인터넷 서비스 중 하나를 의미한다. 웹은 인터넷상의 정보를 하이퍼텍스트 방식과 멀티미디어 환경에서 검색할 수 있게 해주는 정보 검색 시스템을 의미한다. 웹은 HTTP 프로토콜을 사용하며 HTML로 작성된 문서를 연결하여 다양한 콘텐츠를 제공한다. 웹 서비스는 많은 사람들이 정보를 쉽게 공유하고 접근할 수 있도록 하는 것을 목적으로 한다. 웹의 동작 구조 HTML로 만들어진 콘텐츠는 '웹 서버(Web Server)'라고 하는 별도의 서버 소프트웨어를 통해 서비스로 제공되며 웹 서버 소프트웨어로는 아파치(Apache)가 대표적이다. 또한 웹 서비스를 요청한 클라이언트에서 서비스를 이용하려면 웹 브라우저(Web Browser)라고 하는 클라이언트 소프트웨..
[React Native] error: Command failed with exit code 1.
·
Framework | Library/React Native
프로젝트 시작시 발생한 에러 error: Command failed with exit code 1. 1. yarn 으로 생성된 node_modules. yarn.lock 지우기 rm -rf node_modules rm -rf yarn.lock 2. yarn 공유 캐시 파일 지우기 yarn cache clean 3. yarn 재설치 후 시작하기 yarn yarn start 또는 1. yarn 업데이트 후 yarn 시작하기 yarn update yarn start
[React Native] 공부(component, Props, defaultProps, JSX 문법, 주석)
·
Framework | Library/React Native
컴포넌트(component)를 직역하면 '구성 요소'라는 의미이다. 프런트엔드 개발에서의 컴포넌트는 유저 인터페이스를 구성하는 요소라고 이해하면 된다. 리액트로 프런트엔드를 개발할때는 수많은 컴포넌트를 만들면서 진행하게 된다. 리액트에서의 컴포넌트는 단순히 보이는 부분만 담당하는 것이 아니라, 사용자가 어떠한 행동을 취했을 때 어떠한 작업을 할지도 설정해줄 수 있다. // App.js import React from 'react'; import {SafeAreaView, View, Text} from 'react-native'; const App = () => { return ( Hello React! ); }; export default App; 여기서 App이 바로 컴포넌트이다. 그리고 App 컴포넌..
[React Native] Delete 'CR' eslint(prettier/prettier)
·
Framework | Library/React Native
문제 ESLint 활성화 후 저장을 할 때마다 다음과 같은 문제가 발생함. 해결방법 첫번째 방법 프로젝트 내 .prettierrc.js 내용 수정 module.exports = { arrowParens: 'avoid', bracketSameLine: true, bracketSpacing: false, singleQuote: true, trailingComma: 'all', endOfLine: 'auto',// 이 부분 추가 }; 두번째 방법 Visual Studio Code 설정 변경 CRLF 부분을 클릭한다. LF로 변경한다.
[React Native] 공부(Android Studio, VSCode, Node.js, npm, yarn, Chocolatey, ESLint, Prettier, 번들링)
·
Framework | Library/React Native
리액트 네이티브(React Native)란? 자바스크립트(JavaScript)와 리액트(React) 라이브러리를 사용해 네이티브 앱을 개발할 수 있게 해주는 기술이다. 리액트 네이티브의 장점은 자바스크립트로 코드를 작성해 애플의 IOS 기기와 구글의 안드로이드 기기에서도 구동하는 애플리케이션을 개발할 수 있다는 것이다.(IOS 앱을 개발하려면 macOS를 사용해야한다. 다른 운영 체제에서는 IOS 앱을 컴파일할 수 없기 때문에 리액트 네이티브로 개발할 때는 macOS기기를 사용하는 것이 좋다.) 리액트는 웹 애플리케이션의 UI를 편하게 만들기 위해 페이스북에서 개발한 자바스크립트 라이브러리이다. 리액트는 웹 개발을 위해 만들어진 라이브러리지만, 플랫폼에 구속을 받지 않는다. 리액트에서 실제 웹에 해당하는..