전체 글
-
[JavaScript] 스크롤바 위치감지 이벤트JavaScript 2024. 4. 1. 17:27
스크롤바를 이동하여 최상단으로 이동하는 맨위로 버튼이나, 더보기 이벤트를 동작시키기 위해서는 현재 스크롤바의 위치를 감지하는 로직이 필요하다. 아래 그 예시를 기록으로 남긴다. document.body.addEventListener('scroll', () => { let isScrollDone = document.body.offsetHeight + document.body.scrollTop >= document.body.scrollHeight ? true : false; //총 스크롤 길이보다 스크롤바길이 + 스크롤이동길이가 같거나 크면 스크롤바는 최하단이다. if (document.body.scrollTop > 0) { if (isScrollDone) { this.moreshow = true; } el..
-
[Do it! Vue.js 입문] Todo List 수정기능추가 ver2VueJs공부 2024. 2. 2. 23:42
오랜만에 뷰를 다시 공부할 겸 TodoList를 만들면서, 이전에 만들었던 수정기능보다 간단한 방법이 생각나서 기록으로 남긴다. - 모든 데이터의 처리는 App.vue에서 담당하며 하위 컴포넌트들은 데이터 처리를 App.vue로 $emit() 으로 요청한다. - todoItems에 데이터를 담을 때, Date().getTime()을 id로 관리하여 처리하도록 하였다. - 등록시간으로 sort하여 등록순으로 리스트가 출력되도록 처리하였다. - 샘플 소스는 페이지 하단에 기재함. [App.vue] 수정method - TodoList.vue에서 modifyItem 이벤트를 받으면 modifyItem 을 수행하여 변경사항을 저장한다. - localStorage에 기존과 같은 key로 setItem할 경우 기존 ..
-
[CleanCode 요약] 3.함수개발서적 공부 2024. 1. 21. 14:53
3.1예시코드 public static String testtableHtml(PageData pageData, boolean includeSuiteSetup) throws Exception{ WikiPage wikiPage = pageData.getWigiPage(); StringBuffer buffer = new StringBuffer(); if(pageData.hasAttribute("Test")){ if(includeSuiteSetup){ WikiPage suiteSetup = PageCrawlerImpl.getInheritedPage( SuiteResponder.SUITE_SETUP_NAME, wikiPage ); if (suiteSetup != null) { WikiPagePath pagePat..
-
[Clean Code 요약] 2. 의미있는 이름개발서적 공부 2024. 1. 21. 13:17
의도가 명확한 변수명 : 이름만으로도 이 변수의 역할을 직관적으로 이해할 수 있는 이름을 사용한다. 구분에 의미가 있어야 한다. a1, a2, t1, t2따위의 컴파일통과만을 목적으로하는 불성실한 이름은 피해야 한다. 발음하기 쉬워야한다. 읽기 쉬운 이름은 협업시의 원활한 소통에 도움을 준다. 검색하기 쉬운 이름을 사용한다 클래스 이름은 명사형, 메서드 이름은 동사형이 좋다. 1 개념에 1 단어로 통일하라. 동의어를 남발하여 혼란을 주지 않을 것. 마땅한 단어가 없다면 문제영역에서 이름을 차용한다. 맥락을 함께 표현할 수 있는 이름은 훌륭하다. 단 불필요한 맥락은 생략한다. firstName, lastName, city, state, zipcode 등. 이름만 보아도 주소를 표현하는 변수명이라는 것을 알..
-
[Clean Code 요약] 1. 클린코드개발서적 공부 2024. 1. 21. 13:04
나쁜코드란? 오랜시간동안 여러 이해관계자에 의해 얽히고 섥혀 유지보수하기 곤란해져버린 코드. 문제의 원인을 파악하기 힘든 코드. 로직 파악이 난해한 코드. ... 의도가 명확하지 않고 수행하는 로직의 가독성이 좋지 않아 내용 파악이 힘들며 기대한 동작외 별도 기능들이 얽혀있는 코드가 나쁜코드라고 할 수 있겠다. 클린코드? - 읽기 쉽고 단순하며 당사자 외 인원이라도 로직을 명확히 이해할 수 있다. - 기대대로 한가지 기능을 충실히 수행한다. 비야네 스트롭스트룹 ( C++ 창시자) 효율적이며 교묘하고 단순하여 보기에 즐거운 코드. 철저한 오류처리를 하는 코드. 한가지의 기능을 충실히 수행하는 코드. 그래디 부치 (Object Oriented Analysys and Design with Application..
-
Vue SpringBoot 연동하기VueJs공부 2024. 1. 21. 12:40
화면단은 Vue, 백단은 SpringBoot를 Proxy방식으로 연동하는 방법을 기록한다. Front와 Back은 분리하여 개발하는 것이 편의성이 좋으므로 아래와 같은 구조로 분리하겠다. 1. Vue 설정 1.1 vue.config.js에서 proxy방식을 사용하기 위한 설정을 추가한다. build후 결과물 저장위치를 outputDir, back단 호출방식과 주소를 devServer 오브젝트에 proxy를 key로 주어 설정한다. back단 호출방법은 localhost:port/api/xxx 이다. 1.2 back단 호출 함수 선언 및 테스트용 버튼 구현 1.3 npm run build 실행: outputDir에 지정한 위치에 빌드생성 2. SpringBoot 설정 2-1 . Controller /api..
-
[JavaScript] 클로저JavaScript 2024. 1. 17. 10:24
클로저(Closure)는 함수와 해당 함수가 선언된 렉시컬 스코프(Lexical Scope) 사이의 관계를 나타내며, 함수가 정의될 때의 환경(스코프)을 기억하고, 함수가 호출될 때 그 환경을 사용할 수 있도록 하는 개념입니다. 주로 함수 내부에서 함수를 정의하고, 내부 함수가 외부 함수의 변수에 접근할 때 효과가 나타납니다. 이 성질을 통해 내부 함수로부터 외부함수의 변수에 접근할 수 있다. function outerFunc(x){ function innerFunc(y){ return x + y; } return innerFunc; } let closure = outerFunc(10); //외부함수의 변수 x를 10으로 설정 let result = closure(5); //내부함수의 변수 y를 5로 설..
-
[SpringBoot] Proxy방식으로 CORS 해결하기JAVA 2024. 1. 11. 20:26
CORS (Cross-Origin Resource Sharing)은 웹 페이지에서 리소스에 대한 접근을 제어하는 보안기술이며 Same-Origin Policy로 인해 발생하는 문제를 해결하기 위한 것이다. 여기서 Same-Origin Policy는 스크립트가 한 출처에서 로드된 문서와 동일한 출처를 가져야만 상호작용 할 수 있는 규칙이다. 여러 해결 방법 중, Proxy방식으로 해결하는 방법을 기록으로 남긴다. 1. CORS 구성클래스 생성 /* CORS 구성 클래스 */ @Configuration public class WebConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { ..