yebeen blog

오늘은 싸피가 마무리된 기념으로좋았던 추억이 정말 많아서 정리해보려고한다!!아무래도 사업장안에 교육장이 있다보니보안스티커 부착이 필수였기에사진을 많이 안찍었는데많이 찍을 걸 후회했다 ㅜㅜ. 최대한 찍은 사진이라도 정리해야지… 싸피 본 교육 전 스타트 캠프때 했던 아이디어톤 ㅎㅅㅎ짧은 시간을 주고 팀원끼리 아이디어를 도출해정리하고 발표자료까지 만들어 발표를 해야했었는데시간이 너무 짧았어서 이걸 할 수 있나 ... 싶을 정도였지만사람은 할 수 있다하면 다 할 수 있는 것인지다들 겹치는 아이디어 없이 엄청난 발표를 했었다. 일등을 하면 다양한 상품을 주기도 했다 !! 나는 일등해서 서점 금액권을 받았다 ㅎ3ㅎ 그리고 이 활동 말고도 다양한 것들이 있는데대학때 안해봤던 활동이라정말 ...ㅎㅎ 신선하고 재미있던 ..

문제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..

useRef란? 렌더링에 필요하지 않은 값을 참조할 수 있는 React Hook로컴포넌트의 최상위 레벨에서 useRef를 호출하여 ref를 선언한다. const ref = useRef(initialValue)initialValue- ref객체의 current  프러퍼티 초기 설정값으로 어떤 유형의 값이든 지정할 수 있다.- 단 초기 렌더링 이후부터는 무시된다. 반환값- 단일 프로퍼티를 가진 객체를 반환한다.- current    처음에는 전달한 initialValue로 설정된다.    값을 변경할 수 있다.    하지만 state와 다르게 리렌더링을 유발하지않는다.    ref객체를 jsx노드의 ref 어트리뷰트로 react에 전달하면 react는 current 프로퍼티를 설정한다.- 다음 렌더링에서 u..

Zustand란?상태 관리 라이브러리 중 하나로, 작은 패키지 크기와 직관적인 사용법이라는 장점을 가지고 있다.특히 ContextAPI를 사용할 때와 달리 상태 변경 시 불필요한 리랜더링을 일으키지 않도록 제어하기 쉽다.state가 변경될 때마다 React컴포넌트를 업데이트한다.   JavaScript에서 사용하기1. Zustand 설치# NPMnpm install zustand# Yarnyarn add zustand  2. store 생성하기스토어를 생성하기 위해 create 함수를 사용한다.스토어는 상태 변수와 해당 상태를 업데이트하는 액션(함수)으로 구성되어있다.    ex_버튼을 선택하는 함수와 count를 증가시키는 함수, count를 리셋하는 함수 작성import create from "zus..

useMemo란?useMemo는 재렌더링 사이에 계산 결과를 캐싱할 수 있게 해주는 React Hook  예시코드calculateValue- 캐싱하려는 값을 계산하는 함수- 순수해야한다 → 인자를 받지않고 모든 타입의 값을 반환할 수 있어야한다.- 만약 다음 렌더링에서 dependencies가 바뀌지않았으면 동일한 값 , 바뀌었으면 calculateValue를 호출const cachedValue = useMemo(calculateValue, dependencies);    예시코드해당 코드는 TodoList가 상태를 업데이트하거나 부모로부터 오는 새로운 props를 받으면 filterTodos가 실행된다.function TodoList({ todos, tab, theme }) { const visibl..

게시판 같은 곳에 텍스트의 길이가 너무 길어져 텍스트가 담긴 공간을 넘어가글씨가 댕강 잘리거나  문제가 발생한다.그러면 당연히 예쁘지않다!!!!! 그래서 말 줄임표를 주로 사용하는데 사용하려할때마다 까먹어서 기록해둔다...white-space: nowrap;overflow: hidden;text-overflow: ellipsis;

문제프로젝트를 진행하면서 만났던 무한 렌더링 문제문제의 코드는 다음과 같다.export default function SideBar(){ const [isChat,setIsChat] = useState(true); return ( 채팅 내담자 정보 { isChat? : ..

useCallback Hook이란 ? useMemo와 마찬가지로 메모제이션 기법을 이용한 Hook으로 함수의 재사용을 위한 Hook이다.리렌더링 간에 함수 정의를 캐싱해준다. 아래의 코드를 보면 첫번째 인자는 리렌더링 간에 캐싱할 함수 정의이고 두번째 인자는 반응형 값들이 들어간다.여기서 반응형 값이 변경(의존성이 변경)되었을 때만 다시 메모제이션된 버전이 변경된다.const memoizedCallback = useCallback( () => { doSomething(a, b); }, [a, b],);   또 다른 예시로 이 코드의 경우 x,y값이 바뀌지않는 경우기존 함수를 계속 반환하고 다음 렌더링 때 기존 함수를 다시 사용한다.만약 이어지는 렌더링에서 의존성을 비교했을 때 전과 달라지면 이..

Next Permutation→ 현 순열에서 사전 순으로 다음 순열 생성→ 입력 받은 배열을 오름차순으로 정렬 후 구한다.→ 주로 do-while문이 사용  next permutation이 필요한 상황데이터가 537으로 들어왔을 때 사전순으로 순열을 만들면 4개밖에 나오지않는다.실제 나와야하는 값은 6개가 나와야한다.  next permutation을 사용해 다음 순열 구하는 방법- 오름차순에서 내림차순으로 순열을 모두 뽑아내고 싶으면 처음엔 꼭 미리 오름차순 정렬하기 -  예시) 10 3 9 8 7 6 5 2 1 의 다음 순열 찾기 [ 해당 데이터는 배열에 들어있다고 가정 ]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. 재귀 - 숫..