kasumil의 코딩 공작소

++ 기본적으로 php에 대한 이해와 react.js에 대한 이해가 필요합니다 ++ 기존에는 php도 쓰고 ci4도 쓰는바람에 여러가지 짬뽕을 php카테고리에 밀어넣었는데, 이제 ci 폴더를 따로 만들었다. 방법은 진짜 간단하다. 1. bitnami를 설치. 2. ci4를 다운로드 3. c:\bitnami\wamp package 버전\apache2\htdocs\ 해당 ci4압축 해제한 파일 넣어주기. 4. env 파일 복사 후 .env 만들고 production을 주석처리하고, 해당 변수를 복사하여 development로 선언한다. #-------------------------------------------------------------------- # ENVIRONMENT #------------..

Next.js는 이전 포스티에도 언급했듯이 라우팅을 폴더 경로에 따라서 페이징을 처리한다. 그렇다면 id값 같은 동적인 부분은 어떻게 해야할까? 바로 해당 페이지.js나 jsx의 이름을 []로 감싸는 것. /pages ㄴ index.js /news ㄴindex.js /id ㄴ[newsDetail].js 위처럼 하면 고정값이 아닌 동적 라우팅이 진행되어 id값에따라 해당 값을 호출하고 준다. 이때 Router값에 따라 해당 데이터를 호출해야하는데, 이를 어떻게 해야 하나 싶을것이다. import { useRouter } from 'next/router'; // React 내장이 아닌 Next팀이 만든 내장 hook function newsId () { const router = useRouter(); ro..

Next.js의 경우 서버사이드이다. 기존 react와 다르게 크롤링을 위해서 서버에 요청시 모든 페이지를 로딩한다. 즉 검색 기능에 노출되기 쉽다. 그리고 또한 page를 기존 React의 경우 페이징을 위해 무조건 쓰는 React router v5 기준 Switch, v6기준 Routes를 쓰지 않는다. pages ㄴindex.js // domain.com/ 과 같은 상황 ㄴnews ㄴ index.js // domain.com/news ㄴnews/id ㄴindex.js // domain.com/news/id 이러한 구조로 폴더별로 경로를 설정할 수 있어서 매우 좋다. 즉 편리하다 이말이여~ 기존에는 라이브러리를 일일히 호출하고 이를 넣어서 경로 잡아야 했는데, 그런게 없으니 ㅎㅎㅎㅎㅎ import R..

만들려고 했더니 리액트 라우터 돔이 v6로 바뀌면서 호출방식이 바뀐걸 오늘 알았다. Switch 함수가 사라지고 Routes로 변경되었고, usehistory도 대체됨. 이게 뭔 이야기인가 했더니 요거 였다. 바빠서 영상이 올라온 것만 봤었다. 그리고 까먹음. https://velog.io/@ksmfou98/React-Router-v6-%EC%97%85%EB%8D%B0%EC%9D%B4%ED%8A%B8-%EC%A0%95%EB%A6%AC React Router v6 업데이트 정리 velopert님의 영상을 토대로 정리한 블로그 글입니다.동영상으로 보실분들은 velopert님의 유튜브 영상을 시청해주세요!React Router v6가 정식으로 릴리즈 되었다. 공식문서그 동안 사용했던 React Router v..

리덕스 툴킷을 다시 배우려고 정리 좀 했다. useSelector = 리덕스 라이브러리 내장된 함수로 리듀서에 있는 state값을 불러오는 함수. useDispatch = 리덕스 라이브러리 내장된 함수로 리듀서 값을 변경시키는 명령 함수. 왜 리덕스가 어렵냐 하면 보일러 플레이트가 많은 상태에서 실질적으로 용어가 많은데, 쓰임을 모르겠으니 헤매는 것. action은 payload를 가지고 있는데, 가르칠때 action도 같이 가르치니 이해가 안된상태에서 헤매게 되는 것. 쉽게 말하면 dispatch 사용하는 것을 action인데, 이를 다른 것처럼 설명하니 헤매게 되는 것이다. dispatch = action이라고 이해하면 편하다. 최상단 index.js import React from 'react'; ..

https://marketplace.visualstudio.com/items?itemName=jundat95.react-native-snippet React Native Snippet - Visual Studio Marketplace Extension for Visual Studio Code - React Native, Typescript React Native, StyleSheet, Redux Snippet marketplace.visualstudio.com 원래는 스니펫을 일일히 설정해줘야하는데, 귀-찮. 누가 이걸 vscode 확장 프로그램으로 만들어놨다. 이것이 누군가에게는 쓸모없을지라도여러 개의 반복되는 것을 치는 것은 매우 귀찮다. Console clg→ console.log(object) c..

Styled-component import React from 'react'; import styled from 'styled-components'; import Button from './components/Button'; const AppBlock = styled.div` width: 512px; margin: 0 auto; margin-top: 4rem; border: 1px solid black; padding: 1rem; `; function App() { return ( BUTTON ); } SCSS import React from 'react'; import './Button.scss'; function Button({ children }) { return {children}; } expor..

리액트 라우터와 호환되지 않는 단점을 가지고 있으나, 코드스플리팅, 데이터로딩, 서버사이드 렌더링을 가장 쉽게 적용할 수가 있어 매우 각광받는 방식이다. 리액트 라우터를 쓰려고 하는 경우 직접 코드스플리팅, 데이터 로딩, 서버사이드 렌더링을 직접 구현해야한다. nextjs.org/ Next.js by Vercel - The React Framework Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build static and dynamic websites and web applications. nextjs.org Razzle Next.js처럼 서버 사이드 렌더링을 쉽..

useCallback, useMemo 둘다 사용방식은 동일합니다. const onInsert = useCallback(() => { const nextList = list.concat(parseInt(number)); setList(nextList); setNumber(“); }, [number, list]) useEffect의 의존성 배열 마냥 [] 대괄호 안에 있는 것이 변화가 있을때 작동하게 만듭니다. 둘다 성능의 최적화에 사용되는 함수인데, useMemo 함수내부의 연산을 주로 최적화 하는데, 사용된다. useCallback은 이벤트 함수를 필요할때만 만들게 만듭니다. 'useCallback의 첫 번째 파라미터에는 생성하고 싶은 함수를 넣고, 두 번째 파라미터에는 배열을 넣으면 됩니다. 이 배열에..

- 오늘 학습한 내용. RN을 만들고 있다. Todolist를 따라 만들고 있는데, 진짜 짜증나는 게 원인을 알수없는 오류... index.tsx를 쳐야할 것을 앞 글자를 대문자 I 즉, Index.tsx로 쳤다고 인식을 못한다... 내가 코드를 잘못쳤나? 하고 책 저자의 깃허브까지 소스를 복붙해도 안되더라.（＞人＜；） 이때 내가 뭘 잘못했구나 싶었다. 또 뭔 문제야? 하면서 짜증내다가 불현듯 제목을 보니 대문자 Index가 보여서 알았다. 파일 제목을 index로 해야만 정상 작동하는건 좀...;;; youtu.be/zFlTWhzbfnI 아무튼 만들어서 정상작동한다. 추가와 정상적으로 지워지기도 하고 2일을 꼬박 걸렸다... - 소감 철자에 유의하자. 대소문자에 주의하자.