728x90 프로그래밍 언어7 [JS React] 컴포넌트 활용하기 아래와 같이 반복되는 코드들이 있다면 어떨까요? 지속적으로 작성하기에 비효율적이지 않을까요? 그럴때 컴포넌트를 사용하면 됩니다.import logo from './logo.svg';import './App.css';import { useState } from 'react';function App() { let [pageName, pageNameChange] = useState(['리액트 공부를 위한 페이지', 'HTML 공부를 위한 페이지', 'CSS 공부를 위한 페이지']); return ( {pageName[0]} 설명 설명 설명 {pageName[1]} 설명 설명 설명 {pageName[2]} 설명 설명 설명 );}export.. 2024. 10. 21. [JS React] state 활용하기 리액트로 프로젝트를 제작하다보면 동적으로 텍스트 등을 변경해야할 일이 생기게 됩니다. 일반적인 변수를 사용했을때 변경 되지 않기에, 동적으로 변환이 가능한 state를 사용합니다. 선언할땐 아래와 같이 선언합니다. pageName은 get, pageNameChange는 set이라고 생각하면 됩니다. let [pageName, pageNameChange] = useState('리액트 공부를 위한 페이지'); 활용하면 동적으로 텍스트를 변경 할 수 있는 간단한 기능을 만들 수 있습니다. import logo from './logo.svg';import './App.css';import { useState } from 'react';function App() { let [pageName, pageNa.. 2024. 10. 21. [JS React] JSX 문법 알아보기 리액트를 설치하면 아래와 같은 코드들이 나와 있을 것이다. 그럼 HTML과는 다른 점을 찾을 수 있을 것이다. class가 아닌 'className'을 사용한다는점. JSX에선 className으로 사용한다. 만약 그냥 class를 사용하면 JS의 클래스가 나오게 되는 것이다.import logo from './logo.svg';import './App.css';function App() { return ( Edit src/App.js and save to reload. Learn React );}export default App; JSX에서 변수를 이용하고 싶.. 2024. 10. 21. [JS React] Mac 환경에서 설치하기 우선 리액트를 사용하기 위해 Node JS를 설치해준다. https://nodejs.org/en Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org 프로젝트를 생성하려는 폴더에 우클릭한 후, '폴더에서 새로운 터미널 열기'를 눌러준다. 이후 해당 문구를 터미널에 넣어준다. sudo npx create-react-app 파일명 이렇게 비밀번호를 요구할 수도 있는데, 그냥 입력해주면 된다. 조금 기다리면 이처럼 완료된다. 그러면 VSCode에 넣어주면 된다. public/App.js를 수정하면 되는데, 맥의 보안 때문에 저장이 안될 수도 있.. 2024. 10. 21. [C#] 객체지향 4가지 특성 객체 지향 프로그래밍이란?컴퓨터 프로그램을 명령어 목록으로 보는 시각에서 벗어나 여러 개의 단위, 즉 "객체"들의 모임으로 파악하고자 하는 것. 1. 캡슐화서로 연관된 속성과 기능을 하나의 캡슐로 만들어 데이터를 외부로부터 보호하는 것. 데이터 보호: 외부로부터 클래스에 정의된 속성과 기능을 보호데이터 은닉: 내부의 동작을 감추고 외부에는 필요한 부분만 노출 2. 상속기존의 클래스를 상속받은 파생 클래사가 기존 클래스의 속성과 매서드를 재사용하고 확장할 수 있게 하는 것. 재사용성: 한 번만 정의하고, 간단하게 재사용 가능 3. 다형성 어떤 객체의 속성이나 기능이 상황에 따라 여러 가지 형태를 가질 수 있는 것.다른 형식들은 동열한 형식처럼 다룰 수 있다.다운 캐스팅과 업 캐스팅 같은 변환 기능.. 2024. 9. 3. [C#] 메모리의 구조 메모리 구조프로그램이 실행되기 위해서는 프로그램이 메모리에 로드 되어야 합니다.또, 사용되는 변수 등을 저장할 메모리도 필요합니다. 그렇기에 운영체제는 4개의 메모리 공간으로 나눠 제공하고 있습니다. 1. 코드(code) 영역2. 데이터(data) 영역3. 스택(stack) 영역4. 힙(heap) 영역 코드(code) 영역소스코드가 저장되는 영역으로 텍스트 영역이라고도 부릅니다. 0과 1로 이루어진 기계어 형태로 저장됩니다. 실행 파일을 구성하는 함수, 제어문, 상수 등이 저장됩니다. 데이터(data) 영역전역 변수와 정적 변수(static)이 저장되는 영역입니다. 데이터 영역은 프로그램의 시작과 함께 할당되며, 프로그램이 종료되면 소멸합니다. 스택(stack) 영역함수 호출과 관계되는 지역 .. 2024. 8. 26. [C#] 가비지 컬렉션 (Garbage Collection, GC) 가비지 컬렉션이란? 메모리 영역 중 힙 영역의 경우 메모리를 할당하고 어떤 행동을 하지 않는다면 계속 메모리가 올라온 상태로 유지됩니다. C와 C++에서는 사용자가 직접 할당 해제를 해줘야 했지만 C# 및 JAVA와 같은 언어에서는 가비지 컬렉션이 존재합니다. 가비지 컬렉션이 직접 할당 해제를 해주어 메모리 관리를 편리하게 합니다. 한 마디로 정리하자면 메모리 관리를 자동으로 해주는 녀석인 것입니다. 가비지란?reference type의 변수들은 스택 메모리에 주소값을 저장하고, 힙 메모리에 접근하는 방식으로 사용됩니다. 해당 변수를 사용한 후 함수가 종료되면 지역 변수가 함께 지워지며 스택 메모리에 있는 주소값이 사라지게 된다. 그럼 힙 메모리에 저장된 값은 더 이상 접근할 수 없는 상태가 됩니다... 2024. 8. 22. 이전 1 다음 728x90
