본문 바로가기

728x90

전체 글

(47)
요소의 택스트가 머스태치(Mustache)만 있을 때 v-text를 사용해보자! 통상 {{someText}} v-text을 사용할 경우 같은 결과를 얻을 수 있다. URL:https://ja.vuejs.org/api/built-in-directives.html ビルトインのディレクティブ | Vue.js ja.vuejs.org
내가 고른 값이 배열 안에 존재하는 지 확인하는 방법, 존재하면 그 값을 리턴 자바스크립트를 공부하는 중에, 많이 쓰일 것 같아서 정리해 놓으려고 합니다. 많은 분들에게도 참고가 되셨으면 좋겠습니다. 바로 들어갑니다. 배열이 존재합니다. arr = [1,2,3,4,5,10,23,30,40] 내가 고른 값이 이 배열에 있는 지 확인하고 싶습니다. 예를 들어 내가 선택한 값이 11 이라면 (물론 한 눈에 보기에도 존재하지 않지만 함수로 정리 해 봅시다) (급하신 분은 맨 밑에 식만 정리 해 놓았으니, 그곳을 참고해주십쇼) 첫번째 방법 for문을 이용하여 찾는 방법 1. 함수를 정의합니다. function checkArray () { // TODO } 2. 대상 배열을 첫번째 매개변수에 지정하고, javascript의 for문을 이용하여 배열 arr을 순회합니다. function che..
[CSS]text-transform이란, css 를 공부하다 보니 새로운 것들을 사용하게 되네요. 이번에는 text-transform 이란 요소에 대해 배워봅니다. text-transform이란 영문자의 대문자, 소문자 표시를 설정하는 요소입니다. 1. capitalize 각 단어의 앞글자만 대문자로 변환 2. uppercase 전부 대문자로 변환됩 3. lowercase 전부 소문자로 변환
[CSS]vw, vh, vmin, vmax의 사용방법 css를 사용하다보면 단위로 px, % 를, 폰트 기준으로는 em, rem을 주로 사용하곤 하는데 반응형 디자인이 보편화 되면서 vw, vh, vmin, vmax의 사용이 늘어나게 되었습니다. 이번에는 이 단위들에 대해서 알아보겠습니다. vw, vh란 vw, vh는 뷰포트 크기를 기준으로 하는 단위입니다. 뷰포트 란, 표시 중인 브라우저 창의 너비를 의미합니다. 컴퓨터나 스마트폰 화면의 크기가 아니라 웹 사이트를 렌더링하는 브라우저 창의 크기입니다. 위의 사진처럼 뷰포트의 가로 비율을 기반으로 하는 단위가 vw 뷰포트의 세로 비율을 기반으로 하는 단위가 vh 입니다 실제예시 // html 100vw 100vh 10vw 10vh // css body { position: relative; font-size..
CSS에서 변수 사용하기 Sass없이도 변수를 사용할 수 있다는 것을 알게 되어 그 방법에 대해서 적어봅니다. 변수 정의 간단합니다. 하이픈(-) 두개를 적어주고 그 옆에는 변수명(white): 할당하고싶은값(#fff)을 적어주면 됩니다. :root { --white: #fff } 여기서 :root라는 것은 전역 변수입니다. 전역변수란 선언함으로써 모든 곳에서 사용할 수 있는 변수를 의미합니다. 변수로 색상 말고도 다른 값들도 지정할 수 있습니다. :root { --main-color: #2980b9; --red: red; --light-color: #777; --light-bg: #eee; --black: #2c3e50; --white: #fff; --box-shadow: 0 0.5rem 1rem reba(0,0,0,0.1);..
NPM 과 NPX 무엇이 다른가? 자주 사용하는 용어인데, 이제와서 새삼 이 차이에 대해 공부를 해 봤습니다. 두 명령어는 비슷하지만 역할이 명확하게 다른 명령어 라고 하네요. 무엇이 다른지 같이 공부 해 봅시다. ※npx는 npm의 버전 7.x부터 npm exec의 일부로 포함되었습니다. NPM(NodePackageManager)은 Node 패키지를 관리하는 명령어 NPX(NodePackageExecuter)는 Node 패키지를 실행하는 명령어 NPM 은 Node.js의 기본 패키지 관리 도구입니다. npm 명령어를 사용하여 인터넷 상의 리포지토리에서 Node 패키지를 설치하거나 패키지의 버전 관리를하는 것이 주요 책임입니다. NPX 는 Node.js의 패키지 러너 입니다. 버전 5.2부터 기본 설치됩니다. npx 명령어를 사용하여 N..
자바스크립트 Array 파괴적 비파괴적 메서드 메서드 들에 자세한 내용은 따로 정리예정이고 우선 이 글에서는 배열의 파괴적 메서드, 비파괴적 메서드에는 무엇이 있는지 나누어 보겠습니다. 파괴적, 비파괴적 메서드란 ? JavaScript의 배열 메서드에는 파괴적인 메서드와 비파괴적인 메서드가 있습니다. 둘의 차이는 원래의 배열에 변경을 가하는지 여부입니다. 파괴적인 메서드는 원래의 배열을 변경합니다. 이러한 메서드를 사용하면 배열의 요소가 추가, 삭제 또는 변경되어 배열의 상태가 변합니다. 비파괴적인 메서드는 원래의 배열을 변경하지 않습니다. 이러한 메서드를 사용하면 원래 배열의 상태는 그대로 유지됩니다. 대신 새로운 배열이 생성되거나 특정 값이 반환됩니다. 파괴적인 메서드와 비파괴적인 메서드를 적절히 구분하여 배열 조작을 효과적으로 수행할 수 있습니..
자바스크립트에서 Ajax 사용 기본 Ajax란? Ajax(Asynchronous JavaScript + XML)은 브라우저에서 페이지의 내용을 업데이트하기 위해 비동기 통신을 이용하는 기술을 의미하는 약어입니다. 비동기 통신이란? 비동기 통신은 요청을 보내고 데이터가 반환될 때까지 브라우저에서 처리하고 업데이트할 부분만 요청하여 처리하는 통신을 의미합니다. 클라이언트 측에서 작동하는 JavaScript가 직접 서버와 통신하여 가져온 데이터를 기반으로 HTML 파일을 업데이트하는 방식입니다. 일반적인 통신에서는 클라이언트에서 서버에 요청(Request)을 보내고 데이터(HTML 파일 등)가 반환되면 응답(Response)이 반영됩니다. 따라서 응답이 반환될 때까지 조작이 불가능해집니다. 비동기 통신의 경우 응답을 기다리지 않고 다음 조작으로..

728x90