분류 전체보기
(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 ..
🔖
Dev.FrontEnd/Vue.js3
📅
2023. 12. 8. 16:10
[Vue.js 3.0] Vue Router createWebHistory(process.env.BASE_URL)에 대해서
router 설정과정에서 무지성으로 createWebHistory(process.env.BASE_URL)를 하곤 했다. index.js안에 이런식으로 말이다. const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes }); 그러다 createRouter는 뭐고 history는 뭐고 createWebHistory, process.env.Base_URL이 뭔지 궁금해졌다. createWebHistory를 알아보기 전에 createRouter안에는 이와 같은 구조를 가지고 있다. routes: 라우터의 라우팅 설정을 정의하는 배열입니다. 각 라우트는 경로(path)와 해당 경로에 연결된 컴포넌트(component)..
🔖
Ect/개발tip
📅
2023. 12. 7. 16:37
크롬 개발자도구가 자동으로 계속 닫힐 때
크롬 개발자도구를 눌렀을 때 1~2초뒤 자동으로 닫히는 경우 재부팅을 하면 되지만, 한창 작업중인데 프로그램 다 꺼지는게 너무 싫어서 찾아보게 되었다. 구글에 검색했을 때 ahnlap 에 대한 이야기뿐, 하지만 나는 ahnlap이 설치되어있지도 않았다. 그래도 보완와 관련되있다라 키워드를 찾았고 크롬 확장프로그램을 보던 중 파란색 방패가 활성화 되어있는게 보였다. 이름은 INISAFE CrossWeb EX이거고 은행에 접속하지 않았고 부천시 관련 홈페이지에 접속하니 활성화가 된 것 같다. 지우진 않았고 확장 프로그램관리에 가서 비활성화 한 뒤 크롬 다 껐다 다시 키고 개발자도구를 열어보니 닫히지 않는다.
크롬 개발자도구가 자동으로 계속 닫힐 때
크롬 개발자도구를 눌렀을 때 1~2초뒤 자동으로 닫히는 경우 재부팅을 하면 되지만, 한창 작업중인데 프로그램 다 꺼지는게 너무 싫어서 찾아보게 되었다. 구글에 검색했을 때 ahnlap 에 대한 이야기뿐, 하지만 나는 ahnlap이 설치되어있지도 않았다. 그래도 보완와 관련되있다라 키워드를 찾았고 크롬 확장프로그램을 보던 중 파란색 방패가 활성화 되어있는게 보였다. 이름은 INISAFE CrossWeb EX이거고 은행에 접속하지 않았고 부천시 관련 홈페이지에 접속하니 활성화가 된 것 같다. 지우진 않았고 확장 프로그램관리에 가서 비활성화 한 뒤 크롬 다 껐다 다시 키고 개발자도구를 열어보니 닫히지 않는다.
🔖
취미/테니스
📅
2023. 12. 7. 11:23
[부천시청, 신중동] 레츠플레이테니스에서 23.12.07일~
🎾백슬라이스 (23.12.07) 🎾준비동작 방향: 왼쪽으로 방향을 전환시선: 공이 높던 낮던 약간 허리보다 아래로손목: 손목을 쓰지않기, 손목에 약간의 힘으로 들고있기(발리와 비슷) 손: 오른손이 왼쪽방향으로 목을 감는다 생각하고 왼손은 라켓에 얹혀있기 하체: 오른쪽 무릎 구부리고 무게중심을 두고 오른발에 약간 힘을 준다 🎾팔로-스루[Follow-Through] 손목을 든 상태로 공을 따라간다 마치 U자를 그리듯이오른쪽으로 너무 빠지지 않게한다. 공을 친다기 보단 라켓에 공이 닿았을 때 밀어준다는 생각으로 어깨와 손목이 하나가 되듯이 손목, 엘보 부상 조심하기 🎾포핸드 (래깅)(23.12.13)포핸드만 40분동안 강습들었다. 🎾래깅 오늘의 핵심은 래깅을 함으로써 좀 더 파워를 낼 수 있도록래깅은 테이크백..
🔖
Dev.BackEnd/Mysql
📅
2023. 12. 5. 12:25
DBeaver에서 다른테이블은 F4(open Declaration)이 작동하는데 User테이블에서는 작동 안되는 이유
보통 회원은 user테이블 또는 member테이블로 테이블명을 짓습니다.저 또한 user, member를 사용하는데, 컴퓨터 환경에 따라 다를 수 있지만, user의 속성을 보고 싶어 단축키 f4 또는 마우스 오른쪽 버튼을 클릭한 뒤 open Declaration이 동작하지 않았습니다.가령 board나 file테이블은 f4로 한번에 속성을 볼 수 있는데 user테이블에서는 동작을 안했던 이유는 user나 member가 예약어이기 때문입니다.일단 색상부터 달랐는데, 별 생각없이 그냥 user는 안되나 보다 생각하고 넘어갔습니다.하지만 user는 너무 자주 사용하는 테이블이기 때문에 계속 신경을 거슬리게 했습니다. 원인 ❓ DBeaver에서 예약어는 "Open Declaration" 또는 "Go to De..
DBeaver에서 다른테이블은 F4(open Declaration)이 작동하는데 User테이블에서는 작동 안되는 이유
보통 회원은 user테이블 또는 member테이블로 테이블명을 짓습니다.저 또한 user, member를 사용하는데, 컴퓨터 환경에 따라 다를 수 있지만, user의 속성을 보고 싶어 단축키 f4 또는 마우스 오른쪽 버튼을 클릭한 뒤 open Declaration이 동작하지 않았습니다.가령 board나 file테이블은 f4로 한번에 속성을 볼 수 있는데 user테이블에서는 동작을 안했던 이유는 user나 member가 예약어이기 때문입니다.일단 색상부터 달랐는데, 별 생각없이 그냥 user는 안되나 보다 생각하고 넘어갔습니다.하지만 user는 너무 자주 사용하는 테이블이기 때문에 계속 신경을 거슬리게 했습니다. 원인 ❓ DBeaver에서 예약어는 "Open Declaration" 또는 "Go to De..