티스토리

FED Front-End-Developer

검색하기

블로그 홈

FED Front-End-Developer

kool-jay.tistory.com/m

프론트엔드 개발자로 살아가기

구독자: 1

방명록 방문하기

주요 글 목록

알아도 쓸모없는; Hypertext. 어색하지 않게 한국어로 소개하고 싶었지만 가능하지 않을 것 같은(위키피디아에서 초본문이라고 소개하는) 하이퍼텍스트. 하이퍼텍스트는 문서 안의 하이퍼링크(참조)를 통해 다른 문서로 즉시 접근할 수 있는 문자를 말한다. html의 ht가 바로 하이퍼텍스트이며 앞서 설명한 내용 보다 html 단어를 봤을 때, 그 의미 파악이 더 쉬웠을 것이다. 1960년대에 테드 넬슨이 하이퍼텍스트라는 개념을 처음 고안했다는 글들이 많이 보이지만 이 개념은 우리가 광복을 맞이하던 해, 1945년, 베네바 부시가 기고한 ’As We Think’에서 메멕스(=MEMory EXtender) 시스템 제안과 함께 시작 되었으며 그것을 테드 넬슨이 하이퍼텍스트라는 단어를 사용하며 정리했다고 보는게 맞을 것 같다. 당연하게도 테드 넬슨은.. 공감수 0 댓글수 0 2023. 7. 1.
두개의 물류 센터 오픈을 동시에 지원한 방법 주의 1. 이 글은 소속 회사의 입장을 대변하지 않습니다.주의 2. 이 글에는 늘 그렇듯이 현명함 보다는 멍청함이 묻어 있습니다.주의 3. 선택한 방법과 주장하는 바가 옳지 않을 수 있습니다.주의 4. 위의 이유로 예고없이 삭제될 수 있습니다.주의 5. 수정할 사항이 있다면 댓글에 남겨주세요. 검증 후 본문을 업데이트 하겠습니다. 배경가끔 개발자들이 완벽한 프로덕트를 위해 무언가를 늦춰야 한다고 이야기합니다. 맞습니다. 가끔은 시간 보다는 품질이 중요할 때가 있습니다. 하지만 대부분의 사업은 충분한 시간이 오히려 적이 되는 경우도 많습니다.(소속 회사의 사정을 말하는게 아닙니다) 프로덕트, 또는 서비스는, 그 가치가 지속 가능하기 위해서 이윤을 남겨야 하거나 그것을 벌어들이는 도구일 수 밖에 없습니다. .. 공감수 0 댓글수 0 2023. 6. 22.
[JavaScript] a == 0 && a == 1 은 true가 될 수 있다 if (a == 0 && a == 1) 며칠 전 꽤 흥미로운 짤을 접했습니다. 그냥 지나가는 짤이라 생각하고 별 생각이 없었지만 해당 게시물에 페친분들의 댓글이 계속해서 달리면서 위의 난해한 코드를 직접 구현해 보게 되었습니다. 자바스크립트를 다뤄본 개발자라면 위 구문의 'a'는 '변수'라고 자연스레 가정할 것입니다. 하지만 일반적인 변수로는 위의 평가를 통과할 수 있는 구문을 작성할 수 없습니다. 그렇다면 어떻게 접근해야 할까요?? 이와 비슷한 기능을 하는 것은 무엇일까요?? 만약 a가 일반적으로 프론트엔드 개발자들이 담는 예측할 수 있는 값이 아니라 프로퍼티라면?? 아마 getter와 setter를 활용하여 해당 값을 담고 반환할 수 있겠죠?! 그렇다면 window의 프로퍼티로 1. 일반적인 변수 형.. 공감수 1 댓글수 0 2021. 1. 16.
[자바스크립트] JavaScript Async Defer 주의 1. 이 글은 async / await와 아무런 관련이 없습니다.주의 2. 이 글에는 멍충함이 묻어있을 수 있습니다.주의 3. 테스트 방법이 잘못됐을 수 있습니다.주의 4. 위의 이유로 예고없이 삭제될 수 있습니다.주의 5. 수정할 사항이 있다면 댓글에 남겨주세요. 검증 후 본문을 업데이트 하겠습니다. 의심큰 프로젝트를 앞두고 PoC를 진행하다 기본적인 부분을 돌아보는 시간을 갖게 되었습니다. 어플리케이션에서 전반적으로 사용하는 기능을 개발해야하는데 평소에 알고있다 생각했던 로딩과 실행에 관한 기본적인 것들을 확인하던 중, 제가 알고있던 사실을, 제가 검증한 적이 없다는 것을 깨닫고 스펙을 확인한 후 나름의 환경을 구성하여 테스트를 진행했습니다.script의 async / defer 요소제가 검증하.. 공감수 4 댓글수 0 2020. 12. 5.
[리액트를 다루는 기술] (개정판) :후기 리액트를 배워 보자!!! 프론트엔드 개발자로서의 삶을 살아가면서 아직도 접해보지 않았던 이름이 있었습니다. 10에 4명 이상은 리액트로 프로젝트를 진행하는 요즘에도 조직과 개인적 이유로 리액트 스터디를 미뤄오다 우연치 않은 기회에 [리액트를 다루는 기술]을 획득(?!)하여 간단한 후기를 남기게 되었습니다. * 현재까지의 스터디 분량으로 리뷰를 진행하며 책의 전체 리뷰는 완독 후 해당 포스트에 업데이트 할 예정입니다. 저는 마크업과 UI를 개발하다 AngularJS를 접하며 프론트엔드 개발자로 성장 하였습니다. 처음 접하게 된 프레임워크와 프론트엔드 개발이 이유가 된건지 AngularJS (지금은 사용하지 않습니다... 다 까먹었어요...) / Angular에 대한 애착이 있었고 토이 프로젝트 혹은 프로토.. 공감수 0 댓글수 0 2019. 11. 18.
[Vue.js + PWA + Prerender] PWA와 Prerender 적용 웹 앱 개발 프로그레시브 웹 앱은 이미 수년전부터 큰 화두였습니다. 오늘은 PWA를 적용하며 느끼고 고민했던 것들 + 약간의 팁(...이라고 말하기 민망한 주의사항)을 공유하고자 합니다. * 글에 앞서 해당 내용은 주관적인 생각이 20,000% 포함되어 있으며 이 글의 내용이 개발 가이드는 절대 아님을 밝힙니다. 수정 보완해야 할 내용이 있다면 댓글에 공유 부탁드립니다. (_ _) * 이어서 간단한 소개를 할 것이지만, 혹시나 PWA를 처음 들어보신다면, 아래의 링크들을 참고 해보세요. 많은 도움이 되실 것 같습니다. - 웹 펀더멘털 여러분의 첫 Progressive Web App | Web Fundamentals | Google Developers Pete is a Developer Advocate 소개 웹 앱, .. 공감수 4 댓글수 4 2019. 10. 24.
[TDD] 테스트 주도 개발 도입기 (Vue.js) Test-Driven Development "테스트 주도 개발(Test-driven development TDD)은 매우 짧은 개발 사이클을 반복하는 소프트웨어 개발 프로세스 중 하나이다. 개발자는 먼저 요구사항을 검증하는 자동화된 테스트 케이스를 작성한다. 그런 후에, 그 테스트 케이스를 통과하기 위한 최소한의 코드를 생성한다. 마지막으로 작성한 코드를 표준에 맞도록 리팩토링한다. 이 기법을 개발했거나 '재발견' 한 것으로 인정되는 Kent Beck은 2003년에 TDD가 단순한 설계를 장려하고 자신감을 불어넣어준다고 말하였다." - 위키피디아 테스트 주도 개발 (=TDD)은 테스트 코드를 먼저 작성하고, 작성된 테스트 케이스들을 이용하여 반복적으로 테스트하며 개발하는 것을 말합니다. 처음 TDD를 도.. 공감수 5 댓글수 0 2019. 7. 16.
[최근 검색어 / 데이터 구조] 최근 검색어를 담당하는 클래스 생성 [자료 구조 활용] 최근 검색어 기능 구현 예제 * 해당 예제는 복기의 일부 입니다. 소개되는 소스를 그대로 적용하면 여러분의 프로젝트에 많은 허들을 만들 수 있습니다. 이전 포스팅에서 자료구조 중 스택에 대해 알아봤습니다. 하지만 스택이나 큐 외에도 실제 프로젝트에서는 해당 스펙(기획안)에 따라서 그에 맞는 자료구조와 기능 들이 필요합니다. 만약 최근 검색어를 담아두는 기능을 구현한다고 가정해 봅시다. 이의 구현을 위해서는 다음과 같은 기능이 필요할 것입니다. 1. 사용자가 어플리케이션을 처음 사용하지 않고 검색한 내용이 있다면 그 내용을 바탕으로 초기화가 이루어져야 한다. 2. 최근 검색어는 모든 내용을 저장하지 않고 반드시 주어진 길이에 맞는 갯수만큼의 데이터만을 가지고 있는다. 3. 이미 검색된 .. 공감수 0 댓글수 0 2019. 6. 24.
[자료구조 / javascript] Stack 클래스 예제 [LIFO / Stack class] Last In, First Out!!! 스택 구조는 bottom에서부터 top으로 쌓이는 자료형 입니다. 그렇기 때문에 추가와 삭제가 제일 마지막 원소에서 이뤄집니다. 이는 자바스크립트에서 제공하는 내장 메서드 중에서 push와 pop이랑 같은 역할을 합니다. 아래는 WeakMap을 이용한 Stack 클래스입니다. // 스택 클래스 const items = new WeakMap; class Stack { constructor () { items.set(this, []); } push (element) { const s = items.get(this); s.push(element); } pop () { const s = items.get(this); const r = .. 공감수 0 댓글수 0 2019. 6. 21.
Vue.js Style Guide 적용 [Vue.js Style Guide 적용기] 이런저런 이유로 1년 가까이 블로그 활동을 접었다가 다시 시작합니다. 그동안 이직도 했고 개인적인 이유로 공부는 하면서도 그에대한 정리가 없었습니다. 이제 연말이 가까워지니 다시금 프론트엔드 개발자, 조직과 사회의 구성원으로서 삶(?!)을 정리해 보며 게을러진 저를 채찍질하기 위해서 운동과 블로그 활동을 재개하려 합니다. 물론 언제까지 포스팅 하려는 의지가 계속될지 모르겠지만... 다시 시작하는 의미로 게시물과 카테고리 정리를 하고나니 블로그가 너무 볼것이 없어 이번 프로젝트에서 코드 리팩토링을 하며 적용한 Vue.js 스타일 가이드에 대해 간단한 수행기를 포스팅합니다. Style GuideBETA Angular와 다른 프레임워크, 언어와는 다르게 (자바스크립.. 공감수 2 댓글수 1 2018. 10. 28.
[자바스크립트] 메모이제이션(Memoization) 패턴 [Javascript] 메모이제이션은 무엇인가?! 피보나치 수열은 또 뭐여... 토끼랑 번식?! 저급 개발로 페이지를 뚝딱뚝딱 찍어내며 공장의 부속품처럼 일할 때에는 반복문과 조건문만 알면 다 되는구나 굉장히 이상한 생각을 한적이 있었다. 지금 누군가 그런말을 한다면 생각을 바꾸라는 말부터 하겠다. 아무튼 오늘은 메모이제이션에 관하여 알아보려 한다. 메모이제이션(memoization)은 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다. 동적 계획법의 핵심이 되는 기술이다. 메모아이제이션이라고도 한다. 위는 위키에 정의된 메모이제이션에 관한 글이다. 함께 나온 예제를 보며 이해를 하려고.. 공감수 5 댓글수 1 2017. 6. 28.
[자바스크립트] 초간단 테스트 스위트 만들기!! 자바스크립트의 테스트 스위트를 만들어 보자.초간단이지만 이것도 시간이 든다... 바쁘면 다른 테스트 툴을 쓰기를 격하게 권장한다... 오늘은 간단한 테스트 스위트를 만들어 보며 왜 이런 쓸데없는 짓 함수의 name 프로퍼티에 뭐가 저장되는지 눈으로 확인해보자.assert()라는 value와 desc라는 파라미터를 가진 간단한 테스트 스위트를 작성할 것이다.value는 테스트를 평가할 값이고 desc는 이름과 마찬가지로 디스크립션이다. 아래의 JSFiddle을 확인하자. 자바스크립트를 확인하고 Result 탭을 확인해보자. 모든 함수에는 name 프로퍼티가 생성되며 이를 눈으로 확인할 수 있을 것이다. 그런데 표현식의 기명함수는 우리가 예측한 것과 약간은 다르다. 왜 변수명이 아닌것인가?! 알아(서) 맞춰.. 공감수 1 댓글수 0 2017. 6. 7.
[자바스크립트] 로깅 함수 [자바스크립트] 로깅 함수테스트를 위한 코드를 작성할 시간 따위는 주지 않는 세상이지만... 요즘은 술도 많이 마시지만 책도 많이 보고있다. 파이썬 한권 자바스크립트 두권째... 물론, 내가 알아야 할 부분까지만 읽지만 (비록 1 ~ 2 챕터 분량만 남기지만...) 요새는 바쁜 것 없이 바쁜 나날이다. 코드 디버깅을 위해서 우리는 무수히 많은 console.log, console.dir을 찍어대며 '도대체 내가 왜, 무슨 부귀영화를 누리자고 이짓을 하나'를 백만번쯤 외치고 또 외쳤을 것이다. 지금부터 소개할 것은 그것을 대체하기는 개뿔... 우아한 방법으로 로깅 마저도 크로스 브라우저로 구현한 코드이다. 아래의 코드는 대부분의 브라우저에서 작동하는 로깅 함수이다. 1. 대부분의 브라우저에서 정상 작동하는.. 공감수 1 댓글수 0 2017. 6. 1.
JavaScript[ECMAScript] 2. 불리언 타입 2. 불리언 타입 아... 괜히 하루에 한번씩 포스팅을 한다했다... 피곤하다... 오늘은 데이터 타입 중에서 조금 중요한 요소를 짚고 넘어가자. (어제 잠시 정신이 나가서 언급 못한 부분이 있다...) 앞서 "1. 데이터 타입"에서는 'null'은 빈 객체를 참조하므로 typeof는 Object를 반환한다고 말했다. 그러면 null과 undefined를 == 연산자로 비교해보면 어떤 결과가 출력될까?! 닥치고 예제를 만들어 보았다. Result를 확인하고 검정색 span 영역을 클릭해보면 깜짝 놀랄것이다. 왜지?? 왜죠?! 아니!!! 이상하지만 null과 undefined는 같다고 출력된다. undefined가 null에서 파생됐기 때문에 표면적으로는 동일한 것으로 정의한단다... (아오...) 그런데.. 공감수 8 댓글수 0 2016. 7. 8.
JavaScript[ECMAScript] 1. 데이터 타입 JavaScript[ECMAScript] 정리 정리한다, 정리한다, 마음속으로 외치며 그날의 피로만 정리하던 나를 반성한다... 1. 데이터 타입 ECMAScript에는 다섯 가지의 '기본 데이터 타입(*Primitive Data Type)'이 존재한다. 종류는 아래와 같다. - Undefined : 정의되지 않은 변수 (변수를 선언한 후 값을 할당하지 않은 경우)- Null : 빈 값 (변수를 선언한 후 'null' 이라는 값을 할당한 경우)- Boolean : 불리언 (참, 거짓)- Number : 숫자- String : 문자열 그리고 '복잡한 데이터 타입'인 객체(Object)가 존재한다.(*Array, Function, Date, RegExp와 같은 데이터는 Object이다.) ECMAScript.. 공감수 5 댓글수 0 2016. 7. 7.
Ionic 하이브리드 앱 Ionic 접하기 휴... 이제는 Ionic이냐... 어찌어찌하다 배우려고 마음만 먹고 공부할 생각도 사용을 고려한적도 없던 Ionic을 보기로 했다. (그냥 쓰윽...) 우선은 Ionic 공식 사이트에서 친해지기 모드로 쑤욱~ 훑어보자. 일단 닥치고 시작하는게 최고!!!.Ionic 공식 사이트 우선 계정을 만들고 Get Started를 눌러 천천히 살펴보자. 1. Install Ionic개발의 기본은 설치다. 가끔 이걸 잊는 사람들이 많다. Ionic을 시작하기 앞서 자신의 맥 혹은 윈도우에 Node.js가 필요하다. NPM을 사용해 cordova와 ionic을 설치한다. $ npm install -g cordova ionic 2. Start a projectcordova와 ionic 설치가 정상적으로.. 공감수 9 댓글수 0 2016. 6. 28.
Angular Material Angular Material얘네는 사람 빼고 다 만들 기세다... 프론트엔드 개발자들의, 아니 모든 개발자들의 숙명과도 같은 신기술 습득에 빡씨게 채찍질을 하는 교관같은 하나의 단체가 있다. 이 곳에 들어가기 위해서는 나같은 미개한 개발자는 다시 태어나야할 수준이지만 그래도 정말정말정말 입사하고싶은 곳, 바로 구글이다. 2년전 즈음에 구글은 머티리얼(혹은 매터리얼) 디자인을 공개했다. 이들의 목표는 야심차게도(어쩌면 그게 당연하게 느껴지지만) 시각 언어의 창조이다. Create a visual language that synthesizes classic principles of good design with the innovation and possibility of technology and scie.. 공감수 11 댓글수 1 2016. 6. 17.
AngularJS $watch $watch란 무엇인가? AngularJS는 '안굴러'가는 '자바스크립트'가 맞다... '$watch는 두려워할 정도로 어렵지 않으며 단순하고 또 유용하다'고 누군가의 기술 블로그에서 본적이 있었다... 물론, AngularJS에 대해서 선행지식이 어느 정도 있다면이라는 가정이 생략되었지만 말이다. 처음 이 $watch라는 녀석을 접했을 때에는 어느 상황에 써야되는지, 또한 $apply와는 뭐가 다른것인지 한참을 헷갈렸었다. (뭐... 혼자서 말도 안되게 무료 코드스쿨 강의만 보면서 B2C 웹앱을 만드는 중이었으니까...) 뭐 그렇다고 지금은 완벽히 명세를 이해했다는 것은 아니지만 아무런 스키마없이 개발을 해야했던 그 시기와는 좀 다르게 '써야 할 때'와 '고쳐야할 곳'을 어느정도 알겠다는 느낌(?!)은.. 공감수 6 댓글수 0 2016. 6. 16.
HTML의 의미와 좋은 마크업 Java나 C와 같은 개발 언어와는 다르게 HTML은 비교적 많은 이들이 쉽게 접근할 수 있는 언어입니다.(그래서 생기는 부작용들도 많지만...) 그런데 이렇게 쉽게 접근할 수 있는 언어를 사용하는 사용자들을 보면 코딩의 품질이 많이 떨어지는데, 그 이유는 무엇일까요?! 왜 쉬운 언어임에도 불구하고 코딩의 품질은 전체적으로 낮을까요?! 오늘은 HTML의 의미와 좋은 마크업에 대해서 알아보도록 하겠습니다.(여기서는 시각적으로 우수한 마크업이 아닌 HTML 부분만을 언급합니다.) HTML은 Hyper Text Markup Language의 약자로 Hyper Text와 Markup Language의 결합어입니다. 여기서 Hyper Text란 인터넷의 아버지라 불리우는 [테드 넬슨]이 처음으로 고안해낸 개념으로.. 공감수 5 댓글수 0 2014. 12. 30.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.