새벽코딩

보통 리액트 앱을 생성할 때, 아래와 같은 명령어로 생성을 한다. npx create-react-app my-app 오늘은, Vite 라는 툴을 이용해서, 다른 방법으로 리액트 앱을 생성해보려고 한다. Vite 란? 프랑스어로 rapid 또는 quicky 라는 뜻으로, React 외에도 vue, svelte 등 의 프로젝트를 빌드할 수 있게 도와주는 툴 중 하나이다. https://ko.vitejs.dev/guide/ Vite Vite, 차세대 프런트엔드 개발 툴 ko.vitejs.dev 프로젝트 생성 1. 프로젝트 생성하고하자는 폴더로 이동하여, npm create vite@latest 2. 아래와 같이 선택해 주면, 프로젝트를 생성한다. 3. 생성된 프로젝트 (first-react-app)으로 이동하..

- node modules 삭제 node modules은 많은 파일이 포함되어 있어서 삭제시 상당한 시간이 소요된다. 하지만, 터미널에서 간단하게 삭제하는 방법을 소개한다. 먼저, 패키지를 설치한 후에 npm install rimraf -g 아래 명령어를 입력하면, 순식간에 삭제된다. rimraf node_modules - node modules을 git commit 시에 제외 또한, 리모트 repository에 올라가는 것을 막기위해서, 아래와 같이 하면 된다. 1) 프로젝트 최상위 위치에 .gitignore 파일 생성해준다. (맨앞에 점 주의) 2) .gitignore 파일안에 제외할 내용 입력 후 저장 지금의 경우 node_modules 폴더를 제외해야하므로, 아래와 같이 저장 /node_modules

이번 포스팅에서는 form 의 input tag 안에서 1. input에 입력된 값을 get하는 방법 2. 그 값이 공백인 경우에 alert을 띄워주는 방법 3. 또한 값이 특정 길이 보다 짧을 경우에 alert을 띄워주는 방법을 알아 볼 예정이다. 아래와 같이 로그인을 위한 을 생성 한 후 로그인하세요 전송 닫기 미리보기 1. input에 입력된 값을 어떻게 get할까? 먼저, 위에 첫번째 input field는 email을 입력하는 부분이고, 해당 field에(id="email" 인 tag) 입력된 값이 무엇인지 아래와 같이 확인 할 수 있다. document.getElementById('email').value // id='email'인 요소의 value를 나타낸다 2. 입력값 (email 또는 p..

- jQuery 설치 구글에 jQuery cdn 검색 https://releases.jquery.com/ jQuery CDN The integrity and crossorigin attributes are used for Subresource Integrity (SRI) checking. This allows browsers to ensure that resources hosted on third-party servers have not been tampered with. Use of SRI is recommended as a best-practice, whenever libr releases.jquery.com jQuery 3.x 버전 아니면, 최신버전 jQuery 사용하려면 아래 코드를 body안에 ..

이전 포스팅에서 bootstrap을 이용하여, Navbar구현하는 법에 대해서 알아보았다. https://midnightcoding.tistory.com/100 [JavaScript기초] 5. 부트스트랩 사용하는법(bootstrap) 부트스트랩은, 기존에 만들어 놓은 Navbar, tabs, Modal등을 가져와서 구현을 할 수 있는 플랫폼이다. 사용법 1. 구글에 bootstrap을 검색하여, 아래 링크로 들어간다. 2. Bootstrap 웹페이지로 들어가서 상 midnightcoding.tistory.com 이번 포스팅에서는 Bootstrap을 이용하여, Navbar 버튼을 눌러서 서브메뉴를 보여줄수 있도록 해보자 여기에서는 div tag에 class를 탈부착하여, 요소가 보이게 또는 안보이게 만들예..

부트스트랩은, 기존에 만들어 놓은 Navbar, tabs, Modal등을 가져와서 구현을 할 수 있는 플랫폼이다. 사용법 1. 구글에 bootstrap을 검색하여, 아래 링크로 들어간다. 2. Bootstrap 웹페이지로 들어가서 상단 네브바에서 Docs로 들어간다 (상단 오른쪽 버전확인 v5.x ) 3. 위와 같이 Get started with Bootstrap 이라는 화면이 보이게 되는데, Quick start 순서대로 하면된다. 먼저 index.html을 만들고 아래 코드를 넣어준다 (vs code에서 느낌표+tab을 누르면 자동생성) Hello, world! 4. 그리고 Hello, world! 이제, 추가하고 싶은 요소를 찾아서 코드를 붙여 넣어주면 구현 가능하다. * Navbar를 추가하고 싶..

셀렉터(selector) 란? 앞에서 셀렉터(selector)에 대해서 언급을 하지 않았지만, 이미 사용하고 있다. 셀렉터는 HTML Tag를 스타일링해주기 위해 특정 tag를 선택하기 위해 사용한다. 셀렉터의 종류 - id를 선택할 때 : getElementById('id 이름') - class를 선택할 때 : getElementsByClassName('class 이름') 사용예시 alert1 X ** 하지만, class는 id와 다르게 여러개를 지정할 수 있기 때문에, 뒤에 indexing을 꼭 해줘야한다. 위에 코드를 아래와 같이 바꿔줘야 작동을 한다. (class를 찾은 것 중에 몇번째인지 써줘야 함) document.getElementsByClassName('title')[0].innerHTML..

앞선 포스팅에서 함수에 대해서 알아보았다. https://midnightcoding.tistory.com/97 [JavaScript기초] 2. 자바스크립트 동적 UI 만들기 with 함수란? UI 만드는 스텝 1. HTML/CSS로 미리 디자인 2. 필요할 때 보여질수 있도록, 자바스크립트로 구현 먼저, 스타일링을 위해서 따로 main.css 라는 파일을 만들어주고, css파일을 아래와 같이 UI 만드는 스텝 midnightcoding.tistory.com 함수(function)에 사용가능한 문법 중 매개변수(parameter)가 있다. function 함수(매개변수자리) 이런 형태로 괄호안에 넣어주는것을 매개변수, 영어로 parameter라고 한다. 아래 비슷한 형태의 두 함수를 매개변수를 이용해서 수..