sohyeon kim

💡 UX 를 개선하기 위해 데이터를 미리 가져오는 기능 페이지 이동 전, 이동할 페이지의 쿼리를 미리 호출(prefetching)!캐시 데이터가 있는 상태로 다음 페이지로 이동 시 로딩 없이 바로 UI 가 나타난다. Header.jsxconst onMouseOver = () => { // 메뉴에 마우스가 올라오면 호출 if (pathname !== "/") return; queryClient.prefetchQuery({ queryKey: ["movies", 1], // 1 페이지 데이터 요청 queryFn: fetchMovieData, }); }; 메뉴에 마우스가 올라오면 데이터를 미리 불러놓는다. MoviePagination.jsxconst { data: movie..

💡 사용자에게 빠른 피드백을 제공하도록 하는 옵티미스틱(낙관적) 업데이트 어떤 요청이 있었을 때 서버 요청이 정상적으로 잘 될거란 가정 하에 UI 를 먼저 변경하고, 그 후 요청을 보내는 방식!서버 요청이 실패한다면 UI 는 다시 원상복구(revert / roll back) 된다.  const addMutation = useMutation({ mutationFn: addTodo, // 실행 순서 (2) // onSuccess: () => { ** 기존 방식 성공하면 무효화 // queryClient.invalidateQueries(["todos"]); // }, onMutate: async (newTodo) => { // 실행 순서 (1) console.log(..

💡 객체를 활용해 새 객체를 만들어낼 때 원본 객체에 영향이 없도록 해보자! 객체의 프로퍼티(속성)에 접근해 영향을 줌 : 가변let user = { name: 'aoto', gender: 'female',};const changeName = function (user, newName) { let newUser = user; newUser.name = newName; return newUser;};let user2 = changeName(user, 'yae');console.log(user.name, user2.name) // yae yae  객체의 프로퍼티에 접근하는 것이 아니라 새로운 객체를 반환 : 불변let user = { name: 'aoto', gender: 'female',};..

💡 forEach 와 map 의 차이점은? return 의 유무! forEach()값을 리턴하진 않고 그냥 함수를 실행만 했다.let numbers = [1, 2, 3, 4, 5]numbers.forEach(function (item) { console.log("item => " + item);});// item => 1// item => 2// item => 3// item => 4// item => 5 map()반드시 리턴값을 가져야 한다.배열을 받아 새로운 배열을 반환하는게 map 의 역할!** 항상 원본 배열의 길이만큼 return 된다.let newNumbers = numbers.map(function (item) { return item * 2;})console.log(newNumbers..

📝 문제대문자와 소문자가 섞여있는 문자열 s가 주어집니다. s에 'p'의 개수와 'y'의 개수를 비교해 같으면 True, 다르면 False를 return 하는 solution를 완성하세요. 'p', 'y' 모두 하나도 없는 경우는 항상 True를 리턴합니다. 단, 개수를 비교할 때 대문자와 소문자는 구별하지 않습니다.예를 들어 s가 "pPoooyY"면 true를 return하고 "Pyy"라면 false를 return합니다. 🫠 나의 풀이def solution(s): s_up = s.upper() p_len = 0 y_len = 0 for i in s_up: if i == "P": p_len += 1 if i == "Y": y_len += 1 retu..

📝 문제최빈값은 주어진 값 중에서 가장 자주 나오는 값을 의미합니다. 정수 배열 array가 매개변수로 주어질 때, 최빈값을 return 하도록 solution 함수를 완성해보세요. 최빈값이 여러 개면 -1을 return 합니다. 🫠 나의 풀이def solution(array): dic = {} for i in array: if i in dic: dic[i] += 1 else: dic[i] = 1 max_value = max(dic.values()) max_keys = [key for key in dic if dic[key] == max_value] return max_keys[0] if len(..

📝 문제덧셈, 뺄셈 수식들이 'X [연산자] Y = Z' 형태로 들어있는 문자열 배열 quiz가 매개변수로 주어집니다. 수식이 옳다면 "O"를 틀리다면 "X"를 순서대로 담은 배열을 return하도록 solution 함수를 완성해주세요. 🫠 나의 풀이def solution(quiz): result = [] for q in quiz: x, operator, y, equal, z = q.split(" ") sum = 0 if operator == "+": sum = int(x) + int(y) else: sum = int(x) - int(y) result.append("O") i..

📝 문제등차수열 혹은 등비수열 common이 매개변수로 주어질 때, 마지막 원소 다음으로 올 숫자를 return 하도록 solution 함수를 완성해 보세요. 🫠 나의 풀이def solution(common): gap = [] for i in range(2): gap.append(common[i+1] - common[i]) if gap[0] == gap[1]: return common[-1] + gap[0] else: return common[-1] * (gap[1] / gap[0]) 🧞‍♂️ 다른 사람의 풀이def solution(common): a, b, c = common[:3] if b - a == c- b: ..

📝 문제정수 l과 r이 주어졌을 때, l 이상 r이하의 정수 중에서 숫자 "0"과 "5"로만 이루어진 모든 정수를 오름차순으로 저장한 배열을 return 하는 solution 함수를 완성해 주세요.만약 그러한 정수가 없다면, -1이 담긴 배열을 return 합니다. 🫠 나의 풀이def solution(l, r): answer = [] for i in range(l, r+1): num = str(i) if all(x == "5" or x == "0" for x in [*num]): answer.append(i) return answer if len(answer) > 0 else [-1] JS 의 every 인 all ~ 🧞‍♂..

📝 문제직사각형 형태의 그림 파일이 있고, 이 그림 파일은 1 × 1 크기의 정사각형 크기의 픽셀로 이루어져 있습니다. 이 그림 파일을 나타낸 문자열 배열 picture과 정수 k가 매개변수로 주어질 때, 이 그림 파일을 가로 세로로 k배 늘린 그림 파일을 나타내도록 문자열 배열을 return 하는 solution 함수를 작성해 주세요. 🫠 나의 풀이def solution(picture, k): result = [] for i in range(len(picture)): paint = "" for j in range(len(picture[i])): paint += picture[i][j] * k for _ in range..