관심쟁이 영호

이번에는 UserState에 대해서 공부를 해보자! 먼저 아래의 코드를 보자. let number = 1; const add = () =>{ number++; console.log('add', number); } return ( 숫자 : {number} 더하기 ); local:3000 으로 접속해서 "더하기" 버튼을 클릭하면 console로 number 값을 확인할 수 있다. 하지만 숫자: {number}인데 number 값을 +1을 해주어도 "숫자 : 1" 에서 1이 바뀌지 않는다 왜그럴까? 상태 값이 변경되었다는 신호를 보내야 한다. 리액트는 아무 변수나 상태 값으로 생각하지않는다. 그래서 "이 변수를 상태 값으로 설정할게!" 라고 해주어야 한다. 그리고 값이 변하면 "상태 값이 변경되었어!" 라고 ..

이번 포스팅에서는 concat, filter, map, slice, 스프레드(전개) 연산자에 대해서 살펴볼 것이다. 스프레드 연산자 스프레드 연산자는 깊은 복사를 실시하는 연산자이다. 아래 코드를 보자. const a = [1,2,3] const b = [...a]; b.push(4); // a??? 이렇게 했을 때, a의 값은 어떻게 될까? 정답은 [1,2,3] 그대로다. 이것이 깊은 복사이다. a의 모든 값을 복사하여 새로운 메모리를 할당한 배열 b에 저장한다. 그래서 b에 새로운 값을 푸쉬해도 a에는 아무런 영향을 주지 않는다. concat concat 함수는 추가하는 함수라고 생각하면 된다. 아래 코드를 보자. const a = [1,2,3]; const b = a.concat(4); // b??..

웹 개발에 관심이 있는 사람이라면, "리액트"라는 단어를 한번쯤은 보았을 것이다. 이 단어가 왜 많은 사람들에게서 언급이 되는 것일까? 오늘의 포스팅에서는 리액트의 전반적인 개요를 둘러볼 예정이다. 리액트란? 내가 이해한 수준에서 명쾌하게 말을 하자면, 리액트는 싱글 페이지 어플리케이션을 개발하는데 도움을 주는 프레임워크라고 생각이 된다. 그렇다면 싱글 페이지 어플리케이션이란 무엇인가? 싱글 페이지 어플리케이션? 싱글 페이지 어플리케이션이란, html 파일은 1개 뿐이다. 필요한 부분의 View만 새롭게 그린다. 통째로 html을 받아올 필요가 없다. 개발되기 전에 웹 개발 상황을 살펴보자. 클라이언트가 서버에게 웹 페이지를 요청한다. 서버는 클라이언트에게 HTML 화면 통째로 보내준다. 클라이언트가 화..

이전 포스팅에서는 회원 도메인을 완성했고, 테스트까지 완료했다. 이번 포스팅에서는 상품 도메인을 할 예정이다. 1. 상품 도메인 기능 및 개발 순서 (1) 기능 - 상품 등록 - 상품 목록 조회 - 상품 수정 (2) 순서 상품 엔티티 개발(비즈니스 로직 추가) -> 상품 리포지토리 개발 -> 상품 서비스 개발, 상품 기능 테스트 이렇게 될 예정이다. 2. 구현 시작. (1) ItemRepository 생성 // ItemRepository.class @Repository @RequiredArgsConstructor public class ItemRepository { private final EntityManager em; public void save(Item item){ if(item.getId() =..

1. 구현 기능 - 회원 등록 - 회원 목록 조회 2. 구현 순서 - 회원 엔티티 코드 다시 보기 - 회원 리포지토리 개발 - 회원 서비스 개발 - 회원 기능 테스트 순서는 이렇게 할 것이다. 실무에서 하는 방법대로 하신다고 하시니, 숙지해두면 좋을 순서일 것이다. 1. 회원 리포지토리 구현 리포지토리는 이전에 포스팅한 글에서 언급했듯이, DB에 JPA기술을 사용하여 직접 접근하는 것이다. 회원 리포지토리라 함은, DB에 저장되어있는 회원정보를 GET, SET하는 기능이 있을 것이다. - repository pakage를 생성한다. - repository pakage에 MemberRepository를 생성했다. - 그리고 코드를 넣는다. // MemberRepository.class //스프링에게 이것이..

태그란? 태그는 Division의 약자입니다. 레이아웃을 나누는데 사용하는 태그입니다. 쉽게 말해서, 구역들을 정해주는 겁니다. 예를들면, 어느 구역만 background 색을 바꿔주고 싶을 때, 해당 구역만 지칭하는 틀을 만들어주어야 합니다. 이 떄, 태그를 사용합니다. 사용법 첫번째 구역 두번째 구역 위와 같이 코드를 짜면 구역이 2개가 생깁니다. 박스가 2개 생겼다고 생각하시면 됩니다. 여기서 css를 이용하여 div의 구역을 설정해줄 수 있습니다. 첫번째 구역 두번째 구역 #first{ background-color: #000000; width: 10px; height: 100px; } #second{ background-color: #123456; width: 1000px; height: 100..