본문 바로가기

전체보기

 (70)
201209_TIL 오늘한 일 Javascript 고차함수 coplit 문제풀이(1 ~ 22번) 고차함수란? array.filter() 와 array.map() 함수 표현식(function expression)과 함수 선언식(function declaration) declarative(선언형) vs imperative(명령형) 오늘 느낀점 고차함수란 1. 함수를 인자(argument)로 받는 함수 / 2. 함수를 리턴하는 함수(커리함수) / 3. 함수를 인자로 받고, 함수를 리턴하는 경우 이때, 인자(argument)로 전달되는 함수를 콜백 함수(callback function)이라고 한다. 함수 선언식과 함수 표현식의 가장 큰 차이점은 호이스팅이다. 함수 선언식의 호이스팅은 코드의 유지 보수 측면에서 좋지 않을 수 있다...
201203_TIL 오늘한 일 twittler 기능 개선(함수 추가) tweet 한 날짜 인간 친화적인 방식으로 표현(ex. 1년전, 1달전, 1일전, 1시간전, 1분전, 1초전, 방금전) 'check new tweet' 버튼을 눌렀을 때 날짜도 랜덤으로 보이게 하기 오늘 느낀점 현재 시간을 기준으로 tweet 한 시간을 빼서 표현했다(new Date() - new Date(writeday)). 이 값을 이용해 if 처리했다. function prinitTimeBefore(wrday) { let today = new Date(); let writeday = new Date(wrday); let timeBef; // 년도 if(today.getFullYear() > writeday.getFullYear()) { timeBef..
201128_TIL 오늘한 일(11.27 ~ 11.28) twittler 함수 구현하기(프로그래밍) 유저 글 등록 > 새로운 데이터로 추가 > 글 조회 유저 이름과 내용은 필수 항목으로 구현하기(if alert) 글 작성 시간 0000-00-00 00:00:00 형식으로 출력(new Date) 'check new tweet' 버튼 클릭시 랜덤하게 데이터로 추가하고 보여주기 유저 이름 클릭시 같은 이름으로 작성된 글 조회하는 필터링 기능 추가하기 새로운 추가된 데이터는 최상단에 출력(prepend) 'Tweet!' 버튼과 'check new tweet' 버튼이 true할 때는 새로고침 효과 주기(현재 데이터 + 추가된 데이터 보여주는 방식) 유저 이름을 클릭하고 필터링되어 화면이 바뀌었을때 'Go Back' 버튼 보여주기(v..
201123_TIL 오늘한 일 figma 사용법 youtube 찾아보기 figma 를 이용해 twittler mockup layout 만들기 내가 만든 twittler mockup Figma Tutorial 피그마 간단하게 알아봅시다 피그마 기초 강좌 - Part1 피그마 기초 강좌 - Figma 빠르게 훑어보기 오늘 느낀점 figma 를 알게 되고 배우는 시간이 매우 즐겁고 유익했던 것 같다. 화면을 구성하는 레이아웃과 컴포넌트들을 시각화하는 작업이고, 구체화가 잘 될 수록 나중에 이 그림을 보고 개발자가 쉽게 코딩할 수 있을 것 같다라는 느낌을 받았다. 그리고 실무에서 좋은 협업 툴로 사용하고 있다고 한다. figma 를 배우면서 front 분야와 웹 디자인에 흥미가 생겼다. Photoshop을 교양 과목으로 잠깐 배웠..
201116_TIL 오늘한 일 HTML, css 를 사용하여 간단한 프로필 HTML 만들기 화면 영역을 목적에 따라 의미있게(semantic) 구분하기(ex. header, nav, section, article, footer 등) css 를 사용하여 각각의 elements 의 위치 정하기 margin, border, padding 개념 알기 id, class 알맞게 사용하기 오늘 느낀점 의미적 요소(Semantic elements)는 브라우저에게 요소의 의미나 목적을 명확하게 알려주는 요소이다. 태그는 HTML 문서 중에서 논리적인 섹션을 나타내지만 는 그 자체로는 아무런 의미가 없다. 단순히 컨테이너의 역할만 하는 것이다. 물론 개발자는 id나 class 이름을 와 함께 사용해서 의미를 전달할 수 있지만 브라우저는 이것..
201114_TIL 오늘한 일 HTML(HyperText Markup Language) 란? "구조를 표현하는 언어", "웹페이지의 틀을 만드는 마크업 언어" HTML의 기본 Tag : opening tag, closing tag, self-closing tag, div, span, ul, ol, li input type 설정방법 : Text, Password, Radio, Check Box class, id로 semantic 하게 분류, 사용, 의미를 부여 오늘 느낀점 radio button 과 check box 의 차이점은 다중선택의 유무이다. radio button 과 check box 의 grouping 은 name 속성으로 한다(같은 name 은 같은 group 이다). 각각의 값은 value 속성으로 설정한다. ..
201111_TIL 오늘한 일 pair / Testbuilder STEP 3, PASS하기 Testbuilder 코드 수를 줄이기 위한 방법 pair 와 논의(단순 노가다식 지양, 객체지향 프로그래밍) template literal `${}` 사용법 복습 repeat(), Math.random(), Math.round(), Math.floor() 사용법 복습 www.youtube.com/watch?v=7EmboKQH8lM www.youtube.com/watch?v=oneGCBiPK_Q 오늘 느낀점 Testbuilder 를 진행하면서 단순히 노가다식으로 하는 방법으로 하기 보다는 객체지향으로 프로그래밍하고 싶다는 욕심이 생겨 도전해봤다. 혼자 하기에는 조금 힘들었을텐데 pair 와 함께 진행하면서 막힌 부분에서도 잘 해결됐다..
201109_TIL 오늘한 일 Testbuilder - 테스트 주도 개발(TDD: Test-driven Development) Test Framework 가 어떤 역할을 하는가? mocha, chai 시작하기 mocha 에서 사용하는 describe , it 의 용도 chai 에서 사용하는 assert , expect 의 용도 오늘 느낀점 Testbuilder 를 처음 배워봤는데, 이 기술을 알기전에는 난 무조건 console.log 를 하나하나 찍어보며 무슨 일이 일어나고 있는지 고민하며 확인해왔다. 하지만 그것보다 작은 테스트들을 통해 현재의 코드를 확인하는 방법이 더 나을 수 있다라는 것을 깨달았다. TDD란 내가 바람직하다고 생각하는 코드의 결과를 미리 정의하고, 이것을 바탕으로 코드를 작성하는 방법이다. 테스트를 ..

티스토리툴바