병아리의 코딩 일기

아래 내용은 인프런 SOAPLE 님의 '처음 만난 리액트(React)' 강의 내용을 요약 정리한 것임을 알려드립니다. 😀 무료 강의인데 내용이 정말 좋더라구요! 그럼 시작하겠습니다~! 리액트는 레고블록을 조립하듯 각각의 컴포넌트를 맞추어서 개발한다. 리액트 컴포넌트는 자바스크립트의 함수처럼 입력을 받아서 출력을 내뱉는데, 입출력이 일반 함수와는 조금 다르다. 입력: Props | React component | 출력: React element 위와 같이, React Component는 어떠한 속성을 입력으로 받아서 그에 맞는 element 를 생성하여 리턴해준다. 그리하여 생성된 React element는 리액트 앱을 구성하는 가장 작은 빌딩 블록들이 된다. 이 친구는 자바스크립트의 객체 형태로 존재하며..

1. 프로그래머스 Lv.0 문자열 안에 문자열 정답률 89% 의 문제였는데, 거의 첫 코딩 테스트 연습이라 어려웠다. Lv 2는 얼마나 어려울지..ㅋㅋㅋㅋ function solution(str1, str2) { let answer = 2; for (let i = 0; i < str1.length - (str2.length - 1); i++) { let three = ""; for (let j = 0; j < str2.length; j++) { three += str1[i + j]; } if (three === str2) { answer = 1; break; } } return answer; } console.log(solution("ab6CDE443fgh22iJKlmn1o", "6CD")); // 1 ..

이건 구식 코드 window.addEventListener('DOMContentLoaded', function () { var title = document.getElementById('main-title'); console.log(title); }); 요즘은 다 QuerySelector 을 쓴다. QuerySelector 의 경우는 가져올 때 그냥 CSS 선택자를 사용하면 된다. 쿼리셀렉터는 많은 class 중 첫번째에 있는 아이만 선택해온다. 다 불러오고 싶으면 QuerySelectorAll 을 사용하면 된다. 그다음 콘솔창에서 index 주거나 하면 됨. 요건 setTimeout Method 다. setTimeout(function() {}, 초); (1000=>1초)

안녕하세요. 드림 코딩님의 강의를 보고 요약한 파일입니다. 도움이 되셨다면 좋아요 부탁드려요 ~ㅎㅎ CSS Position 기본값 : static relative : 원래 있어야 할 자리에서 변경 absolute : 가장 가까이 있는 상자에서 위치 변경 fixed: 상자에서 벗어나 페이지 상에서 위치 변경 sticky: 원래 자리에 있는데, 스크롤링하면 변하지 않고 붙어있는 애! 웹 사이트에서 CSS 기능 사용할 수 있는지 확인하기 Can I use... Support tables for HTML5, CSS3, etc Don’t forget to code your Dream! HTML 간단하게 만드는 법 div.container>div.item.item${$}*10 class=”container” 인 d..

이번 시간엔 지금까지 배운 매핑을 바탕으로 조금 더 복잡한 예제를 만들어보자. 간단한 쇼핑몰 예제다. 요구사항 분석 회원은 상품을 주문할 수 있다. 주문 시 여러 종류의 상품을 선택할 수 있다. 기능 목록 회원 기능 회원 등록 회원 조회 상품 기능 상품 등록 상품 수정 상품 조회 주문 기능 상품 주문 주문내역 조회 주문 취소 Member Entity @Entity public class Member { @Id @GeneratedValue(strategy = GenerationType.AUTO) private Long id; private String name; private String city; private String street; private String zipcode; //getter, set..

이번엔 요구사항의 예시를 들어 필드와 컬럼을 실제로 매핑해보자! 요구사항 추가 회원은 일반 회원과 관리자로 구분해야 한다. 회원 가입일과 수정일이 있어야 한다. 회원을 설명할 수 있는 필드가 있어야 한다. 이 필드는 길이 제한이 없다. 요구사항을 반영한 Entity 클래스 생성 package hellojpa; import javax.persistence.*; import java.util.Date; @Entity //꼭 넣기 그래야 jpa가 인식! public class Member { @Id private Long id; @Column(name = "name") //객체에는 username 이라고 쓰고 DB에는 name 이라고 쓰고 싶을 떄! private String username; private ..