📌 문제 정수를 저장하는 덱(Deque)를 구현한 다음, 입력으로 주어지는 명령을 처리하는 프로그램을 작성하시오. 명령은 총 여덟 가지이다. push_front X: 정수 X를 덱의 앞에 넣는다. push_back X: 정수 X를 덱의 뒤에 넣는다. pop_front: 덱의 가장 앞에 있는 수를 빼고, 그 수를 출력한다. 만약, 덱에 들어있는 정수가 없는 경우에는 -1을 출력한다. pop_back: 덱의 가장 뒤에 있는 수를 빼고, 그 수를 출력한다. 만약, 덱에 들어있는 정수가 없는 경우에는 -1을 출력한다. size: 덱에 들어있는 정수의 개수를 출력한다. empty: 덱이 비어있으면 1을, 아니면 0을 출력한다. front: 덱의 가장 앞에 있는 정수를 출력한다. 만약 덱에 들어있는 정수가 없는 경..
라우팅을 쓰는 이유 리액트로 일기 어플리케이션을 만들면 [메인] [일기 쓰기] [일기 보기] [수정하기] 와 같이 여러 페이지가 필요할 것이다. MPA인 바닐라 JS라면 여러 개의 html 파일을 만들어 이동을 시킬 수 있겠지만, 리액트는 하나의 html 파일만을 유저에게 보여주는 SPA다. 즉 보여줄 페이지가 1개 밖에 없는데 어떻게 각각의 기능을 하는 여러 페이지를 어떻게 보여줄까? 바로 라우팅 시스템을 사용하여 구현한다. 라우팅 시스템을 이용하면 여러 페이지로 구성된 웹 어플리케이션을 만들 때, 하나의 파일이지만 페이지별로 컴포넌트를 분리해 보여줄 수가 있다. 이러한 기능을 하는 게 2가지가 있는데, 바로 지금 글을 쓰는 리액트 라우터와 다음에 배울 Nextj.js라는 리액트의 프레임워크다...
📌 문제 올림픽은 참가에 의의가 있기에 공식적으로는 국가간 순위를 정하지 않는다. 그러나, 많은 사람들이 자신의 국가가 얼마나 잘 하는지에 관심이 많기 때문에 비공식적으로는 국가간 순위를 정하고 있다. 두 나라가 각각 얻은 금, 은, 동메달 수가 주어지면, 보통 다음 규칙을 따라 어느 나라가 더 잘했는지 결정한다. 금메달 수가 더 많은 나라 금메달 수가 같으면, 은메달 수가 더 많은 나라 금, 은메달 수가 모두 같으면, 동메달 수가 더 많은 나라 각 국가는 1부터 N 사이의 정수로 표현된다. 한 국가의 등수는 (자신보다 더 잘한 나라 수) + 1로 정의된다. 만약 두 나라가 금, 은, 동메달 수가 모두 같다면 두 나라의 등수는 같다. 예를 들어, 1번 국가가 금메달 1개, 은메달 1개를 얻었고, 2번 국..
📌 문제 인하대학교 컴퓨터공학과를 졸업하기 위해서는, 전공평점이 3.3 이상이거나 졸업고사를 통과해야 한다. 그런데 아뿔싸, 치훈이는 깜빡하고 졸업고사를 응시하지 않았다는 사실을 깨달았다! 치훈이의 전공평점을 계산해주는 프로그램을 작성해보자. 전공평점은 전공과목별 (학점 × 과목평점)의 합을 학점의 총합으로 나눈 값이다. 인하대학교 컴퓨터공학과의 등급에 따른 과목평점은 다음 표와 같다. A+ 4.5 A0 4.0 B+ 3.5 B0 3.0 C+ 2.5 C0 2.0 D+ 1.5 D0 1.0 F 0.0 P/F 과목의 경우 등급이 P또는 F로 표시되는데, 등급이 P인 과목은 계산에서 제외해야 한다. 과연 치훈이는 무사히 졸업할 수 있을까? 📌 입력 20줄에 걸쳐 치훈이가 수강한 전공과목의 과목명, 학점, 등급이 ..
Props Drilling 해당 컴포넌트에 필요한 것은 아니지만 데이터를 내려주기 위해서 onRemove()나 onEdit() 같이 DiaryList 컴포넌트를 거쳐가는 props들이 있다. 이러한 props들이 많으면 이름이나 코드를 수정할 때 모든 걸 일일이 들어가서 수정해줘야 하는 어려움이 있고, 그렇기 때문에 코드가 복잡해질 경우 유지보수를 하기 어렵다는 단점이 있다. 이처럼 props가 땅 파고 계속 들어가는 것처럼 내려가는 모양이라 위 현상을 Props Drilling이라고 한다. 이를 방지하기 위해서 context를 사용한다. Context – React A JavaScript library for building user interfaces ko.legacy.reactjs.org 부모 컴포..
useReducer 일기장 어플리케이션을 만들면서 부모 컴포넌트인 App 컴포넌트에 거의 모든 상태 변화 처리 함수가 몰려 있다. 거의 모든 함수나 값들이 const [data, setData] = useState([])를 가지고 state를 변화하는 로직들이기 때문이다. 아무래도 코드들이 길어지보니 업데이트 로직을 이해하거나 상태 값을 추적하기가 쉽지 않다. 이럴 때 useReducer로 상태 관리 로직을 보다 간결하고 구조적으로 정리할 수 있다. 원래 useState를 사용하면 이렇게 코드를 짜야 한다. 이게 useReducer를 만나면 이렇게 바뀐다. 크게 달라진 점은 useState 대신 useReducer가 생겼고, 이 안에는 reducer라는 함수와 초기값이 들어 있다. useState처럼..
React.memo 일기를 만들 때 사용한 부모 컴포넌트 App이 자식 컴포넌트 2개에 각각의 prop을 주고 있다. 이 때 자식 컴포넌트에서 해당 prop을 받아 부모 컴포넌트의 state를 변경 시켰다. 그러면 부모 컴포넌트는 state가 수정되어 다시 렌더링을 하게 된다. 하지만 이 때 변화가 일어나지 않은 TextView 컴포넌트까지 통째로 리렌더링 되는 문제가 생긴다. (useMemo도 그렇지만 이렇게 최적화를 하지 않으면 지금은 크게 와닿지 않지만, 실제로 프로젝트를 하거나 더 큰 규모, 더 복잡한 파일들을 다루게 될 경우에는 개발한 웹 어플리케이션의 속도나 품질이 떨어질 수 있어서 작은 프로젝트여도 한 번 만들어보고 최적화 하는 습관을 들여야한다.) 아무튼 위와 같이 가만히 있는 자식 컴포넌..
useMemo 이미 계산한 연산 결과를 기억해뒀다가 동일한 계산을 시킬 때, 기억해둔 데이터를 반환하는 방법 이렇게 기억해두는 것을 memoization이라고 한다. useMemo는 return을 가지고 있는 함수를 감싸 사용한다. useMemo(() => {}, []) useEffect와 같이 콜백 함수에 코드를 적고, 의존성 배열에 넣는 값이 변하지 않으면 다시 연산하지 않는다. 즉 의존성 배열에 넣는 값이 변할 때만 다시 연산한다. 일기장 어플리케이션을 만들고 있는데, 일기 하나의 내용을 수정하는 액션을 할 때 모든 게 리렌더링 되었다. const getDiaryAnalysis = () => { console.log("일기 분석 시작"); const goodCount = data.filter((it..
📌 문제 알파벳 대소문자로 된 단어가 주어지면, 이 단어에서 가장 많이 사용된 알파벳이 무엇인지 알아내는 프로그램을 작성하시오. 단, 대문자와 소문자를 구분하지 않는다. 📌 입력 첫째 줄에 알파벳 대소문자로 이루어진 단어가 주어진다. 주어지는 단어의 길이는 1,000,000을 넘지 않는다. 📌 출력 첫째 줄에 이 단어에서 가장 많이 사용된 알파벳을 대문자로 출력한다. 단, 가장 많이 사용된 알파벳이 여러 개 존재하는 경우에는 ?를 출력한다. 📌 예제 입출력 📌 풀이 알아야 하는 것 str.charCodeAt(): 주어진 문자의 인덱스를 받아와 아스키 코드 번호로 해당 문자를 변환한다. String.fromCharCode(): 반대로 특정 아스키 코드 번호를 문자로 변환한다. fromCharCode()는..
📌 문제 7568번: 덩치 우리는 사람의 덩치를 키와 몸무게, 이 두 개의 값으로 표현하여 그 등수를 매겨보려고 한다. 어떤 사람의 몸무게가 x kg이고 키가 y cm라면 이 사람의 덩치는 (x, y)로 표시된다. 두 사람 A 와 B의 덩 www.acmicpc.net 우리는 사람의 덩치를 키와 몸무게, 이 두 개의 값으로 표현하여 그 등수를 매겨보려고 한다. 어떤 사람의 몸무게가 x kg이고 키가 y cm라면 이 사람의 덩치는 (x, y)로 표시된다. 두 사람 A 와 B의 덩치가 각각 (x, y), (p, q)라고 할 때 x > p 그리고 y > q 이라면 우리는 A의 덩치가 B의 덩치보다 "더 크다"고 말한다. 예를 들어 어떤 A, B 두 사람의 덩치가 각각 (56, 177), (45, 165) 라고 ..
