본문 바로가기
반응형

분류 전체보기158

@NoArgsConstructor @NoArgsConstructor @NoArgsConstructor(access = AccessLevel.PROTECTED)는 Lombok 프로젝트에서 제공하는 애노테이션 중 하나로, 주로 클래스에 붙여서 기본 생성자를 생성하는 역할을 합니다. 이 애노테이션은 기본 생성자를 생성하되, 접근 제어자를 protected로 설정하는 기능을 수행합니다. 여기서 각 구성 요소에 대한 설명은 다음과 같습니다: @NoArgsConstructor: Lombok이 해당 클래스에 대해 자동으로 생성자를 만들도록 지시하는 애노테이션입니다. access = AccessLevel.PROTECTED: 생성된 기본 생성자의 접근 제어자를 protected로 지정합니다. 즉, 이 생성자는 같은 패키지 내에서 혹은 해당 클래스를 상속.. 2023. 11. 21.
Netty Netty(네티)는 네트워크 응용 프로그램을 개발하기 위한 고성능, 이벤트 기반의 네트워크 프레임워크입니다. Netty는 Java로 작성되었으며, TCP, UDP, HTTP 및 기타 다양한 프로토콜을 지원하는 다목적 네트워크 프로그래밍을 위해 설계되었습니다. 여기에는 다양한 기능이 포함되어 있어 대규모의 분산 시스템 및 서버 개발에 적합합니다. Maven 프로젝트에서 pom.xml 파일에 의존성 dependency 추가 io.netty netty-all 4.1.86.Final Netty 구조 application.yml netty: server: use: true port: 2xxx client: use: true host: 1xx.xxx.xx.xx port: 3xxx requestTime: 10 app.. 2023. 11. 21.
React #3 Components 와 Props React #3 함수 컴포넌트 function funcComponent(props) { return Hello, {props.name}; } 클래스 컴포넌트 class classComponents extends React.Component { render() { return Hello, {this.props.name}; } } React 관점에선 위 코드의 함수 컴포넌트와 클래스 컴포넌트는 동일한 컴포넌트이다. 컴포넌트 렌더링 function funcComponent(props) { return 안녕, {props.name}; } const root = ReactDOM.createRoot(document.getElementById('root')); const element = ; root.render(e.. 2023. 11. 9.
React #2 - 엘리먼트 랜더링 React #2 엘리먼트 렌더링 const root = ReactDOM.createRoot( document.getElementById('root') ); const element = Hello, Son; root.render(element); React 엘리먼트를 렌더링 하기 위해 DOM 엘리먼트를 ReactDOM.createRoot()에 전달 후 root.render()에 전달해야 한다. 랜더링 된 엘리먼트 업데이트 const root = ReactDOM.createRoot( document.getElementById('root') ); function setTime() { const element = ( Hello, world! It is {new Date().toLocaleTimeString()}.. 2023. 11. 8.
React #1 - JSX React #1 JSX란? JavaScript를 확장한 문법이고, React와 함께 사용할 것을 권장한다고 한다. Vue를 공부하던 사람은 React의 방식인 JavaScript 코드 안에서 UI 코드를 작업하는 게 익숙하지 않을 것이다. 물론 나도 Vue를 먼저 공부했기에 익숙하지가 않다.. ㅎ 그런데 이러한(JavaScript 코드 안에 UI 관련 작업) 방식이 시각적 그리고 에러 및 경고 메시지도 좀 더 직관적으로 표시한다고 한다. JSX에 표현식 포함하기 const playerName = 'Son'; const element = EPL Best Player, {value}; 함수 호출 function formatPlayerName(user) { return player.firstName + ' '.. 2023. 11. 7.
JavaScript - 비동기 / 콜백함수 비동기 처리란? JavaScript의 비동기 처리는 특정 로직의 실행이 끝날때까지 기다려주지 않고 나머지 코드를 먼저 실행하는것을 비동기 처리 ajax 비동기 처리 방식 function getAfunc() { var data; $.get('https://xxxx.com/xxxx/1', function(res) { data = res; }); return data; } console.log(getAfunc()); // undefined HTTP GET 요청을 날리고 응답으로 res에 응답데이터가 담기고, 그리고 선언한 data 에 데이터를 저장합니다. 여기서 getAfunc 를 실행시켰을 때 undefined 가 뜹니다. 이유는 데이터를 요청하고 받아올 때까지 기다려주지 않고 다음 코드를 실행하기 때문입니.. 2023. 11. 6.
Vue.js - Props(속성) Vue.js Props(속성): 컴포넌트 간의 데이터 전달과 효율적인 통신 Vue.js는 컴포넌트 기반의 프레임워크로, 여러 컴포넌트들을 조합하여 웹 애플리케이션을 구축할 수 있습니다. 이때 컴포넌트 간에 데이터를 전달하고 효율적으로 통신하기 위해 Props라는 개념을 사용합니다. Props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 메커니즘을 제공합니다. Props의 기본 사용 Props를 사용하려면 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하고, 자식 컴포넌트에서는 받은 Props를 사용할 수 있습니다. 부모 컴포넌트에서 Props 전달하기 자식 컴포넌트에서 Props 사용하기 {{ propName }} 위의 예제에서 propName이라는 Props를 자식 컴포넌트에서 사용하고 있습니.. 2023. 10. 20.
Vue.js - Watch Vue.js의 Watch 옵션: 데이터 감시의 핵심 Vue.js는 데이터의 변경을 감지하고 이에 대응하는 여러 가지 방법을 제공합니다. 그 중 하나가 Watch 옵션입니다. Watch는 데이터의 변화를 감시하고 특정 동작을 수행하는데 사용됩니다. 이것은 데이터의 변화에 대응하여 비동기적 또는 계산적인 동작을 수행하는 데 매우 유용합니다. Watch 옵션의 기본 구조 Vue 인스턴스의 옵션 객체 내부에 "watch" 속성을 추가하여 데이터를 감시합니다. 간단한 구조는 다음과 같습니다. new Vue({ data: { message: 'Hello, Vue!' }, watch: { // 감시할 데이터 속성 message: function(newMessage, oldMessage) { // 데이터가 변경될 때 .. 2023. 10. 20.
Vue.js - 라이프사이클 Vue.js 라이프사이클: 애플리케이션의 핵심을 이해하기 Vue.js는 현대적인 웹 애플리케이션을 개발하기 위한 강력한 프론트엔드 프레임워크입니다. Vue.js 애플리케이션을 개발할 때, 개발자들은 애플리케이션의 상태 변화와 동작을 이해하고 관리해야 합니다. 이를 돕기 위해 Vue.js는 컴포넌트 라이프사이클을 제공합니다. 라이프사이클은 컴포넌트가 생성되고 업데이트되며 파괴되는 일련의 단계입니다. 1. Creation (생성) beforeCreate: 컴포넌트가 생성되고 데이터가 초기화되기 전에 호출됩니다. created: 컴포넌트가 생성되고 데이터가 초기화된 후에 호출됩니다. 이 단계에서 데이터와 이벤트 리스너를 설정할 수 있습니다. 2. Updating (업데이트) beforeMount: 컴포넌트가 .. 2023. 10. 20.
Throttling & Debouncing(메모리 누수 관리) Throttling과 Debouncing은 JavaScript 및 웹 개발에서 이벤트 핸들링과 비동기 작업 관리에 사용되는 중요한 개념입니다. 이 두 기술은 메모리 누수 및 성능 개선을 위해 사용됩니다. 1. Throttling (쓰로틀링): Throttling은 이벤트 핸들러가 일정한 간격으로만 호출되도록 하는 기술입니다. 예를 들어, 스크롤 이벤트나 리사이즈 이벤트와 같이 빈번하게 발생하는 이벤트에 대한 핸들러에서 Throttling을 사용하면 이벤트 핸들러가 과도하게 호출되지 않고, 일정한 간격으로 제한됩니다. 이로써 성능을 개선하고 메모리 누수를 방지할 수 있습니다. 2.Debouncing (디바운싱): Debouncing은 연속적으로 발생하는 이벤트 중 마지막 이벤트를 기준으로 일정 시간이 지난.. 2023. 9. 22.
LIST

티스토리툴바