이야기를 나눠요
131만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
처음 만난 리덕스(Redux)
리덕스, SWR, React-Query
안녕하세요.처음 만난 리액트부터 리덕스까지 결제하여 강의를 들었습니다.이제 본격적으로 간단한 프로젝트를직접 만들어 보려고 하는데각종 궁금한 점을 블로그에 검색하다가 알게된건데리덕스의 단점을 보완하기 위해서SWR, React-Query를 사용한다는 말을 보았어요.그런데 저는 처음 만난 리덕스 강의를 들으면서이제는 ducks에서 thunks, sagas까지 오면서그 단점이 많이 보완이 된 것 같다는 생각이 들었는데그래도 아직은 제 지식은 부족하고......선생님께서 Redux가 다른 상태관리 라이브러리의 시초기 때문에 알아두면 좋다는 말씀에는 공감하는 바라Redux로 시작할까 싶으면서도어떻게 방향을 잡으면 좋을지 모르겠어서요.저는 백엔드 개발로는 현재 5년차인데프론트엔드를 이번에 하게되어 리액트 자체는 처음입니다.선생님은 Redux, SWR, React-query에서지금 리액트를 시작한다면 어떠한 상태관리를 선택하시는 걸 추천하시나요?각 장단점을 간단하게라도 말씀해 주실 수 있나요...
-
파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
어렵네요.
아... 그냥 어떻게 돌아가는지 보기만 해보라고 하셨지만, 하나하나 따라해보는데 정신없네요. 아... 어렵네요...
-
[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
react input 박스 값 입력 안되는 버그 이슈 해결방법
강의랑 다르게 input 값이 입력이 안되는 상황이 발생하여서 해결방법 공유해드릴려고 합니다~~ 아래블로그 참고하세욥!https://kmhan.tistory.com/316
-
Slack 클론 코딩[실시간 채팅 with React]
(리덕스) 한 컴포넌트에서 다른 컴포넌트로 상태 옮기기
안녕하세요. 제로초님... 강의도 들으면서 저혼자 토이프로젝트를 하고 있습니다.제가 원하는 대로 구현이 안되서 5시간동안 헤매고 있는데,물어볼 데가 없어서 감히 올립니다 ㅠㅠ현재 문제상황은 모달컴포넌트에 작성한 입력값이 콘솔에는 잘 찍히는데, 이 값을 다른 컴포넌트(todoItem.js)로 옮기는 방법을 모르겠습니다.리액트 리덕스를 사용해서 상태관리를 하고 있는데요. useSelecter를 사용해보았는데, 초기화된 값만 유지가 되고 업데이트된 상태가 잘 넘어가지 않습니다...다음은 Modal.js와 TodoItem.js 컴포넌트의 코드입니다.TodoItem 컴포넌트 코드를 어떻게 짜야할지 조언 부탁드립니다.리듀서를 써서 전역으로 상태관리를 하고 싶은데, 잘 안됩니다 ㅜㅜ
-
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
이직 질문있습니다.
안녕하세요 강사님, 강의 잘보고 포트폴리오도 만들고있습니다 (:제가 27살이면서 고졸, 경력은 약 2년(1년8개월) 정도 Si에서 일했거든요,근데 잠시 아파가지고 작년 12월말에 그만두고 3달정도 쉬어서 4월부터 강의 보고하고있는데 Si에서는 react 이런거 안쓰고 그냥 spring boot에서 jquery, vanila.js, java, sql썼는데 혹시 제가 프론트엔드로 갈려고 서류같은거 넣고 할때경력은 Si에서 일한 1년 8개월 경력을 쓰면 되는건가요?아니면 프론트엔드 경력을 써야하나요? ※ 쓸때없는 이야기 일 수 도 있어서 정말 죄송합니다, 그만두고 나서 개인적으로 취업을할 수 있을까 생각을 많이합니다, 그래서 뭐라도 해야겠다 싶어서 코딩테스트 + 현재 강의로공부하고있는데 취업에 대한 불안한 마음을 떨칠수 있을지도 질문을 남겨봅니다..
-
[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
1
1
-
[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요 요번에 프론트를 처음으로 개발하게 된 개발자입니다
저가 요번에 프론트를 처음으로 공부하게 되면서 처음에는 html, css, javascript 에 관한 책을 사고 그것을 먼저 독학을 했습니다. 그런데 html 으로 할 수 있는 작업 보다 리액트를 통해서 작업 한다는 게 훨씬 편하다는 소리를 듣고 이 강의를 듣기를 시작했습니다. 강의 내용을 들었을 떄 왠만한 내용은 다 이해가 가나. 저가 실제로 맨땅에서 사이트를 구축할려고 하려고 보니 저가 html 으로 짠것을 리액트에서 어떻게 구현을 하는지 잘 모르겠습니다... 예를 들어 저가 지금 막히는 부분이 html 에서 다른 사이트를 불러온다고 했을때 그냥 href=./주소.html 이런 형식으로 쉽게 불러 올 수 있으나 리액트의 경우 다른 형식이다 보니 저가 먼저 만들어 놓은 html 이 작동을 안 하는 등. 리액트와 html을 연동을 시켜 생각을 못하겠습니다.... 사이트 구축을 한다고 했을 때 같이 생각이 안되고 따로 생각이 드네요..... 이거를 어떻게 해결해야 될까요... 저가 생각하기로는 리액트로 웹사이트를 실제로 만드는 강의를 들을려고 하는데 리액트로 웹사이트를 만드는 강의는 별로 없더라구요.... 혹시 추천가능한게 있을까요?
-
[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
Vs code 에 관하여 질문하게 있습니다.
수업 내용이 아닌 VS code관련된 질문입니다.저장시 자동으로 ; 이 찍히는게 보이는데 앞의 내용을 따라하여도 안찍혀 여쭙게 됩니다. 혹시 다른 설정이 있는가요??
-
웹 게임을 만들며 배우는 React
회사 입사했을때
사수가 제로쵸님이면 참 좋을거 같아요
-
Slack 클론 코딩[실시간 채팅 with React]
Access denied for user 'root'@'localhost' (using password: NO) 참고하세요
back 디렉토리 안에서 npm i 실행하고 .env 환경변수까지 잘 지정해서 저장했는데 npx sequelize db:create 명령어를 때리면 Access denied for user 'root'@'localhost' (using password: NO) 에러가 나와서 환장하고 있었습니다.그러다가 config.js에서 console.log(process.env)를 입력해서 넣어보니 process.env.MYSQL_PASSWORD이 아니라 process.env.PASSWORD에 .env의 패스워드가 들어있었습니다. 따라서 // 기존 "password": process.env.MYSQL_PASSWORD,// 신규 "password": process.env.PASSWORD,이렇게 고치면 해결될수도 있습니다.
-
[리뉴얼] React로 NodeBird SNS 만들기
최신 버전 업데이트 요청 건
안녕하세요. 이제 막 강의를 수강하려고 보고 있습니다. 1. 현재 강의에서 말하는 버전 next 9 버전이 실무에서 많이 사용되는 버전과 호환성에 문제가 없을까요? 2. next버전이 생각보다 낮던데, 리뉴얼 버전에서는 다 최신 버전을 사용하실 예정인가요? 3. 리뉴얼을 하신다면, 해당 강좌는 재구매를 해야하는 것인가요? 이상 질문 3가지 말씀 드렸습니다. 강의 감사하고 잘 듣겠습니다. 좋은하루 되세요.
-
[리뉴얼] React로 NodeBird SNS 만들기
[정보공유] next13일 경우 `className` did ont match. 오류 발생 시 해결법
결론: 루트 디렉토리에 next.config.js 파일 생성후설정에 compiler: {styledComponents: true} 추가 설명:스타일드 컴포넌트를 막 바꾼 뒤 저장을 했을 경우에는 오류가 발생하지 않습니다.하지만, ctrl+shift+R이나 F5 등 새로 고침을 했을 경우에 Prop className did not match. 라는 warning이 콘솔에 뜨면서 스타일이 적용이 되지 않을 경우가 있습니다. 해당 오류 발생 시에 저는 위 설정을 추가하니 해결되었습니다.
-
너네 백엔드 하고 싶은 거 있으면 얼마든지 해 난 괜찮어 왜냐면 나는 파이어베이스가 있어
로그인정보를 전역에서 사용할수있는방법을 리덕스툴킷으로
가르쳐주실순 없나요 궁금합니다. ㅠ
-
[ADDINEDU] 자바스크립트 풀스택 개발자 양성과정 (Node.js, REACT) _2개월 과정을 모집합니다.
자바스크립트를 활용한 풀스택 개발자(MERN스택) _프로젝트 2개월 과정을 모집합니다. **본 과정은 자바스크립트로 웹과 서버를 개발하는 MERN스택 과정으로 10명 이하 소수인원으로 운영되는 맨투맨 강의 입니다. ■커리큘럼1. 환경구축 - 리눅스 가상화, Git/Github2. 웹프로그래밍 - HTML5, Express.JS, JavaScript, ECMA6, React.js, Node.js3. SQL - MongoDB, MySQL■ 프로젝트 안내페이스북이 개발한 React.js를 통해 프론트서버를 구축하고 SPA 개발Node.js를 통해 서버사이드 개발Restful API 서버를 개발하여 모바일과 웹에 빠르게 대응 가능한 웹앱 개발Node.js와 Javascript를 사용하여 웹사이트용 서버를 만들고 RDBMS와 데이터 전송을 체크 하여 웹게시판 CRUD 개발 및 구축■주 대상자취업을 위한 프로젝트 경험 및 포트폴리오가 필요하신 분웹디자인, 퍼블리싱 경험자 중 개발자로 이직하고자 하시는 분웹개발에 대한 전반적인 이해도가 필요하신 분IT기업 취업을 위한 전문 컨설팅이 필요하신 분■ 수강생 특전차등국비지원훈련장려금 약 11만원 지급국취제도 참여시 최대 50만원 차등지급코딩용 노트북현업 개발자 멘토링NCS 이수증&수료증 발급전문 취업컨설턴트 1:1상담기업매칭 및 취업지원가산디지털단지 도보 5분■ 필수조건국민내일배움카드 발급 및 신청 가능자자기부담금(85만원) 신청 링크(지금 바로 신청하세요!) ↓↓https://forms.gle/8Uho7Ptb8CZzxTb3A 카카오톡 상담 링크(더 자세한 내용을 원한다면?)↓↓https://pf.kakao.com/_JxlIxixj 강의 상세정보 및 프로젝트 소개영상 보기↓↓https://youtu.be/kktRiIlpVqg ADDINDEU 홈페이지 ↓↓http://addinedu.com/sub/edu_view.php?ge_id=17
-
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
context-api쪽 auth.tsx를 제 나름대로 리팩토리 해보았습니다.
[auth.tsx]import { User } from '@/shared/interfaces/user.interface'; import { createContext, FC, PropsWithChildren, useContext, useReducer, Dispatch, ReactNode, } from 'react'; interface AuthState { authenticated: boolean; user: User | undefined; loading: boolean; } export type AuthAction = | { type: 'LOGIN'; payload: User } | { type: 'LOGOUT' } | { type: 'STOP_LOADING' } | { type: undefined }; const initialState: AuthState = { authenticated: false, user: undefined, loading: true, }; const AuthContext = createContext<{ state: AuthState; dispatch: Dispatch<AuthAction>; }>({ state: initialState, dispatch: () => null, }); const authReducer = (state: AuthState, action: AuthAction): AuthState => { switch (action.type) { case 'LOGIN': return { ...state, authenticated: true, user: action.payload, }; case 'LOGOUT': return { ...state, authenticated: false, user: undefined, }; case 'STOP_LOADING': return { ...state, loading: false, }; default: throw new Error(`Unknown action type: ${action.type}`); } }; const AuthProvider: FC<PropsWithChildren<{ children?: ReactNode }>> = ({ children, }) => { const [state, dispatch] = useReducer(authReducer, initialState); return ( <AuthContext.Provider value={{ state, dispatch }}> {children} </AuthContext.Provider> ); }; const useAuthStateDispatch = () => useContext(AuthContext); export { AuthProvider, useAuthStateDispatch }; [login.tsx]import InputGroup from '@/components/ui/field/InputGroup'; import axios from 'axios'; import { AuthAction, useAuthStateDispatch } from 'context/auth'; import { NextPage } from 'next'; import Link from 'next/link'; import { useRouter } from 'next/router'; import React, { FormEvent, useState } from 'react'; const LoginPage: NextPage = () => { const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); const [errors, setErros] = useState<any>({}); const router = useRouter(); const { dispatch } = useAuthStateDispatch(); const handleSubmit = async (e: FormEvent) => { e.preventDefault(); try { const res = await axios.post( '/auth/login', { password, username }, { withCredentials: true }, ); dispatch({ type: 'LOGIN', payload: res.data?.user }); router.push('/'); } catch (error: any) { console.log(error); setErros(error.response.data || {}); } }; return ( <div className="bg-white"> <div className="flex flex-col items-center justify-center h-screen p-6"> <div className="w-10/12 mx-auto md:w-96"> <h1 className="mb-2 text-lg font-medium">로그인</h1> <form onSubmit={handleSubmit}> <InputGroup placeholder="Username" value={username} setValue={setUsername} error={errors.username} /> <InputGroup placeholder="Password" value={password} setValue={setPassword} error={errors.password} /> <button className="w-full py-2 mb-1 text-xs font-bold text-white uppercase bg-gray-400 border border-gray-400 rounded"> 로그인 </button> </form> <small> 아직 아이디가 없나요? <Link href="/register" className="ml-1 text-blue-500 uppercase"> 회원가입 </Link> </small> </div> </div> </div> ); }; export default LoginPage; 누군가에겐 도움이 되지 않을까해서 남겨 보아요!
-
Slack 클론 코딩[실시간 채팅 with React]
프로젝트
제로초님, 강의에 대한 내용은 아니지만 이번에 강의를 두 번 보고나서 이제 개인적으로 블로그를 만들어보려고 하는데, 서버도 연결해보려고 합니다.이번에 서버를 처음 만들어보는 건데 보통 백엔드랑 프론트엔드 부분이랑 같이 만들 때, 프론트 쪽부터 먼저 만들고 백엔드 쪽을 하는게 낫나요? 아니면 백엔드쪽부터 먼저 만들어 놓고 하는 게 낫나요?
-
따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
잘되다가 갑자기 send 버튼 입력시 {success : false , err : {...}} 에러 나오시는 분들
{ "success": false, "err": { "index": 0, "code": 11000, "keyPattern": { "email": 1 }, "keyValue": { "email": null } } } 위와 같이 에러 나오시는 분들 동일한 email 을 가진 요청을 보낸건 아닌지 확인해보세요. 앞선 강의에서 email 을 User.js 에서 unique : 1로 설정했기 때문에 동일한 email 을 가진 유저를 또 Post 하게 되면 에러가 발생합니다.
-
파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
migrate 후에도 데이터베이스가 생성되지 않습니다.
우선 강의를 통해 정말 많은 것을 배우고 있어 감사의 말씀부터 드립니다^^ 문제 요약: 도커 컨테이너에 진입 후 python3 manage.py migrate 명령을 통해 테이블 생성 후에도, 장고 admin 페이지에 들어가 보면 데이터베이스가 생성되지 않았다는 오류가 나옵니다.azure postgresql을 장고 코드와 연동한 코드는 다음과 같습니다.그리고 docker에 진입하여 migrate 명령을 다음과 같이 진행하여 테이블들이 생성되는 것을 확인하였습니다.(이후 superuser도 생성하였습니다.)그럼에도 장고 admin페이지 로그인해서 들어가 보면 데이터베이스가 생성되지 않아서 발생하는 에러가 나타납니다.혹시나 하여 docker exec 명령을 활용하여 실행 중인 컨테이너에 진입하여 보니 migrate를 한 이후에도 다음과 같이 테이블이 생성되지 않은 모습이 나타납니다.장고와 azure postgresql 데이터베이스와 연동은 이루어진 것으로 보이는데, 어떤 이유로 테이블 생성이 안 되는 지를 모르겠습니다.ㅠㅠ
-
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
yarn cli 에러 해결
node.js까지 설치하고 yarn을 설치하고나서 이런 오류가 떴습니다.yarn : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\사용자이름\AppData\Roaming\npm\yarn.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를참조하십시오. 해당 오류를 해결할법을 찾아보니https://choonse.com/2021/06/25/101/ 해당 블로그에서 알려준대로 따라하니까 해결되었습니다.알고보니 yarn도 설치 안되어있었더라고요 혹시나 해당 에러를 겪으신분은 이렇게 해결하시면 될것같습니다. yarn --version 명령어 치셔서 yarn이 제대로 설치되어있는지도 체크해주시면 좋을것같아요
-
프로젝트로 배우는 React.js
Switch 어쩌고 에러 뜨시는분들
export 'Switch' (imported as 'Switch') was not found in 'react-router-dom'라이브러리 몇버전부터인지는 모르겠지만 이제는Switch를 지원안하고 대신해서 Routes로 대채하여 가능합니다그대신에 내부 코드를 아래 처럼 작성하니 동작합니다 <Routes> <Route path="/" exact element={"Home Page"} /> </Routes>