Peep

let, const와 블록 레벨 스코프

ES6부터 let, const를 사용하게 되는데, var와는 여러가지 차이가 있다.

선언은 프로그래밍에서 필수기때문에 var와 let, const차이를 이해하고 넘어가지 않으면 많은 프로그래밍적 오류를 발생시킬수 있다.

변수 호이스팅 단계

1. 선언단계(Declaration phase)

   • 변수를 실행시키는 실행 컨텍스트의 변수 객체에 등록, 이 객체는 스코프가 참조하는 대상이됨

2. 초기화단계(Initialization phase)

   • 변수 객체에 등록된 변수를 위한 공간을 메모리에 확보 - 변수는 undefined로 초기화됨

3. 할당 단계(Assignment phase)

   • undefined로 초기화 된 변수에 실제 값 할당

var

• var 생략 시 전역변수로 선언

  • 의도하지 않게 선언된 전역변수는 변경이 일어날 확률이 높음

• 변수 선언 이전에 참조 가능

  • 호이스팅 시 선언 단계에서 초기화 단계까지 한번에 이루어짐

• 함수레벨 스코프

  • for문내에서 선언한 변수를 for외부에서 참조가능

사용이 편리한 var, 스코프가 넓어서 의도치 않은 변경이 생길 수 있고 복잡성이 증가될 수 있다.

때문에 변수의 스코프가 좁을수록 좋으며 불가피한 상황외에는 사용하지 않는것이 좋다.

let

• const와 달리 재할당 가능

  • 명시적으로 객체 타입 변수의 주소값을 재할당 해야한다면 let을 사용한다  

• 블록 레벨 스코프

  • 모든 코드 블록 내에서 코드가 유효, 블록 외부에서 참조할 수 없음

  • 전역 변수에서 사용하는 경우 전역객체의 프로퍼티가 아니다.

    • window.foo 같이 접근 불가

    • 보이지 않는 개념적인 블록내에서 존재

• var는 같은 네이밍으로 중복 선언할 수 있었지만 let은 불가

• 선언문 이전에 참조하면 참조에러

  • 스코프 시작부터 변수의 선언까지 일시적 사각지대(Temporal Dead Zone; TDZ)가 생기기때문이다.

  • 호이스팅 시 선언단계와 초기화 단계가 분리되어 진행

    • 선언단계 - 일시적 사각지대(TDZ) - 초기화단계 - 할당 단계

const

• let과 달리 재할당 금지

  • 상수

  • 객체의 대한 참조를 변경하지 못하지만 객체의 프로퍼티는 보호되지않는다

    • 할당된 객체의 내용(프로퍼티 추가, 삭제, 변경)은 수정될 수 있다

    • 객체의 내용이 변경되더라도 객체 변수의 주소값이 변경되지 않는다.

    • 객체타입에는 const를 사용하는 것이 좋다

    • 만약 명시적으로 객체 타입 변수의 주소값을 재할당 해야한다면 let을 사용한다

• 선언과 동시에 할당이 이루어져야한다

• 블록 레벨 스코프(let 참고)

ES6 이상에서는 var 키워드를 사용하지 않는다.

let과 const를 사용하며 원시 값(상수)이나 객체에는 가급적 const를 사용한다.

let을 사용할때는 스코프를 최대한 좁게 만든다.

객체의 재할당이 확정되지 않았을 경우 const로 먼저 선언하고 추후 let으로 변경하자

참고

let, const와 블록 레벨 스코프

참고에 자료로 명시되어있는 사이트

ECMAScript 6

ECMAScript 6 New Features: Overview & Comparison

ES6 compat table

Temporal dead zone and errors with let

Are variables declared with let or const not hoisted in ES6?

개발자도 알면 좋은 UI 디자인

토이프로젝트에서 종종 개발욕구가 사라지는 경우가 있는데,

개발을 하면서 디자인에서 많은 시간을 쏟게되는 경우인 것 같습니다.

그럼에도 디자인이 똥망일때 진짜 개발욕구가 사라집니다..

세세하게 설명해주는 부분들을 개선할 수 있을 것 같아서 좋은 글이라고 생각합니다.

메모해뒀다가 바로 프로젝트에 적용해야겠습니다.

• 목업, 와이어 프레임

• 구체적인것은 뒤로 미뤄라

  • 먼저 빨리 만들어라

• 컨셉을 정하라

  • 폰트

    • 클래식 serif

    • 통통 생동감 sans serif

    • 중립 sans serif

• 일관된 UI

• 디자인을 시스템화

  • 소모적인 고민들의 선택지를 제한하라

  • 테마 선별

    • 폰트 두께, 폰트 크기, 라인 높이, 색상 값, 마진, 패딩, 너비, 높이, 박스 쉐도우, 테두리 반경, 테두리 두께, 투명도, 아이콘 크기 등

참고

개발자도 알면 좋은 UI 디자인

https://joshua1988.github.io/web-development/design/ui-for-developers/

참고자료로 명시되어있는 사이트

https://refactoringui.com/book/

성착취 방지 기법 소개

• 안전한 서비스 이용에 대한 사용자 가이드 마련
• 사용자에게 업로드 기능이 있을 경우 신고 및 제재 조치 마련
  • 다운로드 방지 및 스크린 캡처 차단등을 제공
• 공유 기능이 있을 경우 해시 값등을 활용해 공유되는 게시물에 대한 문제 대처 시스템 마련
• 메시지, 통화, 영상통화, 대화등이 가능한 경우 즉각 대응할 수 있는 신고, 내용 저장등을 마련
• 사용자 차단, 허용되지 않은 사용자로부터 수신 거부 설정 및 메세지 차단에 대한 시스템 마련
  • 보안 강화 (URL, .apk, .dmg등 확장자가 포함된 메세지 차단)
• '비공개' 또는 공개 값을 '최소화'로하며 사용자가 직접 공개 범위를 설정하도록 제공
  • '전체공개'시 주의사항 명시

성착취관련해서 보안적으로 처리해야하는 부분에대해 쉽고 간략하게 설명해주는 유익한 글이었습니다.

저는 맥을 안써봐서 .dmg 확장자 파일에대해 처음 알게되었습니다.

맥 전용 프로그램 확장자이며 파일을 실행시키면 마운팅되고 안에 데이터들을 설치하는 파일이라고합니다.

쉽게 말하면 .exe 파일과 같은 압축된 패키지 파일입니다.

압축 패키지파일로 보안위협이 많기 때문에 주의해야합니다.

"가장 위험한 맥용 멀웨어 슐레이어, 최신 버전 등장해" 보안뉴스 바로가기

원본

https://teen-it.kr/for-service

UI 개선할 수 있는 9가지 방법

• 요소를 명확하게 표시할 것
• 서체는 하나로 통일할 것
• 폰트 사이즈(20pt) 추천
• 사용자의 온보딩 경험 향상 시킬 것
• 그림자의 적절한 사용
• 오버레이 시 이미지와 텍스트 대비를 향상 시킬 수 있다. 
• 가운데 정렬을 적당히 사용할 것
• 여백의미, 공백을 적절히 사용할 것
• 밝은 배경일 수록 폰트 색상을 어둡게 할 것

폰트사이즈 20pt 추천?

내용 중에서도 서체에 따라 다르다고 나옵니다.

20pt를 px로 변환하면 26.66..px이 나오는데, 한글 서체로 봤을때 너무 큰 것 아닌가?라는 생각이 들기는 합니다.

크롬 브라우저 기준으로 기본 px 사이즈는 16px입니다.

소개하고있는 사이트의 px 사이즈는 21px이네요.

온보딩(Onboarding) 경험 향상?

온보딩은 첫번째 사용자 경험은 아니며 첫번째 사용자 경험은 FTUE(First Time User Experience)라고 합니다.

온보딩은 전체적 경험에 있어서 설계해야합니다. 

온보딩은 사용자 이탈율에 영향을 미칠 수 있습니다.

온보딩이란?

조직적 사회화라고도하는 온 보딩은 1970 년대에 처음 만들어진 관리 전문 용어로, 신입 사원이 효과적인 조직 구성원과 내부자가되기 위해 필요한 지식, 기술 및 행동을 습득하는 메커니즘을 말합니다.

-위키백과

오버레이 시 대비 향상

포토샵에서 이미지에 오버레이 효과를 줄 경우에 이미지를 어둡게 만들 수 있습니다.

혹은 스타일 속성으로 효과를 줄 수 있습니다.

이미지가 어두워지면서 밝은 글씨가 대비되어 선명해져보입니다.

원본 

https://uxdesign.cc/9-simple-tips-to-improve-your-ui-designs-fast-377c5113ac82