오늘 한 일

퍼블리싱 외주 완료

오늘은 업체에 찾아가서 마지막 마무리 작업을 했다. 내 마크업에 기존 개발중인 기능을 적용해야 하는데, UI가 수정되기도 해서 추가 작업을 했다. 수정요청이 좀 많아서 6시까지 완료할 수 있을까 조금 걱정했는데, 업체 개발자와 협의해서 먼저 개발해야하는 기능부터 수정해서 넘겨주는 식으로 작업을 진행해서 다행히 시간내에 완료할 수 있었다. 디자인도 외주를 맡긴 상황이라 기획이나 디자인이 빠르게 넘어오지 않은 상태에서 말로만 이 부분이 변경이 있다라는 식으로 전달 받을때는 당황스러웠는데, 손그림으로라도 그려서 주셨으면 좋겠다고 하니 AdobeXD로 빠르게 수정된 디자인을 받았다. 디자인하는 것을 옆에서 구경했는데, AdobeXD에서 아이콘을 리스트에 동일하게 추가하는데 스크롤만 내리니 아이콘이 간격대로 생성이 되었다. 포토샵은 어느정도 기본만 할 수 있는 수준이고, 이미지 내보내는 부분 정도만 액션을 추가한다든지 하는 식으로 활용하고 있어서 포토샵에도 그런 기능이 있는지는 모르겠지만 굉장히 신기했다.(업무 효율 올라가는 소리가…)
굉장히 신기해서 찾아봤는데, 반복 그리드라는 작업이었다.
오늘 업체 개발자와 커뮤니티를 하면서 느낀게 상대의 말이 이해가 안되면 많이 물어봐야하고, 상대방이 알아듣기 쉽도록 설명해야 된다는 거였다. 아무리 개발 용어라도, 어떤 의도에서 썼는지는 본인만 알 수 있었다. 그리고 나와 대화하는 사람이 이정도는 알고있을 것이다라는 예측은 하면 안된다는 것.
그리고 동적으로 리스트를 생성하기를 원하셨고, 그부분에서 CSS가 안 먹기 때문에 CSS를 인라인으로 넣겠다고 하셔서 이부분에 대한 커뮤니케이션이 좀 어려웠는데, 결론은 내가 개발자님이 말씀하시는 데이터 형태에 맞춰 리스트가 동적으로 생성되는 코드를 짜보기로 했고, 마크업 개발 외주여서 이것까지 하게 될 줄은 몰랐지만 재미있는 작업이었다.
개발자님이 말씀하신 배열이 어떤 구조인지 여쭤보고, for문 안에서 리스트 아이템에 데이터를 넣고 생성되도록 했는데, for문을 두번 돌리기 전에 filter 메소드를 통해 두번째 배열의 아이템이 첫번째 배열의 정보를 가지고 있는지를 먼저 체크하도록 해서 다음 for문을 돌릴때 대상에 두번째 배열에서 필터링 된 배열 정보를 넘겨줬다. 그래서 for문을 좀 더 덜 돌 수 있게 되었다.

오늘 한 일

Sass 스터디

Sass는 계속 쓰고 있었지만, 스터디를 준비하면서 다시 공부했다. Dart Sass가 나온 배경이라든지 Sass blog에 올라온 글도 읽어보고 처음부터 시작한다 생각하고 Sass를 사용하기 위한 환경 설정도 다시 해보니, 다른 방법이 있거나 제대로 모르고 있던 부분도 알 수 있었다.
특히 설치에서 애를 먹었는데, 내가 현재 사용하고 있는 node 버전은 8이었고, Sass는 아직 node 8버전에서 공식적으로 지원되는 것이 아니어서 발생한 문제였다. 그래서 nvm을 통해 설치된 node 버전 중 6.10.0으로 변경하니 발생했던 오류가 사라졌다.
가볍게 쓰려고 사용하고 있던 VSCode 익스텐션인 Live Sass Compiler는 생각보다 훨씬 좋았다. Autoprefix를 같이 쓰려고 gulp-sass 사용할 때 설치하고 설정해주고 했었는데, Live Sass Compiler는 이를 지원한다.
다른 사람에게 설명해주기 위한 준비과정 자체가 많은 도움이 되는 것 같다. 내가 무엇을 알고, 무엇을 모르고 있는지가 좀 더 명확해진다. 오늘 Sass 문법까지 다루고 싶었는데, 환경 설정하면서 package.json부터 설명을 해야 되어서 생각보다 시간이 훌쩍 지나가버렸다. 대충 Sass를 사용하면 어떤 점이 좋을지 왜 Sass를 사용하는지 위주로 대화를 했고, 문법 관련해서는 생소한 &같은 부모참조 선택자나 Sass와 SCSS의 차이, BEM 방법론을 사용할 때 Sass 활용 방법 (중첩이나 부모참조 선택자)위주로 설명했다.
함수나 리스트, 맵과 반복문을 사용해 어떤 것을 할 수 있을지 등도 보여주고 싶었는데, 시간이 부족해서 아쉬웠다.
Sass는 내가 스크립트 언어를 익히는데 많은 도움을 준 언어라 굉장히 애착이 간다. 그리고 그걸 오늘 다시 공부해보면서 느꼈다. CSS로는 할 수 없는 정말 멋진 기능이 많은데 오늘 다 못해서 아쉽고, 나중에 또 시간을 내야겠다.

오늘 한 일

TIL 레포지토리 정리

깃헙의 TIL 레포지토리의 구조를 좀 수정했다. 프론트엔드 개발 스쿨과정에서 WEEK_N 디렉토리로 정리했던 파일들은 [FDS]fds-9로 옮겼고, 앞으로 카테고리 별로 공부한 내용을 관리하려 한다.
깃헙의 project를 이용해서 할 일을 관리해보려고 하는데, 풀리퀘 말고 이슈와 커밋을 연결해서 깃헙 이슈에 기록을 남기는 방법을 찾아봤는데, 좀 더 찾아봐야겠지만 커밋으로 이슈를 닫는 기능은 있었다.

• Closing issues using keywords

리덕스 공부

리덕스 문서 원문과 번역본을 같이 보면서 공부하고 있다. 일단 기초 부분을 한번 읽어보면서 따라 치는 식으로 하고 있는데,
에러가 발생해서 확인해봐야 한다.

국비 과정때 같이 공부했던 동기와 스터디를 하기로 했는데, 내일 Sass를 주제로 진행할 예정이다. 최근에 외주하면서도 사용하기는 했는데, 전 회사에서 했던 것처럼 내가 발표하는 형식으로 진행해야 해서 다시 한번 정리해야겠다. 원래는 낮에 리덕스 공부하고 나서 준비하려고 했는데, 생각보다 리덕스 개념이 잘 이해가 안가서 시간을 많이 잡아먹었다. 비록 에러를 아직 해결하지 못했지만, 예제를 통해 기초파트의 한 사이클을 도니까 좀 이해가 되는 것 같다. 내일은 이 에러를 해결하고 심화부분을 보면서 파이널 프로젝트로 했던 SEEMVA를 수정해봐야겠다.

leetcode 문제링크

A self-dividing number is a number that is divisible by every digit it contains.
For example, 128 is a self-dividing number because 128 % 1 == 0, 128 % 2 == 0, and 128 % 8 == 0.
Also, a self-dividing number is not allowed to contain the digit zero.
Given a lower and upper number bound, output a list of every possible self dividing number, including the bounds if possible.

Example 1:

• Input:
• left = 1, right = 22
• Output: [1, 2, 3, 4, 5, 6, 7, 8, 9, 11, 12, 15, 22]
  Note:
• The boundaries of each input argument are 1 <= left <= right <= 10000.

나의 풀이

숫자를 문자열로 만들어 쪼개서 나누어떨어지면 push로 배열에 추가하는 방법

1
2
3
4
5
6
7
8

// 64ms
var selfDividingNumbers = function(left, right) {
    const result = [];
    for (let i = left; i <= right; i++) {
        if(i.toString().split('').every(item => i % parseInt(item) === 0)) result.push(i);
    }
    return result
};

그런데 0이 포함되면 self-dividing number가 아니므로 이렇게 추가해줘도 될 것 같다.

1
2
3
4
5
6
7
8

/// 68ms
var selfDividingNumbers = function(left, right) {
    const result = [];
    for (let i = left; i <= right; i++) {
        if(i % 10 !== 0 && i.toString().split('').every(item => i % parseInt(item) === 0)) result.push(i);
    }
    return result
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

var selfDividingNumbers = function(left, right) {
    const result = [];
    for (let i = left; i <= right; i++) {
        const numbers = i.toString().split('');
        let divide = true;
        for (const n of numbers) {
            if (i % n !== 0) {
                divide = false;
                break;
            }
        }
        if(divide) result.push(i)
    }
    return result
};

오늘 한 일

퍼블리싱 외주 완료

작업 기한은 27일까지이긴 하지만 웹에이전시에서 일할 당시를 생각하면, 개발로 넘어가면 수많은 변수가 생기기 때문에 개발을 붙일 수 있는 시간에 여유를 드려야 할 것 같아서 일찍 완료해 넘겼다. 학원으로 이동 중에 연락이 와서, 이미지가 보이지 않고 이벤트들이 하나도 발생하지 않는다고 확인 요청이 왔다. 별다른 개발 환경세팅이 필요한지 여쭤보시기에 혹시 서버에 올려서 테스트하거나 아니면 라이브 서버를 통해 확인하고 계시냐고 여쭤봤는데, 개발자분이 그렇다고 하시기는 했는데, 그냥 로컬에서 파일을 열어 확인해보셨던 것 같다. 그래서 절대경로로 된 path를 읽지 못하는 거였다. 나는 작업할 때 vscode의 라이브 서버 확장프로그램을 사용해서 이상이 없었지만 상대경로로 다시 수정해서 넘겨드렸다.

모의 면접

학원에서 진행하는 마지막 모의 면접을 봤다. 기술 면접은 아니고 자기소개서를 바탕으로 하는 인성 면접이었는데, 1차로 봤던 모의 면접에 비해 많이 나아진 것 같다. 프론트엔드 개발에 관련된 프로젝트를 해보고 기업조사도 하면서 좀 더 내가 어떤 방향으로 나아가야할 지 목표가 확실해지고, 나 자신에 대해 더 알게 되어서 말할 거리가 많이 생긴 것 같다.

리덕스 복습

외주로 조금 소홀해진 복습에 다시 열중해야겠다. 일단 가장 하고 싶었던 context API로 만든 파이널 프로젝트를 리덕스를 이용해 수정하는 것을 하기 위해 리덕스를 복습하고 있다. 튜토리얼을 따라서 하는데, 특강때 했던 내용이 하나씩 다시 생각나고 있다.

Git, github 특강

fork한 저장소의 최신 변경사항을 받아오는 방법에 대한 내용이 주였고, 관련해서 실습도 진행되었다.

• git stash에 대해 좀 더 찾아보자.

날이 너무 더워서 많이 이동하는 날은 기력이 쭉 빠진다. 얼른 시원해졌으면 좋겠다.

leetcode 문제링크

In a 2 dimensional array grid, each value grid[i][j] represents the height of a building located there. We are allowed to increase the height of any number of buildings, by any amount (the amounts can be different for different buildings). Height 0 is considered to be a building as well.

At the end, the “skyline” when viewed from all four directions of the grid, i.e. top, bottom, left, and right, must be the same as the skyline of the original grid. A city’s skyline is the outer contour of the rectangles formed by all the buildings when viewed from a distance. See the following example.

What is the maximum total sum that the height of the buildings can be increased?

Example:

• Input: grid = [[3,0,8,4],[2,4,5,7],[9,2,6,3],[0,3,1,0]]
• Output: 35
  Explanation:
• The grid is:

  1 2 3 4

  [ [3, 0, 8, 4], [2, 4, 5, 7], [9, 2, 6, 3], [0, 3, 1, 0] ]

• The skyline viewed from top or bottom is: [9, 4, 8, 7]
• The skyline viewed from left or right is: [8, 7, 9, 3]

The grid after increasing the height of buildings without affecting skylines is:

1 2 3 4

gridNew = [ [8, 4, 8, 7], [7, 4, 7, 7], [9, 4, 8, 7], [3, 3, 3, 3] ]

Notes:

• 1 < grid.length = grid[0].length <= 50.
• All heights grid[i][j] are in the range [0, 100].
• All buildings in grid[i][j] occupy the entire grid cell: that is, they are a 1 x 1 x grid[i][j] rectangular prism.

나의 풀이

배열을 두번이나 탐색해야해서 좋은 방법이 아닌 것 같아서 좀 괴로운데, 가장 단순하게 생각할 수 있는 방법인 것 같다. 먼저, 위/아래의 스카이라인과 좌/우의 스카이라인을 구해두고, reduce메소드를 사용해 다시 배열을 탐색하면서, 해당 좌표의 스카이라인 중 작은 값을 구하고 원래의 값을 뺀 값을 누적으로 더해주는 방법으로 풀어봤다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

// 64 ms
var maxIncreaseKeepingSkyline = function(grid) {
    const upDown = [];
    const side = [];
    for (let i = 0, l = grid.length; i < l; i++) {
        side.push(Math.max(...grid[i]));
        const arr = [];
        for (let j = 0; j < l; j++) {
            arr.push(grid[j][i]);
        }
        upDown.push(Math.max(...arr));
    }
    return grid.reduce((acc, row, index) => {
        return acc + row.reduce((a, col, i) => {
            return a + (Math.min(side[index], upDown[i]) - col); 
        }, 0);
    }, 0)
};

코드 길이는 줄였는데, 더 느려졌다. 6번째 줄에 const cMax = Math.max(...arr.map((item) => item[i])); 이부분이 원인인 것 같다.

1
2
3
4
5
6
7
8
9
10

// 96ms
var maxIncreaseKeepingSkyline = function(grid) {
    return grid.reduce((acc, row, index, arr) => {
        const rMax = Math.max(...row);
        return acc + row.reduce((a, col, i) => {
            const cMax = Math.max(...arr.map((item) => item[i]));
            return a + (Math.min(rMax, cMax) - col)
        }, 0)
    }, 0)
};

오늘 한 일

퍼블리싱 외주(80% 진행)

디자인 시안의 폰트 사이즈가 대부분 10px이하다. 어떤 버튼은 폰트 사이즈가 7px이다. 아이패드에서는 그나마 좀 잘 보이는데, 작업하는 내가 괴로울 정도로 노트북에서는 잘 안보인다.(내가 눈이 나쁜건가…)
쇼핑몰 퍼블리싱할 때 받았던 디자인에서는 대부분 기본적인 폰트 사이즈는 12px 혹은 14px이고 제일 작은 폰트 사이즈가 10px이었다. 그리고 그렇게 해야 가독성이 좋았는데, 아이패드나 브라우저에서 화면을 확대하는 방법이 있기 때문에 그렇게 하는 걸까.

• 웹디자인을 위한 타이포그라피 10가지 팁
• 반응형 웹 디자인에서 글줄의 길이와 글자 크기 균형 잡기
• MDN - font-size-adjust

디자인에 range 슬라이더가 있어서 찾아봤는데 rangeslider.js가 제일 복잡한 기능없이 간단하게 사용하기 좋았다.

• rangeslider.js

디자인 시안을 어떤 파일로 전달해주면 되냐고해서 포토샵이나 일러면 좋을 것 같다고 했더니 보낸 파일이 전혀 레이어가 분할되어 있지 않았다. sketch로 작업했구나 싶어서 차라리 sketch 파일로 보내달라고 했는데, 재플린으로 공유해달랄 걸 그랬나보다. 하지만 덕분에 윈도우에서 sketch파일을 보는 방법을 찾아보다가 .sketch 파일을 지원하는 Windows app인 lunacy라는 걸 찾았다.(무료다!!)
그리고 시안 수정은 또 클라이언트 업체의 상주 디자이너가 하는데(시안 자체는 외주), sketch는 안쓰는지 Adobe XD 파일을 보내줬다.
포토샵으로만 시안 받아서 퍼블리싱 해봤는데 덕분에 이런 저런 툴을 다양하게 사용해보고 있다.

• lunacy
• Adobe XD

알고리즘 문제 풀이

문제가 조금 간단하고 장고걸스 튜토리얼에서 봤던 정도로도 풀 수 있을 것 같아서 파이썬으로도 풀어봤다.
range나 len 함수에 대해 찾다가 파이썬 문법을 공부하는데 도움이 될 것 같은 사이트를 찾았다.

• 점프 투 파이썬

내일까지면 퍼블리싱 외주 작업은 끝날 것 같다. 그러면 다시 파이널 프로젝트에 집중해서 Context API를 썼던 부분을 리덕스로 변경하는 작업에 착수해야겠다.

leetcode 문제링크

Let’s call an array A a mountain if the following properties hold:

A.length >= 3
There exists some 0 < i < A.length - 1 such that A[0] < A[1] < ... A[i-1] < A[i] > A[i+1] > ... > A[A.length - 1]
Given an array that is definitely a mountain, return any i such that A[0] < A[1] < ... A[i-1] < A[i] > A[i+1] > ... > A[A.length - 1].

Example 1:

• Input: [0,1,0]
• Output: 1

Example 2:

• Input: [0,2,1,0]
• Output: 1

Note:

• 3 <= A.length <= 10000
• 0 <= A[i] <= 10^6
• A is a mountain, as defined above.

나의 풀이

JavaScript

배열에서 조건에 일치하는 첫번째 인덱스를 찾아주는 findIndex() 메소드를 사용했다.

1
2
3
4
5
6
7
8

// 56 ms
var peakIndexInMountainArray = function(A) {
    return A.findIndex((item, index, arr) => {
        if(index < arr.length - 1) {
            return item > arr[index + 1];    
        }
    })
};

A 배열은 산이라고 했으니까 Math.max의 인덱스를 구하는 방법을 사용했다.

1
2
3
4
5

// 56ms
var peakIndexInMountainArray = function(A) {
    const max = Math.max(...A);
    return A.findIndex(item => item === max);
};

근데 위의 방법은 indexOf로 더 짧게 풀 수 있다.

1
2
3
4

// 56ms
var peakIndexInMountainArray = function(A) {
    return A.indexOf(Math.max(...A))
};

Python

문제가 크게 어렵지 않아서 파이썬으로도 풀어봤다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 40ms
class Solution:
    def peakIndexInMountainArray(self, A):
        """
        :type A: List[int]
        :rtype: int
        """
        number = 0
        before = 0
        for i in A:
            if number > 1 and i < before:
                return number - 1
            else:
                number = number + 1
                before = i

다른 사람 풀이

Python

파이썬의 for문은 자바스크립트의 for of처럼 i라는 변수에 리스트의 요소가 대입되니까 인덱스는 어떻게 구하지라고 생각했는데,
다음과 같이 range함수와 len함수를 이용하는 방법이 있었다.

1
2
3
4
5
6
7
8
9

class Solution:
    def peakIndexInMountainArray(self, A):
        """
        :type A: List[int]
        :rtype: int
        """
        for i in range(1, len(A)-1):
            if A[i] > A[i-1] and A[i]> A[i+1]:
                return i

• range(): 숫자 리스트를 자동으로 만들어 주는 함수
• len(): 리스트 내 요소의 개수를 돌려주는 함수

1. 퍼블리싱 외주와 커뮤니케이션

지난주 학원에서 3일간 진행했던 해커톤에서의 만남을 계기로 한 사이트의 퍼블리싱을 맡게 되었다. 남은 공부와 구직(기업조사라든지, 포트폴리오 사이트라든지)에 전념해야 할 것 같아서 고민이 되었는데, 사이트 업종 자체가 내가 흥미를 느끼고 있던 분야의 것이고, 다른 사람의 디자인을 그대로 구현해보는 것은 오랜만이라 흥미가 생겨서 계약하게 되었다.
업체 대표님의 신뢰는 중개하는 분에 대한 신뢰인 것 같기도 하고 해커톤 산출물만으로 괜찮다고 생각했던 건지, 별다른 포트폴리오를 보여달라고 하지 않아서 조금 당황스러웠다. 그래도 상주해서 하는 작업이 아니라서 그런지 조금 우려는 하시는 것 같아서 작업 기간 동안 영업 종료시간(6시)에 작업 현황을 보내드리고 있다.

웹에이전시에서 일할 당시에는 직접 클라이언트와 커뮤니케이션 할 일이 없었고, 직원끼리는(다른 팀이더라도) 조금 전문적인 용어를 써도 어느 정도 이해할 수 있는 범위여서 커뮤니케이션에 지장이 없었는데, 이번에 직접 업체 대표님과 대화를 해보니 나로서는 크게 어려운 말이 아니었다고 생각했어도 상대방에게는 어렵게 느껴진다는 걸 알았다. (조금이라도 웹 개발 쪽 언어라면 그게 ‘HTML, CSS’ 혹은 ‘퍼블리싱’이더라도 개발자가 아닌 이상은 듣는 입장에서 식은땀을 흘리게 되더라…)
첫 미팅은 월요일이었는데, 화요일에 학원에서 진행했던 특강에서 정원희 개발자님이 하신 말씀이 그다음 커뮤니케이션에 많은 도움이 되었다. 정원희 개발자님이 하신 말씀 중에 커뮤니케이션을 할 때 서버라는 용어조차 모르는 사람도 있으므로 전문적인 용어를 쓰지 않고 모두 쉬운 말로 풀어서 한다고 하셨다. 생각해보니 상대방이 어떤 사람이냐에 상관없이 전문적인 용어를 마구 써서 대화를 풀어나가려는 사람은 실질적으로 내재한 지식의 총량이 어느 정도이건 간에 커뮤니케이션 면에서는 이기적이고 무능한 사람인 것 같다. 그리고 사실 어려운 것을 쉽게 풀어 설명하는 게 더 어려운 일이다.
특강을 듣고나니 과연 나는 상대방을 배려한 대화를 했었는지 반성하게 되었다.

2. 정원희 개발자님 특강

화요일(7월 17일), 패스트캠퍼스에서 진행한 정원희 개발자님 특강을 들었다. (정원희 개발자님은 트레바리의 CTO이자 개발자로 일하고 계신다.)
‘왜 스타트업 개발자가 되었는 지’와 ‘스타트업에서 살아남는(사랑받는) 개발자가 되기 위해 무엇을 했는지’에 대해서 강의를 해주셨다.
중소기업이며, 설립한 지 10년도 넘은 웹에이전시에서만 일해봐서, 자사 서비스를 제공하는 스타트업을 도전하고 싶었는데, 내가 스타트업을 가려고 한다면 어떤 고민을 해야할 지 알 수 있는 강의였다.
정원희 개발자님이 욕심에 비해 의지가 약한 사람이기 때문에 강제로 개발하는 환경에 본인을 던지기 위해 최적인 곳으로 회사를 선택하셨다는데, 그 부분이 많이 공감이 되었고, 취업을 해야할지 부족한 나를 채우는 시간을 가져야할지 어느 것이 더 좋은 선택인지 고민하고 있는 내게 방향을 제시해주었다.
실패 후 다시 도전은 또 다른 가산점이라는 말씀도 많이 도움이 되었다. 구직을 하려다보면 자격요건에 요구되는 다양한 경험과 경력 사항들이 있다. 이것을 다 채우고 완벽한 지원자가 되려면 나에게 취업은 요원한 일이 될 것이다. 당장 모든 것이 완벽하지 않더라도 어느 정도 준비가 되어있다면 부딪치면서 채워나가야 될 것 같다. 그 부딪치는 과정에서도 나는 많은 것을 배울 수 있을 것이다.

3. 장고걸스 워크샵

장고걸스 워크샵 후기는 나중에 또 시간을 들여 작성을 하려한다. 새로운 것을 배우는 것, 경험해보는 것은 즐거운 일이다. 굉장히 유익한 경험이 었고, 단순히 ‘장고라는 파이썬 기반 웹 프레임워크를 경험해 본다’ 이상의 경험이었다.
장고걸스 워크샵을 신청한 계기는 ‘잘 만들어진 튜토리얼을 제공한다해도 누구의 도움도 없이 생소한 언어와 생소한 기술을 사용해 보는 것은 굉장히 오랜 시간이 걸릴 수 있으니 워크샵을 통해 코치들의 도움을 받아 한 사이클을 빠르게 경험해보자’였다.
프론트엔드 개발 스쿨 전에 이 튜토리얼에 도전해보려 했는데, 마치 ‘이정도는 다 아시죠?’라는 느낌을 받았고, 모르는 것을 일일이 찾아보다보니 엄청난 시간이 소요되었다. 나는 어떠한 거대한 장벽을 바라보는 느낌이었다.
장고걸스 워크샵에서는 어떠한 바보같은 질문도 허용된다는 점이 가장 좋았다. 왜냐하면 초보 여성 개발자 혹은 개발에 입문하려는 여성들을 위한 모임이니까!
워크샵 동안 튜토리얼을 따라가는 데는 처음에 봤을때보다 큰 어려움이 없었다. 아마도 프론트엔드 개발 스쿨을 통해 개발에 대해 더 아는 것이 생겼기 때문이기도 할 거고, 가장 어려운 개발 환경 설정의 대부분이 이미 되어있었기 때문일 것이다.(git이라든지 에디터라든지) 블로그 만들기는 생각보다 수월하게 진행되었지만 가상환경이라거나, 파이썬 문법, 장고의 기능 같은 점을 코치님(이재열 개발자님)께 많이 질문했던 것 같다. 코치님도 어려운 부분을 쉽게 설명해주시려 고심해서 말을 골라가며 친절히 설명해주셨다.
밋업 같은 것은 아직 아는 사람이 없고, 개발 경험이 많지 않아서 과연 잘 어울릴 수 있을까 부담스러워서 도전하지 못하고 있는데, 그런면에서 장고걸스 워크샵은 입문자가 가장 접근하기 좋은 개발 커뮤니티인 것 같다.
프론트엔드 개발과 함께 파이썬, 장고도 꾸준히 공부해서 다음에는 코치로 참여하는 것을 목표로 해야겠다.

이번주에 일일 회고를 제대로 하지 못했다. 지금 목표는 일일 회고 / 일일 알고리즘 문제 풀이 / 일일 커밋이다. 어려운 일이 아닌 것 같은데도 온전히 내가 만들어서 하는 일만 있는 게 아닌 경우는(외주를 맡거나 회사를 다니게 되면) 또 쉽지만은 않은 일이 되어버리는 것 같다.
제일 중요한 것은 결과가 나만의 책임이 아닌 일에 집중하는 것이지만, 그 사이에서도 시간 관리를 잘해서 내 개인적인 목표도 성취할 수 있도록 조율해야 겠다.

leetcode 문제링크

International Morse Code defines a standard encoding where each letter is mapped to a series of dots and dashes, as follows: “a” maps to “.-“, “b” maps to “-…”, “c” maps to “-.-.”, and so on.

For convenience, the full table for the 26 letters of the English alphabet is given below:

[".-","-...","-.-.","-..",".","..-.","--.","....","..",".---","-.-",".-..","--","-.","---",".--.","--.-",".-.","...","-","..-","...-",".--","-..-","-.--","--.."]

Now, given a list of words, each word can be written as a concatenation of the Morse code of each letter. For example, “cab” can be written as “-.-.-….-“, (which is the concatenation “-.-.” + “-…” + “.-“). We’ll call such a concatenation, the transformation of a word.

Return the number of different transformations among all words we have.

Example:

• Input: words = [“gin”, “zen”, “gig”, “msg”]
• Output: 2
• Explanation:
• The transformation of each word is:
  “gin” -> “–…-.”
  “zen” -> “–…-.”
  “gig” -> “–…–.”
  “msg” -> “–…–.”

There are 2 different transformations, “–…-.” and “–…–.”.

Note:

• The length of words will be at most 100.
• Each words[i] will have length in range [1, 12].
• words[i] will only consist of lowercase letters.

나의 풀이

유니크한 값을 찾으면 다른 수의 경우도 나올 것 같아서 Set을 이용해보았다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// 64ms
const morse = [".-","-...","-.-.","-..",".","..-.","--.","....","..",".---","-.-",".-..","--","-.","---",".--.","--.-",".-.","...","-","..-","...-",".--","-..-","-.--","--.."];  
const alphabet = 'abcdefghijklmnopqrstuvwxyz';

var uniqueMorseRepresentations = function(words) {
    const morseWords = new Set();
    for (const word of words) {
        let newStr = '';
        for(const i of word) {
            newStr += morse[alphabet.indexOf(i)];
        }
        morseWords.add(newStr)
    }
    return morseWords.size;
};