- [ 정리/React ][처음 만난 리액트] section 6. State and Lifecycle2024-03-26 02:06:371. State와 Lifecycle의 정의 🔎 State란? 리액트 컴포넌트의 상태, 리액트 컴포넌트의 변경 가능한 데이터를 의미 state는 개발자가 정의 렌더링이나 데이터 흐름에 사용되는 것만 state에 포함 state가 변경될 경우 컴포넌트가 재렌더링되기 때문에 성능 저하 렌더링이나 데이터 흐름과 상관없는 값은 인스턴스 필드로 정의 state는 자바스크립트 객체이다 클래스 컴포넌트는 constructor 함수 가지고 있음(= 생성자), 클래스가 생성되면 실행됨 this.state 부분이 현재 컴포넌트의 state를 정의하는 부분 함수 컴포넌트에서는 useState라는 hook을 사용해서 정의함 state는 직접 수정할 수 없다 state는 렌더링과 관련이 있기 때문에 직접 변경하기보단 setter..
- [ 정리/React ][처음 만난 리액트] section 5. Components and Props2024-03-25 22:35:051. Components와 Props의 정의 📌 Components 리액트는 컴포넌트 기반, 모든 페이지가 컴포넌트로 구성 작은 컴포넌트들을 모아서 하나의 컴포넌트를 구성하고 이러한 컴포넌트들이 모여서 전체 페이지를 구성 하나의 컴포넌트를 반복적으로 사용함으로써 전체 코드 양을 줄이고 개발 시간 단축과 유지보수가 용이 🔎 component의 역할 어떠한 속성들을 입력(Props) 받아서 리액트 element를 생성하여 리턴 📌 Props(Property) 리액트 컴포넌트의 입력, 컴포넌트의 속성을 의미 props는 글자나 색깔 등의 속성 등 컴포넌트에게 전달할 다양한 정보를 담고 있는 자바스크립트 객체 2. Props의 특징 및 사용법 📌 Props의 특징 🔎 Read-only 값을 변경할 수 없음 🔎 ..
- [ 정리/React ][처음 만난 리액트] section 4. Rendering Elements2024-03-24 16:08:321. 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를 이용해 실제 화..
- [ 정리/React ][처음 만난 리액트] section 3. JSX2024-03-23 19:36:461. 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의 장점 간결한 코드 가독성 향상 → 버그 발견 ..
- [ 정리/React ][처음 만난 리액트] section 2. 리액트 시작하기2024-03-23 17:11:371. 직접 리액트 연동하기 📃 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( '..
- [ 정리/React ][처음 만난 리액트] section 1. 리액트 소개2024-03-23 15:22:191. 리액트는 무엇인가? 📌 리액트란? 리액트란 사용자 인터페이스(User Interface, UI)를 만들기 위한 자바스크립트 라이브러리 🔎 사용자 인터페이스 사용자와 컴퓨터 프로그램이 서로 상호작용을 하기 위해 서로 간에 입력과 출력을 제어해 주는 것 버튼, 텍스트 입력창 등 🔎 라이브러리 특정 프로그래밍 언어에서 자주 사용되는 기능들을 정리해 모아 놓은 것 🔎 프레임워크와 라이브러리 차이 흐름의 제어 권한이 누구에게 있는지 차이, 제어 권한이 개발자에게 있으면 라이브러리이고 프레임워크는 제어 권한이 자신에게 있음 📌 SPA(Single Page Application) 하나의 페이지만 존재하는 웹사이트 또는 웹 애플리케이션 하나의 HTML 틀을 만들어 놓고 사용자가 특정 페이지를 요청할 때 안에 해당..
- [ 참고/Mac ][mac] h2 데이터베이스2024-03-12 16:03:16H2 Database 자바로 작성된 관계형 데이터베이스 관리 시스템으로 로컬환경에서 테스트나 개발을 위해 간편하게 사용 특징 인 메모리 DB로 메모리에 데이터가 저장되고 애플리케이션이 종료되면 모든 메모리는 삭제된다. 별도의 설치가 필요 없고 작은 용량과 매우 가볍고 빠르기 때문에 개발 단계나 테스트 코드에서 자주 사용된다. RDBMS보단 안정성이나 성능에서는 떨어지기 때문에 대규모 프로젝트에서는 적합하지 않다. 다운로드 https://h2database.com/html/main.html H2 Database Engine H2 Database Engine Welcome to H2, the Java SQL database. The main features of H2 are: Very fast, open s..
- [ 참고/Mac ][mac] mysql 실행(DBeaver Public Key Retrieval is not allowed 오류)2024-03-07 22:33:40터미널에서 mysql 실행하기 ## mysql 실행/종료하기 mysql.server start mysql.server stop ## 데몬으로 실행/종료하기 brew services start mysql brew services stop mysql DBeaver에서 연결 불가 "Public Key Retrieval is not allowed" 오류 발생 allowPublicKeyRetrieval TRUE로 변경!
- [ 정리/Git ][Git] Git Branch 전략 - git-flow2024-02-05 00:53:01📌 브랜치 전략을 배우는 이유 여태 프로젝트를 진행하면서 메인 브랜치에서 모든 작업을 수행했다. 사실 혼자 개발을 진행하면 딱히 엄청 큰 문제가 생기는 건 아니지만 팀 프로젝트라면 문제가 많다.. 잦은 충돌은 당연하고 히스토리가 섞여 추적하기도 어렵다. 또 브랜치가 어떤 목적으로 생성되었는지 어떤 브랜치를 병합해야 하는지 등 혼란이 생길 수밖에 없다. 더 나은 협업을 위해 브랜치를 어떻게 생성하고 관리하면 좋은지 정리해보고자 한다. 📌 브랜치 전략 브랜치는 다른 브랜치에 영향을 받지 않고 독립적으로 개발이 가능하게 해 준다. 여러 명의 개발자가 하나의 저장소를 사용할 때 브랜치를 효과적으로 활용하기 위한 work-flow가 브랜치 전략이다. 브랜치 전략에는 여러 가지가 있는데 프로젝트의 규모나 특성에 따..
- [ 참고/Mac ][M1] Oracle Database 설치2024-01-26 16:47:35colima 설치 brew install colima docker 설치 도커 홈페이지에서 설치 가능! https://www.docker.com/get-started/ Get Started | Docker Get started with Docker Desktop and join millions of developers in faster, more secure app development using containers and beyond. www.docker.com 다운로드해서 설치하면 되지만 나는 터미널로 설치했다 colima 시작 도커 설치했는데 도커를 설치하라고..? 오류 메세지를 읽어보니 link 해주라고 그래서 link 해줍니다.. 다시 시도! 생각보다 시간 걸림 done 뜨면 성공! 도커 명령어도..
- [ 정리/React ][Ajax] Ajax란?2024-01-18 12:44:07HTTP 프로토콜은 클라이언트에서 request를 보내고 서버에서 response를 받으면서 연결이 끊긴다. 화면을 변경할 필요가 있으면 다시 request 하고 response를 받아야 한다. 매번 서버로부터 새로운 HTML을 전송받아 웹페이지를 전체를 렌더링 하게 되는 것. 변경할 필요가 없는 부분까지 매번 새로 렌더링을 하다보니 불필요한 데이터 통신이 발생하고 이로 인해 순간적인 화면 깜빡임이 생긴다. 또한 클라이언트와 서버가 동기방식으로 동작하기 때문에 서버로 부터 응답이 오기까지 다음 작업은 중단된다.(블로킹) AJAX를 이용해 비동기로 통신하게 되면 json이나 xml형태로 데이터를 받아 일부만 갱신하기 때문에 깜빡임 없이 부드러운 화면 전환과 자원, 시간을 아낄 수 있다. 🗂️ ajax(As..
- [ 정리/Git ][Git] gitignore 작성하기2024-01-08 20:45:52📌 .gitignore 프로젝트에서 백업하고 싶지 않는 파일이나 빌드 결과물 등 배제 요소들을 직접 지정해 git에서 제외할 수 있는 설정파일 보안상 위험성이 있는 파일 프로젝트와 관계 없는 파일 용량이 너무 커서 제외해야하는 파일 IDE 관련 파일 사용자가 제외하길 원하는 파일 등 📌 작성 규칙 표현 의미 # 주석의미 *.a 확장자가 a인 모든 파일 무시 폴더명/ 해당 폴더의 모든 파일 무시 폴더명/*.a 해당 폴더의 확장가가 a인 모든 파일 무시 폴더명/*/.a 해당 폴더 포함 하위 폴더에서 확장자가 .a인 모든 파일 무시 /*.a 현재 폴더의 확장자가 .a인 모든 파일 무시 사용자가 제외하기 원하는 파일을 작성할 수 있지만.. 모든 파일을 작성하기엔 어려움이 있다. 조금 더 찾아본 결과! 쉽게 작성..