미누에요

프론트엔드 개발을 하다 어느정도 익숙해지면 듣게 될 또하나의 기술이다. 기존에는 React Query라는 이름으로 사용되고 있었지만, 현재는 React 뿐만아니라 Vue, Angular 등등 더 많은 프레임워크까지 지원하고자 Tanstack Query로 이름을 변경했다고 한다. 해당 내용을 공부하다 보면 서버 상태(Server State), QueryClinet등 여러가지 헷갈리는 개념들이 나오는데, 천천히 정리해보자. Tanstack Query 공식 문서에서는 Tanstack Query의 역할을 "웹 애플리케이션에서 서버 상태를 가져오고, 캐싱하고, 동기화하고, 업데이트하는 작업을 아주 쉽게 해준다"고 설명하고 있다. 여기서 "서버 상태"라는 말이 나오는데, 서버 상태(Server State)와 클라..

프로젝트를 진행하며 여러 코드를 참고하게 되는데, 그 중 Record를 보게 되어 정리해 본다. 우리는 흔히 객체를 생성할 때, 리터럴 방식으로 많이 사용한다.(나는 일단 이때까지는 그랬다.) RecordRecord는 키 타입(Keys), 객체 타입(Types)를 가진 객체를 정의할 때 사용하는 Typescript의 유틸리티 타입이다.정확히는, 모든 키는 Keys에 속하며, 모든 값은 Types를 가진다.type CatName = "miffy" | "boris" | "mordred"; interface CatInfo { age: number; breed: string;} const cats: Record = { miffy: { age: 10, breed: "Persian" }, boris: { a..

현재 개인적으로 공부 차 프로젝트를 진행 중인데, 이 프로젝트 중 Button 컴포넌트를 제작하고 있었다. 현재 TypeScript + module.scss를 사용하고 있는데, tsx 파일에서 특정 색상값을 변수 형식으로 넘겨주고, scss 파일에서 해당 값을 사용하고 싶었다.즉, tsx에서 변수를 넘겨받아 scss에서 사용하고 싶었던 것이다. const ImageCircle = styled.div` --size: ${props => props.size}px; width: var(--size); height: var(--size); border-radius: var(--size); background-image: url(${props => props.src}); backg..

화살표 함수(Arrow Function)화살표 함수는 변수에 함수를 저장하여 함수처럼 사용할 수 있는 방법이다.function sayHi(){ console.log("Hi");} 위와 같은 형태의 함수를 화살표 함수로 바꾸면,const sayHi = ()=>{ console.log("Hi");} 위처럼 변한다. 화살표 함수도 "함수" 라는 명칭을 가지고 있기 때문에 그냥 함수처럼 사용하면 된다고 생각하는 사람이 많을 거 같다.하지만 함수처럼 모든 곳에 사용할 수 있는 건 아니다. 그 이유는 화살표 함수(Arrow Function)의 this 바인딩과 관련있다. 일반적인 함수는 this를 기본적으로 가지고 있다.따라서 이 this를 함수에서 출력한다면 아래처럼 나타날 것이다.function a(..

디자인 패턴(Design Pattern)프로그램을 개발하다 보면 많은 문제점들이 발생한다. 이러한 반복적으로 발생되는 문제점을 해결하기 위해서는 많은 시간과 노력이 필요할 것이다.개발하면서 이러한 문제들을 최소화하고 수정하기 쉽도록 구조적으로 만든 패턴이 디자인 패턴이다. MVC도 여러 디자인 패턴의 종류 중 하나이다.  MVC란 ?MVC는 각각 Model, View, Controller를 의미한다.애플리케이션 개발 시 사용하며, 개발 영역을 Model, View, Controller의 세가지로 나눈다고 하여 MVC라고 불린다.UI 패턴과 비즈니스 로직 영역이 구분되어 서로 영향을 주지 않아 개발과 유지보수를 용이하게 만들었다. Model - 데이터와 비즈니스 로직을 관리앱이 포함해야할 데이터가 무엇인지..

동기 방식(Synchronous Processing Model)작업을 순차적으로 수행하는 방식여러개의 작업이 있는 경우에 한가지 작업을 수행 중이라면 뒤의 작업들은 대기하여야 한다.앞의 작업이 끝나지 않았다면 요청도 받지 않는다. 구글 플레이스토어와 애플 앱스토어를 모두 사용해본 사람은 알 것이다.구글 플레이스토어의 앱 업데이트는 하나의 앱이 업데이트 중이라면 나머지 앱들은 대기 중이라고 뜨며 업데이트가 진행되지 않는다.  비동기 방식(Asynchronous Processing Model)순서와 상관없이 작업을 수행하는 방식여러개의 작업이 있는 경우에 수행되고 있는 작업이 끝나지 않았더라도 요청을 받을 수 있다.모든 요청을 받아둔 다음 앞의 작업이 끝났다면 수행한다.  앱스토어는 업데이트를 요청하면 여러..

Props 란 ? 컴포넌트(사용자 정의 태그를 만들기 위한 함수)에 속성값을 받는 매개변수 함수에서의 매개변수(Parameter)와 인수(Argument) 대부분의 프로그래밍 언어에서는 위 그림처럼 매개변수(Parameter)와 인자(Argument)가 존재한다. React에서의 Props 함수에서와 마찬가지로, React의 컴포넌트(Components)가 함수와 비슷한 목적을 지니고 있다고 했으므로 React props는 컴포넌트(Components)의 매개변수(Parameter)인 셈이다.function Header(props) { return ( {props.title} );}function App() { return ( );} 컴..

컴포넌트란 ? 사용자 정의 태그를 의미한다. 컴포넌트 사용의 장점코드 양의 간소화같은 기능의 재사용으로 인한 효율성 증가 web 위와 같은 html 태그에서, header 부분을 우리가 임의로 함수처럼 정의하여 사용하고 싶을 때, 우리는 컴포넌트를 생성한다. function Header(props) { return ( {props.title} );} 위와 같이 Header라는 컴포넌트를 만들었고, return 값으로 우리가 묶고 싶은 태그들을 넣었다. 이로써 우리는 Header라는 태그만 작성하면 3줄의 태그들이 담긴 코드를 사용할 수 있는 것이다. 위와 같이 사용자가 정의하여 코드들을 기능별로 묶어둔 것을 컴포넌트(Components)라고 한다. 강..

이 게시물은 Udemy 의 [The Web Developer 부트캠프 2024] 를 보고 개인적으로 정리한 게시글입니다. CSS에서 많이 사용하는 div를 정렬하기 위해서 사용하는 방법들 중 하나는 flexbox, display 속성의 flex를 사용하는 것이다. 이번에는 display:flex와 함께 사용되는 justify-content, align-items 에 대해서 알아보자. 우선, display의 flex를 사용한 상태에서 시작하겠다. index.html Let's Play With Flexbox CSS를 연결해두었다. 그리고 5개의 div를 만들어 색상을 다르게 지정하였다. app.css body { font-family: 'Open Sans', sans-serif; } h1 { text-al..

Udemy [The Web Developer 부트캠프 2024] 강의 중 섹션 5 : HTML: 폼과 테이블 _ 57. 마라톤 선수 등록 양식 만들기를 보고 만든 폼입니다. Race Registration! First Name: Last Name: Select a Race: Fun Run 5k Half Marathon Full Marathon Email: Password: Select Age Group 0-9 10-19 20-29 30-39 40-49 50-59 60-69 70-79 80-89 90-99 Submit 결과