전체 글237

• 

  [웹/앱 아키텍처] 클린 아키텍처란 무엇인가? 서론 아마 프로그래머 분들이라면 한번 쯤 클린코드라는 책을 들어보셨을 것 같은데요, 클린 아키텍처 역시 마찬가지입니다. 오랜 기간 동안, 프로그래머로 일해오신 로버트 C. 마틴 작가님께서 쓰신 책입니다. 제가 알기론 반 세기(!?) 동안 프로그래머로 일하셨다고 해요. 정말 대단하지 않나요? 오늘 다뤄 볼 클린 아키텍처는 소프트웨어 설계 방법론으로 주로 웹이나 모바일 앱의 아키텍처로 자주 활용된다고 합니다. 단순히 프레임워크를 사용할 줄 아는 수준을 넘어, 저를 포함하여 조금 더 체계적이고 소프트웨어를 만들고 싶은 분들이라면 오늘 내용에 주의를 기울여보면 좋은 통찰을 얻어갈 수 있으시리라 생각합니다. 아키텍처? 왜 알아야할까. 소프트웨어 개발자로 일하다보면, 소프트웨어 아키텍처에 관한 이야기와 글들은 평소.. 기타 2021. 6. 24.

• 

  프론트엔드 면접 질문 정리 ⑤ TypeScript 질문 서론 오늘은 프론트엔드 개발에 화두 중 하나인 타입스크립트에 관한 인터뷰 질문들을 정리해보았습니다. 해당 글을 번역한 글이므로, 원문을 확인하고자 하시는 분들은 직접 방문하셔서 확인해보시길 추천드립니다. 본론 타입스크립트의 특징은 무엇인가요? 기준 TypeScript JavaScript 패러다임 객체 지향 언어 스크립트 언어 Typing Method 정적 타이핑 동적 타이핑 Module System 지원 미지원 Optional Parameters 지원 미지원 언어의 패러다임 : 물론 Tsc도 자바스크립트에 속한다. 그러나 Tsc는 클래스와 인터페이스 그리고 정적 타이핑을 제공하는 자바나 C#과 같은 객체 지향 프로그래밍 언어이기도 하다. 타이핑 방법 : 자바스크립트는 기본적으로 변수에 값이 할당될 때, .. Language/JS(Node.js) 2021. 5. 27.

• 

  프론트엔드 직무 면접장에서 받았던 질문 목록들 웹/네트워크 사용자가 웹 서버로부터 파일을 전송 받기까지의 과정을 설명해봐라. CSR과 전통적인 렌더링 방식/SSR과의 차이를 설명해봐라. HTTP Status code에 대한 설명을 해봐라. 401과 403의 차이점은? CSS Scss와 css-in-js 방식의 차이점 그리고 장/단점을 설명해봐라. JavaScript TypeScript를 써봤는지? 정적 타이핑과 동적 타이핑의 차이점을 이야기해봐라. 동기 프로그래밍과 비동기 프로그래밍의 차이는 무엇인가? 콜백 지옥을 들어봤는지? 콜백지옥의 해결 방법은 무엇인가? ES6 이상의 문법을 사용해봤는지? 여러 개의 비동기 응답을 한 번에 받도록 처리하려면 어떻게 해야 하는지? React/React Native SPA란 무엇인가? 기존 렌더링 방식과의 차이점은.. 기타 2021. 5. 18.

• 

  [JavaScript 내장함수 다루기 ③] Array.Prototype.map, 배열의 원소를 1:1 매핑해보자. Array.Prototype.map arr.map(callback(currentValue, index, array), thisArg) 오늘 JavaScript 내장함수 다루기에서 다뤄볼 함수는 map 함수입니다. map 함수에 대해 알아보기에 앞서, 간단하게 map 함수를 사용해보겠습니다. map 함수 안에 콜백함수를 등록합니다. 콜백함수의 파라미터로 아무런 변수로 지정한 뒤, 이를 계산에 활용하여 return 합니다. const a = [1, 2, 3]; const doubled = a.map((num) => { return num * 2; }); console.log(a === doubled) // false // a = [1, 2, 3]; // doubled = [2, 4, 6]; map 함수가 동.. Language/JS(Node.js) 2021. 5. 17.

• 

  프론트엔드 면접 질문 정리 ③ CSS 질문 박스 모델에 대하여 설명해보세요 CSS에 포함되는 모든 요소의 외장은 박스이며 주어진 태그의 특성에 따라, 블록 박스와 인라인 박스로 나뉜다. 블록 박스의 대표적인 태그는 div이며, 인라인 박스의 대표적인 태그는 span이다. CSS box는 콘텐츠/패딩/테두리/여백 총 4가지 영역으로 구성되는데, 블록 박스는 해당 영역이 모두 적용되어 구성되며, 인라인 박스는 컨텐츠 영역만으로 구성된다. 또한 블록 박스는 줄바꿈이 일어나며, width와 height을 지정해줄 수 있고 padding/margin/border 영역이 적용된다. 인라인 박스는 세 특징들 모두 해당되지 않는다. padding은 border와 콘텐츠 영역 사이에 위치하며, margin은 박스 주변의 여백을 지정하며 border는 박스 여백과.. Web/CSS 2021. 5. 17.

• 

  프론트엔드 면접 질문 정리 ② JavaScript 질문 이벤트 위임이란? 이벤트 위임은 event bubbling을 활용해 이벤트 리스너를 하위 요소에 추가하는 대신 상위 요소에 추가하여, 이벤트 핸들러를 줄임으로써 메모리 사용을 줄이는 방법을 말한다. 이벤트 전파의 의미와 그 종류? 이벤트 전파란 여러 이벤트가 발생하는 순서를 정하는 방식을 말한다. 이는 HTML 태그가 중첩되어 있기 때문이며, 여러 태그에 각각 이벤트가 설정되어 있을 때(이게 중요하다! 만약 자식 태그에만 이벤트가 등록됐을 경우, 부모 태그는 무시하고 자식 태그의 이벤트만 발생될 것이기 때문임) 어떤 것부터 실행할지를 결정하는 것을 말한다. 종류는 이벤트 캡처링과 이벤트 버블링 2가지가 있다. 이벤트 버블링이란 하위 태그에서부터 상위 태그로 올라가는 것을 말한다. 기본적으로 설정된다. 이.. Language/JS(Node.js) 2021. 5. 14.

• 

  [JavaScript 내장함수 다루기 ②] Array.Prototype.Filter, 조건에 부합하는 값만 반환한다. Array.Prototype.Filter(callback) Filter 함수는 자바스크립트를 쓸 때 자주 쓰이는 함수 중 하나로, 배열 원소들 중 일부 값을 추출해내기 위하여 사용한다. 사용방법은 filter의 매개변수로 callback 함수를 두되, 해당 함수는 return 값으로 true 혹은 false 값을 갖는 함수여야 한다. const objArr = [ { id: 1, data: "리액트 초급 배우기", checked: true, }, { id: 2, data: "리액트 중급 배우기", checked: true, }, { id: 3, data: "리액트 고급 배우기", checked: false, }, ] const filterdObjArr = objArr.filter((obj) => obj... Language/JS(Node.js) 2021. 5. 12.

• 

  [JavaScript 객체 파헤치기 ①] Object.key(obj), 객체의 필드 값을 배열로 반환해준다 자바스크립트의 객체 다루기 그걸 알고 있었는가? 자바스크립트의 대부분의 요소들은(배열, 함수 등) 사실 객체다. 자바스크립트의 데이터 형식에는 Primitive Types(원시타입)와 Non Primitive Types(비원시타입)로 나뉜다. 전자는 string, number, null, boolean, undefined, symbol 총 6개가 속하고 후자는 functions, arrays and objects가 속하는데, 이들 역시 전부 객체로 간주된다. 이와 관련하여선 추후에 포스팅으로 설명하겠다. 만약 관심이 있는 사람은 해당 글을 참고하면 좋을 것이다. 객체란? '객체란 무엇인가'에 대해서는 이미 블로그에서 다룬 바 있다. 내용을 요약하면 객체란 각각 키(key)와 값(value).. Language/JS(Node.js) 2021. 5. 12.

• 

  프론트엔드 면접 질문 정리 ① HTML 질문 doctype은 무엇을 하나요? doctype은 docuemnt type의 약자이다. 이는 웹 브라우저에게 해당 문서의 HTML 버젼을 알려주는 역할을 한다. 여러 언어로 되어 있는 콘텐츠의 페이지를 어떻게 제공하나요? 여러 언어로 제공되는 페이지를 제공하기 위해선 페이지 내의 내용이 하나의 일관된 언어로 표시되어야 한다. 브라우저가 HTTP 요청을 서버에 보내면, 대게 Accept-Language와 같은 기본 언어에 대한 설정 정보를 보낸다. 서버는 이 정보를 확인하고 해당 언어에 맞는 문서를 반환한다. 이 때 태그의 lang 속성을 선언해줘야 한다. 서버는 일반적으로 백엔드 프레임워크의 도움을 받아, 특정 언어로 HTML 마크업에서 YML 또는 JSON 형식의 특정 언어에 대한 placeholder와.. Web/HTML 2021. 5. 10.

• 

  [JavaScript 내장함수 다루기 ①] Array.Prototype.Sort, 자바스크립트로 정렬하기 Array.Prototype.sort(sortFunc) JavaScript로 코딩테스트 문제를 풀다보면, sort 함수를 사용해서 값들을 정리하는 경우가 많다. 배열의 내장함수인 sort 함수에 대해서 알아보자. 문자열 정렬은 ASCII 문자 순서대로 // 문자열 정렬 const months = ['March', 'Jan', 'Feb', 'Dec']; months.sort(); console.log(months); // expected output: Array ["Dec", "Feb", "Jan", "March"] // 숫자 정렬 const array1 = [1, 30, 4, 21, 100000]; array1.sort(); console.log(.. Language/JS(Node.js) 2021. 5. 6.

• 

  [핀테크] 마이데이터란 무엇인가? 마이데이터 용어의 등장배경 2020년 8월 5일부터 개정된 데이터 3법(개인정보보호법·정보통신망법·신용정보법 개정안)이 시행되자, 마이데이터(MyData)시대가 열리게 되었다는 기사가 연이어 등장하기 시작했다. 왜 마이데이터인가? 대부분의 사람은 자신의 데이터가 어디에 저장돼서 어떻게 이용되고 있는데, 그 까닭은 데이터가 곳곳에 흝어져 있기 때문이다. 문제는 기업들이 소비자의 정보를 활용해, 광고에 이용하고 있었다는 점이다. 또한 소수의 금융기업들이개인 정보들을 독/과점하는 형태가 오래 지속되었다. 이러한 문제들을 해결하기 위해, 정부도 ‘마이데이터’ 개념을 활용해 개인이 데이터를 주도적으로 관리할 수 있도록 법적, 기술적 기반을 마련했고 이 법을 통해 개인이 데이터를 통제하고 주고 싶은 기업에 마음대로.. 취ㆍ창업ㆍ투자ㆍ칼럼ㆍ멘토링/도메인 (이커머스, 핀테크) 2021. 5. 4.

• 

  2020년 회고록, "프로그래머로 도전한 해" 뒤늦게 작성하는 2020년 회고록 2021년이 16일 지난 시점에서 블로그 회고록을 기록하려 한다. 그동안 나를 괴롭히던 프로젝트가 어느정도 완성되가고 있기 때문이다. 2020년은 내게 여러모로 특별한 해이다. 대학교를 졸업했고 공기업 인턴을 6개월 간 경험했으며, 다양한 사람들과 다양한 대화를 나누고 또 내면적으로 성숙해질 수 있던 한 해였다. 100권 가까운 책을 읽으며, 다른 이들로부터 정말 많은 지혜와 노하우들을 전수 받을 수 있던 해이기도 했다. 그래서 이번 포스팅에서는 키워드 별로 올 한 해를 정리해보고자 한다. 2020년은 '좋은 습관의 만들기의 해'였다. 특히 생활적으로 잘한 점은 나의 삶을 더 발전시킬 수 있는 다양한 습관들을 갖은 것이다. 이 습관들은 내 삶 속에서 너무 중요한 역할을 .. 생각정리/회고 2021. 1. 16.