개발 창고(주인장: 파뱁)

넷플릭스 메인화면을 React로 클론 코딩해보려 한다. 넷플릭스 안 본지 진짜 오래되었는데... 컨텐츠 말고 맨날 메인 화면만 보고 있었던 탓인지 메인화면은 대충 떠오르는 것 같다. (솔직히 뭐 보지 고민하느라 메인화면 보는 시간이 실제 컨텐츠 보는 시간 보다 길었던거.. 나만 그런거 아니지) 기본적으로 아래의 영상을 기반으로 한 클론 코딩이다. https://www.youtube.com/watch?v=XtMThy8QKqU TMDB의 영화 정보 API를 이용해서 메인 화면에 영화 정보를 넷플릭스의 메인화면 처럼 보여주는 코드를 구성했다. React 공부에 치중을 둔 프로젝트인 만큼 실제 서비스의 동작은 하지 않는다. 우선 기본 index 페이지 코드는 다음과 같다. 이 코드에서는 후에 우리가 사용할 루트..

해시(Hash)는 다양한 길이를 가진 데이터를 고정된 길이를 가진 데이터로 매핑한 값이다. 이를 이용하면, 특정한 배열의 인덱스나 위치, 위치를 입력하고자 하는 데이터의 값을 이용해 저장하거나 찾을 수 있다. 기존에 사용했던 자료 구조들은 탐색이나 삽입시에 시간복잡도 O(n)이상을 가지지만 해시를 이용하면 즉시 저장하거나 값을 꺼내올 위치를 참조 할 수 있으므로 기존 보다 더 빠른 속도로 탐색이 가능해진다. 해시에는 아래의 특징을 보유하고 있다. 1. 무결성 해시는 key와 value 구조라고 봐도 되는데, 이때 value를 더 짧고 유일한 key 값으로 맵핑해준다는 점에서 무결성을 지키는 데에 많은 도움이 된다. 2. 보안성 해시는 기본적으로 복호화가 불가능하다는 특징이 있다. 처음부터 복호화가 불가능..

https://www.acmicpc.net/problem/2745 2745번: 진법 변환 B진법 수 N이 주어진다. 이 수를 10진법으로 바꿔 출력하는 프로그램을 작성하시오. 10진법을 넘어가는 진법은 숫자로 표시할 수 없는 자리가 있다. 이런 경우에는 다음과 같이 알파벳 대문자를 www.acmicpc.net B진법 수 N이 주어진다. 이 수를 10진법으로 바꿔 출력하면 되는 문제 이다. 입출력의 예는 다음과 같다. 예제 입력 1 ZZZZZ 36 예제 출력 1 60466175 진법의 수가 1234, B진법의 B가 3으로 주어졌다고 가정할때 이 수를 10진법으로 바꾸는 법은 1*3^3+2*3^2+3*3^1+4*3^0 이다 이를 일반화해서 계산하도록 만들면 된다. 다만 알파벳 대문자는 A: 10, B: 11..

28일은 교육센터 휴일, 1일은 공휴일이라 2,3,4일만 수업을 진행했다. 이번 주간은 React를 공부하는 주간이었다. 리액트의 기본적인 문법을 학습하고, 이를 응용해보기 위해 넷플릭스 메인페이지 클론 코딩을 시작했다. (넷플릭스 클론 코딩) https://paabaep.tistory.com/58 [React] 넷플릭스 메인 화면 클론 코딩 넷플릭스 메인화면을 React로 클론 코딩해보려 한다. 넷플릭스 안 본지 진짜 오래되었는데... 컨텐츠 말고 맨날 메인 화면만 보고 있었던 탓인지 메인화면은 대충 떠오르는 것 같다. (솔직히 뭐 보 paabaep.tistory.com 먼저 리액트의 기본 문법은 공식문서의 순서대로 진행했다. (진짜 공식 문서 잘 나와있다...! - 아래는 '그' 순서의 첫번째 문서이..

https://www.acmicpc.net/problem/5692 5692번: 팩토리얼 진법 상근이는 보통 사람들이 사는 것과는 조금 다른 삶을 사는 사람이다. 상근이는 이런 사람들의 시선이 부담스럽기 때문에, 자신만의 숫자를 개발하기로 했다. 바로 그 이름은 팩토리얼 진법이다. www.acmicpc.net 팩토리얼 진법에서는 i번 자리의 값을 ai×i!로 계산한다. 즉, 팩토리얼 진법에서 719는 10진법에서 53과 같다. 그 이유는 7×3! + 1×2! + 9×1! = 53이기 때문이다. 팩토리얼 진법으로 작성한 숫자가 주어졌을 때, 10진법으로 읽은 값을 리턴하면 되는 문제이다. 입출력의 예는 다음과 같다. 예제 입력 1 719 1 15 110 102 0 예제 출력 1 53 1 7 8 8 n값이 주..

https://programmers.co.kr/learn/courses/30/lessons/17681 코딩테스트 연습 - [1차] 비밀지도 비밀지도 네오는 평소 프로도가 비상금을 숨겨놓는 장소를 알려줄 비밀지도를 손에 넣었다. 그런데 이 비밀지도는 숫자로 암호화되어 있어 위치를 확인하기 위해서는 암호를 해독해야 한다. 다 programmers.co.kr 2개의 비밀지도가 주어지고, 그 두개의 각 칸에 하나의 #(벽)이 있으면 그 곳은 최종적으로 벽이다. 비밀지도는 10진수로 주어지는 데, 이를 2진수로 변환해서 0이면 " "(공백), 1이면 "#"로 간주한다. 입출력의 예는 다음과 같다. 매개변수 값 n 5 arr1 [9, 20, 28, 18, 11] arr2 [30, 1, 21, 17, 28] 출력 [..

진법 변환은 10진법, 2진법 등의 수를 다른 진법의 수를 바꾸는 것을 의미한다. 우리는 일반적으로 10진법을 사용하고, 컴퓨터는 0과 1로 이루어진 2진법을 이용한다. 이것을 변환하는 것도 진법변환이라고 부른다. 기본적으로 진법을 변환할 때는 나눗셈연산과 곱셈연산을 이용한다. 예를 들어 2진수인 111을 10진수로 변환할 때는 1*2^2 + 1*2^1 + 1*2^0 = 7 이 되고, 반대로 10진수인 7을 2진수로 변환할 때는 7//2, (7/2)//2, 7/2/2 => 111 이 된다. 파이썬 기준으로 n진수에서 10진수로 변환할때는 int()를 사용하면 된다. int(string, 진법) 이런 형식으로 사용하면 된다. string에는 변환하고자 하는 n진수 수를 문자열 형태로 넣으면 되고, 그 뒤에..

벌써 부트 캠프 시작후 2달이 지났다. 사실 이번 주는 이미 파파고 클론 코딩과 미니 프로젝트에 관해서 업로드 했기 때문에 크게 업로드 할 것은 없지만, 다시 어떤 것을 배웠는지 되돌아 보기 위해 정리를 하려고 한다. 파파고 클론 코딩을 하면서 외부 API를 받아오는 방법에 대한 학습, 잊고 있던 Node.js 사용법등을 떠올릴 수 있었다. 예전 프로젝트 때 한 번 하고 아마 사진 전송이 뜻 대로 되지 않아 접고 Firebase로 돌린 다음에 프로젝트 마무리 지었던 기억 때문에 Node.js에 대한 기억이 별로 좋지 못했는데, 그래도 이번엔 뭐라도 성공해봐서 다시 긍정적인 쪽으로 인상이 변화하고 있다. 파파고 클론 코딩에 대한 포스팅은 아래 링크를 참고! https://paabaep.tistory.com..

탐색에 대해 이해하려면 트리 구조를 먼저 살펴보는 것이 좋다. 트리(tree)는 나무가 가지치는 것처럼 생긴 "그래프"의 일종이다. 방향성(보통 위에서 아래)이 있는 비순환 그래프라고도 말하며, 루트 노드(최상위 노드), 부모-자식간의 노드 등이 존재한다. 여기서 말하는 노드는 정점이라고도 말하는데 특정 장소를 생각하면 된다. 이런 노드를 연결하는 것을 엣지(간선)이라 부르는데, 장소를 잇는 도로라고 생각하면 쉽다. 보통 트리는 다음과 같이 생긴 것을 의미한다. 이런 트리도 여러가지 조건 등을 붙이면서 특이한 종류의 트리를 만들 수 있는데, 우선 이 포스트에서는 그 것이 중점이 아니므로 깊게 다루지는 않을 것이다. (언젠가 다른 게시물에서 다룰 예정이다.) DFS(Depth First Search - 깊..

사실 이 개념은 프론트엔드, 백엔드 어느 한 쪽에 국한 되는 개념은 아니다. 내가 이 개념을 프론트엔드 공부할 때 접한 개념이었어서 FE카테고리에 넣은 것이지, 이 개념이 FE에 한정되는 개념이 아님을 밝히고 시작하려 한다. 우선 CORS의 정의는 다음과 같다. 추가 HTTP 헤더를 이용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제 이 정의만 보면 무슨 이야기인지 잘 와닿지 않을 것이다. (나도 처음 접할 때 무슨 말인지 한참을 들여다봤다.) 위의 말을 다른 표현으로 쓰자면, 브라우저 관점에서 origin이 다른 서버를 바로 호출 할 수 없다는 이야기이다. 예를 들면, 내가 "https://aaaaaaa.com"라는 ..