투투

오늘은 React에서 API 서버에 데이터를 요청하였는데 CORS에 의해 데이터를 받을 수 없는 이슈가 발생했었다. 이전에도 Vue와 Django로 웹 개발을 진행할 때 두 개의 서버(View 서버, API 서버)를 모두 로컬 환경에서 켜놓고 프로젝트를 진행했었다. 초기에 CORS 때문에 요청한 데이터를 받지 못하는 이슈가 발생했었다. 하지만 그 당시에 정확한 개념을 파악하지 않았고 어떻게 해결해야 하는지만 급급했다. 따라서 이번 기회에 정확한 개념을 짚고 넘어갈 필요가 있었기 때문에 CORS가 무엇이고 왜 이러한 이슈가 발생하는지 알아보자. 먼저 CORS가 무엇인지 기본적인 개념을 보자. CORS는 서로 다른 출처에서 리소스를 공유하는 것을 의미한다. 먼저 위와 같은 이슈가 발생한 원인은 서로 다른 출..

자바스크립트를 사용하여 DOM 요소를 조작한다. 이때 빈번하게 DOM 요소를 조작한다면 웹 성능이 떨어지기 때문에 최대한 적게 DOM 요소를 조작하거나 조작한 것을 한 번에 렌더하도록 해야한다. 또는 React처럼 Virtual DOM을 활용하여 이전의 DOM 요소들과 비교하여 변경사항만 업데이트하여 웹 성능을 최적화시킬 수 있다. 그렇다면 왜 DOM 요소 조작을 많이하면 웹 성능이 떨어지는지 궁금했고 이를 브라우저의 렌더링 과정을 이해하면서 궁금증을 해결하려고 한다. 브라우저의 기본적인 렌더링 과정을 아래의 순서로 알아본다. HTML 문서 파싱 및 DOM 생성 CSS 파싱과 CSSOM 생성 렌더 트리 생성 자바스크립트 생성 리플로우와 리페인트 1. HTML 문서 파싱 및 DOM 생성 브라우저(클라이언트..

https://programmers.co.kr/learn/courses/30/lessons/42889 코딩테스트 연습 - 실패율 실패율 슈퍼 게임 개발자 오렐리는 큰 고민에 빠졌다. 그녀가 만든 프랜즈 오천성이 대성공을 거뒀지만, 요즘 신규 사용자의 수가 급감한 것이다. 원인은 신규 사용자와 기존 사용자 사이에 스 programmers.co.kr 첫 번째 접근 각 stage마다 해당 stage에 있는 사람의 수를 분자, stage 이상인 사람을 분모로 하여 해당 값을 stage 번호와 함께 리스트에 추가한다. 이후 리스트에서 실패율을 기준으로 내림차순 정렬하고 최종적으로 첫 번째 값부터 탐색해서 stage를 출력하도록 한다. 첫 번째 구현 - stage를 1부터 N까지 진행하여 - stages 리스트를 ..

문제 접미사 배열은 문자열 S의 모든 접미사를 사전순으로 정렬해 놓은 배열이다. baekjoon의 접미사는 baekjoon, aekjoon, ekjoon, kjoon, joon, oon, on, n 으로 총 8가지가 있고, 이를 사전순으로 정렬하면, aekjoon, baekjoon, ekjoon, joon, kjoon, n, on, oon이 된다. 문자열 S가 주어졌을 때, 모든 접미사를 사전순으로 정렬한 다음 출력하는 프로그램을 작성하시오. 입력 첫째 줄에 문자열 S가 주어진다. S는 알파벳 소문자로만 이루어져 있고, 길이는 1,000보다 작거나 같다. 출력 첫째 줄부터 S의 접미사를 사전순으로 한 줄에 하나씩 출력한다. 접근 입력받은 문자열에서 슬라이싱을 통해 접미사를 구하고 오름차순 정렬한다. 구현..

git을 통해 버전 관리와 협업을 진행할 수 있다. 자신의 로컬 환경에 있는 코드를 어떻게 원격 저장소에 올리고 어떤 과정을 거쳐가는지 정리해보려고 한다. 현재는 이 과정에 익숙해져 있어서 쉽게 할 수 있지만 처음에 add -> commit -> push를 했던 것을 생각해봤을 때 많이 헷갈렸던 기억이 있다. 지금은 익숙해져서 아무 생각없이 진행하는 일이 되어버렸고 확실히 정리를 해두고 가야겠다는 생각을 하였다. 아래의 순서로 정리를 시작하려고 한다. 전체적인 흐름 원격 저장소 생성 add commit push 전체적인 흐름 먼저 로컬에서 원격 저장소까지의 과정을 한눈에 알아보도록 하자. 개인적으로 처음에 아래의 그림을 그리면서 git 명령어를 사용했을 때 더욱 빠르게 이해가 되었다. Working Di..

https://programmers.co.kr/learn/courses/30/lessons/67256 코딩테스트 연습 - 키패드 누르기 [1, 3, 4, 5, 8, 2, 1, 4, 5, 9, 5] "right" "LRLLLRLLRRL" [7, 0, 8, 2, 8, 3, 1, 5, 7, 6, 2] "left" "LRLLRRLLLRR" [1, 2, 3, 4, 5, 6, 7, 8, 9, 0] "right" "LLRLLRLLRL" programmers.co.kr 접근 딕셔너리를 활용하여 각 번호를 key, 번호의 좌표를 value로 저장한다. 이후 해당 번호에 따라서 왼손과 오른손의 좌표를 이동하고 조건에 따라 최종해에 L과 R을 추가한다. 이렇게 번호의 좌표를 딕셔너리에 저장한 이유는 2, 5, 8, 0일 때..

프로젝트를 시작하고 조금씩 코드가 복잡해져 나가고 다른 사람들의 코드와 Merge 했을 때 중구난방이 되어있는 형태를 보았다. 서로 규칙이 없었고 스스로 코드를 작성할 때 특정 규칙이 아닌 마음대로 작성하게 되면서 가독성, 재사용성 등이 현저히 떨어지는 코드가 되었다. 이를 해결하기위해 다른 사람들의 코드를 보던 중 리액트의 디자인 패턴을 알게 되었고, 가장 기본적인 패턴인 Container-Presenter 패턴을 공부해보고 이를 적용시켜보려고 한다. Container - Presenter 패턴의 개념 먼저 Container - Presenter 패턴에 대해 간략하게 알아보자. 이름에서 볼 수 있듯이 두 개의 구조로 분리한다는 것을 알 수 있다. 각각의 역할은 다음과 같다. Container : 데이터..

https://programmers.co.kr/learn/courses/30/lessons/81301 코딩테스트 연습 - 숫자 문자열과 영단어 네오와 프로도가 숫자놀이를 하고 있습니다. 네오가 프로도에게 숫자를 건넬 때 일부 자릿수를 영단어로 바꾼 카드를 건네주면 프로도는 원래 숫자를 찾는 게임입니다. 다음은 숫자의 일부 자 programmers.co.kr 접근 숫자에 대한 영단어를 리스트에 저장하여 활용한다. 입력받은 문자열을 순차적으로 탐색하여 숫자일 때는 그대로 최종해에 추가하고 영문일 때는 임시로 저장하는 문자에 추가한다. 이 문자가 리스트안에 포함되어있을 때 해당 문자의 인덱스를 반환하고 문자열로 변환하여 최종해에 추가한다. 구현 - numbers라는 리스트에 인덱스는 숫자 값에는 인덱스에 해당..

문제 상근이는 세계적인 소프트웨어 회사 기글에서 일한다. 이 회사의 가장 큰 특징은 자유로운 출퇴근 시간이다. 따라서, 직원들은 반드시 9시부터 6시까지 회사에 있지 않아도 된다. 각 직원은 자기가 원할 때 출근할 수 있고, 아무때나 퇴근할 수 있다. 상근이는 모든 사람의 출입카드 시스템의 로그를 가지고 있다. 이 로그는 어떤 사람이 회사에 들어왔는지, 나갔는지가 기록되어져 있다. 로그가 주어졌을 때, 현재 회사에 있는 모든 사람을 구하는 프로그램을 작성하시오. 입력 첫째 줄에 로그에 기록된 출입 기록의 수 n이 주어진다. (2 ≤ n ≤ 106) 다음 n개의 줄에는 출입 기록이 순서대로 주어지며, 각 사람의 이름이 주어지고 "enter"나 "leave"가 주어진다. "enter"인 경우는 출근, "le..

접근 먼저 가로와 세로를 탐색해서 활주로가 가능한지 알아보기 위해 각 열의 세로 정보들을 N행에 이어 붙였다. 이후 각 행마다 활주로 건설이 가능한지 검사를 한다. 먼저 이전 인덱스의 값과 현재 인덱스의 값이 같을 때는 continue를 진행한다. 이전 인덱스와 현재 인덱스의 + 1 값이 같을 때는 내리막이되는 경사로를 설치할 수 있는지 검사하고 설치할 수 없다면 활주로가 안되는 것으로 간주한다. 이전 인덱스의 - 1과 현재 인덱스의 값이 같을 때는 오르막이되는 경사로를 설치할 수 있는지 검사하고 설치할 수 없다면 활주로가 안되는 것으로 간주한다. 경사로를 설치할 때는 범위를 벗어나거나 겹쳐서 사용하면 안되기 때문에 각 인덱스에 경사로 설치유무를 체크하고 맵을 벗어나는지 체크하여 경사로를 설치하도록 한다..