본문 바로가기

분류 전체보기

 (30)
와이퍼 고무 교체방법(쏘렌토 MQ4) 자동차 와이퍼는 비가 많이오는 여름철 안전운전을 위해 필수로 관리해 주어야 할 자동차 용품중에 하나입니다. 와이퍼 교체 주기는 대부분 6개월에서 1년정도 라고 하는데 와이퍼를 교체할 때 굳이 전체를 다 갈지 않아도 고무부분만 교체할 수 있다고 해서 와이퍼 고무 교체 방법에 대해 알아 보았습니다. 1. 와이퍼 올리는 방법 요즘 나오는 차들은 와이퍼가 안으로 들어가있어서 본네트에 걸리기 때문에 와이퍼를 그냥 들 수 없습니다. 그래서 먼저 와이퍼를 분리하기 위해선 와이퍼를 위로 올려줘야 합니다. 와이퍼 올리는 방법은 시동이 꺼진 상태에서 와이퍼 작동 레버를 위로 3초이상 올리고 있으면 됩니다. 만약 안된다면 시동을 켰다 끄고 다시 해보시기 바랍니다. 2. 와이퍼 분리 하기 와이퍼를 올렸다면 이제 와이퍼를 분리..
리먼사태가 뭐지?? 코로나 전후로 한창 우리나라 부동산 시장이 과열 상태를 유지하면서 급격하게 오르던 집값이 급속도로 하락하기 시작했습니다. 거기에 더하여 코로나때 풀린 시장 통화로 인한 물가상승 인플레이션을 막기위해 미국에서부터 시작한 긴축정책(통화 회수 정책)으로인해 영끌이나 갭투자로 집을 구매한 사람들이 집값하락 + 이자부담에 허덕이기 시작했습니다. 이러한 문제 때문에 제 2의 리먼사태가 발상하는거 아니냐 하는 말들이 보이길래.. 리먼사태가 뭔지 한번 찾아봤습니다. 리먼사태란? 리먼사태는 서브프라임 모기지 사태라고도 불리는데, 부동산 미국의 부동산 버블이 꺼지면서 당시 최대 투자은행 중 하나였던 리먼브라더스가 파산하면서 세계적으로 불어닥친 경제 불황이 닥친 사건을 말합니다. 닷컴버블이나 이라크 전쟁같은 사건 이후로 경..
[CSS]masonry 레이아웃 구현하는 3가지 방법(핀터레스트 레이아웃) Masonry는 사전적으로 벽돌쌓기를 의미합니다. masonry layout은 마치 벽돌을 쌓는것처럼 서로 다른 길이를 가진 이미지들을 빈틈없이 차곡차곡 쌓아놓은 듯한 레이아웃을 의미합니다. 다만 masonry layout은 일반적으로 상단에서 하단으로 쌓아 나가는게 일반적입니다. 대표적인 예시로는 핀터레스트나 네이버 이미지 검색이 있습니다. 이번 글에서는 이러한 masonry layout을 구현하는 네가지 방법에 대해 알아보겠습니다. 1. css로 구현하기 이 방법은 가장 간단하면서도 쉽게 적용 할 수 있는 방법입니다. See the Pen Untitled by 이승철 (@ibnviuin-the-builder) on CodePen. 이 방법은 가장 masonry layout을 흉내내는 가장 간단한 방법..
[Error] iOS build 에러 - Undefined symbol: _swift_stdlib_isStackAllocationSafe Showing All Messages Undefined symbol: _swift_stdlib_isStackAllocationSafe 오랜만에 이전에 진행했던 프로젝트를 업데이트 할 일이 생겨서 배포를 진행하려하는데 난데없이 iOS 빌드과정에서 에러가 발생하였습니다. 신기한건 xcode cli 에서 빌드하면 이상 없이 되는데 xcode에서 빌드하려고만 하면 이 애러가 발생하였습니다. 원인 xcode에서 라이브러리를 찾는 경로에 대한 설정 문제인 듯 합니다. 해결 방법 1. react native 버전 업데이트 하기 해당 문제는 react-native 0.67+ 버전에서 해결 되었다고 합니다. 지금 제 프로젝트 버전이 0.63.5 이기 때문에 근본적인 해결을 위해선 버전을 올려야 겟지만... 시간 관계상 ..
[React] useEffect에서 비동기(async/await) 함수 처리 안녕하세요. 이번 글에서는 useEffect에서 async await 함수를 사용하는 법을 알아 보겠습니다. 일반적으로 client 측에서는 fetch나 recoil을 활용해서 서버로부터 데이터를 가져와 app에 출력해주게 됩니다. 그리고 일반적으로 fetch 등을 이용 할 때는 비동기 처리를 위래 async/await를 활용하게 됩니다. 이러한 작업들을 React에서는 mount 될 때 실행되는 useEffect를 사용하여 진행하게 되는데 useEffect에서 일반적인 비동기 함수를 선언하는 방식으로 useEffect의 첫번째 인자인 함수에 async/await를 사용하게되면 애러를 발생하게 됩니다. //잘못된 코드 useEffect(async () => { let res = await fetch('h..
[React] infinite scroll(무한 스크롤) 구현 - Intersection Observer 안녕하세요 이번 포스팅에는 Intersection Observer에 대한 설명과 Intersection Observer를 활용한 무한스크롤 구현 방법에 대해 알아보겠습니다. 지난 글에서 scroll handler를 활용해서 무한스크롤을 구현 했었는데 그 코드를 기반으로 scroll handler 부분을 intersection Observer로 바꿔보도록 하겠습니다. 1. Intersection Observer란? Intersection Observer API는 타겟 요소와 상위 요소 또는 최상위 document 의 viewport 사이의 intersection 내의 변화를 비동기적으로 관찰하는 방법입니다. - MDN 위의 설명은 MDN에 나와있는 Intersection Observer에 대한 설명입니다...
[MSW]테스트용 api 만들기 - api 모킹(moking) 프론트엔드 개발을 할 때 api 서버에서 데이터를 불러오는건 반드시 필요한 일입니다. 하지만 아직 통신해야 할 api 서버가 준비되지 않았거나 개발 작업 중이라면 데이터를 불러 올 수가 없게 됩니다. 물론 json 파일처럼 static한 dummy 데이터로 개발 할 수도 있겟지만 비동기 처리 등을 할 수 없습니다. 이럴 때 필요한게 API server 모킹 입니다. 1. msw란? MSW란 Mock Service Worker의 약자로 서비스 워커를 활용하여 API를 모킹해주는 라이브러리입니다. 즉 브라우저에 있으면서 마치 api server인 척 프론트엔드와 통신해서 가짜 데이터를 전해주는 역할을 합니다. 브라우저에서 나가는 요청을 가로 채서 method나 URL에 기반하여 모의 응답을 해 줍니다. MS..
[React] infinite scroll(무한 스크롤) 구현 - scroll event 오늘은 다양한 서비스에서 리스트를 보여줄 때 흔히 사용되는 무한 스크롤을 구현해보도록 하겠습니다. 무한스크롤은 불러올 데이터가 많을 때, 서비스에 부담이 되지 않을만큼 먼저 불러오고 스크롤을 하단으로 내릴때마다 추가로 불러와서 출력해주는 기능을 의미합니다. 먼저 예제코드를 보시겠습니다. 1. 예제 코드 예제코드에서는 총 표시할 아이템의 수를 입력하면 스크롤을 하단으로 내릴 때마다 5개씩 끊어서 보여주는 코드 입니다. Home.js import styles from '@/styles/Home.module.css' import React, { useEffect, useState } from 'react' export default function Home() { const [input, setInput] =..
[GIT] mac에서 git 유저 변경 방법 및 유저 정보 변경 안될 때(gitconfig 파일 수정) 이번 글은 퇴사한 직원의 mac mini로 작업을 하다가 겪은 git 관련 issue에 대해서 작성해 보도록 하겠습니다. 기존에 쓰던 개인 맥북이 ios appstore관련 xcode 버전 정책 변경으로 인해 당분간 회사 mac mini로 당분간 작업을 하게 되었습니다. 어느날 mini로 작업을 마치고 git에 push를 했는데 나중에 보니 이전 직원분의 계정으로 push가 되있던 것을 발견했습니다. 분명 global config 수정을 했는데... 그래서 원인을 찾아 보았습니다. 기본적으로 git 사용자 이름 변경 방법은 mac이라면 terminal, windows라면 git bash에서 git config 명령어로 설정 가능 합니다 git 사용자 이름 변경 git config --global user..
[react] useEffect 완전 사용법 1탄, 예제 코드 - React hook 1. useEffect란? useEfftect는 컴포넌트가 렌더링 된 후에 특정 작업을 수행 할 수 있도록 하는 hook 입니다. 여기서 말하는 특정 작업을 side effect라고 하는데 이러한 side effect에는 단순한 변수 설정 뿐만 아니라 api 호출과 같은 비동기적인 처리를 포함합니다. 이러한 기능은 컴포넌트의 생명주기에 관한 메서드를 함수형 컴포넌트에서 사용 할 수 있게 해줍니다. 컴포넌트 생명주기에는 기본적으로 3단계가 존재합니다. ComponentDidMount : 컴포넌트가 생성 될 때, 렌더링 완료 시 실행 ComponentDidUpdate : 컴포넌트의 생성이 완료 된 후 update 되었을 때 실행 ComponentWillUnmount : 컴포넌트가 제거되기 직전에 실행 2. ..

티스토리툴바