YoonStudyNote

코딩하기전에 디렉터리 구조부터 파악하겠습니다. 1. public 폴더 우선 public 폴더에 들어가면 index.html 파일에 들어갑니다. 이 html 파일이 우선 UI가 어떻게 보이는지 설정해주는곳인데요, 여기서 눈여겨 볼만한곳이 빨간색 네모 박스 친 부분 입니다. 만약에 컴포넌트를 만들어갈때는 저기에 있는 "id=root"라는곳에 넣어야 합니다. create react app은 그렇게 약속을 했습니다. 그 컴포넌트 수정 과정은 다른 폴더 속에서 해야합니다. 2. src 폴더 컴포넌트를 수정하고 추가하는곳은 src폴더입니다. 그래서 개발작업을 할때는 거의 대부분 src폴더에서 이루어질 것입니다. 우선 index.js를 확인해 보겠습니다. 아까전에 언급한 root 부분이 index.js에서 연결된것을..

1. Visual Studio Code에서 Terminal을 여신후에 다음과 같이 입력하시면 됩니다. npm run start run을 생략하셔도 됩니다. 그러면 다음과 같은 화면이 나올겁니다. 잘 동작하고 있는겁니다. 나와있는 그림은 react가 최소한의 UI를 그냥 잠시 보여주고 있는겁니다. 2. 주소 확인하기 그리고 VSCode에서 Terminal안에 내용을 보면 개발중인 앱을 확인하는 주소가 나옵니다. 이 주소로 들어가면 현재 얼마나 개발되어가고 있는지 확인 할 수 있습니다. 또한 둘중에 하나 주소로 들어간다는 뜻입니다. 3. 중지시키는 방법 Terminal에서 Ctrl+C를 입력하면 실행을 중단하게 됩니다. 일괄 작업을 끝내겠습니까? 에서 "y"를 입력하면 작업을 끝냅니다.

appdevelopmaster.tistory.com/501 npm 과 npx 차이점 (feat. create react app 만들기) ko.reactjs.org/ React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces ko.reactjs.org 우선 react 홈페이지에서 "시작하기" 버튼을 클릭해줍니다.. appdevelopmaster.tistory.com 이 개시글에 가장 밑에 부분을 확인해보고 오세요! 내 pc에서 바탕화면에 react-app 파일을 만들어줍니다. **주의** 여기서 react만 입력하게 된다면, 특수한 문자이기때문에 create react app이 거절한다고 합니다. 그..

ko.reactjs.org/ React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces ko.reactjs.org 우선 react 홈페이지에서 "시작하기" 버튼을 클릭해줍니다. 새로운 어플리케이션을 만들기 위해서 형광색 친 부분을 클릭해줍니다. 본인은 Create React App을 선택했습니다. 그러면 다음과같은 페이지로 자동으로 이동이 됩니다. 여기서 형광색 친 부분을 클릭하면 깃허브로 소스코드를 제공해주고 있습니다. 1. npm으로 create-react-app을 설치하기 npm install -g create-react-app 잘 설치되었는지 확인해봅니다. create-react-app -V..

만약 명령프롬프트에서 npm이라고 입력하면 다음과 같이 나옵니다. 1. 현재 디렉터리에 있는 패키지 목록보기 npm list npm list -g npm list -g는 전역적으로 설치된 npm 패키지 목록을 말합니다. 매우 복잡하게 나올겁니다. npm list -g --depth=0 이것은 본인이 설치한 npm 리스트의 이름만 보여줍니다. 저는 local-web-server라는거 한개만 나왔네요. npm list -g --depth=1 본인이 설치한 local-web-server의 자식요소들을 출력해줍니다. 2. 업데이트 하는방법 npm update -g ~~~~~~ npm update ~~~~~~ 다음과 같이 입력하면 업데이트가 됩니다. 이미 최신버전으로 다운로드 되었기때문에 사진에서는 아무것도 나오..

1. 패키지 검색 www.npmjs.com/ npm | build amazing things Build amazing things We're npm, Inc., the company behind Node package manager, the npm Registry, and npm CLI. We offer those to the community for free, but our day job is building and selling useful tools for developers like you. Take your JavaScript devel www.npmjs.com 이곳에서 패키지를 검색하시면 됩니다. 예를들어서 웹서버를 내 컴퓨터에 설치하고 싶다면 검색을 해봅니다. 이곳에서 ws가 나오는걸 볼 수..

쉽게 설명하자면, 여러분이 모바일 환경에서 앱을 설치할때는 앱스토어는 구글플레이스토어에 갑니다. 커멘드라인으로 동작하는 프로그램들도 이와같이 프로그램들을 쉽게 검색하고 삭제할 수 있도록 일종의 앱스토어가 있습니다. 엄청나게 많은 앱스토어중에 그중에 하나가 npm입니다. Package라고 하면 추상적인 느낌이 드실겁니다. 맞습니다. 하나만 콕 찝어서 말하기가 어렵기 때문에 Package라고 한것도 없지않아있습니다. Package는 Node.js라는 시스템을 통해서 동작하는 다양한 프로그램들을 다 잡아서 말한것이기 때문입니다. 즉 그 다양한 프로그램들(package)를 관리해준다는 겁니다. npm을 잘 활용한다면, 스마트폰 앱스토어 보다도 훨씬 더 쉽게 필요한 프로그램을 설치하고 삭제하고 업데이트할 수 있습..

feat. 요즘 React는 클래스형 컴포넌트가 아닌 Hooks + 함수형 컴포넌트를 이용합니다. Interaction이 자주발생하고 이에 따라 동적으로 UI로 표현해야 되는 웹페이지를 만들때 Javascript를 이용해서 DOM을 변경할때 정말 복잡해지고 관리하기도 힘들어집니다. React는 신기하게 어떻게 DOM을 업데이트할지 규칙을 정하는것이 아니라 아애 다 날려버리고 처음부터 새로운것을 보여주는게 어떨까? 라는 발상에서 나왔습니다. 그럼 업데이트를 어떻게 해야할지에 대한 고민을 전혀 안해도 되기 때문에 개발이 정말 쉬워집니다. 하지만, 정말 동적인 UI를 보여주기 위해서 모든걸 다 날려버리고 모든걸 다 새로만들게 된다면 속도가 굉장히 느릴겁니다. 작은 웹 어플리케이션이라면 상관이 없지만 규모가 큰..

HTML은 UI 역할을 하고, 사용자의 interaction에 따라 동적으로 UI를 업데이트 하고 싶으면 Javascript를 사용해줘야합니다. 보통 interaction이 많을 경우에는 vanila javascript를 이용합니다. 만약 라이브러리를 사용하지않는다면 매우 어려운작업이 되기때문에, react, angular, vue를 사용하는 겁니다. 그래도 연동되는 작동원리를 알아야지 프레임워크를 이용할때 쉽게 이해할 수 있습니다. 1. HTML에서 ID를 설정하고 Javscript에서 ID를 통해서 DOM과 연결해줍니다. 우선 ID를 설정해야지 자바스크립트에서 쉽게 재어할 수 있습니다. 0 +1 -1 const number = document.getElementById('number'); const ..

1. 동기처리되는 모습 function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } const getDog = async () => { await sleep(1000); return '멍멍'; } const getRabbit = async () => { await sleep(500); return '깡총'; } const getTurtle = async () => { await sleep(3000); return '느릿'; } async function process() { const dog = await getDog(); console.log(dog); const rabbit = await getRabbit(); conso..