본문 바로가기

분류 전체보기

[UX 발견하기] 가독성 높은 텍스트 일반적으로 모니터 상의 글자를 읽는 것은 종이에 인쇄된 글자를 읽는 것보다 피로도가 높다. 이러한 악조건에서 사용자의 시선을 유도할 수 있는 방법을 알아보자. [1] 텍스트는 최대한 간결하게 작성하자. 인지과학 Insight 💫 글을 읽을 때 사람의 눈은 '단속성 안구운동'과 '주시'를 반복한다. '단속성 안구운동'이란 눈의 중심이 각 단어에 고정되었다가 다음 단어로 고정되는 빠른 과정이다. '주시'는 해당 단어를 이해하기 위해 순간적으로 정지하는 과정이다. 눈은 한 번에 4~5글자를 포착한다. 행이 바뀌면 눈은 다음 줄로 이동하면서 단속성 운동과 주시를 잠시 멈춘다. 사람들은 짧은 텍스트를 선호한다. 💬 화면으로 글을 읽을 경우, 사람들은 45~72 글자 정도의 분량을 선호한다. (⬅️ 이 문장이 공백.. 더보기
[PR 코드리뷰] 우아한테크코스 프론트엔드 레벨2 - 리액트 로또 미션 리액트를 배우기 시작한 레벨2의 첫 미션은 이다. ✨럭키✨하게도 지난 레벨에서 에서도 리뷰를 도와주셨던 토스페이먼츠의 @Jbee 님께 또 피드백을 받을 수 있었다! 레벨2의 첫 미션은 '리액트 맛보기'로서 기본개념을 습득하는 것을 목적으로 한다. 1, 2단계를 7일동안 소화해야해서 PR을 여느 때보다도 급한 마음으로 보내게 되었다. 레벨1에서 이미 경험해본 로또미션의 로직을 리액트로 옮겨오면서 리액트의 가상돔, JSX, 클래스 컴포넌트, 함수형 컴포넌트, 상태, 이벤트핸들링, Key, Ref, 생명주기 메서드 까지 얕게나마 접할 수 있었다. 미션 1단계 피드백 (1차) 👉 PR 바로가기 1. 컴포넌트 단위를 생각해보면 기존 로또 프로젝트를 옮겨오지 말고 리액트 관점에 맞춰서 재정의하는 것이 더 좋겠다. .. 더보기
[UX 발견하기] 화면 구성의 원칙 '아는 만큼 보인다'라는 말이 있다. 레벨 1 미션을 진행하면서 느낀 점은 UX(User Experience, 사용자 경험)에 대해 아는 것이 너무 없다는 것이었다. 내 의견은 너무 주관적이고, 내 경험은 너무 제한적이었다. 제품의 가치를 올리는, 좋은 UX를 만들려면 일단 뭐라도 좀 알아야겠다 싶었다. 매주 정해진 주제에 대해 심리 요소 또는 인지 과학 요소를 파악하고 유스케이스를 공유하는 스터디가 있으면 참 좋겠다 싶었다. 그리고 만들었다. 앞으로 11주간의 스터디를 통해 33가지 디자인 관점에서 세상을 다시금 바라보고 싶다. 그리고 단련된 습관과 근육으로 레벨3 프로젝트에 조금은 적용해볼 수 있기를 기대해본다. [1] 효율적인 계층구조를 고민하자. 인지과학 Insight 💫 마인드맵을 개발한 알란 .. 더보기
[수업 중 코드리뷰] 우아한테크코스 프론트엔드 레벨1 총정리 우아한테크코스 과정에서 받고 있는 가장 값진 자산중에 하나인 피드백을 정리해보자. 다음은 크루들이 진행한 미션에 대해서 수업시간에 받은 공통 피드백이다. 우아한테크코스 프론트엔드 코치이신 @eastjun 과 @devJang 께서 리뷰를 해주셨다. ( + 로또 미션 업데이트 완료, 2021. 03. 01. ) ( + 유튜브 미션 업데이트 완료, 2021. 04. 07. ) ( + 지하철 미션 업데이트 완료, 2021. 04. 10. ) 계산기 미션 ➕➖ 1. 주석에는 정말 필요한 내용만 주석을 작성하면 읽는 사람으로 하여금 더 많은 시간을 들이게 함을 명심하자. - 코드작성자의 통찰을 포함하기 // e.g. 이 데이터에서 이진트리는 해시테이블보다 40%정도 빠르다. - 결함과 레거시를 명시하기 // e.g.. 더보기
[React] 공식문서로 시작하는 리액트 입문 2편 글이 생각보다 길어져 두 편으로 나누어 작성하게 되었다. 1편에 이어, 리액트는 공식 홈페이지의 '기본 가이드'를 조건부 렌더링 개념부터 이어서 살펴보겠다. 07. 조건부 렌더링 리액트에서는 각 컴포넌트에 원하는 동작을 캡슐화해두고, 조건에 따라 렌더링하게 할 수 있다. A or B 렌더링 애플리케이션의 상태에 따라서 여러 컴포넌트 중 하나만 렌더링할 수 있다. JavaScript의 조건문 활용하거나 JSX 내에서 논리연산자(&&, ?)등을 활용하면 된다. 이 때 조건에 따라 선택된 요소(element)를 저장하기 위해 let으로 선언한 변수를 사용할 수도 있다. 만약 조건식이 너무 복잡해진다면 컴포넌트를 분리해야하는 타이밍이 아닌지 생각해보자. // JavaScript 조건문 활용 function Gr.. 더보기
[React] 공식문서로 시작하는 리액트 입문 1편 우아한테크코스 프론트엔드 과정의 레벨 2는 리액트로 진행된다고 한다. 레벨2를 앞두고 아주 기초적인 개념이라도 훑어보려고 한다. 리액트는 공식 홈페이지에서 제공하는 공식문서가 잘 정리되어있다고 해서 가볍게 문서만 읽고 정리해보자. ( + 리액트의 공식문서는 풍부한 사전지식을 전제로 한 설명이 섞여 있어 친절한 편은 아니라고 한다...! ) 공식 홈페이지를 훑어보니 크게 주요 개념을 단계적으로 설명해주는 '기본 가이드'와 실습 위주로 간단한 게임을 따라 만드는 '실전 튜토리얼'로 구성되어 있었다. 이 글에서는 '기본 가이드'의 개념 위주로 정리하겠다. 01. 왜 리액트일까? 페이스북에서 리액트를 만든 이유 2013년 5월, 페이스북에서 '리액트'를 발표했다. 그리고 같은 해 7월 Facebook Devel.. 더보기
JavaScript - 정규표현식(Regular Expression) 맛보기 오늘의 주제는 ✨정규표현식✨. 다른 사람들이 자유자재로 사용하는 것을 보니 정말 정말 유용해보였다.... 언제 한 번 날 잡고 정규표현식 구문을 학습해보려고 했는데 방학 첫 날을 맞이한 오늘이 그 날인가 보다! 정규표현식을 맛보기로 익혀보자. 정규표현식이란? 정규표현식(Regular Expression)은 문자열의 패턴을 편리하게 다룰 수 있도록 도와주는 '형식 언어'라고 한다. 여러 텍스트 편집기와 프로그래밍 언어에서 정규표현식을 지원한다. regexr.com/ 이 사이트에서 편하게 테스트해볼 수 있다. JavaScript는 ES3부터 정규표현식을 지원하고 있다. 정규표현식은 문자열의 특정 패턴을 찾아 추출하거나 치환할 수 있도록 도와주기 때문에, 잘 활용하면 코드를 더 깔끔하게 작성할 수 있다. 적재.. 더보기
하루 20분 영어공부 - 2021년 4월 돈 (Money) 1. 돈이 인생의 전부는 아니지만 삶을 더 윤택하게 만들어주는 것은 부정할 수 없는 사실이다. - Money isn't the be-all and end-all of life, but no one can deny that it makes life more comfortable. 2. 돈은 우리 삶의 많은 부분을 차지한다. - Money takes up a large part of our lives. 3. 하지만 우리는 돈이 인생에서 최종 목적이 아니라, 단지 목적을 이루기 위한 수단이라는 것을 유념해야 한다. - But we have to keep in mind that money isn't the final goal in life, but is merely a means to an e.. 더보기

티스토리툴바