[React] 엘리먼트 렌더링
2022. 10. 6. 20:13
프로그래밍/React
엘리먼트 렌더링 엘리먼트는 React 앱의 가장 작은 단위 엘리먼트는 화면에 표시할 내용을 기술 const element = Hello, world; 브라우저 DOM 엘리먼트와 달리 React 엘리먼트는 일반 객체이며(plain object) 쉽게 생성할 수 있음 React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트함 주의 더 널리 알려진 개념인 “컴포넌트”와 엘리먼트를 혼동할 수 있음 엘리먼트는 컴포넌트의 “구성 요소”임 DOM에 엘리먼트 렌더링하기 HTML 파일 어딘가에 가 있다고 가정해보자 이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하기 때문에 이것을 “루트(root)” DOM 노드라고 부름 React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있음..
[React] JSX란?
2022. 10. 5. 20:02
프로그래밍/React
아래 변수 선언을 살펴보자 const element = Hello, world!; 이 문법은 문자열도, HTML도 아닌 JSX이며 JavaScript를 확장한 문법임 UI가 어떻게 생겨야 하는지 설명하기 위해 React와 함께 사용할 것을 권장함 JSX라고 하면 템플릿 언어가 떠오를 수도 있지만, JavaScript의 모든 기능이 포함되어 있음 JSX는 React “엘리먼트(element)” 를 생성함 JSX란? React에서는 본질적으로 렌더링 로직이 UI 로직(이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등)과 연결된다는 사실을 받아들임 React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 “..
[Mac Error] xcrun: error: invalid active developer path
2022. 10. 4. 20:14
OS/Mac
xcrun: error: invalid active developer path node를 설치하려고 했는데 xcrun 에러가 떠서 확인해보니 기존에 설치해놨던 개발 툴들도 같은 에러가 떴음 해결 방법 xcode-select 명령으로 xcode cli만 따로 설치 xcode-select --install 참고 : https://www.hahwul.com/2019/11/18/how-to-fix-xcrun-error-after-macos-update/
[jQuery] Ajax의 Success와 Done의 차이
2022. 9. 30. 20:39
프로그래밍/jQuery
Ajax의 동작 방식 브라우저에서 Ajax 요청을 담당하는 XMLHttpRequest라는 객체를 통해 서버에 정보를 요청, 응답받음 콜백 동작 순서 성공 시 : success > complete > done > always 실패 시 : error > complete > fail > always jQuery를 이용한 Ajax Ajax의 기본 Method를 이용하면 XMLHttpRequest를 직접 사용하게 되는데 때문에 이러한 복잡한 과정 없이 jQuery를 이용하면 간단하게 서버와 데이터를 주고받을 수 있음 또한 크로스 브라우징 문제도 jQuery가 알아서 해결해주고 여러 가지 편리한 기능들을 제공 $.ajax([settings]) 함수의 property https://api.jquery.com/jque..
[Spring Error] cannot deserialize from Object value (no delegate- or property-based Creator)
2022. 9. 29. 20:22
프로그래밍/Spring
cannot deserialize from Object value (no delegate- or property-based Creator) 에러 발생 jackson 라이브러리가 빈 생성자가 없는 모델을 생성하는 방법을 모르기 때문에 발생함 💡 해결 방법 @NoArgsConstructor를 추가하여 빈 생성자 생성 수정 전 코드 👇 @Getter @AllArgsConstructor public class UserLoginRequest { private String userName; private String password; } 수정 후 코드 👇 @Getter @NoArgsConstructor @AllArgsConstructor public class UserLoginRequest { private Str..
[JPA] JPA란?
2022. 9. 28. 20:21
프로그래밍/JPA
JPA란? Java Persistence API의 약자로 자바의 ORM(Object Realational Mapping) 표준 스펙을 정의 JPA의 스펙은 자바의 객체와 데이터베이스를 어떻게 매핑하고 동작해야 하는지를 정의하고 있음 하이버네이트(Hibernate) ORM Framework 중 하나로 'JPA 프로바이더'라고도 부름 JPA의 실제 구현체 중 하나이며, 현재 JPA 구현체 중 가장 많이 사용됨 영속성 컨텍스트(Persistence Context) 영속성 컨텍스트는 JPA가 관리하는 엔티티 객체의 집합 엔티티 객체가 영속 컨텍스트에 들어오게 되면 JPA는 엔티티 객체의 매핑 정보를 가지고 DB에 반영함 엔티티 객체가 영속 컨텍스트에 들어오게 되어 관리 대상이 되면 그 객체를 영속 객체라고 부름..
[Error] Uncaught TypeError: Cannot read property 'addEventListener' of null
2022. 9. 27. 20:27
프로그래밍/JavaScript
Uncaught TypeError: Cannot read property 'addEventListener' of null 에러 원인 HTML이 모두 로드 되기 전 script를 먼저 불러오는 경우 발생 HTML이 로드 되기 전 Javascript 영역에서 HTML을 참조하기 때문 👉 addEventListener을 부여할 DOM을 찾지 못해서 에러 발생 해결 방법 1. script 태그를 body 태그 하단에 작성 body 태그 하단에 js를 작성하면 html이 먼저 로드되고, js가 그 다음 로드되기 때문에 오류가 발생하지 않음 // 스크립트가 이곳에 작성되었다면 body 태그 하단으로 이동 스크립트 오류 2. window.onload = function(){} 사용 💡 window.onload()란?..
[Heroku] Heroku 무료 도메인 설정
2022. 9. 26. 20:57
프로그래밍/domain
Heroku를 통해 무료 도메인 설정하는 방법 1️⃣ 내 도메인에서 무료 도메인 발급 2️⃣ 도메인 설정을 통해 해로쿠와 연동 간단한 무료 도메인 발급 ⚙️ 내 도메인 접속하여 회원가입 후 원하는 도메인 검색 ⚙️ 등록하기 클릭(👉 보안코드 입력 후 등록하기) Heroku와 연동 ⚙️ Heroku Dashboard에서 도메인 연동할 app 선택 👉 Settings 클릭 ⚙️ Add domain 클릭 👉 Domain name 입력 후 Next ⚙️ DNS target 복사하기 ⚙️ 내 도메인 👉 도메인 관리 👉 수정 클릭 ⚙️ 별칭(CNAME) 체크(☑️) 후 www 있는 것과 없는 것 하나씩 생성 후 복사했던 DNS target 주소 붙여넣기 🎉 설정 완료. 적용까지 20분 정도 기다려보자!