프로그래밍 (72) 썸네일형 리스트형 [React] useCallback, 메모이제이션(Memoization) useCallback과 메모제이션(Memoization)은 React에서 컴포넌트 성능을 최적화하기 위해 사용하는 개념이다. useCallback이란?useCallback 은 React의 Hook중 하나로 특정 함수를 메모제이션 하여 함수가 불필요하게 다시 생성되지 않도록 방지한다.예를들어 컴포넌트가 리랜더링 될 떄마다 정희되는 함수가 있다면 useCallback을 사용해 이전에 정의된 함수를 재사용할 수 있다. 메모이제이션(Memoization) 이란?Memoization은 이전에 계산한 값을 기억하여 동일한 연산을 반복하지 않도록 하는 최적화 기법이다.JavaScript에서는 특정 함수나 연산의 결과를 메모리에 저장해 두었다가 같은 입력이 다시 들어오면 저장해둔 결과를 반환한다.React에서는.. [CSS] 해상도에 따른 카드 개수 변경하기 해상도에 따른 카드 개수 변경하기. 1903 (기본 윈도우 사이즈) 카드 4개 1200-768 카드 3개 640- 480 카드 2개Row안의 Col카드들의 비율을 조정해 주었다. (Bootstrap container 사용)근데 3개로 나누는데 31.3% 로 했느냐하면, 각 카드마다 양옆으로 1% 마진이 있기 떄문이다.100%가 넘어가면 안된다./* 카드 개수 바꾸기 *//* 1200 이하는 카드 3개 */@media (max-width: 1200px) { .movie-list-row > div { width: 31.3%; }}/* 767 이하는 카드 2개 */@media (max-width: 767px) { .movie-list-row > div { width: 48%; }} [React] 영화 장르별 필터링, 내림차순 오름차순 정렬 리액트 독학중. [MoviePage.jsx]일단 인기순 정렬은 드롭다운(부트스트랩)에 넣었다.장르정렬은 API에서 가져온 데이터들 map으로 돌려서 버튼 하나하나 '컴포넌트'로 만들어서 div박스에 넣었다.버튼을 클릭하면 색이 밝아지고 한번 더 클릭하면 다시 색 어두워지게 하였다. // 정렬,필터 상태 관리 const [sort, setSort] = useState(0); // 드롭박스 const [genreBtnIds, setGenreBtnIds] = useState([]); // 누른 버튼 장르 배열 const [filteredMovies, setFilteredMovies] = useState([]); // 필터 된 데이터 // 영화 및 장르 데이터 가져오기 const { data,.. [CSS] 스무스한 반응형 페이지 만들기, padding-bottom: calc(100% + 30%); [MoviePage.jsx]무비페이지가 너무 못생겨서 깃허브에 수정전 파일 커밋시켜 놓고 대공사에 들어갔다.이거 하는데 5시간 걸렸다. React 코드 짜는 거보다 오래 걸린다. 난 CSS가 더 어렵다.포스터 간의 간격이 없다, 카드 최대 3개씩 보여준다, 해상도 줄이면 카드 저렇게 한 줄씩 나온다.이렇게 짤리는 문제를 해결하기 padding-bottom: calc(100% + 30%);먼저 백그라운드 이미지에 이 속성값을 주었다. 근데 이거는 계속 만지면서 숫자 조금씩 바꾸었다.사실 처음에 고정 높이 값을 줬는데 (like 380px) 그대로 줄다 보니까 반응형 느낌이 안 나서 걔를 해제했다. 이제 movieCard 사이 마다 간격을 주기 시도. .movieCard { flex: 0.. [CSS] 드롭박스 크기 줄일 시, 튀어나오는 텍스트 한 줄 말줄임표 [MoviePage.jsx]글씨가 저렇게 튀어나가는거를 수정하기 위해 생각을해보았다.반응형으로 해상도가 바뀔때마다 글씨 크기 줄이기!근데 실무에서 일하는 친동생이 그냥 말줄임표 쓰라함. 버튼 태그 안의 텍스트를 div로 감싸고 스타일을 주었다..dropdown-box > div { white-space: nowrap; // 텍스트를 자동줄바꿈이 일어나지 않는다. overflow: hidden; // 영역을 벗어날 시 보이지 않는다. text-overflow: ellipsis; // 넘어간 텍스트를 ...으로 보이게 한다.} [CSS] 반응형, display:flex, align-items, justify-content 오늘 Netflix 홈페이지를 만들면서 막혔던 부분에 대해 정리해보고자 한다.잊어먹지 말자!! [MoviePage.jsx] 해상도를 줄였을때 (900px쯤 부터) 저 Dropdown박스옆에 공간이 남았다. (참고로 Bootstrap , 사용함)보아하니 width-max값이 700px정도로 고정값으로 들어가있었다.@media (min-width: 768px) { .main-container { max-width: 100%; }}태그에 className을 주고 CSS파일에서 넣은 코드. [MoviePage.jsx] 오른쪽 끝에 있는 삼각형이 글씨랑 붙어있고 크기도 작아서 수정하고 싶었다..dropdown-box { width: 100%; border: 1px solid white; back.. [Spring]@Autowired @Resource 어노테이션 DI(Dependency Injection) DI(의존성 종속, Dependency Injection)란, 클래스간의 의존 관계를 스프링 컨테이너가 자동으로 연결해 주는 것이다. 클래스 A가 클래스 B,C와 상호작용 한다면 객체 A는 객체 B,C와 의존관계이다. @Autowired란 스프링 DI(Dependency Injection)에서 사용되는 어노테이션이다. 스프링에서 빈 인스턴스가 생성된 이후 @Autowired를 설정한 메서드가 자동으로 호출되고 인스턴스가 자동으로 주입된다.(생성자/필드/메서드 모두 적용 가능) 사용해보기 @Service public class WorkService { @Autowired private CommonDAO commonDAO; ... } @Autowired를 사용해 .. [Java]Iterator란? Iterator 정의 Iterator는 객체 지향적 프로그래밍에서 배열이나 그와 유사한 자료 구조의 내부의 요소를 순회(traversing)하는 객체이다. 자바의 컬렉션 프레임웍에서 컬렉션에 저장되어있는 요소들을 읽어오는 방법을 표준화 하였는데 그 중 하나가 Iterator이다. 인터페이스 Iterator의 구조 public interface Iterator{ boolean hasNext(); Object next(); void remove(); } boolean hasNext() : 읽어올 요소가 남아있나 확인. true,false Object next() : 다음 데이터를 반환. void remove() : next()로 읽어온 요소를 삭제. 호출순서는 hasNext() -> next() -> rem.. 이전 1 2 3 4 ··· 9 다음
