하루하루 개발 일기 하루하루 개발 일기

1. 문제 https://school.programmers.co.kr/learn/courses/30/lessons/42860 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 2. 풀이 String.charCodeAt() 이용 문자열을 아스키코드로 변환한다. 왼쪽에서부터 오른쪽으로 이동하면서 A와 비교해서 오름차순이 이득인지 내림차순이 이득인지 판단하여 더 이득인쪽을 더한다. 0부터 length-1까지 시작한 index를 기준으로 연속된 A를 파악해 처음부터 오른쪽으로 쭉 가는게 이득인지 오른쪽으로 갔다가 멈춰서 반대편으로 돌아서 연속된 A가 끝나는 지점까지..

1. MVC 아키텍처 Model(데이터) - View(화면) - Controller(컨트롤러) Model의 데이터를 받아서 화면에 그리고, 화면으로부터 사용자의 동작을 받아 Model을 변경 Ajax로 부터 받는 데이터를 Model HTML과 CSS로 만들어지는 화면을 View javascript가 데이터를 받아 조작하여 서버에 전달하는 Controller의 역할을 수행 Model과 View의 종속성을 최대한 분리하기 위해 HTML과 jQuery를 따로 관리하는 것이 주효 Ajax를 통해 서버에서 HTML을 만들지 않고 데이터만 교환이 가능하게 되었고 JS로 DOM을 조작하는 작업이 중요함에 따라 jQuery를 통해 Ajax와 DOM을 다루게 됨 2. MVVM 아키텍처 선언적(Declarative) 프로..

React Query는 API 통신과 비동기 데이터 관리에 사용되는 React 라이브러리 입니다. 1. React-Query 이전 state에 비동기 데이터를 보관할 경우 다수의 component의 lifecycle에 따라 비동기 데이터가 관리되기 때문에 캐싱 등 최적화를 하기 어려움 다수의 component에서 동일한 API를 호출하거나, 특정 API응답이 다른 API에 영향을 미치는 경우 등에 대응하기 어려움 Redux를 사용하여 비동기 데이터를 관리할 경우 componet의 lifecycle과 관계없이 비동기 데이터를 관리할 수 있어 최적화가 쉬우며 복잡한 사용자 시나리오에도 대응 가능 장황한 Boilerplate 코드로 인해 비동기 Action 처리에 복잡성 증가 Redux는 API 통신 및 비동..

1. 블록체인 데이터 분산 처리 기술 네트워크에 참여하는 모든 사용자가 모든 거래 내역 등의 데이터를 분산, 저장 블록들을 체인형태로 묶은 형태 기존의 거래 방식은 중앙 서버가 모든 거래 내역을 가지고 거래 내역을 검증한다면, 블록체인은 여러 명이 거래 내역을 나누어 저장 중앙 관리자가 필요 없음 2. 블록체인의 특징 Cryptohraphically secure 복잡한 수학적 알고리즘으로 보호되어 안전하다. Transitional singleton machine 블록체인 네트워.크에 참여하는 노드들이 동일하게 공유하는 단일 시스템이 존재한다. With shared state 위 단일 시스템은 모두에게 공유되고 오픈되어 확인할 수 있다. 3. 스마트 컨트랙트 일반적인 프로그램과 흡사 블록체인 네트워크 위에..

1. 이더리움 네트워크의 종류와 특징 메인넷 테스트넷 테스트를 위한 임시 네트워크 모두에게 공개된, 테스트를 위한 네트워크 2. 클라이언트 이더리움 네트워크를 구성하는 개별 노드 이더리움 네트워크에는 클라이언트만 존재 3. 프로바이더 이더리움 네트워크에 대한 연결을 위한 추상화를 제공하는 클래스 블록체인에 대한 읽기 전용 액세스 제공 개인이 노트가 될 수 없기 때문에 네트워크의 정보를 대신 제공 특정한 형식으로 항상 요청해야하기 때문에 형식으로의 변경을 도와주는 Ethers.js 라이브러리 존재 4. 지갑 이더리움 계정과 상호 작용할 수 있는 애플리케이션 인터넷 뱅킹 앱과 비슷하지만 은행은 없음 5. 수도꼭지(Faucet) 테스트넷에서 사용자 지갑에 무료로 토큰을 추가할 수 있도록 해주는 웹 서비스 6...

1. useNavigate를 사용하여 state로 전달 [ 이동 전 페이지 ] const navigate = useNavigate(); navigate('/home', {state:{id: 1, name: 'test'}}); 경로로 이동하면서 파라미터로 state의 id, name을 넘긴다. [ /home으로 이동 후 ] const location = useLocation(); const state = location.state as { id: number; name: string }; const id = state.id; const name = state.name; useLocation 훅을 이용하여 location.state로 id, name 인자를 전달 받는다. state의 타입 값이 unknown..

정적으로 이미지를 로드하는 방법은 다음과 같다. import timeIcon from "@/assets/icons/time.png" import placeIcon from "@/assets/icons/place.png" 하지만 필요한 이미지가 경우에 따라 달라질 때가 있다. 예를 들어 프로필 사진을 보여주어야 한다면 사람의 수는 100명, 1000명이 넘는데 이 모든 이미지를 정적으로 불러와 사용할 수는 없을 것이다. Webpack으로 빌드하는 방식에서는 require을 사용해서 동적으로 이미지를 불러올 수 있지만 Vite와 같이 ESBuild로 할 경우 require이 import와 export로 대체되기 때문에 사용할 수 없다. 그러면 어떻게 동적으로 이미지를 불러올 수 있을까? https://sta..

좋은 Frontend Developer로 성장해 나가기 이해 블로그에 공부한 개념들을 정리해 나갈 생각이다. 다음은 진행한 프로젝트 개요 및 기술 스택, 라이브러리에 대한 정리이다. 프로젝트를 진행할 수록 추가할 계획이다. 1. 1학기 SSAFY FINAL 관통 프로젝트 JIPSEE [개요] 부동산 매물 소개 및 맞춤 매물 추천 서비스 [기술스택] Vue Vuex TailwindCSS 2. 2학기 SSAFY 공통 프로젝트 PLAYGROUND [개요] 운동(농구, 축구, 배드민턴 등)을 같이 하기를 원하는 사람들을 위한 운동 매칭 서비스 [주요 기술 스택] "react": "^18.2.0", "typescript": "^4.9.3", "react-query": "^3.39.3", "react-redux":..