라이언 코딩일기

[영어공부] 영화 인턴 스크립트 Part1

프로이트가 말했죠. " 사랑과 일, 일과 사랑. 그게 전부다 " 라고요. Freud said, " Love and work, work and love. That's all there is ". 음, 난 은퇴했고, 아내는 세상을 떠났어요. Well, I'm retired and my wife is dead. 당신이 상상할 수 있듯이, 그것은 나에게 여유시간을 주었죠. As you can imagine, That's given me something on my hands. 아내가 세상을 떠난 지 3년 반이 되었어요. My wife has been gone 3 and half years. 전 모든 면에서 그녀가 그리워요. I miss her in every way. 은퇴요? 그건 계속되고, 창의성에 대한 끈질..

[React] alert를 손쉽게 sweetalert2 라이브러리

서론 sweetalert2는 깔끔하고 멋진 alert창을 손쉽게 구현하게 해주는 라이브러리이다. 이번에 만들고 있는 쇼핑몰 앱에 모달창, 알림창을 넣어야 하는 경우가 많았다. 그래서 이것저것 찾아보다가 우연히 알게 된 마법 같은 라이브러리이다. 설치 터미널 설치 npm install sweetalert2 CDN 이용 사용법 사용법은 너무나도 간단하다. Swal 함수를 불러와 자신이 원하는 곳에 넣어주고, fire라는 키워드를 사용해 내부를 꾸며주면 된다. import Swal from 'sweetalert2' Swal.fire({ title: 'Error!', text: 'Do you want to continue', icon: 'error', confirmButtonText: 'Cool' }) // h..

[React] Recoil-persist

서론 Recoil은 React에서 지원하는 강력한 전역상태 관리 라이브러리이다. https://medium-ryan.tistory.com/34 [React] Recoil 사용후기 Recoil은 React의 전역 상태 관리 라이브러리 중 하나이다. React를 개발한 facebook 팀에서 만들었고, 그 때문인지 호환성도 아주 좋은 것 같다. Install npm install recoil 사용전 install RecoilRoot import { RecoilRoo medium-ryan.tistory.com Recoil을 사용하면서 LocalStorage에 쉽게 상태를 담을 수 있게 도와주는 Recoil-persist 라이브러리의 아주 간단한 사용후기를 써본다. 설치 npm i recoil-persist /..

[React] 간단한 카카오 굿즈샵 리마스터 리뷰

서론 요즘 기존에 만들어두었던 프로젝트들을 다시 손보고 있다. 이번엔 카카오 굿즈샵을 리마스터했고, 프로젝트를 하면서 느낀 점에 대해 써본다. 사용한 라이브러리 recoil (상태관리) styled-components (스타일링) react-router-dom (라우팅) framer-motion (애니메이션) gh-pages (배포) 개선점 일본어에 맞춰 폰트 스타일 변경. css root selector(가상 선택자) 폐기 및 모든 사이즈 rem 단위 사용. 헤더바 디자인 개선. 아이템 카드 디자인 개선. 디테일 페이지 상품 이미지 -> 이미지 슬라이더로 변경. 카트 페이지 스타일 변경. 완성본 후기 이번에는 추가기능 없이 디자인만 변경했다. styled-components 라이브러리와 css 가상 선..

[React] 페이지 전환시 스크롤 맨 위로 이동시키기

서론 React를 이용해 SPA를 만들 때면, 페이지를 이동할 때마다 스크롤의 위치가 이전 페이지 그대로 고정되어 불편한 점이 많았다. 편의성 개선을 위해 페이지를 전환할 때마다 스크롤을 맨 위로 이동시키는 방법에 대해 알아보겠다. 컴포넌트 만들기 하나의 특정 동작만을 위한 코드가 필요하기 때문에 개별 컴포넌트에 코드를 적는다. 또, 길지 않은 코드지만 가독성면에서도 개별 컴포넌트로 관리하는 것이 좋아 보인다. 컴포넌트 이름은 아무렇게나 지어도 상관없다. import { useEffect } from 'react'; import { useLocation } from 'react-router-dom'; export default function PageToTop() { const { pathname } =..

[JavaScript] 숫자에 세자리수마다 콤마(,) 넣기

서론 숫자의 가독성을 높이기 위해서는 세 자릿수마다 콤마(,)를 넣어주는 작업이 필요하다. JS에서는 어떤식으로 숫자에 콤마를 넣어줄 수 있는지 알아보자. toLocaleString() 가장 쉬운 방법이다. JavaScript에서 지원하는 메소드이다. 단순히 숫자에 콤마를 찍어주는 것뿐만이 아니라 숫자에 관련된 여러 기능들을 제공한다. 또한, 형식을 자신이 원하는 나라에 맞게 적용할 수 있다는 장점도 있다. const num = 123456; num.toLocaleString(); // 결과값 123,456 정규식 알아두면 좋은 정규식. 혹시 필요할 때가 있을지 모르기 때문에 남겨놓는다. const num = 123456; num.toString().replace(/\B(? 주의할 점 혹시 TypeScr..

[영어공부] 한국에 사는 외국인과 초면에 하는 간단한 대화

서론 타이틀 내용 그대로다. 오늘도 유튜버 쓰는영어 셀리 선생님과 함께 한국에 거주하는 외국인이 있다고 가정하고, 그 또는 그녀와 초면에 간단한 대화를 나누는 내용에 대해 다루어 보겠다. 대화내용 A 한국에 사신지 얼마나 되셨어요? How long have you lived in Korea? = How long have you been living in Korea? = How long have you been in Korea? B 일 년 가까이 됐어요. It has been almost a year. =It is almost one year now. A 한국에는 어떻게 오시게 된거에요? Why did you come to Korea? = What made you come to Korea? = What b..

[영어공부] 옷 쇼핑 표현하기

서론 이번에도 일상생활에서 자주 사용하는 문장에 대해 배웠다. 옷의 사이즈나 품절상황, 포장 등에 대한 표현에 대해 정리해 본다. 대화내용 A 이 티셔츠 더 작은 사이즈로 있나요? Do you have this (T-shirt) in a smaller size? = Do you have this (T-shirt) in small? B 걸려 있는 게 다예요. Whatever on the rack is all we have. = Whatever on the rack is everything we have. 그 티셔츠 맞으실 것 같은데. That (T-shirt) looks like it would fit you. 혹시 입어 보셨나요? Did you try it on? A 네, 저한테 좀 크네요. Yes, i..