이야기를 나눠요
132만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
리액트와 타입스크립트를 현업에서 쓸정도까지 닦으려면
안녕하세요, 삐약이 개발자입니다. 저는 백엔드 개발자라 사실 프론트에서 쓰는 뷰는 고사하고 리액트 조차 모르는 개발자입니다. 사실 백엔드개발자기도 하고, 아직 경험이 없는지라 이르기는 합니다만, SI를 다니고 있기에 저에게 마치 풀스택개발자처럼 리액트를 요구하기도 하더군요. 그래서 어차피 제 경험이 되겠지 싶어 리액트 역시 공부하려고 생각한터라 이벤트도 겸겸해서 리액트 + 타입스크립트 모두 가지고 있는 상태입니다. 다만 아직 스프링도 그렇게 잘하지 않는데 어려운게 아닐까? 현업에서 쓰기에는 많이 부족하지 않을까 싶어 걱정이 되는데, 이정현님의 생각에 리액트, 혹은 타입스크립트 까지 둘다 익혀서 실무에서 다소 혼나겠지만, 제가 현업에서 쓰는데 무리없이 쓰려면 어느정도까지는 반드시 완벽하게 이해하면 문제없다 하는 구간이 있을까요? 리액트가 매우 넓고 자유도가 높은 기술이라 들었습니다. 그렇기에 지금은 기초지만, 어디까지는 확실하게 끝내야 좋을지 고민해결해주심 좋겠습니다.
-
[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
localStorage오류
삭제된 글입니다
-
하루만에 배우는 express with AWS
[강의 추가] 건의
삭제된 글입니다
-
[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
힘이 듭니다
4장 보다가 코드리딩이 안되서 멘붕이 왔었습니다.6장에 이제 들어가는데 좀 더 잘되겠죠..? 힘을 주십시요 선생님
-
[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
react input 박스 값 입력 안되는 버그 이슈 해결방법
강의랑 다르게 input 값이 입력이 안되는 상황이 발생하여서 해결방법 공유해드릴려고 합니다~~ 아래블로그 참고하세욥!https://kmhan.tistory.com/316
-
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
Ubuntu 설치 시
안녕하세요. 강의 시작시, 사용중인 PC(노트북)의 OS를 Linux(Ubuntu)로 변경하는 게 조금 부담이 있어, Virual Machine 을 설치하여 해당 강의를 수강하여도 무방할까요?? 현재 PC(노트북)의 Memory는 16GB입니다.
-
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
이직 질문있습니다.
안녕하세요 강사님, 강의 잘보고 포트폴리오도 만들고있습니다 (:제가 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
-
mongoDB 기초부터 실무까지(feat. Node.js)
Unique Index 강의 내용 정보입니다.
await mongoose.connect(MONGO_URI, { useNewUrlParser: true, useUnifiedTopology: true })1:08 부분에 컴파일 후 Warning 내용으로 createIndexes를 사용하는 것이 좋다는 내용이 올라와서 해당 설정을 잡아 주셨는데요. mongoose 6 버전 이후부터는 해당 설정을 적용을 하면 오히려 Error이 발생하고 있습니다.MongoParseError: option usecreateindex is not supported위 Error이 발생하고 있네요. 검색을 해보니 Mongoose 6.0 이상부터는 useNewUrlParser: true, useUnifiedTopology: true, useCreateIndex: true, useFindAndModify: false위 4가지 설정과 관련하여 위와 같이 설정 값을 default로 잡아두고 있기에 해당 설정을 지워하지 않는다고 하네요. https://velog.io/@lee951109/MongoDB-MongoParseError-options-usecreateindex-usefindandmodify-are-not-supported 참고 사항으로 추가해주시면 좋을 것 같습니다 ㅎㅎ
-
[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
Vs code 에 관하여 질문하게 있습니다.
수업 내용이 아닌 VS code관련된 질문입니다.저장시 자동으로 ; 이 찍히는게 보이는데 앞의 내용을 따라하여도 안찍혀 여쭙게 됩니다. 혹시 다른 설정이 있는가요??
-
[리뉴얼] 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이 콘솔에 뜨면서 스타일이 적용이 되지 않을 경우가 있습니다. 해당 오류 발생 시에 저는 위 설정을 추가하니 해결되었습니다.
-
탄탄한 백엔드 NestJS, 기초부터 심화까지
cron, trigger
안녕하세요 강의 수강 후 팀원들과 웹 서비스 개발에서 백엔드를 맡고 있는 수강생입니다. 저희 서비스에서 db에 생성된 데이터가 생성될 때 지정한 날짜와 시간을 기준으로 24시간 후에 해당 데이터의 특정 컬럼 값의 상태가 변하는 제공되는 기능을 구현 중에 질문이 생겼습니다.해당 기능에서 cron 스케쥴러를 이용하는 것과 db단에서 trigger를 사용하여 처리하는 것 중 trigger를 사용할까 싶은데 trigger 사용시 db 복잡도가 너무 증가하지 않을까 싶어서 질문 드립니다. 참고로 db는 postgresql을 사용하고 typeorm 사용 중 입니다!
-
탄탄한 백엔드 NestJS, 기초부터 심화까지
중복코드 제거 공유
let error = exception.getResponse(); if (typeof error === 'string') { error = { error }; } response.status(status).json({ statusCode: status, timestamp: new Date().toISOString(), path: request.url, ...error, });문법공부는 따로 안해서, 더 좋은 방법이 있겠지만..
-
[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; 누군가에겐 도움이 되지 않을까해서 남겨 보아요!
-
따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
잘되다가 갑자기 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 하게 되면 에러가 발생합니다.
-
지금 당장 NodeJS 백엔드 개발 [사주 만세력]
아마존 aws에 올리려고 하는데, 방법 좀 가르쳐 주세요.
아마존 aws에 올리니, 오류가 나네요. 방법좀 가르쳐 주시면 고맙겠습니다. 1년 동안 무료로 사용할 수 있는 그곳에 올려서 활용해 보려고 합니다.
-
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
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이 제대로 설치되어있는지도 체크해주시면 좋을것같아요
-
[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
단톡방 링크 어딨는지 알 수 있을까요?
비번은 알고 있습니다.