🚀 Axios란? JavaScript Application에서 Server 즉, Back End와의 통신을 하기 위한 HTTP Library가 바로 Axios라는 친구에요. 이 친구는 Vue.js에 종속된 것이 아니라 다른 JavaScript Application 즉, React.js 등에도 이용할 수 있는 것이에요. Web이나, App을 개발하다 보면 우리는 Data를 저장하고, 불러오기 위해 Back End Server를 구축하고 이용해야 하는 것이에요. Axios는 Promise 기반의 JavaScript 비동기 처리 방식을 이용하는 것이에요. 그렇기 때문에 Request를 보낸 뒤 .then()을 이용해서 결과값을 받아 처리하는 형식으로 구성이 되어 있답니다. axios.get('/api/data..

⚠️ 문제 발생! 분명 위와 같이 열심히 코딩을 해 두었는데, Contents 부에 그 어떤 화면도 보이지 않는 문제가 발생한 것이에요. 🤔 원인 분석 이 문제에 대해 곰곰히 생각을 해보니 App.vue에 아래 그림과 같이 router를 통해서 Contents 부를 Re Rendering을 하는데, DevInquryList.vue는 Router에 대한 특별한 설정을 한 기억이 없는 것이에요. 역시 이것이 문제 였던 것이에요! 이건 구글링 하지도 않고 찾았네요! 👍👍👍 🍻 문제 해결! 위와 같이 화면이 출력이 되는 것을 볼 수 있는 것이에요. 보이는 게 약간 엉성해 보이는 것은 Back End 서버가 꺼져 있어서 Data Bindding을 못하기 때문이에요.

🚀 Html Tag 정리 🔽 Block Level Element(블록 레벨 요소)와 Inline Level Element(인라인 레벨 요소) Box Model은 블록 레벨 요소인지 인라인 레벨 요소인지에 따라 나열 방법이 달라져 버리는 것이에요.그렇기 때문에 먼저 블록 레벨 요소와 인라인 레벨 요소에 대해 공부할 필요가 있는 것이에요. 블록 레벨 요소는 태그를 사용해 요소를 삽입 했을 때, 혼자 한 줄(한 행)을 차지하는 요소인 것이에요. 한 줄을 차지한다는 것은 해당 요소의 너비가 100%라는 것이에요. 따라서 그 요소의 왼쪽이나, 오른쪽에 다른 요소가 올 수 없는 것이에요. 너비나 마진, 패딩 등을 이용해 크기나 위치를 지정하려면 블록 레벨 요소여야 하는 것이에요. 대표적인 태그로는 , 태그가 있는 ..

🚀 CSS 기본 정리 위의 내용 중 position, display, width, height, overflow는 '이 곳'에 예쁘게 정리 해 둔 것이에요. 🔽 background 이름이 아주 직관적이에요. 바로 배경색을 의미하고, 값은 color 속성 포맷을 이용하는 것이에요. Tag의 크기가 없을 경우 배경색이 표시되지 않는 다는 것은 참고해야 될 사항인 것이에요. 예시 코드 상자상자상자1 상자상자2 상자상자 출력 결과 주니하랑은 해당 배경 색상을 16진수 표기법으로 이렇게 준 것이에요. 그런 뒤 준비 해 둔 사진을 넣어 주고, no-repeat 속성을 주었는데, background-image로 컨테이너 보다 작은 이미지를 적용하면 이미지가 반복되어 출력할 수 있게 해주는 것이에요. 이 때, `bac..

🚀 Color 속성 color 속성은 단어 뜻대로 색상, 정확히는 글자의 색상을 의미하는 것이에요. `red`, `blue` 등 이미 정의된 색 `#000`, `#FFFFFF` 등의 16진수 색상 코드 `rgb(255, 255, 255)` 등의 rgb 형 색상 `rgba(200, 100, 150, 0, 5)` 등의 투명도(Alpah)가 적용된 rgba 형 색상 color 속성은 위 목록 등의 값을 이용할 수 있고, 기본값은 `inherit`으로 부모의 색상을 가져오는 것이에요. 🔽 예시 Code text1 text2 text3 text4 출력 결과 참고 자료 : https://ofcourse.kr/css-course/color-%EC%86%8D%EC%84%B1 CSS color 속성 - ofcourse..

🚀 CSS 기본 정리 🔽 Tag 속성 ID, Class 먼저 319 번째 줄을 알아보자면 위에 div tag에 id값으로 contentWrap을 준 것이에요. Tag에 id로 이름을 주었다면 `#`을 앞에 붙여 사용하고, 원칙적으로 하나의 객체에만 적용할 수 있는 것이에요. #아이디{ 속성1:속성값; 속성2:속성값; } 참고 자료 : https://ofcourse.kr/css-course/id-class-%EC%84%A0%ED%83%9D%EC%9E%90 만약 id가 아닌 class로 이름을 주었다면 앞에 `#`이 아닌 `.`을 붙여 사용하며, 여러 객체에 사용을 할 수 있는 것이에요. .클래스명{ 속성1:속성값; 속성2:속성값 } 참고 자료 : https://ofcourse.kr/css-course/id..