안녕하세요, 선배님. 저는 현재 서버 개발 경력 1년, 클라이언트 개발 경력 6개월 나머지 유지 보수 경력들을 포함해 약 3년 차에 접어든 주니어 개발자입니다. 지금은 주로 서버 개발자로 활동하고 있지만, 최근 진로와 관련된 고민이 많아 선배님께 조언을 구하고자 이렇게 글을 드립니다. 제 성향은 백엔드 개발이 잘 맞는다고 느끼고 있지만, 프론트엔드 개발에 대한 관심이 점점 커지고 있습니다. 특히 서비스중이신 강의들을 들으면서 프론트엔드를 바라보는 시각이 완전히 달라졌고, 점점 더 매력을 느끼고 있는 상황입니다. 이제는 어느 정도 마음의 결정을 내려야 할 시점이라는 생각이 들어, 전문적으로 어떤 커리어를 선택해야 할지 고민하고 있습니다. 프론트엔드와 백엔드 모두 매력적인 분야이지만, 새로운 도전을 선택하는 것이 맞는지, 아니면 제가 잘 맞고 경험이 더 많은 백엔드에 집중하는 것이 맞는지 아직 명확히 판단하기 어렵습니다. 선배님의 경력을 살펴보니 주로 자바스크립트를 중심으로 다양한 개발 작업을 해오신 것으로 알고 있습니다. 서버 개발도 분명 경험하셨을 것 같고, 저와 비슷한 고민을 해보셨을 것 같아 더욱 궁금해졌습니다. 혹시 선배님께서도 과거에 프론트엔드와 백엔드, 혹은 특정 기술 스택 사이에서 고민하셨던 적이 있으셨나요? 그리고 그러한 고민 끝에 무엇이 선배님을 자바스크립트라는 언어로 전문성을 갖추고 커리어를 쌓게 만든 결정적인 요인이었는지 궁금합니다. 선배님의 선택 과정이나 기준이 저에게도 많은 영감을 줄 수 있을 것 같습니다. 혹시 선배님께서 제가 이런 결정을 내리는 데 참고할 수 있는 조언이나 방향성을 제시해 주실 수 있을까요? 선배님의 경험과 지혜를 조금이라도 나눠주신다면 큰 힘이 될 것 같습니다. 긴 글 읽어주셔서 감사드리고, 좋은 하루 보내시길 바랍니다. 감사합니다!
const workA = () => { return new Promise((resolve) => { setTimeout(() => { resolve(`workA`); }, 5000); }); }; const workB = () => { return new Promise((resolve) => { setTimeout(() => { resolve(`workB`); }, 3000); }); }; const workC = () => { return new Promise((resolve) => { setTimeout(() => { resolve(`workC`); }, 10000); }); }; const start = async () => { try { let results = await Promise.all([workA(), workB(), workC()]); console.log(results); results.forEach((res) => console.log(res)); } catch (err) { console.log(err); } }; [10:01] 강의 내용 보면 workA가 5초 workB가 3초, workC가 10초인데, 결국 출력 되는 값을 보면 동시에 출력이 됩니다. 그리고 순서도 A, B, C 순입니다. let resultA = await workA(); let resultB = await workB(); let resultC = await workC(); console.log(resultA); console.log(resultB); console.log(resultC); 물론 실행시간의 차이는 있지만, 실직적으로 프로그램에 표기 되는 값은 바로 위에 있는 코드예제에서 보여주신 A, B, C랑 같은데, 병령처리라면 시간이 짧은 B가 실행되고 그 다음에 A, 그 다음 C가 아웃풋으로 나와야 하는거 아닌가요??
안녕하세요 강사님! 항상 좋은 강의 감사합니다:) 강의를 보던 중 강사님 께서는 update 단계에서 useEffect의 두번째 인수 deps를 생략하라고 하셨는데 아래와 같이 deps에 state값들(count, input)을 주고 변화 시켜도 콘솔에 생략했을 때와 똑같이 update가 출력되는 것을 확인했는데 무슨 차이인지 궁금합니다! <deps 생략 코드> useEffect(() => { if (!isMount.current) { isMount.current = true; return; } console.log("update"); }); <deps 추가 코드> useEffect(() => { if (!isMount.current) { isMount.current = true; return; } console.log("update"); }, [count, input]);
질문은 자세하게 적어주실 수록 좋습니다. 어느 부분을 수강중이신지 =>vue 설치 수강 내가 어떻게 했는데, 어떤 결과가 나오기를 기대했는데, 다른 결과가 나왔는지=> terminal에 npm~을 입력했는데 npm : 'npm' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십시오 라고 표기됨 작성하신 코드 및 오류 스크린샷 npm i -g @vue/cli 을 함께 첨부해주시면 좋아요!
배열 생성자로 배열 선언시, undefined로 출력 되는 것이 아니라 empty로 출력이 되는데, empty와 undefined는 다른 것으로 판단됩니다. 결국 비어있는 배열에 접근할 경우 자바스크립트 엔진에서 undefined로 인식하니까 결국 같은 것으로 생각해야 할까요
특정 요소의 입력검증을 위해 useRef()를 생성하고 해당 element tag에 ref={inputRef}를 생성한 이후에 onSubmit()에서 강의대로 입력확인 처리를 하였습니다. const onSubmit = (e) => { console.log(input.name, input.birth) if(input.name === "") { console.log(inputRef.current) inputRef.current.focus() return } if(input.birth === "") { console.log(birthRef.current) birthRef.current.focus() return } } 질문의 bith에 대한 입력검증을 하고자 하면 신규로 birthRef = useRef()를 생성하고 element tag에 ref={birthRef}를 추가 / onSubmit에서 해당 로직을 적용해야 하는 건가요? 총 4개 입력항목(이름, 생년월일, 국가, 자소개)이면 useRef()를 4개 생성해서 엘리먼트별 입력확인을 하는구조로 개발이 되어야 하는건가요?
onChange 이벤트에서 입력값 확인을 console.log에서 확인시 아래와 같이 확인이 되어집니다. input(type=date포함), textarea 궁금한 사항은 select 에서 선택된 값은 어떻게 확인해야 할까요? 실제 target부분에 아래와 같이 표시가 되어집니다. select와 option의 값이 출력이 되고 input의 입력값을 볼수있는 형태가 아닌 select tag에서 정의한 값이 보입니다. 실제 선택한 값을 어디서 확인할 수 있을까요?
제가 front를 잘 몰라서 질문을 드립니다. 외부모듈에 사용방식이 CJS, ESM 2가지 말씀하셨는데 궁금한 내용은 CJS(Common Js) 방식은 현재 javascript 기반에서도 node.js기반하고 상관없이 사용이 가능한가요? ESM ( ES 모듈 시스템) - node.js 기반하에서 동작되는 외부모듈 사용방식으로 이해해도 되는지 문의드립니다.
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
AuthModule과 UserModule을 PostModule에 추가하면 Dependency 에러가 해결되는 것은 이해가 됐습니다. 다른 질문이 생겼는데요. 그러면 해당 Guard를 사용하는 모든 Module에 해당 Guard가 DI 받아서 사용하는 (여기서는 AuthService와 UserService) 모듈 (AuthModule, UserModule)을 import 해주어야 하는 건가요? 만약 AccessTokenGuard 를 모든 controller에서 사용한다면, 모든 모듈에 AuthModule, UserModule을 import 해주어야 하는 걸까요? 그리고 만약 Guard에 DI 가 새로 추가된다면, (예를 들면 NewModule의 NewService를 Guard가 필요로 한다면) 다시 원래 Guard가 사용되고 있던 모듈들 전부에 NewModule을 import 해줘야하는 걸까요? 제가 이해한게 맞다면, 의존성 측면에서 매우 좋지 않은 것 같아, 의문이 생겨 문의드립니다.
안녕하세요 강사님의 인강을 보고 또 혼자 조금씩 코드를 작성하면서 공부하고 있습니다. 공부를 하면서 질문이 있는데 함수부분에서 함수가 비슷한 작업을 할때 이 코드를 묶어서 사용하고 또 재사용도 가능하다라고 문법으로는 알고 있습니다. 하지만 아직 초보여서 그런지 혼자 코드를 작성해보면서 이런상황에서 함수를 사용해야되나? 아니면 함수 생각조차 나지 않을 때가 있는데 혼자 코드를 작성하면서 이럴땐 함수를 이렇게 사용하면 되겠구나라고 스스로 생각이 나게 하려면 어떻게 해야 좋을까요?
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
모듈마다 provider를 설정해줘야 되는 장점이 몰까요? 예를 들어 post.service 를 post.controller 에도 쓸수있지만 user.service 에도 post.service를 주입해도 쓸수있는데 그럼 user.module에 또 provider로 post.service를 추가 해야되는건가요? 그냥 IoC에서 등록만하면 되게 하지않았을까요?
안녕하세요 책과 강의를 병행하고 있습니다! 4장 리액트 앱 만들기, 5장 실습부분을 진행하고 있는데요 책에서는 create-react-app 으로 리액트 앱을 만들고, 강의는 vite로 앱을 만들고 있습니다. 또한 책에서는 main.jsx대신 index.js와 bundle.js가 생성된다고 하는데 강의를 따라가면 되는걸까요 ?? 분명 책과 강의의 차이점에 대해 어딘가에 정리되어있을 것 같은데.. 찾을 수가 없어서 질문드립니다!
크롬 확장 프로그램 vue devtools 이 안되서 강의 듣는데 좀 답답하네요 ㅠㅠ <app-content v-bind:propsnum="message"></app-content> 이렇게 적으면 hi가 나오고 <app-content v-bind:propsnum="num"></app-content> 이렇게 적으면 10이 나오고 근데 '<h1> {{propsnum}} {{propsdata}}</h1>', 이렇게 두개는 안나오고... 어렵습니당.. 직접 데이터 확인해보면 좋은데 왜 확장프로그램이 안될까요....ㅠㅠㅠ 레거시로 깔았는데도 개발자도구에서 vue탭이 안보여요,.. <app-content v-bind:propsnum="message"></app-content> </div> let appContent={ template : '<h1> {{propsnum}} {{propsdata}}</h1>', props:['propsnum','propsdata'] } new Vue({ el: '#app', components:{ 'app-header' : appHeader, 'app-content' : appContent }, data:{ message : 'hi', num:10 } })
