Javascript26 npm 설치하기 npx는 npm의 보안이 강화된 버전이다. 기능은 같다. 먼저 터미널창에서 아래와 같이 입력하고 진행했다. 설치할때는 전역으로 설치하기 위해 -g 옵션을 넣어주었다. npm install -g create-react-app 그런 다음 수업진행을 위해 react라는 폴더를 만들어 준 후에 react폴더에서 hello라는 폴더도 만들기 위해 터미널에서 마저 진행해주었다. create-react-app hello Happy hackin! 이라는 문구가 출력되면 완료된 것이다. 그런 다음 npm start 를 입력하면 localhost:3000으로 서버가 실행이 되었다. 여기까지 알아보았으면 이제 vs code로 진행을 해보겠다. vs code에서 react 개발을 위해 확장(Extension)을 설치해보겠다... 2023. 8. 11. Node.js 설치하기 및 version 내리기 Feat.brew 예전에 맥북에서 설치한적이 있는지 생각이 안나서 먼저 node의 버전을 확인해 보았다. 없는걸 확인한 후에 brew install node명령어를 통해 설치를 진행하였다. brew install node 그 이후에 설치된 버전을 확인해 보았다. node -v 확인해 보니 버전이 20.5.1 최신버전이였다. 학원 수업에서는 18.17.1을 사용하기 때문에 버전을 내려줄 필요가 있었다. 버전을 내리기 위해 brew search node를 실행하면 아래와 같은 화면이 출력이 된다. brew search node 여기서 버전을 골라서 설치해주자 brew install node@18 그런 다음 기존에 연결되었던 node의 연결을 끊어준 후 brew unlink node 설치한 18버전의 node를 연결해 준다. .. 2023. 8. 11. Form밖에 있는 Button submit Button으로 써먹기 이미지 업로드 폼 설명 이미지를 drag drop 또는 여기를 클릭하세요 업로드 2023. 7. 4. Vue.js Rendering 렌더링(Rendering)은 데이터를 기반으로 화면에 내용을 표시하는 과정을 말한다. Vue.js에서 렌더링은 Vue 인스턴스에 정의된 데이터와 템플릿을 조합하여 화면에 동적으로 콘텐츠를 생성하는 과정이다. Vue.js의 렌더링은 다음과 같은 단계로 이루어진다. 데이터 : Vue 인스턴스에 정의된 데이터는 애플리케이션의 상태를 나타낸다. 이 데이터는 Vue인스턴스의 'data' 속성에 저장된다. 템플릿 : Vue.js에서는 HTML기반의 템플릿을 사용하여 화면에 표시할 내용을 기술한다. 템플릿은 Vue인스턴스의 "template"속성에 작성된다. 가상DOM(Virtual DOM) : Vue.js는 렌더링 성능을 최적화하기 위해 가상 DOM을 사용한다. 가상DOM은 실제 DOM의 가벼운 복사본으로서, 변경.. 2023. 6. 15. Vue.js의 기본문법 Vue.js의 기본문법을 알아보겠다. Vue.js는 템플릿 문법, 디렉티브, 이벤트 처리 등 다양한 문법을 제공하는데 아직 배운지 얼마 되지도 않았고 어제 사용했던 문법만 간단하게 정리해보겠다. 1. 보간법(Interpolation) 처음 사용했을 때 굉장히 신선했던 부분이였다. 중괄호( {{ ???? }} )를 사용하여 데이터를 템플릿에 보간할 수 있다. {{ message }} var app = new Vue({ el: '#app', data: { message: '안녕하세요!' } }); 위의 예제에서 {{ message }}는 Vue인스턴스의 "message"데이터를 보간하여 화면에 표시한다. 2. 디렉티브(Directives) v-접두사를 가진 특수 속성으로, DOM요소에 특정 동작을 바인딩 할.. 2023. 6. 15. Vue.js Vue.js는 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크이다. 다른 단일형 프레임워크와 달리 Vue는 점진적으로 채택할 수 있도록 설계가 되었다. 핵심 라이브러리는 뷰 레이어만 초점을 맞추어 다른 라이브러리나 기존 프로젝트와의 통합이 매우 쉽다. 그리고 Vue는 현대적 도구 및 지원하는 라이브러리와 함께 사용한다면 정교한 단일 페이지 응용프로그램을 완벽하게 지원할 수 있다. 즉 프론트 엔드 웹 애플리케이션 개발을 위한 JavaScript 프레임 워크로서, 사용자 인터페이스를 구축하기 위한 도구와 패턴을 제공하는 녀석이라 생각하면 좋을 것 같다. Vue는 AngularJS를 사용하여 구글을 위해 작업하던 Evan You에 의해 개발이 되었는데, Angular에 대한 장점만을 가지고 가볍게 만들.. 2023. 6. 15. JAVASCRIPT Const let var const와 let은 JavaScript에서 변수를 선언하는데 사용되는 두 가지 키워드이다. 이 두 키워드는 변수의 범위와 재할당 가능 여부에 차이가 있다. 1. const const로 선언된 변수는 상수(constant)로 간주된다. 즉, 한 번 할당되면 다시 할당할 수 없다. 선언과 동시에 값을 할당해야 한다. const변수는 블록범위(block-scoped)이다. 즉, 중괄호({})내에서 선언된 경우 해당 블록 내에서만 유효하다. 객체나 배열의 경우, const변수는 해당 객체 또는 배열의 내용을 변경할 수 있다. 하지만 다른 객체나 배열로 재할당할 수는 없다. const pi = 3.14; const name = "John"; const arr = [1,2,3]; arr.push(4); //가능 .. 2023. 6. 13. AJAX AJAX는 "Asysnchronous JavaScript and XML"의 약어로, 웹 개발에서 사용되는 중요한 기술이다. AJAX를 사용하면 웹 페이지에서 서버와 비도이적으로 데이터를 교환하고, 페이지를 다시 로드하지 않고도 동적으로 콘텐츠를 업데이트할 수 있다. AJAX는 웹 애플리케이션의 사용자 경험을 향상시키기 위해 개발되었다. 기존의 웹 애플리 케이션은 사용자가 폼을 제출하면 전체 페이지를 다시 로드해야 했지만, AJAX를 사용하면 필요한 데이터만 서버로 보내고, 서버는 그에 대한 응답으로 필요한 데이터만 보내줄 수 있다. 이로 인해 웹 페이지의 응답 속도가 향상되고, 사용자는 페이지의 로딩 없이도 대화형으로 상호작용할 수 있다. AJAX는 JavaScript, XML, HTML, CSS 등 다.. 2023. 6. 8. JAVASCRIPT Backtick JavaScript를 공부하다가 잘 이해가 안가고 왜 쓰이는지 어디에 쓰이는지 고민하다가 깊게 파보았다. backtick ( ` ) JavaScript에서 템플릿 리터럴에 활용되는 문자가 있다. 이것을 억음부호 backtick(이하 백틱)이라고 하는데 ( ' )와 많이 혼동하기 쉽다. JavaScript에서 백틱( ` )을 사용하여 문자열을 표현하는 것을 "템플릿 리터럴" 이라한다. 에 위치해 있으며 이는 기존의 작은따옴표( ' )나 큰따옴표( " ) 대신에 백틱( ` )을 사용하여 문자열을 작성하는 기능이다. 템플릿 리터럴은 여러가지 장점과 유용한 기능을 제공한다. 다중 줄 문자열 백틱을 사용하면 여러 줄에 걸친 문자열을 쉽게 작성할 수 있다. 기존에 역슬래쉬를 사용하여 줄바꿈을 해야 했지만, 백틱을 .. 2023. 6. 1. 이전 1 2 3 다음
