- [ 공부/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 틀을 만들어 놓고 사용자가 특정 페이지를 요청할 때 안에 해당..
- [ 공부/Git ][Git] Git Branch 전략 - git-flow2024-02-05 00:53:01📌 브랜치 전략을 배우는 이유 여태 프로젝트를 진행하면서 메인 브랜치에서 모든 작업을 수행했다. 사실 혼자 개발을 진행하면 딱히 엄청 큰 문제가 생기는 건 아니지만 팀 프로젝트라면 문제가 많다.. 잦은 충돌은 당연하고 히스토리가 섞여 추적하기도 어렵다. 또 브랜치가 어떤 목적으로 생성되었는지 어떤 브랜치를 병합해야 하는지 등 혼란이 생길 수밖에 없다. 더 나은 협업을 위해 브랜치를 어떻게 생성하고 관리하면 좋은지 정리해보고자 한다. 📌 브랜치 전략 브랜치는 다른 브랜치에 영향을 받지 않고 독립적으로 개발이 가능하게 해 준다. 여러 명의 개발자가 하나의 저장소를 사용할 때 브랜치를 효과적으로 활용하기 위한 work-flow가 브랜치 전략이다. 브랜치 전략에는 여러 가지가 있는데 프로젝트의 규모나 특성에 따..
- [ 공부/React ][Ajax] Ajax란?2024-01-18 12:44:07HTTP 프로토콜은 클라이언트에서 request를 보내고 서버에서 response를 받으면서 연결이 끊긴다. 화면을 변경할 필요가 있으면 다시 request 하고 response를 받아야 한다. 매번 서버로부터 새로운 HTML을 전송받아 웹페이지를 전체를 렌더링 하게 되는 것. 변경할 필요가 없는 부분까지 매번 새로 렌더링을 하다보니 불필요한 데이터 통신이 발생하고 이로 인해 순간적인 화면 깜빡임이 생긴다. 또한 클라이언트와 서버가 동기방식으로 동작하기 때문에 서버로 부터 응답이 오기까지 다음 작업은 중단된다.(블로킹) AJAX를 이용해 비동기로 통신하게 되면 json이나 xml형태로 데이터를 받아 일부만 갱신하기 때문에 깜빡임 없이 부드러운 화면 전환과 자원, 시간을 아낄 수 있다. 🗂️ ajax(As..
- [ 공부/알고리즘 ][알고리즘] 그리디 알고리즘2024-01-12 09:49:14그리디 알고리즘 Greedy 현재 상태에서 보는 선택지 중 최선의 선택지가 전체 중 최선이라고 가정하는 알고리즘 단점으로 최적의 해를 보장하지 않는다. 그리디 동작 ① 현재 상태에서 가장 최선이라고 생각되는 해를 선택(해 선택) ② 선택한 해가 전체 문제의 제약 조건에 벗어나지 않는지 검사(적절성 검사) ③ 현재까지 선택한 해 집합이 전체 문제를 해결할 수 있는지 검사, 전체 문제를 해결하지 못한다면 1번부터 다시 반복 관련 문제 보기 백준 11047번 동전 0 백준 1541번 잃어버린 괄호
- [ 공부/Git ][Git] gitignore 작성하기2024-01-08 20:45:52📌 .gitignore 프로젝트에서 백업하고 싶지 않는 파일이나 빌드 결과물 등 배제 요소들을 직접 지정해 git에서 제외할 수 있는 설정파일 보안상 위험성이 있는 파일 프로젝트와 관계 없는 파일 용량이 너무 커서 제외해야하는 파일 IDE 관련 파일 사용자가 제외하길 원하는 파일 등 📌 작성 규칙 표현 의미 # 주석의미 *.a 확장자가 a인 모든 파일 무시 폴더명/ 해당 폴더의 모든 파일 무시 폴더명/*.a 해당 폴더의 확장가가 a인 모든 파일 무시 폴더명/*/.a 해당 폴더 포함 하위 폴더에서 확장자가 .a인 모든 파일 무시 /*.a 현재 폴더의 확장자가 .a인 모든 파일 무시 사용자가 제외하기 원하는 파일을 작성할 수 있지만.. 모든 파일을 작성하기엔 어려움이 있다. 조금 더 찾아본 결과! 쉽게 작성..
- [ 공부/Git ][Git] Commit message 규칙2023-12-30 09:04:06개인 프로젝트 마이그레이션 과정 중 중구난방인 커밋메시지로 히스토리 확인이 어렵다.. 그래서 찾아본 커밋 메시지 작성 규칙 목적 커밋 메시지 스타일을 구조화해 일관성 있게 사용하는 이유! 코드 리뷰 시간을 단축하고 능률적으로 처리하기 위해서 변경 사항을 이해해는데 도움을 주기 위해서 코드만으론 설명이 어려운 "왜 이렇게 했을까"를 설명하기 위해서 추후 작업할 사람이 왜/어떻게 변경 사항이 만들어졌는지 이해하는데 도움을 주고 문제 해결과 디버깅을 쉽게 만들기 위해서 Commit message 규칙 ① 제목과 본문을 빈 행으로 구분 ② 제목을 50글자 내로 제한 ③ 제목 첫 글자는 대문자로 작성 ④ 제목 끝에 마침표 넣지 않기 ⑤ 제목은 명령문으로 사용하며 과거형을 사용하지 않는다 ⑥ 본문의 각 행은 72글..