티스토리

더나은세상을위해

검색하기

블로그 홈

더나은세상을위해

lion284.tistory.com/m

행복주의자 님의 블로그입니다.

구독자: 1

방명록 방문하기

주요 글 목록

데스크탑, 태블릿, 모바일 사이즈 모바일 : ~767px태블릿 : 768~1023px데스크탑 : 1024px~ 공감수 0 댓글수 0 2024. 11. 27.
[JS] 배열 비우기(빈 배열로 만들기, 초기화) 방법 예전에 사수가 코드리뷰를 하시면서 이런 말씀을 하셨다.'빈 배열을 만드는 방법 중, 배열의 길이를 0으로 만드는 것과 빈 배열을 할당하는 게 같아 보이지만 차이가 있다.'처음에는 무슨 말인지 이해를 못해 찾아보았고, 찾아본걸 바탕으로 정리하려고 한다. 배열이 선언 & 할당되어 있을 때,배열을 초기화(빈 배열로 만들기)하는 방법은 여러가지가 있겠지만 크게 세 가지로 정리해보려고 한다. 우선, 아래와 같은 배열이 있다고 해보자.let name = ['ria', 'Jun'] 방법1. 배열에 새로운 빈 배열을 할당name = [];정확하게 말하면 이 방법은 배열을 비우는 것이 아니라, 새로운 빈 배열이 저장된 메모리주소를 참조시키는 것. 1/ let name = ['ria', 'jun']처음에는 name.. 공감수 1 댓글수 3 2024. 9. 2.
[코딩테스트 ALL IN ONE]코딩테스트 🍯 TIP # 자료구조: 데이터를 저장하고 관리하는 방식자료구조는 데이터를 체계적으로 저장하여 메모리를 효율적으로 사용할 수 있게 하고, 빠르고 안정적으로 데이터를 처리할 수 있도록 도와준다. 메모리구조를 잘 알고 있어야 자료구조의 중요성을 알게된다. example)num1 = 10num2 = 16num3 = 17num4 = 5num5 = 11num6 = 14num7 = 1num8 = 4num9 = 20num10 = 20지금은 10개지만, 데이터를 100개, 1000개를 저장해야하는 상황이 온다면 변수를 하나하나 지정해서 저장하는건 무리가 있다.이런 경우, 비슷한 성질의 데이터를 모아서 저장을 하면 좋겠다. 이렇게 변수를 하나하나 지정해서 데이터를 저장하기보다는, Array 자료구조를 사용하면 데이터를 더 효율적으.. 공감수 0 댓글수 0 2024. 7. 27.
자바스크립트 동작 원리(Call Stack, Task Queue, Event Loop etc) 코드를 잘 짜고 싶으면 문법말고도 여러가지 배울것이 많다. ex: 웹브라우저 동작 원리 등. 그러면 코드 잘짜는 개발자가 될 수 있다. 자바스크립트를 작성하면 브라우저가 실행시킨다. HTML, CSS, JS를 해석해주는 것이 브라우저. - 특징 : 자바스크립트를 해석하는 순서가 특이함. 아래 코드를 실행시키고싶다. 1+1 하고 1초 쉬고 2+2 하고 일반 프로그래밍 언어는 이런식을 작동한다. //python ver print(1+1) time.sleep(1) print(2+2) 파이썬 같은 경우는 위에서부터 한줄한줄 실행된다. 2 → 1초 쉬고 → 4 자바스크립트에서도 똑같은 기능을 만들어보려고 setTimeout을 사용해서 코드를 작성하였다. //JavaScript ver console.log(1+1).. 공감수 0 댓글수 0 2024. 2. 4.
CSR vs SSR 1. 웹의 역사(SPA 시대까지) 1/ 1990년 중반까지는 모두 다 static sites(정적 사이트)였다. 서버에 이미 잘 만들어진 html 문서들이 있고, 사용자가 브라우저에서 www.hello.com과 같은 주소에 접속하면 서버에 이미 배포되어져있는 HTML 문서를 받아와서 보여주는 형식 한가지 문제점은, 페이지 내에서 다른 링크를 클릭하면 (www.hello.com/about) 다시 서버에서 해당 페이지의 HTML을 받아와서 페이지 전체가 업데이트 되어야 한다. 2/ 1996 1996년 문서 내에서 또 다른 문서를 담을 수 있는 iframe 태그가 도입되었고, 이제는 페이지내에서 부분적으로 문서를 받아와서 업데이트 할 수가 있게 된다. (지금도 간혹 쓰이고 있는 태그!) 3/ 1998년 우리가.. 공감수 1 댓글수 2 2024. 2. 3.
[얄팍한 코딩사전] HTTPS는 무엇인가? 그리고 왜 쓸까?(ft. 대칭키 vs 비대칭키) 2편 앞서 1편에서 HTTP대신 HTTPS를 사용하는 이유를 크게 2가지로 설명하였다. 1. 내가 사이트에 보내는 정보(ex: 내 ID, password)를 제3자가 알아보지 못하게 하기 위해서(암호화) 2. 내가 접속한 사이트가 믿을만한 곳인지 이 두 보안 기능이 어떤 원리로 구현되는지 알기 위해서는 대칭키와 비대칭키의 개념을 알아야 한다. 1. 대칭키 방식 전쟁에서 아군에게 편지로 메시지를 보낼 때, 중간에 적군이 편지를 탈취해도 이를 알아볼 수 없도록 하려면 메시지의 내용을 '암호화' 해야한다. 그 암호화된 메시지는 아군만 읽을 수 있어야 한다. 그래서 옛날부터 이를 위한 방식들이 고민되어 왔다. 그동안 널리 사용되어 온 건 이 '대칭키 방식'. ex: 양쪽 모두 A=27, B=9, C=51.. 이런 표.. 공감수 1 댓글수 2 2024. 1. 25.
[얄팍한 코딩사전] HTTPS는 무엇인가? 그리고 왜 쓸까?(ft. 대칭키 vs 비대칭키) 1편 보통 주소창에 주소를 적을 때, www앞에 https:// 이렇게 붙인다. 예전에는 http:// (HTTP)가 많았지만, 요즘 공신력 있는 사이트 대부분은 거의 https:// (HTTPS)를 많이 사용한다. *TMI: 청와대 홈페이지는 아직도 http://이다... 그래서 주소창을 보면 '주의요함'이 적혀있다! HTTPS의 S는 Secure, 즉 기존의 HTTP사이트보다 더 안전하다는 얘기. (HTTP over SSL(TLS), HTTP over Secure라고 부르기도 한다.) HTTPS요청을 SSL 혹은 TLS라는 알고리즘을 이용해 HTTP통신을 하는 과정에서 내용을 암호화하여 데이터를 전송하는 방법. → 이 내용은 어려우니 다음에 차차 설명하도록 하겠다. 그렇다면 무엇으로부터 안전하다는 걸까? .. 공감수 0 댓글수 1 2024. 1. 25.
명령형 프로그래밍 vs 선언형 프로그래밍 Imperative programming is HOW you do something, and declarative programming is more like WHAT you do. 즉, 명령형(절차적) 프로그래밍 : 일을 '어떻게' 할 것인가에 관한 것. 선언적 프로그래밍 : '무엇을' 할 것인가에 관한 것. 아래는 코드가 아닌, real life 예시. 1/ Red Lobster 레스토랑 - 당신은 JavaScript가 주는 피로함과 씨름하느라 많은 시간을 써, 남편과 근사한 데이트를 하기로 결정했습니다. Red Lobster에 도착하여 프론트데스크에 가서 다음과 같이 말하였습니다. [ 명령형 접근형(HOW) ] I see that table located under the Gone Fi.. 공감수 0 댓글수 1 2024. 1. 25.
Vue.js는 왜 '자바스크립트' 프레임워크인가? Vue.js는 무엇인가, 라이브러리와 프레임워크의 차이는 무엇인가 등 원론적인것부터 차근차근 기본을 좀 다지고싶은 마음에 하나하나 찾아보다가 문득, Vue.js는 왜 '자바스크립트' 프레임워크인지 궁금해졌다. 예를 들어, '프론트엔드 프레임워크' 이렇게 적었다면 별로 궁금해하지 않았을 것 같은데, 왜 꼭 '자바스크립트' 프레임워크일까? (나만 궁금한가?ㅎㅎ) Vue.js에 HTML, CSS도 사용하잖아..? 구글링을 해서 찾아봐도 잘 나오지 않아 chatGPT의 도움을 받았다. # 자바스크립트 프레임워크의 의미 자바스크립트 언어를 '기반'으로 한 프레임워크 - 웹애플리케이션의 일부로서 HTML 및 CSS와 함께 사용된다. - 주로 '자바스크립트 언어'를 기반으로 웹페이지를 조작하고 관리하지만, HTML .. 공감수 0 댓글수 2 2024. 1. 23.
[Udemy Vue 완벽가이드 Section16] 255. HTTP 오류 처리 추가하기 오류를 발생시켜보자. 그런 다음 이 액션을 dispatch한 컴포넌트에서 처리할 수 있다. 기술적인 오류가 발생하면 오류 객체가 자동으로 발생한다. 그렇지 않은 경우에는 수동으로 발생시킨다. error가 발생하거나, new Error를 생성할 때 error객체에 메시지를 responseData.message 또는 폴백으로 'Failed to fetch!'로 설정한다. 그런다음, error객체를 throw한다. async loadCoaches() { const response = await fetch(`https://vue-main-pr***hes.json`); // Response객체 const responseData = await response.json(); //읽어온 데이터(Response객체)를 .. 공감수 0 댓글수 0 2024. 1. 22.
로그인 인증/인가 방식 2. 토큰 방식 세션 방식에 이어서, 토큰 방식에 대해서 알아보자. 인증/인가에 사용되는 토큰은 JWT(Json Web Token)이고 구조는 아래와 같다. # JWT 구성 XXX.YYY.ZZZZ와 같이 두 개의 점을 기준으로 세 파트로 나눠져있다. 각각 1. Header, 2.Payload, 3.(verify) Signature로 구분. 1. Header Header에는 토큰의 종류(타입)와 해싱 알고리즘의 종류, 이렇게 2가지 정보가 담겨있다. 1) typ 토큰의 종류(type). 여기엔 언제나 고정값인 'JWT'가 들어간다. typ값이 'JWT'여야 이 토큰의 종류가 JWT가 된다. 2) alg 해싱 알고리즘. 3번 Signature을 만드는데 사용될 알고리즘이 지정된다. 보통 HS256(HMAC-SHA256) .. 공감수 1 댓글수 2 2024. 1. 22.
로그인 인증/인가 방식 1. 세션 방식 세션과 토큰방식 로그인에 대해 알아보기 전에, 왜 필요한지를 먼저 알아보자. → 이를 위해, HTTP에 대해 알 필요가 있다. # HTTP 1/ HTTP란? - 웹 브라우저와 웹 서버간의 통신에 사용되는 프로토콜 - 클라이언트(웹브라우저)가 서버에 요청을 보내고, 서버가 클라이언트에게 데이터를 응답하는 방식으로 동작. 2/ HTTP 특징 HTTP의 여러 특징 중 하나는 바로, HTTP 프로토콜은 Connectionless와 Stateless이라는 것! 1. Connectionless Protocol : 비연결지향(비연결성) 클라이언트가 서버에 요청했을 때, 그 요청에 맞는 응답을 보낸 후 연결을 끊는 처리방식. 즉, 각 요청은 독립적으로 처리되고, 이전 요청과의 연결을 유지하지 않는다. → 그래서, 아래.. 공감수 0 댓글수 0 2024. 1. 17.
[React] UseEffect가 두번 실행되는 이유 부트캠프를 할 당시, React를 공부했었다. 그러다가 첫 회사에서는 Vue.js 프레임워크를 사용을 하여 입사하고 지금까지 쭉 Vue로 개발을 하고, 공부를 하고 있다. 물론 Vue를 계속 공부하고 있지만, 많은 회사에서는 React를 사용하고 있어서 React도 다시 공부를 해야겠다는 생각이 들어서 조금씩이라도 하고 있다. # 상황 함수 컴포넌트에서 사용하는 Hook 중 하나인 useEffect를 공부하는 와중, 예제를 보고 똑같이 따라하는데도 책에서는 처음 렌더링 시 '한번'만 실행이 되는데 내가 짠 코드에서는 계속 두 번씩 실행이 되는 것이다. //Info.js import { useState, useEffect } from 'react'; const Info = () => { const [nam.. 공감수 0 댓글수 0 2024. 1. 16.
[Udemy Vue 완벽가이드 Section16] 254. 로딩 아이콘 렌더링 Requests로 갔다가 다시 All Coaches화면으로 가면, 백그라운드에서 새로운 코치들을 로딩하고 있다는 아무런 표시가 없다. → 최적화된 앱이라고 할 수 없다. UI를 업데이트할 수 있는 컴포넌트에서 하면 좋겠지만, Vuex 저장소(store)에서 HTTP요청을 보내고 있기 때문에 충돌이 발생할 수 있다. 코치 데이터를 가져오는 동안, 로딩 아이콘을 표시하여 페이지를 새로고침할 때 발생하는 깜박임을 없애보자. 먼저 로딩아이콘이 필요하다. 첨부한 BaseSpinner.vue를 사용해서 CoachesList.vue페이지에 로딩아이콘을 렌더링하자. Vuex를 사용하면 요청을 보내는 중에도 로딩여부를 확인할 수 있다. 액션을 dispatch할 때 좋은 기능이 있는데 이 기능이 필요한 상황이 없었어서 사.. 공감수 0 댓글수 1 2024. 1. 4.
[Udemy Vue 완벽가이드 Section16] 253. GET요청(HTTP) 전송으로 코치 데이터 가져오기 coaches 페이지를 방문하거나, Refresh 버튼을 클릭할 때, 데이터를 fetching해야한다. → 따라서 CoachesList.vue 컴포넌트가 화면에 로드될 때, 데이터 fetching이 시작되게 해야한다. 그렇다고 요청을 보내고 응답을 파싱하는 로직 전체를 수행해야한다는 뜻은 아니다. 대신에 Vuex를 활용할 수 있다. # Vuex를 활용하여 코치데이터 fetching coachData를 로컬앱에 저장하면 Vuex로 관리할 수 있다. actions.js 파일에 데이터페칭 action을 추가하고, mutations.js 파일에서 사용하면 된다. 컴포넌트가 아니라, Vuex에서 HTTP요청을 보내고, 응답을 파싱하는 접근방식이다. 컴포넌트를 깔끔하게 유지하는게 좋다. 먼저, coaches의 mu.. 공감수 0 댓글수 0 2024. 1. 4.
[Udemy Vue 완벽가이드 Section16] 252. PUT요청(HTTP) 전송으로 코치 데이터 저장하기 # 백엔드 서버 없이 사용한 경우 지금까지 작업한 데이터는 모두 더미 데이터 → 영구적이지 않다. 코치를 등록했지만, 앱을 새로고침하면 사라진다. 즉, 데이터가 손실된다. 또한, 데이터를 이 컴퓨터에서만 확인할 수 있다. 다른 사용자의 데이터는 못본다. 당연히..앱은.. 이런 식이면 안된다. 전 세계 모든 코치의 정보를 제공하는게 목적이므로. 그래서 HTTP요청과 데이터를 저장할 수 있는 백엔드 서버가 필요하다. 이번에도 Firebase를 사용하는데, 유일한 옵션이기 때문은 아니다. 서버 사이드 코드를 작성하지 않아도 되고, 무료로 시작할 수 있다는 것도 장점. (물론 실제 프로젝트에서 사용할 때는 요금 페이지를 확인해야한다.) 새 프로젝트를 생성하고, Realtime Database로 가서 이 데이터베.. 공감수 0 댓글수 1 2024. 1. 3.
비동기 처리 - async/await # Promise를 통한 비동기 코딩 먼저 Promise를 통해서 어떻게 비동기 처리를 하는지 간단하게 리뷰해보자. 어떤 원격 REST API를 호출하여 게시물 작성자의 이름을 return하는 함수를 작성하고, 그 함수를 호출해보자. function fetchAuthorName(postId) { return fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`) .then((response) => response.json()) //resolve()함수의 인자로 넘겨받은 값이 response가 된다. .then((post) => post.id) //위 return한 response.json()값이 post가 된다. .then((userId) => { .. 공감수 0 댓글수 2 2024. 1. 3.
비동기처리 - Promise # 콜백함수를 통한 비동기처리의 문제점 ES6에 Promise가 도입되어 지금처럼 널리 사용되기 이전에는 주로 콜백함수를 다른 함수의 인자로 넘겨서 비동기처리를 했었다. 2023.12.23 - [JavaScript] - 비동기함수의 순서를 제어하는 방법 1. Callback함수 비동기함수의 순서를 제어하는 방법 1. Callback함수 # 콜백함수란? 2023.12.23 - [JavaScript] - callback함수란? callback함수란? # 함수란? - 어떤 특정한 일을 하는 코드의 묶음 - 다양하고 의미있는 일을 하기 위해 매개변수(인자)를 전달받을 수 있다. - 여러 lion284.tistory.com 단순 코드를 작성할 때는 위와 같이 전통적인 방식으로 콜백함수를 통해 비동기처리를 해도 큰.. 공감수 0 댓글수 1 2023. 12. 29.
비동기함수의 순서를 제어하는 방법 1. Callback함수 # 콜백함수란? 2023.12.23 - [JavaScript] - callback함수란? callback함수란? # 함수란? - 어떤 특정한 일을 하는 코드의 묶음 - 다양하고 의미있는 일을 하기 위해 매개변수(인자)를 전달받을 수 있다. - 여러 종류의 인자를 전달받을 수 있다. ex: 숫자, 문자열, 객체 등 - 함 lion284.tistory.com 비동기 방식에서는 각각의 처리 로직이 '병렬'로 수행되므로, 이 처리로직이 언제 시작되고 언제 종료되는지 알 수 없다. 하지만, 순차처리를 하고싶은 경우가 있을 수 있다. 콜백함수는 원하는 시점에 호출을 할 수 있으므로, 비동기 처리가 완료되면 호출되도록 할 수 있다. 그래서 콜백함수를 중첩 사용하여 순차처리를 할 수 있다. 즉, 중첩된 콜백함수를 이용.. 공감수 0 댓글수 2 2023. 12. 23.
callback함수란? # 함수란? - 어떤 특정한 일을 하는 코드의 묶음 - 다양하고 의미있는 일을 하기 위해 매개변수(인자)를 전달받을 수 있다. - 여러 종류의 인자를 전달받을 수 있다. ex: 숫자, 문자열, 객체 등 - 함수는 또다른 함수도 전달받을 수 있다. function main(param) { param(); } main(function() {}); //다른 함수의 인자로 전달되는 함수 ← 콜백함수 # 콜백함수 콜백함수는 콜백함수를 전달받은 함수(위 예시에서 main함수)에 의해서 호출된다. 그래서 이름이 'callback 함수'이다. "내가 함수 하나 전달할테니까 나중에 니가 알아서 불러줘!" function main(x) { //x라는 매개변수를 받음 ← x에 숫자, 문자열, 함수(콜백함수) 등 전달 가능... 공감수 0 댓글수 0 2023. 12. 23.
원시 값과 객체의 비교 # 7가지 데이터타입자바스크립트가 제공하는 7가지 데이터 타입은 크게 원시 타입(primitive type)과 객체 타입(object/reference type)으로 구분할 수 있다. 구분데이터 타입설명원시 타입숫자(number) 타입숫자. 정수와 실수 구분 없이 하나의 숫자 타입만 존재문자열(string) 타입문자열불리언(boolean) 타입논리적 true/falseundefined 타입var 키워드로 선언된 변수에 암묵적으로 할당되는 값null 타입값이 없다는 것을 의도적으로 명시할 때 사용하는 값심벌(symbol) 타입ES6에 추가된 7번째 타입객체 타입객체, 배열, 함수 등 # 원시 타입 vs 객체타입 차이점크게 3가지 측면에서 다르다. 1/ 원시타입의 값, 즉 원시 값은 변경 불가능한 값(im.. 공감수 0 댓글수 1 2023. 12. 19.
[CSS] display에 대하여 # inline - 전후 줄바꿈없이 한 줄에 다른 엘리먼트들과 나란히 배치 - 대표 lnline 엘리먼트 : , , 태그 등 여러 개의 inline 엘리먼트들을 아래와 같이 마크업하면, 줄바꿈없이 순서대로 한 줄에 보이게 된다. HTML 삽입 미리보기할 수 없는 소스 - width, height 속성 : 무시 → 해당 태그가 마크업하고있는 컨텐츠의 크기만큼만 공간을 차지하도록 되어 있기 때문 - margin, padding 속성 : '좌우'간격만 반영 O. 상하 간격은 반영 X. *inline요소는 안에 내용이 있어야 화면에 표시된다. HTML 삽입 미리보기할 수 없는 소스 , , 태그 모두 CSS로 꾸몄음에도 불구하고 화면에 나오지 않고 있다. # block - 전후 줄바꿈이 들어가 다른 엘리먼트들을 .. 공감수 0 댓글수 0 2023. 12. 17.
자바스크립트 11. 비동기 처리의 시작 콜백 이해하기, 콜백 지옥 체험 😱 JavaScript Callback | 프론트엔드 개발자 입문편 (JavaScript ES6) 1. 동기와 비동기 JavaScript is synchronous. 자바스크립트는 동기적이다. Execute the code block in order after hoisting. => hoisting이 된 이후부터 우리가 작성한 코드의 순서에 맞춰서 하나하나 동기적으로 실행된다. ex) console.log('1'); console.log('2'); console.log('3'); 코드를 위와 같이 작성하면, console에 1, 2, 3 순서대로 출력된다. # asynchronous : 비동기 : 언제 코드가 실행될 지 예측할 수 없는 것. 예시) "setTimeout"이라고 하는 web API(브라우저에서 제공하는 API) 우리가 지정한 시간이 지나면 전달한 콜백함수를 호출한다. setTimeout.. 공감수 0 댓글수 0 2023. 12. 13.
[Udemy Vue 완벽가이드 Section16] 251. 활성 코치에 대한 요청 필터링하기 이제 모든 요청을 가져오는 것이 아니라, coachId가 우리의 id인 request만을 필터링하고자 한다. getter안에서는 하나 이상의 인수를 받을 수 있다는 사실을 활용해보자. state외에도 다른 getter에 액세스할 수있고, rootState, rootGetters도 가능하다. 여기서 필요한 건 rootGetters이다. userId는 루트 저장소의 일부이므로. 그리고 거기엔 이미 userId 게터가 있다. // index.js import { createStore } from 'vuex'; import coachesModule from './module/coaches/index.js'; import requestsModule from './module/requests/index.js'; c.. 공감수 0 댓글수 0 2023. 12. 13.
[Udemy Vue 완벽가이드 Section16] 250. 수신 요청(메시지) 출력하기 일단 단순하게 모든 요청을 표시해보자. script에는 Vuex에 액세스하기위해 computed 프로퍼티를 사용하자. 현재는 거기에 있는 모든 요청을 가져오자. // RequestsReceived.vue computed: { receivedRequests() { return this.$store.getters['requests/requests']; }, hasRequests() { //v-if를 이용해 true인 경우 ul을 표시하고, false인 경우 h3태그 return this.$store.getters['requests/hasRequests']; } } // requests > getters.js export default { requests(state) { return state.requests.. 공감수 0 댓글수 0 2023. 12. 13.
[Udemy Vue 완벽가이드 Section16] 249. Vuex로 요청(메시지) 저장하기 메시지를 생성하려면 Vuex 저장소에 데이터를 저장해야한다. 지금까지는 "Coaches 모듈"만 만들어보았다. 이제 요청을 관리하려면 "Requests 모듈"을 만들어야 한다. # Request 모듈 Request모듈에서도 네임스페이스를 사용하자. 전역 저장소에 그냥 합칠 수도 있지만, 이번에는 그렇게 하지 않았다. state는 요청을 관리해야한다. import mutations from './mutations.js'; import actions from './actions.js'; import getters from './getters.js'; export default { namespaced: true, state() { return { requests: [], }; }, mutations, acti.. 공감수 0 댓글수 0 2023. 12. 13.
[Udemy Vue 완벽가이드 Section16] 248. 연락처 양식 작업하기 Coach부분은 잘 구현했다. 이제 Requests로 넘어가보자. form요소를 만들어보자. 그리고 이 양식에는 두 개의 입력값을 제공하자. 1/ 코치가 유저에게 연락할 방법을 알려주기위한 유저 이메일주소(email) 2/ 코치에게 전할 메시지 적는 곳(message) Your E-Mail Message Send Message email과 message에 대한 입력값을 가져와야한다. 유효성 검사도 추가하자. 유효성 검사 자체는 있는 편이 좋다. methods: { submitForm() { console.log('this.$route', this.$route.params.id); this.formIsValid = true; if (this.email === '' || !this.email.includes.. 공감수 0 댓글수 0 2023. 12. 13.
[Udemy Vue 완벽가이드 Section16] 247. 양식 유효성 검사 추가하기 양식을 제출할 때 단계를 하나 추가하려고 한다. 바로 유효성 검사. → 이를 위해 validateForm 메서드를 추가해보자. 로직을 두 메서드로 나누어서 메서드 하나가 너무 길어지지 않게 해보자. 그리고 submitForm의 시작부분에서 this.validateForm 메서드를 호출하여 모든 입력값을 검토해서 유효한지 아닌지 확인하자. 1/ 먼저, 새로운 데이터 프로퍼티를 추가하자. formIsValid : true 처음에는 true이지만, 입력값이 하나라도 거짓이면 false가 된다. 다른 데이터는 더이상 특정 프로퍼티의 값이 아니라, 객체가 된다. 2/ validateForm함수로 유효한지 아닌지 확인하게 된다. validateForm() { this.formIsValid = true; if(thi.. 공감수 0 댓글수 0 2023. 12. 13.
약수의 개수 구하는 방법 숫자 N의 약수의 개수를 구하는 문제가 주어졌을 때, 1부터 N까지 모두 탐색을 하게 되면, N이 100,000같이 크기가 클 경우 시간이 많이 걸린다. 약수 개수를 구할 때, 시간을 줄이는 방법은 2가지가 있다. 1/ 소인수분해를 이용하는 방법 N을 소인수분해하여 각 소수의 지수를 구한 후, (각 지수+1) 값들을 곱하여 약수의 개수를 구한다. ex) N이 24일 경우 24 = 2³ * 3¹ → (3 + 1) * (1 + 1) = 4 * 2 = 8 즉, 24의 약수의 개수는 8이 된다. (1, 2, 3, 4, 6, 8, 12, 24) 2/ N의 제곱근으로 범위를 좁혀 탐색 만약 N이 24일 경우, 24의 제곱근(√24)은 4.xxxx이다. 따라서 1~24가 아닌, 1~4까지만 탐색해도 [ 1, 2, 3.. 공감수 1 댓글수 0 2023. 12. 13.
[Udemy Vue 완벽가이드 Section16] 246. Vuex에 코치 추가하기 CoachForm 컴포넌트 내부에서 formData를 CoachRegistration 컴포넌트에 노출시키기만 하면 된다. 이론적으로는 CoachForm 내부에서 Vuex저장소에 직접 접근할 수도 있다. 어느 컴포넌트에서든 Vuex저장소와 통신이 가능하므로. 그러나 이 CoachForm 컴포넌트를 재사용가능하고 개별적으로 작동하며 부모컴포넌트와 함께 작동하도록 해보자. (개인적인 취향일 뿐이다.) 입력된 데이터를 부모컴포넌트(CoachRegistration.vue)에게 알리도록 해보자. 그러면 부모 컴포넌트인 CoachRegistration컴포넌트가 Vuex와 통신하게 된다. 이건 여러 방법 중 하나일 뿐이다. // CoachForm.vue submitForm() { this.validForm(); if .. 공감수 0 댓글수 0 2023. 12. 12.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.