전체 글
(26)
🔖
Dev.FrontEnd/Vue.js2
📅
2025. 2. 3. 17:43
[Vue.js2] V-bind
V-bind란 ✔️개념속성, 동적 클래스, 동적 스타일, HTML 속성 등 다양한 곳에 사용할 수 있다.객체 바인딩을 사용하면 여러 속성을 한 번에 바인딩할 수 있다.v-bind는 vue에서 데이터와 DOM 속성을 연결하는 중요한 역할을 한다. 🔑Key-Pointv-bind를 통해 부모컴포넌트(app.vue)와 자식컴포넌트(test.vue)에 props를 동적으로 바인딩(연결) 할 수 있다.한 예로 부모의 input에 v-model에 데이터가 변할 때마다, 자식컴포넌트의 데이터도 변경시킬 수 있다. 🛠️소스설명*app.vue v-bind:속성명="데이터"를 하게 되면 자식컴포넌트에게 이 속성명과 데이터를 보내게 된다.그럼 자식에서 이 속성명을 props의 속성으로 받아주면 된다.부모에서 데이터를 ..
[Vue.js2] V-bind
V-bind란 ✔️개념속성, 동적 클래스, 동적 스타일, HTML 속성 등 다양한 곳에 사용할 수 있다.객체 바인딩을 사용하면 여러 속성을 한 번에 바인딩할 수 있다.v-bind는 vue에서 데이터와 DOM 속성을 연결하는 중요한 역할을 한다. 🔑Key-Pointv-bind를 통해 부모컴포넌트(app.vue)와 자식컴포넌트(test.vue)에 props를 동적으로 바인딩(연결) 할 수 있다.한 예로 부모의 input에 v-model에 데이터가 변할 때마다, 자식컴포넌트의 데이터도 변경시킬 수 있다. 🛠️소스설명*app.vue v-bind:속성명="데이터"를 하게 되면 자식컴포넌트에게 이 속성명과 데이터를 보내게 된다.그럼 자식에서 이 속성명을 props의 속성으로 받아주면 된다.부모에서 데이터를 ..
🔖
Dev.FrontEnd/Vue.js2
📅
2025. 1. 13. 17:43
[vue.js 2] v-if vs v-show 차이점과 예제 비교
v-if 와 v-show 차이점과 예제 비교 v-show 조건이 true일 때 해당 엘리먼트(태그같은거)를 DOM에서 실제로 추가하고, 조건이 false일 때 DOM에서 해당 엘리먼트를 제거합니다.즉, v-if는 엘리먼트의 렌더링 자체를 제어합니다. Toggle 이 내용은 조건이 true일 때만 보입니다. v-show 조건이 true일 때 해당 엘리먼트를 보이게 하고, 조건이 false일 때는 숨깁니다. 하지만 DOM에서 제거되지는 않으며, display: none 스타일을 적용하며 화면에 보이지 않도록 만듭니다. Toggle 이 내용은 조건이 true일 때 보이지만, DOM에서 사라지지 않습니다.
[vue.js 2] v-if vs v-show 차이점과 예제 비교
v-if 와 v-show 차이점과 예제 비교 v-show 조건이 true일 때 해당 엘리먼트(태그같은거)를 DOM에서 실제로 추가하고, 조건이 false일 때 DOM에서 해당 엘리먼트를 제거합니다.즉, v-if는 엘리먼트의 렌더링 자체를 제어합니다. Toggle 이 내용은 조건이 true일 때만 보입니다. v-show 조건이 true일 때 해당 엘리먼트를 보이게 하고, 조건이 false일 때는 숨깁니다. 하지만 DOM에서 제거되지는 않으며, display: none 스타일을 적용하며 화면에 보이지 않도록 만듭니다. Toggle 이 내용은 조건이 true일 때 보이지만, DOM에서 사라지지 않습니다.
🔖
Dev.BackEnd/Spring & Spring Boot
📅
2024. 12. 24. 16:55
[스프링부트] 클라이언트와 서버와의 통신(@RequestBody, @ResponseBody, Jackson라이브러리)
클라이언트와 서버간의 어떻게 통신할까?http를 통해 통신이 된다클라이언트는 http를 통해 서버로 데이터를 보내는데 json문자열로 보내야만 한다.http로 요청할 때 body부분에서는 문자열로만 전송할 수 있기 때문이다. 즉 json.stringfy()를 이용해 json객체를 문자열로 만들어 보내야한다. 그럼 서버는? 서버에서 보통 게시판을 예로 들어 VO 객체를 return으로 응답을 하는데, 여기서 spring이 vo객체를 json문자열 형식으로 변환하여 응답한다. 이 때 스프링에서 사용되는것이 jackson 라이브러리이다. 그리고 http응답에 포함시켜 클라이언트에 요청을 보낼 때는 반드시 @Responsebody를 해줘야 http응답에 포함이 된다. 그렇지 않을 경우 jsp페이지, 템플릿을..
[스프링부트] 클라이언트와 서버와의 통신(@RequestBody, @ResponseBody, Jackson라이브러리)
클라이언트와 서버간의 어떻게 통신할까?http를 통해 통신이 된다클라이언트는 http를 통해 서버로 데이터를 보내는데 json문자열로 보내야만 한다.http로 요청할 때 body부분에서는 문자열로만 전송할 수 있기 때문이다. 즉 json.stringfy()를 이용해 json객체를 문자열로 만들어 보내야한다. 그럼 서버는? 서버에서 보통 게시판을 예로 들어 VO 객체를 return으로 응답을 하는데, 여기서 spring이 vo객체를 json문자열 형식으로 변환하여 응답한다. 이 때 스프링에서 사용되는것이 jackson 라이브러리이다. 그리고 http응답에 포함시켜 클라이언트에 요청을 보낼 때는 반드시 @Responsebody를 해줘야 http응답에 포함이 된다. 그렇지 않을 경우 jsp페이지, 템플릿을..
🔖
Dev.FrontEnd/Javascript
📅
2024. 3. 21. 12:59
[자바스크립트] for vs while 차이점과 closer문제
목차 for vs whileforwhile구하고자 하는 값이 정확한 조건이 있는 경우 사용구하고자 하는 값이 정확한 조건을 정확히 모를 경우, 유동적인 경우 사용조건식, 초기값이 블락 안에 모여있어 가독성이 좋다조건식이 흩어져 있어 가독성이 나쁨출처: https://chaeyoung2.tistory.com/67 [공부하는 공작새:티스토리] 이런 사실은 알고는 있는데 자바스크립트에서 while과 for를 사용하는 도중 settimeout을 반복문을 돌리려 하는데 전혀 다른 결과가 나타났다. let i=0; while(i { console.log(">>>i :", i) console.log(">>winBalls", winBalls) ..
[자바스크립트] for vs while 차이점과 closer문제
목차 for vs whileforwhile구하고자 하는 값이 정확한 조건이 있는 경우 사용구하고자 하는 값이 정확한 조건을 정확히 모를 경우, 유동적인 경우 사용조건식, 초기값이 블락 안에 모여있어 가독성이 좋다조건식이 흩어져 있어 가독성이 나쁨출처: https://chaeyoung2.tistory.com/67 [공부하는 공작새:티스토리] 이런 사실은 알고는 있는데 자바스크립트에서 while과 for를 사용하는 도중 settimeout을 반복문을 돌리려 하는데 전혀 다른 결과가 나타났다. let i=0; while(i { console.log(">>>i :", i) console.log(">>winBalls", winBalls) ..
🔖
게시판만들기
📅
2023. 12. 12. 10:32
frontEnd에서 axios로 backend프로젝트에 호출하는 방법(프록시설정)
결론: 프록시를 사용해야한다. 프록시 프록시(Proxy)는 한마디로 설명하면, 클라이언트와 서버 간의 중간 매개체입며, 클라이언트(사용자)가 서버에 직접 연결하는 대신, 프록시를 통해 연결하도록 하는 시스템 또는 서버를 가리킨다. 관리자페이지를 작업 중 이다. 화면(frontend)은 vue를 사용하고 api는 스프링부링부트를 사용하려 한다. 이유는 vue와 스프링부트가 각각 프론트엔드, 백엔드개발에 특화되어있기 때문이다. login을 하려고 frontend login페이지에서 backend api로 호출해야만 하는 상황이다. 즉 frontend localhost:8080에서 localhost:8082/api/login을 호출하려고 한다. 1. Vue.js 설정 (vue.config.js): const ..