728x90 반응형 Front Side11 [NextJS] params 가져오는 법 - 동적 라우팅 하기 하고 싶었던 것 사용자가 /test/123b123b123 이라는 URL로 들어왔다. 그럼 :id인 123b123b123을 뚝 떼어내서 그걸 Backend 파라미터로 보내주고 싶었다. 기존 React의 경우 useParams()을 이용해서 가져왔다. NextJS의 경우 useRouter() 해서 router.query를 하면 된다고 한다. 될까? 안된다 ❗️ 정확히는 문제가 있다. NextJS는 React와 달리 폴더 구조의 라우팅을 한다. 즉 app/test라는 폴더 안에 page.tsx가 있다는 말인데 여기에서 파라미터인 :id로 사용자가 URL을 치고 들어오면 NextJS에서는 경로를 찾지 못한다. 동적 라우팅 그렇다면 어떻게 해야할까? 간단하다. 동적 라우팅을 해주면 된다. 말이 거창한데 그저 기존.. 2024. 2. 13. [NextJS] CSS을 사용하는 방법 - Tailwind CSS NextJS가 밀어주는 스타일링 방법 본래 CSS-in-JS 마저 안 쓰고 있던 난 최근에 Tailwind CSS라는 새로운 프론트 기술을 알게 됐다. 알게 되는건 좋으나 지금도 불편함을 느끼지 않았기에 도입할 생각이 없었다. Next 공식 문서에서 한 단어를 보게 되기 전까지는 말이다. exceptionally라는 부사를 붙일 정도로 Next에서 적극 추천한다. 이야... 이건 못 참지 😋 바로 공식문서에 나온 코드 그대로 실행하려고 하다가 bun이라는 걸 기억하고 bun 공식문서엔 따로 적혀 있는게 없어서 걍 아래와 같이 코드를 쳤다. bun install tailwindcss postcss autoprefixer bun tailwindcss init -p tailwind.config.js 파일이 생.. 2024. 2. 11. [React] onClick에 매개변수 넣기 뭐야 누르지도 않았는데 이벤트가 발동하네? 간단하게 onClick하면 '클릭했어!' console.log를 실행하는 함수가 있다. 하지만 위와 같이 (리)로딩되자마자 이벤트가 실행되었다! 이유가 무엇일까? 🤔 매개변수를 잘 전달하자 일반 함수에 매개변수를 넘겨주는 방식인 괄호 안에 매개변수를 넣을 경우 즉각 실행되기 때문에 그랬던 것이다. 그렇다면 어떻게 해야할까? onClick={() => {spanButtonClick(list.data._id);}} 우리는 익명함수로 감싸줘야 한다. 이렇게 할 경우 의도한 대로 버튼을 눌러야지만 이벤트가 실행된다. 2023. 2. 7. [React] 웹 컴포넌트 스타일링 관리 styled components로 시작하기 고민의 시작 React를 사용할수록 css 코드를 어떻게 하면 똑똑하게 관리할 수 있을지 고민하게 됐다. 기존에 사용하는 방식은 흡사 무지성인 것 같은 Import 방식이다. // App.js import "styles.css"; const App = () => { return( ... ); } Import 방식은 순수 JS로만 프론트를 짤 때 사용하던 방식이다. css 파일을 하나 만들어주고 그 파일을 가져와서 입혀준다. 이 방법으로 아직까지는 단점을 찾지 못했다. 하지만 React로 프론트를 짤 때 좀 더 똑똑한 혹은 편리한 css 관리가 있지 않을까? 프론트엔드 팀원과 고민 공유 프론트엔드 팀원분과 서로 개발 이야기를 하다가 저절로 고민을 공유하게 되었다. 실제 실무에서는 어떻게 관리하는지 궁금하기.. 2023. 1. 6. React에서 세션이 생성되지만 유지 되지 않는 Issue 해결 - withCredentials 옵션 현재 사이드 프로젝트 에서 Express와 React를 가지고 로그인 서비스를 만들고 있었다. https://bcoding-lab.tistory.com/m/350 Express에서 로그인 서비스 만드는 방법 with.Session 이미 7월 달에 세션으로 로그인 하는 서비스를 만들어본 경험이 있다. 근데 이번에 로그인 서비스를 구현할려고 하니 기억이 안나서 구글링이나 하고 있어 직접 포스팅을 해야겠다는 필요성을 bcoding-lab.tistory.com 하지만 이상한 현상이 포착되었다. 바로 postman에서 로그인을 하면 세션이 잘 유지가 되는데 React에서 로그인을 하면 세션이 생성은 되지만 유지가 되지 않는 Issue가 있었다. 너무나도 이상한 현상이라고 생각했다 😱 axios.post(`http.. 2022. 10. 17. [React] 회원가입과 로그인 서비스 구현 중 컴포넌트 재사용 (1) React에서 가장 좋은 장점은 컴포넌트 기반이기 때문에 재사용이 가능하다는 점입니다! 이번에 회원가입 서비스를 구현한 후 로그인 서비스 구현을 할려고 하니 이미 회원가입에서 만든 페이지를 재사용할 수 있겠다는 생각을 했습니다. 형식이 비슷해서 컴포넌트 재사용을 잘 활용해준다면 편리하게 개발할 수 있을 것 같습니다. 1. 부모 컴포넌트 만들기 - signup.js, signin.js 우선 url에 따라 사용될 로그인 컴포넌트와 회원가입 컴포넌트를 만들어줍니다. import React from 'react'; import AuthForm from './AuthForm'; const Signup = () => { return ( ); }; export default Signup; import React fr.. 2022. 10. 8. [React] useState() 바로 반영 안되는 현상 해결 회원가입 서비스를 만들려고 하는데 비밀번호와 비밀번호 확인가 일치할 때만 가입할 수 있도록 만들고 싶었습니다. 하지만 위와 같이 비밀번호를 동일하게 입력했음에도 불구하고 한 박자 느리게 useState가 반영되었습니다. const onChange = (e) => { setUser({ ...user, [e.target.name]: e.target.value, }) if(user.password === user.passwordCheck) { setIsPassword(true); } else{ setIsPassword(false); } } 코드를 보면 input에 상태값이 바뀔 때마다 onChange 함수가 실행되면서 만약password와 passwordCheck가 같다면 true로 바꿔주고 같지 않다면 fa.. 2022. 9. 21. [React] useEffect 두 번 호출?! with.StrictMode useEffect을 이용해서 백엔드로부터 받은 data를 확인하기 위해 console.log을 찍어보았습니다. 그런데..무려 두 번이나 콘솔에 찍혔습니다. 어째서 두 번이 호출된 것일까요? 🤔 root.render( ); 이유는 태그에 감싸져 있으면 개발 단계에서 오류를 잘 잡기 위해 두 번씩 렌더링 된다고 합니다! useEffect과 관련된 사항이 아니었군요. 그렇다면 StrictMode는 무엇일까요? 바로 React에서 제공하는 검사 도구입니다. 개발 모드일 때만 디버그를 하며 해당 태그로 감싸져 있는 컴포넌트의 자손까지 검사를 한다고 합니다. 공식문서 : https://ko.reactjs.org/docs/strict-mode.html Strict 모드 – React A JavaScript libra.. 2022. 8. 21. [React] 리액트 이해하고 사용하기 (3) useEffect useEffect(() => { fetch("https://api.coinpaprika.com/v1/tickers") .then((response) => response.json()) .then((json) => { setCoins(json) setLoading(false) }) }, []) useState는 값이 변화할 때마다 매번 실행되지만 useEffect는 단 한 번만 실행된다. 즉, 우리가 언제 코드를 실행시킬지 결정할 수 있다는 것이다. useEffect으로 우리는 아래와 같이 언제 코드를 실행시킬지 결정할 수 있다. 1. 처음부터 실행시키기 2. 특정 조건일때 실행시키기 알고보니 useEffect를 이러한 특성을 이용해 서버와 통신하여 데이터를 주고 받을 수 있다. 특정 조건일 때 서버와 통.. 2022. 8. 16. 이전 1 2 다음 728x90 반응형
