- [ 공부/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가 브랜치 전략이다. 브랜치 전략에는 여러 가지가 있는데 프로젝트의 규모나 특성에 따..
- [ 기록/백준 ][백준 / 자바] 11650번 좌표 정렬하기2024-02-01 01:57:23https://www.acmicpc.net/problem/11650 11650번: 좌표 정렬하기 첫째 줄에 점의 개수 N (1 ≤ N ≤ 100,000)이 주어진다. 둘째 줄부터 N개의 줄에는 i번점의 위치 xi와 yi가 주어진다. (-100,000 ≤ xi, yi ≤ 100,000) 좌표는 항상 정수이고, 위치가 같은 두 점은 없다. www.acmicpc.net 문제 2차원 평면 위의 점 N개가 주어진다. 좌표를 x좌표가 증가하는 순으로, x좌표가 같으면 y좌표가 증가하는 순서로 정렬한 다음 출력하는 프로그램을 작성하시오. 입력 첫째 줄에 점의 개수 N (1 ≤ N ≤ 100,000)이 주어진다. 둘째 줄부터 N개의 줄에는 i번점의 위치 xi와 yi가 주어진다. (-100,000 ≤ xi, yi ≤ 1..