개발👩💻 (72) 썸네일형 리스트형 next: link # anchor 사용하기 next link로 # 해시 앵커를 사용하니 제대로 작동하지 않았다. 내비에서 해당 #아이템을 클릭하거나 스크롤이되어 #아이템에 해당하는 곳이 observer된다면 url또한 자동으로 업데이트 되도록하고 뒤로가기를 누른다면 replace로 #관련 주소는 히스토리로 담지 않고 바로 전페이지로 이동하게 하는 것이 목표였다. 우선 next link 에서 #해시 앵커를 사용하기 위해서 if (location.hash) location = location; 위와 같이 해주면 된다. 활성화된 내비 아이템과 내비가 가리키는 컴포넌트를 state로 관리하고 클릭할 때나 페이지 #이 포함된 url로 처음 들어올 때만 해당 앵커가 가리키고 있는 곳으로 스크롤해야 하기 때문에 useEffect(() => { // 처음 들어.. react: intersection observer 사용기 프로젝트에서 내비게이션바를 만들기 위해서 해당 컴포넌트에 위치하면 내비가 바뀌는 부분을 해야했다. 컴포넌트는 가변적이며, 버튼으로 줄였다 늘렸다할 수 있는 공통 컴포넌트를 사용하면 컴포넌트 7가지가 있고 그 컴포넌트들에 따라서 observer가 뷰포트에 위치하는 컴포넌트를 찾아 내비게이션 애니메이션 효과를 주면 되었다. 우선 내비게이션을 클릭하면 해당 컴포넌트로 이동하는 부분은 href #로 해결했다. 7개의 컴포넌트가 사용하는 공통 컴포넌트에서 // Nav.tsx ... ... // CommonContainer.tsx ... ... 이렇게 처리해주었다. 하지만 헤더가 있었기에 해당 헤더만큼 숨겨진 마진값을 주어야 했다. 이부분은 // CommonContainer.tsx const CommonWrappe.. 프로그래머스 JS: 스택/큐 프린터 문제 설명 일반적인 프린터는 인쇄 요청이 들어온 순서대로 인쇄합니다. 그렇기 때문에 중요한 문서가 나중에 인쇄될 수 있습니다. 이런 문제를 보완하기 위해 중요도가 높은 문서를 먼저 인쇄하는 프린터를 개발했습니다. 이 새롭게 개발한 프린터는 아래와 같은 방식으로 인쇄 작업을 수행합니다. 1. 인쇄 대기목록의 가장 앞에 있는 문서(J)를 대기목록에서 꺼냅니다. 2. 나머지 인쇄 대기목록에서 J보다 중요도가 높은 문서가 한 개라도 존재하면 J를 대기목록의 가장 마지막에 넣습니다. 3. 그렇지 않으면 J를 인쇄합니다. 예를 들어, 4개의 문서(A, B, C, D)가 순서대로 인쇄 대기목록에 있고 중요도가 2 1 3 2 라면 C D A B 순으로 인쇄하게 됩니다. 내가 인쇄를 요청한 문서가 몇 번째로 인쇄되는지 .. 프로그래머스 JS: 스택/큐 기능개발 문제 설명 프로그래머스 팀에서는 기능 개선 작업을 수행 중입니다. 각 기능은 진도가 100%일 때 서비스에 반영할 수 있습니다. 또, 각 기능의 개발속도는 모두 다르기 때문에 뒤에 있는 기능이 앞에 있는 기능보다 먼저 개발될 수 있고, 이때 뒤에 있는 기능은 앞에 있는 기능이 배포될 때 함께 배포됩니다. 먼저 배포되어야 하는 순서대로 작업의 진도가 적힌 정수 배열 progresses와 각 작업의 개발 속도가 적힌 정수 배열 speeds가 주어질 때 각 배포마다 몇 개의 기능이 배포되는지를 return 하도록 solution 함수를 완성하세요. 제한 사항 작업의 개수(progresses, speeds배열의 길이)는 100개 이하입니다. 작업 진도는 100 미만의 자연수입니다. 작업 속도는 100 이하의 자.. 웹팩이란? 웹팩은 모듈 번들러이며, 자바스크립트 파일들을 모듈로 관리하는데서 출발한다. 자바스크립트 파일들이 많아지면 하나로 관리하는 것이 힘들어지고, 이것들을 브라우저에 로딩하는 것 또한 많은 네트워크 비용이 발생하게 된다. 그래서 이러한 파일들을 모듈화하여 즉시함수호출 스타일로 변경해주고, 하나의 파일로 묶어(bundled) 네트워크 비용을 최소화 할 수 있는 방법이 필요하고 이것이 웹팩의 기능이다. 웹팩의 config 파일 예시를 보자 webpack.config.js const path = require('path') const webpack = require('webpack') const ExtractTextPlugin = require('extract-text-webpack-plugin') module.e.. 백준 js 11653: 소인수분해 문제 정수 N이 주어졌을 때, 소인수분해하는 프로그램을 작성하시오. 입력 첫째 줄에 정수 N (1 ≤ N ≤ 10,000,000)이 주어진다. 출력 N의 소인수분해 결과를 한 줄에 하나씩 오름차순으로 출력한다. N이 1인 경우 아무것도 출력하지 않는다. 예제 입력 1 72 예제 출력 1 2 2 2 3 3 풀이 작은수부터 오름차순으로 루프문을 돌며 루프문에 해당하는 현재값으로 나누어 떨어질 때까지 나눈다. 전체코드 백준 js 17103: 골드바흐의 파티션 문제 골드바흐의 추측: 2보다 큰 짝수는 두 소수의 합으로 나타낼 수 있다. 짝수 N을 두 소수의 합으로 나타내는 표현을 골드바흐 파티션이라고 한다. 짝수 N이 주어졌을 때, 골드바흐 파티션의 개수를 구해보자. 두 소수의 순서만 다른 것은 같은 파티션이다. 입력 첫째 줄에 테스트 케이스의 개수 T (1 ≤ T ≤ 100)가 주어진다. 각 테스트 케이스는 한 줄로 이루어져 있고, 정수 N은 짝수이고, 2 < N ≤ 1,000,000을 만족한다. 출력 각각의 테스트 케이스마다 골드바흐 파티션의 수를 출력한다. 예제 입력 1 5 6 8 10 12 100 예제 출력 1 1 1 2 1 6 풀이 입력 예제 중 가장 큰 수를 받아서 그 수까지의 수열을 담는 배열을 만든다. let maxnum = Math.max(.... 프로세스 다루기 1(11-1) uid 라는 것이 real uid, effective uid 로 나뉘어진다. real uid는 로그인할 때 정해진다. 사용자가 로그인해 프로세스를 생성하면 프로세스 real uid는 그 사용자가 된다. 그리고 이 사용자는 super user일 경우에만 변경이 가능하다. root 일 경우를 제외한 다른 유저일 경우 프로세스의 real uid를 변경 할 수 없다. effective uid는 파일의 접근 권한 따질때 사용한다. 접근 권한을 그냥 주는 것이 아니라 3개의 그룹으로 나눠 준다. 파일의 onwer, group, other 각각의 사용자 그룹이다. 파일의 onwer가 있다면, 그 사용자에게 접근권한이 주어진다. 프로세스의 real uid, effective uid 두개 유저 id 가 있는데, ㄱeal.. 이전 1 2 3 4 5 6 ··· 9 다음