👨🏻‍💻DriedPollack's Blog

개발자 모드에서 기능 실행 시 콘솔창에 오류가 출력되는 문제는 시크릿모드에서 발생하지 않았으며, Chrome 확장 프로그램 간의 통신 문제로 확인되었다. Google Chrome용 Adobe Acrobat 확장 프로그램을 삭제하면 문제가 해결되었다.

"d-flex"는 `<div>` 태그 내부의 요소들을 인라인으로 배치시키는 기능을 가지고 있다. `<a>` 태그로 다른 태그를 감싸게 되면 인라인 판정이 감싼 태그 전체로 적용되지만, 이를 막기 위해 `<a>` 태그를 `<div>` 내부에 위치시켜 원하는 레이아웃을 설정할 수 있다.

영소문자로 이루어진 문자열 'my_string'에서 'alp'에 해당하는 모든 글자를 대문자로 바꾼 문자열을 반환하는 문제를 풀었습니다. 처음 작성한 코드는 반복문을 사용하여 문자열을 순회하고 대문자로 변경하는 방식이었지만, 수정한 코드에서는 replaceAll() 함수를 사용하여 더 간결하게 문제를 해결했습니다.

문자열과 이차원 정수 배열을 이용하여 주어진 명령을 순서대로 처리한 후의 문자열을 반환하는 문제입니다. 처음에는 문자열을 직접 변경하려고 했으나, 문자열은 immutable type이므로 변경이 불가능합니다. 따라서 문자열을 배열로 변환하여 처리한 후 다시 문자열로 변환하는 방식으로 문제를 해결할 수 있습니다.

정수 배열 arr와 2차원 정수 배열 queries가 주어지고, queries에 따라 arr를 처리한 후의 결과를 반환하는 solution 함수를 작성해야 합니다. 각 query는 [s, e, k] 형태이며, s ≤ i ≤ e인 모든 i에 대해 i가 k의 배수이면 arr[i]에 1을 더합니다. 문제를 풀면서 문제 이해에 어려움을 겪었지만, 기존 수열과 구간 쿼리 문제와 유사한 방식으로 if문을 사용하여 해결할 수 있습니다.

정수 l과 r 사이에서 0과 5로만 이루어진 정수를 오름차순으로 저장한 배열을 반환하는 문제입니다. 주어진 조건에 따라 반복문과 조건문을 사용하여 문제를 해결할 수 있습니다.

정수 배열 arr와 2차원 정수 배열 queries가 주어지고, 각 query마다 조건을 만족하는 가장 작은 값을 찾아 결과를 반환하는 문제입니다. 주어진 코드는 queries를 반복하면서 arr에서 조건을 만족하는 값을 찾고, 결과를 answer에 저장하는 방식으로 구현되어 있습니다. 또 다른 코드는 for..of 반복문과 filter(), sort() 함수를 사용하여 문제를 해결하는 방식입니다.

정수 number가 n의 배수이면서 m의 배수인지 확인하는 알고리즘 문제입니다. 주어진 기존 코드를 개선하여 number가 n과 m의 배수인지 확인하는 코드를 작성하였습니다.

리액트를 활용한 미니 블로그 프로젝트입니다. 프로젝트는 list, page, ui 컴포넌트로 구성되며, 주요 기능은 글 목록 보기, 글 보기, 댓글 보기, 글 작성, 댓글 작성입니다. 프로젝트에서는 styled-components를 사용하여 컴포넌트를 스타일링하고, 데이터를 활용하여 동적으로 컴포넌트를 생성합니다.

문자열 my_string을 k번 반복한 문자열을 반환하는 solution 함수를 작성하는 문제입니다. 이중 for문을 사용한 코드를 repeat() 함수를 이용하여 최적화할 수 있었습니다.

이 포스트에서는 리액트 컴포넌트 트리 내에서 데이터를 공유하기 위해 컨텍스트를 활용하는 방법을 학습했습니다. 컨텍스트를 이용하면 중간에 있는 엘리먼트들에게 props를 넘겨주지 않고도 데이터를 제공할 수 있어 코드 최적화에 도움이 됩니다.

이 포스트는 리액트의 합성과 상속에 대해서 다룹니다. 핵심 키워드로는 합성과 특수화가 있으며, 특수화는 더 구체적인 컴포넌트를 생성하고 props를 통해 내용을 설정하는 것을 의미합니다.

이 포스트는 각각의 컴포넌트를 이용해 사용자의 입력을 받는 다양한 방법을 다루고 있으며, 이를 통해 실시간으로 값 변경, 데이터 렌더링, 다중 입력 다루기 등을 소개합니다.

이 포스트에서는 컴포넌트를 효율적으로 사용하고, 공유 상태를 통해 부모 컴포넌트의 상태를 자식 컴포넌트에서 공유할 수 있으며, 소수점 자릿수를 반올림하는 방법을 정리했습니다.

리액트 컴포넌트를 다루는 프로젝트를 통해 학생들의 출석부를 출력하는 방법과 키의 중요성에 대해 알아보았습니다.

이 포스트는 조건부 렌더링과 useState 훅을 활용하여 로그인 여부에 따라 툴바와 텍스트를 렌더링하는 방법을 소개합니다.

주어진 두 분수를 더한 후 기약 분수로 나타내기 위해 분자와 분모를 계산하는 문제입니다. 분자와 분모의 최대 공약수를 구하는 방법과 재귀함수를 활용하는 방법을 익힐 수 있었습니다.

주어진 정수 배열에서 가장 자주 나오는 값을 찾아 최빈값을 반환하는 solution 함수를 작성하는 문제입니다. 배열의 최댓값을 기준으로 새로운 배열을 생성하고, 해당 값에 해당하는 인덱스의 값을 1씩 증가시킵니다. 그 후, 새로운 배열에서 가장 큰 값을 가진 인덱스를 반환하며, 중복된 값이 있다면 -1을 반환합니다.

문자열 my_string의 인덱스 s부터 overwrite_string의 길이만큼을 overwrite_string으로 바꾼 결과를 반환하는 solution 함수를 작성하는 문제입니다. 주어진 예시를 참고하여 문제를 해결할 수 있습니다.

주어진 시간 동안 세균이 2배씩 증식한다고 할 때, 초기 세균 수와 경과 시간에 따른 세균 수를 계산하는 문제입니다. 간단한 반복문을 사용하여 주어진 시간만큼 세균 수를 2배씩 증가시킨 후 결과를 반환합니다.

문자열 str1에 문자열 str2가 포함되어 있다면 1을, 그렇지 않다면 2를 반환하는 solution 함수를 작성해야 합니다. includes() 함수와 삼항연산자를 사용하여 문제를 해결할 수 있습니다.

10만 원 이상 사면 5%, 30만 원 이상 사면 10%, 50만 원 이상 사면 20% 할인이 적용됩니다. 주어진 가격에 할인율을 적용하여 지불해야 할 금액을 반환하는 solution 함수를 작성해야 합니다. 기존 작성된 코드에서는 10만 원 이하의 경우에 대한 처리가 없어서 오류가 발생했고, 이를 수정한 코드가 제시되었습니다.

정수 n의 각 자리 숫자의 합을 구하는 문제입니다. 주어진 정수를 문자열로 변환한 뒤 각 자리 숫자를 더하여 결과를 반환하는 solution 함수를 작성해야 합니다.

문자열 배열 s1과 s2의 같은 원소의 개수를 확인하는 문제입니다. 주어진 배열을 순차적으로 비교하여 같은 원소가 있을 경우 개수를 반환하는 문제로, filter() 함수와 includes() 함수를 사용하여 해결할 수 있습니다.

주어진 좌표가 사분면 중 어디에 속하는지를 판별하는 문제입니다. x 좌표와 y 좌표의 부호에 따라 1부터 4까지의 숫자를 반환합니다.

주어진 정수 배열에서 두 수의 곱으로 만들 수 있는 최댓값을 반환하는 solution 함수를 작성하는 문제입니다. 주어진 예시에 따라 배열을 정렬하고 첫 번째와 두 번째 원소를 곱하여 결과를 반환합니다.

주어진 정수 배열을 오름차순으로 정렬한 후 중앙값을 반환하는 문제입니다. sort() 함수를 사용하여 배열을 정렬하고, 배열의 길이가 홀수인 경우 중앙값을 구합니다.

문자열 my_string에서 문자 letter를 제거한 결과를 반환하는 solution 함수를 작성하는 문제입니다. 주어진 문자열에서 주어진 문자와 동일한 문자는 건너뛰고, 나머지 문자들을 배열에 추가한 후 join() 함수를 사용하여 문자열로 반환합니다.

정수 배열에서 특정 정수의 개수를 구하는 문제입니다. 주어진 solution 함수는 배열에서 n과 일치하는 요소를 필터링하고 그 개수를 반환합니다. filter() 함수를 사용하여 문제를 해결할 수 있습니다.

주어진 문자열 배열의 각 원소의 길이를 담은 배열을 반환하는 문제입니다. 주어진 배열을 for문으로 순회하며 각 원소의 길이를 push 함수를 통해 반환할 배열에 추가하거나, map 함수를 사용하여 새로운 배열을 생성할 수 있습니다.

React에서 이벤트를 다루는 방법과 바인딩하는 방법에 대해 학습할 수 있는 실습문제입니다. 핸들링 함수 선언 방법, 익명함수 처리 방법, camelCase 이벤트 이름 사용 등을 다루고 있습니다.

이 문서는 리액트와 관련된 여러 실습 예제들을 다루고 있습니다. 주요 내용으로는 useRef를 이용한 DOM 요소 포커스, useEffect를 이용한 사이드 이펙트 처리, 커스텀 훅을 이용한 컴포넌트 개발 등이 있습니다.

리액트 컴포넌트에서 state와 생명주기를 이용하여 알림 기능을 구현했습니다. NotificationList 컴포넌트에서는 state를 사용하여 알림 데이터를 관리하고, componentDidMount와 componentWillUnmount 함수를 이용하여 알림을 주기적으로 업데이트하고 제거합니다. 이를 통해 알림을 동적으로 표시하고 관리할 수 있습니다.

Comment.jsx와 CommentList.jsx는 리액트를 사용하여 댓글 컴포넌트를 만드는 실습 예제입니다. 컴포넌트와 props에 대한 기본적인 이해를 실습을 통해 파악할 수 있습니다.

이 포스트는 리액트를 사용하여 시계 컴포넌트를 만드는 실습 예제와 관련된 내용을 다루고 있습니다. setInterval() 함수를 사용하여 매 초마다 clock 컴포넌트를 root 노드에 렌더링하고, 렌더링이란 컴포넌트가 현재 상태에 기반하여 UI를 구성하는 작업을 의미합니다. React는 Virtual DOM을 사용하여 필요한 부분만 실제 DOM에 반영하여 불필요한 수정을 방지합니다.

이 포스트는 리액트를 다루는 실습 문제로, Btn.jsx, ConfirmDialog.jsx, Book.jsx, Library.jsx, index.jsx 등의 코드 예시가 포함되어 있습니다. 핵심 키워드로는 React의 module 기능, props의 자료형 선언, 문자열 입력 방법, React.StrictMode 태그 등이 있습니다.

각도에 따라 예각, 직각, 둔각, 평각을 구분하여 반환하는 문제입니다. 주어진 angle에 따라 조건문을 사용하여 결과를 반환하는 JavaScript 코드가 제공됩니다.

이 포스트는 "Vallery Festival"을 홍보하기 위한 웹사이트의 메인 페이지 제작 실습 내용을 담고 있습니다. HTML, CSS, JavaScript를 사용하여 로고, 사이드바, 이미지 슬라이드, 공지사항, 갤러리, 바로가기, 푸터 등의 요소를 구현하였습니다.

이 포스트는 "Dream Jeju" 여행사 웹사이트의 메인 페이지 제작 실습을 다루고 있습니다. HTML, CSS, JavaScript를 사용하여 로고, 네비게이션, 이미지 슬라이드 쇼, 탭 메뉴, 퀵 링크, 푸터 등을 구현하는 방법을 설명하고 있습니다.

이 포스트는 JUST 쇼핑몰 웹사이트의 메인페이지 제작 실습을 다루고 있습니다. index.html 파일은 JUST 쇼핑몰의 메인 페이지를 구성하는 HTML 코드를 포함하고 있으며, style.css 파일은 해당 페이지의 스타일을 정의하고 있습니다. script.js 파일은 이미지 슬라이드, 모달 팝업 등과 같은 자바스크립트 기능을 구현하고 있습니다.

Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - 17장 연습문제 2개

Do it! HTML+CSS+자바스크립트 웹 표준의 정석

Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - 16장 연습문제 2개

Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - 11장 연습문제 2개

Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - 10장 연습문제 2개

Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - 9장 연습문제 3개

Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - 8장 연습문제 3개

Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - 7장 연습문제 4개