안녕하세요 상훈입니다. Vue.js 3 + Vue Router 를 사용하여 페이지를 넘기고 params에 원하는 값을 전달하는 경우를 포스팅하도록 하겠습니다. 이렇게 컨텐츠 한개가 객체(Object)로 적용하겠습니다. item : { title: 'asdasdasdas', content: 'asgasfasf', date: new Date() } 이런식으로 객체는 구성되어있습니다. string만 데이터를 전달하는것과 거의 동일합니다. 1. 데이터를 전달할 Vue파일 //List.vue {{ index++ }} {{ item.title }} {{ item.date }} title을 클릭하면 item 객체를 전달하는 것으로 선언하였습니다. 저기서 item 객체를 문자화 하였는데요. 이유인즉슨, 파라미터를 넘겨..

FrontEnd/Vue.js 2022. 11. 8. 18:12

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다. 안녕하세요 상훈입니다. 모달팝업을 만드는 방법을 포스팅하려고 합니다. 추가적으로 바깥 영역을 클릭했을 때 모달이 사라지게 하고 싶습니다. 1) Modal Show 버튼을 클릭 시 Modal Popup 출력. 2) 바깥영역, close 버튼을 클릭 시 Modal Popup 숨김. 이 두 가지 동작이 가능하게 하려고합니다. // App.vue > 모달 창을 포함하고 있는 메인 뷰 Modal Show showStatus 라는 ref 를 기본 값으로 false 로 놓고, true가 되었을 때만 팝업이 뜨도록 처리하려고 합니다. 이벤트 핸들러가 호출하는 메서드로 showModal() 과 closeModal() 을 생성하였습니다...

FrontEnd/Vue.js 2022. 10. 29. 00:10

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다. 안녕하세요 상훈입니다. 뷰에서 props를 계속 내려주고 또 내려주고 끝없이 내려주면 정신적으로 피폐해질 수 있습니다. 물론 간단한 토이 프로젝트일 때에는 굳이 Vuex 혹은 Reactive 를 사용할 필요가 없습니다. 그러나 어느 정도 규모가 점점 커질 수록, props를 관리하기가 힘들어지고, 그에 따라 오류가 쉽게 발생하게됩니다. 그 때 필요한것이 Reactive 입니다. Vuex의 기초단계기도 하지요. 1. Reactive.vue 2. component1.vue 3. component2.vue 4. store.js 이렇게 4가지 파일을 준비하겠습니다. (component2 는 값의 변화가 동시에 적용되는지 확인용..

FrontEnd/Vue.js 2022. 10. 27. 23:07

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다. 안녕하세요 상훈입니다. 아주 예전에 이와같은 내용을 작성하긴했었던 것 같은데, 아예 뷰를 안쓰다보니 완전히 까먹어서.. 다시 공부해서 다시 글을 작성하게 되었습니다! 사전지식은 다음과 같습니다. 1. 컴포넌트의 관계를 이해한다. 2. 자식 컴포넌트 → 부모 컴포넌트로 데이터를 전달하고싶다. Vue.js Todolist 를 구현할 때 Add의 한 부분을 담당하고 있습니다. 1. 부모 컴포넌트 Parent Component //부모컴포넌트 : Todo.vue Greeting! 2. 자식 컴포넌트 Child Component //자식 컴포넌트 : TodoInput.vue Add 3. 위 코드를 보고서 이해가 잘 안되셨을 때 ..

FrontEnd/Vue.js 2022. 10. 26. 20:19

안녕하세요, 상훈입니다. 도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다. ReactNative + Expo, 구글 혹은 카카오 로그인을 구현하려고 하는데, 안드로이드 연동을 위해선 sha-1 인증서 디지털 지문 이 필요합니다. 저렇게 SHA-1 인증서 디지털 지문이 필요한데요, 어떻게 하면 얻을 수 있는지 포스팅하도록 하겠습니다. ■ 빌드를 해야한다. 1. 로그인 2. 빌드 3. 빌드 완료 확인, 내용 체크 4. SHA-1 지문 입력 순서로 소개하도록하겠습니다. 1. 로그인 eas 를 전역(-g)으로 설치 npm install -g eas-cli 로그인 eas login 로그인이 되었지만, 혹시 모르니 확인을 한 번 더 해주기. eas whoami 로그인이 정상적으로..

FrontEnd/React.js 2022. 10. 2. 15:25

안녕하세요, 상훈입니다. 리액트 네이티브(React Native)를 통해 expo를 실행할 때 이렇게 오류가 출력되었습니다. No Android connected device found, and no emulators could be started automatically. 안드로이드 디바이스와 연결된 에뮬레이터가 없어서 그렇습니다. 일단 안드로이드 스튜디오를 깔아줍시다. 오류 안내 문구에서 Please connect a device or create an emulator (https://docs.expo.dev/workflow/android-studio-emulator). 이렇게 작성된 내용이 있을 텐데, 해당 링크를 클릭해서 들어가시고, 다운로드 해주세요. 설치 후 안드로이드 스튜디오를 시작하면 아래..

FrontEnd/React.js 2022. 10. 1. 21:53

안녕하세요 상훈입니다! 구글 애드센스가 끊긴지도.... 어언 2주가 되어가네요! 하하 빌어먹게도 멋진 녀석 같으니라고^^7 도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다. 자바스크립트로 데이터를 받아왔는데, 숫자만 출력하고 싶습니다. 어떻게 해야할까요? let str = "안녕하세요1239입니다."; str = replaceAll(/[^0-9]/g, ""); 로 간단하게 처리가 가능합니다. 사용 방법은 아래와 같습니다. str.replaceAll(없애고싶은내용, 바꿀내용); 사용 예시를 작성해보겠습니다! 숫자의 데이터가 필요한 상황인데, 애석하게도 숫자만 온게 아니라 문자가 포함된 문자열로 출력되었다는 가정입니다. function changeLetter (str, s..

FrontEnd/JavaScript 2022. 9. 24. 00:10

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다. 안녕하세요 상훈입니다. json 객체(object) 형태의 문자열을 json 객체화 하려면 간단하게 JSON.parse(str); 하면된다. 추가적으로 배열(Array) 또한 가능하다. (몰랐다) ■ 배경설명 현재 프로젝트가 Web → Native(React Native) → Web 이기 때문에 내 입맛대로 데이터의 형식을 설정할 수 없기 때문에, 배열로 변환하는 방법 또한 알게되었다. ■ 결론 일단 결과부터 말하자면, 방법은 다음과 같다. // 배열 형태의 문자열 // (JSON객체형태가 곧바로 string으로 변환되어나온 형태) let arryStr = "[\"안녕하세요.\",\"안녕히가세요.\"]"; // 문자열 ..

FrontEnd/JavaScript 2022. 8. 24. 20:09