브라우저 라우팅 구현하기 리액트를 사용하지 않고, 타입스크립트로 코드를 구현하면서 라우팅 역시 직접 구현해야 한다는 것을 깨달았습니다. 라우팅은 어떤 작업일까? 라는 고민을 하게 됐고 제가 생각한 기능은 다음 두 가지 입니다. path 값에 해당하는 page가 렌더링 되야 한다. path 값의 흐름이 저장되어 있어서, 뒤로가기나 앞으로가기가 가능해야 한다. 제가 생각한 라우팅은 다음과 같습니다. 라우팅을 하는 path 값을 상태(state)로서 관리하는 것입니다. 그리고 실제 URL path 값을 state 와 일치 시키도록 history API를 적용하였습니다. 실행 로직 path 상태 값은 앞 포스팅에서 구현했던, 전역 store에서 관리합니다. 가장 상위 컴포넌트에서 path 상태값에 따라 moun..

FLUX 패턴 적용하기 부스트캠프에서 Redux 의 구조를 공부하다가, FLUX 패턴을 직접 구현한 글을 보게 되었습니다. 이미 유명한 황준일 개발자님의 글이었습니다. [ 참고 링크 ] 글을 읽고 나서 해당 구조를 이해하고 벤치마킹 해보고 싶었습니다. 먼저, FLUX 패턴을 이해하기 위해 공식 문서를 참고했습니다. Action 액션은 데이터의 상태를 변경하라고 명령하는 함수입니다. 액션 생성자는 새로 발생한 액션의 타입과 데이터 페이로드를 액션 메시지로 묶어 디스패쳐로 전달합니다. Action을 이용하여 명령을 하기만 하면, View 입장에서는 Store 내부의 구조를 몰라도 State를 변경할 수 있습니다. Dispatcher 디스패쳐는 액션 메시지를 감지하는 순간 그것을 각 스토어에 전달합니다. 전달..

! 이 글은 제가 너무 애청하는 유투브 "코딩앙마" 채널의 TypeScript 강좌를 정리한 글입니다. 코딩앙마님 유투브 강의 바로가기 Type Script 기초 유투브 코딩앙마님 강의 정리 by 웅 [1, 2강] 타입스크립트의 기본 타입 let age:number = 30; let isAdult:boolean = true; let a:number[] = [1,2,3]; let b:Array = [1,2,3]; let week1:string[] = ['mon', 'tue', 'wed']; let week2:Array = ['mon', 'tue', 'wed']; week1.push('ja') 리스트 타입은 위와 같이 string[ ] , Array 이렇게 두 가지 정의 방법이 있다. 튜플 : 리스트인데, ..

React에서 Custom Select 구현하기 👋 문제 제기 💡 React에서 Custom Select Component 구현 시 on/off state 관리, Position 설정, 클릭 및 스크롤 이벤트 관리를 어떻게 할 것인가? Custom Select 를 만들기로 결심한 계기 토글 예시 Select tag는 CSS 를 적용하는 것이 어렵습니다. 기본적은 Select tag는 브라우저 마다 다른 디자인을 보이며 특히 option 부분에는 CSS 를 적용하기 위해서 특별한 Plugin을 사용해야 합니다. 물론, 모바일의 경우에는 내장되어 있는 Select의 기능을 지원 받을 수 있지만, 저는 기능적인 이점 보다 디자인적인 통일감을 주고 싶었습니다. 때문에, 위와 같이 직접 디자인하고 같은 기능을 갖..

반응형 UI 👋 문제 제기 💡 사용자 마다 사용하는 모니터의 크기가 다를텐데, 어떻게 UI 디자인을 할 것인가? 💡 모바일로 접속하는 사용자도 있을텐데, 어떻게 모바일 화면을 고려할 것인가? 👀 바쁘신 분들을 위한 세줄 요약 1. UI가 비슷한 사이트들을 분석 후, 1300px, 1024px, 768px 이라는 기준 값을 설정했습니다. 2. 기준 값들에 따라서 다른 UI 가 적용되도록 CSS를 설정했습니다. ( %, 미디어쿼리 사용 ) 3. 작은 UI 부터 설계해야 한다는 점과 display, position, width, height 등의 CSS 속성을 정확히 알고 있어야 한다는 점, 그리고 모바일과 PC 에서 말하는 좋은 UI의 기준이 다르다는 것을 깨닫게 되었습니다. ✏ 탐구 과정 먼저, 비슷한 U..

2021년 12월 6일, 2021년 나의 최대 도전이었던 부스트캠프가 끝이 났다. 취업 전쟁은 이제 시작이지만... 그래도 나 고생많았다!!! 사실 나에게는 부스트캠프가 인생을 바꿨다고 해도 과언이 아니다. 나는 CS가 아닌 다른 과를 전공했고, 4학년 때 경험 삼아했던 인턴이 운좋게 정규직 전환되었다. 누구나 아는 대기업이었고 지금까지 들어보지 못했던 고액의 연봉이었다. 그런데 마음 한 편으로는 계속 이런 생각이 들었다. "이게 내가 정말 하고 싶은 일 일까?" 4학년 때, 빅데이터 열풍이 불면서 나는 데이터 관련 교육을 수강하고 자격증을 땄다. 그 과정에서 컴과 3학년 수업인 데이터베이스 수업을 듣게 됐는데, 처음으로 "웹 개발" 이라는 것을 경험했다. 물론, 과제하느라 눈물을 30번 정도 흘렸다. ..

SQL 문제가 한 문제 출제 됐는데, 이전 출제 문항 정도의 난이도를 생각했다가 크게 데였다... 결국 풀긴했지만 서브쿼리를 거대하게 작성해서 좋은 코드는 아닌 것 같다. 서브 쿼리문 연습이 필요한 것 같다. 유명한 알고리즘을 사용하는 문제가 하나도 나오지 않고, 다 구현문제였다... 나름 자신있다고 생각했는데, 가장 골머리 썩었던 점을 적어보고자 한다. 파이썬에서 내가 원하는 결과가 안나오는 경우 indentation을 한 번 정도는 의심해 보자... 이번에 인덴테이션을 실수로 잘못 맞췄더니 while 문에서 돌아가야할 코드가 외부에서 돌아가는 버그가 있었다. 디버깅 하는데 거의 10분 이상을 소요한 것 같다. 문제가 길어도 문제의 요구 조건을 분명하게 읽어보자. 예시로 문제를 파악하는 것은 좋지만 예..

1. heapq binary tree 기반의 min heap 자료구조를 제공한다. import 방법 import heapq 특징 heap을 만들어주는 것이 아니라, list 내부의 값들을 min-heap의 성질대로 배치 해준다! 아래와 같이 먼저 heap으로 사용할 list를 만들어 주거나, 이미 만들어진 list를 힙의 성질대로 재배치할 수 있다. #새로 heap을 위한 리스트를 만들거나 heap = [] #또는 힙으로 사용할 기존에 사용하던 리스트가 있어야함 heap = [ 1, 2, 3, 4, 5 ] 힙 원소 추가 heapq.heappush( 리스트, 추가할 원소 ) heap = [] heapq.heappush(heap, 14) heapq.heappush(heap, 11) heapq.heappush..

closure는 함수를 선언하는 과정에서 결정된다. 함수가 생성될 때, 함수와 렉시컬 환경을 기억해 놓는 것이다. 즉, 당시의 외부 변수를 기억하는 것. 여기서 렉시컬이라는 것은, 자바스크립트가 따르고 있는 스코프 모델이다. 자바스크립트는 렉시컬 스코프를 따르는데, 이는 함수가 호출될 때가 아니라 선언될 때, 상위 스코프를 결정하는 규칙이라고 보면 된다. 아래 예시를 보자. let num = 1; function a() { let num = 2; b(); } function b() { console.log(num); } a(); b(); 위 예시에서 결과값이 어떻게 나올까? 정답은 둘다 1이 나온다는 것이다. a(); // 1 b(); // 1 혹시 a() 의 경우 2가 나올 것이라 예측했을 수도 있다...

const a = { name: "woong", age: 12, }; const { name: myName, age: myAge } = a; console.log(myName); // woong console.log(myAge); // 12 위 방식으로 객체 전개 구문에서 변수 이름을 바꿔줄 수 있다. const a = { name: "woong", age: 12, }; const b = Object.assign({}, a); const c = { ...a }; b.name = "hoon"; console.log(a.name); // woong (안바뀜) c.name = "june"; console.log(a.name); // woong (안바뀜) b 와 c 두 방식 모두 객체의 주소가 복사된 것이 아니..