sohyeon kim

📝 문제문자열 s에는 공백으로 구분된 숫자들이 저장되어 있습니다. str에 나타나는 숫자 중 최소값과 최대값을 찾아 이를 "(최소값) (최대값)"형태의 문자열을 반환하는 함수, solution을 완성하세요.예를들어 s가 "1 2 3 4"라면 "1 4"를 리턴하고, "-1 -2 -3 -4"라면 "-4 -1"을 리턴하면 됩니다. 🫠 나의 풀이function solution(s) { const arr = s.split(' '); const min = Math.min(...arr); const max = Math.max(...arr); return `${min} ${max}`;} 실패가 떠서 문자열 때문인가 했더니.. 전개 구문이 필요한 거였다. 😨 🧞‍♂️ 다른 사람의 풀이function sol..

📝 문제 어떤 문자열에 대해서 접미사는 특정 인덱스부터 시작하는 문자열을 의미합니다. 예를 들어, "banana"의 모든 접미사는 "banana", "anana", "nana", "ana", "na", "a"입니다. 문자열 my_string이 매개변수로 주어질 때, my_string의 모든 접미사를 사전순으로 정렬한 문자열 배열을 return 하는 solution 함수를 작성해 주세요. 🫠 나의 풀이 def solution(my_string): answer = [] for i in range(0, len(my_string)): answer.append(my_string[i:len(my_string)]) return sorted(answer) 🧞‍♂️ 다른 사람의 풀이 def solution(my_stri..

💡 페이지에 잘못된 주소가 들어왔을 때 = Route 로 설정해 두지 않은 주소가 입력됐을 때를 ! 위해 NotFoundPage 를 설정해두자. * 와일드 카드는 모든걸 포함한다는 뜻 차례대로 Route path 를 비교하다가 일치하는게 없으면 마지막에 있는 * path 의 NotFoundPage 를 렌더링한다! NotFoundPage.jsx 홈으로 돌아갈 수 있도록 버튼에 링크를 걸어뒀다. function NotFoundPage() { return ( 홈으로 가기 ); } http://localhost:3000/hi 잘못된 주소를 입력해보면 ~ 설정해 둔 페이지가 잘 나온다!

💡 Route 를 그룹별로 묶어보자. courses 패스들을 정리해보자. } /> } /> } /> } /> } /> } /> } /> } />  Route 태그를 하나 더 만들어서 묶어줬다.이제 courses 만 바꾸면 하위 주소도 알아서 바뀐다! ✳️ Route 로 감싸면서 특정 path 안에서 공통된 디자인을 보여주고 싶다면?Main.jsx } /> } /> } /> } /> } /> } />  App.jsx 를 살펴보면, children 을 가져와 공통 레이아웃을 렌더링하고 있다.function App({ chi..

💡 NavLink 태그에 대해 알아보자. Link 를 NavLink 로 바꾸면 인라인 스타일을 적용할 수 있게 된다. 카탈로그 커뮤니티 선택한 메뉴에 밑줄이 그어지게 만들어주기..! function getLinkStyle({ isActive }) { return { textDecoration: isActive ? 'underline' : undefined, }; }

💡 typescript + react + vite 앱 만들어보자! ✚ 또 다른 명령어.. 새 폴더를 만들고 그 위치에서 npx create-vite-app . --template react-ts 폴더까지 새로 만든다면 npx create-vite-app 원하는_폴더_이름 --template react-ts npm install ✚ 원래는 이렇게 했었지만! npm create vite@latest yarn create vite npm 6.x npm create vite@latest [프로젝트 명] --template react-ts npm 7+, extra double-dash is needed: npm create vite@latest [프로젝트 명] --template react-ts 버전별로 입력하면..

💡 데이터를 바로 불러오는게 아니라 조건적으로 가져오기! 이벤트나 ~ 가져오는 순서나 ~ useQuery("key", getData, {option}) 유즈쿼리의 세번째 인자로 옵션을 설정할 수 있다! const { data, refetch } = useQuery(['todos'], getTodos, { enable: true }); enable 은 기본값이 true 여서 적지 않아도 true ! true 면 바로 실행해 데이터를 가져온다는 뜻이다. 그런데 자동으로 바로 데이터를 불러오는게 아니라 😲 사용자가 버튼을 눌렀거나 할 때 데이터를 가져오고싶다면? Disabling/Pausing Queries const { data, refetch } = useQuery(['todos'], getTodos, {..

💡 첫 프로젝트 글.. tmdb 영화 api 를 이용해 최신 영화를 가져와검색 기능을 구현하는 프로젝트였다. 처음엔 가져오는 것만으로도 막막했는데 어찌저찌 완성했다.그리고 tmdb 엔 정말 많은 api 키가 있었다.. 다른 방식으로도 재밌게 쓸 수 있을 듯 해..! 👀 🎀 상세페이지 API포스터, 백드롭 포스터, 평점, 영화 공식 사이트(click 에 연결) 등을 가져오는 주소!찾아보니 등장인물 정보도 가져오는 api 도 있었다.const FULL_URL = `${BASE_URL}movie/${movieId}?language=en-US&`; 🎀 포스터 이미지가 없는 영화는 대체 이미지를 넣어줬다 !oneerror="this.src='url'"movieLi.innerHTML += ` ..

💡 프롭스를 더 유연하게 내려보자 ~ UtilityType.tsx import { AddressComponent, PersonChildComponent, ProfileComponent, } from "./UtilityTypeChildren"; export type PersonProps = { id: string; description: string; address: string; age: number; profile: string; }; export const PersonComponent = ({ // ❗️ 다섯가지 타입들 설정 id, description, address, age, profile, }: PersonProps) => { return ( {id} // ❗️ 어드레스만 하나 내려주는 중 );..

💡 타입스크립트를 투두리스트에 활용해 보자. type Todo = { id: string; isDone: boolean; }; function App() { const [todos, setTodos] = useState([]); // Todo 에 세팅은 어떻게 넘길까?! return ( {todos.map(({ id }) => ( ))} ); } function Todo() { return ; } export default App; function App() { const [todos, setTodos] = useState([]); return ( {todos.map(({ id }) => ( // ❗️ 프롭스 넘겨주고 ))} ); } function Todo({ id, setTodos, }: { id: ..