[ CSS ] padding 부분과 content부분 background-color 구분하기 문제backgroun-color를 설정할 때 padding까지 배경색이 먹는 문제 발생 해결책다음과 같은 속성 사용하기 background-clip: padding-box; 추가정보background-clip의 값은 padding-box, border-box, content-box가 있다.- padding-box : 배경색이 padding+content에 영향을 미친다.- border-box : 배경색이 border+padding+content에 영향을 미친다.- content-box : 배경색이 content에 영향을 미친다. [ 참고 ] https://www.w3schools.com/cssref/css3_pr_background-clip.php W3Schools.comW3Schools off.. [ React ] React Hooks - useRef useRef란? 렌더링에 필요하지 않은 값을 참조할 수 있는 React Hook로컴포넌트의 최상위 레벨에서 useRef를 호출하여 ref를 선언한다. const ref = useRef(initialValue)initialValue- ref객체의 current 프러퍼티 초기 설정값으로 어떤 유형의 값이든 지정할 수 있다.- 단 초기 렌더링 이후부터는 무시된다. 반환값- 단일 프로퍼티를 가진 객체를 반환한다.- current 처음에는 전달한 initialValue로 설정된다. 값을 변경할 수 있다. 하지만 state와 다르게 리렌더링을 유발하지않는다. ref객체를 jsx노드의 ref 어트리뷰트로 react에 전달하면 react는 current 프로퍼티를 설정한다.- 다음 렌더링에서 u.. [ CSS ] Zustand js와 ts로 사용해보기 Zustand란?상태 관리 라이브러리 중 하나로, 작은 패키지 크기와 직관적인 사용법이라는 장점을 가지고 있다.특히 ContextAPI를 사용할 때와 달리 상태 변경 시 불필요한 리랜더링을 일으키지 않도록 제어하기 쉽다.state가 변경될 때마다 React컴포넌트를 업데이트한다. JavaScript에서 사용하기1. Zustand 설치# NPMnpm install zustand# Yarnyarn add zustand 2. store 생성하기스토어를 생성하기 위해 create 함수를 사용한다.스토어는 상태 변수와 해당 상태를 업데이트하는 액션(함수)으로 구성되어있다. ex_버튼을 선택하는 함수와 count를 증가시키는 함수, count를 리셋하는 함수 작성import create from "zus.. [ React ] React Hooks - useMemo / Memoization useMemo란?useMemo는 재렌더링 사이에 계산 결과를 캐싱할 수 있게 해주는 React Hook 예시코드calculateValue- 캐싱하려는 값을 계산하는 함수- 순수해야한다 → 인자를 받지않고 모든 타입의 값을 반환할 수 있어야한다.- 만약 다음 렌더링에서 dependencies가 바뀌지않았으면 동일한 값 , 바뀌었으면 calculateValue를 호출const cachedValue = useMemo(calculateValue, dependencies); 예시코드해당 코드는 TodoList가 상태를 업데이트하거나 부모로부터 오는 새로운 props를 받으면 filterTodos가 실행된다.function TodoList({ todos, tab, theme }) { const visibl.. [ CSS ] 텍스트 줄이기 게시판 같은 곳에 텍스트의 길이가 너무 길어져 텍스트가 담긴 공간을 넘어가글씨가 댕강 잘리거나 문제가 발생한다.그러면 당연히 예쁘지않다!!!!! 그래서 말 줄임표를 주로 사용하는데 사용하려할때마다 까먹어서 기록해둔다...white-space: nowrap;overflow: hidden;text-overflow: ellipsis; [ React ] 무한 렌더링 탈출기 문제프로젝트를 진행하면서 만났던 무한 렌더링 문제문제의 코드는 다음과 같다.export default function SideBar(){ const [isChat,setIsChat] = useState(true); return ( 채팅 내담자 정보 { isChat? : .. [ React ] React Hooks - useCallback useCallback Hook이란 ? useMemo와 마찬가지로 메모제이션 기법을 이용한 Hook으로 함수의 재사용을 위한 Hook이다.리렌더링 간에 함수 정의를 캐싱해준다. 아래의 코드를 보면 첫번째 인자는 리렌더링 간에 캐싱할 함수 정의이고 두번째 인자는 반응형 값들이 들어간다.여기서 반응형 값이 변경(의존성이 변경)되었을 때만 다시 메모제이션된 버전이 변경된다.const memoizedCallback = useCallback( () => { doSomething(a, b); }, [a, b],); 또 다른 예시로 이 코드의 경우 x,y값이 바뀌지않는 경우기존 함수를 계속 반환하고 다음 렌더링 때 기존 함수를 다시 사용한다.만약 이어지는 렌더링에서 의존성을 비교했을 때 전과 달라지면 이.. [ 알고리즘 ] Next Permutation ( with 백준 10972 ) Next Permutation → 현 순열에서 사전 순으로 다음 순열 생성 → 입력 받은 배열을 오름차순으로 정렬 후 구한다. → 주로 do-while문이 사용 next permutation이 필요한 상황 데이터가 537으로 들어왔을 때 사전순으로 순열을 만들면 4개밖에 나오지않는다. 실제 나와야하는 값은 6개가 나와야한다. next permutation을 사용해 다음 순열 구하는 방법 - 오름차순에서 내림차순으로 순열을 모두 뽑아내고 싶으면 처음엔 꼭 미리 오름차순 정렬하기 - 예시) 10 3 9 8 7 6 5 2 1 의 다음 순열 찾기 [ 해당 데이터는 배열에 들어있다고 가정 ] 1. 꼭대기 인덱스 찾기 - 해당 예시에선 9가 꼭대기 - [ top = N(데이터 개수)-1 = 배열의 끝]로 초기화 후.. [ 알고리즘 ] 순열, 조합, 부분집합 순열 → 서로 다른 n개의 원소 중 r개를 뽑아 나열하는 것 → 순서가 존재한다. 구현방법 예시) 1,2,3,4 숫자카드가 있을 때 숫자카드를 중복으로 사용하지않고 만들 수 있는 3자리 수를 모두 출력하시오 1. 반복문 public static void main(String[] args) { for (int i = 1; i < 5; i++) { for (int k = 1; k < 5; k++) { if (i != k) { // 각 자리 숫자는 서로 달라야한다. for (int j = 1; j < 5; j++) { if (k != j && i != j) { // 각 자리 숫자는 서로 달라야한다. System.out.println(i + "" + k + "" + j); } } } } } } 2. 재귀 - 숫.. [ Spring ] AssertJ 정리 ( feat. 테스트 코드 작성하는 법 ) 테스트 코드 작성법 BDD 스타일 given : 어떤 상황이 주어졌을 때 when : ~을 실행했을 때 then : 검증한 결과가 ~으로 나와야한다. ⇒ 3단계는 검증단계 : 실행 단계가 예상된 대로 동작하는지 검증 ⇒ 1,2단계는 실행단계 : 사용자 입력을 모방해 테스트 로직 실행 AssertJ란? assertion을 제공하는 자바용 단언문 라이브러리 Junit에서 제공하는 assertEQuals에 비해 에러 메세지와 테스트 코드의 가독성을 높여준다. //junit assertEquals(expected, actual); //AssertJ assertThat(actual).isEqualTo(expected); AssertJ import 정적 import를 하면 AssertJ의 다양한 API를 클래스 이.. [ 알고리즘 ] 너비우선탐색 BFS - JAVA [ 특징 ] 그래프 완전 탐색 시작노드에서 출발해 시작노드를 기준으로 가장 가까운 노드를 먼저 방문한다. 그렇기에 목표노드까지 경로가 여러 개일 경우 최단경로를 보장한다. 큐 or FIFO를 이용해 구현한다. [ 시간복잡도 ] O(V+E) [ 구현시 고려해야 하는 점 ] DFS와 동일하게 방문했던 노드는 다시 방문하지않는다. [ 큐로 알아보는 탐색 순서 ] 탐색순서 1 - 2 - 3 - 5 - 6 - 4 [ Java ] 1차원, 2차원 배열 복사 - 깊은 복사와 얕은 복사 얕은 복사 - 복사 시 객체의 주소 값을 복사하여 동일한 주소 값을 가진다. - 즉 원래 배열의 주솟값을 가져오는 것 - 같은 곳을 가리키기 때문에 한쪽에서 데이터를 변경하면 다른 한쪽도 변경된 데이터에 접근할 수 있다. 깊은 복사 - 복사 시 객체의 데이터 자체를 복사하여 다른 주솟값을 가진다. - 즉 원래 배열을 그대로 가져오는 것 1차원 배열 복사 1. ' = ' 사용 [ 얕은 복사 ] 자바에서 객체를 ' = ' 을 통해 복사하게 되면 얕은 복사가 일어나 두 객체가 같은 곳을 바라보게 된다. 2. clone() 함수 사용 [ 깊은 복사 ] 만약 같은 공간을 가리키는 것이 아니라 배열의 값 자체를 복사하여 새로운 공간에 할당하고 주소를 받고 싶다면 배열의 clone() 함수를 사용하면 된다. 아래 코.. 이전 1 2 3 4 ··· 8 다음
