본문 바로가기

스터디/웹개발

2022년09월13일 TIL - 포트폴리오, 워킹플로우, 피그마, 자바스크립트

220913 포트폴리오, 워킹플로우, 달러, 피그마, 자바스크립트

PM의 포트폴리오

나의 오해

  1. 무엇을 할 수 있는지 어필하기 위해 직접 작성한 작업물을 보여줘야 한다.
  2. 이력서와 포트폴리오의 다른 점은 이미지 활용이니, 이미지로 자신의 프로젝트를 보여줘야 한다.
  3. 내가 한 프로젝트를 정략적 성과로 표현함으로써 나의 역량을 설명해야 한다.

이것은 핵심이 아니다. 단순히 경험을 작업물이나 이미지로 나열하는 것 이상의 플러스가 있어야한다.

포트폴리오는

포트폴리오는 일기장이나 기록 노트가 아니다. 대상과 목적이 있는 문서로, 담당자와 면접관을 ‘간접적으로 설득하는 장치다.

채용 담당자와 면접관이 지원자의 포트폴리오에서 알고 싶어 하는 것은?

  • 포지션 적합도 : 채용하는 포지션에 잘 맞는지
    1. 직무(업무) 적합도 : 해당 포지션의 환경에서 업무적으로 기대하는 성과를 내며 직무를 수행할 수 있는지
    2. 역량 적합도 : 업무 역량 및 업무 외 포지션 특성상 요구되는 역량을 갖췄는지
  • 조직 적합도 : 회사와 채용 팀에 잘 맞는지
    1. 문화 적합도 : 회사의 비전/미션에 공감하는지, 회사 문화/인재상/일하는 방법 등이 잘 어우러지는지
    2. 팀 적합도 : 팀의 역할과 프로덕트의 비전에 공감하는지, 업무 성향이 팀의 특징 및 팀이 일하는 방식과 어우러지는지
    3. 성장성 : 성장 방법 및 성장 방향, 성장 가능성은 어떤지, 조직과 함께 발전할 수 있는 사람인지

포인트

  1. 프로젝트 및 그 외 다양한 경험으로 증명하는, 내가 무엇을 할 수 있는 사람인지
  2. 지원한 포지션에서 일할 수 있는지
  3. 자신만의 커리어 방향성이 있는지

업무 경험 소개

집중

  1. 역량•커리어가 잘 드러나는 구조 선택하기
  2. 문제 해결 관점으로 프로젝트 소개하기
  3. 역량•성과가 드러나는 방법 활용하기

주의

  1. 담당 범위나 기여도를 적을때
  2. 업무의 담당 범위나 기여도를 %로 적는 것은 의미가 없다. 프로젝트와 시작과 끝이 주관적이기 때문이다
  3. 프로젝트 성과를 숫자로 소개할 때
  4. 전체 성과보다는 자신의 기여분을 소개하는 것이 더 중요하다.

정리

  • 내가 무엇을 할 수 있는 사람인지
  • 지원한 포지션에서 일을 잘 해낼수 있는지
  • 나만의 커리어 방향성은 무엇인지

원문:

https://publy.co/content/6869?s=9n0qgl

워킹플로우

워크플로우 러닝은 학습자가 언제 어디서나 접근 가능한 자원을 바탕으로, 구성원이 알아서 학습하고 성과를 내는 학습을 말한다.

전통적 교육 훈련과의 차이점

워크플로우 러닝은 개인이 스스로 책임을 지는 자기주도형 학습이다. 정해진 학습 목표가 없고, 학습자에게 최대한 많은 자유가 보장된다.

업무와의 유기적인 연결도 워크플로우 러닝의 특징이다. 업무 수행중에도 학습이 가능하고, 공간의 제약도 없다.

방법론

빠른 학습 속도가 중요하다. 사내 KMS와 EPSS, 유튜브, 구글, 줌, 패들릿, 카카오톨 등 다양한 채널을 활용할 수 있다.

같은 맥락에서 ‘마이크로 러닝' 역시 화두다. 1~2가지 개념을 2~7분 정도의 짧은 시간 내 소화 가능한 콘텐츠 학습을 말한다. 음성, 비디오, 텍스트, PDF 등 모두 포괄된다.

702010 이론

학습법을 ‘비형식, 무형식, 형식' 으로 구분할 때, 각 방식에서 이뤄지는 비율이 70:20:10 이라는 것이다. 연수에 참여하는 방식의 ‘형식적' 교육 훈련에서 10%의 성장을 이룬다면, 현장에서 선배로부터 배울 수 있는 ‘무형식’의 코칭으로 이루는 성장은 20%, 그리고 다양항 업무 경험 등을 통한 ‘비형식’ 학습을 통해 사람들은 70% 성장을 이뤄낸다.

이 비율대로라면 대부분의 업무 성장은 현장에서 발생한다. 결국 일을 경험하면서 동시에 학습하는 워크플로우 러닝이 매우 효과적인 학습법이라는걸 알 수 있는 부분이기도 하다.

원문:

https://now.rememberapp.co.kr/2022/09/12/21734/?channel=now_shared_link&referer=88c1a772-38a9-4907-9b14-0d0a879ead0a&_branch_match_id=1074380912524543940&_branch_referrer=H4sIAAAAAAAAA8soKSkottLXTywo0CvKTSrSy8zT90tOy%2FNJNjBLL0kCAGmhVGwfAAAA

달러 시대

달러 가치가 20년 만 최고 수준이다.

‘포스트 달러’ 시대가 도래할거라는 이야기가 나오고 있다.

  1. 너무 길게 지속되는 달러 인덱스 상승세
  2. 침체 시작된 미국
  • 달러 인덱스 : 주요 6개국 통화 대비 달러 가치를 나타내는 지표 1973년 3월 달러 가치를 100 기준으로 삼고 오르내림을 평가한다.

의견

  • 달러 실질 구매력은 지난 7월 기준으로 다른 통화 대비 30% 과대평가 되어 있었다. 달러 외 주요 통화 모두 강세 요인이 나타나고 있다.
  • 미국은 내년 초 쯤 금리 인상 기조를 멈추고 그 수준을 어느 정도 유지할 것이다. 반면 ECB는 향후 금리를 보다 올릴 가능성이 높다. 그럼 미국과 유로 지역의 금리차가 줄어들면서 달러는 자연히 약세로 바뀔 수 있다.

부동산 스타트업

부동산 중개 플랫폼들의 수익은 대부분 공인중개사의 광고비에 의존하는데, 부동산 한파에 문을 닫거나 광고비를 줄이려는 중개사무소가 급증하고 있다.

실제 플랫폼 업체들의 작년 영업 이익은 적자로 전환했다. 상황 타개를 위해 프롭테크를 통한 수익 다변화를 모색중이다.

직방: 원격 근무를 위한 가상오피스 ‘소마’

다방의 스테이션3 : 비대면 계약 서비스 ‘다방싸인’

  • 프롭테크: 부동산(Property)과 기술(Technology)의 합성어. 빅데이터, 인공지능, 가상현실(VR) 등 기술을 활용해 매물 정보를 제공하고 거래를 중개하는 서비스

https://app.rmbr.in/9SNXhKE7gtb

피그마 맥 한글오류 자음 모음 분리 현상

회사에서 업무용으로 Mac mini 를 사용하고 있다. 2020년형 M1 맥 미니 이다.

한글을 쓸 때 자음 모음이 분리되어 작성되는 오류가 발생

  1. 맥북 키보드 설정 변경

맥북 시스템 환결 설정 → 키보드 메뉴로 들어간다.

텍스트 항목으로

맞춤법: 한국어 로 설정

맞춤법 자동 수정, 자동으로 문장을 대문자로 시작, 스페이스를 두 번 눌러 마침표 추가, 스마트 인용 부호 및 대시 사용 체크 해제

피그마를 다시 실행하면 해결 되었다.

자바스크립트

문자열 기본(따옴표, 백틱, typeof, excape)

typeof ‘문자열’

→ “string”

‘’ 아무것도 없는 문자열 ‘ ‘ 공백을 채운 문자열도 문자열이다.

따옴표를 문자로 쓰고싶다면, “” ‘’ 을 서로 상반되게 감싸주자, 혹은 `` 백틱으로 감싸면 된다.

\ 역슬래시 뒤에 붙여도 된다. \’ → ‘

문자열 합치기(연산자)

1 + 2

→ 3

‘바나나' + ‘사과’

→ ‘바나나사과’

숫자 기본(parseInt, NaN)

숫자는 따옴표 안쓰고 그냥 쓴다.

큰숫자 표현할때 50000을 5e4 처럼 쓸수도 있다. 0.0005 는 5e-4

2진법 등도 가능. 0b111 : 이진법 111, 0111 또는 0o111 : 8진법 111, ox1a1 : 0x 는 16진법

typeof 0x1a1

→ “number”

NaN : Not a Number 라는 뜻이지만 typeof NaN 을 해보면 number 라고 뜬다.

숫자가 아니다를 뜻을 가지고 있는 숫자 형식의 메시지라고 보면 된다.

‘asdf’ : 문자열

124 : 숫자

‘123’ : 문자열

‘124’ + 5

→ “1245”

문자열 ‘124’ 와 숫자 5를 더해서 129를 나오게 하고 싶다면, 문자열 ‘124’ 를 숫자로 변환시킨다음 더해줘야한다.

문자를 숫자로 바꾸는 방법은: parseInt(’124’) 또는 Number(’124’)

Number(’124’) + 5

처음에는 감을 믿지말고 typeof 로 항상 확인해보면서 작업하기. typeof parseInt(’124’)

→ “number”

parseInt : 정수로 바꾼다. 해석 가능한 범위내에서 최대한 해석한다.

parseFloat : 소수로 바꾼다.

Number : 정수로도 소수로도 바꾼다. 하지만 숫자가 아니면 NaN

parseInt(’3월')

→ 3

Number(’3월')

→ NaN

같아보이지만 완전히 같은 두가지 방법을 계속 쓰지는 않는다.

‘123123’.substr(0, 2)

→ “12”

‘123123’.substring(0, 2)

→ “12”

대부분의 경우 이름이 다르면 다른 역할을 한다.

typeof parseInt(prompt());

prompt : 입력창을 띄운다. 문자열을 입력하도록 하기 때문에, 숫자를 넣어도 문자열로 리턴된다.

입력값을 정수로 바꾼다음 타입을 확인함.

parseInt(111, 10); 111을 10진법으로 해석한다. 10진법은 기본이므로 안적어줘도 됨.

parseInt(111, 2); 111을 2진법으로 해석한다.

산술 연산자

더하기 : 1 + 2;

→ 3

빼기 : 6 - 10;

→ -4

곱하기 : 3 * 4;

→ 12

나누기 : 6 / 4;

→ 1.5

나머지 연산자 %, 거듭제곱 연산자 **

무한 값 알아보기

2 / 0;

→ Infinity

Infinity - Infinity

→ NaN

0 / 0

→ NaN

문자와 숫자 더하기

‘문자열' + 0

→ “문자열 0”

자료형이 다른 데이터를 더하면 자료형이 하나로 변한다. 형 변환(type casting) 이라고 한다. 문자열과 숫자를 더하면 숫자인쪽이 문자열로 변한다.

‘문자열' - 0;

→ NaN

숫자가 아닌 데이터가 숫자로 바뀐다. Number(’문자열') 이 적용된 다음 계산된다고 볼 수 있다.

연산자 우선순위, 소수 계산 주의점

연산자 우선순위 파악하기

모르겠으면 괄호를 씌워서 우선순위를 인위적으로 높여주기. () 우선순위가 가장 높다.

실수 계산시 주의할 점

  • 0.1 + 0.2
    • 0.30000000000004
    컴퓨터 부동소수점 계산 문제가 있다. 컴퓨터는 2진법으로 계산하기 때문에 발생.
  • 0.3 - 0.1
    • 0.19999999999998
    가장 간단한 방법은 실수를 정수로 바꿔서 계산한 뒤, 마지막에 다시 실수로 바꾸는 것.
    • (0.3 * 10 - 0.1 * 10) / 10;
      • 0.2

불 값(boolean, 값들의 비교)

1 과 0 은 참 거짓에 대응 된다.

불 값 표현하기

불 값을 표현할 때는 따옴표로 감싸지 않고 true 와 false 를 입력한다.

typeof true;

→ “boolean”

비교 연산자 사용하기

, <, >=, <=, ==, ===, !=

NaN == NaN

→ false

NaN 은 비교연산에서 false 를 출력한다. 단, != 연산에서는 true 를 출력한다.

true > false;

→ true

true 가 1은 아니지만 사실상 1과 비슷하다고 볼 수 있다. false 는 0 이라고 하면 이렇게 비교된다.

‘b’ > ‘a’;

→ true

사전순이라고 볼 수 있다. b가 문자 번호가 더 크다. (b는 98, a는 97)

‘&’.charCodeAt()

→ 65286

문자 번호가 나온다.

‘3’ < 5;

→ true

빼기 연산자처럼 다른 자료형이 숫자로 형 변환된 후 비교된다.

‘abc’ < 5;

→ false

문자열 abc 를 숫자로 바꾸면 NaN 이 되므로, 비교값이 false 가 된다.

==와 === 차이 이해하기

‘1’ == 1;

1 == true;

1 == ‘1’;

→ true

‘1’ === 1;

1 === true;

1 === ‘1’;

→ false

== 은 값만 비교한다. === 은 자료형까지 같은지 비교한다.

1 != ‘1’;

→ false

1 !== ‘1’;

→ true

논리 연산자

10은 5보다 크고 (그리고), 6은 8보다 작다. && 가 ‘그리고' 라는 것을 표현해준다.

  • 10 > 5 && 6 < 8;
  • → true

|| : ‘또는’

  • 10 < 5 || 6 > 8;
  • → false

! : 반대

  • !true;
  • → false

!! : 연달아 두번 반대로, 참인 값이 거짓으로 거짓이 참이 되므로 불값으로 형변환 하는데 이용할 수 있다.

Boolean(’a’); 와 같다.

  • !!’a’;
  • → true
  • !!false
  • !!’’
  • !!0
  • !!NaN
  • → false
  • Boolean 형 변환 했을때 false 되는 7가지
    • false, ‘’(빈문자열), 0, NaN, undefined, null, document.all

undefined 와 null220913 포트폴리오, 워킹플로우, 달러, 피그마, 자바스크립트

PM의 포트폴리오

나의 오해

  1. 무엇을 할 수 있는지 어필하기 위해 직접 작성한 작업물을 보여줘야 한다.
  2. 이력서와 포트폴리오의 다른 점은 이미지 활용이니, 이미지로 자신의 프로젝트를 보여줘야 한다.
  3. 내가 한 프로젝트를 정략적 성과로 표현함으로써 나의 역량을 설명해야 한다.

이것은 핵심이 아니다. 단순히 경험을 작업물이나 이미지로 나열하는 것 이상의 플러스가 있어야한다.

포트폴리오는

포트폴리오는 일기장이나 기록 노트가 아니다. 대상과 목적이 있는 문서로, 담당자와 면접관을 ‘간접적으로 설득하는 장치다.

채용 담당자와 면접관이 지원자의 포트폴리오에서 알고 싶어 하는 것은?

  • 포지션 적합도 : 채용하는 포지션에 잘 맞는지
    1. 직무(업무) 적합도 : 해당 포지션의 환경에서 업무적으로 기대하는 성과를 내며 직무를 수행할 수 있는지
    2. 역량 적합도 : 업무 역량 및 업무 외 포지션 특성상 요구되는 역량을 갖췄는지
  • 조직 적합도 : 회사와 채용 팀에 잘 맞는지
    1. 문화 적합도 : 회사의 비전/미션에 공감하는지, 회사 문화/인재상/일하는 방법 등이 잘 어우러지는지
    2. 팀 적합도 : 팀의 역할과 프로덕트의 비전에 공감하는지, 업무 성향이 팀의 특징 및 팀이 일하는 방식과 어우러지는지
    3. 성장성 : 성장 방법 및 성장 방향, 성장 가능성은 어떤지, 조직과 함께 발전할 수 있는 사람인지

포인트

  1. 프로젝트 및 그 외 다양한 경험으로 증명하는, 내가 무엇을 할 수 있는 사람인지
  2. 지원한 포지션에서 일할 수 있는지
  3. 자신만의 커리어 방향성이 있는지

업무 경험 소개

집중

  1. 역량•커리어가 잘 드러나는 구조 선택하기
  2. 문제 해결 관점으로 프로젝트 소개하기
  3. 역량•성과가 드러나는 방법 활용하기

주의

  1. 담당 범위나 기여도를 적을때
  2. 업무의 담당 범위나 기여도를 %로 적는 것은 의미가 없다. 프로젝트와 시작과 끝이 주관적이기 때문이다
  3. 프로젝트 성과를 숫자로 소개할 때
  4. 전체 성과보다는 자신의 기여분을 소개하는 것이 더 중요하다.

정리

  • 내가 무엇을 할 수 있는 사람인지
  • 지원한 포지션에서 일을 잘 해낼수 있는지
  • 나만의 커리어 방향성은 무엇인지

원문:

PM의 포트폴리오는 무엇이 달라야 할까?

워킹플로우

워크플로우 러닝은 학습자가 언제 어디서나 접근 가능한 자원을 바탕으로, 구성원이 알아서 학습하고 성과를 내는 학습을 말한다.

전통적 교육 훈련과의 차이점

워크플로우 러닝은 개인이 스스로 책임을 지는 자기주도형 학습이다. 정해진 학습 목표가 없고, 학습자에게 최대한 많은 자유가 보장된다.

업무와의 유기적인 연결도 워크플로우 러닝의 특징이다. 업무 수행중에도 학습이 가능하고, 공간의 제약도 없다.

방법론

빠른 학습 속도가 중요하다. 사내 KMS와 EPSS, 유튜브, 구글, 줌, 패들릿, 카카오톨 등 다양한 채널을 활용할 수 있다.

같은 맥락에서 ‘마이크로 러닝' 역시 화두다. 1~2가지 개념을 2~7분 정도의 짧은 시간 내 소화 가능한 콘텐츠 학습을 말한다. 음성, 비디오, 텍스트, PDF 등 모두 포괄된다.

702010 이론

학습법을 ‘비형식, 무형식, 형식' 으로 구분할 때, 각 방식에서 이뤄지는 비율이 70:20:10 이라는 것이다. 연수에 참여하는 방식의 ‘형식적' 교육 훈련에서 10%의 성장을 이룬다면, 현장에서 선배로부터 배울 수 있는 ‘무형식’의 코칭으로 이루는 성장은 20%, 그리고 다양항 업무 경험 등을 통한 ‘비형식’ 학습을 통해 사람들은 70% 성장을 이뤄낸다.

이 비율대로라면 대부분의 업무 성장은 현장에서 발생한다. 결국 일을 경험하면서 동시에 학습하는 워크플로우 러닝이 매우 효과적인 학습법이라는걸 알 수 있는 부분이기도 하다.

원문:

일타쌍피! 일과 학습의 병행 시대

달러 시대

달러 가치가 20년 만 최고 수준이다.

‘포스트 달러’ 시대가 도래할거라는 이야기가 나오고 있다.

  1. 너무 길게 지속되는 달러 인덱스 상승세
  2. 침체 시작된 미국
  • 달러 인덱스 : 주요 6개국 통화 대비 달러 가치를 나타내는 지표 1973년 3월 달러 가치를 100 기준으로 삼고 오르내림을 평가한다.

의견

  • 달러 실질 구매력은 지난 7월 기준으로 다른 통화 대비 30% 과대평가 되어 있었다. 달러 외 주요 통화 모두 강세 요인이 나타나고 있다.
  • 미국은 내년 초 쯤 금리 인상 기조를 멈추고 그 수준을 어느 정도 유지할 것이다. 반면 ECB는 향후 금리를 보다 올릴 가능성이 높다. 그럼 미국과 유로 지역의 금리차가 줄어들면서 달러는 자연히 약세로 바뀔 수 있다.

부동산 스타트업

부동산 중개 플랫폼들의 수익은 대부분 공인중개사의 광고비에 의존하는데, 부동산 한파에 문을 닫거나 광고비를 줄이려는 중개사무소가 급증하고 있다.

실제 플랫폼 업체들의 작년 영업 이익은 적자로 전환했다. 상황 타개를 위해 프롭테크를 통한 수익 다변화를 모색중이다.

직방: 원격 근무를 위한 가상오피스 ‘소마’

다방의 스테이션3 : 비대면 계약 서비스 ‘다방싸인’

  • 프롭테크: 부동산(Property)과 기술(Technology)의 합성어. 빅데이터, 인공지능, 가상현실(VR) 등 기술을 활용해 매물 정보를 제공하고 거래를 중개하는 서비스

달러 시대가 빨리 끝날 수도 있는 이유

피그마 맥 한글오류 자음 모음 분리 현상

회사에서 업무용으로 Mac mini 를 사용하고 있다. 2020년형 M1 맥 미니 이다.

한글을 쓸 때 자음 모음이 분리되어 작성되는 오류가 발생

  1. 맥북 키보드 설정 변경

맥북 시스템 환결 설정 → 키보드 메뉴로 들어간다.

텍스트 항목으로

맞춤법: 한국어 로 설정

맞춤법 자동 수정, 자동으로 문장을 대문자로 시작, 스페이스를 두 번 눌러 마침표 추가, 스마트 인용 부호 및 대시 사용 체크 해제

피그마를 다시 실행하면 해결 되었다.

자바스크립트

문자열 기본(따옴표, 백틱, typeof, excape)

typeof ‘문자열’

→ “string”

‘’ 아무것도 없는 문자열 ‘ ‘ 공백을 채운 문자열도 문자열이다.

따옴표를 문자로 쓰고싶다면, “” ‘’ 을 서로 상반되게 감싸주자, 혹은 `` 백틱으로 감싸면 된다.

\ 역슬래시 뒤에 붙여도 된다. \’ → ‘

문자열 합치기(연산자)

1 + 2

→ 3

‘바나나' + ‘사과’

→ ‘바나나사과’

숫자 기본(parseInt, NaN)

숫자는 따옴표 안쓰고 그냥 쓴다.

큰숫자 표현할때 50000을 5e4 처럼 쓸수도 있다. 0.0005 는 5e-4

2진법 등도 가능. 0b111 : 이진법 111, 0111 또는 0o111 : 8진법 111, ox1a1 : 0x 는 16진법

typeof 0x1a1

→ “number”

NaN : Not a Number 라는 뜻이지만 typeof NaN 을 해보면 number 라고 뜬다.

숫자가 아니다를 뜻을 가지고 있는 숫자 형식의 메시지라고 보면 된다.

‘asdf’ : 문자열

124 : 숫자

‘123’ : 문자열

‘124’ + 5

→ “1245”

문자열 ‘124’ 와 숫자 5를 더해서 129를 나오게 하고 싶다면, 문자열 ‘124’ 를 숫자로 변환시킨다음 더해줘야한다.

문자를 숫자로 바꾸는 방법은: parseInt(’124’) 또는 Number(’124’)

Number(’124’) + 5

처음에는 감을 믿지말고 typeof 로 항상 확인해보면서 작업하기. typeof parseInt(’124’)

→ “number”

parseInt : 정수로 바꾼다. 해석 가능한 범위내에서 최대한 해석한다.

parseFloat : 소수로 바꾼다.

Number : 정수로도 소수로도 바꾼다. 하지만 숫자가 아니면 NaN

parseInt(’3월')

→ 3

Number(’3월')

→ NaN

같아보이지만 완전히 같은 두가지 방법을 계속 쓰지는 않는다.

‘123123’.substr(0, 2)

→ “12”

‘123123’.substring(0, 2)

→ “12”

대부분의 경우 이름이 다르면 다른 역할을 한다.

typeof parseInt(prompt());

prompt : 입력창을 띄운다. 문자열을 입력하도록 하기 때문에, 숫자를 넣어도 문자열로 리턴된다.

입력값을 정수로 바꾼다음 타입을 확인함.

parseInt(111, 10); 111을 10진법으로 해석한다. 10진법은 기본이므로 안적어줘도 됨.

parseInt(111, 2); 111을 2진법으로 해석한다.

산술 연산자

더하기 : 1 + 2;

→ 3

빼기 : 6 - 10;

→ -4

곱하기 : 3 * 4;

→ 12

나누기 : 6 / 4;

→ 1.5

나머지 연산자 %, 거듭제곱 연산자 **

무한 값 알아보기

2 / 0;

→ Infinity

Infinity - Infinity

→ NaN

0 / 0

→ NaN

문자와 숫자 더하기

‘문자열' + 0

→ “문자열 0”

자료형이 다른 데이터를 더하면 자료형이 하나로 변한다. 형 변환(type casting) 이라고 한다. 문자열과 숫자를 더하면 숫자인쪽이 문자열로 변한다.

‘문자열' - 0;

→ NaN

숫자가 아닌 데이터가 숫자로 바뀐다. Number(’문자열') 이 적용된 다음 계산된다고 볼 수 있다.

연산자 우선순위, 소수 계산 주의점

연산자 우선순위 파악하기

모르겠으면 괄호를 씌워서 우선순위를 인위적으로 높여주기. () 우선순위가 가장 높다.

실수 계산시 주의할 점

  • 0.1 + 0.2
    • 0.30000000000004
    컴퓨터 부동소수점 계산 문제가 있다. 컴퓨터는 2진법으로 계산하기 때문에 발생.
  • 0.3 - 0.1
    • 0.19999999999998
    가장 간단한 방법은 실수를 정수로 바꿔서 계산한 뒤, 마지막에 다시 실수로 바꾸는 것.
    • (0.3 * 10 - 0.1 * 10) / 10;
      • 0.2

불 값(boolean, 값들의 비교)

1 과 0 은 참 거짓에 대응 된다.

불 값 표현하기

불 값을 표현할 때는 따옴표로 감싸지 않고 true 와 false 를 입력한다.

typeof true;

→ “boolean”

비교 연산자 사용하기

, <, >=, <=, ==, ===, !=

NaN == NaN

→ false

NaN 은 비교연산에서 false 를 출력한다. 단, != 연산에서는 true 를 출력한다.

true > false;

→ true

true 가 1은 아니지만 사실상 1과 비슷하다고 볼 수 있다. false 는 0 이라고 하면 이렇게 비교된다.

‘b’ > ‘a’;

→ true

사전순이라고 볼 수 있다. b가 문자 번호가 더 크다. (b는 98, a는 97)

‘&’.charCodeAt()

→ 65286

문자 번호가 나온다.

‘3’ < 5;

→ true

빼기 연산자처럼 다른 자료형이 숫자로 형 변환된 후 비교된다.

‘abc’ < 5;

→ false

문자열 abc 를 숫자로 바꾸면 NaN 이 되므로, 비교값이 false 가 된다.

==와 === 차이 이해하기

‘1’ == 1;

1 == true;

1 == ‘1’;

→ true

‘1’ === 1;

1 === true;

1 === ‘1’;

→ false

== 은 값만 비교한다. === 은 자료형까지 같은지 비교한다.

1 != ‘1’;

→ false

1 !== ‘1’;

→ true

논리 연산자

10은 5보다 크고 (그리고), 6은 8보다 작다. && 가 ‘그리고' 라는 것을 표현해준다.

  • 10 > 5 && 6 < 8;
  • → true

|| : ‘또는’

  • 10 < 5 || 6 > 8;
  • → false

! : 반대

  • !true;
  • → false

!! : 연달아 두번 반대로, 참인 값이 거짓으로 거짓이 참이 되므로 불값으로 형변환 하는데 이용할 수 있다.

Boolean(’a’); 와 같다.

  • !!’a’;
  • → true
  • !!false
  • !!’’
  • !!0
  • !!NaN
  • → false
  • Boolean 형 변환 했을때 false 되는 7가지
    • false, ‘’(빈문자열), 0, NaN, undefined, null, document.all

undefined 와 null

PM의 포트폴리오

나의 오해

  1. 무엇을 할 수 있는지 어필하기 위해 직접 작성한 작업물을 보여줘야 한다.
  2. 이력서와 포트폴리오의 다른 점은 이미지 활용이니, 이미지로 자신의 프로젝트를 보여줘야 한다.
  3. 내가 한 프로젝트를 정략적 성과로 표현함으로써 나의 역량을 설명해야 한다.

이것은 핵심이 아니다. 단순히 경험을 작업물이나 이미지로 나열하는 것 이상의 플러스가 있어야한다.

포트폴리오는

포트폴리오는 일기장이나 기록 노트가 아니다. 대상과 목적이 있는 문서로, 담당자와 면접관을 ‘간접적으로 설득하는 장치다.

채용 담당자와 면접관이 지원자의 포트폴리오에서 알고 싶어 하는 것은?

  • 포지션 적합도 : 채용하는 포지션에 잘 맞는지
    1. 직무(업무) 적합도 : 해당 포지션의 환경에서 업무적으로 기대하는 성과를 내며 직무를 수행할 수 있는지
    2. 역량 적합도 : 업무 역량 및 업무 외 포지션 특성상 요구되는 역량을 갖췄는지
  • 조직 적합도 : 회사와 채용 팀에 잘 맞는지
    1. 문화 적합도 : 회사의 비전/미션에 공감하는지, 회사 문화/인재상/일하는 방법 등이 잘 어우러지는지
    2. 팀 적합도 : 팀의 역할과 프로덕트의 비전에 공감하는지, 업무 성향이 팀의 특징 및 팀이 일하는 방식과 어우러지는지
    3. 성장성 : 성장 방법 및 성장 방향, 성장 가능성은 어떤지, 조직과 함께 발전할 수 있는 사람인지

포인트

  1. 프로젝트 및 그 외 다양한 경험으로 증명하는, 내가 무엇을 할 수 있는 사람인지
  2. 지원한 포지션에서 일할 수 있는지
  3. 자신만의 커리어 방향성이 있는지

업무 경험 소개

집중

  1. 역량•커리어가 잘 드러나는 구조 선택하기
  2. 문제 해결 관점으로 프로젝트 소개하기
  3. 역량•성과가 드러나는 방법 활용하기

주의

  1. 담당 범위나 기여도를 적을때
  2. 업무의 담당 범위나 기여도를 %로 적는 것은 의미가 없다. 프로젝트와 시작과 끝이 주관적이기 때문이다
  3. 프로젝트 성과를 숫자로 소개할 때
  4. 전체 성과보다는 자신의 기여분을 소개하는 것이 더 중요하다.

정리

  • 내가 무엇을 할 수 있는 사람인지
  • 지원한 포지션에서 일을 잘 해낼수 있는지
  • 나만의 커리어 방향성은 무엇인지

원문:

PM의 포트폴리오는 무엇이 달라야 할까?

워킹플로우

워크플로우 러닝은 학습자가 언제 어디서나 접근 가능한 자원을 바탕으로, 구성원이 알아서 학습하고 성과를 내는 학습을 말한다.

전통적 교육 훈련과의 차이점

워크플로우 러닝은 개인이 스스로 책임을 지는 자기주도형 학습이다. 정해진 학습 목표가 없고, 학습자에게 최대한 많은 자유가 보장된다.

업무와의 유기적인 연결도 워크플로우 러닝의 특징이다. 업무 수행중에도 학습이 가능하고, 공간의 제약도 없다.

방법론

빠른 학습 속도가 중요하다. 사내 KMS와 EPSS, 유튜브, 구글, 줌, 패들릿, 카카오톨 등 다양한 채널을 활용할 수 있다.

같은 맥락에서 ‘마이크로 러닝' 역시 화두다. 1~2가지 개념을 2~7분 정도의 짧은 시간 내 소화 가능한 콘텐츠 학습을 말한다. 음성, 비디오, 텍스트, PDF 등 모두 포괄된다.

702010 이론

학습법을 ‘비형식, 무형식, 형식' 으로 구분할 때, 각 방식에서 이뤄지는 비율이 70:20:10 이라는 것이다. 연수에 참여하는 방식의 ‘형식적' 교육 훈련에서 10%의 성장을 이룬다면, 현장에서 선배로부터 배울 수 있는 ‘무형식’의 코칭으로 이루는 성장은 20%, 그리고 다양항 업무 경험 등을 통한 ‘비형식’ 학습을 통해 사람들은 70% 성장을 이뤄낸다.

이 비율대로라면 대부분의 업무 성장은 현장에서 발생한다. 결국 일을 경험하면서 동시에 학습하는 워크플로우 러닝이 매우 효과적인 학습법이라는걸 알 수 있는 부분이기도 하다.

원문:

일타쌍피! 일과 학습의 병행 시대

달러 시대

달러 가치가 20년 만 최고 수준이다.

‘포스트 달러’ 시대가 도래할거라는 이야기가 나오고 있다.

  1. 너무 길게 지속되는 달러 인덱스 상승세
  2. 침체 시작된 미국
  • 달러 인덱스 : 주요 6개국 통화 대비 달러 가치를 나타내는 지표 1973년 3월 달러 가치를 100 기준으로 삼고 오르내림을 평가한다.

의견

  • 달러 실질 구매력은 지난 7월 기준으로 다른 통화 대비 30% 과대평가 되어 있었다. 달러 외 주요 통화 모두 강세 요인이 나타나고 있다.
  • 미국은 내년 초 쯤 금리 인상 기조를 멈추고 그 수준을 어느 정도 유지할 것이다. 반면 ECB는 향후 금리를 보다 올릴 가능성이 높다. 그럼 미국과 유로 지역의 금리차가 줄어들면서 달러는 자연히 약세로 바뀔 수 있다.

부동산 스타트업

부동산 중개 플랫폼들의 수익은 대부분 공인중개사의 광고비에 의존하는데, 부동산 한파에 문을 닫거나 광고비를 줄이려는 중개사무소가 급증하고 있다.

실제 플랫폼 업체들의 작년 영업 이익은 적자로 전환했다. 상황 타개를 위해 프롭테크를 통한 수익 다변화를 모색중이다.

직방: 원격 근무를 위한 가상오피스 ‘소마’

다방의 스테이션3 : 비대면 계약 서비스 ‘다방싸인’

  • 프롭테크: 부동산(Property)과 기술(Technology)의 합성어. 빅데이터, 인공지능, 가상현실(VR) 등 기술을 활용해 매물 정보를 제공하고 거래를 중개하는 서비스

달러 시대가 빨리 끝날 수도 있는 이유

피그마 맥 한글오류 자음 모음 분리 현상

회사에서 업무용으로 Mac mini 를 사용하고 있다. 2020년형 M1 맥 미니 이다.

한글을 쓸 때 자음 모음이 분리되어 작성되는 오류가 발생

  1. 맥북 키보드 설정 변경

맥북 시스템 환결 설정 → 키보드 메뉴로 들어간다.

텍스트 항목으로

맞춤법: 한국어 로 설정

맞춤법 자동 수정, 자동으로 문장을 대문자로 시작, 스페이스를 두 번 눌러 마침표 추가, 스마트 인용 부호 및 대시 사용 체크 해제

피그마를 다시 실행하면 해결 되었다.

자바스크립트

문자열 기본(따옴표, 백틱, typeof, excape)

typeof ‘문자열’

→ “string”

‘’ 아무것도 없는 문자열 ‘ ‘ 공백을 채운 문자열도 문자열이다.

따옴표를 문자로 쓰고싶다면, “” ‘’ 을 서로 상반되게 감싸주자, 혹은 `` 백틱으로 감싸면 된다.

\ 역슬래시 뒤에 붙여도 된다. \’ → ‘

문자열 합치기(연산자)

1 + 2

→ 3

‘바나나' + ‘사과’

→ ‘바나나사과’

숫자 기본(parseInt, NaN)

숫자는 따옴표 안쓰고 그냥 쓴다.

큰숫자 표현할때 50000을 5e4 처럼 쓸수도 있다. 0.0005 는 5e-4

2진법 등도 가능. 0b111 : 이진법 111, 0111 또는 0o111 : 8진법 111, ox1a1 : 0x 는 16진법

typeof 0x1a1

→ “number”

NaN : Not a Number 라는 뜻이지만 typeof NaN 을 해보면 number 라고 뜬다.

숫자가 아니다를 뜻을 가지고 있는 숫자 형식의 메시지라고 보면 된다.

‘asdf’ : 문자열

124 : 숫자

‘123’ : 문자열

‘124’ + 5

→ “1245”

문자열 ‘124’ 와 숫자 5를 더해서 129를 나오게 하고 싶다면, 문자열 ‘124’ 를 숫자로 변환시킨다음 더해줘야한다.

문자를 숫자로 바꾸는 방법은: parseInt(’124’) 또는 Number(’124’)

Number(’124’) + 5

처음에는 감을 믿지말고 typeof 로 항상 확인해보면서 작업하기. typeof parseInt(’124’)

→ “number”

parseInt : 정수로 바꾼다. 해석 가능한 범위내에서 최대한 해석한다.

parseFloat : 소수로 바꾼다.

Number : 정수로도 소수로도 바꾼다. 하지만 숫자가 아니면 NaN

parseInt(’3월')

→ 3

Number(’3월')

→ NaN

같아보이지만 완전히 같은 두가지 방법을 계속 쓰지는 않는다.

‘123123’.substr(0, 2)

→ “12”

‘123123’.substring(0, 2)

→ “12”

대부분의 경우 이름이 다르면 다른 역할을 한다.

typeof parseInt(prompt());

prompt : 입력창을 띄운다. 문자열을 입력하도록 하기 때문에, 숫자를 넣어도 문자열로 리턴된다.

입력값을 정수로 바꾼다음 타입을 확인함.

parseInt(111, 10); 111을 10진법으로 해석한다. 10진법은 기본이므로 안적어줘도 됨.

parseInt(111, 2); 111을 2진법으로 해석한다.

산술 연산자

더하기 : 1 + 2;

→ 3

빼기 : 6 - 10;

→ -4

곱하기 : 3 * 4;

→ 12

나누기 : 6 / 4;

→ 1.5

나머지 연산자 %, 거듭제곱 연산자 **

무한 값 알아보기

2 / 0;

→ Infinity

Infinity - Infinity

→ NaN

0 / 0

→ NaN

문자와 숫자 더하기

‘문자열' + 0

→ “문자열 0”

자료형이 다른 데이터를 더하면 자료형이 하나로 변한다. 형 변환(type casting) 이라고 한다. 문자열과 숫자를 더하면 숫자인쪽이 문자열로 변한다.

‘문자열' - 0;

→ NaN

숫자가 아닌 데이터가 숫자로 바뀐다. Number(’문자열') 이 적용된 다음 계산된다고 볼 수 있다.

연산자 우선순위, 소수 계산 주의점

연산자 우선순위 파악하기

모르겠으면 괄호를 씌워서 우선순위를 인위적으로 높여주기. () 우선순위가 가장 높다.

실수 계산시 주의할 점

  • 0.1 + 0.2
    • 0.30000000000004
    컴퓨터 부동소수점 계산 문제가 있다. 컴퓨터는 2진법으로 계산하기 때문에 발생.
  • 0.3 - 0.1
    • 0.19999999999998
    가장 간단한 방법은 실수를 정수로 바꿔서 계산한 뒤, 마지막에 다시 실수로 바꾸는 것.
    • (0.3 * 10 - 0.1 * 10) / 10;
      • 0.2

불 값(boolean, 값들의 비교)

1 과 0 은 참 거짓에 대응 된다.

불 값 표현하기

불 값을 표현할 때는 따옴표로 감싸지 않고 true 와 false 를 입력한다.

typeof true;

→ “boolean”

비교 연산자 사용하기

, <, >=, <=, ==, ===, !=

NaN == NaN

→ false

NaN 은 비교연산에서 false 를 출력한다. 단, != 연산에서는 true 를 출력한다.

true > false;

→ true

true 가 1은 아니지만 사실상 1과 비슷하다고 볼 수 있다. false 는 0 이라고 하면 이렇게 비교된다.

‘b’ > ‘a’;

→ true

사전순이라고 볼 수 있다. b가 문자 번호가 더 크다. (b는 98, a는 97)

‘&’.charCodeAt()

→ 65286

문자 번호가 나온다.

‘3’ < 5;

→ true

빼기 연산자처럼 다른 자료형이 숫자로 형 변환된 후 비교된다.

‘abc’ < 5;

→ false

문자열 abc 를 숫자로 바꾸면 NaN 이 되므로, 비교값이 false 가 된다.

==와 === 차이 이해하기

‘1’ == 1;

1 == true;

1 == ‘1’;

→ true

‘1’ === 1;

1 === true;

1 === ‘1’;

→ false

== 은 값만 비교한다. === 은 자료형까지 같은지 비교한다.

1 != ‘1’;

→ false

1 !== ‘1’;

→ true

논리 연산자

10은 5보다 크고 (그리고), 6은 8보다 작다. && 가 ‘그리고' 라는 것을 표현해준다.

  • 10 > 5 && 6 < 8;
  • → true

|| : ‘또는’

  • 10 < 5 || 6 > 8;
  • → false

! : 반대

  • !true;
  • → false

!! : 연달아 두번 반대로, 참인 값이 거짓으로 거짓이 참이 되므로 불값으로 형변환 하는데 이용할 수 있다.

Boolean(’a’); 와 같다.

  • !!’a’;
  • → true
  • !!false
  • !!’’
  • !!0
  • !!NaN
  • → false
  • Boolean 형 변환 했을때 false 되는 7가지
    • false, ‘’(빈문자열), 0, NaN, undefined, null, document.all

undefined 와 null

PM의 포트폴리오

나의 오해

  1. 무엇을 할 수 있는지 어필하기 위해 직접 작성한 작업물을 보여줘야 한다.
  2. 이력서와 포트폴리오의 다른 점은 이미지 활용이니, 이미지로 자신의 프로젝트를 보여줘야 한다.
  3. 내가 한 프로젝트를 정략적 성과로 표현함으로써 나의 역량을 설명해야 한다.

이것은 핵심이 아니다. 단순히 경험을 작업물이나 이미지로 나열하는 것 이상의 플러스가 있어야한다.

포트폴리오는

포트폴리오는 일기장이나 기록 노트가 아니다. 대상과 목적이 있는 문서로, 담당자와 면접관을 ‘간접적으로 설득하는 장치다.

채용 담당자와 면접관이 지원자의 포트폴리오에서 알고 싶어 하는 것은?

  • 포지션 적합도 : 채용하는 포지션에 잘 맞는지
    1. 직무(업무) 적합도 : 해당 포지션의 환경에서 업무적으로 기대하는 성과를 내며 직무를 수행할 수 있는지
    2. 역량 적합도 : 업무 역량 및 업무 외 포지션 특성상 요구되는 역량을 갖췄는지
  • 조직 적합도 : 회사와 채용 팀에 잘 맞는지
    1. 문화 적합도 : 회사의 비전/미션에 공감하는지, 회사 문화/인재상/일하는 방법 등이 잘 어우러지는지
    2. 팀 적합도 : 팀의 역할과 프로덕트의 비전에 공감하는지, 업무 성향이 팀의 특징 및 팀이 일하는 방식과 어우러지는지
    3. 성장성 : 성장 방법 및 성장 방향, 성장 가능성은 어떤지, 조직과 함께 발전할 수 있는 사람인지

포인트

  1. 프로젝트 및 그 외 다양한 경험으로 증명하는, 내가 무엇을 할 수 있는 사람인지
  2. 지원한 포지션에서 일할 수 있는지
  3. 자신만의 커리어 방향성이 있는지

업무 경험 소개

집중

  1. 역량•커리어가 잘 드러나는 구조 선택하기
  2. 문제 해결 관점으로 프로젝트 소개하기
  3. 역량•성과가 드러나는 방법 활용하기

주의

  1. 담당 범위나 기여도를 적을때
  2. 업무의 담당 범위나 기여도를 %로 적는 것은 의미가 없다. 프로젝트와 시작과 끝이 주관적이기 때문이다
  3. 프로젝트 성과를 숫자로 소개할 때
  4. 전체 성과보다는 자신의 기여분을 소개하는 것이 더 중요하다.

정리

  • 내가 무엇을 할 수 있는 사람인지
  • 지원한 포지션에서 일을 잘 해낼수 있는지
  • 나만의 커리어 방향성은 무엇인지

원문:

PM의 포트폴리오는 무엇이 달라야 할까?

워킹플로우

워크플로우 러닝은 학습자가 언제 어디서나 접근 가능한 자원을 바탕으로, 구성원이 알아서 학습하고 성과를 내는 학습을 말한다.

전통적 교육 훈련과의 차이점

워크플로우 러닝은 개인이 스스로 책임을 지는 자기주도형 학습이다. 정해진 학습 목표가 없고, 학습자에게 최대한 많은 자유가 보장된다.

업무와의 유기적인 연결도 워크플로우 러닝의 특징이다. 업무 수행중에도 학습이 가능하고, 공간의 제약도 없다.

방법론

빠른 학습 속도가 중요하다. 사내 KMS와 EPSS, 유튜브, 구글, 줌, 패들릿, 카카오톨 등 다양한 채널을 활용할 수 있다.

같은 맥락에서 ‘마이크로 러닝' 역시 화두다. 1~2가지 개념을 2~7분 정도의 짧은 시간 내 소화 가능한 콘텐츠 학습을 말한다. 음성, 비디오, 텍스트, PDF 등 모두 포괄된다.

702010 이론

학습법을 ‘비형식, 무형식, 형식' 으로 구분할 때, 각 방식에서 이뤄지는 비율이 70:20:10 이라는 것이다. 연수에 참여하는 방식의 ‘형식적' 교육 훈련에서 10%의 성장을 이룬다면, 현장에서 선배로부터 배울 수 있는 ‘무형식’의 코칭으로 이루는 성장은 20%, 그리고 다양항 업무 경험 등을 통한 ‘비형식’ 학습을 통해 사람들은 70% 성장을 이뤄낸다.

이 비율대로라면 대부분의 업무 성장은 현장에서 발생한다. 결국 일을 경험하면서 동시에 학습하는 워크플로우 러닝이 매우 효과적인 학습법이라는걸 알 수 있는 부분이기도 하다.

원문:

일타쌍피! 일과 학습의 병행 시대

달러 시대

달러 가치가 20년 만 최고 수준이다.

‘포스트 달러’ 시대가 도래할거라는 이야기가 나오고 있다.

  1. 너무 길게 지속되는 달러 인덱스 상승세
  2. 침체 시작된 미국
  • 달러 인덱스 : 주요 6개국 통화 대비 달러 가치를 나타내는 지표 1973년 3월 달러 가치를 100 기준으로 삼고 오르내림을 평가한다.

의견

  • 달러 실질 구매력은 지난 7월 기준으로 다른 통화 대비 30% 과대평가 되어 있었다. 달러 외 주요 통화 모두 강세 요인이 나타나고 있다.
  • 미국은 내년 초 쯤 금리 인상 기조를 멈추고 그 수준을 어느 정도 유지할 것이다. 반면 ECB는 향후 금리를 보다 올릴 가능성이 높다. 그럼 미국과 유로 지역의 금리차가 줄어들면서 달러는 자연히 약세로 바뀔 수 있다.

부동산 스타트업

부동산 중개 플랫폼들의 수익은 대부분 공인중개사의 광고비에 의존하는데, 부동산 한파에 문을 닫거나 광고비를 줄이려는 중개사무소가 급증하고 있다.

실제 플랫폼 업체들의 작년 영업 이익은 적자로 전환했다. 상황 타개를 위해 프롭테크를 통한 수익 다변화를 모색중이다.

직방: 원격 근무를 위한 가상오피스 ‘소마’

다방의 스테이션3 : 비대면 계약 서비스 ‘다방싸인’

  • 프롭테크: 부동산(Property)과 기술(Technology)의 합성어. 빅데이터, 인공지능, 가상현실(VR) 등 기술을 활용해 매물 정보를 제공하고 거래를 중개하는 서비스

달러 시대가 빨리 끝날 수도 있는 이유

피그마 맥 한글오류 자음 모음 분리 현상

회사에서 업무용으로 Mac mini 를 사용하고 있다. 2020년형 M1 맥 미니 이다.

한글을 쓸 때 자음 모음이 분리되어 작성되는 오류가 발생

  1. 맥북 키보드 설정 변경

맥북 시스템 환결 설정 → 키보드 메뉴로 들어간다.

텍스트 항목으로

맞춤법: 한국어 로 설정

맞춤법 자동 수정, 자동으로 문장을 대문자로 시작, 스페이스를 두 번 눌러 마침표 추가, 스마트 인용 부호 및 대시 사용 체크 해제

피그마를 다시 실행하면 해결 되었다.

자바스크립트

문자열 기본(따옴표, 백틱, typeof, excape)

typeof ‘문자열’

→ “string”

‘’ 아무것도 없는 문자열 ‘ ‘ 공백을 채운 문자열도 문자열이다.

따옴표를 문자로 쓰고싶다면, “” ‘’ 을 서로 상반되게 감싸주자, 혹은 `` 백틱으로 감싸면 된다.

\ 역슬래시 뒤에 붙여도 된다. \’ → ‘

문자열 합치기(연산자)

1 + 2

→ 3

‘바나나' + ‘사과’

→ ‘바나나사과’

숫자 기본(parseInt, NaN)

숫자는 따옴표 안쓰고 그냥 쓴다.

큰숫자 표현할때 50000을 5e4 처럼 쓸수도 있다. 0.0005 는 5e-4

2진법 등도 가능. 0b111 : 이진법 111, 0111 또는 0o111 : 8진법 111, ox1a1 : 0x 는 16진법

typeof 0x1a1

→ “number”

NaN : Not a Number 라는 뜻이지만 typeof NaN 을 해보면 number 라고 뜬다.

숫자가 아니다를 뜻을 가지고 있는 숫자 형식의 메시지라고 보면 된다.

‘asdf’ : 문자열

124 : 숫자

‘123’ : 문자열

‘124’ + 5

→ “1245”

문자열 ‘124’ 와 숫자 5를 더해서 129를 나오게 하고 싶다면, 문자열 ‘124’ 를 숫자로 변환시킨다음 더해줘야한다.

문자를 숫자로 바꾸는 방법은: parseInt(’124’) 또는 Number(’124’)

Number(’124’) + 5

처음에는 감을 믿지말고 typeof 로 항상 확인해보면서 작업하기. typeof parseInt(’124’)

→ “number”

parseInt : 정수로 바꾼다. 해석 가능한 범위내에서 최대한 해석한다.

parseFloat : 소수로 바꾼다.

Number : 정수로도 소수로도 바꾼다. 하지만 숫자가 아니면 NaN

parseInt(’3월')

→ 3

Number(’3월')

→ NaN

같아보이지만 완전히 같은 두가지 방법을 계속 쓰지는 않는다.

‘123123’.substr(0, 2)

→ “12”

‘123123’.substring(0, 2)

→ “12”

대부분의 경우 이름이 다르면 다른 역할을 한다.

typeof parseInt(prompt());

prompt : 입력창을 띄운다. 문자열을 입력하도록 하기 때문에, 숫자를 넣어도 문자열로 리턴된다.

입력값을 정수로 바꾼다음 타입을 확인함.

parseInt(111, 10); 111을 10진법으로 해석한다. 10진법은 기본이므로 안적어줘도 됨.

parseInt(111, 2); 111을 2진법으로 해석한다.

산술 연산자

더하기 : 1 + 2;

→ 3

빼기 : 6 - 10;

→ -4

곱하기 : 3 * 4;

→ 12

나누기 : 6 / 4;

→ 1.5

나머지 연산자 %, 거듭제곱 연산자 **

무한 값 알아보기

2 / 0;

→ Infinity

Infinity - Infinity

→ NaN

0 / 0

→ NaN

문자와 숫자 더하기

‘문자열' + 0

→ “문자열 0”

자료형이 다른 데이터를 더하면 자료형이 하나로 변한다. 형 변환(type casting) 이라고 한다. 문자열과 숫자를 더하면 숫자인쪽이 문자열로 변한다.

‘문자열' - 0;

→ NaN

숫자가 아닌 데이터가 숫자로 바뀐다. Number(’문자열') 이 적용된 다음 계산된다고 볼 수 있다.

연산자 우선순위, 소수 계산 주의점

연산자 우선순위 파악하기

모르겠으면 괄호를 씌워서 우선순위를 인위적으로 높여주기. () 우선순위가 가장 높다.

실수 계산시 주의할 점

  • 0.1 + 0.2
    • 0.30000000000004
    컴퓨터 부동소수점 계산 문제가 있다. 컴퓨터는 2진법으로 계산하기 때문에 발생.
  • 0.3 - 0.1
    • 0.19999999999998
    가장 간단한 방법은 실수를 정수로 바꿔서 계산한 뒤, 마지막에 다시 실수로 바꾸는 것.
    • (0.3 * 10 - 0.1 * 10) / 10;
      • 0.2

불 값(boolean, 값들의 비교)

1 과 0 은 참 거짓에 대응 된다.

불 값 표현하기

불 값을 표현할 때는 따옴표로 감싸지 않고 true 와 false 를 입력한다.

typeof true;

→ “boolean”

비교 연산자 사용하기

, <, >=, <=, ==, ===, !=

NaN == NaN

→ false

NaN 은 비교연산에서 false 를 출력한다. 단, != 연산에서는 true 를 출력한다.

true > false;

→ true

true 가 1은 아니지만 사실상 1과 비슷하다고 볼 수 있다. false 는 0 이라고 하면 이렇게 비교된다.

‘b’ > ‘a’;

→ true

사전순이라고 볼 수 있다. b가 문자 번호가 더 크다. (b는 98, a는 97)

‘&’.charCodeAt()

→ 65286

문자 번호가 나온다.

‘3’ < 5;

→ true

빼기 연산자처럼 다른 자료형이 숫자로 형 변환된 후 비교된다.

‘abc’ < 5;

→ false

문자열 abc 를 숫자로 바꾸면 NaN 이 되므로, 비교값이 false 가 된다.

==와 === 차이 이해하기

‘1’ == 1;

1 == true;

1 == ‘1’;

→ true

‘1’ === 1;

1 === true;

1 === ‘1’;

→ false

== 은 값만 비교한다. === 은 자료형까지 같은지 비교한다.

1 != ‘1’;

→ false

1 !== ‘1’;

→ true

논리 연산자

10은 5보다 크고 (그리고), 6은 8보다 작다. && 가 ‘그리고' 라는 것을 표현해준다.

  • 10 > 5 && 6 < 8;
  • → true

|| : ‘또는’

  • 10 < 5 || 6 > 8;
  • → false

! : 반대

  • !true;
  • → false

!! : 연달아 두번 반대로, 참인 값이 거짓으로 거짓이 참이 되므로 불값으로 형변환 하는데 이용할 수 있다.

Boolean(’a’); 와 같다.

  • !!’a’;
  • → true
  • !!false
  • !!’’
  • !!0
  • !!NaN
  • → false
  • Boolean 형 변환 했을때 false 되는 7가지
    • false, ‘’(빈문자열), 0, NaN, undefined, null, document.all

undefined 와 null

PM의 포트폴리오

나의 오해

  1. 무엇을 할 수 있는지 어필하기 위해 직접 작성한 작업물을 보여줘야 한다.
  2. 이력서와 포트폴리오의 다른 점은 이미지 활용이니, 이미지로 자신의 프로젝트를 보여줘야 한다.
  3. 내가 한 프로젝트를 정략적 성과로 표현함으로써 나의 역량을 설명해야 한다.

이것은 핵심이 아니다. 단순히 경험을 작업물이나 이미지로 나열하는 것 이상의 플러스가 있어야한다.

포트폴리오는

포트폴리오는 일기장이나 기록 노트가 아니다. 대상과 목적이 있는 문서로, 담당자와 면접관을 ‘간접적으로 설득하는 장치다.

채용 담당자와 면접관이 지원자의 포트폴리오에서 알고 싶어 하는 것은?

  • 포지션 적합도 : 채용하는 포지션에 잘 맞는지
    1. 직무(업무) 적합도 : 해당 포지션의 환경에서 업무적으로 기대하는 성과를 내며 직무를 수행할 수 있는지
    2. 역량 적합도 : 업무 역량 및 업무 외 포지션 특성상 요구되는 역량을 갖췄는지
  • 조직 적합도 : 회사와 채용 팀에 잘 맞는지
    1. 문화 적합도 : 회사의 비전/미션에 공감하는지, 회사 문화/인재상/일하는 방법 등이 잘 어우러지는지
    2. 팀 적합도 : 팀의 역할과 프로덕트의 비전에 공감하는지, 업무 성향이 팀의 특징 및 팀이 일하는 방식과 어우러지는지
    3. 성장성 : 성장 방법 및 성장 방향, 성장 가능성은 어떤지, 조직과 함께 발전할 수 있는 사람인지

포인트

  1. 프로젝트 및 그 외 다양한 경험으로 증명하는, 내가 무엇을 할 수 있는 사람인지
  2. 지원한 포지션에서 일할 수 있는지
  3. 자신만의 커리어 방향성이 있는지

업무 경험 소개

집중

  1. 역량•커리어가 잘 드러나는 구조 선택하기
  2. 문제 해결 관점으로 프로젝트 소개하기
  3. 역량•성과가 드러나는 방법 활용하기

주의

  1. 담당 범위나 기여도를 적을때
  2. 업무의 담당 범위나 기여도를 %로 적는 것은 의미가 없다. 프로젝트와 시작과 끝이 주관적이기 때문이다
  3. 프로젝트 성과를 숫자로 소개할 때
  4. 전체 성과보다는 자신의 기여분을 소개하는 것이 더 중요하다.

정리

  • 내가 무엇을 할 수 있는 사람인지
  • 지원한 포지션에서 일을 잘 해낼수 있는지
  • 나만의 커리어 방향성은 무엇인지

원문:

PM의 포트폴리오는 무엇이 달라야 할까?

워킹플로우

워크플로우 러닝은 학습자가 언제 어디서나 접근 가능한 자원을 바탕으로, 구성원이 알아서 학습하고 성과를 내는 학습을 말한다.

전통적 교육 훈련과의 차이점

워크플로우 러닝은 개인이 스스로 책임을 지는 자기주도형 학습이다. 정해진 학습 목표가 없고, 학습자에게 최대한 많은 자유가 보장된다.

업무와의 유기적인 연결도 워크플로우 러닝의 특징이다. 업무 수행중에도 학습이 가능하고, 공간의 제약도 없다.

방법론

빠른 학습 속도가 중요하다. 사내 KMS와 EPSS, 유튜브, 구글, 줌, 패들릿, 카카오톨 등 다양한 채널을 활용할 수 있다.

같은 맥락에서 ‘마이크로 러닝' 역시 화두다. 1~2가지 개념을 2~7분 정도의 짧은 시간 내 소화 가능한 콘텐츠 학습을 말한다. 음성, 비디오, 텍스트, PDF 등 모두 포괄된다.

702010 이론

학습법을 ‘비형식, 무형식, 형식' 으로 구분할 때, 각 방식에서 이뤄지는 비율이 70:20:10 이라는 것이다. 연수에 참여하는 방식의 ‘형식적' 교육 훈련에서 10%의 성장을 이룬다면, 현장에서 선배로부터 배울 수 있는 ‘무형식’의 코칭으로 이루는 성장은 20%, 그리고 다양항 업무 경험 등을 통한 ‘비형식’ 학습을 통해 사람들은 70% 성장을 이뤄낸다.

이 비율대로라면 대부분의 업무 성장은 현장에서 발생한다. 결국 일을 경험하면서 동시에 학습하는 워크플로우 러닝이 매우 효과적인 학습법이라는걸 알 수 있는 부분이기도 하다.

원문:

일타쌍피! 일과 학습의 병행 시대

달러 시대

달러 가치가 20년 만 최고 수준이다.

‘포스트 달러’ 시대가 도래할거라는 이야기가 나오고 있다.

  1. 너무 길게 지속되는 달러 인덱스 상승세
  2. 침체 시작된 미국
  • 달러 인덱스 : 주요 6개국 통화 대비 달러 가치를 나타내는 지표 1973년 3월 달러 가치를 100 기준으로 삼고 오르내림을 평가한다.

의견

  • 달러 실질 구매력은 지난 7월 기준으로 다른 통화 대비 30% 과대평가 되어 있었다. 달러 외 주요 통화 모두 강세 요인이 나타나고 있다.
  • 미국은 내년 초 쯤 금리 인상 기조를 멈추고 그 수준을 어느 정도 유지할 것이다. 반면 ECB는 향후 금리를 보다 올릴 가능성이 높다. 그럼 미국과 유로 지역의 금리차가 줄어들면서 달러는 자연히 약세로 바뀔 수 있다.

부동산 스타트업

부동산 중개 플랫폼들의 수익은 대부분 공인중개사의 광고비에 의존하는데, 부동산 한파에 문을 닫거나 광고비를 줄이려는 중개사무소가 급증하고 있다.

실제 플랫폼 업체들의 작년 영업 이익은 적자로 전환했다. 상황 타개를 위해 프롭테크를 통한 수익 다변화를 모색중이다.

직방: 원격 근무를 위한 가상오피스 ‘소마’

다방의 스테이션3 : 비대면 계약 서비스 ‘다방싸인’

  • 프롭테크: 부동산(Property)과 기술(Technology)의 합성어. 빅데이터, 인공지능, 가상현실(VR) 등 기술을 활용해 매물 정보를 제공하고 거래를 중개하는 서비스

달러 시대가 빨리 끝날 수도 있는 이유

피그마 맥 한글오류 자음 모음 분리 현상

회사에서 업무용으로 Mac mini 를 사용하고 있다. 2020년형 M1 맥 미니 이다.

한글을 쓸 때 자음 모음이 분리되어 작성되는 오류가 발생

  1. 맥북 키보드 설정 변경

맥북 시스템 환결 설정 → 키보드 메뉴로 들어간다.

텍스트 항목으로

맞춤법: 한국어 로 설정

맞춤법 자동 수정, 자동으로 문장을 대문자로 시작, 스페이스를 두 번 눌러 마침표 추가, 스마트 인용 부호 및 대시 사용 체크 해제

피그마를 다시 실행하면 해결 되었다.

자바스크립트

문자열 기본(따옴표, 백틱, typeof, excape)

typeof ‘문자열’

→ “string”

‘’ 아무것도 없는 문자열 ‘ ‘ 공백을 채운 문자열도 문자열이다.

따옴표를 문자로 쓰고싶다면, “” ‘’ 을 서로 상반되게 감싸주자, 혹은 `` 백틱으로 감싸면 된다.

\ 역슬래시 뒤에 붙여도 된다. \’ → ‘

문자열 합치기(연산자)

1 + 2

→ 3

‘바나나' + ‘사과’

→ ‘바나나사과’

숫자 기본(parseInt, NaN)

숫자는 따옴표 안쓰고 그냥 쓴다.

큰숫자 표현할때 50000을 5e4 처럼 쓸수도 있다. 0.0005 는 5e-4

2진법 등도 가능. 0b111 : 이진법 111, 0111 또는 0o111 : 8진법 111, ox1a1 : 0x 는 16진법

typeof 0x1a1

→ “number”

NaN : Not a Number 라는 뜻이지만 typeof NaN 을 해보면 number 라고 뜬다.

숫자가 아니다를 뜻을 가지고 있는 숫자 형식의 메시지라고 보면 된다.

‘asdf’ : 문자열

124 : 숫자

‘123’ : 문자열

‘124’ + 5

→ “1245”

문자열 ‘124’ 와 숫자 5를 더해서 129를 나오게 하고 싶다면, 문자열 ‘124’ 를 숫자로 변환시킨다음 더해줘야한다.

문자를 숫자로 바꾸는 방법은: parseInt(’124’) 또는 Number(’124’)

Number(’124’) + 5

처음에는 감을 믿지말고 typeof 로 항상 확인해보면서 작업하기. typeof parseInt(’124’)

→ “number”

parseInt : 정수로 바꾼다. 해석 가능한 범위내에서 최대한 해석한다.

parseFloat : 소수로 바꾼다.

Number : 정수로도 소수로도 바꾼다. 하지만 숫자가 아니면 NaN

parseInt(’3월')

→ 3

Number(’3월')

→ NaN

같아보이지만 완전히 같은 두가지 방법을 계속 쓰지는 않는다.

‘123123’.substr(0, 2)

→ “12”

‘123123’.substring(0, 2)

→ “12”

대부분의 경우 이름이 다르면 다른 역할을 한다.

typeof parseInt(prompt());

prompt : 입력창을 띄운다. 문자열을 입력하도록 하기 때문에, 숫자를 넣어도 문자열로 리턴된다.

입력값을 정수로 바꾼다음 타입을 확인함.

parseInt(111, 10); 111을 10진법으로 해석한다. 10진법은 기본이므로 안적어줘도 됨.

parseInt(111, 2); 111을 2진법으로 해석한다.

산술 연산자

더하기 : 1 + 2;

→ 3

빼기 : 6 - 10;

→ -4

곱하기 : 3 * 4;

→ 12

나누기 : 6 / 4;

→ 1.5

나머지 연산자 %, 거듭제곱 연산자 **

무한 값 알아보기

2 / 0;

→ Infinity

Infinity - Infinity

→ NaN

0 / 0

→ NaN

문자와 숫자 더하기

‘문자열' + 0

→ “문자열 0”

자료형이 다른 데이터를 더하면 자료형이 하나로 변한다. 형 변환(type casting) 이라고 한다. 문자열과 숫자를 더하면 숫자인쪽이 문자열로 변한다.

‘문자열' - 0;

→ NaN

숫자가 아닌 데이터가 숫자로 바뀐다. Number(’문자열') 이 적용된 다음 계산된다고 볼 수 있다.

연산자 우선순위, 소수 계산 주의점

연산자 우선순위 파악하기

모르겠으면 괄호를 씌워서 우선순위를 인위적으로 높여주기. () 우선순위가 가장 높다.

실수 계산시 주의할 점

  • 0.1 + 0.2
    • 0.30000000000004
    컴퓨터 부동소수점 계산 문제가 있다. 컴퓨터는 2진법으로 계산하기 때문에 발생.
  • 0.3 - 0.1
    • 0.19999999999998
    가장 간단한 방법은 실수를 정수로 바꿔서 계산한 뒤, 마지막에 다시 실수로 바꾸는 것.
    • (0.3 * 10 - 0.1 * 10) / 10;
      • 0.2

불 값(boolean, 값들의 비교)

1 과 0 은 참 거짓에 대응 된다.

불 값 표현하기

불 값을 표현할 때는 따옴표로 감싸지 않고 true 와 false 를 입력한다.

typeof true;

→ “boolean”

비교 연산자 사용하기

, <, >=, <=, ==, ===, !=

NaN == NaN

→ false

NaN 은 비교연산에서 false 를 출력한다. 단, != 연산에서는 true 를 출력한다.

true > false;

→ true

true 가 1은 아니지만 사실상 1과 비슷하다고 볼 수 있다. false 는 0 이라고 하면 이렇게 비교된다.

‘b’ > ‘a’;

→ true

사전순이라고 볼 수 있다. b가 문자 번호가 더 크다. (b는 98, a는 97)

‘&’.charCodeAt()

→ 65286

문자 번호가 나온다.

‘3’ < 5;

→ true

빼기 연산자처럼 다른 자료형이 숫자로 형 변환된 후 비교된다.

‘abc’ < 5;

→ false

문자열 abc 를 숫자로 바꾸면 NaN 이 되므로, 비교값이 false 가 된다.

==와 === 차이 이해하기

‘1’ == 1;

1 == true;

1 == ‘1’;

→ true

‘1’ === 1;

1 === true;

1 === ‘1’;

→ false

== 은 값만 비교한다. === 은 자료형까지 같은지 비교한다.

1 != ‘1’;

→ false

1 !== ‘1’;

→ true

논리 연산자

10은 5보다 크고 (그리고), 6은 8보다 작다. && 가 ‘그리고' 라는 것을 표현해준다.

  • 10 > 5 && 6 < 8;
  • → true

|| : ‘또는’

  • 10 < 5 || 6 > 8;
  • → false

! : 반대

  • !true;
  • → false

!! : 연달아 두번 반대로, 참인 값이 거짓으로 거짓이 참이 되므로 불값으로 형변환 하는데 이용할 수 있다.

Boolean(’a’); 와 같다.

  • !!’a’;
  • → true
  • !!false
  • !!’’
  • !!0
  • !!NaN
  • → false
  • Boolean 형 변환 했을때 false 되는 7가지
    • false, ‘’(빈문자열), 0, NaN, undefined, null, document.all

undefined 와 null

PM의 포트폴리오

나의 오해

  1. 무엇을 할 수 있는지 어필하기 위해 직접 작성한 작업물을 보여줘야 한다.
  2. 이력서와 포트폴리오의 다른 점은 이미지 활용이니, 이미지로 자신의 프로젝트를 보여줘야 한다.
  3. 내가 한 프로젝트를 정략적 성과로 표현함으로써 나의 역량을 설명해야 한다.

이것은 핵심이 아니다. 단순히 경험을 작업물이나 이미지로 나열하는 것 이상의 플러스가 있어야한다.

포트폴리오는

포트폴리오는 일기장이나 기록 노트가 아니다. 대상과 목적이 있는 문서로, 담당자와 면접관을 ‘간접적으로 설득하는 장치다.

채용 담당자와 면접관이 지원자의 포트폴리오에서 알고 싶어 하는 것은?

  • 포지션 적합도 : 채용하는 포지션에 잘 맞는지
    1. 직무(업무) 적합도 : 해당 포지션의 환경에서 업무적으로 기대하는 성과를 내며 직무를 수행할 수 있는지
    2. 역량 적합도 : 업무 역량 및 업무 외 포지션 특성상 요구되는 역량을 갖췄는지
  • 조직 적합도 : 회사와 채용 팀에 잘 맞는지
    1. 문화 적합도 : 회사의 비전/미션에 공감하는지, 회사 문화/인재상/일하는 방법 등이 잘 어우러지는지
    2. 팀 적합도 : 팀의 역할과 프로덕트의 비전에 공감하는지, 업무 성향이 팀의 특징 및 팀이 일하는 방식과 어우러지는지
    3. 성장성 : 성장 방법 및 성장 방향, 성장 가능성은 어떤지, 조직과 함께 발전할 수 있는 사람인지

포인트

  1. 프로젝트 및 그 외 다양한 경험으로 증명하는, 내가 무엇을 할 수 있는 사람인지
  2. 지원한 포지션에서 일할 수 있는지
  3. 자신만의 커리어 방향성이 있는지

업무 경험 소개

집중

  1. 역량•커리어가 잘 드러나는 구조 선택하기
  2. 문제 해결 관점으로 프로젝트 소개하기
  3. 역량•성과가 드러나는 방법 활용하기

주의

  1. 담당 범위나 기여도를 적을때
  2. 업무의 담당 범위나 기여도를 %로 적는 것은 의미가 없다. 프로젝트와 시작과 끝이 주관적이기 때문이다
  3. 프로젝트 성과를 숫자로 소개할 때
  4. 전체 성과보다는 자신의 기여분을 소개하는 것이 더 중요하다.

정리

  • 내가 무엇을 할 수 있는 사람인지
  • 지원한 포지션에서 일을 잘 해낼수 있는지
  • 나만의 커리어 방향성은 무엇인지

원문:

PM의 포트폴리오는 무엇이 달라야 할까?

워킹플로우

워크플로우 러닝은 학습자가 언제 어디서나 접근 가능한 자원을 바탕으로, 구성원이 알아서 학습하고 성과를 내는 학습을 말한다.

전통적 교육 훈련과의 차이점

워크플로우 러닝은 개인이 스스로 책임을 지는 자기주도형 학습이다. 정해진 학습 목표가 없고, 학습자에게 최대한 많은 자유가 보장된다.

업무와의 유기적인 연결도 워크플로우 러닝의 특징이다. 업무 수행중에도 학습이 가능하고, 공간의 제약도 없다.

방법론

빠른 학습 속도가 중요하다. 사내 KMS와 EPSS, 유튜브, 구글, 줌, 패들릿, 카카오톨 등 다양한 채널을 활용할 수 있다.

같은 맥락에서 ‘마이크로 러닝' 역시 화두다. 1~2가지 개념을 2~7분 정도의 짧은 시간 내 소화 가능한 콘텐츠 학습을 말한다. 음성, 비디오, 텍스트, PDF 등 모두 포괄된다.

702010 이론

학습법을 ‘비형식, 무형식, 형식' 으로 구분할 때, 각 방식에서 이뤄지는 비율이 70:20:10 이라는 것이다. 연수에 참여하는 방식의 ‘형식적' 교육 훈련에서 10%의 성장을 이룬다면, 현장에서 선배로부터 배울 수 있는 ‘무형식’의 코칭으로 이루는 성장은 20%, 그리고 다양항 업무 경험 등을 통한 ‘비형식’ 학습을 통해 사람들은 70% 성장을 이뤄낸다.

이 비율대로라면 대부분의 업무 성장은 현장에서 발생한다. 결국 일을 경험하면서 동시에 학습하는 워크플로우 러닝이 매우 효과적인 학습법이라는걸 알 수 있는 부분이기도 하다.

원문:

일타쌍피! 일과 학습의 병행 시대

달러 시대

달러 가치가 20년 만 최고 수준이다.

‘포스트 달러’ 시대가 도래할거라는 이야기가 나오고 있다.

  1. 너무 길게 지속되는 달러 인덱스 상승세
  2. 침체 시작된 미국
  • 달러 인덱스 : 주요 6개국 통화 대비 달러 가치를 나타내는 지표 1973년 3월 달러 가치를 100 기준으로 삼고 오르내림을 평가한다.

의견

  • 달러 실질 구매력은 지난 7월 기준으로 다른 통화 대비 30% 과대평가 되어 있었다. 달러 외 주요 통화 모두 강세 요인이 나타나고 있다.
  • 미국은 내년 초 쯤 금리 인상 기조를 멈추고 그 수준을 어느 정도 유지할 것이다. 반면 ECB는 향후 금리를 보다 올릴 가능성이 높다. 그럼 미국과 유로 지역의 금리차가 줄어들면서 달러는 자연히 약세로 바뀔 수 있다.

부동산 스타트업

부동산 중개 플랫폼들의 수익은 대부분 공인중개사의 광고비에 의존하는데, 부동산 한파에 문을 닫거나 광고비를 줄이려는 중개사무소가 급증하고 있다.

실제 플랫폼 업체들의 작년 영업 이익은 적자로 전환했다. 상황 타개를 위해 프롭테크를 통한 수익 다변화를 모색중이다.

직방: 원격 근무를 위한 가상오피스 ‘소마’

다방의 스테이션3 : 비대면 계약 서비스 ‘다방싸인’

  • 프롭테크: 부동산(Property)과 기술(Technology)의 합성어. 빅데이터, 인공지능, 가상현실(VR) 등 기술을 활용해 매물 정보를 제공하고 거래를 중개하는 서비스

달러 시대가 빨리 끝날 수도 있는 이유

피그마 맥 한글오류 자음 모음 분리 현상

회사에서 업무용으로 Mac mini 를 사용하고 있다. 2020년형 M1 맥 미니 이다.

한글을 쓸 때 자음 모음이 분리되어 작성되는 오류가 발생

  1. 맥북 키보드 설정 변경

맥북 시스템 환결 설정 → 키보드 메뉴로 들어간다.

텍스트 항목으로

맞춤법: 한국어 로 설정

맞춤법 자동 수정, 자동으로 문장을 대문자로 시작, 스페이스를 두 번 눌러 마침표 추가, 스마트 인용 부호 및 대시 사용 체크 해제

피그마를 다시 실행하면 해결 되었다.

자바스크립트

문자열 기본(따옴표, 백틱, typeof, excape)

typeof ‘문자열’

→ “string”

‘’ 아무것도 없는 문자열 ‘ ‘ 공백을 채운 문자열도 문자열이다.

따옴표를 문자로 쓰고싶다면, “” ‘’ 을 서로 상반되게 감싸주자, 혹은 `` 백틱으로 감싸면 된다.

\ 역슬래시 뒤에 붙여도 된다. \’ → ‘

문자열 합치기(연산자)

1 + 2

→ 3

‘바나나' + ‘사과’

→ ‘바나나사과’

숫자 기본(parseInt, NaN)

숫자는 따옴표 안쓰고 그냥 쓴다.

큰숫자 표현할때 50000을 5e4 처럼 쓸수도 있다. 0.0005 는 5e-4

2진법 등도 가능. 0b111 : 이진법 111, 0111 또는 0o111 : 8진법 111, ox1a1 : 0x 는 16진법

typeof 0x1a1

→ “number”

NaN : Not a Number 라는 뜻이지만 typeof NaN 을 해보면 number 라고 뜬다.

숫자가 아니다를 뜻을 가지고 있는 숫자 형식의 메시지라고 보면 된다.

‘asdf’ : 문자열

124 : 숫자

‘123’ : 문자열

‘124’ + 5

→ “1245”

문자열 ‘124’ 와 숫자 5를 더해서 129를 나오게 하고 싶다면, 문자열 ‘124’ 를 숫자로 변환시킨다음 더해줘야한다.

문자를 숫자로 바꾸는 방법은: parseInt(’124’) 또는 Number(’124’)

Number(’124’) + 5

처음에는 감을 믿지말고 typeof 로 항상 확인해보면서 작업하기. typeof parseInt(’124’)

→ “number”

parseInt : 정수로 바꾼다. 해석 가능한 범위내에서 최대한 해석한다.

parseFloat : 소수로 바꾼다.

Number : 정수로도 소수로도 바꾼다. 하지만 숫자가 아니면 NaN

parseInt(’3월')

→ 3

Number(’3월')

→ NaN

같아보이지만 완전히 같은 두가지 방법을 계속 쓰지는 않는다.

‘123123’.substr(0, 2)

→ “12”

‘123123’.substring(0, 2)

→ “12”

대부분의 경우 이름이 다르면 다른 역할을 한다.

typeof parseInt(prompt());

prompt : 입력창을 띄운다. 문자열을 입력하도록 하기 때문에, 숫자를 넣어도 문자열로 리턴된다.

입력값을 정수로 바꾼다음 타입을 확인함.

parseInt(111, 10); 111을 10진법으로 해석한다. 10진법은 기본이므로 안적어줘도 됨.

parseInt(111, 2); 111을 2진법으로 해석한다.

산술 연산자

더하기 : 1 + 2;

→ 3

빼기 : 6 - 10;

→ -4

곱하기 : 3 * 4;

→ 12

나누기 : 6 / 4;

→ 1.5

나머지 연산자 %, 거듭제곱 연산자 **

무한 값 알아보기

2 / 0;

→ Infinity

Infinity - Infinity

→ NaN

0 / 0

→ NaN

문자와 숫자 더하기

‘문자열' + 0

→ “문자열 0”

자료형이 다른 데이터를 더하면 자료형이 하나로 변한다. 형 변환(type casting) 이라고 한다. 문자열과 숫자를 더하면 숫자인쪽이 문자열로 변한다.

‘문자열' - 0;

→ NaN

숫자가 아닌 데이터가 숫자로 바뀐다. Number(’문자열') 이 적용된 다음 계산된다고 볼 수 있다.

연산자 우선순위, 소수 계산 주의점

연산자 우선순위 파악하기

모르겠으면 괄호를 씌워서 우선순위를 인위적으로 높여주기. () 우선순위가 가장 높다.

실수 계산시 주의할 점

  • 0.1 + 0.2
    • 0.30000000000004
    컴퓨터 부동소수점 계산 문제가 있다. 컴퓨터는 2진법으로 계산하기 때문에 발생.
  • 0.3 - 0.1
    • 0.19999999999998
    가장 간단한 방법은 실수를 정수로 바꿔서 계산한 뒤, 마지막에 다시 실수로 바꾸는 것.
    • (0.3 * 10 - 0.1 * 10) / 10;
      • 0.2

불 값(boolean, 값들의 비교)

1 과 0 은 참 거짓에 대응 된다.

불 값 표현하기

불 값을 표현할 때는 따옴표로 감싸지 않고 true 와 false 를 입력한다.

typeof true;

→ “boolean”

비교 연산자 사용하기

, <, >=, <=, ==, ===, !=

NaN == NaN

→ false

NaN 은 비교연산에서 false 를 출력한다. 단, != 연산에서는 true 를 출력한다.

true > false;

→ true

true 가 1은 아니지만 사실상 1과 비슷하다고 볼 수 있다. false 는 0 이라고 하면 이렇게 비교된다.

‘b’ > ‘a’;

→ true

사전순이라고 볼 수 있다. b가 문자 번호가 더 크다. (b는 98, a는 97)

‘&’.charCodeAt()

→ 65286

문자 번호가 나온다.

‘3’ < 5;

→ true

빼기 연산자처럼 다른 자료형이 숫자로 형 변환된 후 비교된다.

‘abc’ < 5;

→ false

문자열 abc 를 숫자로 바꾸면 NaN 이 되므로, 비교값이 false 가 된다.

==와 === 차이 이해하기

‘1’ == 1;

1 == true;

1 == ‘1’;

→ true

‘1’ === 1;

1 === true;

1 === ‘1’;

→ false

== 은 값만 비교한다. === 은 자료형까지 같은지 비교한다.

1 != ‘1’;

→ false

1 !== ‘1’;

→ true

논리 연산자

10은 5보다 크고 (그리고), 6은 8보다 작다. && 가 ‘그리고' 라는 것을 표현해준다.

  • 10 > 5 && 6 < 8;
  • → true

|| : ‘또는’

  • 10 < 5 || 6 > 8;
  • → false

! : 반대

  • !true;
  • → false

!! : 연달아 두번 반대로, 참인 값이 거짓으로 거짓이 참이 되므로 불값으로 형변환 하는데 이용할 수 있다.

Boolean(’a’); 와 같다.

  • !!’a’;
  • → true
  • !!false
  • !!’’
  • !!0
  • !!NaN
  • → false
  • Boolean 형 변환 했을때 false 되는 7가지
    • false, ‘’(빈문자열), 0, NaN, undefined, null, document.all

undefined 와 null

PM의 포트폴리오

나의 오해

  1. 무엇을 할 수 있는지 어필하기 위해 직접 작성한 작업물을 보여줘야 한다.
  2. 이력서와 포트폴리오의 다른 점은 이미지 활용이니, 이미지로 자신의 프로젝트를 보여줘야 한다.
  3. 내가 한 프로젝트를 정략적 성과로 표현함으로써 나의 역량을 설명해야 한다.

이것은 핵심이 아니다. 단순히 경험을 작업물이나 이미지로 나열하는 것 이상의 플러스가 있어야한다.

포트폴리오는

포트폴리오는 일기장이나 기록 노트가 아니다. 대상과 목적이 있는 문서로, 담당자와 면접관을 ‘간접적으로 설득하는 장치다.

채용 담당자와 면접관이 지원자의 포트폴리오에서 알고 싶어 하는 것은?

  • 포지션 적합도 : 채용하는 포지션에 잘 맞는지
    1. 직무(업무) 적합도 : 해당 포지션의 환경에서 업무적으로 기대하는 성과를 내며 직무를 수행할 수 있는지
    2. 역량 적합도 : 업무 역량 및 업무 외 포지션 특성상 요구되는 역량을 갖췄는지
  • 조직 적합도 : 회사와 채용 팀에 잘 맞는지
    1. 문화 적합도 : 회사의 비전/미션에 공감하는지, 회사 문화/인재상/일하는 방법 등이 잘 어우러지는지
    2. 팀 적합도 : 팀의 역할과 프로덕트의 비전에 공감하는지, 업무 성향이 팀의 특징 및 팀이 일하는 방식과 어우러지는지
    3. 성장성 : 성장 방법 및 성장 방향, 성장 가능성은 어떤지, 조직과 함께 발전할 수 있는 사람인지

포인트

  1. 프로젝트 및 그 외 다양한 경험으로 증명하는, 내가 무엇을 할 수 있는 사람인지
  2. 지원한 포지션에서 일할 수 있는지
  3. 자신만의 커리어 방향성이 있는지

업무 경험 소개

집중

  1. 역량•커리어가 잘 드러나는 구조 선택하기
  2. 문제 해결 관점으로 프로젝트 소개하기
  3. 역량•성과가 드러나는 방법 활용하기

주의

  1. 담당 범위나 기여도를 적을때
  2. 업무의 담당 범위나 기여도를 %로 적는 것은 의미가 없다. 프로젝트와 시작과 끝이 주관적이기 때문이다
  3. 프로젝트 성과를 숫자로 소개할 때
  4. 전체 성과보다는 자신의 기여분을 소개하는 것이 더 중요하다.

정리

  • 내가 무엇을 할 수 있는 사람인지
  • 지원한 포지션에서 일을 잘 해낼수 있는지
  • 나만의 커리어 방향성은 무엇인지

원문:

PM의 포트폴리오는 무엇이 달라야 할까?

워킹플로우

워크플로우 러닝은 학습자가 언제 어디서나 접근 가능한 자원을 바탕으로, 구성원이 알아서 학습하고 성과를 내는 학습을 말한다.

전통적 교육 훈련과의 차이점

워크플로우 러닝은 개인이 스스로 책임을 지는 자기주도형 학습이다. 정해진 학습 목표가 없고, 학습자에게 최대한 많은 자유가 보장된다.

업무와의 유기적인 연결도 워크플로우 러닝의 특징이다. 업무 수행중에도 학습이 가능하고, 공간의 제약도 없다.

방법론

빠른 학습 속도가 중요하다. 사내 KMS와 EPSS, 유튜브, 구글, 줌, 패들릿, 카카오톨 등 다양한 채널을 활용할 수 있다.

같은 맥락에서 ‘마이크로 러닝' 역시 화두다. 1~2가지 개념을 2~7분 정도의 짧은 시간 내 소화 가능한 콘텐츠 학습을 말한다. 음성, 비디오, 텍스트, PDF 등 모두 포괄된다.

702010 이론

학습법을 ‘비형식, 무형식, 형식' 으로 구분할 때, 각 방식에서 이뤄지는 비율이 70:20:10 이라는 것이다. 연수에 참여하는 방식의 ‘형식적' 교육 훈련에서 10%의 성장을 이룬다면, 현장에서 선배로부터 배울 수 있는 ‘무형식’의 코칭으로 이루는 성장은 20%, 그리고 다양항 업무 경험 등을 통한 ‘비형식’ 학습을 통해 사람들은 70% 성장을 이뤄낸다.

이 비율대로라면 대부분의 업무 성장은 현장에서 발생한다. 결국 일을 경험하면서 동시에 학습하는 워크플로우 러닝이 매우 효과적인 학습법이라는걸 알 수 있는 부분이기도 하다.

원문:

일타쌍피! 일과 학습의 병행 시대

달러 시대

달러 가치가 20년 만 최고 수준이다.

‘포스트 달러’ 시대가 도래할거라는 이야기가 나오고 있다.

  1. 너무 길게 지속되는 달러 인덱스 상승세
  2. 침체 시작된 미국
  • 달러 인덱스 : 주요 6개국 통화 대비 달러 가치를 나타내는 지표 1973년 3월 달러 가치를 100 기준으로 삼고 오르내림을 평가한다.

의견

  • 달러 실질 구매력은 지난 7월 기준으로 다른 통화 대비 30% 과대평가 되어 있었다. 달러 외 주요 통화 모두 강세 요인이 나타나고 있다.
  • 미국은 내년 초 쯤 금리 인상 기조를 멈추고 그 수준을 어느 정도 유지할 것이다. 반면 ECB는 향후 금리를 보다 올릴 가능성이 높다. 그럼 미국과 유로 지역의 금리차가 줄어들면서 달러는 자연히 약세로 바뀔 수 있다.

부동산 스타트업

부동산 중개 플랫폼들의 수익은 대부분 공인중개사의 광고비에 의존하는데, 부동산 한파에 문을 닫거나 광고비를 줄이려는 중개사무소가 급증하고 있다.

실제 플랫폼 업체들의 작년 영업 이익은 적자로 전환했다. 상황 타개를 위해 프롭테크를 통한 수익 다변화를 모색중이다.

직방: 원격 근무를 위한 가상오피스 ‘소마’

다방의 스테이션3 : 비대면 계약 서비스 ‘다방싸인’

  • 프롭테크: 부동산(Property)과 기술(Technology)의 합성어. 빅데이터, 인공지능, 가상현실(VR) 등 기술을 활용해 매물 정보를 제공하고 거래를 중개하는 서비스

달러 시대가 빨리 끝날 수도 있는 이유

피그마 맥 한글오류 자음 모음 분리 현상

회사에서 업무용으로 Mac mini 를 사용하고 있다. 2020년형 M1 맥 미니 이다.

한글을 쓸 때 자음 모음이 분리되어 작성되는 오류가 발생

  1. 맥북 키보드 설정 변경

맥북 시스템 환결 설정 → 키보드 메뉴로 들어간다.

텍스트 항목으로

맞춤법: 한국어 로 설정

맞춤법 자동 수정, 자동으로 문장을 대문자로 시작, 스페이스를 두 번 눌러 마침표 추가, 스마트 인용 부호 및 대시 사용 체크 해제

피그마를 다시 실행하면 해결 되었다.

자바스크립트

문자열 기본(따옴표, 백틱, typeof, excape)

typeof ‘문자열’

→ “string”

‘’ 아무것도 없는 문자열 ‘ ‘ 공백을 채운 문자열도 문자열이다.

따옴표를 문자로 쓰고싶다면, “” ‘’ 을 서로 상반되게 감싸주자, 혹은 `` 백틱으로 감싸면 된다.

\ 역슬래시 뒤에 붙여도 된다. \’ → ‘

문자열 합치기(연산자)

1 + 2

→ 3

‘바나나' + ‘사과’

→ ‘바나나사과’

숫자 기본(parseInt, NaN)

숫자는 따옴표 안쓰고 그냥 쓴다.

큰숫자 표현할때 50000을 5e4 처럼 쓸수도 있다. 0.0005 는 5e-4

2진법 등도 가능. 0b111 : 이진법 111, 0111 또는 0o111 : 8진법 111, ox1a1 : 0x 는 16진법

typeof 0x1a1

→ “number”

NaN : Not a Number 라는 뜻이지만 typeof NaN 을 해보면 number 라고 뜬다.

숫자가 아니다를 뜻을 가지고 있는 숫자 형식의 메시지라고 보면 된다.

‘asdf’ : 문자열

124 : 숫자

‘123’ : 문자열

‘124’ + 5

→ “1245”

문자열 ‘124’ 와 숫자 5를 더해서 129를 나오게 하고 싶다면, 문자열 ‘124’ 를 숫자로 변환시킨다음 더해줘야한다.

문자를 숫자로 바꾸는 방법은: parseInt(’124’) 또는 Number(’124’)

Number(’124’) + 5

처음에는 감을 믿지말고 typeof 로 항상 확인해보면서 작업하기. typeof parseInt(’124’)

→ “number”

parseInt : 정수로 바꾼다. 해석 가능한 범위내에서 최대한 해석한다.

parseFloat : 소수로 바꾼다.

Number : 정수로도 소수로도 바꾼다. 하지만 숫자가 아니면 NaN

parseInt(’3월')

→ 3

Number(’3월')

→ NaN

같아보이지만 완전히 같은 두가지 방법을 계속 쓰지는 않는다.

‘123123’.substr(0, 2)

→ “12”

‘123123’.substring(0, 2)

→ “12”

대부분의 경우 이름이 다르면 다른 역할을 한다.

typeof parseInt(prompt());

prompt : 입력창을 띄운다. 문자열을 입력하도록 하기 때문에, 숫자를 넣어도 문자열로 리턴된다.

입력값을 정수로 바꾼다음 타입을 확인함.

parseInt(111, 10); 111을 10진법으로 해석한다. 10진법은 기본이므로 안적어줘도 됨.

parseInt(111, 2); 111을 2진법으로 해석한다.

산술 연산자

더하기 : 1 + 2;

→ 3

빼기 : 6 - 10;

→ -4

곱하기 : 3 * 4;

→ 12

나누기 : 6 / 4;

→ 1.5

나머지 연산자 %, 거듭제곱 연산자 **

무한 값 알아보기

2 / 0;

→ Infinity

Infinity - Infinity

→ NaN

0 / 0

→ NaN

문자와 숫자 더하기

‘문자열' + 0

→ “문자열 0”

자료형이 다른 데이터를 더하면 자료형이 하나로 변한다. 형 변환(type casting) 이라고 한다. 문자열과 숫자를 더하면 숫자인쪽이 문자열로 변한다.

‘문자열' - 0;

→ NaN

숫자가 아닌 데이터가 숫자로 바뀐다. Number(’문자열') 이 적용된 다음 계산된다고 볼 수 있다.

연산자 우선순위, 소수 계산 주의점

연산자 우선순위 파악하기

모르겠으면 괄호를 씌워서 우선순위를 인위적으로 높여주기. () 우선순위가 가장 높다.

실수 계산시 주의할 점

  • 0.1 + 0.2
    • 0.30000000000004
    컴퓨터 부동소수점 계산 문제가 있다. 컴퓨터는 2진법으로 계산하기 때문에 발생.
  • 0.3 - 0.1
    • 0.19999999999998
    가장 간단한 방법은 실수를 정수로 바꿔서 계산한 뒤, 마지막에 다시 실수로 바꾸는 것.
    • (0.3 * 10 - 0.1 * 10) / 10;
      • 0.2

불 값(boolean, 값들의 비교)

1 과 0 은 참 거짓에 대응 된다.

불 값 표현하기

불 값을 표현할 때는 따옴표로 감싸지 않고 true 와 false 를 입력한다.

typeof true;

→ “boolean”

비교 연산자 사용하기

, <, >=, <=, ==, ===, !=

NaN == NaN

→ false

NaN 은 비교연산에서 false 를 출력한다. 단, != 연산에서는 true 를 출력한다.

true > false;

→ true

true 가 1은 아니지만 사실상 1과 비슷하다고 볼 수 있다. false 는 0 이라고 하면 이렇게 비교된다.

‘b’ > ‘a’;

→ true

사전순이라고 볼 수 있다. b가 문자 번호가 더 크다. (b는 98, a는 97)

‘&’.charCodeAt()

→ 65286

문자 번호가 나온다.

‘3’ < 5;

→ true

빼기 연산자처럼 다른 자료형이 숫자로 형 변환된 후 비교된다.

‘abc’ < 5;

→ false

문자열 abc 를 숫자로 바꾸면 NaN 이 되므로, 비교값이 false 가 된다.

==와 === 차이 이해하기

‘1’ == 1;

1 == true;

1 == ‘1’;

→ true

‘1’ === 1;

1 === true;

1 === ‘1’;

→ false

== 은 값만 비교한다. === 은 자료형까지 같은지 비교한다.

1 != ‘1’;

→ false

1 !== ‘1’;

→ true

논리 연산자

10은 5보다 크고 (그리고), 6은 8보다 작다. && 가 ‘그리고' 라는 것을 표현해준다.

  • 10 > 5 && 6 < 8;
  • → true

|| : ‘또는’

  • 10 < 5 || 6 > 8;
  • → false

! : 반대

  • !true;
  • → false

!! : 연달아 두번 반대로, 참인 값이 거짓으로 거짓이 참이 되므로 불값으로 형변환 하는데 이용할 수 있다.

Boolean(’a’); 와 같다.

  • !!’a’;
  • → true
  • !!false
  • !!’’
  • !!0
  • !!NaN
  • → false
  • Boolean 형 변환 했을때 false 되는 7가지
    • false, ‘’(빈문자열), 0, NaN, undefined, null, document.all

undefined 와 null