TIL

240416 TIL

오늘 JS 강의를 끝내려고 했는데 모르는 부분을 더 찾아보다가 마저 못끝내게 되었다.클론코딩의 중요성을 깨닳은거 같다.ObjectHTML in JSElementsEventsCSS in JSJS 강의 2. JS로 간단한 크롬 앱을 만들기JS로 간단한 크롬 앱 완성하기.

JS 강의를 끝내고 HTML과 JS를 이용해 간단한 Todo웹사이트를 만들었다.아직 CSS는 어려워서 디자인은 나중에 다시 손볼 예정이다.오늘치 데일리 미션도 끝냈다.background.jsclock.jsgreeting.jsquotes.jstodo.jsweather.j

다시 React 시작했다. JS를 조금이라도 이해하고 다시 보니까 훨씬 이해가 쉽다.여전히 오타나 변수이름에서 고생중..영어 타자도 연습해야겠다고 생각하고 있다.\\여전히 CSS는 잘 안된다.데일리 미션기초적인 React 이해이해를 바탕으로 간단한 React 코딩JS도

본격적으로 프로그래밍 커리큘럼을 시작했다.생각보다 알고리즘 공부가 어려울것 같다.문제를 이해해도 풀이과정을 생각하는게 어려워 시간이 오래 걸리고 접근도 많이 벗어난다.JS 문법 종합반 1주차~3주차 3번강의자세히 배울수 있어서 좋다JS 문법 종합반 마무리 후, 개인 프

1)대문자와 소문자가 섞여있는 문자열 s가 주어집니다. s에 'p'의 개수와 'y'의 개수를 비교해 같으면 True, 다르면 False를 return 하는 solution를 완성하세요. 'p', 'y' 모두 하나도 없는 경우는 항상 True를 리턴합니다. 단, 개수를

// 콜백함수 제어권// 1. 호출 시점에 대한 제어권// setInterval : 반복해서 매게변수로 받은 콜백함수의 로직을 수행// var count = 0;// var timer = setInterval(function () {// console.log(cou

알고리즘 공부 시작..아직은 할만한데 뒤쪽 문제 봤을때 아직 막막하다.JS 강의 완강 개인과제 시작.손으로 만들기는 아직 버겁다 내일부터 차근차근 손으로 만들어 봐야겠다.

알고리즘 공부 막막하다.잘 안풀린다. 다른사람이 푼거 볼때는 이해되는데 막상 쓸려고 하면 답없다...개인과제 손코딩으로 만드는중..추가해야될게 생각나면 계속 추가할 생각.마우스 올리면 정보가 뜬다!

2)함수 solution은 정수 x와 자연수 n을 입력 받아, x부터 시작해 x씩 증가하는 숫자를 n개 지니는 리스트를 리턴해야 합니다. 다음 제한 조건을 보고, 조건을 만족하는 함수, solution을 완성해주세요.x는 -10000000 이상, 10000000 이하인

3)양의 정수 x가 하샤드 수이려면 x의 자릿수의 합으로 x가 나누어져야 합니다. 예를 들어 18의 자릿수 합은 1+8=9이고, 18은 9로 나누어 떨어지므로 18은 하샤드 수입니다. 자연수 x를 입력받아 x가 하샤드 수인지 아닌지 검사하는 함수, solution을 완

4)1937년 Collatz란 사람에 의해 제기된 이 추측은, 주어진 수가 1이 될 때까지 다음 작업을 반복하면, 모든 수를 1로 만들 수 있다는 추측입니다. 작업은 다음과 같습니다.예를 들어, 주어진 수가 6이라면 6 → 3 → 10 → 5 → 16 → 8 → 4 →

5)array의 각 element 중 divisor로 나누어 떨어지는 값을 오름차순으로 정렬한 배열을 반환하는 함수, solution을 작성해주세요.divisor로 나누어 떨어지는 element가 하나도 없다면 배열에 -1을 담아 반환하세요.arr은 자연수를 담은 배열

6)0부터 9까지의 숫자 중 일부가 들어있는 정수 배열 numbers가 매개변수로 주어집니다. numbers에서 찾을 수 없는 0부터 9까지의 숫자를 모두 찾아 더한 수를 return 하도록 solution 함수를 완성해주세요.1 ≤ numbers의 길이 ≤ 9 \-

7)길이가 n이고, "수박수박수박수...."와 같은 패턴을 유지하는 문자열을 리턴하는 함수, solution을 완성하세요. 예를들어 n이 4이면 "수박수박"을 리턴하고 3이라면 "수박수"를 리턴하면 됩니다.n은 길이 10,000이하인 자연수입니다.

7)길이가 같은 두 1차원 정수 배열 a, b가 매개변수로 주어집니다. a와 b의 내적을 return 하도록 solution 함수를 완성해주세요.이때, a와 b의 내적은 a\[0]\*b\[0] + a\[1]\*b\[1] + ... + a\[n-1]\*b\[n-1] 입니

9)두 정수 left와 right가 매개변수로 주어집니다. left부터 right까지의 모든 수들 중에서, 약수의 개수가 짝수인 수는 더하고, 약수의 개수가 홀수인 수는 뺀 수를 return 하도록 solution 함수를 완성해주세요.1 ≤ left ≤ right ≤

10)문자열 s에 나타나는 문자를 큰것부터 작은 순으로 정렬해 새로운 문자열을 리턴하는 함수, solution을 완성해주세요.s는 영문 대소문자로만 구성되어 있으며, 대문자는 소문자보다 작은 것으로 간주합니다.str은 길이 1 이상인 문자열입니다.

10)새로 생긴 놀이기구는 인기가 매우 많아 줄이 끊이질 않습니다. 이 놀이기구의 원래 이용료는 price원 인데, 놀이기구를 N 번 째 이용한다면 원래 이용료의 N배를 받기로 하였습니다. 즉, 처음 이용료가 100이었다면 2번째에는 200, 3번째에는 300으로 요금

11)문자열 s의 길이가 4 혹은 6이고, 숫자로만 구성돼있는지 확인해주는 함수, solution을 완성하세요. 예를 들어 s가 "a234"이면 False를 리턴하고 "1234"라면 True를 리턴하면 됩니다.s는 길이 1 이상, 길이 8 이하인 문자열입니다.s는 영문

12)행렬의 덧셈은 행과 열의 크기가 같은 두 행렬의 같은 행, 같은 열의 값을 서로 더한 결과가 됩니다. 2개의 행렬 arr1과 arr2를 입력받아, 행렬 덧셈의 결과를 반환하는 함수, solution을 완성해주세요.행렬 arr1, arr2의 행과 열의 길이는 500

14)이 문제에는 표준 입력으로 두 개의 정수 n과 m이 주어집니다.별(\*) 문자를 이용해 가로의 길이가 n, 세로의 길이가 m인 직사각형 형태를 출력해보세요.n과 m은 각각 1000 이하인 자연수입니다. 5 3사실 처음 보고 뭔소린지 몰라서 한참 해매다가 썼다..

useState는 React에서 상태를 관리하기 위한 훅 중 하나입니다. 이를 사요하면 함수형 컴포넌트에서도 상태를 지역적으로 관리할 수 있습니다.여기서 useState는 배열을 반환하며, 첫 번째 요소는 현재 상태를 가지고 있고, 두 번째 요소는 해당 상태를 변경하는

리액트 훅은 리액트 16.8에 도입된 기능으로, 함수형 컴포넌트에서도 상태와 라이프사이클 관련 기능을 사용할 수 있게 해주는 도구이다. 이를 통해 클래스형 컴포넌트의 필요성을 줄이고, 함수형 컴포넌트의 사용을 촉진할 수 있다. 주요 훅에는 useState, useEff

오늘은 React 애플리케이션에서 전역 스타일링 개념에 대해 공부했습니다. React에서 스타일링을 관리하는 방법은 인라인 스타일에서부터 CSS-in-JS 솔루션까지 다양하지만, 전역 스타일을 관리하는 것은 애플리케이션 전반에 걸쳐 일관성을 유지하는 데 중요합니다. 배

React Router DOM은 React 애플리케이션에서 클라이언트 측 라우팅을 구현하기 위한 라이브러리입니다. React Router는 URL을 통해 애플리케이션의 다른 부분으로 사용자를 안내하고, URL 상태를 관리할 수 있게 도와줍니다. 이로써 사용자 경험을 향

useEffect는 React의 Hook 중 하나로, 함수형 컴포넌트에서 부수 효과를 처리하는 데 사용됩니다. 부수 효과란 주로 데이터 fetching, 구독(subscriptions), 혹은 수동으로 DOM을 조작하는 작업 등을 의미합니다. 이러한 작업들은 컴포넌트의

Redux는 JavaScript 애플리케이션의 상태를 중앙 집중식으로 관리하기 위해 고안된 상태 관리 라이브러리입니다. 주로 React와 함께 사용되지만, 다른 JavaScript 프레임워크나 라이브러리에서도 사용할 수 있습니다. Redux는 애플리케이션의 상태를 예측

전역 상태 관리는 애플리케이션 전체에서 공유되는 상태(state)를 관리하는 방법을 말합니다. 이는 주로 대규모 애플리케이션에서 사용되며, 여러 컴포넌트나 모듈 간에 데이터를 일관성 있게 유지하기 위해 필요합니다. 전역 상태를 효율적으로 관리하면 데이터 흐름을 명확하게

useMemo 오늘은 React에서 성능 최적화를 위해 사용되는 useMemo 훅에 대해 학습했습니다. useMemo는 컴포넌트의 불필요한 재연산을 방지하여 성능을 최적화하는 데 매우 유용합니다. useMemo란 무엇인가? useMemo는 React 훅으로, 특정 계산

useCallback은 콜백 함수의 메모이제이션된 버전을 반환하는 훅으로, 종속성 중 하나라도 변경될 때만 함수가 변경됩니다. 이를 통해 동일한 인스턴스의 콜백이 사용되도록 보장하여 불필요한 리렌더링을 방지할 수 있습니다.callback: 메모이제이션하려는 함수.dep

Supabase는 Firebase의 오픈 소스 대안으로, 개발자가 애플리케이션을 빠르고 효율적으로 구축할 수 있도록 다양한 도구를 제공합니다. 여기에는 Postgres 데이터베이스, 인증, 실시간 구독, 스토리지 등이 포함됩니다. 이 TIL에서는 새로운 프로젝트에 Su

검색기능 구현하고 어케하는지 써야겠다..

아 검색 구현 다시 해야 된다 하루종일 검색 만들었는데 안되서 멘탈 바사삭..

Supabase 인증은 다양한 방법을 지원하는 강력하고 유연한 인증 서비스입니다. 이메일/비밀번호, 매직 링크, 소셜 로그인 등을 포함한 여러 인증 방법을 지원합니다. 주요 기능과 구현 방법을 자세히 살펴보겠습니다:1.이메일 및 비밀번호 인증:사용자는 이메일 주소와 비

비동기 프로그래밍은 코드의 실행이 중단되지 않고 다음 작업으로 넘어가면서 동시에 여러 작업을 처리할 수 있는 방식입니다. 이는 특히 I/O 작업(예: 파일 읽기/쓰기, 네트워크 요청 등)이 많을 때 유용합니다. JavaScript에서는 비동기 처리를 위해 콜백 함수,

JSON Server는 가볍고 사용하기 쉬운 도구로, 빠르게 가짜 REST API를 만들 수 있습니다. 프로토타이핑, 테스트 및 모의 개발에 특히 유용합니다. JSON Server를 사용하면 최소한의 노력과 시간으로 완전한 가짜 REST API를 로컬에서 실행할 수 있

Axios는 브라우저와 Node.js를 위한 HTTP 클라이언트입니다. 비동기 HTTP 요청을 쉽고 간편하게 처리할 수 있게 해주는 라이브러리입니다. 주로 REST API와 통신할 때 많이 사용됩니다.Promise 기반: Axios는 Promise 기반으로 비동기 처리

Zustand은 React 애플리케이션에서 상태 관리를 위한 현대적인 솔루션으로, Redux와 비교할 때 더 간단하고 직관적인 API를 제공합니다. 이 라이브러리는 Context API와 useReducer를 기반으로 하며, Immer와 함께 사용하여 불변성을 유지하면

Tailwind CSS는 매우 커스터마이즈 가능한(low-level) CSS 프레임워크로, 여러분이 원하는 디자인을 만들 수 있는 모든 빌딩 블록을 제공합니다. Bootstrap이나 Foundation 같은 전통적인 CSS 프레임워크와는 달리, Tailwind는 사전에

설명: Vite는 프론트엔드 개발을 위한 빠르고 현대적인 빌드 도구입니다. 빠른 개발 서버와 효율적인 HMR(Hot Module Replacement)을 제공하여 개발 속도를 크게 향상시킵니다.설치 방법:설명: Yarn은 빠르고 안전하며 안정적인 패키지 매니저입니다.

RANDOM() 함수 사용: PostgreSQL과 같은 다른 데이터베이스에서는 RANDOM() 함수를 사용할 수 있습니다. 예를 들어, 이 쿼리는 table_name 테이블에서 랜덤하게 하나의 레코드를 선택합니다.

오늘은 React 애플리케이션에서 YouTube API를 통합하는 방법에 대해 배웠습니다. 이는 YouTube의 동영상 콘텐츠가 필요한 많은 웹 애플리케이션에서 필수적인 기능입니다. 제가 배운 내용을 단계별로 정리해보겠습니다.YouTube 데이터 API 키: YouTu

오늘은 카카오맵 API에 대해 배워보았습니다. 카카오맵 API는 카카오에서 제공하는 지도 서비스로, 다양한 지도 기능과 정보를 웹 및 모바일 애플리케이션에 통합할 수 있는 강력한 도구입니다. 아래는 제가 배운 주요 내용들입니다.카카오맵 API는 카카오가 제공하는 지도

탠스택 쿼리(TanStack Query)는 React 애플리케이션에서 서버 상태를 관리하는 데 사용되는 강력한 데이터 패칭 라이브러리입니다. 이전에는 React Query로 알려져 있었으며, 서버에서 데이터를 가져오고 캐시하고 동기화하는 과정을 손쉽게 할 수 있도록 도

오늘은 자바스크립트와 타입스크립트에 대해 공부했습니다. 주요 내용을 정리하면 다음과 같습니다.자바스크립트는 유연하고 다재다능하지만 몇 가지 단점이 있습니다. 예를 들어, 동적 타입 언어이기 때문에 타입 관련 오류를 런타임에서야 발견할 수 있습니다. 또한, 코드가 복잡해

TypeScript는 JavaScript에 타입 시스템을 추가한 언어로, 코드의 안정성과 가독성을 높여줍니다. TypeScript의 주요 타입들에 대해 자세히 살펴보겠습니다.Booleantrue 또는 false 값을 가질 수 있습니다.Number정수와 부동 소수점을 포

타입스크립트와 리액트를 함께 사용하면, 코드의 가독성과 유지보수성이 향상됩니다. 오늘은 타입스크립트로 리액트 훅을 사용하는 방법에 대해 배워보았습니다.리액트와 타입스크립트를 함께 사용하려면 react, react-dom, typescript, @types/react,

빠른 개발 속도테일윈드 CSS는 유틸리티 클래스를 사용하여 스타일을 적용하므로, 별도의 CSS 파일을 작성할 필요 없이 바로 HTML에 스타일을 적용할 수 있습니다. 이를 통해 개발 속도가 크게 향상됩니다.일관된 디자인테일윈드는 미리 정의된 클래스들을 사용하기 때문에,

유틸리티 클래스: Tailwind CSS는 미리 정의된 클래스들을 제공하여, 직접 CSS를 작성하지 않아도 된다. 예를 들어, bg-blue-500 클래스를 사용하면 배경색을 파란색으로 설정할 수 있다.모바일 우선 접근 방식: Tailwind는 모바일 우선 설계가 가능

오늘은 Next.js에 대해 공부해보았습니다. Next.js는 React 애플리케이션을 위한 프레임워크로, 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 손쉽게 구현할 수 있도록 도와줍니다. 아래는 제가 오늘 배운 Next.js의 기초 내용들입니다.Next

Next.js 라우팅의 기본 개념Next.js는 파일 기반 라우팅 시스템을 사용합니다. 이는 pages 디렉토리 내의 파일 구조에 따라 라우트가 자동으로 생성되는 것을 의미합니다. 각 파일은 하나의 라우트를 나타내며, 파일 이름이 URL 경로가 됩니다.기본 페이지 라우

하루종일 포켓몬 개인 프로젝트 했다..

포켓몬 프로젝트 완성!

Route Handler는 클라이언트가 서버에 특정 URL을 통해 요청을 보낼 때, 해당 요청을 처리하는 함수나 메서드를 의미한다. 이는 보통 웹 프레임워크에서 라우팅(Routing) 시스템의 일부로 사용되며, URL 경로와 HTTP 메서드(GET, POST, PUT,

Toasify는 웹 애플리케이션 개발에서 흔히 사용되는 알림 메시지 라이브러리 중 하나입니다. 사용자에게 피드백을 제공하거나, 상태를 알리거나, 경고 메시지를 띄우는 등의 용도로 사용됩니다. Toasify를 사용하면 개발자가 간단하고 직관적인 방식으로 이런 알림 메시지

React StrictMode는 리액트 애플리케이션에서 잠재적인 문제를 감지하고 개발 과정에서 더 나은 코드 품질을 유지하기 위해 사용하는 도구입니다. 엄격 모드에서는 일부 잠재적 문제와 비효율적인 코드 패턴을 강조 표시하여 개발자가 이를 식별하고 수정할 수 있도록 돕

하루종일 프로젝트 간단한 수정 했다.

파이널 프로젝트 시작.

태영님 = 프로트엔드 , 스포츠 , 운동준영님 = 프로트엔드 , 스포츠 , 게임 , 주식 , 코인자영님 = 프로트엔드 , 요리 , 게임영은님 = 프로트엔드 , 운동 , 여행경원님 = 프로트엔드 , 게임 , 기타(음악) , 농구관리자 페이지 ( 권한 별로 차등지급 )음악

프론트엔드 개발에서 테스트는 안정적이고 신뢰할 수 있는 소프트웨어를 구축하는 데 중요한 역할을 합니다. 잘 설계된 테스트는 코드의 품질을 높이고, 유지보수를 용이하게 하며, 예기치 못한 버그를 사전에 발견하는 데 도움을 줍니다. 프론트엔드 개발에서 자주 사용되는 대표적

현대 웹 애플리케이션은 사용자 경험(UX)을 향상시키기 위해 다양한 기술과 패턴을 활용합니다. 그 중 하나가 바로 무한 스크롤(Infinite Scroll)입니다. 무한 스크롤은 사용자가 페이지를 아래로 스크롤할 때 자동으로 새로운 콘텐츠를 로드하여 페이지 전환 없이도

디지털 시대에 접어들면서 다양한 디바이스에서 웹 사이트에 접근하는 사용자가 늘어나고 있습니다. 데스크톱, 태블릿, 모바일 등 화면 크기와 해상도가 다양한 디바이스에서 일관된 사용자 경험(UX)을 제공하기 위해서는 반응형 웹(Responsive Web) 디자인이 필수적입

웹 개발에서 클라이언트와 서버 간의 데이터 통신은 필수적입니다. 이를 위해 REST API와 GraphQL이라는 두 가지 주요 아키텍처 스타일이 널리 사용됩니다. 이 글에서는 두 가지의 차이점, 장단점, 그리고 실제 사용 사례를 비교하여 어떤 상황에서 어떤 방식이 적합