boilerplate 유튜브 강의 시리즈 Blog ReactJS NodeJS #21 Proxy Concurrently 참고 create react app 문서 - proxying 리액트 기본 포트가 3000포트 이기 때문에 백엔드 포트를 3000 -> 5000으로 변경했다. 따라서 현재 프로젝트는 프론트는 3000번, 백엔드는 5000번 포트를 사용한다. 1. proxy 설정 프론트에서 백엔드의 api를 사용할 때 다른 호스트나 포트로 리다이렉션 할 필요 없이 proxy 설정을 해놓으면 편하게 사용할 수 있다. http-proxy-middleware 를 설치한다. npm install -D http-proxy-middleware client 루트에 setupProxy.js 파일을 생성하고 아래 코드를 작..

boilerplate 유튜브 강의 시리즈 Blog ReactJS NodeJS #20 REACT ROUTER DOM React-Router-DOM 이란? 리액트 라우터는 리액트의 서드파티 라이브러리로 화면전환을 도와주는 역할을 한다. 일반적인 웹에서 a태그를 이용해 다른 페이지로 이동했었다면, 리액트에서는 리액트 라우터를 통해 Link 태그를 사용하여 화면을 전환한다. 리액트는 변화가 있는 컴포넌트만 업데이트하여 효율적으로 성능을 관리하는 구조로, 페이지 이동 시에도 굳이 화면 전체를 새로고침 할 필요가 없기 때문이다. 사실 리액트 라우터 없이도 컴포넌트 업데이트를 통해 화면전환을 할 수 있다. 그럼에도 리액트 라우터를 사용하는 이유는 사용자에게 새로고침, 뒤로가기, 즐겨찾기 등의 기능을 제공하기 위함이다..

boilerplate 유튜브 강의 시리즈 Blog ReactJS NodeJS#18 AXIOS Blog ReactJS NodeJS #19 about page axios는 브라우저와 node.js를 위한 프로미즈 기반의 HTTP client 이다. 프론트에서 사용할 것이기 때문에 client 폴더 내부에서 아래 명령어를 실행해야 한다. npm i axios --save 리액트 생성시 기본적으로 생성됐던 구조는 아래와 같다. 여기서 사용하지 않는 App.css, App.test.js, logo.svg 는 지우고 src 폴더에 components 폴더를 생성하고 App.js를 옮긴다. 그리고 index.js에서 App.js 파일의 경로를 불러오는 부분을 수정한다. 모두 완료하면 아래와 같다. 그리고 App.js..

오늘도 어김없이 스터디 카페에 왔다. 집에만 있으면 답답하기도 하고 할일 없이 누워서 유튜브나 넷플릭스만 보니까. 아무튼 카페와서 알고리즘 한 문제 풀고 블로그에 풀이를 올렸다. 그리고는 유튜브 보다가 카톡 하다가 집 가는 길에 치킨 사가려는 생각을 하면서 그냥 쭉 앉아 있다. 아무것도 손에 잡히지 않는다. 연말이라 그런지 코로나라 그런지 취업 준비중에 슬럼프가 온건지 모르겠다. 아무래도 전부 다 영향이 있는 것 같긴 하다. 이럴 땐 뭘 해야 할까? 평소 같으면 약속이라도 잡아서 얘기를 하거나 술을 마시거나 할텐데 어디 바람이나 쐬러 놀러가서 마스크 벗어 던지고 신선한 공기나 마시고 싶다. 오늘 눈이 왔다. 이번 겨울 들어 처음 눈 내리는 걸 봤다. 요즘 워낙 기쁜 일도 없고 삶이 너무 단조로웠는데 눈 ..

문제 설명 짝지어 제거하기는, 알파벳 소문자로 이루어진 문자열을 가지고 시작합니다. 먼저 문자열에서 같은 알파벳이 2개 붙어 있는 짝을 찾습니다. 그다음, 그 둘을 제거한 뒤, 앞뒤로 문자열을 이어 붙입니다. 이 과정을 반복해서 문자열을 모두 제거한다면 짝지어 제거하기가 종료됩니다. 문자열 S가 주어졌을 때, 짝지어 제거하기를 성공적으로 수행할 수 있는지 반환하는 함수를 완성해 주세요. 성공적으로 수행할 수 있으면 1을, 아닐 경우 0을 리턴해주면 됩니다. 예를 들어, 문자열 S = baabaa 라면 b aa baa → bb aa → aa → 의 순서로 문자열을 모두 제거할 수 있으므로 1을 반환합니다. 제한사항 문자열의 길이 : 1,000,000이하의 자연수 문자열은 모두 소문자로 이루어져 있습니다. ..

문제 설명 두 수의 최소공배수(Least Common Multiple)란 입력된 두 수의 배수 중 공통이 되는 가장 작은 숫자를 의미합니다. 예를 들어 2와 7의 최소공배수는 14가 됩니다. 정의를 확장해서, n개의 수의 최소공배수는 n 개의 수들의 배수 중 공통이 되는 가장 작은 숫자가 됩니다. n개의 숫자를 담은 배열 arr이 입력되었을 때 이 수들의 최소공배수를 반환하는 함수, solution을 완성해 주세요. 제한 사항 arr은 길이 1이상, 15이하인 배열입니다. arr의 원소는 100 이하인 자연수입니다. 입출력 예 풀이 유클리드 호제법을 이용하여 최대공약수를 구하고 이를 이용해 두 수의 최소 공배수를 구한다. 두 수의 최소 공배수를 구하고 이 수와 다음 수의 최소 공배수를 구해나간다. 마지막..

boilerplate 유튜브 강의 시리즈 Blog ReactJS NodeJS#17 CREATE REACT APP 이번 강의부터는 드디어 react를 이용한 프론트 개발에 들어간다. client 폴더를 만들고 해당 폴더 내부에서 create-react-app으로 react app을 생성한다. mkdir client cd client npx create-react-app . 생성 완료가 되면 아래처럼 Happy hacking 이라는 문구가 나온다. 생성된 리액트 프로젝트를 실행해본다. npm start 실행 결과

내일이면 벌써 크리스마스이브다. 나이를 한 살씩 먹을수록 시간이 더 빨리 흐른다는 걸 몸소 느끼고 있다...ㅎ 이번 크리스마스는 코로나 때문에 놀러가지를 못하니... 그냥 집에서 가족끼리 맛있는거나 먹고 쉬고.. 그리고 이번 가을부터 취업준비를 하면서 거의 하루종일 스터디카페에서 지내고 있는데 사람을 별로 못 만나서 삶에 활력을 잃은 기분이다. 코로나 때문에 더욱 더..ㅜ 요즘엔 취업에 대해 생각이 많이 든다. 내가 정말 하고자 하는 일을 위해 꼭 좋은 곳에 취업하고 싶은데 좋은 곳이란 돈을 많이 주고 누구나 알아주고 안정적인 그런 곳일까? 좋은 건 맞지만 이런 것들은 본질을 추구하다보면 나중에 따라오는 부수적인 것들이라고 생각이 든다. 내가 취업을 바라보는 관점은 '성장' 에 있다. 좋은 곳엔 그만큼 ..

우아한테크코스의 선발 과정을 보면 일반적인 선발 과정과는 다른 점들이 있다. 첫 번째로 면접이 없다. 지원서, 프리코스 미션, 최종 테스트를 종합적으로 판단하여 뽑는다. 그리고 3주라는 프리코스 기간이 있다. 비록 선발된 건 아니지만 이 과정에서도 많은 것을 배울 수 있다. 그리고 1:1은 아니지만 참가자들이 공통적으로 실수하는 부분들을 피드백 받을 수 있다. 정말.. 내가 생각하는 이상에 가장 가까운 선발과정인 것 같다. 그래서 더욱더 참여 하고 싶은 교육이다. 서류 지원을 하고 온라인 코딩 테스트를 본지 얼마 되지 않은 것 같은데 벌써 프리코스 3주간의 미션이 끝나고 최종 테스트까지 끝났다. 길다면 길고 짧다면 짧은 시간이지만 체감상 정말 순식간에 지나간 한달이었다. 1차 합격자 발표날로 돌아가보면 ..

문제 설명 JadenCase란 모든 단어의 첫 문자가 대문자이고, 그 외의 알파벳은 소문자인 문자열입니다. 문자열 s가 주어졌을 때, s를 JadenCase로 바꾼 문자열을 리턴하는 함수, solution을 완성해주세요. 제한 조건 s는 길이 1 이상인 문자열입니다. s는 알파벳과 공백문자(" ")로 이루어져 있습니다. 첫 문자가 영문이 아닐때에는 이어지는 영문은 소문자로 씁니다. ( 첫번째 입출력 예 참고 ) 입출력 예 풀이 #include #include using namespace std; bool isAlphabet(char c) { return ('a'

11월 7일에 온라인 코딩 테스트 시험을 봤다. 시험은 총 7문제 였고 4번까지는 어느정도 코딩을 할 줄 안다면 쉽게 풀 수 있는 문제 였고 5번부터가 좀 어려운 문제로 구성됐던 것 같다. 한 문제는 BFS로 푼 기억이 있다. 전체적인 난이도로 봤을 땐 코딩테스트 어느정도 준비하던 분들이라면 컷은 충분히 넘을 거라고 생각이 든다. 1차 합격 기준은 지원서 + 코딩테스트 인데 코딩테스트는 일정 점수 이상만 되면 동일 점수라고 하니까 더 중요한 건 지원서인 것 같다. 테스트를 마치고 하루하루를 보내고 있던 중에 어느덧 결과 발표날이 다가왔다. 그리고.. 이런 메일을 받았다. 지원서를 더 꼼꼼히 검토하기 위해 1차 합격자 발표를 연기한다는 내용이었는데 지원서를 정말 하나하나 신중하게 읽고 검토한다는 느낌을 받..

문제 설명 0과 1로 이루어진 어떤 문자열 x에 대한 이진 변환을 다음과 같이 정의합니다. x의 모든 0을 제거합니다. x의 길이를 c라고 하면, x를 c를 2진법으로 표현한 문자열로 바꿉니다. 예를 들어, x = "0111010"이라면, x에 이진 변환을 가하면 x = "0111010" -> "1111" -> "100" 이 됩니다. 0과 1로 이루어진 문자열 s가 매개변수로 주어집니다. s가 1이 될 때까지 계속해서 s에 이진 변환을 가했을 때, 이진 변환의 횟수와 변환 과정에서 제거된 모든 0의 개수를 각각 배열에 담아 return 하도록 solution 함수를 완성해주세요. 제한사항 s의 길이는 1 이상 150,000 이하입니다. s에는 '1'이 최소 하나 이상 포함되어 있습니다. 입출력 예 입출력..