반응형

전체 글 90

양방향 바인딩과 단방향 바인딩

데이터 바인딩이란? 데이터 바인딩은 화면에 표시되는 데이터와 브라우저 메모리 내의 데이터(여러 개의 JavaScript 객체)를 동기화하는 프로세스이다. 예를 들어, HTML 페이지에서 서버나 스크립트로부터 받은 데이터를 표시한 후, 해당 데이터가 변경되면 HTML 페이지 상의 데이터도 자동으로 갱신하는 과정을 말한다. 양방향 바인딩(Vue, Angular) 양방향 데이터 바인딩은 JavaScript와 HTML 사이에서 ViewModel을 통해 양방향으로 데이터가 연결되어, 한 쪽에서의 변경이 다른 쪽에 자동으로 반영되는 구조를 말한다. 이 구조에서는 데이터 변경이 자동으로 DOM을 업데이트하거나, 페이지 내에서 모델의 변경을 자동으로 감지한다. 장점 코드량이 크게 줄어들며, 유지보수 및 관리가 용이해진..

IT/React 2024.03.04

SPA를 선택한 이유, 기존 MPA와의 차이점

기존의 MPA(Multi-Page Application)와 SPA(Single Page Application)의 차이점 JSP (Java Server Pages) 서버 사이드 렌더링(SSR): JSP는 클라이언트의 요청에 대해 서버에서 HTML을 생성하고 렌더링하는 방식이다. 이는 매 요청마다 전체 페이지를 새로 로딩하여 보여준다. 동적인 웹 페이지나 웹 애플리케이션을 구축하기 위해 사용된다. 성능과 확장성의 제한: 매번 전체 페이지를 새로 로딩하기 때문에 네트워크 사용량이 늘어나고, 사용자 경험(UX)이 저하될 수 있다. 또한 대규모 트래픽을 처리하는 데 있어 서버 부하가 증가한다. 데이터베이스 연동, 사용자 요청 처리 등 복잡한 로직을 구현할 수 있다. 이를 통해 초기 웹 개발에서 널리 사용되었으며,..

IT/React 2024.03.02

성능 저하 및 Full GC - e.printStackTrace()를 피해야 하는 이유

자바 개발 시, 예외 처리는 필수적이다. 그러나 많은 개발자들이 예외 처리를 위해 e.printStackTrace()를 사용하는 경향이 있다. 이 방식은 단순하고 직관적이지만, 성능 저하를 초래하고, 특히 가비지 컬렉션(GC)의 빈도와 깊은 관련이 있다. e.printStackTrace()의 문제점 예외 데이터의 과도한 생성 e.printStackTrace()는 예외와 스택 추적 정보를 출력하기 위해 내부적으로 문자열 객체를 생성한다. 과도한 예외 발생 상황에서 이러한 문자열 객체들이 대량으로 생성될 수 있으며, 이는 메모리 사용량을 증가시킨다. 로깅 관리의 어려움 e.printStackTrace()는 예외 정보를 표준 에러 스트림에 직접 출력하기 때문에, 이 정보를 파일이나 데이터베이스로 리디렉션하는 ..

IT/Java 2024.02.28

Try-With-Resources 개념, 자원 자동해제 처리, AutoCloseable 알아보기

파일이나 네트워크 연결 같은 시스템 자원을 사용할 때, 이러한 자원들은 사용 후 반드시 적절하게 닫아주어야 한다. 그렇지 않으면 리소스 누수가 발생하여 시스템 성능 저하 또는 다른 문제를 일으킬 수 있다. 이 문제를 해결하기 위해 자바 7에서는 'Try-With-Resources' 구문이 도입되었다. Try-With-Resources란? Try-With-Resources는 자바 7부터 도입된 구문으로, try문을 사용하여 자원을 자동으로 관리할 수 있게 해준다. 이 구문은 AutoCloseable 인터페이스를 구현한 모든 객체에 대해 작동하며, 이러한 객체들은 try문이 종료될 때 자동으로 close() 메서드가 호출되어 자원이 안전하게 닫히게 된다. Try-With-Resources 사용 예제 try ..

IT/Java 2024.02.28

Prettier 설치, 설정 .eslintrc 작성하기, VScode 자동 포매팅 설정

Prettier 설치 방법 Prettier는 코드 포맷터로, 일관된 코드 스타일을 유지하게 도와줍니다. Prettier를 설치하고 사용하는 방법은 다음과 같습니다. npm을 사용하여 Prettier 설치하기: 프로젝트 디렉토리에서 터미널을 열고 다음 명령어를 입력합니다. npm install --save-dev prettier​​ 이 명령어는 prettier를 개발 의존성으로 프로젝트에 추가합니다. .prettierrc 파일 생성하기: 프로젝트의 루트 디렉토리에 .prettierrc 파일을 생성하고, JSON 형식으로 원하는 설정을 입력합니다. .eslintrc 작성 방법 ESLint와 Prettier를 함께 사용하면 코드 품질과 일관성을 모두 잡을 수 있습니다. ESLint 설정 파일인 .eslintr..

IT/React 2024.02.18
반응형