코드를 위한 기록

Figma UI 디자인 & 프로토타이핑 툴 와이어프레임, 프로토타입 제작, 브레인스토밍, 아이디에이션, 다이어그램 제작, 디자인 시스템 구축 Figma 특징 1. 실시간 협업 가능 한 화면에서 여러 명이 동시에 작업할 수 있음 2. 다양한 환경 지원 웹 브라우저 기반이라 브라우저만 사용할 수 있다면 어떤 환경에서도 사용 가능 ex) Mac, Window, Linux 등. 필요하다면 설치하여 사용할 수도 있음 3. 자동 저장 및 버전 관리 자동저장 기능, 누가, 언제, 무엇을 변경했는지 확인할 수 있는 히스토리 기능 4. 다양한 무료 폰트 지원 구글 폰트 설치 없이 사용 가능, 로컬 PC에 저장된 폰트 불러와서 사용 가능 5. 오토 레이아웃 기능(Shift + a) 요소들 사이의 간격과 정렬에 규칙을 부여..

UI(User Interface) 사용자가 제품과 상호 작용하는 시스템 화면상의 그래픽 요소, 키보드, 마우스 등 물리적 요소 GUI(Graphical User Interface) 사용자가 그래픽을 통해 제품/시스템과 정보를 교환하는 작업 환경 프론트엔드 개발자로서 접하는 UI는 대부분 GUI를 뜻함 모바일 디바이스는 물리적 UI가 줄고 GUI가 중요해짐 PC는 키보드를 이용해 텍스트만으로 상호작용할 수 있지만 화면 상에서의 상호작용이 더 직관적이고 간편함 (Window, Mac OS 운영체제 화면, 애플리케이션 화면) (+ 스마트워치, 키오스크, 대중교통 터치스크린 안내판 등) UX(User Experience) 사용자가 시스템/제품/서비스를 직간접적으로 이용하면서 느끼고 생각하는 총체적 경험 ex) ..

냄새 컴퓨터 프로그래밍 코드에서 더 심오한 문제를 일으킬 가능성이 있는 프로그램 소스 코드의 특징 휴리스틱 불충분한 시간이나 정보로 인하여 합리적인 판단을 할 수 없거나, 체계적이면서 합리적인 판단이 굳이 필요하지 않은 상황에서 사람들이 빠르게 사용할 수 있게 보다 용이하게 구성된 간편추론의 방법 주석 주석은 코드와 설계에 기술적인 설명을 부연하는 수단임 C1: 부적절한 정보 다른 시스템이 저장할 정보는 주석으로 적절치 못함 (소스 코드 관리 시스템, 버그 추적 시스템, 이슈 추적 시스템, 기타 기록 관리 시스템) 일반적으로 작성자, 최종 수정일, SPR(Software Problem Report) 번호 같은 메타 정보만 주석으로 기재 C2: 쓸모 없는 주석 오래된 주석, 엉뚱한 주석, 잘못된 주석 쓸모..

JSON(Javascript Object Notation) : 서로 다른 프로그램에서 데이터를 교환하기 위해 만들어진 객체 형태의 포맷 많은 언어에서 범용적으로 사용하는 유명한 포맷임 네트워크를 통해 객체 내용을 전송하려면 - 수신자와 발신자가 같은 프로그램을 사용하며 - 문자열처럼 범용적으로 읽을 수 있어야 하는데 객체 타입을 문자열로 변환하기 위해 메서드나 형변환을 시도하면 아래처럼 [object Object] 반환 obj.toString() String(obj) // [object Object] 이를 해결하기 위해 JSON 형태를 사용 JSON.stringify() 객체를 JSON으로 변환 = 직렬화(serialize) (문자열 타입) JSON.parse() JSON을 객체로 변환 = 역직렬화(de..

재귀 recursion 사전적 정의: 원래의 자리로 되돌아가거나 되돌아옴 -> 어떠한 것을 정의할 때 자기 자신을 참조하는 것 재귀 함수 : 자기 자신을 호출하는 함수 재귀를 사용하는 상황 1. 주어진 문제를 비슷한 구조의 더 작은 문제로 나눌 수 있는 경우 2. 중첩된 반복문이 많거나, 반복문의 중첩횟수(number of loop)를 예측하기 어려운 경우 3. 반복문(while, for)으로 작성된 코드를 더욱 간결하고 이해하기 쉽게 작성하고 싶은 경우 재귀로 문제를 해결하는 방법(이론) 1. 문제를 작게 쪼개기 2. 문제가 더 이상 작아지지 않을 때까지 1단계 반복 3. 가장 작은 단위의 문제를 해결함으로써 전체 문제 해결 재귀적 사고를 쉽게 할 수 있는 가이드 1. 재귀 함수의 입력값과 출력값 정의..

JCommon 라이브러리 내부의 org.jfree.date 패키지 내의 SerialDate 클래스 분석 이 클래스의 제작자는 '데이비드 길버트'임 - 숙련된 우수한 프로그래머 - 절제력 - 전문가 정신 - 본인의 코드를 오픈 소스로 공개 이 클래스를 분석하는 것은 비난이 아니며 비판과 검토임 이 과정을 통해 제작자도 성장할 수 있음 SerialDate는 날짜를 표현하는 자바 클래스 자바는 이미 java.util.Date, java.util.Calendar 등과 같은 클래스를 제공하는데 SerialDate 클래스가 왜 필요할까? 내장 클래스의 결과값이 너무 정밀해서(SerialDate.Java의 68번째줄부터 참고) - 1000분의 1초의 정밀도로 시각을 표현함(시간대에 따라 날짜가 달라짐) -> 하루 중..

객체 초기자 Object initializer : 중괄호{}로 묶인 0개 이상의 프로퍼티명과 값의 쌍을 콤마로 구분한 목록 { a: 'foo', b: 42, c: {} } ES6의 computed property name 구문 키를 변수로 받아오고 싶을 때 대괄호 사용 let word = 'newKey' let obj = {[word]: 'newValue'} // {newKey: 'newValue'} React value의 null, undefined 값 // 입력칸에 'hi' 조회됨, 변경 불가 // 입력칸에 입력 가능 22.12.14

섹션2 시작 전, 세운 나의 목표 (달성여부) 오늘 배운 내용 오늘 블로깅 (⭐️⭐️⭐️⭐️⭐️) 매일 책 읽기 (⭐️⭐️⭐️⭐️) 매일 산책 (⭐️⭐️⭐️⭐️) 총평 고차함수부터 객체 지향, 비동기, React, 서버까지 무엇하나 쉽지 않았던 Section 2! 끝난 것이 다행이면서, 앞으로는 어떤 것을 배울지 기대도(조금..), 걱정도(많이..) 된다! KEEP 체력 관리 6시 40분에 일어나서 7시 40분까지 산책(11/7~) Unit마다 학습 목표 체크하기 이해 못한 부분은 없는지, 건너뛴 부분은 없는지 모각코(화면공유) 스터디 20시부터 당일 배운 내용 복습, 블로깅 매일 책 읽기(한 장이라도) Problem 늦게 잠드는 것 보통 새벽 한시까지 깨어있음 여유 부리기 중간 중간 샛길로 빠져서 남들..

일반적인 프레임워크는 개념이 단순하고 정의는 정밀하고 구현이 우아함 자바 프레임워크 JUnit의 코드 살펴보기 JUnit의 저자는 많지만 그 시작은 켄트 벡과 에릭 감마이다 켄트는 자바를 배우고 싶었고 에릭은 켄트의 스몰토크 테스트 프레임워크를 배우고 싶어하여, 두 사람이 함께 비행기를 타고 아틀란타로 가다가 JUnit을 만들었음 "비좁은 기내에서 엔지니어 둘이 랩탑을 꺼내 코드를 짜는 일 밖에 다른 무엇을 하겠는가?" ^^.. JUnit의 개선할 점 1. 변수 접두어 'f-' 없애기 2. 의도를 명확히 표현하기 위해 조건문을 캡슐화하기 if(shouldNotCompact()) { ... } private boolean shouldNotCompact() { return expected == null ||..

arr.findIndex(함수) 함수를 만족하는 첫 번째 요소의 인덱스 리턴 arr.find(함수) 함수를 만족하는 첫 번째 요소를 리턴 객체 추가, 갱신하기 // 반복문 사용 for (let prop in addObj) { preObj[prop] = addObj[prop] } // spread 사용 preObj = {...preObj, ...addObj} app과 router(서버 설정) 경로를 목적에 맞게 여러 파일로 분리하여 유지보수하기 쉽게 함 app 처음 도달하는 경로 router 세부경로 const app = express(); app.use() ... module.exports = app; const router = express.Router(); router.use() ... module...