공밀레 님의 블로그

-테이블로 표현해 둔 목록에 있는 열의 수정을 선택하면 해당 부분의 데이터 값을 모달로 가져오는 기능이 필요하다. -수정을 눌렀을 경우의 함수에 다음을 추가한다. 이때 정보는 MainView.js에서 export default의 data()항목에 배열로 정의가 되어 있다.data(){ return { todoList: [ { id: 1, content: '테스트', manager: '김길동', status: '완료', dueDate: '2025-01-05', createdAt: '2025-01-02' }, { id: 2, content: '예제', manager: '이영희', status: '미완료', dueDate: ..

-참고문서 https://icehaunter.github.io/vue3-datepicker/ Introduction | Vue 3 DatepickerMonTueWedThuFriSatSun 2930310102030405060708091011121314151617181920212223242526272829300102icehaunter.github.ioimport { createApp } from 'vue'import App from './App.vue'import router from './router'import VueDatePicker from 'vue3-datepicker';const app = createApp(App);app.component('VueDatePicker', VueDatePicker)..

-버튼을 눌렀을 때 페이지가 이동되거나 팝업창이 뜨는 게 아닌 배경이 어두워지고 창이 하나 띄워지는 걸 본 적 있을 것이다. 그것이 vue에서는 modal모달이라 부른다. -등록 페이지를 이 모달을 이용해서 표출하기로 했다. 그런데 vue가 처음이기도 하고 지금 그냥 필요한 기능을 맨땅에 헤딩을 하면서 만드는 중이라 이해하는데 시간이 좀 오래 걸렸다. -먼저 모달을 띄울 기본 페이지를 만든다. 이 파일 명을 ModalView.vue라고 지정했다.  -overlay 클래스는 뒤에 오퍼시티 50퍼센트로 깔리는 그 까만 배경을 위해서 만들었다. 해당 부분을 누르면 꺼지도록 이벤트도 추가한다. -modal 클래스가 일종의 백..

-프로젝트 작성 중 어떠한 원리로 현재 메인 화면으로 잡고 있는 MainView.vue가 보여지는 건지 확인하고 싶었다. -main.js의 경우 다음과 같이 되어 있다.import { createApp } from 'vue'import App from './App.vue'import router from './router'createApp(App).use(router).mount('#app') router 를 이용해 App.vue를 이용해 앱을 생성한다는 거다. 그럼 App.vue에서 어떻게 부르는가.  원래 예시 코드라면 nav 태그가 있고 아래에는 하드코딩 style가 있다. 일단 나는 css를 파일로 따로 빼기 때문에 아래 처럼 import하는 식으로 변경했다. 그럼 여기서 부르는 건 무엇인가? ..

-node js가 설치가 되어 있어야지 vue js 설치가 가능하다. -vscode의 터미널을 오픈하여 npm install -g @vue/cli 입력 -얌전히 대기. 완료 문구 이후 vue create [프로젝트명] 입력. 그럼 프리셋을 선택하라고 뜬다. default 에서 선택. 나는 vue3부분을 선택해서 설치했다. 화살표로 이동하고 엔터를 누르면 선택된다. 다시 대기하면 프로젝트 생성이 완료된다.   - Vue의 경우 라우터를 따로 설치해 줘야 한다고 한다. 싱글 페이지 어플리케이션 제작 시 필수 항목이라는 듯 하다.  npm install vue-router@4 혹은 npm install vue-router 혹은 npm install vue-router@next --save 를 터미널에 입력한다..

-기능글 목록 보기(리스트)글/댓글 보기글/댓글 작성 -필수 컴포넌트react-router-dom : 모든 리액트 앱에 필수적으로 들어가는 컴포넌트styled-components : 스타일 컴포넌트.하지만 나는 스타일 컴포넌트를 쓰지 않고 따로 css 파일을 만들어서 적용하기로 했다. -만들던 중 알게 된 수업 외 정보보면 알다시피 각 jsx보다 상위에 MainStyle.css가 있다.이 부분을 jsx에 적용을 하려면 상위로 올라가서 불러와야 하는데 나는 처음엔 ../MainStyle.css인줄 알았다.src까지 올라가서 다시 내려오는 건 ../../MainStyle.css 였다. 즉 ../를 두번 써야 한다. -결과  -빌드터미널에 npm run build  명령어를 입력하면 빌드가 된다.이후 서브를 ..

-styled-componentscss 문법을 그대로 사용하면서 결과물을 스타일링된 컴포넌트 형태로 만들어 주는 오픈소스 라이브러리 -template literal 역따옴표``를 이용해 문자열을 작성하고 그 안에 대체 가능한 익스프레션을 넣는 것.//untagged template literal`string text``string text string text2` `text ${expression} show` //tagged template literal myFunction`text ${expression} show`;예시-template literal 문법const name='이름';const region='서울';function myTagFunction(strings, nameExp, regionE..

-context?리액트 컴포넌트들 사이에서 데이터를 기존의 프롭을 통해 전달하는 방식 대신 컴포넌트 트리를 통해 곧바로 전달하는 새로운 방식.ex)로그인 여부, 정보, UI테마, 현재 언어 등등function App(props){ return ;}function Toolbar(props){ //이 컴포넌트는 ThemedBytton에 theme를 넘겨주기 위해서 'theme' prop을 가져야만 한다. //현재 테마를 알아야 하는 모든 버튼에 대해서 props로 전달하는 것은 괸장히 비효율적이다. return ( );}function ThemedButton(props) { return ;}예시 - context 사용을 안한 상태 const ThemeC..

-Composition?여러개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것 = 합성 - Composition 사용 방법1.Contatinment 하위 컴포넌트를 포함하는 합성 방법. Children prop을 사용해서 조합한다.function FancyBorder(props){ return ( {props.children} );}function WelcomeDialog(props){ return ( 어서오세요 사이트 방문을 환영합니다 );}예시 - WelcomeDialog함수 안 FancyBorder 태그 안에 있는 h1,p 태그가 FancyBorder..

여러개의 컴포넌트에서 한 state를 공유 하는 것 -shared state하위 컴포넌트가 공통된 부모 컴포넌트의 state를 공유하여 사용하는 것 function BoilingVerdict(props){ if(props.celsius >= 100){ return 물이 끓습니다. } return 물이 끓지 않습니다.}예시 - 자식 컴포넌트 function Calculator(props){ const [temperature, setTemperature] = useSate(''); const handleChange = (event) => { setTemperature(event.target.value); } return( 섭씨 온..