반응형 Programming30 [생활코딩] React 강의 03. 컴포넌트 만들기 리액트의 본질 리액트는 사용자 정의 태그를 만드는 기술 아래와 같이 app.js를 변경해 보았다. 여기서 만약 태그의 내용이 엄청나게 길어진다고 상상해보자. 그러면 소스를 보기에 매우 불편해지 때문에 태그를 사용자 정의하여 간단하게 줄여보도록 해보자. 사용자 정의 태그를 만들 때는 함수를 정의하면 된다. React 에서는 사용자 정의 태그를 생성할 때 무조건 대문자로 시작해야 함. (ex. function header ==> x // function Header == O) React에서는 사용자 정의 태그를 컴포넌트 (component)라고 부른다. 이제 밑에 , 태그도 한 번 컴포넌트로 만들어 보자. 이런식으로 정리 할 수 있다. 2024. 1. 21. [생활코딩] React 강의 02. 소스코드 수정/배포 index.js를 F5 하면 REACT 관련 화면이 실행됨 1) 빌드 만들기 빌드 버전을 만드려면 터미널을 다시 실행한 다음에 컨트롤 C 눌러서 기존에 켜져있었던 개발환경을 종료함 그 다음 터미널 화면에 npm run build 를 치면 배포판을 만드는 과정이 실행됨 빌드가 다되면 옆 탐색기에 bulid 폴더가 생성이 된 것을 볼 수가 있음 2) 빌드한 소스를 서비스 하기 이제 빌드한 결과물을 서비스 해보자 터미널 명령어는 npx serve -s build 라고 치면 된다. serve는 웹 서버를 뜻하는데 -s 라는 옵션을 주게 되면 사용자가 어떤 경로로 들어와도 index.html 폴더를 서비스 해주게 된다. 뒤의 build 는 폴더 이름으로 빌드 만들면서 생성된 build폴더를 뜻한다. 터미널에서 결.. 2024. 1. 20. [Gitlab] destination path '디렉토리명' already exists and is not an empty directory. Gitlab에 올린 소스들을 다른 PC에 내려받기 위해 Gitbash로 내려받았는데... 폴더를 잘못 들어가서 하위 폴더에 내려받아버렸다.. 직접 폴더에서 delete를 하고 Gitbash에서 git clone 깃주소 입력했으나.. destination path '디렉토리명' already exists and is not an empty directory. 뜨면서 내려받기가 안됐다. 그 디렉토리에 여전히 해당 디렉토리명이 있다는데.. Gitbash에서 삭제하고 다시 해보기로 했다. Gitbash 경로는 잘못 받은 폴더의 상위폴더로 잡아놓고 rm -rf 디렉토리명 엔터하면 삭제 완료 폴더 잘 잡고 다시 clone을 하니 정상적으로 내려받기 성공. 2024. 1. 20. [Gitlab] LF will be replaced by CRLF the next time Git touches it 이슈 GitBash로 수정된 소스들을 git add 하려고 할 때 warning : in the working copy of '올리려는 디렉토리명', LF will be replaced be CRLF the next time Git touches it 이슈 발생했음 대충 해석하자면 .. 너가 올리려는 파일을 올리려는데 다음에 Git 실행할 때 LF가 CRLF로 교체될 것이다.. LF는 무엇이고 CRLF 는 무엇인가? Warning 뜨니깐 무섭다. 확인해보자. . . . . 일단 두 개의 개념 모두 과거 타자기 자판으로 직접 종이에 글을 적던 시절의 개념이라고 함 타자기 자판으로 종이에 한 줄을 다 적으면 다음 칸으로 한 줄 내리는 행위를 LF(Line-Feed), 내린 상태에서 왼쪽 맨 끝으로 타자기 촉?을 .. 2024. 1. 19. 개발기본용어_인터페이스(Interface)란? 인터페이스(interface) - 사전적 정의로는 사물 간 또는 사물과 인간 간의 의사소통이 가능하도록 일시적 혹은 영속적인 접근을 목적으로 만들어진 물리적, 가상적 매개체를 의미 - 어떤 객체가 제공하는 기능을 정의하는 추상적인 개념으로 해당 객체가 어떤 메소드, 속성을 제공하고 있는 지를 명시적으로 나타냄 - 인터페이스를 사용함으로 코드의 유연성이 높아짐 - 결국 어떤 것들을 이어주는 다리 역할을 해주는 것으로 쉽게 얘기하면, 방의 불을 키기 위한 스위치같은 느낌 - 위의 예제에서 'Shape' 인터페이스는 'calculateArea'와 'draw'라는 두개의 추상 메소드를 정의하고 있음 - 위의 예제에서 'Circle' 클래스는 'Shape' 인터페이스를 구현하고 있음 - 'calculateArea.. 2024. 1. 16. [생활코딩] React 강의_01_실습환경구축 1. 리액트 홈페이지 접속 https://ko.reactjs.org > 시작하기 React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리A JavaScript library for building user interfacesko.legacy.reactjs.org2. 실습환경구축을 하기 싫다면 본문 내용 중 "온라인 플레이 그라운드" 의 Stackblitz를 클릭하면바로 실습할 수 있도록 리액트 환경이 구축되어 있음 3. 그게 아니라면 해당 홈페이지 오른쪽에 "새로운 React 앱 만들기" 클릭 후 "추천 툴체인" 소제목을 찾아라 4. 필자는 강의 내용에 따라 "Create React App"를 선택한 후 본문 내용에 또 "Create React App" 선택 5. github에 이동.. 2024. 1. 16. 이전 1 2 3 4 5 다음 반응형
