분류 전체보기

JavaScript const string = 'dcba' console.log(string.split('').sort().join('')) //'abcd' 자바스크립트에서 정렬을 하고 싶으면 `sort()`를 활용한다. 하지만, `sort()` 메서드는 `배열 자료형만 정렬이 가능`하다. 따라서, 문자열을 정렬하고 싶으면 우선 그 문자열을 배열로 변경해줘야 한다. 1. `split()` 메서드로 먼저 문자열을 배열로 만들어준다. split의 기본 문법은 `split(separator)`으로, separator 기준으로 어떻게 배열을 나눌건지 정해줄 수 있는데, `string.split('')`으로 적어준다면 string인 'dcba'를 ' 한 자 한 자 분리한다, 쪼갠다는 의미가 된다. 2. 이제 배열..

python에서 정렬하고 싶을 때 파이썬 내장 메서드의 `sort()`와 `sorted()`를 활용할 수 있다. 파이썬 정렬 메서드`sort()`는 list형 자료구조에만 사용가능하다면, `sorted()`는 아래와 같이 리스트형, 문자형, 튜플형과 같은 이터러블한 자료구조에 모두 사용 가능하다. 리스트 sort() 메서드my_numbers = [2,5,6,1,8,3]my_numbers.sort()print(my_numbers) #[1, 2, 3, 5, 6, 8] sorted() 함수정렬하고자하는 iterable을 첫번째 인수로 적어준다list = [5, 4, 3, 2, 1]print(sorted(list)) #[1, 2, 3, 4, 5]string = 'abcd'print(sorted(string)) ..

Form을 저장할 때 필요한 input 상태값을 object 타입으로 한번에 관리하고, 각 input 값이 변동될 때마다 상위 부모에서 handleChange 함수를 호출하여 form 상태값을 일괄적으로 관리한다. 상위 부모는 상태값 관리 및 비즈니스 로직을 담당하고, 하위 컴포넌트는 상위에서 상태값을 받아 ui 만 그릴 수 있도록 관심사를 분리하였다. 기본적인 설계는 위의 설명과 같이 컴포넌트를 구현하려고 코드를 리팩토링하는데 초점을 맞추었는데, 뭔가 문제가 있었다. 상위 부모 컴포넌트 export const Form = () => { const initialFormValue: Info = { name: '', location: { address: '', detailAddress: '', zipCode..

실시간 검색어 자동완성 컴포넌트를 구현했는데, 기존의 코드는 검색어 input 값이 바뀔때마다 서버에 api를 호출했다. 성능 개선을 위해 debounce라는 개념을 코드에 새로 적용해보았다. debounce가 어떤 개념이며 이걸 react 코드로 어떻게 적용할 수 있는지 알아본다. 기존 검색 컴포넌트 useEffect(() => { getLazySearchList(); //api 호출 }, [searchInputValue]); setSearchInputValue(e.target.value) } /> 위 코드에서는 useState hook으로 관리하고 있는 searchInputValue가 바뀔때마다 서버에 요청을 보낸다. 지금 예제 사진에서 보듯이 검색창에 유저가 아래 처럼 입력하면 ㄱ > 그 > 글 >..

서론기본적인 Form 컴포넌트가 있는데, 이름, 주소, 핸드폰 번호를 input으로 받을 수 있고, 저장버튼을 누르면 input 정보가 저장된다. 이 Form 컴포넌트는 생성시, 수정시 재사용할 수 있는 컴포넌트이다. 생성시기본 input 초기 상태값이 빈 string을 가진다.저장 이벤트 발생시 input 데이터 값을 모아서 생성요청을 보내는 함수인 onCreateInfo라는 함수를 호출한다. 수정시상위 컴포넌트에서 전달 받은 데이터 value값을 초기값으로 가진다.  저장 이벤트가 발생하면 input 데이터를 서버에 수정 요청을 보내는 onEditInfo라는 함수를 호출한다.   interface Props { data?: Data; //수정시에만 존재 onCreateInfo?: (inputs: ..

모노레포 도입지금 회사 프런트 팀의 프로젝트는 원래는 도메인 메뉴별로 나누어서 멀티레포 Multi repo 방식으로 개발을 했었다. 즉 개발자마다 레포지토리를 하나하나 따로 관리해서 개발했었고, 팀원끼리 똑같은 ui를 개발한다고 하여도 저장소간에 컨텍스트 공유가 어려워서 개개인 각자가 관리하는 레포지토리 내부에서 똑같은 ui를 중복해서 개발하기도 했다. 그런데 이제 여러곳에서 중복으로 사용하는 코드를 공유해서 재사용성을 높이고 하나의 코드베이스에서 모든 프로젝트의 코드와 자원을 관리하여 서로의 관계와 의존성을 쉽게 파악할 수 있도록 모노레포 환경을 구축했다. 모노레포 환경에서 처음 개발하면서 프로젝트 실행이 안될때가 있었는데 이때 마주한 에러를 정리한다.  Monorepo 빌드 도구 Turborepo  ..

문제 트리구조 데이터 interface Data { id: string; children: Data[]; } export const data: Data = { id: "상위1", children: [ { id: "하위1", children: [ { id: "하위1-1", children: [{ id: "하위1-1-1", children: [] }] }, { id: "하위1-2", children: [] }, ], }, { id: "하위2", children: [] }, ], }; 현재 클릭하는 아이템의 id는 상태값으로 관리하고 있다. 해당 아이템을 누르면 id 상태값이 바로 변경된다. const [currentId, setCurrentId] = useState(data.id); 그 변경된 id를 가지고..

회사 1차 프로젝트 개발 마감에, 방통대 기말고사에 ~ 꽤나 바쁜 12월을 보냈다. 시험은 12월 10일에 끝났는데.. 시연이 거의 연말 가까이인 12월 20일에 잡혀있어 그때까지 조금 힘들었던 느낌이 있었다. 시험 및 시연이 끝나고는 좀 널널하게 개발했는데, 연말까지 맨날 회사를 가서인지 목/어깨 통증이 지속되어서 그랬는지 에너지가 없던 나는... 내 개인시간에는 개발공부는 하지 않고 거의 쉬는 시간을 가졌던 것 같다. 근데도 회사를 맨날 나가니 뭔가 충분히 쉬지 못한 느낌이 계속 들었다.ㅠ 짧게 휴가를 내고 12월 회고를 1월 중순이 되어서 이제서야 제대로 발행한다~ 회사 업무 - 회원가입, 마이페이지 개발 공통으로 사용되는 회원가입, 마이페이지 인증 관련 페이지를 만들었다. 회사의 서비스가 3개로 ..

이슈사항 postTokenQuery(token) .then((res) => { console.log(res, '쿼리 res'); if (res.data) { setTokenInStorage(token); } }) .catch(() => toast.error('토큰 에러 발생')); //서버 응답 실패시 실행 안됨 rtk query 라이브러리를 활용해서 서버와 통신하는데 서버에서 보내주는 응답에 따라 성공하면? .then 으로 특정 로직을 실행하고 실패하면? .catch 로 토스트를 띄우는 로직이다. 그런데 서버의 응답에 실패해도, catch 문으로 넘어가지 않고, then에서 걸려 res 응답을 콘솔에 띄우는 이상한 점이 발견되었다. 성공시 {data: {…}} 가 콘솔에 찍히고, 실패시 {error: ..

클라이언트 단에서 http 비동기 통신 라이브러리로 axios를 사용했는데, 서버에 요청하는데 자꾸 서버에서 에러가 났다. API 요청 형식은 아래와 같다. 요청 메소드는 POST 요청 바디는 아무런 데이터도 넣지 않아야함 요청 헤더와 요청 파라메터 값으로만 서버에 요청 네트워크 탭에서 확인해보니, 헤더와 파라미터로 잘 요청이가지 않고, payload 바디에 헤더와 파라미터로 적어준 객체가 요청 바디로 보내져서 오류가 나는 것으로 확인이 되었다. 기존 코드 axios.post( 'url', { headers: { 'Content-Type': 'application/x-www-form-urlencoded', }, params: { transactionId, email, pageUri: 'http://192..