회사에서 대뜸 프론트엔드 개발환경을 세팅하라는 오더가 내려왔다. 사수 없이 개발팀이 꾸려진 상태라 이 상황을 어떻게 해결하나 방황하던 찰나, 문득 인프런에서 웹팩 관련 강의를 찜 해놓은게 생각났다. 곧 바로 결제하여 강의를 들었고, 웹팩 뿐만 아니라, 바벨, es-lint 등 프론트엔드 개발환경 세팅의 필수 내용이지만 쉽게 간과했던 내용을 제대로 학습할 수 있었다. 1회 수강 만으로는 부족하여 2회째 수강중인데, 정리없는 학습은 무의미함을 알기에 해당 강의를 바탕으로 웹팩 기본 내용을 정리해본다. 프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..) - 인프런 | 강의 이미 만들어 놓은 개발 환경을 이해할 수 있어요. 처음부터 직접 개발 환경을 만들 수 있어요., 웹팩, 바벨..

📌 접근 1. A, E, I, O, U 의 중복을 허용하며 모든 경우의 순열(permutation)을 만들어 낸다. 2. 각 모음의 조합이 1가지인 경우, 2가지인 경우, ... 5가지인 경우, 이렇게 각각의 경우에 맞는 모든 조합을 만들어야한다. 2 - 1. 예를 들어 조합이 5가지인 경우는, AEIOU 뿐만이 아니라 (중복 허용하기 때문에) AAAAA, EEEEE ... UUUUU 같은 경우도 존재한다. 2 - 2. 때문에 단순 permutation 메서드를 사용하면 안된다. 3. 오름차순 정렬한다(소팅). 결론: 사실상, A, E, I, O, U 를 조합하여, 모든 경우를 쫙 펼친 후 소팅. ❌ permutation 으로 접근했을 때 (오답) from itertools import product, ..

Medium article 을 읽으면서 일반 함수와 화살표 함수의 차이점에 대해 정리한 글입니다. 1. arguments property ✅ 1 - 1. 일반 함수의 arguments 일반함수는 이미 내장된 arguments 라는 프로퍼티가 존재합니다. 어떤 (일반) 함수를 호출할 때 인자로 받은 매개변수를, 함수 내에서 arguments 라는 변수로 호출할 수 있습니다. function func1() { console.log(arguments); console.log(arguments[3]); } func1(1,2,3,4); >>> Arguments(4) [1, 2, 3, 4, callee: ƒ, Symbol(Symbol.iterator): ƒ] >>> 4 ✅ 1 - 2. 화살표 함수에겐 argumen..

package-lock.json , yarn.lock 이란? 리액트 프로젝트를 진행하면 자주 접하게 되는 파일이 있는데, package-lock.json, yarn.lock 파일입니다. 직접 작성한 적은 없지만 이상하리 만큼 자주 접하는 파일입니다. 하나의 프로젝트에 여럿의 개발자가 붙는 상황을 가정해봅시다. 각 개발자마다 단계적으로 투입된다면, 시간차가 발생하여 사용하는 리액트의 버전이 달라질 수 있습니다. React version 개발자 a : 16.8.0 개발자 b : 16.10.2 개발자 c : 17.0.0 리액트의 버전이 달라지면, 개발자 a에겐 정상적으로 동작하는 기능이 b 에게선 문제가 발생할 수 있습니다. 때문에 프로젝트에 최초로 추가된 패키지의 버전이 무엇인지 기록하여, 해당 패키지의 버..

BFS 와 DFS 요즘 아침마다 BFS/DFS 문제를 하나씩 풀고 있다. 워낙 못하는 유형이기도 하고, 코딩 테스트마다 매번 막혀 개인적으로 벽이라 느꼈던 문제였다. 그런데 어제, 오늘은 프로그래머스 lv3 문제도 한번만에 풀리는게 아닌가. 잠깐이지만 빛이 보였다. 그러면서 BFS / DFS 의 차이,BFS: queue, DFS: stack 을 체감했다. BFS 는 자신과 연결된 노드를 우선적으로 모두 순회하는데, 이를 queue 에 담는다. stack 에도 담을 수 있지 않냐고? 자바스크립트 for 문 이거 처음 알았다. for () 내부에서 in 과 of 에 따라 차이가 발생하는데, in 을 사용하면 배열(List)의 인덱스로 접근, of 를 사용하면 배열의 원소에 접근한다. // index에 접근 ..

1. 실행 컨텍스트 (Execution context) 1 - 1. 실행 컨텍스트 실행 컨텍스트 : 코드를 실행할 때 제공되는 환경 정보를 모아 둔 객체. 하나의 실행 컨텍스트를 생성하는 방법은 주로 함수를 호출하는 것입니다. (이외에도 전역공간이나 eval() 함수 등이 있지만 지금은 패스하겠습니다.) 실행 컨텍스트를 직역하면 실행 문맥인데 코드를 실행하는 문맥, 즉 코드를 실행할 때 필요한 환경 정보를 뜻합니다. 그렇다면 코드를 실행할 때 필요한 환경 정보는 무엇이며, 어떻게 생성되는 것일까요? 바로 자바스크립트 엔진이 호출되는 함수와 관련된 정보(=환경정보)를 수집하여 실행 컨텍스트 객체에 전달/저장할 때 생성됩니다. 이 객체(실행 컨텍스트) 는 자바스크립트 엔진이 활용할 목적으로 생성되기 때문에 ..

파이썬의 딕셔너리 자료형에서 값을 꺼내는 방법은 2가지가 있다. table_dict = {'a': 1, 'b': 2, 'c':3} # 첫번째 table_dict['a'] // 1 #두번째 table_dict.get('b') // 2 두 방법을 비교했을 때, 첫번째 방법이 더 간편하여 자주 사용했는데, 이 경우 찾고자하는 key 값이 없을 경우 바로 KeyError 를 던진다. table_dict = {'a': 1, 'b': 2, 'c':3} # 첫번째 table_dict['d'] >>> KeyError: 'd' 하지만 두번째 방법인 get() 메소드를 사용하면 존재하지 않은 key 에 대해 예외를 던지지 않고 none 을 리턴하기 때문에 에러를 피할 수 있다. 딕셔너리의 get() 메서드는 두개의 인자를..

📌 상황 heroku 에 배포해 놓은 데이터베이스와 연결하는 과정에서 발생한 에러. 개인 프로젝트 백엔드와 데이터베이스를 헤로쿠에 배포시키고 연동했다. 처음엔 pg_hba.conf 가 문제인줄 알았는데, 구글링을 통해서 해결한 방법으로 모든 호스트와 포트는 다 열어놓은 상태였다. pg_hba_conf 파일을 여는 방법은 맥북 기준으로 최상단 루트에서 아래 명령어를 입력한다. 최상단 루트란 usr 이 존재하는 루트를 말한다. cd usr/local/var/postgres 아무튼 pg_hba.conf 파일에서 시도할 수 있는 방법은 모두 동원했지만 동일한 에러메시지만 나왔다. 🍎 SSL off Why am I seeing connection errors for my Heroku Postgres databas..

📌 React - Netlify, Redirection 에러 리액트 서버를 netlify 를 통해 정상 배포했다. 이 때 새로고침을 하면 아래와 같은 에러메시지가 나타난다. page not found 는 404 에러로, 현재 url 에서 찾고자 하는 자원을 못찾았을 때 발생한다. 이전 까진 정상적으로 보이던 화면이 왜 새로고침 이후엔 보이지 않을까? ✏️ 원인 내 설정에서 리액트가 최초 접속할 때의 url 은 / 이다. 그리고 이 때 index.html 을 읽는다. 즉 해당 url 에 대한 자원은 index.html 로 정해져 있다. 하지만 화면을 넘기면서 라우팅된 url 이 예를 들어 /a 혹은 /b 가 됐을 땐, 각 url 에 맞는 자원이 존재하는가? 그렇지 않다. index.html 처럼 정해진 자..