본문 바로가기

JavaScript14

[JS] 푸드 파이트 대회 테스트케이스 최대 소요시간 : 0.07ms 제출답안 function solution(food) { let front = "" ; //앞부터 let back = "" ; //뒤에서부터 for(let i = 1 ; i < food.length ; i++){ // 문자열 i 를 수량/2 의 몫만큼 반복해서 입력 let string = (i+"").repeat(Math.trunc(food[i]/2)); front += string; back = string+back; } return front+"0"+back; } 이걸 더 짧게 back을 따로 만들지 않고, [...front].reverse().join('') 식으로 쓴 것을 보았다. 함수의 세계는 무궁무진. [...front] = front문자열을 한 글자씩.. 2024. 3. 7.
다른 컴포넌트의 변수값 호출하기 Vue2 기준으로 다른 컴포넌트에서 사용중인 변수의 값을 가져와서 사용하는 방법입니다. SPA 형식의 웹을 제작하다보면, 편의상 분리했던 다른 컴포넌트의 js 변수값을 가져오고 싶은 경우가 생깁니다. 예를 들면 A 컴포넌트와 B 컴포넌트가 함께 띄워지는 중인데, B 컴포넌트에서 A 컴포넌트에 선언한 변수 'byunsu'의 값이 3인지 5인지 궁금할 수 있다는거죠. 혹은 B 컴포넌트에서 A 컴포넌트의 변수 'byunsu'의 값을 변경하거나요. 그러나.. 생각보다 컴포넌트 간 변수 값 교환이 복잡했습니다. eventbus를 이용해서 변수값을 리턴받으려고 해도 변수값이 아닌 vue 객체가 리턴이 되고, 아무리 이 객체를 뒤적거려봐도 변수의 값은 없었거든요. 변수 값을 바로 리턴하지 않고 문자열로 변환해서 보내.. 2023. 6. 13.
Spring Boot +프론트엔드 프레임워크 백엔드와 프론트엔드가 서로 다른 프레임워크를 사용하는 경우, 도대체 정보를 어떻게 주고받는지가 의문이었는데 그 해결법을 공유합니다. Spring Boot의 데이터를 프론트엔드 프레임워크에 표시할텐데 저는 프론트엔드 프레임워크로 Svelte 를 사용했지만 JavaScript 기반의 어떤 프레임워크에서도 사용 가능하니 React, Vue, Anguler 사용자도 따라할 수 있습니다 ^_^ Spring Boot API준비 이 포스팅은 받아올 API 데이터가 있다는 것을 가정하고 시작합니다. 저는 http://192.168.0.17:8282/first/pathvaria/savernet 링크 접속 시 아래처럼 표시되는 API 주소를 하나 가지고 있습니다. 프론트엔드 JavaScript 코드 작성 API 데이터를 .. 2022. 10. 25.
슬라이드 이미지 만들기 아래와 같은 이미지 슬라이드를 만들어보겠습니다. css와 자바스크립트를 활용합니다. HTML 삽입 미리보기할 수 없는 소스 html코드 55 css 코드 /* borderzone */ /* 만들면서 어떤 구역의 크기가 틀리고, 어떤 구역이 빗나가있는지 확인하기 위한 용도이므로 배포 시 삭제하시면 됩니다. */ .conta{border: 1px rgb(142, 214, 34) solid;} .toleft{border: 1px rgb(253, 193, 104) solid;} .toright{border: 1px rgb(252, 185, 98) solid;} .content{border: 1px rgb(188, 152, 255) solid;} .slide{border: 2px rgb(99, 224, 255) .. 2022. 6. 15.
JavaScript, 폼 값을 URL로 전달 목표 : form에 입력한 값을 파라미터가 아닌, 문자열 형태로 url에 전달합니다. form 의 텍스트박스에 zenna를 입력하면 url에 이 값이 붙도록! url로 값을 보낼 폼과 자바스크립트를 html에 작성해줍니다. 화면에는 아래처럼 보입니다. value로 기본값을 설정해줬어요. value를 빼고 적으면 빈칸으로 되어있는 form이 생성됩니다. 여기에 값을 적고 go 버튼을 눌러보겠습니다. 입력한 값이 ?뒤에 붙는 파라미터가 아닌 텍스트로 전달됩니다. input type="button"에 onclick 으로 클릭 시 할 행동을 자바스크립트로 지정해준거예요. 버튼이 클릭(onclick)되면 document(지금 보고 있는 웹 페이지를 의미합니다)의 링크(location.href)가 바뀝니다. 바뀔 .. 2022. 3. 15.
728x90

티스토리툴바