📙 1. 문제 Link : https://school.programmers.co.kr/learn/courses/30/lessons/1844 문제 설명 문제 설명 ROR 게임은 두 팀으로 나누어서 진행하며, 상대 팀 진영을 먼저 파괴하면 이기는 게임입니다. 따라서, 각 팀은 상대 팀 진영에 최대한 빨리 도착하는 것이 유리합니다. 지금부터 당신은 한 팀의 팀원이 되어 게임을 진행하려고 합니다. 다음은 5 x 5 크기의 맵에, 당신의 캐릭터가 (행: 1, 열: 1) 위치에 있고, 상대 팀 진영은 (행: 5, 열: 5) 위치에 있는 경우의 예시입니다. 위 그림에서 검은색 부분은 벽으로 막혀있어 갈 수 없는 길이며, 흰색 부분은 갈 수 있는 길입니다. 캐릭터가 움직일 때는 동, 서, 남, 북 방향으로 한 칸씩 이..
📙 1. 문제 Link : https://school.programmers.co.kr/learn/courses/30/lessons/150368 문제 설명 카카오톡에서는 이모티콘을 무제한으로 사용할 수 있는 이모티콘 플러스 서비스 가입자 수를 늘리려고 합니다. 이를 위해 카카오톡에서는 이모티콘 할인 행사를 하는데, 목표는 다음과 같습니다. 이모티콘 플러스 서비스 가입자를 최대한 늘리는 것. 이모티콘 판매액을 최대한 늘리는 것. 1번 목표가 우선이며, 2번 목표가 그 다음입니다. 이모티콘 할인 행사는 다음과 같은 방식으로 진행됩니다. n명의 카카오톡 사용자들에게 이모티콘 m개를 할인하여 판매합니다. 이모티콘마다 할인율은 다를 수 있으며, 할인율은 10%, 20%, 30%, 40% 중 하나로 설정됩니다. 카카..
📚 1. 사전 지식 참고 : 웹 접근성이란?, 웹 접근성 개선하는 법, Next.js의 _document와 _app에 대하여 웹 접근성 : 장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이용 할 수 있도록 보장하는 것으로 웹 접근성 준수는 법적의무사항 웹 접근성 개선하는 법 1. 대체 텍스트 포함하기 이미지, 로고, 그림 등의 그래픽에 대체 텍스트를 사용하세요. 2. 높은 색상 대비 선택 3. 정보가 있는 링크 텍스트 사용 4. 텍스트 크기 및 정렬 확인 5. 서식 지원 텍스트 사용 6. 번호 매기기 및 글머리기호 목록 사용 _app : 서버로 요청이 들어왔을 때 가장 먼저 실행되는 컴포넌트로, 페이지에 적용할 공통 레이아웃 역할 Component 속성값은 서버에 요청..
📙 1. 문제 Link : https://school.programmers.co.kr/learn/courses/30/lessons/150369 문제 설명 당신은 일렬로 나열된 n개의 집에 택배를 배달하려 합니다. 배달할 물건은 모두 크기가 같은 재활용 택배 상자에 담아 배달하며, 배달을 다니면서 빈 재활용 택배 상자들을 수거하려 합니다. 배달할 택배들은 모두 재활용 택배 상자에 담겨서 물류창고에 보관되어 있고, i번째 집은 물류창고에서 거리 i만큼 떨어져 있습니다. 또한 i번째 집은 j번째 집과 거리 j - i만큼 떨어져 있습니다. (1 ≤ i ≤ j ≤ n) 트럭에는 재활용 택배 상자를 최대 cap개 실을 수 있습니다. 트럭은 배달할 재활용 택배 상자들을 실어 물류창고에서 출발해 각 집에 배달하면서, ..
💭 1. 이번 주엔 어떤 일들이 있었고, 그 속에서 나는 어떤 것을 느꼈을까 4월 16일(일) 📜 oopy블로그 꾸미기 oopy블로그를 꾸몄다! 정확히 말하면 나를 표현하는 자기소개서이자, 이력서이다. 내 이력서가 이렇게 예쁘니 들어갈 때마다 기분이 좋다 ㅎㅎ. 그리고 이 문구의 코드는 github repository에 저장해두었다. 앞으로 커스텀해서 만들 때마다 하나씩 추가해야지. 📜 Python Selenium 시험 기간이여서 그런가, 학교 공부 빼고는 뭘 해도 재미있는 거 같다. 특히 평소에 해던 프런트엔드보다는 다른 분야에 손가 눈이 간다. 예전에 만든, Python Selenium을 이용한 블로그 매크로를 손 보았다. 조만간 github에 public으로 업로드할 예정이다. 매크로는 삶을 풍요롭..
😡 에러 상황 Next.js의 getStaticProps메소드를 사용하여 서버로부터 데이터를 미리 받아오는 코드 구현하던 중, 에러 발생 // pages/test.tsx import Layout from '@components/common/Layout'; import React from 'react'; import instance from '@apis/_axios/instance'; const Test = ({ data }) => { console.log(data); return ; }; export const getStaticProps = async () => { const data = await instance.get('/members/me'); return { props: { data: data...
🧐 1. 주제 Vite란? 참고 : vite Vite? Vite가 뭔데 이렇게 뜨는 걸까. Vite가 뜰 거다라고 몇 개월 전에 듣고 흘린 적이 있는데, 며칠 전에 들은 강의에서 강사님이 'Vite 꼭 쓰세요'라는 말을 듣고 'Vite가 이 정도인가?'라는 생각과 함께 Vite에 대해 큰 흥미를 불러일으켰다. 'Vite'는 프랑스어로 '빠르다'를 의미한다. 아래와 같은 두 가지 콘셉트를 중심으로 하고 있다. 1. 개발 시, Native ES Module을 넘어 더욱 다양한 기능 제공 : HMR(Hot Module Replace) 2. 번들링 시, Rollup 기반의 다양한 빌드 커맨드 사용 이 두가지 특징들로 인해 개발자들이 더욱 빠르고 쉽게 애플리케이션을 개발할 수 있도록 돕는다. Vite와 Next...
💭 1. 이번 주엔 어떤 일들이 있었고, 그 속에서 나는 어떤 것을 느꼈을까 4월 9일(일) 📜 CS공부 오늘의 핵심 1. JWT : 인증과 권한 부여를 위해 사용되는 JSON 기반의 토큰 보안을 위해 accessToken은 cookie에 저장하여 XSS(Cross Stie Scripting)을 막고, refeshToken은 localStorage에 저장하여 CSRF(Cross Site Request Foregery)를 막는다. 2. CORS : 웹 브라우저에서 실행되는 스크립트가 다른 출처의 리소스에 접근하는 것을 허용하는 보안 방식. 여기서 다른 출처란, 프로토콜, 호스트, 포트 중에서 하나라도 다른 것 3. reconsiliation : React가 가상 DOM과 실제 DOM을 비교하여 변경된 부분..
