구조적인 CSS 작성 방법의 발전 CSS -> SASS -> BEM -> CSS Modules -> CSS-in-Js(Styled Components) 구조화된 CSS가 필요하게 된 이유 - 프로젝트의 규모와 복잡도가 커지며 함께 작업할 팀원들이 많아짐 - 모바일이나 태블릿 등 다양한 디스플레이 등장 CSS 전처리기(CSS Preprocessor) 컴파일을 통해 CSS문서로 변환(각 CSS 전처리기에 맞는 Compiler를 사용해야 함) CSS의 문제(유지관리 어려움)를 프로그래밍 개념(변수, 함수, 상속 등)을 활용해 해결 반복적인 작업 번거로운 작업(Color 찾기, Tag 닫기 등) 클래스와 상속 등으로 인한 CSS 문서 양 증가 SASS(Syntactically Awesome Style Sheet..
클라이언트/서버 예제 서버는 소켓을 열어놓고 클라이언트가 연결하길 기다리고, 클라이언트는 소켓에 연결해 요청을 보냄 서버 시스템 작업 처리량을 검증하는 전형적인 예( @Test(timeout = 10000) public void shouldRunInUnder10Seconds() throws Exception { Thread[] threads = createThreads(); startAllThreads(threads); waitForAllThreadsToFinish(threads); } 시스템이 클라이언트 요청을 10초 내에 처리해야 한다는 의미 테스트가 실패한다면 - 단일스레드 환경에서 속도를 끌어올릴 방법은 거의 없음(이벤트 폴링 루프 구현) - 다중스레드를 사용한다고 성능이 높아진다는 보장은 없음 ..
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: 쓸모 없는 주석 오래된 주석, 엉뚱한 주석, 잘못된 주석 쓸모..