이야기를 나눠요
156만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
플러터와 AWS 연동 문의
안녕하세요. 먼저 질문드리기 앞서 좋은 강의 감사드립니다.아직 강의를 다 듣지 않은 시점에서 조금은 섣부른 질문일 수도 있으나, 현재 진행중인 프로젝트 일정상 가능성여부를 보고해야하여 다음과 같은 질문을 드리는 점 양해 부탁드립니다. 질문은 다음과 같습니다. 구현조건AWS에서 일정 시간마다 또는 결과물의 상태가 변화 할 때(e.g 피카츄에서 라이츄로 진화)마다 서버에서 데이터를 전송하여 어플리케이션에 반영(단, 결과물 타입은 int 타입)질문사항1) AWS 와 플러터를 연동 가능 여부2) 가능하다면, 초급/중급 강의에서 어떤 렉쳐를 통해 학습을 진행하면 보다 빠르게 실습이 가능한지 입니다.다시 한 번.. 본래 커리큘럼의 취지에 맞춰 순서대로 실습하고 배우는 것이 필요하지만, 일정상 우선 제작을 해야하는 입장이라 다음과 같은 질문을 드리는 점 양해부탁드립니다..감사합니다.
-
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(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]
프로젝트
제로초님, 강의에 대한 내용은 아니지만 이번에 강의를 두 번 보고나서 이제 개인적으로 블로그를 만들어보려고 하는데, 서버도 연결해보려고 합니다.이번에 서버를 처음 만들어보는 건데 보통 백엔드랑 프론트엔드 부분이랑 같이 만들 때, 프론트 쪽부터 먼저 만들고 백엔드 쪽을 하는게 낫나요? 아니면 백엔드쪽부터 먼저 만들어 놓고 하는 게 낫나요?
-
[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
코팩님 지도 관련 재밌어요!!!
지도 강의에서 재밌으면 댓 남겨달라고 하신걸 듣고댓글 남겨요더 추가 원해요!아주 api사용 하는거 재밌어요
-
애플 웹사이트 인터랙션 클론!
2023_02_05_강의 수강 시작합니다
좋은 강의 감사합니다 ^^개발자들과 협업할때 답답함에 못이겨서 유튜브에 올라온 강의부터 정독했습니다,23_02_05 강의 스타트! 화이팅!
-
인프런 클론코딩
인프런 사이트를 클론코딩해서 front/back 모두 구현할줄 알면 채용 가능한가요? 혼자 공부해서 어느 정도인지 모르겠습니다. @,@