일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- Vite
- tailwindcss
- react-dom
- 호이스팅
- commitlint
- Biweekly Contest 79
- medinum
- React Private Routes
- .env
- React Router dom v6
- 모던 자바스크립트 Deep Dive
- 프로그래머스
- LV. 2
- React
- 컴포넌트 최적화
- sql
- next.js
- Sanity.io
- next-auth
- Weekly Contest
- React.memo
- leetcode
- eslintrc
- React Public Routes
- 모던 자바스크립티 Deep Dive
- Medium
- BFS
- javascript
- engines locking
- toast-ui-editor
- Today
- Total
목록전체 글 (55)
뚜벅
2091. Removing Minimum and Maximum From Array Medium You are given a 0-indexed array of distinct integers nums. There is an element in nums that has the lowest value and an element that has the highest value. We call them the minimum and maximum respectively. Your goal is to remove both these elements from the array. A deletion is defined as either removing an element from the front of the array..
Next.js + Tailwindcss 환경에서 sanity init 후 sanity studio를 실행했을 때 발생한 에러입니다. 에러 해결 방법은 sanity 실행 폴더에 tailwind.config.js가 있으면 됩니다. 1. 생성한 sanity 폴더 안에 tailwind.config.js 파일을 추가한다. /** @type {import('tailwindcss').Config} */ module.exports = { content: [ './pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}', './app/**/*.{js,ts,jsx,tsx}', ], theme: { extend: {}, }, plugins: [], } Sanity...
이번에 frontend mento 사이트에서 간단한 타이머를 만들어 봤습니다. 사용한 기술 스택 typescript react tailwind css headlessui react-countdown-circle-timer 구현 사항 1. 반응형 (모바일, 태블릿, pc) 2. 타이머 3. 환경 설정 모달 4. 시간, 폰트, 색깔 설정 1. 반응형 구현 tailwind css를 사용하면 반응형 디자인을 쉽게 구현할 수 있기 때문에 tailwind css를 사용했습니다. 필요한 색깔, 폰트, 사이즈 등을 tailwind.config에 세팅해 줍니다. 2. 타이머 구현 타이머 구현은 react-countdown-circle-timer 라이브러리를 사용해서 구현하였습니다. 3. 환경 설정 모달 및 홈 화면 탭바..
콜백 함수 콜백 함수는 ES6이전에 비동기 처를 위해 사용하던 하나의 패턴이지만, 다음과 같은 단점들이 있어 ES6에서 프로미스 패턴이 도입된다. 1. 콜백 헬로 인해 가독성이 나쁘다. 비동기 처리 결과를 가지고 또다시 비동기 함수를 호출하여 콜백 함수 호출이 중첩되어 복잡도가 높아지는 현상 let g = 0 setTimeout(() => {g = 100;},0) console.log(g) // 0 위의 코드에서 처럼 비동기 처리 결과를 변수에 할당하려고 하면 기대한 대로 동작하지 않는다. setTimeout은 실행후 브라우저에서 타이머가 만료되면 콜백 함수를 태스크 큐로 이동한다, 그리고 콜 스택이 비어 있으면, 이때 태스크 큐에서 콜스택으로 이동하고 콜백함수가 실행된다. 그렇기 때문에 g = 100 ..
REST REST란 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍쳐이다. - REST의 기본원칙을 성실히 치킨 서비스 디자인을 RESTful이라고 표현한다. - REST API는 REST를 기반으로 서비스 API를 구현한 것을 의미한다. REST API 구성 - 자원 : URL - 행위 : HTTP 요청 메서드 - 표현 : 페이로드 REST API 설계 원칙 1. URL는 리소스를 표현해야 한다. 리소스를 식별할 수 있는 이름은 동사보다는 명사를 사용한다. # bad GET /getTodos/1 # good GET /Todos/1 2. 리소스에 대한 행위는 HTTP 요청 메서드로 표현한다. 요청 메서드는 크게 5가지가 있다. (GET, POST, PUT, PATCH, DE..
Ajax란? Ajax란 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 말합니다. Ajax가 나오기 이전의 웹페이지는 html 태그로 시작해서 html 태그로 끝나는 완전한 HTML을 서버로부터 전송받아 웹페이지 전체를 처음부터 다시 렌더링 하는 방식으로 동작했습니다. 그렇기 떄문에 다음과 같은 문제점들이 있었습니다. 1. 변경할 필요가 없는 부분까지 포함된 완전한 HTML을 서버로부터 매번 다시 전송받기 때문에 불필요한 데이터 통신이 발생한다. 2. 매번 새로운 HTML을 전송 받기 때문에 깜빡이는 현상이 발생한다. 3. 클라이언트와 서버와의 통신이 동기 방식으로 동작하기 때문에 서버로 부터 응..