TIL (Today I Learned)

Git을 통해 어떻게 협업 할수 있는지Git 사용법팀 프로젝트를 통해 직접 팀원들과 웹페이지 만들기오늘 강의를 통해 어떻게 github을 사용하여 팀원들과 협업 할수있을지에 대해알게 되었고, 웹페이지를 만들면서 details 태그와 details 태그를 어떻게 더 꾸밀

폰트 수정링크 걸기 및 색상 변경댓글 기능 구현 방법댓글 삭제 기능 구현오늘은 대표적으로 이렇게 4가지를 해보았다.첫번째 폰트 수정은눈누 라는 사이트에서 우리 사이트와 잘 어울릴 것 같은 폰트를 골라와{ margin: 0; padding: 0; font-family:

오늘은 프로젝트에서 Top 버튼을 만들기 위해 jquerry 함수에 대해 공부해봤다.jquerry $ 의 의미달러 기호 $ 는 제이쿼리를 의미하며 제이쿼리에 접근할 수 있게 해주는 식별자 이다.선택자를 이용하여 원하는 HTML 요소를 선택하고, 동작 함수를 정의하여 선

오늘은 async 와 await 에 대해 공부해보았다. async와 await는 JavaScript에서 비동기 프로그래밍을 간편하게 다룰 수 있도록 도입된 문법이다. 이들은 Promise를 기반으로 하며, 코드를 보다 동기식으로 작성할 수 있게 해주는 편리한 기능이다

오늘은 jQuery의 함수 show(), hide() 에 대해 알아보았다.show()와 hide() 함수는 jQuery에서 요소의 가시성을 조절하는 데 사용되는 메서드이다.먼저 show() 함수는 선택한 요소를 화면에 보이도록 만든다.이 함수는 선택한 요소의 displ

오늘은 javascript 관련 코딩 문제를 풀어보았다.먼저 문제에 대해 설명하자면문자열로 구성된 리스트 strings와, 정수 n이 주어졌을 때, 각 문자열의 인덱스 n번째 글자를 기준으로 오름차순 정렬하려 합니다. 예를 들어 strings가 "sun", "bed",

오늘은 새해 첫 TIL이다. 모두 새해 복 많이 받으시길!!오늘은 document 객체의 요소(Elements) 선택에 대해 좀 더 공부해보았다.먼저 .document는 JavaScript에서 DOM(Document Object Model)에 접근하기 객체인데, DOM

Today I Learned오늘은 HTMLCollection 과 NodeList 에 대해 알아보았다.HTMLCollection과 NodeList은 둘 다 DOM(Document Object Model) 요소의 집합을 나타내는 객체들이다. 하지만 몇 가지 중요한 차이점이

오늘은 프로그래머스의 자릿수 더하기 문제를 풀어보았다.자연수 N이 주어지면, N의 각 자릿수의 합을 구해서 return 하는 solution 함수를 만들어 주세요.예를들어 N = 123이면 1 + 2 + 3 = 6을 return 하면 됩니다.N의 범위 : 100,000

오늘은 Promise 함수에 대해 공부해보았다.먼저 Promise 함수란 비동기 작업의 완료 또는 실패와 그 결과 값을 알려 달라는 약속이다. JavaScript 에서는 주로 비동기 작업을 다룰 때 사용된다. 또한 Promise는 세 가지 상태를 가진다.resolve

오늘은 정렬 알고리즘에 대해 공부해 보았다.오늘 공부한 정렬 알고리즘은 총 3가지이다.먼저 버블 정렬(Bubble Sort)에 대해 알아보자. 위 이미지에서 볼수있듯 i번째 원소와 i+1번째 원소의 값을 비교하고 만약 i번째의 값이 i+1번째의 값보다 크다면 둘의 자리

오늘은 addeventLisener 메서드에 대해 알아보았다.addEventListener 메서드는 DOM 요소에 이벤트 리스너(EventListener)를 추가하는 메서드이다. 이를 통해 특정 이벤트가 발생했을 때 실행될 함수를 등록할 수 있다. 기본 사용법은 다음과

오늘은 개인 프로젝트로 진행중인 영화 검색 사이트의 필요 기능인 검색 기능을 구현 했던 방법에 대해 써보려 한다.먼저 영화의 제목과 이미지, 내용 등은 이미 API로 불러와 카드형태로 구현 해논 상황이었고 검색 기능으로써 구현해야 했던 부분들을 나열해보면이렇게 크게 2

오늘은 CSS 의 animation 속성에 대해 공부해 보았다.이 animation 은 웹 요소에 동적인 효과를 부여하기 위해 사용되는 CSS 속성이다. 애니메이션을 사용하면 사진을 움직이게 한다던지 확대,축소 회전 과 색상 변경 등 이 외에도 다양한 동작 효과를 만들

오늘은 CSS 에서 사용되는 Grid 대해 공부해 보았다.Grid 에 대해 간단하게 알아보면,CSS Grid 는 웹 페이지의 레이아웃을 구성하는 데 사용되는 2차원 그리드 시스템이다.Grid 의 기본적인 개념은 컨테이너와 아이템으로 이루어져 있다. 컨테이너에 disp

오늘은 CSS 의 가상 요소인 ::before 와 ::after 에 대해 알아보았다.먼저 가상 요소에 대해 설명하자면CSS에서 요소의 특정 부분에 스타일을 적용하기 위해 사용되는 장치이다.가상 요소는 실제 HTML 문서에는 존재하지 않지만 CSS를 사용하여 선택한 요소

오늘은 계속 사용하면서 정확히 알지않아 궁금했지만 찾아보지 못했던JSON 에 대해 공부해 보았다.JSON(JavaScript Object Notation) 은 텍스트 기반의 경량 데이터 교환 형식으로, 사람이 읽고 쓰기 쉬우면서 기계가 파싱하고 생성하기도 편리한 형식을

오늘은 React 를 배우기 시작하면서 같이 배우게 된 Yarn 에 대해 써보려 한다.Yarn은 JavaScript 패키지 매니저로, 프로젝트의 종속성을 관리하고 다운로드하여 설치하는 도구이다. Facebook, Google, Exponent 및 Tilde의 협력을 통

React 학습을 시작하면서 배우게된 JSX(JavaScript XML) 에 대해 정리 해보려 한다.

오늘은 내가 쓰고 있는 Visual Studio Code 의 몇가지 확장 프로그램들에 대해 정리 해봤다.Auto Rename Tag이 기능을 활성화하면 하나의 태그를 변경할 때 해당 태그의 닫는 태그도 자동으로 변경된다. 이를 통해 코드의 일관성을 유지하고 오타를 방지

오늘 정리 해볼것은 React Component 이다.컴포넌트(Component) 는 React에서 UI를 구성하는 독립적인 모듈로, 재사용 가능하며 독립적으로 관리될 수 있는 빌딩 블록이다. 각 컴포넌트는 자체적으로 상태(state) 를 가질 수 있으며, 이벤트 핸들

오늘은 강의를 통해 알게된 UUID 를 정리 해봤다.먼저 UUID 란 "Universally Unique Identifier"의 약자로, 범용적으로 고유한 식별자를 생성하기 위해 사용되는 표준이며, 주로 소프트웨어에서 고유한 값을 생성하는 데 활용된다. UUID는 12

오늘은 Styled-Components 에 대해 정리 해봤다.Styled-Components 는 React 의 컴포넌트에 CSS 적용하는데 사용되는 CSS-in-JS 라이브러리 중 하나이다.먼저 이 Styled-Components 설치 하기 위한 방법들을 알아보면첫번째

오늘은 React Fragment 에 대해 작성해보려 한다.React에서 Fragment는 불필요한 부모 요소를 추가하지 않고여러 요소를 그룹화하는 데 사용되는 기능이다.이 Fragment 사용 방법에 대해 알아보자.React Fragment를 사용하는 방법은 두 가지

Link 와 navigate 는 둘 다 React Router 라이브러리에서 제공하는 네비게이션에 사용되는 요소들이다.이 두가지를 사용하면 href 를 대체 할수있다!먼저 Link 에 대해 알아보면react-router-dom 에서 Link는 사용자가 클릭할 수 있는

Today I Learned

오늘은 useState 와 useRef 을 사용하는 input 내부의 값 관리에 대해서 작성 해보았다.먼저 useState 를 사용한 예를 살펴보자.useState를 이용한 Input 값 관리useState를 사용하면 입력 값을 상태로 관리할 수 있다. 상태가 변경될

오늘은 개인 과제에서 써야 할 Hook 인 Context 에 대해 Remind 할 겸 정리 해보았다.Context 를 정리 하기전에 먼저 Props Drilling 에 대해 알아보면,Props drilling은 React에서 데이터를 컴포넌트 트리의 깊은 곳까지 전달하

오늘은 useEffect 에 대해 작성 해보려 한다.useEffect는 React 함수형 컴포넌트에서 부수 효과(side effects) 를 수행할 수 있게 하는 Hook 중 하나이다. 부수 효과란 컴포넌트의 렌더링과는 직접적으로 관련이 없는 작업들을 말한다. 주로 데

오늘은 React.memo 에 대해 알아보고 정리해봤다.React.memo는 React 컴포넌트를 메모이제이션하여 성능을 최적화하는 데 사용되는 함수형 컴포넌트를 생성하는 메모이제이션(Higher-Order Component)이다. 이를 사용하면 컴포넌트가 렌더링

Today I Learned 오늘은 React 에서 Redux를 사용해 계산기를 만들어보는 연습을 해봤다. 먼저 Directory 의 구조는 다음과 같다. ✅ 필수 요구사항 input 안에 숫자를 입력 후, [더할게요] 선택 시 결과에 해당 숫자만큼 + 처리 in

오늘은 React Redux 에 대해서 정리해봤다.React Redux는 React 애플리케이션에서 상태 관리를 용이하게 해주는 라이브러리이다. React는 사용자 인터페이스를 구축하기 위한 우수한 도구이지만, 대규모 애플리케이션에서 상태를 효율적으로 관리하는 것은 어

그동안 팀 프로젝트를 시작하면서 너무 바쁜 나머지 TIL 을 계속 못썼었는데..드디어 성공적으로 프로젝트를 끝마쳐 이번 프로젝트에 관한 회고? 겸 TIL 을 작성 해보았다!먼저 이번 프로젝트는 뉴스 피드 를 만드는 프로젝트 였는데여기서 뉴스 피드란? 내 게시물을 포함한

웹서핑을 하다보면 가끔씩 상태 코드가 출력 될때가 있는데 오늘은 그 상태 코드들에 대해 정리해보았다.먼저 크게 정리 해보면100번대 (Informational - 정보성):요청이 수신되었으며, 처리가 계속된다.대개 웹 서버가 클라이언트에게 요청이 수신되었으며 처리가 진

오늘은 .env 에 대해 정리해봤다.env는 환경 변수(environment variables)를 의미한다.환경 변수는 운영 체제에서 프로세스를 실행할 때 프로세스의 환경을 구성하는 키-값 쌍이다. 이 변수들은 소프트웨어의 실행에 영향을 주는 다양한 설정 정보를 포함할

Axios 는 JavaScript에서 널리 사용되는 비동기 HTTP 클라이언트 라이브러리이다. 주로 웹 브라우저와 Node.js 환경에서 웹서버로 HTTP 요청을 보내고 받기 위해 사용되며 Axios는 Promise 기반의 API를 제공하여, 비동기 방식으로 HTTP

Thunder Client는 Visual Studio Code (VS Code) 확장 프로그램으로, API 테스트 및 모니터링을 위한 간단하고 편리한 GUI 도구이다. Postman과 유사한 기능을 제공하지만, VS Code 내부에서 직접 작동하여 개발자가 API를 빠

먼저 문제 상황을 보면,현재 프로필 페이지에서 닉네임을 변경할 시 닉네임 변경에 실패하며PATCH https://moneyfulpublicpolicy.co.kr/profile 401 (Unauthorized)프로필 업데이트 실패: AxiosError {mess

LocalStorage 란? 오늘은 과제를 하면서 자주 사용한 LocalStorage 에 대해 정리해봤다. 로컬 스토리지는 웹 브라우저에 데이터를 안전하게 저장하는 데 사용되는 웹 스토리지 기술 중 하나다. 로컬 스토리지는 브라우저 세션 간에 데이터를 유지하고, 페이

React Query는 서버 상태 관리를 위한 라이브러리로, 데이터 fetching, caching, synchronization 및 업데이트를 쉽게 처리할 수 있게 해준다. React Query를 사용하면 서버의 데이터를 마치 클라이언트 상태처럼 쉽게 다룰 수 있으며

오늘은 Throttling과 Debouncing 에 대해 정리해보았다.먼저 두 기술에 대해 간단하게 알아보면Throttling은 이벤트 핸들러가 일정한 시간 간격으로 호출되도록 제한하는 것이며, Debouncing은 이벤트 핸들러의 호출을 일정 시간 동안 지연시키는 것

TypeScript는 Microsoft에 의해 개발된 오픈 소스 언어로, JavaScript에 타입 시스템을 추가한 것이다. TypeScript는 크로스 플랫폼을 지원하며, JavaScript가 실행되는 모든 곳에서 실행될 수 있다. TypeScript 코드는 Type

예를 들어, 상자에 물건을 담는 일을 한다고 생각해보자. 각기 다른 종류의 물건들이 있을 때, 각 물건을 담기 위해 상자의 크기나 형태를 매번 바꾸는 것은 비효율적이다.여기서 '상자'가 제네릭에 해당하며, '물건'이 여러 종류의 타입이라고 생각할 수 있다. 제네릭을 사

React Query의 mutation 기능은 비동기 데이터 변경 작업(예: 데이터 생성, 업데이트, 삭제)을 처리하는 데 사용된다. React Query의 mutations를 사용하면 데이터 변경 로직을 구성하고, 실행 상태를 추적하며, 결과를 기반으로 컴포넌트 상태

몇가지 자주 쓰이는 유틸리티 타입들을 정리해봤다.이 유틸리티 타입은 T의 모든 속성을 선택적으로 만든다.이를 통해 객체의 부분 집합을 표현할 수 있다.이는 기존 타입의 구조를 유지하면서, 모든 속성을 필수가 아닌 선택적으로 만들고 싶을 때 유용하다.Partial의 반대

Next.js는 React 기반의 오픈 소스 JavaScript 프레임워크로, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 그리고 최근에는 Incremental Static Regeneration(ISR)과 같은 기능을 제공하여 웹 애플리케이션의 성능을

먼저, Next.js 프로젝트를 생성하기 위해 새 디렉토리를 만들고, 해당 디렉토리에서 다음 명령어를 실행한다.명령어를 실행하면 프로젝트 이름을 입력하라는 프롬프트가 나타난다. 프로젝트 이름을 입력하고 생성 과정을 진행한다.프로젝트 생성이 완료되면, 생성된 프로젝트 디

데이터베이스는 json-server 를 사용했다. 먼저 api 폴더를 만들어 todos > route.ts 경로에 백엔드 로직을 작성했다. toggle을 위한 patch 함수는이런식으로 작성해줬는데 클라이언트로부터 받은 요청의 바디에서 Todo 항목의 완료 여부와 ID

Next.js 13에서 소개된 app/ 디렉토리와 함께 등장한 use client 지시문은 특정 컴포넌트나 페이지가 클라이언트 사이드에서만 렌더링되어야 함을 명시하는 용도로 사용된다. 이 지시문은 컴포넌트 파일의 맨 위에 배치하여 사용하며, Next.js 프레임워크에게

NavBar 를 만들기 위해 Header 컴포넌트를 작성중에 NextUi 에서 Dropdown 이라는것을 찾아서 임의로 만든 nav 태그에 넣어 사용하려했다.❗ Dropdown 은 이런 모습이다.아바타 아이콘을 클릭하면 저런식으로 메뉴가 Drop! 되는 형태로 나오게

이번 프로젝트에서 처음으로 Jotai 를 사용하게 되어 공부해보고 간단하게 정리해보았다.Jotai는 React를 위한 최소주의적 상태 관리 라이브러리입니다. 이름은 일본어로 "상태"를 의미하며, 이 라이브러리의 목표는 간결하고 직관적인 API를 통해 React 애플리케

upsert는 "update"와 "insert"의 합성어로, 데이터베이스 작업에서 흔히 사용되는 기술이다. upsert 작업은 주어진 데이터가 이미 데이터베이스에 존재하는지를 체크한 후, 데이터가 존재하면 업데이트를, 존재하지 않으면 새로운 레코드를 삽입하는 과정을 단

Supabase의 .order() 메서드는 데이터를 정렬할 때 사용된다.이 메서드를 통해 반환되는 데이터의 순서를 지정할 수 있으며, SQL의 ORDER BY 구문과 유사하게 작동한다..order() 메서드는 두 가지 주요 매개변수를 받는다!columnName: 데이터

"호이스팅"이라는 용어는 글자 그대로 "끌어올리다"라는 뜻을 갖고 있다. JavaScript에서는 변수 선언과 함수 선언을 컴파일 단계에서 메모리로 끌어올리는 현상을 호이스팅이라고 한다. 이는 코드 실행 이전에 선언된 변수나 함수가 메모리에 할당되어 있어 마치 코드 상