노인과바다의 개발로그 노인과바다의 개발로그

배열 or 객체를 풀어서 다시 합치는것이 가능하다 card 객체를 받아온 뒤 spread 문법을 사용하여 key와 value쌍을 추가한 card객체를 updateCard의 콜백인자로 전달하여 상위 컴포넌트로 state까지 전달하여 렌더링하는 로직 []를 사용하지 않으면 event.currentTarget.name : value쌍이 추가된다 (event.currentTarget.name의 (name, company, title와 같은) 값이 들어가는게 아니라 변수명으로 그대로 들어감) 아래와 같은 응용도 가능 key와 함께 value를 즉석 에서 추가가능하다 const cards = { '1':{id:'1', name:'eel'}, '2':{id:'2', name:'ddde'} } console.log(c..

useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환합니다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다. 본질적으로 useRef는 .current 프로퍼티에 변경 가능한 값을 담고 있는 상자와 같습니다. ref에서 current란 무엇인가? DOM의 요소정보를 가지고 있는 값 언제 사욯하나? 1. 특정 DOM 선택하기 리액트에서는 DOM 을 선택할 때 ref 를 사용합니다. 함수형 컴포넌트에서 ref 를 사용할 때는 useRef 라는 Hook 함수를 사용하고 클래스형 컴포넌트에서는 콜백 함수를 사용하거나 React.createRef 라는 함수를 사용합니다. 2. 컴포넌트 안의 변수 만들기 useRef 로 관리하는 변수는..

flex에는 flex container와 flex item이 있다. flex container로만 작업하다보면 item들을 넣을 때 컨테이너를 3분할 4분할 이런식으로 균등하게 나누어야 경우가 매우 많다. 이 때 아이템에 css width 요소만 써서 하다보면 전체 레이아웃이 변할때 박스의 변화가 예측하기 어렵게 된다. 해결법은 다음과 같다. flex속성 flex 속성은 세가지 요소로 이루어져 있다. flex-basis flex-grow flex-shrink 유연한 박스의 기본 영역 flex-basis flex-basis는 Flex 아이템의 기본 크기를 설정(flex-direction이 row일 때는 너비, column일 때는 높이). 기본값 auto: 해당 아이템의 width를 사용 .item { fl..

1. 여러 요소를 동시에 선택하여 적용. .a, .b, .c{} 이런 식으로 쉼표가 있을 때는 각각의 항목을 or로 적용한다. 즉 나열한 모든 클래스 혹은 id, 태그에 적용되고, 각 클래스는 따로 사용이 가능하다. ( 이렇게 단독으로 사용 가능 ) .a .b .c{} 공백으로 연결해서 사용하면 뒤에나온 선택자가 하위 개체로 지정된다. 즉, A요소 내부의 B요소 내부에 있는 C요소에만 적용이 된다는 뜻. .a.b.c{} 공백 없이 연결해서 지정하면 class="a b c"처럼 모든 속성을 한번에 적용 시키는 요소에만 지정한 설정이 적용된다. 2. 특정요소 앞, 뒤에 가상 요소를 삽입 ::after = p::after = p요소 뒤에 가상 요소 삽입. ::before = p::before = p요소 앞에 ..

구분선의 위치를 옮길 때 transform: translateY()를 사용함 여기서 -선을 늘리고 싶을 때에는 부모 .info의 넓이를 100%로 주면됨

useState가 저장하고 있는 내부값(컴포넌트에 연결 되어있는 state)은 함수 내부가 아니라 메모리에 저장 const [cards, setCard] = useState('남자 코트 추천'); State는 변수 대신쓰는 데이터 저장공간(cards) useState를 사용해 초기화 시켜줘야 함.(문자, 숫자, array, object 다 저장 가능) 여기서 화면에 데이터를 뿌려주는 경우가 많다(객체, 배열). 객체의 경우 이를 바로 화면에 표현할 수 없다. 배열안에 들어있는 객체를 다 출력하려면? 1. 배열을 순회한다. 2. 순회하는 맵의 인자를 각각 새로만든 컴포넌트에 넣는다. 3. 새로 만든 컴포넌트에서 props의 인자로 접근하여 출력한다 4. props의 여러 인자가 올시 destructurin..

https://bokjiho.medium.com/react-%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%97%90%EC%84%9C-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EA%B2%BD%EB%A1%9C-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0-public-src-%EB%94%94%EB%A0%89%ED%86%A0%EB%A6%AC-%EC%B0%A8%EC%9D%B4-fddb4f455c2a

package com.fastcampus.ch2; import java.io.File; import java.io.IOException; import java.lang.reflect.Method; import java.util.Iterator; import java.util.Map; import java.util.Scanner; import org.springframework.ui.Model; import org.springframework.validation.support.BindingAwareModelMap; public class MethodCall2 { public static void main(String[] args) throws Exception{ // 1. YoilTellerMVC의 객체를..