letsgojieun

3.1 자바스크립트 실행 환경 모든 브라우저와 Node.js는 자바스크립트를 해석하고 실행할 수 있는 자바스크립트 엔진을 내장하고 있다. 기본적으로 브라우저에서 동작하는 코드는 Node.js 환경에서도 동일하게 동작한다. 단, 이 둘은 용도가 다르다. 브라우저는 HTML, CSS, JS를 실행해 웹페이지를 브라우저 화면에 렌더링하는 것이 주된 목적이지만 Node.js는 브라우저 외부에서 자바스크립트 실행 환경을 제공하는 것을 주된 목적으로 하고있다. (ECMAScript 이외에 추가로 제공하는 기능은 호환되지 않는다.) 3.2 웹 브라우저 구글 크롬은 ECMAScript 사양을 준수하며 시장 점유율도 가장 높다. Node.js에서도 크롬 브라우저의 V8 자바스크립트 엔진을 사용하고 있다. 브라우저의 개발..

2.1 자바스크립트의 탄생 웹 브라우저 시장을 지배하고 있던 넷스케이프에서 웹페이지의 보조적인 기능을 수행하기 위해 브라우저에서 동작하는 경량 프로그래밍 언어를 도입하기로 결정했다. 그래서 탄생한 것이 브랜던 아이크가 개발한 자바스크립트다. 2.2 자바스크립트의 표준화 이에 마이크로소프트는 자바스크립트의 파생 버전인 JScript를 인터넷 익스플로러에 탑재했다 문제는 JScript와 자바스크립트가 표준화되지 못하고 적당히 호환되었다는 것이었다. 이로 인해 브라우저에 따라 웹페이지가 정상적으로 동작하지 않는 크로스 브라우징 이슈가 발생하기 시작했다. 이에 자바스크립트의 파편화를 방지하고 모든 브라우저에서 정상적으로 동작하는 표준화된 자바스크립트의 필요성이 대두되기 시작하였으며, 넷스케이프는 컴퓨터 시스템의..

모던 자바스크립트 딥 다이브 개발 서적으로 여럿이서 스터디 하는 경우를 많이 봐왔다 같이 할 사람을 찾으면 찾을 수는 있겠지만, 혼자 한 챕터씩 읽어가며 블로그에 정리해가는 것도(꽤 오래 걸리겠지만) 괜찮을 것 같다는 생각이 들었다. 그리하여 모던 자바스크립트 딥 다이브로 혼자 하는 스터디를 진행해 보기로 했다 빠밤 자바스크립트는 자바스크립트 엔진 내부에서 암묵적으로 처리해 주는 기능도 많아, 과도하다고 느껴질 만큼 친절한 프로그래밍 언어이다. 이러한 특징은 편리한 경우도 있지만 내부 동작을 이해하기 어렵게 만들기도 한다. 프로그래머의 역할은 요구사항을 기반으로 문제를 해결하기 위한 방안을 고안하고, 이를 코드로 구현하는 것이다 이때 자신이 구현한 코드가 컴퓨터 내부에서 어떻게 동작할 것인지 예측 가능해..

01 기술 블로그를 쉽게 쓰는 방법 3가지 개발자가 기술 블로그를 잘 못 쓰는 이유 '주제 우선, 독자 중심, 주장하는 글쓰기'가 학교를 벗어난 개발자의 글쓰기 방식을 지배해왔다. 그래서 주제가 불분명하고, 독자 수준은 천차만별이며 딱히 주장할 것이 없는 기술 블로그를 써야 할 때는 생각이 정리되지 않고 목차를 잡기 어려워진다. 기술 블로그를 읽는 독자의 수준도 일정치않으며 개발자의 블로그는 딱히 주장도 없다. 단지 개발자가 했던 선택과 몇몇 상황에서 더 좋은 방법을 제시할 수 있을 뿐이다. 그래서 개발자에게 적합한 방법 세 가지를 제시한다. 소재 우선 글쓰기, 자기 수준 글쓰기, 재미있는 글쓰기다. 첫째, 주제 의식을 버리고 '소재 의식'으로 쓰자 주제 의식이 민족이나 권선징악, 자존감 자본주의 같은 ..

01 체인지 로그를 분류, 요약, 종합하는 법 체인지 로그의 양과 만족도의 관계 간단히 쓰면 한 일이 없어 보이고 자세히 쓰면 아무도 읽지 않아 쓸모가 없다. 애플리케이션의 새 버전을 릴리스할 때 변경사항에 다음과 같이 썼다면? ‘사소한 오류 수정’ 일을 열심히 하고도 체인지 로그를 제대로 작성하지 않으면 인정도 못 받고 보람도 없다. 그렇다면 일주일 동안 한 일을 모두 다 적으면? ‘고해상도 폰에서 아이콘이 찌그러지는 오류를 수정했습니다.’ ‘가로/세로 화면 전환 시 하단 메뉴가 사라지는 오류를 수정했습니다.’ ‘애니메이션 스티커가 갑자기 멈추는 오류를 수정했습니다.’ …. 잘못하다간 버그 많은 걸 자랑하는 꼴이 되어버린다. 체인지 로그를 잘 작성하려면 밑의 순서를 기억하자. 선정하기 분류하기 요약하기..

01 에러 메시지를 쓰기 전에 에러부터 없애자 친절한 404, 불친절한 404 사용자가 404 에러 페이지를 만나게 되는 이유는 사용자가 URL을 잘못 입력한 경우 사용자가 링크를 클릭했으나 해당 페이지가 없는 경우 첫 번째 경우는 죄송할 이유가 없다. 문제는 두 번째 경우다. 클릭 시 해당 페이지가 없는 경우, 이를 깨진 링크 또는 죽은 링크라고 한다. 깨진 링크는 개발자의 책임이다 사이트 안에서 링크로 연결되다 깨진 것은 브로큰링크체크닷컴에 들어가서 확인이 가능하다. 또는, 다른 사이트에서 연결된 링크가 깨진 경우가 있다. 특히 검색 엔진이 페이지를 수집했는데, 이후에 페이지 URL이 바뀌거나 페이지를 삭제했는데도 검색 엔진에 원래 페이지를 그대로 갖고 있다가 링크로 연결하는 경우가 있다. 예를 들어..

01 네이밍 컨벤션, 이유를 알고 쓰자 개발자의 가장 큰 고민은 이름 짓기 모든 개발자는 자기 코드를 읽는 사람이 주석 없이도 금방 이해하게 코드를 작성하고 싶어 한다. 이름 하나 잘못 지었다간 일이 몇 배가 되기도 한다. 무슨 뜻인지, 무슨 기능을 하는지 알아낼 수 있는 이름을 작성해보자 이름 짓기는 창조가 아니라 조합 이름 짓기는 무에서 유를 창조하는 것이 아닌, 라이브러리를 사용하는 것처럼 기존 방식 및 이름을 차용해서 새로운 이름을 짓는 경우가 대부분이다. 창조가 아닌 정해진 원칙으로 적절한 단어를 선택해 조합하는 과정일 뿐이다. 인기 자바 소스를 분석한 '오픈소스의 네이밍 특징들' 자바 네이밍 컨벤션을 철저히 준수한다 클래스는 UpperCamelCase 함수와 변수는 lowerCamelCase ..

[프롤로그] 개발자의 글쓰기는 달라야 한다. 개발자 글쓰기의 특징은 ‘정확성, 간결성, 가독성’이다. 문제는 이 세 가지 원칙이 서로 대치한다는 데 있다. 기업의 테크니컬 라이터가 존재하지 않는 우리도 글을 잘 쓸 수 있을까? . . . 01. 문장과 단락을 구조화하는 법 문장을 구조화하는 법 주어 서술어 보어를 이용하여 문장을 만들 수 있다 주어를 문장의 처음으로 뺀다. 인과관계가 있는 복문은 두 문장으로 나눈다 입력데이터는 색상 RGB값을 각각 사용하기 때문에 3차원 벡터다. → 입력 데이터는 색상 RGB값을 각각 사용한다. 그래서 입력 데이터는 3차원 벡터다. 본인이 잘 아는 내용을 바로 쓴다 ‘입력 데이터는 3차원 벡터다.’ 후에 이유를 어떻게 설명할 것인지 결정 부가 설명을 추가해준다 ‘입력 데..

전에 인프런에서 디자인 관련 강의를 무료로 들을 수 있게 행사를 하고 있어서 운 좋게 피그마 기초강의를 신청할 수 있었다 그동안 학원 수업이다 프로젝트다 계속해서 미루다가 최근에 각 잡고! 제대로 듣기 시작하였다 몇 개의 이론 강의를 끝으로 이번에 실습강의를 들으면서 직접 따라 해 봤다 전체적인 틀은 강의와 똑같이 하고 이미지와 글은 내가 하고 싶은 대로 바꿔봤다 프레임을 만들고 테두리 라운드와 쉐도우 효과, 이미지 등록 및 키보드만으로 불투명도 조정하기 등 실제로 해보니까 더 재밌다 피그마 강의 들으면서 실습에서 가장 많이 사용했고 앞으로도 유용할 것 같은 팁 1. 새 프레임을 만들 시, 네비 바의 프레임 만들기 버튼을 누르는 대신 F키를 누르고 드래그하면 쉽게 프레임을 생성할 수 있다 2. 불투명도를..

프론트엔드에 관심을 갖고 공부를 하면서, UI와 UX에 대한 개념과 중요성을 알게 되었다 아마 프론트엔드 채용공고를 보면 'UI&UX에 대한 이해도와 관심'에 대해 기재해놓은 곳이 있을 것이다. 당연히 화면단을 구성함으로써 디자이너들과의 협업이 필수이며 우리가 만드는 웹은 결국 사용자들이 사용하기 때문에 사용자를 이해하는 것이 매우 중요하다. 즉 사용자들이 보기 편하고 조작이 쉬운 인터페이스를 설계해서 계속하여 만족스러운 서비스를 이용하게끔 유도해야 하는데, 이것이 바로 UI UX를 우리가 이해하고 계속해서 고려해야 하는 이유가 된다. UI User Interface의 약자로, 사용자 인터페이스를 뜻한다. 사용자들이 가장 처음에 마주하는 것이 이용하는 서비스 화면의 디자인인데, 이를 디자인하는 것이 UI..