기록하고 싶은 것들

Eslint를 설정한 뒤, 설정없이 사용하던 환경에 비해서 제약이 많이 생겼다. 예를 들어 buttton의 타입을 정하지 않으면 에러가 생기거나, 아래의 예시처럼 span 요소에 onClick 이벤트를 적용시키면 오류가 발생하였다. 찾아보니 이것은 eslint의 rule에 의한 에러여서 조건과 해결방법을 조사하였다. 아래는 eslint의 제약 조건과 해결 방법들이다. 비대화형 요소의 클릭 핸들러는 최소 하나의 키보드 리스너가 필요하다. 그 이유는 마우스를 사용할 수 없는 사람들이 키보드를 쓸 수 있게 함이다. onKeyUp, onKeyDown, onKeyPress 이벤트를 할당 해당 엘리먼트를 button으로 바꿈 모든 브라우저와 스크린리더들이 대화형 요소(interactive element)를 이용 가..

오늘은 기존 작성했던 UI에 간단한 기능들을 추가하였다. 현재로서는 아직 백엔드쪽 구축이 덜 되서 json-server를 이용하여 간단하게 글의 정보를 받아오는 정도만 구현했다. components/CommentBox 댓글을 작성하고 제출 시, 알림 버튼을 누르면 댓글이 작성되는 기능을 추가하였다. 댓글의 남은 글자 수도 하단에 위치해 두었다. // Comment 출력시 사용되는 컴포넌트 function CommentBox({ commentList }) { const [isWrite, setIsWrite] = useState(false); const [comments, setComments] = useState([]); const [newComment, setNewComment] = useState(''..

오늘은 프로젝트의 요구사항에 따른 화면 정의서를 제작해보았다. 내가 맡은 페이지는 마이페이지(profile),유저페이지(profile),질문 작성 페이지, 헤더였다. 마이페이지(profile) 유저페이지(profile) 질문 작성 페이지 헤더 직접 화면의 기능들을 명시화하고 구체화하니 실제 프로젝트를 진행할 때, 어떤 점을 중요시하고 구현해야할지가 대략적으로 보이는 시간이었다.

오늘은 프리 프로젝트의 UI 컨셉을 정하는 회의를 하였다. 우선 백엔드 파트와의 협의에서 기한안에 구성하지 못할 것 같은 기능들에 대해서는 과감하게 없애거나, 수정하였다. 회의 내용은 반응형 구현, 메인 컬러, 컨셉, 폰트 사이즈 등 공통적으로 정해야할 우선순위들에 대해서 정했다. 반응형은 기능 구현이 끝난 이후에, 후순위로 미루어 졌고, 아래 처럼 기본적인 설정을 마쳤다. 이후 각자 맡은 부분을 피그마로 구현하였는데, 나는 Nav, Header의 제작을 맡았다. 추가적으로 시간이 남아서 질문 상세 페이지의 구현을 도왔다. 아래는 구현한 페이지들의 목록이다.

todolist의 CRUD 기능을 구현하고 나서, 날짜에 따라서 todo의 목록을 보이게 만드려고 하였다. 따라서 헤더의 양 쪽 버튼을 클릭 시에, 해당 날짜로 이동하고 그 날짜에 맞는 todo의 목록을 보여주려고 하였다. 따라서 아래와 같이 날짜를 조정해주는 increaseDay, deacreaseDay 함수를 생성하고, 현재 날짜의 해당하는 todayTodo를 만들기 위해 filter를 사용하여 현재 날짜와 일치하는 todo의 목록을 찾아서 설정해주었다. 그 후 새로운 글을 작성해보았다. 오류 왜인지 위와 같은 에러가 발생하였다. 저장되는 createDate들은 slice가 가능한 문자열이 분명할텐데, 오류의 내용을 찾아보니 해당 오류는 slice를 사용할 수 없는 타입일 경우 발생한다고 한다. co..

오늘은 동적계획법(dp)에 대해서 배웠고 관련 문제를 풀었다. DP라고 하는 알고리즘은, 탐욕 알고리즘과 같이 작은 문제에서 출발한다는 점은 같지만, DP는 모든 경우의 수를 조합해 최적의 해법을 찾음 두 가지 가정이 만족하는 조건에서 사용 Overlapping Sub-problems : 큰 문제를 작은 문제로 나눌 수 있고, 이 작은 문제가 중복해서 발견 Optimal Substructure : 작은 문제에서 구한 정답은 그것을 포함하는 큰 문제에서도 같다. 즉, 작은 문제에서 구한 정답을 큰 문제에서도 사용 가능 DP 문제 예시 문제 자신이 감옥에 간 사이 연인이었던 줄리아를 앤디에게 빼앗겨 화가 난 조지는 브레드, 맷과 함께 앤디 소유의 카지노 지하에 있는 금고를 털기로 합니다. 온갖 트랩을 뚫고 ..

오늘은 proxy에 대해서 공부하였고, 실습을 진행하였다. proxy 프록시(Proxy)란 '대리', '대신'이라는 뜻을 가지며, 프로토콜에 있어서는 대리 응답 등에서 사용하는 개념이다. React 앱에서 브라우저를 통해 API를 요청할 때, proxy를 통해 백엔드 서버로 요청을 우회하여 보내게된다. 백엔드 서버는 응답을 React 앱으로 보내고, React 앱은 받은 응답을 백엔드 서버 대신 브라우저에게 전달한다. 이렇게 되면 출처가 같아지기 때문에 브라우저는 이 사실을 눈치 채지 못하고 허용하게 된다. Proxy 실습 api는 책의 정보를 제공하는 서버, api2는 todo의 정보를 제공하는 서버 my-app은 클라이언트 부분이다. 이를 이용해서 my-app부분에 책의 정보와 todo의 정보를 불러..

오늘은 Github Action을 통한 배포를 진행해 보았다. 1. 배포에 앞서서, 새로운 레포지토리를 생성하였다. 이 때 public으로 만들어야 Github Action을 무료로 사용할 수 있기 때문에, 주의해서 생성해준다. 나는 github-action-practice 라는 이름으로 레포지토리를 생성해주었다. 2. 새로운 레포지토리를 생성했다면, 연결시키고 싶은 코드를 push 시켜준다. 나는 기존 레퍼런스를 클론받은 뒤, 새로운 레포지토리를 원격 레포지토리로 등록 후 push를 진행하였다. 기존 레퍼런스 클론 git clone {기존 레퍼런스 주소} # 디렉터리 이동 cd {클론된 레퍼런스} # 새로운 리포지토리를 원격 리포지토리로 등록 git remote add myRepo {새로운 리포지토리 ..

오늘은 GraphGL에 대해서 공부하였다. 많이 들어는 봤지만, 정확하게 어떤 기술인지 몰랐는데 이번 기회를 통해 새롭게 알게 되었다. GraphQL 오픈 소스로 제공된 쿼리 언어 Server API 를 통해 정보를 주고받기 위해 사용하는 Query Language를 뜻함 사용 이유는? GraphQL은 그래프 형태로 관계를 생각하는 것에서 출발하여, 클라이언트 요청에 따라 유연하게 트리 구조의 JSON 데이터를 응답하는 방식으로 구성되었기 때문에 고정된 자원이 아닌 클라이언트 요청에 따라 유연하게 자원을 가져올 수 있다는 점이 가장 큰 이유 GraphQL VS REST API REST API의 한계 - Overfetch: 필요 없는 데이터까지 제공함 - Underfetch: endpoint 가 필요한 정..

오늘은 컴퓨터 구조와 운영체제에 대해서 공부하였다. 아무래도 전공 내용이 엄청나다 보니 오늘은 가장 중요한 부분들을 압축해서 배웠다. 컴퓨터 구조 컴퓨터는 입력장치(Input), 출력장치(Output)가 갖춰져 있고, 내부에는 연산을 하기 위한 중앙처리장치(CPU), 저장을 하기 위한 주 기억장치와 보조 기억장치를 가지고 있음 중앙처리장치 CPU의 내부 구성은 크게 산술/논리 연산 장치(ALU)와 제어 장치, 레지스터로 구성되어 있음 CPU의 구조와 기능 CPU는 명령어 인출과 명령어 해독하는 기능을 하며, CPU 의 내부 구성은 크게 산술/논리 연산 장치(ALU), 제어 장치와 레지스터 로 구성 캐시나 메모리로부터 읽어 온 데이터는 레지스터(Register)라는 CPU 전용의 기억장소에 저장되며, AL..