소개 axios란? 백엔드에 네트워크 요청이 필요한 애플리케이션을 개발할 때 사용하는 HTTP 클라이언트 왜 fetch 대신 axios인가? fetch 지원하지 않는 브라우저가 존재한다. 네트워크 에러 발생 시 response timeout 이 없어 기다려야한다. body를 JSON.stringify()를 사용해 직접 변환시켜줘야...

네트워크의 기본 OSI 7계층 네트워크 통신이 일어나는 과정을 7단계로 나눈 표준 네트워크 모델 통신이 일어나는 과정을 단계별로 파악하기 위해 사용 모든 시스템들의 상호 연결에 있어 문제없도록 표준을 정한 것 특정한 곳에서 이상이 발생했을 경우 다른 단계의 장비 및 소프트웨어 등을 건드리지 않는 선에서 해결이 가능하다. 1...

소개 css position 정리글 정리 position이란? HTML 문서상에서 요소가 배치되는 방식을 결정하는 속성 position의 종류 static (default) relative absolute fixed sticky static 원래 있어야 하는 기본적인 위치 relative 원래 위치를 기준으로 t...

소개 css float 정리글 정리 float 란? 레이아웃 구성 시 요소를 가로 정렬하기 위해 사용하는 속성 이미지 주변에 텍스트를 감싸기 위해 만들어진 속성 float 속성 종류 none (default) right left inherit none 요소를 뜨게 두지 않는다 const Box1 = styled(Box...

소개 react-query에 대해 정리해보는 글 react-query란? react-query 서버의 값을 클라이언트에 가져오는 fetch, 캐싱, 에러처리 등의 비동기 과정을 편하게 해주는 라이브러리 보통 redux를 사용해 상태관리를 하는 경우 서버 관련 로직을 클라이언트 state와 함께 사용하게 되는 경우가 많다 이러한 경우 보일러 플레...

소개 개발을 하다가 이건 왜 이렇지? 혹은 이건 뭐지? 라는 생각이 드는 것들을 모아보고 차례차례 알아보는 게시물입니다. 미해결 아토믹디자인 반응형 웹을 만드는 여러가지 방법 SSR React를 사용하는 이유 Next.js를 사용하는 이유 도커를 사용하는 이유, 사용하는 방법 Debounce, Throttle 미디어 쿼리 컴포넌트에 Width를 ...

소개 이번에 프로젝트를 하나 시작했는데 분할 구조를 사용해보기로 했다. 그 과정에서 다음과 같은 코드가 많이 보였다. 소위 지옥의 상대경로라고 불리는 현상이 발생한것이다..! import Back from '../../components/back/index.js' import SignUp from '../../components/signUp/ind...

소개 next에 대한 내용들을 정리하는 글 next란? react로 만드는 서버사이드 rendering 프레임워크 프레임워크와 라이브러리의 차이점 라이브러리 : 사용자가 파일 이름이나 구조 등을 정하고, 모든 결정을 내림 프레임워크 : 파일 이름이나 구조등을 정해진 규칙에 따라 만들고 따름 내가 만들지 않은 코드를 "가지고...

소개 소프트웨어 개발 시 좋은 품질의 소스코드를 작성하기 위한 원칙들을 소개한다. 3대 원칙 KISS 원칙 소프트웨어를 설계하는 작업이나 코딩을 하는 행위에서 되도록이면 간단하게 만드는게 좋다. 소스 코드나 설계 내용이 ‘불필요하게 복잡해지는것’을 조심해야한다. 하나의 함수에서는 하나의 역할만하자! //KISS 원칙을 위배 co...

소개 하이브리드 앱을 제작 중 mac 이 없는 사람들의 경우에는 xCode를 사용할 수 없어 Expo를 사용할것이다. 그 과정에서 휴대폰을 활용해 web의 localhost를 webview에 띄워 개발하고 싶은 사람들이 있을것이다. 오늘은 그 과정을 소개하고자 한다. react (web) 쪽 환경 구성 react 다운로드 npm install -...