전체 글

프로그래밍 기술 및 관심사 공유 목적으로 블로그를 운영하고 있습니다. 감사합니다.
React & React Native/이해하기

[React] 캐시 무효화(Cache Busting) 이해하고 적용하기

해당 글의 목적은 캐시 무효화란 무엇이고 어떠한 해결 방법이 있는지에 알아보기 위한 목적으로 글을 작성하였습니다. 1) 문제점 발생💡 웹 브라우저에서 새로 배포를 하였는데도 이전 파일을 바라보고 있는 문제가 발생하였습니다. 이 문제는 브라우저 내에서 ‘강력 새로고침’ 혹은 ‘캐시 초기화’를 수행해야지만 이전 버전에 캐시가 사라지고 새로운 버전을 바라보아서 해결이 되었는데, 매번 변경 때마다 사용자 들이 ‘캐시 초기화’를 수행해야 하는 번거로움이 생겨서 이러한 작업 없이 수행 할 수 있도록 Cache Busting을 적용합니다. 2) Cache Busting💡 Cache Busting 이란? - Cache를 Busting(부수다, 고장내다) 라는 의미에 Cache Busting은 이전에 남아 있는 캐시로 ..

Javascript & Typescript/종합

[JS] 문자열(String) 조작 함수 이해하기

해당 글의 목적은 문자열을 조작하는 함수로 문자열 조작에 사용되는 메서드에 대해서 공식 문서를 읽어보고 예재를 통해서 이해를 돕기 위해 작성한 글입니다. 해당 글에서는 모든 메서드에 대해서는 포함되어 있지 않고 자주 사용되는 메서드 위주로 작성하였습니다. (상시 업데이트 예정입니다) 0. 요약 번호 입력 타입 주요 기능 메서드 명 반환 타입 1 Array / string 문자열 조작 split() / Array.from() / Spread Operator string 2 string 문자열 조작 split() Array 3 string 문자열 조작 charCodeAt() / fromCharCode() number 4 string 문자열 조작 substring() string 5 string 문자열 조작 ..

Javascript & Typescript/이해하기

[JS] 이벤트 버블링, 이벤트 캡처링, 이벤트 위임 이해하기

해당 글에서는 브라우저가 이벤트를 감지하는 방법을 이해하기 위한 목적으로 이벤트 버블링, 이벤트 캡쳐링, 이벤트 위임에 대해 이해합니다. 💡 해당 방식에서는 'React'를 기준으로 작성하였기에 'addEventListener'를 이용한 이벤트 처리 방식을 사용하지 않고 예시를 작성하였습니다. [참고] React 공식 사이트 이벤트 처리하기 – React A JavaScript library for building user interfaces ko.reactjs.org 1) 이벤트 버블링(Event Bubbling) 💡 이벤트 버블링(Event Bubbling)이란? - 특정 화면 요소에서 이벤트가 발생하였을 때, 해당 이벤트가 발생하는 위치뿐만 아니라 상위의 화면 요소들로 전파되는 특성을 의미합니다. ..

Javascript & Typescript/종합

[JS] 배열(Array) 조작 함수 이해하기 - 2

해당 글의 목적은 배열 조작 함수로 배열을 조작하는 사용되는 메서드에 대해 공식 문서를 읽어보고 예제를 통해 이해를 돕기 위해 작성한 글입니다. 여러 챕터로 구성을 하였고 모든 메서드에 대해서는 포함하고 있지 않으며 자주 사용되는 메서드 위주로 작성하였습니다. (상시 업데이트 예정입니다) 💡 해당 글은 이전에 작성한 글을 참고하시면 다양한 함수를 이해하는데 도움이 됩니다. 🙏 [JS] 배열 조작 함수 -1 (from, splice, reduce, filter, join, sort, fill) 해당 글의 목적은 배열 조작 함수로 배열을 조작하는 사용되는 메서드에 대해 공식 문서를 읽어보고 예제를 통해 이해를 돕기 위해 작성한 글입니다. 여러 챕터로 구성을 하였고 모든 메서드에 adjh54.tistory.c..

Javascript & Typescript/종합

[JS] 배열(Array) 조작 함수 이해하기 - 1

해당 글의 목적은 배열 조작 함수로 배열을 조작하는 사용되는 메서드에 대해 공식 문서를 읽어보고 예제를 통해 이해를 돕기 위해 작성한 글입니다. 여러 챕터로 구성을 하였고 모든 메서드에 대해서는 포함하고 있지 않으며 자주 사용되는 메서드 위주로 작성하였습니다. (상시 업데이트 예정입니다) 1. 요약 chapter 번호 입력 타입 주요 기능 메서드 명 리턴 타입 1번 글 1 Array 배열 생성 [] / new Array / Array.from() Array 1번 글 2 Array 배열 초기화 [] / new Array / splice() Array 1번 글 3 Array 배열 조작 push() / unshift() / pop() / shift() Array 1번 글 4 Array 배열 조작 reduce(..

Java/Spring Boot

[JAVA] Spring Boot내에서 MyBatis & PostgreSQL 연동하기

해당 글에서는 Spring Boot내에 Mybatis와 PostgreSQL을 연결하고 로직 처리를 위한 환경 설정 및 파일 구성에 대해서 공유합니다.   💡 최하단에 해당 환경 구성과 관련하여 '로컬 DB 구성 방법', 'HikariCP'를 통한 Connection 관리, 'Spring Security' 구성 및 'JWT'를 통한 인증 방법에 대해서 관련 글들도 참고해 보시면 좋을 것 같습니다 🙏   1) 사전 확인 작업1. DB 드라이버 설치 확인# postgreSQL 버전을 확인한다.$ postgres --version# 설치가 안되었다면 설치를 한다.$ brew install postgresql  2. 개발 환경 확인구분언어 / 라이브러리 언어Java웹 프레임워크Spring BootPersist..

Javascript & Typescript/이해하기

[JS] 클로저(Closure) 이해하기

해당 글의 목적은 클로져에 대한 정의를 이해하고 왜 사용을 해야 하는지에 대하여 이해를 돕기 위해서 작성한 글입니다.       💡 [참고] 클로저를 이해하기 위해서는 이전에 작성한 '스코프'에 관련된 글을 읽고 오시면 이해하는데 도움이 됩니다. [JS] 스코프(Scope) 이해하기해당 글은 스코프와 스코프의 종류에 대해서 이해를 돕기 위해 작성한 글입니다. 1) 스코프(Scope) 💡 스코프(Scope)란? - 선언된 변수에 대해서 접근할 수 있는 유효한 범위를 의미한다. 만약, 변수adjh54.tistory.com   1) 클로저(Closure)💡 클로저(Closure)- 함수와 그 함수가 선언된 어휘적 환경(Lexical Environment)의 조합을 의미합니다. - 즉, 함수가 그 당시에 ..

개발 Tip/IntelliJ

[IntelliJ] SQL Resolution Scopes 기능 - Mybatis의 *.xml과 DB 연결하기

해당 글에서는 IntelliJ의 ‘SQL Resolution Scopes’ 기능을 이용하여 Mybatis의 xml 파일과 데이터베이스를 연결하는 방법에 대해 환경설정을 하는 방법을 공유하는 목적으로 작성하였습니다. 1) 연결 하려는 Database 종류를 선택합니다. 💡 설정 순서 1. IntelliJ - Preferences... 를 누릅니다 2. 언어 및 프레임워크 - SQL 파생 언어 - 프로젝트 SQL 파생 언어를 선택합니다. 3. ‘완료’ 버튼을 누릅니다. 2) 연동을 하는 영역을 지정합니다. 1. SQL 해결 범위 탭 선택 💡 설정 순서 1. IntelliJ - Preferences... 를 누릅니다 2. 언어 및 프레임워크 - SQL 해결 범위 - '+' 버튼을 누릅니다. 3. ‘완료’ 버튼..

adjh54
Contributor9