전체 글 (41) 썸네일형 리스트형 리액트를 사용하는 이유 [Today I Learned - React] 리액트를 사용하는 이유?! 리액트를 사용하면 좋은 이유 01. 웹을 APP 처럼 사용할 수 있음 모바일 앱으로 발행이 쉬움 02. 이벤트 업데이트 관리가 쉬움 JS 이벤트 업데이트 방식 JS 로 DOM 에 접근하여 이벤트를 하나하나 핸들링 하려면, 프로젝트 사이즈에 따라 관리하기가 어려워 질 수 있음 이벤트가 많아지면, DOM 이 다양해지고, 업데이트 규칙도 복잡하게 됨 React 이벤트 업데이트 방식 어떠한 상태가 바뀌었을 때 그 상태에 따라 아예 리랜더링 되도록 설계가 되어있음 아예 리랜더링 하면 속도가 느려지지 않나? => Virtual DOM 으로 해결!! 어떻게 업데이트를 할 지에 대한 고민이 필요 없음 Virtual DOM : 가상의 DOM 메모리에 가상을 존재하는 DOM == JS 객체와 같.. [코딩 공부일지] 전역변수 간략 정리 전역변수란? 모든 곳에서 쓸 수 있는 변수! var 나이 = 20; //전역변수 : 제일 바깥에 만들어놓음 window.나이 = 20; //window 로 전역변수 만들기도 가능! (:: 전역변수) //즉, window{} 안에 '나이'라는 키값을 만든 것 function 함수(){ console.log(나이); //20 var 이름 = 'kim' //지역변수 } 함수(); 오늘은 여기까지..!! 현재 코딩 공부일지는 코딩애플 강의를 들으며 공부하는 내용을 작성한 것입니다! 코딩애플 흥해랏 [코딩 공부일지] 변수, 함수 호이스팅 간단 정리 자바스크립트 언어를 사용하면서 "호이스팅"이라는 단어 많이 들어보셨을 거에요 자바스크립트를 이해하는데 있어서 참 중요한 호이스팅!!! 오늘 한번 정리해볼게요!! 그럼 Let's Start!! 호이스팅이란? 변수나 함수를 생성할 때 자동적으로 선언한 부분을 페이지 맨 위로 올려버리는 현상을 말함 01. 변수의 호이스팅 console.log(나이) //undefined (= 변수 선언만하고 할당을 안했을때 발생) var 나이 = 30; console.log(나이) //30 var 나이 = 30; 이라고 선언을 했을 때, 자바스크립트는 자동적으로 "var 나이", 즉 변수 선언한 부분을 무조건 페이지 맨 위로 올려버림 그리고 나이 = 30; 은 변수를 선언한 위치에 그대로 존재함 이런식으로 자바스크립트는 변수.. [코딩 공부일지] 변수 var / let / const 차이점 간단 정리 휴.. 요즘 체력을 키우려 헬스를 빡시게 했더니 거의 2주간 앓아 누웠다가 다시 공부시작합니당 오늘은 변수 공부한 것 정리하려 해요! 각 변수들의 특징 01. var var : 재선언 가능 var 이름 = 'kim'; console.log(이름) //kim var 이름 = 'park'; console.log(이름) //park var : 재할당 가능 var 이름 = 'kim'; console.log(이름) //kim 이름 = 'park'; console.log(이름) //park var : 존재 범위는 function function 함수(){ var 이름 = 'kim' console.log(이름) //kim } console.log(이름) //undefined 출력 02. let let : 재선언 불가.. [코딩 공부일지] 시작해봅니다 - this 그날 그날 공부했던 것들을 조금 더 오래 기억하기 위해 코딩공부 일지라는 것을 한번 끄적여 볼까 합니다. 뭐..정성스레 기록할 생각은 없구요..(귀찮) 😒 그냥 이 날 이거 공부했었지 정도로 저 만을 위한 그런...어떠한...일지랄까? 그래서 오늘은.....!! 두구두구 자바스크립트에서 그렇게 자주 사용한다는 " this " 두둥 this 라는 가까우면서 먼듯한...이 아리까리한 녀석이 어디서 사용하느냐에 따라 가리키는 대상이 다르더라구요 1. 그냥 console.log(this) 나 그냥 함수 안에 사용하면 window{}, 즉 윈도우 오브젝트를 가리킵니다. * 윈도우 오브젝트 모든 전역변수, 함수, DOM을 보관하고 관리하는 전역객체를 의미 document.getElementById(), alert(.. [vue3] v-for 를 정복해버렸다...!!!!! 뷰 새내기 윤쮼입니다!!!! 뷰의 기초 중의 기초 v-for 시간도 없는데 오늘 정복해버릴까합니다. 그래서 예시를 들고왔어요!!! 첫번째 예시!! 데이터이름 : 과일들 데이터 내용 : 사과, 딸기, 바나나 과일들 : [사과, 딸기, 바나나] 이거를 v-for 로 뿌려줄 거에요! {{과일}} 자 위에 코드에서 "과일들"(즉 데이터이름) 에서 각각의 "과일"(데이터내용 - 네이밍은 마음대로 가능)을 빼내온다고 생각하면 되요. :key="과일"은 안쓰면 오류나니까 써야합니다. (공식페이지에서 하래요....) "과일 in 과일들" 에서의 과일과 :key="과일" 에서 과일은 같은 값을 가리킵니다. 출력하면 사과, 딸기, 바나나 이렇게 같죠. 두번째 예시!! 데이터이름 : 음식들 데이터 내용 : 짜파게티, 유부초.. Vue 프로젝트를 시작하자! [시작부터 오류발생...... 해결방법은!!!?] 계획만 해서는 안된다! 일단 시작을 하자! 작업 운영체제는 윈도우 (Window) npm 설치 시 맥에 비해서 오류가 많이 난다고 하는데.. 조금 걱정이 된다! 그래도 도--전!!!!!!! Vue3 프로젝트 시작 순서! 1. 프로젝트 폴더 아무 곳에나 생성 2. Vscode 에서 오픈 폴더 => 생성한 폴더 불러오기 3. 터미널에 npm install -g @vue/cli 입력!!! 후후....아니나 다를까 바ㅡ로 오류 발생!!!! ("허가되지 않은 스크립트 어쩌구 저쩌구") ㅡ.ㅡ 해결 방법 ???? 윈도우 검색메뉴(돋보기) 에서 Powershell을 검색하면 "Windows Powershell" 이 뜨는데 여기 우클릭을 해서 관리자 권한으로 실행!! 그리고 Set-ExecutionPolicy Unre.. [Vue3] 버튼 클릭 시 입력한 값 : data 값에 등록 만들고 싶은 것 값을 입력하고 클릭하면 출력되게 만들기 1. 인풋에 입력한 값 저장하기 2. 클릭하면 저장한 인풋 값을 데이터에 등록 3. 등록된 데이터 값 보여주기 Html type your list click {{text}} 1. @change="input" : input값이 변경되면 data에 업데이트 되도록 해야함 2. @click="click" : 버튼을 누르면 업데이트된 data값이 {{ text }} 에 출력되도록 만들기 Javascript const app = Vue.createApp({ data(){ return { text : '', //출력될 값 inputText : '' //input값 } }, methods:{ input(e){ return this.inputText = e.tar.. 이전 1 2 3 4 5 6 다음
