김성원의 코딩 일기

문제 설명 선행 스킬이란 어떤 스킬을 배우기 전에 먼저 배워야 하는 스킬을 뜻합니다. 예를 들어 선행 스킬 순서가 스파크 → 라이트닝 볼트 → 썬더일때, 썬더를 배우려면 먼저 라이트닝 볼트를 배워야 하고, 라이트닝 볼트를 배우려면 먼저 스파크를 배워야 합니다. 위 순서에 없는 다른 스킬(힐링 등)은 순서에 상관없이 배울 수 있습니다. 따라서 스파크 → 힐링 → 라이트닝 볼트 → 썬더와 같은 스킬트리는 가능하지만, 썬더 → 스파크나 라이트닝 볼트 → 스파크 → 힐링 → 썬더와 같은 스킬트리는 불가능합니다. 선행 스킬 순서 skill과 유저들이 만든 스킬트리1를 담은 배열 skill_trees가 매개변수로 주어질 때, 가능한 스킬트리 개수를 return 하는 solution 함수를 작성해주세요. 제한 조건 ..

for문 말고 map() return 밖에는 for문을 사용할 수 있지만 안에는 사용이 불가능한다.(앞에 if와 삼항연산자 처럼) 그래서 map()을 이용한다. (공식 문서로 map()을 확인해보세요~~) key 리액트에서 key는 컴포넌트 배열을 랜더링했을 때 어떤 원소에 변동이 있었는지 알아내려고 사용한다. 예를 들어 유독적인 데이터를 다룰 때는 원소를 새로 생성할 수도, 제거할 수도, 수정할 구도 있다. key가 없을 때는 가상 DOM을 비교하는 과정에서 리스트를 순차적으로 비교하면서 변화를 감지한다. 하지만 key가 있다면 이 값을 사용하여 어떤 변화가 일어났는지 더욱 빠르게 알아낼 수 있다. (우리가 알기 위함 보다는 컴퓨터가 알 수 있게 하는 기능이라고 생각하면 쉽다.) 그래서 데이터가 가진 ..

ref란? - ref는 특정 DOM에 작업을 해야 할 때 ref를 사용한다. 즉, DOM을 꼭 직접적으로 건드려야 할 때 사용하는 것이다. DOM을 꼭 사용해야 하는 상황 - start만으로 해결할 수 없는 상황 특정 input에 포커스 주기 스크롤 박스 조작하기 Canvas 요소에 그림 그리기 등~~ 위와 같은 사황은 어쩔 수 없이 DOM에 직접적으로 접근해야 하는데, 이때 ref를 사용한다.

- 이벤트 핸들링은 JS공부하면서 알아야 하는 부분이니 특별히 설명하지 않겠습니다~~ 이벤트를 사용할 시 주의 사항 1. 이벤트 이름은 카멜 표기법으로 작성한다. - html은 onclick으로 작성하지만 react는 onClick으로 작성한다. 2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라 함수 형태의 값을 전달한다. 3. DOM 요서에만 이벤트를 설정할 수 있다. - 즉 div, button, input 등의 DOM 요소에는 이벤트를 설정할 수 있지만, 우리가 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없다. 이벤트 종류 대표적인 이벤트 핸들러 종류는 다음과 같습니다. onClick : 마우스 클릭 이벤트를 처리합니다. onChange : 입력값이 변경되었을 때 발생하는 이..

클래스형 컴포넌트랑과 다르게 함수 컴포넌트는 리액트 16.8 버전 업데이트 이후 useState라는 hook이 나왔다. 이것은 배열 비구조화 할당을 사용하여 [변수, 함수] = useState() 의 형태를 같는다. 각 변수와 함수의 역할은 아래와 같다. 변수 - 원소 현재 상태 함수 - 상태를 바꿈 useState는 한 컴초넌트에서 여러 번 사용해도 산관없다.

문제 설명 캐시 지도개발팀에서 근무하는 제이지는 지도에서 도시 이름을 검색하면 해당 도시와 관련된 맛집 게시물들을 데이터베이스에서 읽어 보여주는 서비스를 개발하고 있다. 이 프로그램의 테스팅 업무를 담당하고 있는 어피치는 서비스를 오픈하기 전 각 로직에 대한 성능 측정을 수행하였는데, 제이지가 작성한 부분 중 데이터베이스에서 게시물을 가져오는 부분의 실행시간이 너무 오래 걸린다는 것을 알게 되었다. 어피치는 제이지에게 해당 로직을 개선하라고 닦달하기 시작하였고, 제이지는 DB 캐시를 적용하여 성능 개선을 시도하고 있지만 캐시 크기를 얼마로 해야 효율적인지 몰라 난감한 상황이다. 어피치에게 시달리는 제이지를 도와, DB 캐시를 적용할 때 캐시 크기에 따른 실행시간 측정 프로그램을 작성하시오. 입력 형태 캐..

1. 사용 이유 - 가장 큰 이유는 api 호출 시 코드가 간단하다는 것, 그리고 클라이언트 테이터와 서버 데이터를 분리한 가는 것이라고 생각한다. 2. 장점 캐싱 (? 컴퓨팅에서 캐시는 일반적으로 일시적인 특징이 있는 데이터 하위 집합을 저장하는 고속 데이터 스토리지 계층입니다. 따라서 이후에 해당 데이터에 대한 요청이 있을 경우 데이터의 기본 스토리지 위치에 액세스 할 때보다 더 빠르게 요청을 처리할 수 있습니다.) get을 한 데이터에 대해 update를 하면 자동으로 get을 다시 수행하고 오래된 것을 판단하여 다시 get 한다. 동일한 데이터를 여러 번 요청하면 1번만 요청한다. (중복 호출 허용 시간 조절 가능) 비동기 과정을 선언적으로 관리할 수 있으며 React hook과 사용하는 구조가 ..

- api는 간다 하게 생각하면 프론트와 백 서버의 소통 방식이라고 생각하면 된다. 그렇다면 React에서는 어떻게 api로 소통할까? 우선 React-qurery라는 좋은 라이브러리가 있지만 없다는 전제로 구성을 해보자!! React-qurery 없이 api 호출하기 1. 우선 호출 시 date를 받을 변수를 선언해야 한다. (우선 TS가 없다는 전제로 해보자!!) (공부한 곳에서 코인 정보가 있는 open api를 사용해서 그것을 예로 들었다!!) const [coins, setCoins] = useState([]); 2. 그 다음은 api 호출하고 json형태로 바꿔준다. (useEffect, fetch() 사용!!) useEffect(() => { (async () => { const respon..

Outlet - 자식 컴퍼넌트를 부모 컨퍼넌트에 붙여서 보여주고 싶을 때 사용한다. Router에 children key를 선언하고 value를 배열로 선언한 후 v6선언했던 것과 동일하게 한다. 예) // Router.tsx path: "user/:userId", element: , children: [ { path: "followers", element: , } ] // User.tsx import { Outlet, useParams, Link } from "react-router-dom"; function User() { const { userId } = useParams(); return( {users[Number(userId)-1].name} See followers ); } export def..

- Router에서 지원하는 hooks 몇 개만 알아보자!! useNavigate - 페이지를 이동 시키고 싶을 때 사용하는 것으로 v5에서는 location.push 형태롤 사용했던 것을 router hook으로 만든 것이다. 변수에 useNavigate()을 할당하고 btn에 onCilck을 선언한 후 onCilck에 반응하는 함수에 변수명("url")을 입력하면 끝!! import { Link, useNavigate } from 'react-router-dom'; function Header() { const navigate = useNavigate(); const onAboutClick = () => { navigate("/about"); }; return ( Home About ); } expo..