분류 전체보기 87

12월 3주차 공부 기록

javaScript 공부호이스팅 => 끌어올리는 뜻 함수 표현식 중 가장 많이 사용하는 화살표 함수 콜백함수 => 자신이 아닌 다른 함수에, 인수로써 전달된 함수를 의미 스코프 => 전역(전체 영역) 스코프 / 지역(특정 영역) 스코프=>  전역 스코프 : 전체 영역에서 접근 가능=>  지역 스코프 : 특정 영역에서만 접근 가능 map=> 배열의 모든 요소를 순회하면서, 각각 콜백함수를 실행하고 그 결과값을 모아서 새로운 배열로 변환 async => 어떤 함수를 비동기 함수로 만들어주는 함수=> 함수가 프로머스를 반환하도록 변환해주는 그런 키워드 await=> async 함수 내부에서만 사용이 가능한 키워드=> 비동기 함수가 다 처리되기를 기다리는 역할회사 - next.js를 사용하여 투두리스트 만들기 ..

기타 2024.12.22

[C#] DataGridView을 이용한 GridNotepad 제작

visual code를 사용하여 c# 프로그램 시작 - 새 프로젝트 만들기를 클릭하여 새로운 프로젝트 생성   gui로 구동 가능한 화면을 만들기 위해 windowForm을 선택하여 프로젝트 생성  GridNotePadForm gui 화면 구상하기gui에 필요한 도구들을 사용하기 위해서 파일에서 도구상자를 선택한 후 왼쪽에 배치gui 속성을 관리할 수 있는 속성 관리자를 선택한 후 오른쪽에 배치 GridNotePadForm Gui 구현panel 3개를 도구상자에서 가지고 와서 Dock 설정을 통해 위치 설정맨 위 상단 패널에는 flowLayoutPanel을 도구상자에서 선택하고 button 속성을 2개를 생성한 후  버튼의 id값을 btnSave, btnOpen으로 변경하고 각 버튼의 이름을 저장과 열기..

Coding language/C# 2024.10.01

[JSP] Eclipse + Tomcat 환경 설치 <Window 컴퓨터 기반>

🖥️ JDK 설치https://www.oracle.com/kr/java/technologies/downloads/에서 java21 또는 17 다운로드java 22버전도 있지만 아직 안정화가 덜 되어서 안정하게 21을 다운로드 받는 것을 추천 Download the Latest Java LTS FreeSubscribe to Java SE and get the most comprehensive Java support available, with 24/7 global access to the experts.www.oracle.com가운데에 있는 JDK 설치 프로그램 클릭JDK 설치 창의 Next 클릭저장장소를 변경하지 않는다면 Next 클릭다운로드가 완료되면 close 클릭설치되었는지 확인하기 위해 컴퓨터의..

Back/JSP 2024.09.02

[android] 안드로이드 스튜디오 설치

🖥️ 안드로이드 스튜디오 Koala 다운로드https://developer.android.com/studio?hl=ko에 접속하여 안드로이드 스튜디오 Koala 다운로드 클릭 Android 스튜디오 및 앱 도구 다운로드 - Android 개발자  |  Android Studio  |  Android DevelopersAndroid Studio provides app builders with an integrated development environment (IDE) optimized for Android apps. Download Android Studio today.developer.android.com 이용약관에 동의 선택하고 안드로이드 스튜디오 Koala 다운로드 클릭안드로이드 스튜디오 프로그램..

Front/android 2024.09.01

[React] 리액트 Hook (훅)

🛜 useCounter() Custom Hook 만들기useCounter Hook은 초기 카운드 값을 파라미터로 받아서 카운트라는 이름의 state를 생성하여 값을 제공하고 카운트 증가 및 감소를 편리하게 할 수 있도록 함수를 제공하는 HookuseCounter Hook을 사용하면 어떤 함수 컴포넌트에서든지 카운트 기능을 쉽게 사용 가능🛜 Accommodate Component 만들기Accommodate 컴포넌트는 useCount 훅을 사용하여 카운트를 관리최대 카운트 개수는 maxCapacity라는 이름의 상수로 정의되어 있고 카운트 개수가 최대 용량을 초과하면 경고 문구가 표시되며 더 이상 입장이 불가능useEffect 훅의 작동 방식을 사용하기 위해 일부러 두 개의 useEffect 훅을 사용하..

Front/React.js 2024.08.28

[React] 댓글 컴포넌트 제작 (Component & Props)

🖨️ Component컴포넌트 기반의 구조라는 중요한 특징을 가지고 있음모든 페이지가 컴포넌트로 구성되어 있으며 하나의 컴포넌트는 또 다른 여러 개의 컴포넌트의 조합으로 구성컴포넌트를 끼워 맟춰서 새로운 컴포넌트를 개발하나의 컴포넌트를 반복적으로 사용함으로써 전체 코드의 양을 줄일 수 있어 자연스레 개발 시간과 유지 보수 비용도 줄일 수 있음자바스크립트의 함수와 비슷React 컴포넌트의 역할은 어떠한 속성들을 입력으로 받아서 그에 맞는 리액트 엘리먼트를 생성하여 리턴React 컴포넌트는 만들고자 하는 대로 props. 즉 속성을 넣으면 해당 속성에 맞춰 화면에 나타날 엘리먼트를 만들어주는 것🖨️ Props리액트 컴포넌트의 입력Props는 prop 뒤에 복수형을 나타내는 s를 붙여서 props이 여러 ..

Front/React.js 2024.08.26

[React] 리액트 버전 18

😭 Automatic Batching앞에서 배운 것처럼 리액트 컴포넌트는 상태가 업데이트될 때마다 재렌더링이 이뤄지기 때문에, 함수 컴포넌트에서 각각의 스테이트가 업데이트될 때마다 재렌더링이 발생유즈 스테이트 훅을 사용해서 선언한 각 스테이트들의 set 함수를 거의 동시에 호출하더라도 호출된 횟수만큼 재렌더링이 발생이러한 문제를 해결하기 위해서 여러 상태의 업데이트가 동시에 발생하면 이 작업들을 묶어서 한번에 처리하는 것이 배칭배칭은 컴퓨터 공학에서 여러 가지 작업을 한 번에 처리한다는 의미를 갖고 있음리액트에서의 배칭은 여러 상태의 업데이트 작업을 한 번에 묶어서 처리하는 것이라고 이해하면 됨기존 리액트 버전에서는 이러한 배칭이 리액트 이벤트 핸들러 내에서만 이루어짐리액트 버전 18에서 오토메틱 배칭..

Front/React.js 2024.08.25

[JavaScript] 자바스크립트 브라우저 객체 모델

10. 자바스크립트 브라우저 객체 모델😺 브라우저 객체 모델자바스크립트 프로그램을 통해 브라우저 창을 관리할 수 있도록 브라우저 요소를 객체화해 놓은 것  브라우저 창의 크기, 주소 표시줄, 히스토리를 포함하고 있는 것😺 Window 객체의 속성자바스크립트 객체 중 최상위 객체😺 Window 객체의 함수 alert()나 prompt()도 window 객체의 함수 -> window.alert(), window.prompt()window 객체는 기본 객체이기 때문에 window를 생략하고 alert(), prompt()로 사용할 수 있음 😺 Window 객체의 함수 alert()나 prompt()도 window 객체의 함수 -> window.alert(), window.prompt()😺 Naviga..

Front/JavaScript 2024.08.21

[React] 리액트 styled-components를 사용하여 컴포넌트 스타일링

15.리액트 styled-components를 사용하여 컴포넌트 스타일링 🤯 css와 styled Components를 사용하여 직접 컴포넌트를 스타일링 코드를 작성하기 전에 styled-components 패키지 설치npm install 명령어는 npm이라는 패키지 관리 서비스에 등록되어 있는 패키지를 설치할 수 있도록 하는 명령어Blocks 컴포넌트는 실제로 스타일드 컴포넌트를 사용하여 스타일링하는 컴포넌트스타일드 컴포넌트를 사용하는 방법과 css 코드의 전체적인 구조를 잘 기억해야함블락스 컴포넌트를 화면에 렌더링하기 위해서 index.js 파일 수정vscode의 상단에서 Terminal -> New Terminal을 눌러 새로운 터미널을 하나 실행시킴웹 브라우저의 창이 열리면서 포트에 접속이 됨화..

Front/React.js 2024.08.20

[React] 리액트 styled-components

15. 리액트 styled-components🤯 리액트 styled-components 설치명령어를 통하여 최신 버전의 리액트 style-components 설치# npm을 사용하는 경우npm install --save styled-components# yarn응ㄹ 사용하는 경우yarn add styled-components스타일이 잘 적용되었다면 회색 배경에 흰색 글씨로 안녕 리액트라는 문자열을 출력하는 컴포넌트가 잘 작동하면 이러한 화면이 등장리액트 styled-components의 MainPage.jsx 파일을 생성하여 코드를 작성한 후 꼭 index.js 파일에서 Mainpage를 import 해주어야 npm 실행 명령어인 npm start 작성시 실행 가능🤯 리액트 styled-compone..

Front/React.js 2024.08.20