frontend (9) 썸네일형 리스트형 [이슈리포트] i18n과 라우팅 변경하기 i18n, internaionalization의 i와 n의 글자수가 18자이기 때문에 i18n인 이 엄청난 공대생 감성의 국제화는 복잡한 이름에 비해서는 다국어를 지원하는 웹 페이지에서 유용하게 사용될 수 있다. 웹 페이지를 사용하는 locale 기반으로 그에 맞는 언어를 설정해줄 수 있기 때문이다. 다른 방법도 있겠지만 i18n을 사용하지 않을 경우에 페이지에서 국제화를 위해서는 다음과 같이 비교적 비효율적으로 코드를 작성해야 한다. const Hello: React.FC = () => { const hiEn = "hi"; const hiKo = "안녕"; return ( {locale === "en" ? {hiEn} : {hiKo} } ) } 브라우저의 locale이 en일 경우에는 영어로 hi, 한.. [TIL] react-router의 Link와 a 태그 react-router에서 화면을 이동할 때는 Link 태그를 사용하여 to 속성에 이동할 주소 정보를 작성한다. 하지만 우리는 이미 페이지 이동 기능을 갖고 있는 태그인 a 태그를 알고 있다. 두 기능 사이에는 어떤 차이가 있을까? 결론부터 말하면, 페이지 새로고침 여부가 이 2가지의 차이점이다. Link 태그는 브라우저의 주소만 바꿀 뿐 페이지 자체를 새로고침하지는 않는다. 반면, a 태그는 브라우저의 주소를 이동하며 페이지 자체를 새로고침한다. 페이지 새로고침 여부는 웹 페이지에서 중요하다. 페이지가 새로고침될 경우 현재 렌더링되어 있는 컴포넌트가 모두 사라지고 새로 컴포넌트가 렌더링되게 된다. 이렇게 되면 컴포넌트에 설정되어 있는 state 등이 모두 날아가기 때문이다.[1] Link 태그를 사용.. [TIL] react-router-dom으로 페이지 이동하기 React에서 원하는 url에 원하는 페이지를 띄우기 위해서는 react-router(또는 react-router-dom)를 사용해주어야 한다. 이 모듈은 경로를 지정하고, 해당 경로에 방문했을 때 원하는 컴포넌트 요소를 띄울 수 있게 해 준다. react-router vs react-router-dom 정확히 말하자면 react-router가 모체라고 할 수 있다. 모든 react-router 기능을 포함하고 있는 모듈이다. react-router-dom은 react-router의 여러 기능 중 웹 어플리케이션에서 사용하기 위한 기능(DOM과 관련된)을 포함하고 있는 패기지로, react-router의 자식이라고 볼 수 있다. React가 웹뿐만 아니라 React Native에서도 쓰이기 때문에 웹에서.. [CSS] 선택자 :hover로 onMouse 효과 내기 :hover CSS는 단순히 HTML 태그의 스타일을 꾸며줄 뿐만 아니라 다양한 선택자(Selector)를 통해서 여러 부가 기능을 사용할 수 있다. 다양한 선택자들이 존재하는데 그중 :hover는 대상이 되는 태그에 마우스가 올라갔을 때 원하는 스타일을 지정할 수 있게 해 준다. 대신 마우스가 대상이기 때문에 반응형 웹에서 모바일이나 태블릿 화면에 대해서는 대응하기 힘들다는 단점이 있다.[1] :hover 적용 전 이전에 진행했던 Global Navigation Bar를 만드는 프로젝트에서 마우스가 올라갔을 때 요소에 밑줄이 생기는 코드를 작성한 적이 있었다. 이때 작성한 코드는 [그림 1]과 같다. 전체 코드가 아니고 함수가 동작하는 부분만 가져왔는데 대략 정신이 멍해진다. 3개의 state를 만들었.. [반응형 웹] 반응형 폰트 적용하기(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장에 나오는 가변 그리드, 마진, 패딩을 이전에 진행했던 토이 프로젝트에 반영하는 것을 정리한 포스팅이다. 프로젝.. 이전 1 2 다음
