개발자 박가나

API (Application Programming Interface)다른 소프트웨어 시스템과 통신하기 위해 따라야 하는 규칙을 정의한다. 개발자는 애플리케이션이 다른 애플리케이션과 프로그래밍 방식으로 통신할 수 있도록 API를 표시하거나 생성한다. 즉, API는 클라이언트와 리소스 사이의 게이트웨이라고 할 수 있다. 클라이언트웹에서 정보에 액세스하려는 주체로서 API를 사용하는 사람 또는 소프트웨어 시스템일 수 있다. 리소스다양한 애플리케이션이 클라이언트에게 제공하는 정보로서 이미지, 동영상, 텍스트, 숫자 또는 모든 유형의 데이터일 수 있다. 서버클라이언트에게 리소스를 제공하는 시스템이다.  REST (Representational State Transfer)API 작동 방식에 대한 조건을 부과하는 ..

📌 오늘의 TIL[포켓몬 도감] 프로젝트   [포켓몬 도감] 프로젝트 코드 리팩토링. Context API 방식을 RTK 방식으로 변경Redux Toolkit을 이용해서 좀 더 효율적으로 전역 상태 관리를 해준다./* redux-toolkit/config/configStore.js */import { configureStore } from '@reduxjs/toolkit';import pokemon from '../slices/pokemonSlice';const store = configureStore({ reducer: { pokemon }});export default store;/* redux-toolkit/slices/pokemonSlice.js */import { cre..

📌 오늘의 TIL[포켓몬 도감] 프로젝트   [포켓몬 도감] 프로젝트 코드 리팩토링. props drilling 방식을 Context API 방식으로 변경Context API를 이용해서 state를 전역적으로 관리해준다./* context/PokemonContext.js */import { createContext } from 'react';export const PokemonContext = createContext(null);/* Dashboard.js */import { useContext } from 'react';import { PokemonContext } from '../context/PokemonContext';export default function Dashboard() { co..

📌 오늘의 TIL[포켓몬 도감] 프로젝트   [포켓몬 도감] 프로젝트 기능 구현. 포켓몬 상세 정보 페이지선택한 포켓몬의 상세 정보를 가져와서 화면에 보여준다. 포켓몬 선택 시 해당 포켓몬의 id 값을 router로 넘겨주고 path param을 이용해서 넘겨받은 id 값에 해당하는 포켓몬의 정보를 읽어온다./* Detail.jsx */import { useParams } from 'react-router-dom';import MOCK_DATA from '../Data';import { useEffect, useState } from 'react';export default function Detail() { const param = useParams(); const [pokemon, set..

📌 오늘의 TIL[포켓몬 도감] 프로젝트   [포켓몬 도감] 프로젝트 프로젝트 셋업vite를 사용해서 프로젝트를 셋업해준다.yarn create vite [폴더명] --template react 디자인 및 퍼블리싱styled-components 라이브러리를 이용해서 스타일을 적용시켜 주었다. 페이지/* Home.jsx */import { useNavigate } from 'react-router-dom';import styled from 'styled-components';import Button from '../components/Button';const Wrap = styled.div` height: 100vh; display: flex; flex-direction: column; ..

📌 오늘의 TIL[React 숙련] 강의   [React 숙련] 강의 React.memo컴포넌트를 memoization하는 방법이다. 부모 컴포넌트가 리렌더링되면 자식 컴포넌트는 변경된 부분이 없음에도 불구하고 불필요하게 리렌더링 되는데, React.memo를 이용해서 이를 방지할 수 있다. 부모 컴포넌트import { useState } from 'react';import Box from './Box';export default function App() { const [count, setCount] = useState(0); const handlePlus = () => setCount(count + 1); const handleMinus = () => setCount(count - ..

📌 오늘의 TIL[React 숙련] 강의챌린지반 수업   [React 숙련] 강의 styled-componentsReact에서 CSS-in-JS 방식으로 컴포넌트를 스타일링할 수 있게 도와주는 패키지이다. 기본적인 사용법import styled from 'styled-components';const StBox = styled.div` width: 100px; height: 100px; border: 1px solid red; margin: 20px;`;function App() { return 박스;};export default App; 조건부 스타일링 적용import styled from 'styled-components';const StBox = styled.div` wi..

📌 오늘의 TIL[야구 캘린더 만들기] 프로젝트   [야구 캘린더 만들기] 프로젝트 챌린지 반에서의 프로젝트가 시작되었다. 튜터님께서 가계부라는 예시를 들어주셨는데 추후 포트폴리오에 추가할 수 있을 정도의 퀄리티를 목표로 하는 프로젝트이기 때문에 이왕이면 일회성이 아니라 내가 실제로 사용할 수 있는 사이트를 만들고 싶었다. 어떤 사이트를 만들면 좋을지 계속 고민하다가 평소에 롯데 자이언츠의 팬으로써 야구를 즐겨보는 편이어서 야구 일정을 등록할 수 있는 캘린더를 만들기로 결정하였다. 구현할 기능다음주 금요일까지 계속해서 추가 및 구체화할 예정이다. 프로젝트이 브라우저 버전은 더 이상 지원되지 않습니다. 지원되는 브라우저로 업그레이드하세요.docs.google.com UI 디자인다음주 금요일까지 계속해서 ..

📌 오늘의 TIL알고리즘 문제 풀이 실패 원인 파악 (해결 완료)[Medal Tracker 만들기] 프로젝트   알고리즘 '문자열 다루기 기본' 문제 풀이 /* 실패 코드 */function solution(s) { if (s.length !== 4 && s.length !== 6) return false; return !!Number(s);} 문자열의 길이가 4 또는 6이 아니면 false를 반환하고, Number()를 이용해서 숫자인지 아닌지 판단하는 로직으로 코드를 작성했는데 실패가 발생을 했다. 가만히 생각해보니 0은 숫자이지만 falsy한 값을 의미하기 때문에 true가 아닌 false를 반환한다는 것을 깨달았고, 다음과 같이 로직을 추가하였다.문자열을 숫자로 변환한 값이 0인 경우 숫자인 것..

📌 오늘의 TIL[Medal Tracker 만들기] 프로젝트   [Madal Tracker] 프로젝트 기능 구현 - 메달 집계 내역 조회useState()로 메달 집계 내역을 저장할 변수 list를 생성한다.list에 저장된 데이터를 map()을 이용해서 화면에 보여준다./* App.jsx */const [list, setList] = useState([]); {list.map((item, index) => { return ; })} 기능 구현 - 메달 집계 내역 추가버튼 클릭 시 onSubmit()을 실행한다.클릭된 버튼이 '국가 추가' 버튼인 경우, handleCreate()를 실행한다.입력된 값을 바탕으로 객체를 생성한 뒤, list에 추가해준다.화면을 새로고침 해도 데이터를 유..