[디독 메일] 내용 정리

애자일(Agile)

협력과 피드백을 자주! 일찍! 더 잘하는 것!

사용자 중심 디자인
고객에게 피드백을 받아 제품을 개선하는 것
린 UX를 잘 다루고 싶다면

사용자 중심 디자인애자일을 이해해야 한다.

린UX는 사용자 피드백을 데이터로 측정한다.

  1. 제대로 문제 파악하기: 사용자 관점에서 문제를 정의하고 사용자 유형과 맥락, 니즈를 파악한다.
  2. 테스트 우선 디자인하기: 디자인을 측정가능한 데이터로 도출하여 성공여부를 수치적으로 판단한다.
  3. 스토리 작성하기: 디자인을 평가하는 방법으로 디자인 스토리를 작성한다.
  4. 팀이 함께 실현 가능한 해결책 찾기: 15분 내로 각 문제에 대한 해결책의 아이디어 공유한다.
  5. 의사결정: 예상 이득, 예상 비용 또는 ROI에 따라 해결 방향을 결정한다.
  6. 타당한 접근방법 고르기: 합리적인 가설을 세운 후 타당한지에 대해 검증한다.
  7. 스케치하기: 테스크 플로우와 디자인 요소에 대해 디테일을 스케치한다.
  8. 인터랙티브 프로토타입 제작하기: 화면에서 일어나는 모든 인터랙션과 다양한 입력 값에 따른 여러가지 상태를 고려하여 화면을 제작한다.
  9. 테스트하고 반복 개선하기: 디자인을 반복 수정하고 테스트한다. 이는 핵심이다.

디자인 도구 활용하기

  • 다이어그램: 복잡한 인터랙션 흐름를 쉽게 파악할 수 있습니다. 개발에 걸리는 시간을 예측하거나 디자인을 설명할 때 많은 도움이 됩니다.
  • 스케치: 빨리 그려보고 버릴 수 있는 데에 적합합니다.
  • 와이어프레임: 와이어프레임은 디자인을 세밀하게 파악할 수 있는 도구입니다. 하나의 와이어프레임에는 모든 상태에 대한 화면이 포함됩니다.
  • 인터랙티브 프로토타입: 제품 전체를 어렵게 구현하는 대신 실제와 아주 가까운 제품을 테스트함으로써 시간과 비용을 절약할 수 있을 때 적합한 도구입니다.리
기업들은 크리에이터들과 협력할 것이다.

콘텐츠 제작자, 사진 작가, 비주얼 스토리텔러들은 신문, 잡지, 또 다른 전통적인 미디어 형태에서 사라지고 있는 작품을 찾기 위해 기술 브랜드로 눈을 돌리고 있다.결과적으로 기술 회사들은 자신들의 브랜드 스토리텔링의 진정성을 정당화시킬 수 있는 기회를 얻을 수 있다. 서비스의 목적성과 잘 맞는 크리에이터의 삶 속 즉, 직접적인 브랜드 광고의 한계를 넘어서 지속적으로 문화와 관련된 이야기를 할 수 있도록 재정적인 지원을 한다. 이는 기존의 스토리텔링의 방식에서 벗어나 신선하고 혁신적인 맥락에서 새로운 스토리텔링을 만들수 있게 한다.

디자인을 배우는 것은 차세대 리더를 기른다.

디자이너는 표준, 실험적인 관행, 다양한 프로세스의 교차점에서 점점 더 많이 일하고 있다. 이전의 디자이너들은 사물을 만들었지만, 앞으로의 디자이너들은 새로운 이야기, 시스템, 행동, 전략을 만들 것이다.

'내 아이콘 왜 이럴까' 싶을 때 챙겨야 할 7원칙
  1. 명료성
  2. 가독성
  3. 정렬성
  4. 간결성
  5. 일관성
  6. 특성
  7. 사용의 용이성
애플 디자인 프로세스가 미래를 창조한 방법
애플의 디테일 지향성은 디자이너들이 사용자 중심적 사고를 하도록 돕는다. 그들은 모든 경험적 측면을 고려했고, 덕분에 고객이 무엇을 원하는지 미리 알 수 있었다. 미래 창조
사용자로서 우리는 제품의 단순함에 너무 익숙해진 탓에, 이제 다른 것을 받아들이기 힘들다. 제품을 도구로 사용하고 싶어 한다. 블로그 웹사이트를 이용하지 않고, 미디엄을 통해 읽고 배운다. 소셜 미디어에 있지 않고, 트위터에서 연결 상태를 유지하고, 뉴스를 찾고, 서로의 생각을 공유한다.
제품은 경험이 아니다. 제품을 통해 실제로 하는 일이 경험이다. 제품을 통해 해야할 일을 잘 처리했다면, 그 제품은 잘 만들어진 제품이다.
왜 제품을 간단하게 하기가 어려울까?

제품 관리자들이 제품의 복잡성을 파악하고 줄이는 방법을 위한 몇 가지 팁이 있다.

  • 일단 당신이 디자인한 것을 이해관계자들에게 스케치나 목업같이 시각적인 것으로 보여주고, 피드백을 요청해서 제품이 얼마나 복잡하다고 생각하는지를 구체적으로 들어볼 수 있다. 그 후에 그들이 말한 기능을 검토해보고 “만약 이 기능을 없앤다면, 제품에 얼마나 손상이 갈까요?”라고 물어볼 수 있다. 만약 모든 사람들이 “글쎄요… 조금?” 라고 말한다면 그 기능을 없애야한다.
  • 가능하다면, 사용자와 함께 제품에 대해 논의해 보는 것이 좋다. 약간의 노력이 필요할 수 있지만 효과는 확실하다. 유저들에게 제품의 첫 인상에 대해 구체적으로 물어보는 것이다. 이를 통해 대중 시장에서 이 제품이 어떻게 받아들일지 혹은 받아들이지 않을지를 파악할 수 있다. 인간이 하나에 집중할 수 있는 시간은 매년 짧아져 금붕어가 하나에 집중할 수 있는 시간에 가까워졌다. 그렇기 때문에 단순함이 더욱 중요하다.
  • 기능을 너무 많이 넣지 말자. 기능에 너무 많은 애착을 가지고 감정적으로 대처하지 말자. 기능에 대한 집착을 내려놓자. 기능의 우선순위를 정하는 것은 매우 중요하다.

그리고 특히, 복잡성 무지 (complexity blindness)를 조심해야한다. 당신도 이렇게 될 수 있다는 사실을 받아들이자.

요약하자면, 다음 만화로 말할 수 있다.

1  모든 사람이 요구하는 제품 기능을 모두 추가했습니다.
2. 이제 우리 제품은 복잡한 쓸모없는 잡동사니 물건이되었어요.
3. 조언해줘서 감사합니다. 당신 없이는 실패할 수 없었을거에요.
4. 팀워크지!
  • 애자일이란?
  • 린 UX를 실무에 적용하는 효과적인 방법
  • 에어비앤비 디자이너들이 말하는 Next design
  • '내 아이콘 왜 이럴까' 싶을 때 챙겨야 할 7원칙
  • 애플 디자인 프로세스가 미래를 창조한 방법
  • 왜 제품을 간단하게 하기가 어려울까?

[책읽고 적어놓기]고길동, 힘들었을 오늘도… 등

꽃을 보듯 너를 본다

꽃을 보듯 너를 본다

화살기도

아직도 남아있는 아름다운 일들을 이루게 하여 주소서. 아직도 만나야 할 좋은 사람들을 만나게 하여주소서.

 나태주 시집

좋아서 혼자서

좋아서 혼자서

운동을 시작했다.
몸과 마음의 기름기를 제거했다.
과잉에서 여백으로, 마음을 비웠다.

윤동희 산문집

고길동, 힘들었을 오늘도

열심히 산다는 건

당신에게 짊어진 의무를
열심히 이행하는 것만을 뜻하지 않아요.
꿈꿀수 있는 권리,
즐거울 권리,
떠날수 있는 권리,
당신을 행복하게 만다는 건 모두
당신이 찾아내야 할 삶의 권리예요.
열심히 찾으세요.

아기공룡 둘리 원작

고길동, 힘들었을 오늘도

고길동, 힘들었을 오늘도

어제의 고난은 오늘의 승리로

고난의 시간을 견뎌 내는 동안에는 엄청난 에너지가 방출되죠. 하지만 빼앗긴 에너지는 당신의 특별한 아이템으로 반송 될 거예요, 그게 바로 여행이랍니다.

아기공룡 둘리 원작

하버드 상위 1퍼센트의 비밀

하버드 상위 1퍼센트의 비밀

신호의 힘

본질의 힘을 발견하는 차단의 법칙

심리학자들이 성공하는 사람들을 연구할수록 노력하려는 개인의 소박한 의지보다는 그들을 둘러싼 긍정적 환경의 신호들이 그들을 순환적을 더 노력하게 만들었다는 점에 있다.

…(중략)…

보통 사람들은 교실에서 밀려난 학생들을 노력의 부족으로 판단하지만 심리학자들은 노력을 하게 만드는 환경의 신호에 주목한다.

만약 이 부정적인 신호들을 차단하고 다시 공부를 시작한다면 어떨까?

“환경의 신호를 차단하는 것은 가난이나 유전자등을 바꾸는 것보다 더 현실적이라는 점에서 분명한 이점을 가진다.”


스틸의 이 연구 결론대로, 부정적인 신호를 차단하는 것은 개인의 내면적 힘에 다가가게 한다.

…(중략)…

모든 환경적 신호는 받아들이는 대상이 자기신호라고 생각해야만 영향을 줄 수 있다. 만약 자신을 향한 부정적인 환경의 신호를 인정하지 않으면, 그 신호의 효과는 적오도 개인에게는 분명하게 차단되는 현상이 발견되었다.

정주영

오늘따라 달이 참 예뻐서

오늘따라 달이 참 예뻐서

아무것도 안 한 건 단지 시간이 어떻게 간지도 모르는 거 아닐까

…( 중략)…

그동안 도대체 뭐 했나 한심스럽게 느껴질수 있지만 난 그렇게 생각해. 그게 바로 긍정적인 스트레스가 아닐까 하고. 그동안 그냥 내버려 둔 시간이 있었기에, ‘아무것도 안 한’ 시간이 있었기에 오늘 너와 내가 여기서 마주 보고 있는 거 아닐까?

그러니까 내 말은, 봄이라서, 좀 따뜻해져서, 꽃 보려고 나온 건 아닐 거란 말이야. 내가 보낸, ‘아무것도 안 했다’ 던 그 시간에 무언가가 쌓여서 오늘, 여기로 발걸음을 이끈 걸 거야

에든 지음

성과없이 바쁘기만 한
당신을 위한
시간관리스킬

수첩할용법이 무의미한 이유

다른 사람과의 약속을 지키는 것이 시간관리의 목표가 되어서는 안된다. 자신이 원하는 인생을 실현하는 것이 시간관리의 목표이자 본질이다.

고도 토키오 지음/ 김현영 옮김

[책읽고 적어놓기]스탠퍼드는 명함을 돌리지 않는다.

스탠퍼드는 명함을 돌리지 않는다.
라이언 다케시타 지음
정은희 옮김
명함 인맥의 몰락

인맥을 쌓는 방법 역시 지금까지는 회사의 핵심 중역들끼리 교류하는 경제 단체, 골프 클럽 회원 모임에 참석하거나, 상사에게 소개받는 방법을 통해 소위 ‘대단한 사람’과 ‘대단한 사람’이 자기 직무에 맞춰 관계를 맺고 유지하는 것이 일반적이다.

그러나 이제는 고객과 직접 접촉하고 직무나 직급에 상관없이 다양한 사람들을 만나야 새로운 정보를 얻을 가능성이 높다. 그래야 참신한 발상을 떠올리기도 쉽고, 새로운 흐름에 즉각 대응할 수 있다.

언제 어디에서 내 일에 결정적인 도움을 줄 사람이 나타날 지 모른다.

핀 포인트, 좁고 깊은 인간관계의 힘

일단 상대가 좋아해야 한다. 그러면 모든 것이 순조러워진다. – 워런 버핏-

내가 진정으로 호감을 가진 소수의 사람과 깊은 관계를 맺는 것. 이것이 바로 핀포인트 인간관계의 기본 원칙이다.

타인에게 억지로 맞추려는 행동은 쉽지 않고 잠깐은 가능할지 몰라도 끝까지 성공하기 어렵다. 그보다는 서로 의미있게 공존할 수 있는 방법을 모색하는 노력이 더 중요하다.

그런 공존을 위해 필요한 요소는 조금 냉정하게 들릴지도 모르지만 무관심해질 수 있는 용기이다.  나와 맞지 않는 사람에게 괜히 신경쓰지 말고, 함께 있으면 마음이 편해지는 호감가는 사람을 곁에 두고 소중히 여겨야 한다.

오래 즐겁게 일하기 위해서는 현장에서도 내게 심리적 안정을 줄 수 있는 사람을 만들어야 한다.

이런 수 많은 만남 속에서 결국 오래가는 것은 호감이 가는 사람과의 만남일 것이다.

어디서 일할 것인가 vs 누구와 일할 것인가

이직이나 승진을 면접자에게 좋은 인상을 주고 내가 싫어하는 상사라도 비위를 맞춰서 이떻게든 기회를 얻어야 한다고 생각하기 때문일 것이다. 좋든 싫든 내 감정은 제쳐놓아야 하는 것 아니냐는 것이다.

경력이동에서 ‘앞으로 어떤 곳에서 어떤 경력을 만들어나갈 것인가’ 만큼 중요한 것은 ‘어떤 사람과 함께 일할 것인가’이다. 아무리 좋은 조직이라도 나와 맞지 않는 사람으로 가득하다면 그곳에서 오래 일할 수  없다.

 

인간관계는 남이 아닌 나에서 부터 시작한다.

인간관계라는 것은 결국 내가 어떤 사람을 좋아하는지, 어떤 사람이 되고 싶은지에 관해 자신만의 답을 가지고 있어야 한다. 그래야 나를 스쳐가는 수많은 사람들 속에서 상처받거나 휘둘리지 않을 수 있으며 피상적인 인간관계가 아니라 나를 더 좋은 사람으로 만들고 행복감을 느낄수 있게 하는 진정하 인간관계를 맺을 수 있다.

[책읽고 적어놓기] 개발자의 글쓰기

개발자의 글쓰기
개발자의 글쓰기
김철수 지음
영어단어 선택과 래어 표기법
  • stop :잠시 중단한 것이어서 언제든 재시작 할수 있다.
  • end : 완전히 중단되어 재시작할 가능성이 없다.
  • finish : 끝장을 본 상태여서 재시작을 고려할 필요가 없다.
  • pause : 아주 잠시 일시적으로 중단된 것이어서 금방이라도 다시 시작할수 있다.
  • suspend : 다음단계를 중단한 것이다
  • hold : 어떤 의도가 있어서 중단한 것이다.
  • get : 어떤 값을 돌려받아서 반환하는 함수에 사용한다.
  • return : 함수이름에 쓰지 않는다. 주로 함수 안에서 제어에 쓰기 때문이다.
  • retrieve : 검색해서 가져온다. 검색에 무게가 실린다면 이 단어를 쓰는게 낫다.
  • acquire : 독점한다는 뜻이다 다른 함수가 가져가지 못하게 독점하고자 할때 쓴다.
  • fetch : 현재 값을 가리키는 포인터가 다음값으로 이동한 것 가져온다는 뜻이다.
  • set : 값을 변경하거나 설정하는 함수에 쓴다.
  • init : 초기화설정할때 쓴다.
  • register : 이미 정해진 틀에 값을 집어넣는 것이다.
  • create : 정해진 틀이 없으므로 먼저 틀을 만들때 쓴다.
  • change : 내용을 단순히 바꾼다는 뜻이다.
  • modify : 잘못된 것을 바로 잡을 때 쓴다.
  • revise : 기존에 없던 새로운 정보나 아이디어를 덧붙여 기존 내용과 달라졌음을 분명히 할때 사용한다.
  • parameter : 매개변수로 함수를 정의한 변수를 뜻한다.
  • argument : 전달 인자로 함수를 호출할 때 전달되는 값을 의미한다.
  • attribute : html에서 태그안에 속성을 넣을 때 사용되는 요소다.
  • property : attribute를 html DOM에서 가리킬 때
  • must : 필수요구사항이다. 요구 그자체이므로 구현돼야 한다는 의미다.
  • must not : 결코 구현돼서는 안되는 일이다. 해서는 안되는 일, 일어나서는 안되는 현상을 정의할때 사용한다.
  • should : 권고 또는 권장사항이다. 가능하면 지키거나 구현해야 한다. 만약 구현이 어렵다면 다른 방법을 취할수도 있다.
  • should not : 구현되지 않는 것이 더 좋다는 의미다. 필요하다면 다른 방법을 취하는 것이 좋다.
  • 행동이 필요한 함수라면 do를 써서 doSomething()으로 이름을 짓기도 한다.
  • bool값을 반환하는 함수라면 is나 does를쓰기도 한다.

     

네이밍 컨벤션, 이유를 알고 쓰자
  •  BEM  (Block Element, Modifier) 표기법 : 대상 –요소__상태를 의미한다
    form {}
    form–button {}
    form–button__disabled {}
 

변수이름 잘 짓는 법

  • 일자 Day : 임의의 날(someday), 특정한 날(thisDay), 마지막날(finalDay)
  • 중요한 단어를 앞에 쓴다. (ex: int visitorTotal, int registerTotal, buyerTotal, WindowSizeMax, vipCount..)
좋은 이름의 기준, SMART

좋은 이름의 5가지 특징

  • easy to Search 검색하기 쉽고
  • easy to Mix 조합하기 쉽고
  • easy to Agree 동의하기 쉽고
  • easy to Remember 기억하기 쉽고
  • easy to Type 입력하기 쉽고
에러 메시지를 쓰기 전에 에러부터 없애자
깨진 링크는 개발자의 책임이다.
  • 브링크링크체크닷컴(https://www.brokenlinkcheck.com)-깨진 링크 찾아주는 서비스
  • 구글서치콘솔(https://www.google.com/webmasters/tools)를 이용하면 구글검색엔진에서 특정사이트의 깨진 링크를 쉽게 찾아낼 수 있다.
에러 메시지 대신 예방 메시지를 쓰자

결재요청시
재확인 방식 : 결재요청 → 재확인 → 결재처리
취소방식 : 결재요청 → 결재처리 + 취소기능
혼합방식 : 결재요청 → 재확인 → 결재처리 + 취소기능

사용자입장에서 보자.  재확인 방식에서는 사용자가 결재요청버튼을 누르면 순간 무조건 재확인해야 한다. 재확인은 경고다. 사용자가 의사결정을 했는데 그 결정이 확실하지 않을 수 있으니 다시 확인하나는 시스템의 강요다. 사용자의 의사결정은 근본적으로 실수가 잦고 믿을 수 없다고 보는 관점이다.

사용자가 실수로 결재 요청 버튼을 누르는 것을 막기 위해야서라면 다른 방식을 써야 한다. 결재요청버튼의 위치나 크기를 다시 설정해야 옳다. 또 그렇게 실수를 했더라도 다음 화면에서 취소기능을 보여줘서 사용자가 스스로 취소할 수 있게 해야 한다. 그렇게 함으므로써 자신의 행동을 주체적으로 책임지게 만들어야 한다.

이것은 철학의 문제다. 개발자가 사용자를 불완전한 존재로 인식하는 순간 모든 사용자의 행동에 경고로 대응한다. 그러면 시스템도 불완전해진다. 사용자의 행동 하나하나가 불완전하므로 사용자의 모든 행동을 검증해야 한다. 사용자를 성인이 아니라 미숙아로 취급하는 것과 다름없다.

어떤 방식을 쓸지는 서비스와 사용자에 따라 달라지겠지만, 개발자도 자신만의 철학을 가져야 한다.

릴리스 문서는 문제 해결 보고서처럼 쓰자
문제, 문제점 해결책, 후속계획 순으로 적자.
비지니스를 이해하는 장애 보고서를 쓰기
  • 질문에 대답하는 신속한 글쓰기
  • 원인과 이유를 찾는 분석적 글쓰기
  • 상사를 고려하는 비지니스 관점의 글쓰기
  • 원하는 것을 얻는 정치적 글쓰기
(예) 장애보고서 제목: 서버 모듈 변경 문제로 사용자 결제 불가(10-11시)
항목내용
장애 내용사용자 결제 불가(10:00~11:00, 1시간)
장애 영향장애 중 결재 시도 100건 → 1시간 후 결제 비율 10%(평균 50%)
장애 원인서버 쪽 결재 모듈 변경 시 모듈 인터페이스의 함수를 수정했으나 프런트에서는 기존 함수로 에러 발생
조치 상황서버쪽의 바뀐 함수를 호출하도록 프런트 코드 수정
조치 결과결재 기능 정상 작동
핵심 원인서버 쪽과 프런트 쪽 커뮤니케이션 단절
향후 대책서버, 프런트 팀장이 소통방법 협의하여 보고

Core Javascript

Javscript …

  • 컴파일 없이 브라우저뿐만 아니라 서버에서도 실행 할 수 있으며, 자바스크립트엔진이라 불리는 특별한 프로그램이 있는 모든 디바이스에서 동작한다.
  • ECMAScript라는 고유한 명세를 가진 독립적인 언어이며 자바와 아무런 연관이 없다.
  • 브라우저엔 자바스크립트 가상머신 엔진이 내장되어있다.
    • V8: 크롬과 오페라에서 쓰임
    • SpiderMonkey: 파이어폭스에서 쓰임
    • Trident, Chakra : IE 버전에 따라
    • ChakraCore: IE엣지
    • SquirrelFish: 사파리
  • 엔진은 프로세트 각 단계마다 최적화를 진행한다.
  • 모던 자바스크립트는 “안전한”프로그래밍 언어이다.(메모리나 CPU같은 저수준 영역의 조작을 허용하지 않는다.)
  • Node.js환경에서는 임의의 파일을 읽거나 쓰고, 네트워크 요청을 수행하는 함수를 지원한다.
엔진 동작 기본원리
  1. 엔진이 스크립트를 읽는다 (파싱)
  2. 읽어 들인 스크립트를 기계어로 전환(컴파일)
  3. 기계어로 전환된 코드가 실행 (기계어로 전환되었기 때문에 실행속도가 빠름)
브라우저에서 자바스크립트가 할수 있는 일
  • 페이지에 새로운 html을 추가 하거나 기존 html, 스타일 수정하기
  • 마우스 클릭이나 포인트의 움직임, 키보드 키눌림등과 같은 사용자 행동에 반응하기
  • 네트워크를 통해 원격 서버에 요청을 보내거나 파일 다운로드, 업로드하기
  • 쿠키를 가져오거나 설정하기, 사용자에게 질문을 건네거나 메시지 보여주기
  • 클라이언트 측에 데이터 저장하기(로컬 스토리지)
브라우저에서 자바스크립트가 할수 없는 일
  • 웹페이지 내 스크립트는 디스크에 저장된 임의의 파일을 읽거나 쓰고, 복사하거나 실행할 때 제약을 받을수 있다.
    운영체제가 지원하는 기능을 브라우저가 직접 쓰지 못하게 막혀있기 때문이다. 
  • 모던 자바스크립트를 사용하면 파일을 다를수 있지만 접근이 제한되어있다. <input>태그를 통해 선택할때 특정상황에서만 파일접근이 허용된다.
  • 카메라, 마이크같은 디바이스와 상호작용하려면 사용자의 명시적인 허가가 있어야 한다.
  • 브라우저 내 탭과 창은 대게 서로의 정보를 알수 없다. 자바스크립트를 사용하여 한창에서 다른창을 열때는 예외가 적용된다. 하지만 도메인, 프로토콜,포트가 다르면 접근할수 없다.
  • 자바스크립트를 이용하면 페이지를 생성한 서버와 쉽게 정보를 주고 받을수 있으나. 타 사이트나 도메인에서 데이터를 받아오는 것은 불가능하다.
자바스크립트만의 장점
  • html/css와 완전히 통합할수 있다.
  • 모든 주요브라우저에서 지원하고 기본언어로 사용된다.
  • 서버나 모바일 앱등을 만드는 것도 가능하다.
자바스크립트로 트랜스 파일
  • coffeescript : 짧은 문법을 도입하여 명료하고 이해하기 쉬운 코드를 작성할수 있다. Ruby개발자들이 좋아함. 
  • typescript : 자료형의 명시화에 집중해 만든 언어, microsoft사에서 개발
  • flow : 자료형을 강조하는데 타입스크립트와 다른 방식으로 사용. facebook이 개발
  • dart : 모바일 앱과 같이 브라우저가 아닌 환경에서 동작하는 고유의 엔진을 가진 독자적 언어. google에서 개발

transpile 과 compile의 비교

  • transpile : 한언어로 작성된 코드를 비슷한 수준의 추상화를 가진 다른 언어로 변환하는것.(source to source compiler) es6 ⇒ es5 / c++ ⇒ c / coffeescript ⇒ javascript
  • compile : 한언어로 작성된 소스 코드를 다른 언어로 변환하는 것
    Java ⇒ bytecode c ⇒ assembly sass(scss) ⇒ css (node-sass를 활용)
개발자 콘솔 (Chrome)
  • 개발자 도구 : window – F12 , Mac [ Chrome – Cmd+Opt+J, Safari – Cmd+Opt+C ]
  • 커맨드 라인에 한줄짜리 명령어를 입력하고 enter치면 해당 명령어가 실행
    명령어를 여러줄 작성하고 싶을 때 shift+ enter를 누리면 명령어 실행
스크립트 태그
  • < script > < /script> type 과 language 속성은 필수가 아니므로, 모던 마크업에서는 사용할 필요가 없다.
  • HTML안에 직접 스크립트를 작성하는 방식은 대게 스크립트가 아주 간단할때만 사용한다. 스크립트가 길어지면 별개의 분리된 파일로 만들어 저장하는 것이 좋다.
  • 스크립트를 별도의 파일을 작성하면 브라우저가 스크립트를 다운받아 캐시에 저장하기 때문에 성능상의 이점이 있다.(트레픽이 절약되고 웹페이지의 실속도가 빨라짐)
  • < script >태그는 src속성과 내부 코드를 동시에 가지지 못한다.
    <script src="file.js">console.log(1);</script> ⇒ console.log(1); 는 무시됨.
코드 구조
  • 세미콜론(;) : 생략가능하지만, 생략하지 않는 것이 더 안전하므로 지켜 사용하는 것을 권장한다.
  • 주석
    한줄 주석 – // (두 줄 슬래시, 단축키 : Ctrl+/)
    여러줄 주석 – /*….*/ (단축키 : Ctrl+Shift+/)
    /*…*/안에 또 다른 /*…*/이 있을 수 없다.
  • 엄격모드 : ‘use strict’ 
    • 항상 “use strict”를 사용권장
    • 반드시 최상단에 위치시킴.(엄격모드가 적용되면 취소할 방법은 없다.)
    • 모든 모던 브라우저는 엄격모드를 지원한다.
변수
  • 데이터를 저장할 때 쓰이는 이름이 있는 저장소
  •  let 키워드를 사용하여 변수 생성.
  • 여러변수를 한줄에 선언하는 것도 가능하나, 가독성을 위해 하나의 변수는 한줄에 선언
    변수선언방식

     

    let user = 'John';
    let age = 25;
    let message = 'Hello';
    
    let user = 'John', 
      age = 25, 
      message = 'Hello';
    
    
    let user = 'John' 
      , age = 25 
      , message = 'Hello';
    
  • var : let과 동일하지만 오랜된 방식이다.
  • 변수의 값이 변경되면 이전 값은 제거되고 변경된 값을 출력한다.
  • 변수명명규칙
    • 변수명에는 오직 문자, 숫자, 기호 $와 _만 들어갈 수 있다. (하이픈(-)은 변수명에 쓸 수 없다)
    • 첫글자가 숫자가 될수 없다.
    • 여러단어를 조합하여 변수명을 만들때는 카멜표기법으로 사용한다.
    • 대소문자를 구별한다.
    • 영어로 사용하는 것을 권장한다.
    • 예약어는 변수명으로 사용할 수 없다.
상수
  • 변화하지 않는 변수를 선언 할 땐,  let 대신 const를 사용하며 이를 상수라 한다.
  • 상수는 재할당할수 없으므로 변경하면 에러를 발생한다.
  • 대문자 상수명하드코딩한 값의 별칭을 만들때 사용한다. (ex: const COLOR_RED = “#F00”;)
  • 최대한 서술적이고 간결한 명명으로 한다.
  • 변수를 재사용하는 것보다 변수를 추가하는 것이 좋은 습관이다. 변수를 추가한다고 해서 성능 이슈가 생기지는 않는다.
자료형
  • 자바스크립트의 변수는 어떤 데이터든지 담을수 있다.
  • 변수값을 문자열에서 숫자로 바꿔어도 에러가 발생되지 않는다.
    let message = "hello";
    message = 123456;
    
숫자형
  • 정수, 부동소수점 숫자를 나타냄
  • 숫자형과 관련된 연산은 곱셈 *, 나눗셈 /, 덧셈 +, 뺄셈 – 등
  • Infinity(어떤 숫자보다 큰 특수 값, 무한대∞), -Infinity, NaN같은 ‘특수 숫자 값(special numeric value)’이 포함
    alert( 1 / 0 ); // 어느 숫자든 0으로 나누면 무한대를 얻을 수 있다.
    alert( Infinity ); //Infinity를 직접 참조할 수도 있다.
    alert( "숫자가 아님" / 2 ); // NaN은 계산 중에 에러가 발생했다는 것을 나타내주는 값, 문자열을 숫자로 나누면 오류가 발생
    alert( "숫자가 아님" / 2 + 5 ); // NaN에 어떤 추가 연산을 해도 결국 NaN이 반환
    
  • Biglnt
    • 채택된지 얼마 안된 자료형
    • 길이에 상관없이 정수를 나타낼수 있다.
    • 자바스크립트에선 253 (16자리 숫자로 이루어진 정수) 큰 값 혹은 -253 보다 작은 정수는 숫자형을 사용해 나타낼 수 없으므로 아주 큰  숫자가 필요하거나 높은 정밀도로 작업을 해야 할 때는 큰 숫자가 필요할 경우 사용된다.
    • BigInt는 정수 리터럴 끝에 n을 붙이면 만들수 있다.
      const bigInt = 1234567890123456789012345678901234567890n;
      const sameBigInt = BigInt("1234567890123456789012345678901234567890");
      const bigintFromNumber = BigInt(10); // 10n과 동일
      
    • 호환성 이슈가 있다. (firefox, chrome에서만 지원가능)
    • BigInt는 일반 숫자와 큰 차이없이 사용된다.
      alert(1n + 2n); // 3
      alert(5n / 2n); // 2
      
      alert(1n + 2); // BigInt형 값과 일반숫자를 섞어서 사용할 수 없다.
      
      //일반 숫자와 섞어서 써야 하는 상황이라면 BigInt()나 Number()를 사용해 명시적으로 형 변환을 해주면 된다.
      //*bigint가 너무 커서 숫자형에서 허용하는 자릿수를 넘으면 나머지 비트는 자동으로 잘려나간다.
      
      let bigint = 1n;
      let number = 2;
      console.log(bigint + BigInt(number); //3
      console.log(Number(bigint) + number); // 3
      
      // 단항덧셈연산자는 bigint사용할수 없다.
      let bigint = 1n;
      console.log(+bigint); // error
      
      
    • 비교연산자 <, >는 bigint와 일반숫자 모두 사용할수 있다.
      console.log(2n > 1n); //true
      console.log(2n > 1); //true
      
      console.log(1 == 1n); // true
      console.log(1 === 1n); // false 논
    • 논리연산
      if안이나 다른 논리 연산자와 함께 사용할 때 일반숫자와 동일하게 행동한다.
      if안에서 0n은 falsy이고 다른값들은 truthy로 평가된다.
      ||, &&도 bigint를 적용할 때도 일반숫자와 유사하게 동작한다.

      if (0n) {
        // 절대 실행되지 않습니다.
      }
      console.log(1n || 2); 1 (1n은 truthy로 판단)
      console.log(0n || 2); 2 (0n은 falsy로 판단)
      
    • 폴리필
      아직까지 제대로 된 bigint 폴리필이 나오지 않은 상황
      JSBI를 사용하여 숫자를 만든 다음 바벨 플러그인에 있는 폴리필을 사용해JSBI 호출을 네이티브 bigint로 변환하면 원하는 브라우저에서 연산을 수행할 수 있다.
문자형
  • 문자열을 따옴표로 묶는다.
    큰따옴표(” “), 작은따옴표(‘ ‘) – 차이 없다.
    역 따옴표(` `: 백틱) : 변수나 표현식을 감싼후 ${..}안에 넣어주면, 원하는 변수나 표현식을 문자열 중간에 넣을수 있다.

    let name = "john";
    console.log(`Hello, ${name}!`); //Hello, John!
    console.log(`the result is ${1+2}`); //the result is 3 → 1+2와 같은 수학관련표현식도 넣을수 있다.
    
  • 자바스크립트에서는 문자형만 있을 뿐 글자형은 지원하지 않는다. C언어와 Java는 글자형을 따로 지원(char)한다.
불린형
  • true, false 두가지 값 밖에는 없는 자료형으로 긍정(true), 부정(false)을 나타내는 값을 저장할 때 사용한다.
null값
  • null값은 오로지 null값만 포함하는 별도의 자료형을 만든다.
  • 자바스크립트의 null은 자바스크립트이외의 언어의 null과 성격이 다르다.
    다른언어에서의 null은 존재하지 않는 객체에 대한 참조나 널포인트를 나타낼때 사용한다.
    자바스크립트에서는 null은 존재하지 않는 값(nothing), 비어있는 값(empty), 알수 없는 값(unknown)을 나타내는 데 사용

    let age = null;
undefined값
  •  undefined값도 null값처럼 자신만의 자료형을 형성한다.
  • undefined는 값이 할당되지 않는 상태를 나타낼 때 사용한다.
  • 변수는 선언했지만, 값을 할당되지 않았다면 해당변수는 undefined가 자동으로 할당된다.
    let x;
    alert(x); // "undefined"
    
    let y = 123;
    y = undefined; // 변수에 undefined를 직접 할당하는 것도 가능, 권장하지 않는다.
    alert(y); // "undefined"
    
변수가 비어있거나, 알수 없는 상태라는 것을 나타내려면 null을 사용
변수에 값이 할당되었는지 여부를 확인할 때는 undefined를 사용
객체와 심볼
  • 객체(object)는 특수한 자료형이다.
  • 심볼(symbol)형은 객체의 고유한 식별자(unique identifier)를 만들 때 사용
typeof 연산자
  • 인수의 자료형이다.
    연산자 : typeof x
    함수: typeof(x)
    typeof undefined; //"undefined"
    typeof 0; // "number"
    typeof 10n; // "bigint"
    typeof true; // "boolean"
    typeof "foo"; // "string"
    typeof Symbol("id"); // "symbol"
    typeof Math; // "object" , 수학연산을 하는 내장객체이므로 object
    typeof null; // "object", 언어상 오류, null은 객체가 아니다.
    typeof alert; // "function", 함수는 객체형에 속함
    
함수형 언어
  • functional 프로그래밍 언어는 변수값 변경을 금지한다. 
  • 스칼라(Scala)와 얼랭(Erlang)이 대표적인 함수형 언어이다.
  • 함수에 저장된 값은 영원히 유지된다.
  • 다른 값을 저장할려면 새로운 함수를 만들어야(새변수를 선언)한다. 이전 변수는 재사용할수 없다.
  • 중대한 개발에 상당히 적합한 언어이다.
콜백함수(Callback 함수)

callback : 되돌아 호출해달라는 명령

어떤 함수 X를 호출하면서 특정 조건일 때 함수 Y를 실행해서 나에게 알려달라는 요청을 보내고, 이 요청을 받은 함수 X의 입장에서는 해당 조건이 갖쳐졌는지 여부를 스스로 판단하고 Y를 직접 호출한다.

var count = 0;
var callbackFunc = function() {
 console.log(count);
 if (++count > 4) clearInterval(timer);
};
var timer = setInterval(callbackFunc, 300);
// 0 (0.3 sec)
// 1 (0.6 sec)
// 2 (0.9 sec)
// 3 (1.2 sec)
// 4 (1.5 sec)

var addCoffee = function(name) {
  return new Promise(function(resolve) {
    setTimeout(function() {
      resolve(name);
    }, 500);
  });
};
var coffeeMaker = async function() {
  var coffeeList = '';
  var _addCoffee = async function(name) {
    coffeeList += (coffeeList ? ',' : '') + (await addCoffee(name));
  };
  await _addCoffee('에스프레소');
  console.log(coffeeList);
  await _addCoffee('아메리카노');
  console.log(coffeeList);
  await _addCoffee('카페모카');
  console.log(coffeeList);
  await _addCoffee('카페라떼');
  console.log(coffeeList);
};
coffeeMaker();
  • 어떤 함수의 인자에 객체의 메서드를 전달 하더라도 이는 결국 메서드가 아닌 함수 일 뿐이다.
  • 객체의 메서드를 콜백함수로 전달하면 해당 객체를 this로 바라볼수 없게 된다
  • 전통적으로는 this를 다른 변수에 담아 콜백함수로 활용할 함수에서는 this대신 그 변수를 사용하게 하고, 이는 클로저를 만드는 방식이 많이 쓰였다.
  • Promise, Generator, async/await 등 콜백지옥에서 나오는 방법이 있다.
클로저(Closure)
  • 어떤 함수에서 선언한 변수를 참조하는 내부함수에서만 발생하는 현상
  • 어떤 함수A에서 선언한 변수 a를 내부함수  B를 외부로 전달할 경우 A의 실행 컨텍스트가 종료된 이후에도 변수 a가 사라지지 않는 현상(여기서 외부로의 전달은 return이 아니라는 점이다.)
  • 객체지향과 함수형 모두를 아우르는 매우 중요한 개념
var outer = function() {
 var a = 1;
 var inner = function() {
   console.log(++a);
 } 
 inner();
}

outer();