본문 바로가기

전체 글

 (215)
Component Driven Development (CDD) 컴포넌트 주도 개발, CDD 컴포넌트를 모듈 단위로 개발하여 사용자 인터페이스(UI) 구축에 도달하는 개발 및 설계 방법론입니다. 즉, 컴포넌트 수준에서 시작해 페이지나 화면 수준에서 끝나며, 점진적으로 결합해가는 상향적(bottom up) 방식으로 UI를 구축하는 과정을 말합니다. 지난 몇년 동안 Airbnb, IBM, Hubspot과 같은 회사에서 이와 같은 접근법으로 개발 프로세스를 크게 가속화하고 개발자와 디자이너의 커뮤니케이션을 개선하며 지속적으로 높은 수준의 제품 품질을 달성할 수 있었다고 합니다. 컴포넌트란? 상호 교환 가능하고 표준화된 UI 구성 요소입니다. UI조각의 모양, 기능을 캡슐화합니다. CDD의 장점 1. Focus Development: 특정 상태에 집중해서 개발을 할 수 있습..
qwzd에 eslint, prettier 적용하기 피파온라인 전적 검색사이트 https://qwzd.kr/ 에 참여하게되었습니다. 프로젝트에 eslint와 prettier 설정이 되어있지 않아서 이슈를 등록하고 프로젝트에 적용하기로 했습니다. 누군가가 해놓은 프로젝트에 손을 대보는일은 처음이었습니다. eslint init 위 명령어를 통해 초기화를 진행하였고 airbnb 스타일 가이드를 선택했습니다. 그 후 프로젝트를 시작시켰고 엄청나게 많은 lint에러를 확인하였습니다. 이 글을 쓰게된 계기 또한 이 많은 린트에러들을 조금씩 해결해나가는 과정을 기록하고자 쓰게되었구요. 해결한 것들 1. 컴포넌트 파일이름을 JSX로 바꿨습니다. 2. 컴포넌트를 export 로 뺀 경우 export default로 수정하였습니다. 3. react/one-expressio..
[JavaScript] new.target new.target 프로퍼티를 사용하면 함수가 new와 함께 호출되었는지 아닌지를 알 수 있습니다. 일반적인 방법으로 함수를 호출했다면 new.target은 undefined를 반환합니다. 하지만 new 와 함께 호출한 경우에는 new.target은 함수 자체를 반환합니다. new.target은 객체.속성명으로 되어있지만 new는 실제 객체는 아닙니다. MDN에 따르면 new는 가상 문맥이고, new.target속성은 모든 함수가 이용할 수 있는 메타속성이라고 합니다. function User() { alert(new.target); } // 'new' 없이 호출함 User(); // undefined // 'new'를 붙여 호출함 new User(); // function User { ... } 함수 ..
소프트웨어 마에스트로 컨퍼런스 발표 (웹은 어떻게 발전했는가) 소프트웨어 마에스트로에서 진행하는 컨퍼런스에 참가했고 나는 발표자로 신청을 해서 '웹은 어떻게 발전했는가'라는 주제로 발표를 하게 되었다. 나는 이왕 컨퍼런스 갈꺼면 내가 발표하면 좋을 것 같다는 생각을 했었고 바로 지원했다. 발표준비를 하면서 좋았던거는 같은 내용을 다르게 설명한 블로그 글들을 정말 많이 읽다가 보니 발표를 위해 공부한 내용은 잊지 못할 것 같다. 발표는 크게 웹의 역사 -> 브라우저의 구성 -> 렌더링과정 순으로 구성해서 진행했다. 우선 서울에 도착해서 친구랑 점심을 먹고 2시에 컨퍼런스하는 곳으로 이동했다. 나는 첫번째로 발표를 진행했다. 확실히 대학교에서 친구들 몇명 앞에서 말하는것과 다르게 대략 100명 가량의 사람들 앞에서 말해보니까 떨렸다. 100명의 눈동자가 나를 보고 집중..
139. Word Break 두가지 컨셉으로 접근할 수 있다. 첫째. BFS 인덱스 0부터 시작해서 특정 단어의 마지막 인덱스보다 1큰값을 큐에 넣어주면서 bfs진행 const wordBreak = function(s, wordDict) { const set = new Set(wordDict); const visited = new Set() const q = [0] while (q.length) { const start = q.shift() if (!visited.has(start)) { for (let end = start + 1; end { if (wordDict == null || wordDict.length === 0) return false; const set = new Set(wordDict); const dp = Arr..
[2021 KAKAO BLIND RECURITMENT] 메뉴 리뉴얼 코스개수를 순회하면서 주문할 수 있는 개수에 따른 combination을 만들어주고 가장 많이 나온 아이를 answer에 넣어주는 방법. from itertools import combinations from collections import Counter def solution(orders, course): answer = [] for c in course: temp = [] for order in orders: combi = combinations(sorted(order), c) temp += combi counter = Counter(temp) if len(counter) != 0 and max(counter.values()) != 1: answer += [''.join(f) for ..
15591. Mootube 처음에 MST인가? 라는 생각을 가졌는데 결국 이문제는 탐색을 해야하는 문제이다. 주어진 노드 관점에서 bfs를 진행해야 유사도를 측정해서 개수를 셀 수 있다. 유사도라는 것을 모든 연결들의 유사도중의 최솟값으로 정했으므로 노드와 노드사이의 거리가 k보다 작다면 방문자체를 할 필요가 없다. import sys from collections import deque input = sys.stdin.readline INF = int(1e9) def bfs(start, k): global graph visited = [False] * (N+1) q = deque() q.append(start) count = 0 while q: now = q.popleft() visited[now] = True for n_n, ..
54. Spiral Matrix 유명한 돌아가는 문제이다. (소용돌이 문제 같은 느낌) 이문제는 단순하게 노동하는 방법도 존재하지만 엄청 이쁜 풀이도 존재한다. 우선 이쁜 풀이를 보자. const spiralOrder = function(matrix) { const res = [] while(matrix.length){ const first = matrix.shift() res.push(...first) for(const m of matrix){ let val = m.pop() if(val) res.push(val) m.reverse() } matrix.reverse() } return res };첫라인은 그대로 출력하고 배열에서 없앤다. 두번째 라인부터 마지막 라인까지 마지막꺼 출력하고 뒤집어 놓는다. 그다음에 전체 매트릭스를 뒤집는..

티스토리툴바