컬럼 그리드 시스템 Margin 가로가 좁은 스마트폰 특성상 양쪽 여백이 10px로 좁게 들어갔습니다. 홈 탭의 마지막 카드 콘텐츠는 마진을 넘겨서 보여줌으로서 다음 콘텐츠에 대한 궁금증을 자극하여 가로로 스크롤을 유발하도록 했습니다. Column 스마트폰에 맞는 표준적인 컬럼 갯수인 4개를 사용해서 제작되었습니다. 컬럼에 맞게 버튼과 컨텐츠들이 대칭적으로 잘 정렬되어 있습니다. Gutter 버튼들 사이에 Gutter는 넓게 주어서 각 버튼을 구분하는 느낌을 주었습니다. 카드 컨텐츠 사이는 버튼보다 좁에 만들어서 각 주제별로 묶인 콘텐츠들이 독립적으로 보이지않게 했습니다. 전체적으로 스마트폰에 잘 맞는 배치를 가지고 각 아이템들이 잘 정돈되어 있다고 판단됩니다. 추가적으로 화면 크기에 변화에 유연하게 대..

UI(User Interface, 사용자 인터페이스)는 사람들이 컴퓨터와 상호 작용하는 시스템. GUI(Graphical User Interface)와 물리적 UI를 모두 포함하지만 프론트엔드 개발자로서의 UI는 대부분 GUI를 의미한다. UX(User Experience, 사용자 경험)는 사용자가 어떤 시스템, 제품, 서비스를 직•간접적으로 이용하면서 느끼고 생각하는 총체적 경험 UI와 UX의 관계 UX는 UI를 포함한다. 하지만 좋은 UI가 항상 좋은 UX를 보장하지는 않는다. UX에 영향을 주는 이 많은 요소 중에 프론트엔드 개발자에게 가장 중요한 요소는 바로 UI다. 좋은 프론트엔드 개발자라면 제품이나 서비스의 UI가 사용자로 하여금 가능하면 좋은 UX를 가질 수 있도록 해야한다. UI/UX 사용..

목표 설정 💡 목표: 핀테크 기업 목표로 내년 상반기에 취업하기 부트캠프에서 꼭 얻고 싶은 것 탄탄한 프런트엔드 기초 배운건 읽고 끝내지 말고 바로 코드로 쳐서 활용해보기 면접에서 자주 나오는 중요한 키워드들은 말로 설명해보고 녹화 피드백(두괄식 요약→설명) 백준 알고리즘 중급 강의 문제(골드 상위 티어)까지 풀기 → 알고리즘 스터디 진도 맞춰서 문제 풀기 즐겁게 공부하는 습관 익히기 잘 안될 결과를 두려워하지 말고 눈앞에 있는 과정을 즐기면서 공부하자 남과 비교하지 말고, 내 회고를 보면서 과거의 나와 비교하자 꾸준히 공부하는 습관 → 주 6회 이상 잔디심기 도전! 매끄럽게 협업할 수 있는 커뮤니케이션 능력 이해한 개념을 1차로 블로그에 글로 작성하고 2차로 말로 설명해보는 연습 나의 다짐 정규시간 후..

[SEB FE] Section 2 Daily Coding computeSquareRoot 💡 바빌로니아 법의 점화식을 사용해 Math.sqrt을 구현하기 문제 수를 입력받아 제곱근 값을 소수점 두 자리까지 리턴해야 합니다. 입력 인자 1 : num number 타입의 정수 (num >= 2) 출력 number 타입을 리턴해야 합니다. 최대 소수점 둘째 짜리까지 구합니다. (소수점 셋째 자리에서 반올림) 주의 사항 Math.sqrt 사용은 금지됩니다. 입출력 예시 let output = computeSquareRoot(9); console.log(output); // --> 3 output = computeSquareRoot(6); console.log(output); // --> 2.45 힌트 소수점 처..

컴포넌트 React의 개발 방식의 가장 큰 특징은 페이지 단위가 아닌, 컴포넌트 단위로 시작한다는 점입니다. 먼저 컴포넌트를 만들고, 다시 페이지를 조립해나갑니다. 즉, 상향식(bottom-up)으로 앱을 만듭니다. 이것의 가장 큰 장점은 테스트가 쉽고 확장성이 좋습니다. 그래서 기획자나 PM, 또는 UX 디자이너로부터 앱의 디자인을 전달받고 나면, 이를 컴포넌트 계층 구조로 나누는 것이 가장 먼저 해야 할 일입니다. Props 컴포넌트는 컴포넌트 바깥에서 props를 이용해 데이터를 마치 전달 인자(arguments) 혹은 속성(attributes)처럼 전달받을 수 있습니다. 즉 데이터를 전달하는 주체는 부모 컴포넌트가 됩니다. 이는 데이터 흐름이 하향식(top-down)임을 의미합니다. 이 원칙은 매..