본문 바로가기

분류 전체보기

(341)
React에서 미디어쿼리 @media 사용하기 반응형 웹을 만들기 위해 반드시 필요한 @media를 React에서 사용하기 위한 방법입니다. material-UI로 쉽게 사용할 수 있기 때문에 우선 material-ui를 install 하셔야 합니다. 그리고 미디어 쿼리를 적용할 컴포넌트에서 import 해줍니다. import useMediaQuery from '@material-ui/core/useMediaQuery'; 그리고 min-width 보다 스크린이 줄어든 여부를 나타내는 변수를 선언합니다. 아래 min-width: *px 부분에 미디어 쿼리로 적용할 기준 width 사이즈를 입력해줍니다. const matches = useMediaQuery('(min-width:1000px)'); 그리고 matches 변수를 이용하여 미디어 쿼리를 다음..
React 에서 ScrollTo 사용하기 스크린의 특정 위치로 자동 스크롤 되는 기능을 추가하는 방법입니다. 하나의 페이지에 많은 정보를 나열하고, 메뉴 버튼을 누르면 페이지의 특정 부분으로 스크롤 되어 여러 페이지가 있는 것처럼 사용하거나 React router로 페이지를 이동할 때 이동한 페이지의 최상단에서부터 랜더링되게 하기 위해 사용할 수 있는 방법입니다. function Example() { const scrollTo = (x,y) => { window.scrollTo(x,y); } return( Scroll to x=0, y=50 ); } 컴포넌트를 클릭하면 scrollTo 함수에 스크롤 하고자 하는 x축 좌표 값과 y 축 좌표값을 전달하면 됩니다. router 이동시 항상 최상단으로 이동하기 위해선 x,y 값을 따로 전달하지 않고,..
[프로그래머스 코딩테스트 연습] BFS/DFS 3. 단어변환 BFS/DFS 3. 단어변환 문제 설명 두 개의 단어 begin, target과 단어의 집합 words가 있습니다. 아래와 같은 규칙을 이용하여 begin에서 target으로 변환하는 가장 짧은 변환 과정을 찾으려고 합니다. 1. 한 번에 한 개의 알파벳만 바꿀 수 있습니다. 2. words에 있는 단어로만 변환할 수 있습니다. 예를 들어 begin이 hit, target가 cog, words가 [hot,dot,dog,lot,log,cog]라면 hit -> hot -> dot -> dog -> cog와 같이 4단계를 거쳐 변환할 수 있습니다. 두 개의 단어 begin, target과 단어의 집합 words가 매개변수로 주어질 때, 최소 몇 단계의 과정을 거쳐 begin을 target으로 변환할 수 있는지..
4 (2). 프로세스 스케줄링 : 스케줄링 기법 프로세스 스케줄링 기법 지난 글에서는 프로세스 스케줄링의 개념, 대표적인 성능 지표, 스케줄링 기준, 스케줄링 레벨에 대해 설명하였습니다. 지난 글에 이어 이번 글에서는 프로세스 스케줄링 기법에 대해 알아보겠습니다. 프로세스 스케줄링 기법 프로세스 스케줄링 기법의 필요성 프로세스들은 컴퓨터 하드웨어 자원을 이용하여 작업을 처리합니다. 컴퓨터 시스템에 하나의 프로세스만 존재한다면 하드웨어 자원은 계속 사용가능한 상태일테니 CPU를 사용하기 위해 대기하거나 입출력 장치에서 입출력 요청을 하고, 응답을 받은 뒤 다시 CPU를 사용할 때에도 기다릴 필요가 없을 것입니다. 하지만 컴퓨터 시스템에 하나의 프로세스만 있는 경우는 거의 없고, 대부분은 프로세스의 개수가 CPU 개수보다 많기 때문에 프로세스간 CPU 사..
BFS (Breath First Search) 너비우선탐색, DFS (Depth First Search) 깊이우선탐색 이번 글에서는 코딩테스트 출제 빈도가 아주 높은 알고리즘은 BFS 너비우선탐색과 DFS 깊이우선탐색 에 대해 소개하겠습니다. 이번 정리 역시 프로그래머스에서 코딩테스트 연습을 하다가 BFS/DFS 영역의 문제를 풀기전 개념을 다시 한 번 정확히 정리해보고자 정리한 글입니다. BFS와 DFS는 그래프 자료구조를 탐색할 때 사용되는 기법입니다. 두 기법 모두 그래프에 속한 모든 노드를 방문하는 것을 목적으로 하는데, 탐색 우선 순위를 어떤 것으로 두는 지에 따라 두 기법의 차이가 있습니다. 너비 우선 탐색 BFS (Breath First Search) BFS의 개념 BFS는 이름에서 알 수 있듯이, 너비 Breath를 우선으로 탐색하는 기법입니다. 그래프 탐색의 시작점 (루트 또는 특정 노드) 과 같은 거리..
4. 프로세스 스케줄링 Process Scheduling 이번 글에서는 프로세스 스케줄링에 대해 간단히 알아보겠습니다. 스케줄링은 멀티프로그래밍/멀티태스킹시스템에서 하는 것 멀티프로그래밍/멀티태스킹시스템 = 시스템안에 여러 개의 프로세스가 존재하여 메모리 cpu를 번갈아가며 사용하는 것. Cpu utilization을 높이는 것이 중요한 issue CPU/processor = time sharing (시분할 지원) Memory = space sharing (공간할 지원) = 프로세스 간 공간을 나눠서 메모리를 사용 Performance Measures Response Time : 요청을 보낸 뒤 그 요청에 대한 첫번째 response(응답)이 올때 까지의 시간을 의미합니다. 사용자가 컴퓨터의 어떤 아이콘을 눌러 작업 처리를 요..
3. 운영체제 공부를 위한 사전 지식 Backgrounds for OS 이번 글에서는 운영체제 공부를 위한 사전 지식에 대해 간단히 알아보겠습니다. 알아두면 운영체제 공부에 도움이 되는 개념들로 간단하게만 짚고 넘어간 후 정확한 이해가 필요한 개념은 추후 다시 다루도록 하겠습니다. 가벼운 마음으로 읽어주세요 :) Dual Mode Operation CPU는 두가지 모드에서 동작합니다. user mode : CPU가 사용자 어플리케이션을 실행하고 있을 때 kernel mode : 커널 안에 있는 프로그램을 실행하고 있을 떄 ( 이때 실행되는 기능들은 아주 중요하기 때문에 사용자 프로그램에서 접근 할 수 없음) Privileged Instruction 는 machine, instruction, set으로 구성된 컴퓨터 시스템 중 일부 명령을 가..
[KSC2020] 소켓 간 락 전달 비율에 따른 NUMA 기반 락 성능 분석 프로젝트 개요 KSC 2020 2020.09~2020.11 고성능 컴퓨팅 실험 및 논문 작성 KSC 2020 http://ksc2020.kiise.or.kr/wp/Home.asp 로그인 후 서비스 이용이 가능합니다. 로그인 발표자료에 대한 무단 복제를 금합니다. ksc2020.kiise.or.kr 소켓 간 락 전달 비율에 따른 NUMA 기반 락 성능 분석 최근 시스템의 확장성을 위해 많은 서버 환경에서 활용되는 NUMA(Non-Uniform Memory Access) 구조 는 CPU와 메모리의 상대적인 위치에 따라 서로 다른 접근 속도를 가진다. 따라서 멀티코어 시스템의 성 능에 큰 영향을 끼치는 Lock 기법은 NUMA 구조의 특징을 고려한 형태로 연구되어 왔다. 하지만, NUMA 기반 Lock은 Lo..