개념 5

[React] 리액트란 무엇인가?

1. 컴포넌트 기반 UIReact는 컴포넌트(Component) 단위로 화면을 구성한다.말 그대로 “화면을 이루는 구성 요소”를 하나하나 모듈처럼 나눠서 만드는 방식이다. 예시:Header.js – 상단 메뉴Main.js – 본문Footer.js – 하단 영역이렇게 컴포넌트로 나누면,중복 코드 제거유지보수 편리재사용 가능덕분에 대규모 UI를 체계적으로 관리할 수 있다.2. 선언형 프로그래밍 방식React는 UI를 “선언형(Declarative)” 방식으로 정의한다. 선언형 vs 명령형선언형(React): "무엇을 원하는지"만 명확하게 선언예: “이 버튼을 누르면 이 화면을 보여줘”명령형(JavaScript 등): "어떻게 할 것인지" 일일이 지시예: 버튼 클릭 → DOM 선택 → 속성 수정 → 재랜더..

Node.js/React 2025.05.04

[Node.js] Node.js란?

Node.js란 무엇인가?Node.js는 웹 브라우저가 아닌 환경에서도 JavaScript를 실행할 수 있게 해주는 자바스크립트 런타임(Runtime)이다.런타임(Runtime)이란 코드를 실행할 수 있도록 환경을 제공하는 프로그램을 뜻한다. 쉽게 말해, 자바스크립트 코드를 동작시키는 구동 엔진이라고 할 수 있다.왜 Node.js가 필요할까?원래 JavaScript는 웹페이지 내에서 간단한 기능을 만들기 위해 탄생한 언어이다.C나 Java 같은 기존의 언어들과는 다르게 문법이 유연하고 간결해서 개발 생산성이 뛰어나다.이렇게 웹 브라우저 내에서만 사용되던 JavaScript는 점점 더 많은 개발자들이 웹 브라우저 외부에서도 사용하기를 원하면서 변화가 필요해졌다. 그 결과 등장한 것이 바로 Node.js다...

Node.js 2025.05.03

데브옵스(DevOps)

DevOps란?DevOps = Development (개발) + Operations (운영)개발팀과 운영팀의 협업 문화를 통해,코드를 더 빠르고 안정적으로 배포하고 운영하는 방식 개발 -> 배포 -> 운영 -> 피드백 -> 개선의 전체 사이클을 자동화하고 효율화하려는 문화이자 방법론DevOps 사이클DevOps는 단순한 "직무"가 아니라 사이클로 존재한다DevOps 관련 기술/도구범주도구설명CI/CDGitHub Actions, Jenkins, GitLab CI코드 변경 시 자동 빌드/테스트/배포IaC (인프라 코드화)Terraform, Ansible서버 인프라를 코드로 관리컨테이너/오케스트레이션Docker, Kubernetes환경 통일, 배포 자동화모니터링Prometheus, Grafana, ELK서버 ..

자료구조 (ArrayList, HashMap, Stack, Queue, Deque)

🔹 1) 배열 (int[])int[] arr = new int[5]; // 크기 5인 배열int[] arr2 = {1, 2, 3, 4, 5}; // 배열 초기화 🔹 2) 리스트 (ArrayList)- 배열보다 크기 변경이 자유로움import java.util.ArrayList;ArrayList list = new ArrayList();list.add(10); // 추가list.add(20);System.out.println(list.get(0)); // 첫 번째 원소list.remove(0); // 첫 번째 원소 삭제System.out.println(list.size()); // 리스트 크기 🔹 3) 해시맵 (HashMap)- Key-Value 저장, 탐색이 빠름 (O(1))import java.u..

Java/알고리즘 2025.03.12

[JavaScript] jQuery

jQuery는 JavaScript를 간단하고 효율적으로 작성할 수 있게 도와주는 JavaScript 라이브러리이다. 특징간결한 코드: 복잡한 JavaScript 코드를 몇 줄로 대체 가능DOM 조작: HTML 요소를 쉽게 선택하고 조작이벤트 처리: 브라우저 간 차이 없이 클릭, 입력 등의 이벤트를 처리AJAX: 비동기 요청을 간편하게 처리크로스브라우징 지원: 다양한 브라우저에서 동일하게 동작기본 문법$() 로 요소 선택$('#id') // id$('.class') // class$('tag') // 태그 DOM 조작$('#example').text('새로운 텍스트'); // 텍스트 변경$('.example').css('color', 'red'); // CSS 스타일 변경 이벤트 처리$('#button')..

JavaScript 2024.11.17