이야기를 나눠요
130만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
Slack 클론 코딩[실시간 채팅 with React]
군대에서 개발 환경 구축
군대 사지방에서 repl에서 공부 할려고 하는데 repl 환경에서도 환경구축이 가능한가요?
-
[리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편
프론트앤드로 취업이 급한데 class 와 객체지향에 대해 지금 공부해야 할까요.?
제로초 선생님!지금 부트캠프 졸업하고, 이력서를 넣는데 다 떨어지는 상황입니다.이런 상황에서, 타입스크립트와 next.js 를 배우면서 이력서 수정중입니다.근데 사실 자바스크립트 할 때도 그렇고, react도 함수형 함수형 hook으로 되있잖아요??그래서 class를 딱히 사용할 일이 없어서 class 관련 개념들을 계속 까먹는게 반복되는데,사실 사용을 해봐야 기억에 오래남잖아요..?근데 객체지향 개념을 적용하면서 공부하는게 하루이틀로 될것 같지는 않아서요,, 위의 이유로 제로초 선생님께 한번 여쭤보고 싶어 질문 남겨요..일단 타입스크립트는 필수이기 때문에타입스크립트를 배우면서 또다시 class를 사용한 객체지향문법을 공부하고 넘어갈지,react 와 next.js 위주로 하면서 타입스크립트를 적용해야 할지 고민이됩니다..어떻게 하는게 좋을까요?
-
맛집 지도앱 만들기 (React Native + NestJS)
hook 이나 utils 함수 작성시
안녕하세요 강의 잘 듣고 있습니다. 함수 작성 하실 때 화살표 함수 말고function 으로 함수를 작성하시는 이유가 있나요? 검색을 해도 큰 차이는 없어 보이는데취향 차이로 알고 있어도 될까요? 감사합니다.
-
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - Part 1 NestJS Core
docker + typeorm + nestjs 관련 질문드립니다!
수업 따라가면서 현재 typeorm으로 테이블까지 생성했습니다.강의 한편을 2~3번 돌려보면서 notion에 내용 정리하고, 이해 안되는 부분은 구글링 하면서 공부하고 있는데 제가 제대로 이해 하고 있는게 맞는지 질문 드리고자 합니다. 첫번째는 docker-compose로 컨테이너를 운영하는데, 현재 강의에서는 postgres image 를 컨테이너에서 사용하고, volumes 에서 마운트해서 사용하고 있기 때문에 따로 로컬 pc에서 따로 postgres 를 다운로드 및 설치를 안해도 잘 작동되는 거로 이해 하는게 맞는지 궁금합니다. 두번째는 posts.entity.ts에서 typeorm으로 생성한 테이블이 로컬호스트에 저장이 되는데, 이것도 마찬가지로 컨테이너의 postgres 폴더와 마운트되어있기 때문에 자동으로 컨테이너에 저장이 되는 구조가 맞는지도 궁금합니다!
-
따라하며 배우는 타입스크립트 A-Z
Generics(2) 에서 배운것을 응용하여 첫시간에 배운 객체의 동적할당 부분을 구현하고 싶습니다.
interface Post{ id:number title:string [key:string]:unknown } const post:Post={ id:1, title: 'post 1' } post['description']='description' post['pages']=100 항상들어가는 id:number, title:string 속성을 제외한 동적할당 부분 post['description']='description', post['pages']=100을 [key: string]: number| string 으로 구현하려고 하는데 자료구조상 구현이 불가능할까요? interface Post<T extends {id: number, title: string}> { id:number title:string [key:string]:T } const post:Post<string | number>={ id:1, title: 'post 1' } post['description']='description' post['pages']=100
-
한 입 크기로 잘라먹는 타입스크립트(TypeScript)
npm audit 오류
npm i @types/node @types/react @types/react-dom @types/jest 위 명령 실행하니 npm audit 오류 뜹니다
-
웹 게임을 만들며 배우는 React에 TypeScript 적용하기
타임어택 7기
웹게임 React에 TS 적용하기는 타임어택 유료강좌에 해당 안되나요? 타임어택 7기 참여하고 싶은데 구글폼에 웹게임 React무료강좌만 선택지에 있고 웹게임 React에 TS 적용하기는 선택지에 없어서 웹게임 React에 TS 적용하기 강좌는 유료강좌로 포함안되는 건지 여쭤보고싶습니다. 아니면 그냥 React무료강좌 선택지를 선택하면 될까요?
-
실전 프로젝트로 배우는 타입스크립트
[참고] 공공데이터포털 데이터도 9월부터는 사용할 수 없습니다.
코로나가 9월부터 2급 감염병에서 4급 감염병으로 전환됨(일일 확진자수를 집계하지 않음)에 따라 9월부터는 공공데이터 OpenAPI를 활용할 수 없게 됩니다. 다만, 다행(?)이도 아직까지 8월까지의 데이터를 확인할 수 있으니 강사님이 설명하시는 그대로 구현할 순 없지만 각자 커스터마이징 하여 구현하는 데엔 큰 지장은 없어 보입니다.제가 사용하는 공공데이터포탈 OpenAPI는 다음과 같습니다.
-
Slack 클론 코딩[실시간 채팅 with React]
Jwt Token 을 어디에 저장하면 좋은가요?
안녕하세요. 개인 프로젝트를 진행하던 도중 Jwt Token 관련 질문이 있어서 글을 남기게 되었습니다!현재 서버로부터 Jwt Token을 받았습니다. (access-token 1개로만 구현해보려고 합니다.)해당 토큰을 프론트에서 어떤 방식으로 저장을 하여 로그인한 사용자만 이용할 수 있는 서비스에 인증을 해주시나요?? 대체로 어떤 방법으로 쓰이는지와 그 이유가 궁금합니다!검색을 하면서 찾아본 것은 아래 3가지 였습니다. 쿠키 setCookie("access-token", data.accessToken);로컬스토리지 localStorage.setItem("access-token",data.accessToken);헤더 axios.defaults.headers.common['Authorization'] = 'Bearer ' + res.data;
-
Slack 클론 코딩[실시간 채팅 with React]
개인 프로젝트 DB 구조 의견 드립니다!
안녕하세요.개인프로젝트로 간단하게 가계부를 만들어볼까 하는데요.다만, 회원가입하고 로그인해야 가계부 관련 화면이 보이도록 할 예정입니다.이때 회원가입시 받는 항목을 id, password, 가입하려는 이유 이렇게 3가지만 간단하게 받으려고 하는데 개인정보 관련된 이메일이나 핸드폰 번호까지 받아야할까요?? (혼자 고민하다가 의견이 궁금하여 여쭤봅니다!)간단하게 받으려는 이유는 개인이 개인 가계부를 작성하는 것인데 개인정보를 굳이 받을 필요가 있나 싶어서요! 나중에 구글 sns 로그인만 연동시키려고 합니다! 그리고 만약 3가지만 간단하게 받는다면 no, id, password, reason, joined_at, created_at 이렇게 DB를 만드려고하는데요! 괜찮을까요?? 의견 듣고 싶습니다.
-
실전 연습으로 익히는 고급 타입스크립트 기술
문제 링크가 새 창으로 열게 해주셨으면 좋겠습니다.
뒤로 가기 귀찮아서요😂
-
[리뉴얼] 타입스크립트 올인원 : Part2. 실전 분석편
강의 이후 방향
삭제된 글입니다
-
[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
힘이 듭니다
4장 보다가 코드리딩이 안되서 멘붕이 왔었습니다.6장에 이제 들어가는데 좀 더 잘되겠죠..? 힘을 주십시요 선생님
-
Slack 클론 코딩[실시간 채팅 with React]
(리덕스) 한 컴포넌트에서 다른 컴포넌트로 상태 옮기기
안녕하세요. 제로초님... 강의도 들으면서 저혼자 토이프로젝트를 하고 있습니다.제가 원하는 대로 구현이 안되서 5시간동안 헤매고 있는데,물어볼 데가 없어서 감히 올립니다 ㅠㅠ현재 문제상황은 모달컴포넌트에 작성한 입력값이 콘솔에는 잘 찍히는데, 이 값을 다른 컴포넌트(todoItem.js)로 옮기는 방법을 모르겠습니다.리액트 리덕스를 사용해서 상태관리를 하고 있는데요. useSelecter를 사용해보았는데, 초기화된 값만 유지가 되고 업데이트된 상태가 잘 넘어가지 않습니다...다음은 Modal.js와 TodoItem.js 컴포넌트의 코드입니다.TodoItem 컴포넌트 코드를 어떻게 짜야할지 조언 부탁드립니다.리듀서를 써서 전역으로 상태관리를 하고 싶은데, 잘 안됩니다 ㅜㅜ
-
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,이렇게 고치면 해결될수도 있습니다.
-
[리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편
노에밋 ㅋㅋ
ㅋㅋㅋㅋ
-
타입스크립트 입문 - 기초부터 실전까지
정의된 타입 제한하기로 createDropdownItem 적용
function createDropdownItem<T extends { toString: Function }>( item: DropdownItem<T>) { const option = document.createElement("option"); option.value = item.value.toString(); option.innerText = item.value.toString(); option.selected = item.selected; return option; }정의된 타입으로 타입을 제한하기로 createDropdownItem 을 수정해보았습니다.
-
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(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]
프로젝트
제로초님, 강의에 대한 내용은 아니지만 이번에 강의를 두 번 보고나서 이제 개인적으로 블로그를 만들어보려고 하는데, 서버도 연결해보려고 합니다.이번에 서버를 처음 만들어보는 건데 보통 백엔드랑 프론트엔드 부분이랑 같이 만들 때, 프론트 쪽부터 먼저 만들고 백엔드 쪽을 하는게 낫나요? 아니면 백엔드쪽부터 먼저 만들어 놓고 하는 게 낫나요?
-
Vue로 Nodebird SNS 만들기
nodebird에 타입스크립트를 입히고 있는중입니다!! 같이 하실분이나 피드백해주실분들~
어느정도 진행된 상태입니다.. https://github.com/gmldnjs26/nuxt-typescript-nodebird