프로그래밍📚

react는 일반적으로 사용하는 HTML, CSS, Javascript로 만드는 사이트와는 다르게 배포하기 위해서는 build라는 작업을 해야 합니다. build는 쉽게 말해서 react에서 작성한 코드들을 압축하여 용량을 낮춘 것인데요. 보시다시피 빌드 전후로 용량이 줄어든 것을 확인할 수 있습니다. 이렇게 build로 압축한 파일을 그대로 사용하기보단 node에서 각 경로에 맞게 response를 전달해 주어야 하는데요. app.use(express.static(path.join(__dirname, '폴더/build'))); app.get('/', (req,res)=>{ res.sendFile(path.join(__dirname, '폴더/build/index.html')) }) 이제 app에 맞는 m..

전역상태관리를 하는 종류는 아주 다양합니다. 그중에서도 오늘은 context와 redux를 다뤄보려고 합니다. 전역상태관리를 하는 이유 전역상태관리를 하는 이유는 무엇이 있을까요? 바로 state가 여러 컴포넌트에서 사용될 때 편하게 사용하기 위해 쓰는데요, 대게 부모자식의 경우에는 props를 통해서 사용할 수 있지만, 만약 해당 state가 10개, 몇십 개의 컴포넌트에 사용된다고 하면 몇십 번을 props로 전달을 해줘야 하는 걸까요? 이렇게 많은 양의 상태를 공유하기 위해서 전역상태관리를 해주는 게 조금 더 간편하게 작업을 하는 것입니다. 주의할 점은 무작정 전역상태관리를 통해 state를 관리하는 게 아니라 정말 많은 양의 컴포넌트에 상태관리가 필요할 때만 사용하는 게 좋습니다. useConte..

데이터베이스에 접근하기 위해 서버와 통신을 주고받을 때 기본적으로 새로고침을 해야 받은 데이터를 확인할 수 있는데 Ajax를 이용하면 새로고침이 없더라도 데이터를 주고받을 수 있습니다. Ajax를 사용하는 방식으로는 총 3가지가 존재합니다. 1. XMLHttpRequest 문법 2. fetch() 3. axios 1번 방식은 너무 오래되기도 했고 요즘 많이 사용하는 방식으로는 2번 fetch함수와 3번 외부라이브러리인 axios를 사용합니다. 2번과 3번은 둘 다 비슷하지만 fetch는 데이터를 json문자열로 받아오기 때문에 데이터를 사용할 수 있게 배열로 만들어서 사용해야하하고, axios는 json문자열로 넘어온 데이터를 자동으로 배열로 만들어 주기 때문에 따로 변경 없이 데이터를 사용할 수 있습니..

컴포넌트에는 기본적으로 생명주기라는 게 존재합니다. 페이지에 컴포넌트가 장착될 때 = 마운트/생성, 페이지가 업데이트가 될 때 = 업데이트, 마지막으로 페이지에서 나가기 전 = 원마운트/제거 이전 class기반에서는 해당 주기를 확실하게 볼 수 있었습니다. class ClassComponent extends React.Component { componentDidMount() { // 마운트 될때 코드 } componentDidUpdate() { // 업데이트 될때 코드 } componentWillUnmount() { // 언마운트 전 코드 } } 이와 같이 class형 컴포넌트는 한눈에 확인이 가능했었는데요 react 16.8 버전부터 훅 나오면서 class형 컴포넌트를 고집할 필요가 없어지고 함수형 컴..

styled-component는 말 그대로 style이 적용된 컴포넌트를 말합니다. 컴포넌트이기 때문에 styled-component로 생성되는 변수들의 첫 문자는 무조건 대문자여야 합니다. styled-components 설치하기 npm i styled-components styled-component를 생성하는 방식은 아주 간단합니다. const Style = styled.div` color : #333; padding : 20px; backgound : #fafafa; ` return ( ) 또한 component이기 때문에 props를 이용하여 내가 props로 정보를 넘겨주면 같은 style이라도 수치를 다르게 설정할 수 있습니다. interface iStyleDivProps { bg : str..

CSR(Client Side Routing) 리액트의 라우터는 기본적으로 CSR를 기반입니다. 기본적으로 페이지별로 이동을 하게 되면 해당 페이지에 대한 문서 정보를 요청해야 하는데 라우팅을 이용하게 되면 새로운 문서를 요청하지 않더라도 링크를 클릭하여 URL을 업데이트하여 해당 페이지에 해당되는 데이터를 렌더링 하여 화면에 보여주는 것입니다. 이때 다음으로 보여줄 페이지에 대해서 CSS 및 JS 코드들을 재평가할 필요가 없어서 조금 더 빠르게 화면 이용이 가능합니다. 또한 애니메이션 기능을 통해서 더 역동적으로 활용할 수 있습니다. react-router-dom 설치하기 라우팅 기능을 이용하기 위해서는 react-router-dom이라는 모듈을 설치해 주어야 합니다. npm i react-router-..

map함수 사용하기 배열 안의 데이터를 꺼낼 때에는 map이라는 함수를 사용합니다. 사용방식은 아주 간단한데요. 바로 반복이 필요한 곳에 중괄호를 이용하여 개행을 한 후에 그 안에 map함수를 이용한 코드를 작성해 주시면 됩니다. return ( { Arr.map((item, i)=>{ {Arr[0].title} {Arr[i].content} {item.price} }) } ) map() 함수의 매개변수로는 첫 번째, 배열의 각각의 아이템이 들어있고 두 번째, 배열의 index값이 들어있습니다. 때문에 배열에서 데이터를 사용할 때는 기존배열[원하는 index번호]. 가져올 값을 기본으로 사용하되 특정 index가 아닌 배열의 모든 아이템에 해당하는 경우에는 기존배열[index].가져올값 이렇게 작성하거나..

변수나 함수들을 재사용하기 위해서 사용하는 게 바로 모듈입니다. 그렇다면 모듈은 어떻게 사용하는 걸까요? 모듈을 만드는 방식으로 export와 export default가 있습니다. export는 다른 곳에서 재사용하기 위해 사용되는데 export는 보통 변수/함수가 하나이상 일 때 사용하고 export default는 변수/함수가 하나 일 때 사용을 합니다. export는 사용할 때 중괄호를 사용하여 export {변수1, 변수2} 작성하는데 사용할 때도 마찬가지로 import {변수1} from '경로'처럼 중괄호를 사용해야 합니다. const hello :string = '안녕하세요'; export hello; const myName = (name) : void => { console.log(`내이..

보통 이미지 파일을 사용을 하려면 img 태그를 사용하는데 이렇게 두 가지 방식으로 사용합니다. 첫 번째 방식 import 사용이름(파일명) from 경로; function ImgComp () { return ( ) } 위 방식은 이미지 하나하나 import를 해야 하기 때문에 사용하는 데 있어서 불편함을 야기할 수 있습니다. 두 번째 방식 function ImgComp(){ return( ) } 위 방식은 대게 public 폴더에 이미지를 저장하는 경우 사용하는데요. 이때 사용되는 경로는 root 기준으로 작성해야 합니다. 때문에 경로를 작성할 때 상대경로로 작성하는 경우 이미지가 안 나올 수 있으니 process.env.PUBLIC_URL를 이용하여 우리가 배포한 실제 경로인 root로 조금 더 안정..