본문 바로가기

분류 전체보기

 (26)
Frequency Counter / Multiple Pointers - areThereDuplicates(중복항목 확인) Implement a function called, areThereDuplicates which accepts a variable number of arguments, and checks whether there are any duplicates among the arguments passed in. You can solve this using the frequency counter pattern OR the multiple pointers pattern. Examples: areThereDuplicates(1, 2, 3) // false areThereDuplicates(1, 2, 2) // true areThereDuplicates('a', 'b', 'c', 'a') // true function a..
Frequency Counter(빈도 카운터) - validAnagram(유효한 아나그램) Given two strings, write a function to determine if the second string is an anagram of the first. An anagram is a word, phrase, or name formed by rearranging the letters of another, such as cinema, formed from iceman. (주어진 두개의 스트링이 있습니다, 두번째 문자열이 첫번째 문자열의 아나그램인지 확인하는 함수를 작성하세요. 아나그램은 iceman-> cinema 처럼 순서가 재배열된 단어, 구, 이름입니다. ) Examples: validAnagram('', '') // true validAnagram('aaz', 'zza') // ..
It’s 2022, Please Don’t Just Use “console.log” Anymore console을 실용적으로 사용하기 위한 팁!! 1-1. console.log() console.log를 자주 사용하다보면 인쇄되는 정보의 양이 많아지고, 정보가 직관적이지 않게 된다. 개체를 넣는다면 출력되는 정보를 명확하게 볼 수 있다. 1-2. CSS스타일 2. console.warn() 콘솔이 많은 정보를 출력할 때, 우리가 원하는 것을 정확히 찾기가 쉽지 않다. 원하는 부분에 console.warn을 사용한다면 노란색 경고아이콘이 우리에게 친절한 이정표가 될 것이다. 3. console.error() HTTP 요청을 보냈을때, 에러 핸들링에 있어서 무의식적으로 console.log를 사용하는 경우가 많다. 하지만 이런 에러 핸들링에 console.error() 를 사용한다면, 빨간색 경고아이콘과..
변경에 대해 의사소통하기 프로젝트를 진행하면서 내 코드가 조원에 의해 수정되거나, 조원의 코드를 내가 수정하는 경우가 빈번했다. 항상 소통방식이나 코드 수정에 대해서 고민하여 조심스럽게 해야한다는 생각이 들어, 좋은 아티클과 에세이가 있어서 간단히 기록해두기 위해서 글을 쓴다. 소프트웨어 변경에 대해 이야기하는 방법 원작자가 불쾌하지 않고 개선하는 방법, 나의 코드 수정이 불편하지 않은 편안한 문화를 위한 조언. 대상에 따른 소통법 1. 이전의 상태는 어땠나요? 문제영역의 틀을 잡아야한다. =>문제영역의 설명 대상을 파악하기 문제영역에 직접적이고, 오래 근속한 사람을 대상으로는 간단한 설명. 신입사원이나, 처음 코드를 접하는 사람에게 설명한다면, 더 깊고 자세하게 정보를 설명해야함. 2. 왜 미흡했나요? 무엇이 누락되었는지, 잘..
리엑트는 언제 리렌더링 하는가. 리액트의 핵심 리엑트의 모든 리렌더링은 상태변경에서 시작된다. 컴포넌트가 리렌더링 될 때 모든 하위 요소들은 다시 렌더링 된다. "Increment" 버튼을 클릭하면 상태변경이 트리거 되고, Counter 컴포넌트의 리렌더링이 일어나며, Counter에 의해 렌더링 되는 BigCountNumber 또한 리렌더링 된다. 상태 변수가 변경될 때마다 전체 앱이 리렌더링된다. (리엑트에서 발생하는 모든 상태 변경이 애플리케이션 전체의 렌더링을 강제하는 것은 아님.) => 리렌더링은 상태를 가지고 있는 컴포넌트와 해당 컴포넌트의 하위 컴포넌트에만 영향을 준다. Why? 리엑트의 주요작업은 애플리케이션 UI를 리엑트 상태와 동기화하여 유지하는 것. 리렌더링의 요점은 변경해야할 사항을 파악하는 것. 리엑트는 이전 상..
[Trouble Shooting] useMutation을 활용한 생성, 수정, 삭제 서버 데이터를 관리하기 위한 React Query의 사용 React-Query는 데이터를 fetching 해온 후, 데이터를 캐싱하게 되고, stale 상태의 데이터를 refetching 하게 된다. 브라우저에서 사용자들은 화면을 바라보고 있을 때, 페이지가 전환될 때, (클릭과 같이) 데이터를 요청할 때 최신의 데이터를 받아봐야한다. React-Query의 경우 WindowFocus, Mount, Reconnect, stale data 의 상황에서 refetch를 실행함으로써, 데이터의 fresh 한 상태를 유지한다. 유저정보를 전역상태관리함. => 유저정보에 전역상태관리툴을 사용한 이유는, React-Query는 서버 데이터 관리에 특화되어 있기 때문이다. (서버를 거치느냐, 브라우저에만 국한되는 사..
map 함수 사용해보기! map() 함수란? 파라미터로 전달된 함수를 사용하여, 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 새로운 배열을 생성하는 것! 반복되는 컴포넌트를 렌더링 할때 사용하기 좋은 함수 arr.map(callbackFunction(currentValue, index, array), thisArg); currentValue 는 배열 내의 값 / index 현재 배열 내 값의 인덱스 / array 현재배열 / thisArg... 예제?(map 함수를 사용해 배열의 각 요소에 1을 더해서 반환하는 예제) const numbers = [1, 2 ,3]; const plusNumbers= numbers.map(function(number){ console.log(number); return number + 1; ..
과한 지연 로딩이 웹 성능에 미치는 영향 지연 로딩이란? 지연 로딩은 리소스가 필요할 때까지 리소스를 가져오기를 일시적으로 연기하여 웹 페이지의 데이터 사용을 줄이는 편리한 기술이다. 요즘은 지연 로딩이 웹 표준이며, 대부분의 주요 웹 브라우저는 loading = "lazy" 속성을 사용하여 지연 로딩을 지원한다. 지연로딩을 사용하면 컨텐츠가 필요한 위치로 스크롤 되었을때 리소스를 가져와 컨텐츠를 볼 수 있게 한다. 지연 로딩의 성능 효과 지연로딩의 장점 페이지 로딩 시간 감소(PLT) : 리소스 로딩을 지연시킴으로써 초기 페이지 로드 시간을 줄일 수 있다. (최근 개발하고 있는 실전 프로젝트에서는 posts 페이지에서 전체게시물을 불러와서 무한스크롤로 사용자에게 보여주는데, 이는 성능저하를 일으킬 수 있다고 본다. 지연로딩을 병합 적용한다면 ..

티스토리툴바