즐겁게, 코드

웹 어플리케이션 특성상 로드와 동시에 서버로부터 데이터를 불러와야 하는 경우가 자주 있습니다. 아마 대부분의 경우 useEffect 또는 useLayoutEffect 훅을 활용해 렌더링이 끝난 후 데이터를 불러올 텐데요, 한번 샘플 코드를 보겠습니다. const getGroupList = async () => { await axios .get(`${GROUP_ENDPOINT}?func=getAllGroup`) .then((res) => setGroupList(res.data)); }; useEffect(getGroupList, []); 컴포넌트 렌더링을 마친 후 useEffect 훅으로 getGroupList 함수를 호출해 그룹 리스트 상태값을 초기화해주고 있습니다. 그런데 이렇게 짜면 절대로 안됩니다!..

사용자는 주로 클릭이나 스크롤 등의 이벤트를 통해 웹과 상호작용하는데요, 특정 상황에서는 이런 이벤트를 비활성화해야할 때가 있습니다. 버튼의 경우에는 disabled 속성 등을 활용할 수 있지만, 일반적인 div 등의 태그에서는 어떻게 이벤트 실행을 방지할까요? 🖱 pointer-events 활용하기 물론 자바스크립트를 통해 이벤트 수행을 제어할 수도 있겠지만 훨씬 더 간단한 방법이 있습니다. 바로 CSS의 pointer-events라는 속성을 활용하는 것인데요, pointer-events 속성을 none 으로 지정하면 마우스 커서가 이벤트를 발생시킬 수 없게 됩니다. 당연히 리액트의 스타일 객체에서도 사용할 수 있으며, pointer-events 대신 pointerEvents 라는 속성명으로 사용하면 ..

[백준 온라인 저지 링크] 1051번: 숫자 정사각형 N*M크기의 직사각형이 있다. 각 칸은 한 자리 숫자가 적혀 있다. 이 직사각형에서 꼭짓점에 쓰여 있는 수가 모두 같은 가장 큰 정사각형을 찾는 프로그램을 작성하시오. 이때, 정사각형은 행 또는 www.acmicpc.net (0, 0)부터 시작해 2차원 배열의 각 인덱스를 순회하며 가능한 정사각형을 구한 뒤, 꼭지점의 값들이 모두 같은지 여부를 체크하면 됩니다. 구현 아이디어가 어려운 편은 아니지만, 정사각형의 인덱스가 원래 배열을 넘어서지 않게 하는데 애를 꽤나 먹었었네요. (결국 이 부분은 조건문을 별도로 두어 처리했습니다.) 또, 명시되지 않은 부분이지만 입력으로 1 * 1 배열이 주어지면 0이 아닌 1을 출력해야 합니다. [정답 코드 - Pyt..

[백준 온라인 저지 링크] 1895번: 필터 숫자 9개가 오름차순이나 내림차순으로 정렬되어 있을 때, 중앙값은 다섯 번째 숫자이다. 예를 들어, 1, 3, 4, 1, 2, 6, 8, 4, 10의 중앙값은 4이다. (1 ≤ 1 ≤ 2 ≤ 3 ≤ 4 ≤ 4 ≤ 6 ≤ 8 ≤ 10) 이미지 I는 www.acmicpc.net 2차원 배열을 순회하며 3 * 3 크기의 부분배열을 구한 뒤, 해당 부분배열의 중간값들로 이루어진 배열을 생성합니다. 그리고 중간값들의 배열을 순회하면서 T보다 크거나 같은 값의 개수만 세주면 됩니다! [정답 코드 - Python] R, C = map(int, input().split()) image = [] filtered = [] cnt = 0 def findMid(R, C): glob..

1. MySQL의 구조 MySQL의 구조는 크게 테이블, 데이터베이스(스키마), 데이터베이스 서버로 구분됩니다. 테이블은 흔히 생각하는 관계형 데이터베이스로, MySQL의 가장 작은 데이터베이스 단위입니다. (Ex. 학교 정보 데이터베이스 예시 : 2학년 1반의 데이터베이스) 또 이런 테이블들을 한데 모은 것을 데이터베이스(또는 스키마) 라고 부릅니다. (Ex. 학교 정보 데이터베이스 예시 : 2학년 전체의 데이터베이스) 그리고 가장 큰 개념인 여러 데이터베이스를 하나로 묶은 것을 데이터베이스 서버 라고 부릅니다. (Ex. 학교 정보 데이터베이스 예시 : 수곡초등학교 학생들의 데이터베이스) MySQL에서는 테이블과 데이터베이스에 접근하는 명령어가 모두 다르기 때문에, 테이블 ⊂ 데이터베이스 ⊂ 데이터베이..

안녕하세요, 오늘은 웹 개발 공부를 위한 유튜브 채널을 몇 군데 추천해보려 합니다! 제가 직접 영상을 하나 이상 시청한 채널만 추천하는지라 다른 좋은 유튜버분들이 포함되지 않았을 수도 있지만, 여기 계신 분들도 굉장히 좋은 리소스를 많이 제공해주니 한번 둘러보시길 추천드립니다! (+ 이밖에도 좋은 채널이 있다면 추천 부탁드리겠습니다 😆) 1. Traversy Media Traversy Media Traversy Media features the best online web development and programming tutorials for all of the latest web technologies including Node.js, Angular 2, React.js, PHP, Rails, HT..

이 글은 한국기술대학교 컴퓨터공학부의 OS 공개강의를 시청한 후 정리한 내용입니다. 목차 스케줄링 스케줄링의 목적 스케줄링 기준 및 단계 스케줄링 정책 1. 스케줄링 다중 프로그래밍에서는 시스템에 여러 프로세스가 존재하게 됩니다. 따라서 여러 프로세스를 효율적으로 관리하기 위해서는 자원을 현명하게 배분해야겠죠? 오늘 다룰 스케줄링이 바로 자원을 효율적으로 배분하기 위한 방법을 의미합니다. 스케줄링(자원 관리)의 종류 시간 분할 관리 하나의 자원을 여러 스레드들이 번갈아가며 사용 Ex. 프로세스 & 프로세스 스케줄링 공간 분할 관리 하나의 자원을 분할하여 동시에 사용 Ex. 메모리 & 메모리 스케줄링 2. 스케줄링의 목적 당연히 스케줄링의 목적은 시스템의 성능을 향상시키는 것입니다. 시스템의 성능을 판별하..