본문 바로가기

프로그래밍 공부내용

 (33)
배포할 때 환경변수 숨기기(with dotenv) 지금까지는 개인 dev에서만 확인 할 수 있는 개발을 해왔었습니다. 백엔드와 협업을 할 때에도 연결되는지와 결과물이 잘 나오는지만 봤지 실제 프로덕트로 이어지지는 않았었습니다. 우테코 lv3를 진행하면서 실 사용이 가능한 서비스를 만들기 위해서 배포를 하고, 오픈소스로 git 레포를 관리하다보니 ip와 같은 환경변수들을 숨겨야 할 일이 생겼습니다. 수동으로 같이 작업하는 사람들끼리만 알고 있다가 배포할 수 도 있지만, 현재 프로세스에서 젠킨스 등 다양한 도구를 사용하고 있기 때문에 자동화가 가능할 것이라고 생각했습니다. 작업은 아래와 같이 진행하였습니다. 1. .env 분리하기 //.env API_URL = http://localhost:3000 와 같은 식으로 .env파일을 src 디렉토리 아래에 분리..
Normalizing State Shape(상태를 이쁘게 관리하는 법) - 리덕스 공식문서 읽기 Before Reading 실무에서 어플리케이션들은 복잡하게 얽히고 연결된 데이터를 다뤄야 합니다. 예를 들면, 블로그 에디터(ex 티스토리)는 많은 포스트를 가지고, 각각의 포스트는 여러 코멘트를 가지고, 포스트와 코멘트는 또 누가 썼는지를 알아야하고.... 복잡합니다. 이런 어플리케이션의 데이터는 아래와 같은 모양일 것입니다. const blogPosts = [ { id: 'post1', author: { username: 'user1', name: 'User 1' }, body: '......', comments: [ { id: 'comment1', author: { username: 'user2', name: 'User 2' }, comment: '.....' }, { id: 'comment2',..
Batching에 관하여(리액트 setState 비동기 묶지 않고 따로따로 처리 하기) 리액트를 처음 배울때 당황했던 부분이 있다. 간단한 계산기를 만드는 미션이었는데, setCount를 하는데 잘 동작하지 않았다. 아래 예시코드를 보아라 ## batching이란? export default function App() { const [count, setCount] = useState(0); const onClick = () => { setCount((prev) => prev + 1); setCount((prev) => prev + 1); setCount((prev) => prev + 1); }; return ( {count} 올리기 버튼 ); } 이런식으로 작성했더니, count 가 1씩 증가하지 않고 한번에 3씩 증가했다. 내가 보고 싶었던건 1,2,3 이 다르륵 하고 올라가는 거였는데 ..
1. Introduction - MSW (Mocking Service Worker) 공식문서 따라 읽기 및 사용설명 한글화 문서들이 많이 없는 것 같아서.. 공부하는 겸 한글화를 동시에 진행하도록 하겠습니다. 공식문서 자체 내용은 기본 폰트로, 제가 추가한 내용은 노란폰트로 작성하도록 하겠습니다. 원본은 여기있습니당 https://mswjs.io/docs/ Introduction What is Mock Service Worker? mswjs.io 소개 msw는 실제 request를 가로채기위해서 service worker를 사용하는 api mocking 라이브러리입니다. mock이란 '가짜의' 란 뜻입니다. api를 실제로 작동시키지 않고도 가짜값을 사용할 수 있게 하는 것을 말함. Service Worker Api란 응용프로그램, 브라우저, 네트워크 사이의 프록시 서버 역할을 하는 api.를 말함. 탐색과 리소스 요..
가운데 정렬의 몇가지 방법 1. Display: flex justify, align 을 center로...! 2. text-align : center 3. margin : auto; auto를 하면 자동으로 정렬한다. 가운데 정렬시키려는 영역의 크기가 설정이 꼭 돼 있어야 함. 4. transform top: 50%; left: 50%; transform: translate(-50%, -50%) top, left 50% 로 contents 박스의 좌상단 꼭지점이 가운데 정렬시키려는 container의 정 중앙에 위치하게 되고 translate해서 contents 박스의 가운데를 가운데 정렬시키려는 container의 정 중앙에 위치하게 만들어준다. https://liis.tistory.com/28
useRoutes() 훅 import { useRoutes } from 'react-router-dom'; const App = () => { const routes = useRoutes([ { path: '/', element: }, { path: '/clock', element: }, { path: '/stopwatch', element: }, { path: '/alarm', element: }, ]); return ( {routes} ); }; 와 같은 식으로 사용할 수 있다. path설정같은거 할때 쉽게 정리 가능해서 나름 유용한 것 같다. v6.0 이전에는 react-router-config 였다고 한다. 일반적 Routes와 쓰이는것도 똑같고 무엇을 쓸지는 취향차이라고 합니다.. React Router says, "H..
라우터 기본 사용법과 link와 navLink의 차이 리액트 v6.0이 되면서 navLink가 조금 바뀐 것 같다. 리액트 라우터 사용법 설치 npm install react-router-dom 라우터적용 //index.js import {BrowserRouter} from 'react-router-dom' ReactDOM.render( , document.getElementById('root') ); HTML5의 history API를 제공하는 Router 이다. 속성(props)으로 줄 수 있는 것은 다음과 같다. - basename: base URL을 설정해줄 수 있다. // renders // renders ... 리액트로 배포를 하게 될때 package.json에 "homepage": "http://kangyunho.com/github-io", 처..
calc()로 %, px, rem 등 혼용해서 계산하기 ttps://developer.mozilla.org/ko/docs/Web/CSS/calc calc() - CSS: Cascading Style Sheets | MDN calc() CSS 함수를 사용하면 CSS 속성의 값으로 계산식을 지정할 수 있습니다. developer.mozilla.org 가끔 100%를 주고 나서 10px정도만 움직이고 싶을 때가 있었다. 그럴때면 직접 픽셀을 계산해 주곤 했었는데.... 역시나 찾아보니까 쉽게 해줄 수 있었다. 바로 calc를 사용하면 된다. width: calc(100% - 80px); 이런식으로 하면 쉽게 가능하다..

티스토리툴바