DalpangLOG

프론트 페이지는 index.js 파일로부터 로딩 되기 시작한다.React 프로젝트의 경우, index.html 파일에서, 리액트 파일 확장자인 jsx로 만들어진 index.jsx 파일을 임포트 하며 시작된다.Index.jsx 파일은 웹 어플리케이션을 export 하고있는 App.jsx 파일을 import 하고 있다.Index.jsx 파일이 앱의 진입점.  개발자가 추가하는 커스텀 컴포넌트는 결과적으로 html 태그로 변환되어 사용된다.때문에, 커스텀 컴포넌트를 만들어서 사용할때는 이름 충돌이 일어나지 않도록, Uppercase로 시작하도록 해야한다.Props리액트 함수에서는 하나의 prop만 받으며 일반적으로 props라는 명칭으로 사용한다.단, 하나의 값만 받을수 있는게 아니라 prop이라는 객체로 ..

Programming/FrontEnd 2024. 12. 17. 02:41

VUE 환경변수에 대해 간단하게 알아보기Note that only NODE_ENV, BASE_URL, and variables that start with VUE_APP_ will be statically embedded into the client bundle with webpack.DefinePlugin. It is to avoid accidentally exposing a private key on the machine that could have the same name.(출처 : https://cli.vuejs.org/guide/mode-and-env.html#environment-variables)Vue에서 환경변수는 'NODE_ENV', 'BASE_URL', 'VUE_APP_' 으로 시작하는..

Programming/FrontEnd 2024. 4. 28. 16:21

목차 1) Teleport 기능 2) Composition API 1) Teleport 기능 react의 portal과 비슷한 기능. child component를 teleport 태그로 감싸, 어떤 태그(css 셀렉터)안에 렌더링 될지 정할 수 있다. 기존 vue2에서 부모 컴포넌트 내부에 어느 위치에 컴포넌트를 놓았는지에 따라 그 위치에 바로 적용 되었었지만, teleport기능을 사용하면, 실제 자식 컴포넌트를 부모컴포넌트 파일 내 어디에 놓던지 크게 상관없게 됨. => 이로 인해 nested 되어 생성되던 기존 자식 컴포넌트 렌더링 방식 보다, 좀 더 semantic 하게 코드를 짤 수 있다고 한다. 고로, multiple root component를 내부에 추가할 수 있게 되었다. 2) Comp..

Programming/FrontEnd 2024. 1. 28. 17:19

Vue 2 to Vue 3 migration 정리 더보기 주요 변경사항. - Vue Instances/apps, Router, Vuex의 생성을 각각 : createApp(), createRouter(), createStore()으로 하게 됨 - data를 method안에 작성한다. directives & third-party 모듈을 "App"안에 작성한다, 기존에는 global object안에 작성함. 새로 추가된 사항. teleport component fragments (Optional) composition API - watch, computed 대신 사용 가능. Better Typescript 목차 1) App.vue의 'el'이 사라지고 mount를 사용 2) Data를 Object가 아닌 M..

Programming/FrontEnd 2024. 1. 28. 15:22

Vue 기능 관련 검색을 하다가 한국 커뮤니티 사이트를 찾았는데 (https://vuejs-kr.github.io/meetup/#/) 현재는 활동하지 않는 것 같다. 둘러보던 중 Vue Playground를 찾게 되서 시간 있는 김에 간단한 실습을 해봄! 일반적으로 처음에 많이 하는 게시판이지만, 사실 게시판도 아니고 그냥 데이터 입력, 삭제만 구현함. 생각보다 실습하기 쾌적하게 되어있어서 좋았다. Vue SFC Playground : https://play.vuejs.org/Vue SFC Playgroundplay.vuejs.org {{ msg }} register {{ content }} del 짧은 시간동안 뚝딱뚝딱 만든 코드라 조잡할순있지만 실무 코드 보다가 이걸 만드니까 머리도 가벼워지고 재밌당..

Programming/FrontEnd 2024. 1. 10. 16:20

Vuex 부모 컴포넌트와 자식 컴포넌트 관계가 복잡해지면, 서로 상태 관리가 어려워진다. Vuex에서 제공하는 Store에 데이터를 저장하고 있어 App을 통해서가 아니라 store를 통해 바로 데이터를 가져와 사용할 수 있다. 부모 자식 컴포넌트가 간단하게 작성되어 있는 경우 Vuex를 사용하지 않아도 된다. 만약 프로젝트 크기가 커져서 관계가 복잡하게 얽혀 있는 경우 사용하는 걸 권장. npm i vuex를 커맨드를 통해 vuex설치. npm i vuex 위 커맨드로 vuex설치시, 자동으로 4점대 버전의 vuex가 설치됨. 현재 vue프로젝트가 vue2로 작성되어 vuex 4점대 버전이 설치 불가한 이슈가 있었음. npm i vuex@3.6.2 위 커맨드로 3.6.2버전 설치 시도 시 제대로 동작!..

Programming/FrontEnd 2023. 1. 6. 18:14

Slot 슬롯 - 부모 컴포넌트에서 태그로 작성한 부분을 자식 컴포넌트에서 값을 지정가능. Slot을 이용해, 값을 출력해줄 위치를 미리 지정가능. 자식 컴포넌트에서 태그를 사용해 위치를 지정한 후, 부모 컴포넌트에서 값을 전달받아 자식 컴포넌트에서 해당 값을 렌더링해 표출해 준다. 'v-slot: default'를 '#default'로 줄여 쓸 수 있다. 자식 컴포넌트에서 데이터를 전달받아 부모 컴포넌트에서 값을 출력하고 싶은 경우, 자식컴포넌트에서 다음과 같이 데이터를 보내준다. slot name="header" :slotval="slotval"> 부모 컴포넌트 뷰 파일에서는 다음과 같이 전달받아 출력해주면 됨! header111 {{ props.slotval }} LifeCycle Hooks Vue..

Programming/FrontEnd 2023. 1. 6. 10:48

Vue CLI로 뷰 설치하기 Vue CLI : Vue Command Line Interface. Terminal에서 Vue 설치, 실행을 할 수 있게 하는 툴. 터미널에서 사용하는 뷰 설치 커맨드. npm install -g @vue/cli '-g'를 통해 설치해야 전역으로 설치된다. 어느 폴더에서 실행하더라도 vue가 작동되게 하려면 전역 설치 필요. 설치 후, vue 프로젝트 생성 커맨드. vue create '프로젝트명' vue create 이후 프로젝트 폴더에 들어가면 다음의 폴더, 파일들이 생성된 것 확인가능. 프로젝트 내 자동 생성된 폴더, 파일 설명. - node_modules : vue.js가 사용하는 npm 패키지들. - configuration files. - package.json :..

Programming/FrontEnd 2023. 1. 5. 17:59

https://www.youtube.com/watch?v=LoxRqagf3k4&list=PLB7CpjPWqHOtYP7P_0Ls9XNed0NLvmkAh&index=11 vue 기초 익히기 11강 ~ 20강 여러 개의 Vue 인스턴스 사용하기 와 같이 id가 app이 아닌 다른 태그에서도 뷰 기능을 사용하기 위해서는 => id값을 다르게 작성해 주고, script태그 내에 새로운 new Vue생성, 앞서 정한 새로운 id값으로 el값을 정해주기. {{ name }} Click {{ name }} Click Vue Component :뷰 인스턴스. 전역, 지역으로 생성가능. 전역 컴포넌트 Vue.component('my-component', { //options }) Vue 인스턴스 생성되기 전, 스크립트 상..

Programming/FrontEnd 2023. 1. 4. 15:56

뷰js 기초 익히기 1~10강 내용 Vue2 CDN 링크 v-bind => 스크립트 태그 내에서 작성한 데이터나 메소드 등을 HTML태그에 연결할때 'v-bind:'를 사용. 콜론(':')만 단독으로 사용해도 동일한 역할을 한다. ... {{ nextYear('안녕하세요') }} 링크이름 ... Event example1) {{ year }} 더하기 빼기 example2) Submit ※ Computed 속성과 Method 속성 차이? ※ methods를 사용해서 똑같은 동작을 하게 할 수도 있다. ( 단, methods 함수로 사용할 경우 '함수명()'형태로 사용할것. ) computed 함수는 변수를 사용하듯이 함수명만 쓰면 실행 가능. 사실상 실행 결과는 동일해 보임. 그렇다면 차이점은? compu..

Programming/FrontEnd 2023. 1. 3. 19:26

Computed Properties. 코드의 재사용성을 높이기 위해 Computed Properties를 사용 할 수 있는데, 여기서 Computed Properties는 바로 컴퓨터가 우리 대신 연산을 해서 값을 리턴해주는것을 뜻한다. 예제를 보자. computed Properties를 사용하지 않을 경우. - index.html ... {{ brand + ' ' + product }} ... - Main.js const app = Vue.createApp ({ data(){ return { cart:0, product: 'Socks', brand:'Vue Mastery', ... } } }) 위와 같이 코드를 작성했을 경우 h2태그 내에 우리가 지정해준 뷰앱 속성값이 치환되어 웹페이지에 출력되게 된다..

Programming/FrontEnd 2022. 11. 10. 16:05

지난 시간 green, blue로 출력된 글 자위에 mouseover 하면 해당 색상의 이미지가 출력되는 것을 확인했다. 이번 시간에는 이 글자 대신 실제 색상이 출력되게끔 코드를 변경할 것. 전 {{ variant.color }} 후 위의 html파일에서 연결해준 class="color-circle"은 css파일의 다음 코드와 html 파일을 연결해준다. css 파일 확인하기. .color-circle { width: 50px; height: 50px; margin-top: 8px; border: 2px solid #d8d8d8; border-radius: 50%; } 실제 실행시 다음과 같이 작동. VUE 스타일 바인딩 사용하기 index.html HTML 파일에서 아래와 같이 css 스타일 바인딩을..

Programming/FrontEnd 2022. 10. 15. 02:04

이번 튜토리얼을 끝내면 다음과 같이 이벤트를 처리할 수 있는 버튼을 생성할 수 있다. 깃헙에서 L6-start 브랜치를 체크아웃하면 index.html 파일에서 다음 코드를 확인할 수 있다. Cart({{ cart }}) ... Add to Cart index.html 파일의 cart변수는 main.js의 cart 속성을 출력하게 된다. 소스코드에는 app이 return하는 객체 내부에 cart 속성으로 지정되어 있음. 이벤트 리스닝 속성 추가 button 태그가 이벤트를 인식할 수 있도록 하기 위해 vue는 v-on속성을 제공한다. 위의 사진을 보면, v-on속성 뒤에 ':'콜론과 함께 어떤 이벤트를 리스닝해야 하는지 지정해주고, 그 값으로 어떤 행위가 수행되어야 하는지 지정해 줄 수 있다. 하지만 보..

Programming/FrontEnd 2022. 10. 13. 04:11

Vue를 사용하여 리스트에 접근하기 위해서는 v-for 옵션을 사용하게 된다. main.js 파일의 소스코드를 보면, details라는 리스트를 생성해놨다. const app = Vue.createApp({ data() { return { product: 'Socks', image: './assets/images/socks_blue.jpg', inStock: true, details: ['50% cotton', '30% wool', '20% polyester'] } } }) 이 리스트 내부 요소를 출력하기 위해 html파일 ul, li 태그에 v-for 옵션을 추가해 다음의 라인을 추가하면, 바로 밑의 실행 사진과 같이 for 루프를 돌면서 내부 요소를 출력해준다. {{ detail }} v-for에 옵..

Programming/FrontEnd 2022. 10. 13. 03:10

Vue.js의 조건문 상품 상세 정보를 출력하려 한다. 조건문을 사용해 만약 제품의 재고가 있다면 "In Stock"을 출력하고, 재고가 없다면 "Out of Stock"을 출력하게 할 것. v-if & v-else js파일에 instock이라는 속성을 불린 값 true와 함께 추가해주고, html 파일에 v-if, v-else 즉, vue 조건문을 추가해줬다. Tips! v-if문을 사용할 때, 꼭 v-else문과 함께 짝을 지을 필요는 없다. 만약 if문 하나만 필요하다면 하나만 사용 가능! v-show v-show는 v-if문과 비슷하지만, 스위치처럼 토글 방식으로 작동하는 조건문이다. true인 경우 출력되고 아닌 경우 해당 태그의 style이 display:none 되어 안 보이게 처리된다. 더..

Programming/FrontEnd 2022. 9. 29. 13:14

튜토리얼 3번째 강의 - Attribute Binding [강의 목표] 이미지 표시하기 작업 Branch 변경하기 해당 튜토리얼에 사용될 코드를 가져오기 위해, vs code 터미널을 켜고 다음의 커맨드를 실행했다. git checkout --track origin/L3-start 이 커맨드를 쪼개 보면 git checkout은 브랜치 변경을 위한 것, --track 옵션을 통해 로컬에 자동으로 해당 이름의 브랜치를 생성하고 origin 은 원격에 있는 브랜치를 의미 L3-start는 리포지토리 fork시에 함께 포크 된 여러 브랜 치중 L3-start라는 이름의 브랜치를 선택하겠다는 의미. 더보기 [참고] https://dev-su.tistory.com/83 브랜치 변경 후 index.html 파일을 ..

Programming/FrontEnd 2022. 9. 29. 12:47