joycie416 님의 블로그

오늘은 React의 몇 가지 hook에 관해 정리해보려고 한다. 1. `useState`가장 기본적인 hook이며, 함수 컴포넌트에서 가변적인 상태를 갖게 해준다. 가장 기본적인 사용방법은 아래와 같다.const [value, setValue] = useState(initialState);// value를 nextState로 바꾸기setValue(nextState);그러면 초기에 `value`를 `initialState`로 설정하고 이후 `setValue`를 통해 `value`를 바꿔줄 수 있다. 하지만 이렇게 하면 setValue를 여러 번 수행한 경우, 마지막 setValue만 적용하게 된다. (렌더링 최적화를 위해 setState를 모아 한 번에 실행한다. batch update 방식)  함수형 업..

프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr문제 이해재료는 1,2,3으로 제시되며 각각 빵, 야채, 고기를 의미한다.즉 문제설명에 제시된 재료는 [2,1,1,2,3,1,2,3,1]이다. 2번째 인덱스부터 1,2,3,1이 구성되니 햄버거 하나가 완성되어 재료가 [2,1,2,3,1]이 되어 1번째 인덱스부터 또 1,2,3,1이 되어 두 번째 햄버거가 완성된다.이 예시를 통해 알 수 있듯이 모든 1,2,3,1을 먼저 제거하는 것이 아니라, 제거한 후에 해당 위치에 또 다른 1,2,3,1이 만들어지면 그것을 먼저 없애야한다. 다른 예시를 살펴보자. [1,1,1,2..

이번 게시글은 개인과제 중 표에 스크롤 바를 이쁘게 적용하기 위해 찾아보다가 잘 정리된 글이 있어 정리하게 되었다. 🌟 스크롤 바(Scrollbar) 스타일링 💯 총정리Custom Scrollbar 스타일링 유튜브 홈페이지를 보면 스크롤바가 일반 브라우저 스크롤바와는 달리 동그랗게 스타일링 되어 있음을 볼 수 있다. 이처럼 스크롤바 역시 다른 요소처럼 CSS 스타일링이inpa.tistory.com결론은... 웨일에서 기본적으로 제공하는 스타일처럼 overlay가 되도록하고 싶었는데, 단순한 구조로는 불가능할 것 같고, 외부 라이브러리를 사용해야 할 것 같다. 웨일에서 스크롤바의 기본 스타일은 아래와 같다. 오른쪽은 마우스가 가까이 있을 때 반응이다.크롬에서 기본적으로 제공하는 스크롤바는 아래처럼 투박..

올림픽 메달 순위올림픽 경기 결과를 직접 입력하면 메달 순위에 맞게 정렬해줍니다. 처음으로  react와 vite를 사용해 구현했습니다.컴포넌트 분리 전체를 MakeTable로 분리함.전체 데이터 data에서 각 입력 정보를 가져와 하나의 행을 이룸.하단의 입력 데이터 전체를 저장, 초기화, 불러올 수 있는 버튼이 모여있는 태그를 연습을 위해 SaveData로 분리함.위 두 컴포넌트는 data와 setData를 props로 전달받음.제공하는 기능메달 순위에 따른 정렬입력된 데이터 변경 및 삭제로컬스토리지에 저장 및 불러오기기능 설명1. 메달 순위에 따른 정렬금메달, 은메달, 동메달 개수가 많을수록 상위에 위치함. 위 이미지에서 스웨덴과 금메달 개수가 같은 아일랜드 데이터를 입력하면 아래와 같다.각 에 ..

프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 문제 분석1. 주어진 텍스트만 포함해야 함.2. 주어진 텍스트 중 동일한 텍스트가 연속되면 안됨. 문제 해결 과정1.` split`을 통해 array로 바꾸자.하지만 지금 아는 지식으로는 여러 단어를 기준으로 `split`해서 하나의 array로 만드는 것은 복잡한 과정을 거쳐야할 것 같았다.  2. `replace`를 통해 주어진 택스트 앞에 공백을 추가한 후 `split`하자.공백을 추가해 `split`하면 단순하게 해결할 수 있겠다는 아이디어가 1번 과정 중 갑자기 떠올랐다. 이때 `replace` 매소드는..

firebase 등을 사용할 때 import { ... } from "./..../file.js"과 같은 내용을 본 적일 있을 것이다. 혹은 html에서 script 태그를 사용할 때 type='module'이라고 지정하는 경우가 있다. 느낌적으로 해당 파일에서 함수를 불러오는 것을 알 수 있다. (ES6 기준에서 작성합니다.) Module 기본 사용법ES6에서는 `export` 키워드를 사용해 모듈을 만들고, 다른 파일에서 사용할 수 있게 한다. 모듈은 재사용할 수 있는 함수, 객체 또는 원시값을 의미한다.// math.jsexport const add = (a,b) => a + b;export const multiply = (a,b) => a*b;export const ONE = 1;export co..

개발 공부 일지를 올리기 위해 티스토리를 처음 만들었다. 첫 글로 올리기에 git 명렁어 정리가 좋을 것 같아 첫 주제로 선택했다. 겸사겸사 제대로 익힐 수 있고 혹시 까먹은 경우 다시 보기에 좋을 것 같다.프로젝트를 진행하다보면 다른 사람의 코드에서 시작하는 경우가 많다. 이럴 때 git을 통해 github repository를 clone해서 해당 repository에 브랜치를 만들어 관리하게 된다. branch를 만들어 add/commit과  push/pull하는 방법에 대해 정리하려고 한다. (vScode 환경에서 진행한다.) 1. repository 주소 복사하기여기서 초록색 Code 버튼을 누르면 https 주소가 뜨고 이를 복사한다. 아래 친절하게 'cloning using the web U..