개발/Front-end (20) 썸네일형 리스트형 [반응형 웹] 반응형 폰트 적용하기(em/rem) 지난번 포스팅에서는 미디어 쿼리(Media Query)를 적용하여 화면 크기에 따라 화면 요소를 보이거나 가리는 작업을 진행하였다. 원하는 기준점에 맞는지 미디어 쿼리를 통해 확인을 하고 해당 조건이 맞을 경우 작성한 css 스타일을 적용하였다. [반응형 웹] 미디어 쿼리 적용하기 지난번 포스팅에서는 가변 그리드/마진/패딩을 적용해서 화면의 크기에 따라서 가변적으로 컴포넌트의 크기가 변하도록 하는 작업을 진행하였다. 컴포넌트 간 포함 관계를 이용해서 % 단위로 firsteast.tistory.com 이번 포스팅에서는 `em`과 `rem`을 사용해서 반응형 폰트 크기 적용기를 기록하려고 한다. em / rem em과 rem은 둘 다 기본 개념은 %와 유사하다. 부모 요소의 폰트 크기를 기반으로 반응형으로 .. [React] 가상화폐 자동거래 프로젝트 리팩토링하기(2/2) 이번 포스팅은 지난 가상화폐 자동거래 프로젝트 리팩토링하기 두 번째 편이다. 사실 오래 전에 작업했던 내용인데 갑자기 반응형 웹을 공부한다고 그 포스팅을 하다 보니 조금 미뤄졌다. 지난 리팩토링 때는 컴포넌트 모듈화 방식의 변경을 통하여 한 줄로 간단히 사용되는 컴포넌트들을 정리했었다. 이번에는 변수 및 함수 이름을 수정하는 작업을 진행해보았다. 굳이 내가 사용한 변수명 또는 함수명이 명확할 필요가 없고 중요하지 않은 않은 알고리즘 문제 풀이와 같은 코드에서는 `a, b, c, tmp` 등등 크게 의미가 있는 이름은 사용하지 않는다. 하지만 유의미한 변수명은 프로젝트를 진행할 때는 중요해진다. 왜냐하면 변수명을 잘 짓는 것만으로도 코드를 보게 될 사람들에게 많은 정보를 줄 수 있기 때문이다. "읽기 좋은.. [반응형 웹] 미디어 쿼리 적용하기 지난번 포스팅에서는 가변 그리드/마진/패딩을 적용해서 화면의 크기에 따라서 가변적으로 컴포넌트의 크기가 변하도록 하는 작업을 진행하였다. 컴포넌트 간 포함 관계를 이용해서 % 단위로 길이를 계산하고 이를 통해 크기를 가변적으로 만들 수 있었다. [반응형 웹] 가변 그리드, 마진, 패딩 적용하기 반응형 웹(Responsive web)은 여러 기기로 웹을 이용하면 요즘에 반드시 할 줄 알아야 하는 기술이라고 해도 과언이 아니다. 반응형 웹의 구현을 통해 화면의 크기가 서로 다른 기기 별로 웹 페이지 firsteast.tistory.com 이번 포스팅에서는 미디어 쿼리(Media Query)를 사용한 적용기를 기록해보려고 한다. 미디어 쿼리(Media Query) 들어가기 전에 미디어 쿼리가 무엇인지에 대해서.. [반응형 웹] 가변 그리드, 마진, 패딩 적용하기 반응형 웹(Responsive web)은 여러 기기로 웹을 이용하면 요즘에 반드시 할 줄 알아야 하는 기술이라고 해도 과언이 아니다. 반응형 웹의 구현을 통해 화면의 크기가 서로 다른 기기 별로 웹 페이지의 크기를 따로 설정하지 않아도 되게 된다. 이를 통해 개발에 필요한 비용을 크게 줄일 수 있을 뿐만 아니라 유지/보수 측면에서도 이점을 갖는다. 항상 진행하는 프로젝트마다 반응형 웹이 되도록 작성하려고 하였으나, 어설프게 진행하다 포기하기 일수였기 때문에 이번에 책을 한 권 구매하여 제대로 된 공부를 하고 있다.(역시 사람은 돈이 들어가면 조금 더 열심히 하게 된다.) 이번 포스팅은 책의 2장에 나오는 가변 그리드, 마진, 패딩을 이전에 진행했던 토이 프로젝트에 반영하는 것을 정리한 포스팅이다. 프로젝.. [React] 가상화폐 자동거래 프로젝트 리팩토링하기(1/2) 학부 시절 소프트웨어 공학에서 리팩토링을 배우고 난 뒤, 리팩토링이 매우 중요한 과정 중 하나라는 것을 항상 생각하고 다녔다. 동아리 후배들과 얘기를 할 상황이 생기면 언제나 '여러분 리팩토링은 중요해요 !'라고 말하곤 했다. 그런데 돌아보면 정작 나는 리팩토링을 하고 있지 않았다. 논문을 써야하네 어쩌네 이런 변명들을 앞세워서 정작 중요하다고 말한 리팩토링을 단 한 번도 해본적이 없다는 것을 깨달았다. 마침 최근 회고한 프로젝트에 리팩토링할 것들이 산재되어 있었기 때문에, 작더라도 리팩토링을 진행하고 그 과정을 기록으로 남겨보려고 한다. 가상화폐 자동거래 프로젝트 회고 2021년 7월 22일부터 10월 3일까지 프론트엔드 개발자로 참여한 프로젝트의 회고를 적어본다. 프로젝트 저장소 보러가기 GitHub.. [Javascript] Momentum 만들기 - 리팩토링 todo 만들기 지난번 작업을 통해 사용자가 날짜와 해당 날짜에 진행할 todo를 저장하고, 화면에 띄우는 기능을 구현하였다. 앞으로 구현할 오늘 진행해야 하는 todo(today)와, 앞으로 진행 예정인 todo(upcoming), 완료된 todo(time machine) 기능을 구현하기 위해서는 먼저 지금 작성한 todo list에 해당하는 코드를 수정해야 할 필요가 있다. 왜냐하면 today와 upcoming, time machine이 서로 공유하는 부분이 존재하기 때문이다. 1. 각 todo에 해당하는 배열을 읽어서 li 태그로 표현 function paintTodayTodo() { ... span.innerText = todayTodo ... } function paintUpcomingTodo() { ... s.. [Javascript] Momentum 만들기 - todo list 구현 오늘 진행할 작업은 todo list 코드 리팩토링 겸 구현하는 부분이다. 기존 구현했던 todo와 다르게 날짜를 따로 입력받도록 구현할 것이고, 이 날짜는 다음 작업인 날짜를 활용한 마감될 todo와 앞으로 다가올 todo를 나누는 기능을 구현할 예정이다. 1. HTML 코드 작성 - todo를 입력하기 위한 부분의 구현이다. 마감 날짜를 입력할 date 타입의 input 태그와 진행할 작업의 이름을 입력할 text 타입의 input 태그 두 가지로 이루어져 있다. - form 태그는 입력된 두 개의 input 태그의 값을 사용하여 todo를 생성하고 localStorage에 저장하는 이벤트를 다루게 될 것이다. Today - form 태그에서 입력된 todo가 보여질 구문이다. ul 태그 내에 li .. [Javascript] Momentum 만들기 - 코드 리팩토링 지난 작업을 통해 배경화면 기능까지 구현을 마무리했다. 물론 해결해야 하는 이슈들이 남아있지만, 차차 진행할 예정이다. 구현해야 할 기능은 위치 정보와 날씨 API를 활용하는 것이 남아있다. 이전에 코드 리팩토링을 진행하고 넘어가고자 한다. 프로젝트를 진행하기 이전 'vanilla js니까 html 코드는 건들지 말고, 모든 화면 구성 요소들까지 javascript 코드에서 만들어야지.' 라는 이상한 생각을 갖고 시작해서 현재 코드가 아래 그림과 같이 javascript 파일에 모든 요소가 있어 코드가 굉장히 지저분하다. 위 그림처럼 HTMLElement들까지 javascript 코드 내에서 구현하다 보니 이미 20 ~ 30줄 가량을 차지하고 시작하게 되고, 이는 코드의 가시성을 너무 많이 해쳐버렸다. .. 이전 1 2 3 다음
