map이랑 forEach를 언제 사용하는지 정확하게 이해가 안가서 정리map()중간연산 스트림의 각 요소를 주어진 변환(매핑) 함수에 따라 새로운 스트림의 요소로 변환데이터를 변환하는 데 사용입력 스트림과 출력 스트림의 타입이 다를 수 있음 forEach()최종연산 스트림의 각 요소를 순회하며 처리하는 동작 수행하고 결과 반환하지 않음데이터를 변환하지 않고 처리만 수행보통 데이터 출력, 로그 기록, 누적 작업 등 사이드 이펙트를 처리할 때 사용 map()과 forEach()의 차이특성map()forEach()목적데이터를 변환(매핑)데이터를 처리(소비)역할새로운 스트림을 생성스트림의 각 요소를 처리종류중간 연산최종 연산실행 시점최종 연산이 호출될 때 실행즉시 실행결과변환된 요소를 가진 새로운 스트림 반환반..

변수의 종류와 저장위치Java에서 변수가 메모리에 저장되는 과정은 JVM의 메모리 구조와 밀접한 관련자바의 메모리는 크게 메소드 영역, 힙 영역, 스택 영역, PC 레지터스, 네이티브 메소드 스택으로 구성변수가 저장되는 주요 영역은 스택과 힙 영역1. 변수의 종류와 저장 위치지역 변수저장 위치 : 스택 영역메서드나 블록 내부에 선언된 변수메서드 호출 시 스택에 생성, 호출이 끝나면 메모리에서 제거기본 자료형은 값을 직접 저장참조 자료형은 힙 영역에 저장된 객체 주소를 저장인스턴스 변수저장 위치 : 힙 영역클래스 객체(instance)가 생성될 때 힙에 저장객체가 소멸되면 GC(Garbage Collector)에 의해 제거각 객체가 고유한 값을 가집클래스 변수저장 위치 : 메소드 영역클래스 로드 시 메모리..

GitHub Docs - 워크플로 정보 워크플로 정보 - GitHub Docs트리거, 구문, 고급 기능을 포함하여 GitHub Actions 워크플로의 개략적인 개요를 가져옵니다.docs.github.com  0️⃣ github actiongithub action은 github에서 제공하는 빌드, 테스트 및 배포 파이프라인을 자동화할 수 있는 지속적 통합 및 지속적 배포 CI/CD 플랫폼리포지토리에서 PR, 이슈 생성 등 이벤트가 발생할 때 트리거되도록 워크플로우를 구성워크플로에는 하나 이상의 실행될 수 있는 작업이 포함됨각 작업은 자체 가상 머신에서 실행되며 사용자가 정의한 스크립트를 실행 등 하나 이상의 단계가 있음 1️⃣ workflow하나 이상의 작업을 실행하는 자동화된 프로세스리포지토리의 이벤트..

1️⃣ 템플릿 설정리포지토리 세팅에서 'set up templates' 선택 후 원하는 템플릿 선택 📃 템플릿 작성 2️⃣ Commit'Propose changes' 클릭 후 커밋  3️⃣ 확인ISSUE_TEMPLATE 생성 확인

1️⃣ .gitmessage.txt 파일 생성## 파일생성touch ~/.gitmessage.txt## 템플릿 작성vim ~/.gitmessage.txt  📃 템플릿 예시################# : 의 형식으로 제목을 아래 공백줄에 작성# 제목은 50자 이내, 변경사항 명확히 작성, 끝에 마침표 금지# 바로 아래 공백은 지우지 마세요 (제목과 본문의 분리를 위함)################# 본문(구체적인 내용)을 아랫줄에 작성################# 꼬리말(footer)을 아랫줄에 작성################# FEAT : 새로운 기능 추가# FIX : 버그 수정# DOCS : 문서 수정# TEST : 테스트 코드 추가# REFACTOR : 코드 리팩토링# STYLE : 코드 ..

https://docs.github.com/ko/issues/using-labels-and-milestones-to-track-work/managing-labels 레이블 관리 - GitHub Docs레이블을 만들고, 편집하고, 적용하고, 삭제하여 문제, 끌어오기 요청 및 토론을 분류할 수 있습니다.docs.github.com 1️⃣ 기본 라벨리포지토리에서 Pull request → labels를 클릭하면 확인할 수 있다.  📌 기본으로 제공되는 라벨 종류bug예기치 않은 문제 또는 의도하지 않은 동작documentation설명서 개선 또는 추가가 필요함duplicate유사한 이슈, 끌어오기 요청 또는 토론enhancement새 기능 요청good first issue최초 기여자에게 적절한 이슈help ..

1. Hooks의 개념과 useState, useEffect 1) Hook이란? hook이란 함수 컴포넌트에 클래스 컴포넌트 기능(state, lifecycle)을 지원하기 위해 나온 것 리액트의 state와 생명주기 기능의 갈고리를 걸어 원하는 시점에 정해진 함수를 실행되도록 만든 것 → Hook use---라고 명명해서 사용 2) useState state를 사용하기 위한 hook 🔎 useState 사용법 버튼을 클릭하면 카운트를 증가하고 카운트를 보여주는 컴포넌트 버튼 클릭 시 카운트가 증가하지만 재렌더링이 일어나지 않아 증가되는 값을 보여줄 수 없음 버튼을 클릭하면 setCount 함수를 호출해 카운트가 증가하고 컴포넌트가 재렌더링되면서 화면에 새로운 카운트 값을 보여줌 🔎 useState 주의..

1. State와 Lifecycle의 정의 🔎 State란? 리액트 컴포넌트의 상태, 리액트 컴포넌트의 변경 가능한 데이터를 의미 state는 개발자가 정의 렌더링이나 데이터 흐름에 사용되는 것만 state에 포함 state가 변경될 경우 컴포넌트가 재렌더링되기 때문에 성능 저하 렌더링이나 데이터 흐름과 상관없는 값은 인스턴스 필드로 정의 state는 자바스크립트 객체이다 클래스 컴포넌트는 constructor 함수 가지고 있음(= 생성자), 클래스가 생성되면 실행됨 this.state 부분이 현재 컴포넌트의 state를 정의하는 부분 함수 컴포넌트에서는 useState라는 hook을 사용해서 정의함 state는 직접 수정할 수 없다 state는 렌더링과 관련이 있기 때문에 직접 변경하기보단 setter..

1. Components와 Props의 정의 📌 Components 리액트는 컴포넌트 기반, 모든 페이지가 컴포넌트로 구성 작은 컴포넌트들을 모아서 하나의 컴포넌트를 구성하고 이러한 컴포넌트들이 모여서 전체 페이지를 구성 하나의 컴포넌트를 반복적으로 사용함으로써 전체 코드 양을 줄이고 개발 시간 단축과 유지보수가 용이 🔎 component의 역할 어떠한 속성들을 입력(Props) 받아서 리액트 element를 생성하여 리턴 📌 Props(Property) 리액트 컴포넌트의 입력, 컴포넌트의 속성을 의미 props는 글자나 색깔 등의 속성 등 컴포넌트에게 전달할 다양한 정보를 담고 있는 자바스크립트 객체 2. Props의 특징 및 사용법 📌 Props의 특징 🔎 Read-only 값을 변경할 수 없음 🔎 ..

1. Elements의 정의와 생김새 📌 Elements란? 리액트 앱을 구성하는 가장 작은 블록들 화면에서 보이는 것들을 기술 🔎 React element와 DOM element의 차이 실제 브라우저의 DOM에 존재하는 element가 DOM element 리액트의 virtual DOM에 존재하는 element가 리액트 element 즉 리액트 element는 DOM element의 가상 표현 DOM element는 리액트 element에 비해 많은 정보를 가지고 있어 상대적으로 크고 무겁다 🔎 React element const element = Hello; React.createElement 함수 호출 → 자바스크립트 객체 생성 = 리액트 element 리액트는 이 element를 이용해 실제 화..

1. JSX의 정의와 역할 📌 JSX란? A syntax extension to JavaScript → 자바스크립트의 확장 문법 JavaScript + XML/HTML을 합쳐 확장 🔎 JSX 예제코드 JSX 코드는 자바 스크립트와 HTML 코드가 결합되어 있다 const element = Hello; 📌 JSX의 역할 내부적으로 XML/HTML 코드를 자바스크립트로 변환 → React.createElement 함수 호출 → 자바스크립트 객체 생성 리액트는 생성된 객체를 읽어서 DOM을 만드는 데 사용하고 최신 상태로 유지 리액트에서 JSX는 필수는 아니지만 코드가 간결하고 가독성이 높아지기 때문에 사용하는 것을 권장 2. JSX의 장점 및 사용법 📌 JSX의 장점 간결한 코드 가독성 향상 → 버그 발견 ..

1. 직접 리액트 연동하기 📃 index.html 블로그에 오신 여러분을 환영합니다 🔎 link 태그 현재 html 파일과 외부 리소스 사이의 관계를 정의할 때 사용 css 파일을 불러오거나 favicon 같은 것을 넣기 위해 사용 🔎 React 추가하기 리액트를 사용하기 위해 DOM 컨테이너를 추가 스크립트 태그를 이용해 리액트 js파일과 리액트 컴포넌트를 가져오기 📃 style.css h1{ color: teal; font-style: italic; } 📃 MyButton.js 리액트 컴포넌트 만들기 function MyButton(props) { const [isClicked, setIsClicked] = React.useState(false); return React.createElement( '..