#redux

자기주도적인 개발이 너무 어렵습니다.

안녕하세요.🙇‍♂️ 올해 3월에 부트캠프를 수료하고 취업준비를 하고있는 프론트엔드 지망생입니다. 부트캠프를 통해 js, react, vue, tailwind, zustand등의 스택을 주로 사용하며 프로젝트를 만들었습니다. 부트캠프를 진행하면서 react에서 useEffect훅은 컴포넌트의 생명주기 사이 ~때에 사용한다, 페이지 라우팅 기능을 사용하려면 리액트 라우터 같은 라이브러리를 활용해서 써야한다, 테일윈드가 현재 개발시장에서 가장 많이 쓰이는 CSS 라이브러리다 이런 정도로 기술스택들이 학습되었습니다. 이제 부트캠프도 수료하고 혼자 공부하는 시간이 찾아왔는데 어떤것 부터 어느정도 까지 손을 대야할지 감이 잡히질 않습니다. 1. 어떤것 부터 해야하는지 예를 들어 현재 저에게 가장 부족하다고 생각하는 스택은 next 프레임워크, zustand 외의 전역 상태관리(recoil, redux), 필수 개발 외의 인프라적인 스택?(Storybook, monorepo, sentry, jest )이라고 생각하는데 이 지식들의 우선순위를 정하는 방법과 이 외에도 개발자 시장에서 반드시 장착하고 있어야 하는 필수 스택에 무엇이 있는지를 알고싶습니다. 2. 어느정도 까지 손을 대야할지 예를 들어 React 같은 경우엔 하나의 프로젝트를 만드는 역량까진 가능해졌지만 프로젝트 안에서 퀄리티 있는 디자인 패턴이라던지, 사용해보지 못한 수많은 리액트 메서드들을 딥다이브 해봐야 할 거 같은데, 어느정도 까지 공부해야 너무 깊게 들어가지 않고, 현재 개발시장에서 경쟁력 있는 지식을 쌓았다고 할 수 있는지의 경계를 모르겠습니다. 강사님의 강의에서 벗어나 혼자서 주도적인 학습을 진행하려고 하니 시간낭비를 하게 될 거 같고, 겉햝기 식으로 공부하는 나날을 보내게 될까 심적으로 큰 부담이 됩니다.. 현업 개발자님들의 조언을 듣고싶습니다!!🙇‍♂️🙇‍♂️🙇‍♂️

React 상태관리질문

학원에서 프로젝트를 진행중인데 기능이많아 상태관리가 많아요. React useContext와 Redux중 어떤상태관리를 사용하는게 유리할까요?? 그리고 현업에서는 어떤방법을 택하는지 궁금합니다

NavigationContainer 중첩 오류

안녕하세요, RN(Expo)로 React Navigation을 적용하다 오류가 해결되지 않아서 질문드립니다. expo를 통해 다음과 같이 index.js에 React Navigation을 적용했습니다. import { store } from "@/redux/store"; import MainScreen from "./screens/MainScreen"; import { Provider } from "react-redux"; import { NavigationContainer } from "@react-navigation/native"; import { createNativeStackNavigator } from "@react-navigation/native-stack"; import LoginScreen from "./screens/LoginScreen"; export default function HomeScreen() { const Stack = createNativeStackNavigator(); return ( <Provider store={store}> <NavigationContainer> <Stack.Navigator> <Stack.Screen name="Main" component={MainScreen} /> <Stack.Screen name="Login" component={LoginScreen} />{" "} </Stack.Navigator> </NavigationContainer> </Provider> ); } 그러나 다음과 같은 오류가 뜨며 빈화면만 보이더라구요ㅠ Error: Looks like you have nested a 'NavigationContainer' inside another. Normally you need only one container at the root of the app, so this was probably an error. If this was intentional, pass 'independent={true}' explicitly. Note that this will make the child navigators disconnected from the parent and you won't be able to navigate between them. 찾아보니 NavigationContainer가 중첩되었다는 것 같은데, 저는 계속해서 그대로 강의를 따라가고 있었고, 따로 NavigationContainer를 적용한 파일이 존재하지 않습니다 ㅠ 다음 속성을 추가해도 오류가 해결되지 않습니다 ㅠ 아마 어디선가 부모에서 NavigationContainer가 적용된 것 같은데 찾을 수가 없네요 ㅠㅠ independent={true} 조금 더 찾아보니 expo-router랑 충돌이 난 거일 수도 있다는데 정확하게 모르겠네요 ㅠ

React Next infinite scroll

A 라는 infinite scroll페이지에서 500개 데이터를 보여주고 scroll은 70프로 내려왔다고 가정했을 때 다른 페이지 갔다가 돌아왔을 때 500개 데이터랑 scroll 위치 그대로 유지하는 좋은 방법 뭐 있을까요? localstorage나 context 이용했을때는 dom을 다시 랜더링하고 state 값을 다시 주입 했을 때 부드럽지 않은 느낌입니다. redux를 이용해서 전역으로 상태값을 저장해 놓고 컴포넌트에서 사용하면 될까요?

프론트엔드 지망생. 한심하지만 길어진 공백. 잃어버린 공부 방향성. 조언이나 의견 부탁해도 될까요 ?

안녕하세요. 커리어리에서 자주 질문하면서 현직 개발자분들의 다양한 의견을 듣고 많은 도움을 받고있는 취준생입니다. 그 중엔 가끔 쓴소리하시는 분들도 계시지만 그런 부분들이 진심으로 제 고민거리에 대해 생각해주시는 거 같아 오히려 믿을만한 이야기구나 하고 받아들이는 경우도 많네요. 본론부터 말하자면 공부방향을 제대로 잡지 못하는 듯 하여 현업 분들이나 저와 같은 취준생 위치에 있는 분들의 다양한 의견을 듣고 싶습니다. 저는 국비를 수료 후 근 1년 가까이 개발에 손을 놓아 공백이 있습니다. 수료 후 5개월 정도는 만들어 진 협업 포폴로 이력서를 내면서 알고리즘 공부하고 간간히 그렇게 보냈구요. 그후 6~7개월 정도는 금전적인 문제로 공장,업체 단기알바 등을 하며 아예 공부에 손을 놓게 되었습니다.. (구차한 변명이지만 별 수없죠. 후에 면접 기회가 생겨도 이 공백에 대한 답변은 이렇게 할 수밖에 없을듯해요.) 아무튼 현재 다시 마음을 다잡고 배워왔던 것들을 복습하며 공부에 다시 전념하고 있습니다. 1~2달 전부터 쇼핑몰 프로젝트 하나를 만들고 있고요 (서버리스 서비스를 이용해서 db 연동하고 혼자 만들고 있습니다). 추가로 JS DeepDive 정독하면서 좀 중요하다 싶은 개념은 노션에 따로 정리해두고 다시 읽어보면서 눈에 익히고 있습니다. 그리고 기술면접 대비 질문들도 인터넷에서 찾아보면서 마찬가지로 노션에 정리하고 있고요. 네트워크 부분을 정확히 짚고가고 싶어서 인프런에 속성정리된 네트워크 강의 정독했습니다. 추가로 제가 next.js 로 공부했는데 react 기반 프레임워크지만 react와는 또 사소한 여러 차이점이 있는 거 같아 (ex. 페이지 라우팅 방식, csr 과 ssr 등) 유데미에 근본강의로 불리는 강의 (redux 도 같이 배우는) 구매해서 듣고 있습니다. 얼마전에는 타입스크립트 강의를 완강했는데 그 때쯔음부터 뭔가 내가 제대로 하고 있는게 맞나? 의문이 들고 있습니다. 스스로 불가피한 공백은 만들어 버렸지, 제대로 배포되는 프로젝트도 없지, 그렇다고 나이가 적은 것도 아니지 (아직 30은 아니지만 곧이라...)..이런 불안감들이 계속 머리속에 멤도니 잡생각이 많이 나고, 그러다보니 뭔가 열심히 공부는 하는데 확신이 안 섭니다. 객관적으로 보면 스스로에 대한 결핍이 좀 심해진것도 같구요. 며칠 전에 프로젝트 하다 z-Index 문제로 몇 시간을 chatgpt, 구글링을 하며 씨름하다 보니 아..css도 아직 모자란가? 라는 생각이 들어서 풀강의로 잘 정리된 css 강의도 하나 들을까? 이런 생각도 하고...css 생각하다보니 sass도 배워야 할 거 같고..그렇게 찾아보면 요즘 편리하게 tailwind 도 많이 쓴다는데 이것도 배워야겠지? ..막 그냥 바람결 제대로 만난 갈대마냥 막 흔들거려요. 글을 훑어보니 너무 제 감정에 치우쳐서 막 휘갈긴거 같네요. 긴 글 정독하기 싫은분들도 많으실 듯 하여 간략히 정리해 보겠습니다. 1. 현재 국비 수료 후 공백이 1년 넘게 있으나, 그 공백기는 개인사정? (금전문제) 등의 이유로 딱히 개발부분에 있어 뭔가 월등히 노력한 부분을 어필할 게 없음 2. 제대로 배포되고 있는 프로젝트도 없는 상황에 현재는 쇼핑몰 개인 프로젝트 하나 하고 있음 (서버리스로 DB 연동, 개인 프로젝트) 3. 그 밖에 유데미의 react 핵심강의 듣고 있고, js deepDive 정독, 기술면접 대비 질문들을 노션에 정리하며 관련 개념들을 상기하며 공부 중 (알고리즘은 따로 공부 안하고 있습니다. 혹 이 부분 중요하다 생각되시면 의견부탁드립니다.) 4. 현재 목표는 올해 안에 최소 2개의 프로젝트를 배포과정까지 끝내고(1개는 가능하면 협업으로) 연말 쯤 부터 이력서 미친듯이 넣고자 함. (현재 최종목표는 중소기업입니다. 워라벨, 연봉 크게 안따지고 최소한 배우고 성장할 배경이 되는 기업을 목표로 두고 있습니다. 중소에 그런 기업이 별로 없겠지만요..) 뭘 더해야 할까요? 그리고 이 상황에 백엔드 공부하는 건 좀 어리석은 짓인가요? (백엔드 기반 지식도 어느정도 필요하다고 하는데 전 그 정도를 모르겠어요) 여러분의 솔직한 의견 부탁드립니다. (걍 개발자 때려쳐라. 넌 답없다. 같은 솔직발언도 괜찮습니다. 제가 우둔하고 고집머리는 쎄서 그런 말 들어도 쉽게 포기 못하는 성격이지만...모르죠. 여러 사람들이 같은 식의 답변을 한다면 또 되새겨서 다시 생각해 볼 수도 있고요. 지금이 갈림길인 거 같습니다. 마음을 제대로 다잡고 영끌하던지, 아니면 그러고싶지는 않지만 포기해야하는지)

이력서에 첨삭할 진행했던 프로젝트들 내용을 보다 더 잘 적고 싶어요.

이력서에 첨삭할 지금까지 진행했던 프로젝트들 내용을 적고 있는데 한눈에 보기 쉽게 큰 범주로 적기에는 너무 포괄적으로 적는것 같고 개발한 기능들을 세부적으로 적거나 해당 프로젝트 진행 후 낸 성과들을 다 나열하면 내용이 너무 길어지는것 같아서 어느정도로 구체화해서 적어야될지 헷갈려서 조언을 구해 봅니다. 아래는 지금 작성된 내용입니다. 현재는 프로젝트별로 포괄적으로 적거나 좀 더 디테일하게 적거나 기준점을 못찾은 상황입니다. [ 2022. 12 ~ 2022. 01 • 프로젝트 명 : 집 클릭 • 주요 설명 : 전세임대 지원 사이트로 권리분석을 의뢰할 수 있는 사이트 • 담당 업무 : 자사 서비스 웹 크롤링 기능 개발 -puppeteer 사용 등기부등본 발급 자동화 웹 크롤링 작업 • 기술 스택 : Node.js 2023. 06 ~ 2023. 07 • 프로젝트 명 : 브릭 인프라 • 주요 설명 : 자사 서비스 종합 관리 사이트 • 담당 업무 : 자사 어드민 프론트엔드 개발 • 기술 스택 : React 2023. 08 ~ 2024. 06 • 프로젝트 명 : 키오 솔루션 • 주요 설명 : QR 주문 결제로 보다 편리한 결제 시스템을 이용할 수 있는  솔루션 • 담당 업무 : 자사 솔루션 "키오" 활용 서비스 개발 및 운영 유지 보수 - 메뉴형 결제 서비스 "키오브릭" 프론트엔드 유지 보수 - 금액입력형 결제 서비스 "스마트 노점" 프론트엔드 개발 및 - 해당 서비스 관련 어드민 풀스택 유지 보수 - 자사 어드민 풀스택 유지 보수 • 기술 스택 : React, GraphQL, Node.js, MySQL 2023. 09 ~ 2024. 06 • 프로젝트 명 : 오늘 우리 가게 • 주요 설명 : 자영업자 대상 매출, 리뷰, 주문 현황, 광고 현황 분석 앱 • 담당 업무 : 자사 서비스 오늘 우리 가게 기능 개발 및 운영 유지 보수 - React Native 앱 메인 화면 개발 - 전체 React Native 앱 기반 프로젝트 WebView 기반 프로젝트로 전환 작업 진행 - 리뉴얼 된 WebView 구성 화면 프론트엔드 개발 - 우리 가게 리뷰 듣기 TTS 하이브리드 기능 개발 - 네이버 클라우드 이용 카카오 알림톡 서비스 벡앤드 유지 보수 - 앱 테스트 및 배포, CodePush 작업 진행 • 기술 스택 : React Native, MobX, React, Redux, TypeScript, Next.js, Node.js, MySQL 2023. 11 ~ 2024. 02 • 프로젝트 명 : 빌딩 CAS • 주요 설명 : 건물 내 입주사들을 위한 공지, 관리비 결제 및 장터 커뮤니티 기능을 제공하는 앱 • 담당 업무 : 외주 서비스 빌딩 CAS 프론트엔드 및 앱 개발 - WebView 기반 프로젝트 초기 환경 구축 및 아키텍처 설계 - React Native 앱 메인 화면 개발 - WebView 주요 기능 프론트엔드 개발(소셜로그인, 회원 정보 관리, 관리비 결제, 문의하기, 중고장터 게시판) - 앱 테스트 및 배포, CodePush 작업 진행 • 기술 스택 : React Native, React, MobX, Node.js, PostgreSQL *** 포트폴리오 링크를 통해 더 자세한 내용을 확인 하실 수 있습니다. ]

프론트엔드 개발자 부트캠프 고민 중 입니다..

안녕하세요 프론트엔드 개발자를 준비하고 있는 1인 입니다. 요번에 운좋게 부트캠프 2개를 붙어서 결정을 해야 하는데 어떤게 더 좋은지 모르겠어서... 질문 남깁니다.. 1. 유데미 웅진씽크빅 풀스택 부트캠프 https://udemy.wjtb.co.kr/event/id/244?utm_medium=paid&utm_source=googleads&utm_campaign=nnt_traffic_bootcamp-KDT_SA&utm_content=id_244&utm_term=240409&gad_source=1&gclid=Cj0KCQjwxeyxBhC7ARIsAC7dS3-3gWAFIN_KxCxPxMz3BPiXaYOnJAtTtj8mtwbt_lJ_lhrhksM5DKwaArdtEALw_wcB 2. 이스트소프트 오르미 프론트엔드 부트캠프 https://estfamily.career.greetinghr.com/o/108906 이렇게 2개를 붙었는데 뭐가 더 좋을까요..? 유데미 웅진씽크빅 풀스택 기술스택 - Html, CSS, Javascript, React.js, Java, Spring, MySQL, AWS 이스트소프트 부트캠프 기술스택 - Html, CSS, Javascript, React.js, Redux, TypeScript, GitHub, Figma 입니다. 둘 다 온라인강의가 기본베이스고 유데미는 오프라인 모임도 진행을 한다고 합니다. 유데미는 신청할 때 프론트엔드 백엔드 풀스택을 고르라고 해서 프론트엔드를 골랐는데 교육과정만 보면 이스트소프트가 맞는거 같은데 어떤걸 선택해야할지 잘 모르곘습니다 ㅠㅠ 도와주세요..

상태 관리 라이브러리 무엇을 선택해야할지 궁금합니다.

프론트엔드 부트캠프 수강 중인 학생입니다. 현재 팀 프로젝트를 들어가기전에 상태관리 라이브러리를 활용해서 간단한 redux(CRUD), zustand(CRUD)까지 구현 해봤습니다. 질문1) 팀플젝을 장점인 많은 zustand로 하려고 했으나 취업 합격자들, 취업어플 정보들을 봤을때 redux와 recoil이 많더라구요. 그래서 저도 redux, recoil을 한정해서 플젝을 해야할까요? 질문2) zustand로 플젝해도 회사 자격요건에 회사에서 redux를 쓴다던가 redux경험 우대사항이 적혀 있다던가 하면 불이익이 있을까요?

타입스크립트 'value' is possibly 'null' 에러 옵셔널체이닝으로 해결안되는 이슈

import DateRangePicker from "@wojtekmaj/react-daterange-picker"; import { useDispatch } from "react-redux"; import { dateFetch } from "components/feature/FetchSlice"; import styled from "styled-components"; type ValuePiece = Date | null; type Value = ValuePiece | [ValuePiece, ValuePiece]; export default function CustomCalendar() { const dispatch = useDispatch(); const [value, onChange] = useState<Value>([new Date(), new Date()]); return ( <CalendarBox> <Calendar>조회 기간</Calendar> <StlyedDateRangePicker onChange={onChange} value={value} onCalendarClose={() => { dispatch( dateFetch({ startDate: value[0]?.toISOString(), endDate: value[1]?.toISOString(), }) ); console.log(value); }} /> </CalendarBox> ); } <StlyedDateRangePicker>는 styled component로 만든 DateRangePicker 라이브러리 컴포넌트입니다. DateRangePicker 에서 날짜 2개를 선택하면 value라는 배열에 Date 객체 2개가 들어갑니다. 그리고 onCalendarClose 함수가 동작하면서 redux로 만들어놓은 startDate, endDate 객체에 각각 date를 toISOString() 처리한 값이 할당되는 로직입니다. 날짜를 선택하기 전에는 value={value}의 value 배열요소인 Date객체 값이 null 값이니까 type ValuePiece = Date | null; 타입지정을 해줬습니다. startDate: value[0]?.toISOString(), endDate: value[1]?.toISOString(), 근데 위 코드의 value[0], value[1] 에러가 나더라구요. 'value' is possibly 'null'.ts(18047) Element implicitly has an 'any' type because expression of type '0' can't be used to index type 'Date | [ValuePiece, ValuePiece]'. Property '0' does not exist on type 'Date | [ValuePiece, ValuePiece]'. null 값일 수도 있다길래 옵셔널체이닝을 줬는데 여전히 에러가 발생합니다.. 해결방법을 도무지 모르겠네요.. 도와주시면 진심으로 감사하겠습니다ㅠㅠㅠ

제가 하고있는일이 ”프론트엔드“일까요?

제가 하고있는일이 프론트엔드인가 헷갈립니다. 프론트엔드는 아닌것 같습니다. 저는 프론트엔드 개발자를 지망했으며, react-query, axios등등 서버와의 통신을 하여 웹페이지를 만드는 공부를 하였습니다. 저는지금 코딩교육업체에서 일하고있고. 제가 참여하는 프로젝트는 스크래치(블록코딩)의 소스코드를 이용해 새로운 블록을 만들어 회사의 로봇을 움직이게 하거나 스크래치 gui를 확장, 개선하는 업무를 하고있습니다. 스크래치는 크게 scratch-gui(스크래치의 gui, 구버전의 react사용), scratch-vm(virtual machine, 스트래치에서 사용되는 블록을 정의하고 새로운 블록을 선언하거나, 블록들을 실행가능하게끔 ASTtree로 만들어 실행시키는 프로그램 nodejs임) 두개의 오픈소스 프로젝트로 구성이 되어있고, 제가 참여하는 프로젝트는 이 두개의 프로젝트를 회사에 맞게 확장, 수정시킨 프로젝트에서 작업하고 있습니다. 아직 한달이 채 되지도 않은시점에서 의문이 들었습니다. scratch-gui 가 react, redux를 사용하지만 HTTP통신을 하지도 않는데 이런 업무를 프론트엔드 개발자라고 할수있는가? 입니다. 다른회사들의 요구기술스택을 보면 제가 다니는 회사와의 기술스택과는 많이 동떨어진 느낌입니다. 물론 찾다보면 비슷한 기술스택을 가진 회사도 있겠지요... 하지만 인생의 첫 커리어인데, 꼬여버리지 않을까 걱정입니다.

createStore 리액트

안녕하세요 리액트 초보입니다. (이걸 기술 토픽 카테고리에 적합한지는 모르겠네요.. ) 리액트를 다루는 기술 책으로 리액트를 공부하던 와중에 리덕스로 상태 관리하는 부분에서 막혔습니다. 책에서는 redux의 createStore를 사용하는데 현재에는 모든 것이 rtk 라이브러리를 사용하더라고요.. (createSlice 등..) 프레센테이셔널 컴포넌트 같은 것도 없어졌고 (어쩐지 불편하더라..!) 미들웨어라는 것을 많이 사용하지 않고 react-query 같은 것을 사용하더라고요!! 그래서 제 질문은 그냥 책대로 공부해보는게 맞을까요?? 이제는 잘 사용하지 않는다는 것을 알고난 이후로 하기 싫어졌지만... 현직자분들이 필요하다고 하시면 찡찡거리기 그만하고 공부하겠습니다.. 그리고 별개로 책 내용이 최신 버젼(?)으로 정리가 된 사이트/ 또는 정리해본 블로그 있으면 추천 부탁드립니다! 감사합니다

RTK action, state 직렬화 질문

안녕하세요! 저는 React + redux-tool-kit을 이용하여 개인 프로젝트를 진행하고 있습니다 redux의 state와 action에서는 직렬화가 되지 않는 객체등을 넣으면 안된다고 알고 있습니다. 외부로 요청한 api에서 받은 객체를 전역으로 사용하기 위해서 store의 state에 넣어주어야 한다고 생각하였는데 직렬화 관련 오류가 확인이 됩니다. 이렇게 직렬화 되지 않는 객체를 action.payload에 전달할 경우에는 해당 action만 getDefaultMiddleware에서 직렬화 검사를 하지 않는 옵션을 주어야 하는 걸까요?

학교를 졸업했지만 어디 분야로 가야할지 모르겠습니다

저는 원래 기계공학과였다가, 저랑은 영 맞지 않는것 같아서 1년 반 다니다가 컴퓨터공학과로 전과했습니다. 그런데 기계공학과와 컴퓨터공학과 모두 공학이긴 하지만 듣는 강의는 차이가 꽤 있어서 기계공학과에서 들었던 학점 대부분은 인정받지 못하고 증발해버렸습니다. 그래서 2학년이긴 하지만 전공학점은 신입생들과 별반 다를바가 없었어요 잘못하면 제때 졸업못하고 최소 1년이상 초과학기를 하게될테고 형편상 그건 어렵기 때문에, 전과해서 아는것도 하나도 없음에도 2학년과 1학년 수업을 같이 들으면서, 어떻게든 학기마다 풀학점으로 꽉꽉 채워서 결국 초과학기는 한 학기만 한 채로 졸업할 수 있었습니다. 그래도 나쁘진 않았습니다. 적어도 기계공학과에 있을 때보단 이쪽이 훨씬 제 적성에 맞았거든요. 그래서 그런지 학점도 4.0/4.5점 으로 괜찮게 졸업할 수 있었습니다. 그런데 너무 수업만 따라가기 바빠서 그런건지 졸업한 뒤 제가 어느 분야로 갈지는 깊게 생각해보질 않았어요. 미리 생각해 놨다면 학교 수업 외에도 그쪽으로 따로 공부를 하면서 준비할 수 있었을텐데, 그러질 않았으니 그저 학교에서 하는 강의만 열심히 들으면서 다녔습니다. 그리고 졸업하니까 어디로 가야할지 모르겠더라고요. 일단 제가 학교에서 배우고 해봤던걸 대충 적어보자면 javascript, java, python, c, html, css, mysql, oracle, unity, android studio, jsp, unix 이정도와 운영체제, 자료구조 같은 cs 입니다. 일단 저는 원티드, 로켓펀치, 프로그래머스 같은 사이트들을 돌면서 공고를 살펴 봤습니다. 프론트엔드쪽 기술스택을 살펴보니 html, css, javascript는 배웠지만 react, redux, node.js, next.js, typescript 이런 것들이 나오는데, 전부 한번도 안해봤던 것들이더라고요. 그래서 백엔드쪽 기술스택을 살펴보니 spring, jpa, django, docker, fastapi, flask 등등 이런것들이 나오는데 역시 안해봤던 것들이었습니다. 그래서 다음은 안드로이드쪽을 살펴봤습니다. 팀프로젝트를 하면서 앱을 만든 경험이 있었거든요 kotlin, flutter, react...역시 안해본 것들입니다 저흰 java만 배워서 코틀린을 안해봤습니다. 그리고 flutter, react 같은 크로스플랫폼 또한 다뤄본 적 없고요 이런식으로 막상 실무에서 요구하는 기술들과 제가 학교에서 배웠던걸 매치해보니 제가 부족한게 너무 많더라고요. 사실 처음 채용공고 봤을땐 제가 모르는 용어들도 많아서 멘붕이 왔었습니다. 물론 이제 막 학교 졸업하고 실무경험도 없는 신입이니 부족한게 많은건 당연한것이고, 신입이 그 기술스택을 다 숙지할 수도 없다는것도 알고 있습니다만, 그럼에도 제가 너무 부족한게 많다는 생각을 지울수가 없더군요 서론이 길었네요 그래서 결론은 현재 저의 상태에서 가장 빠르게 준비해서 취업할 수 있을만한 분야가 어디일까요? 저는 개발쪽이기만 하면 상관없는데, 저희집 사정상 가능한한 빠르게 준비해서 빠르게 취업하고 싶습니다.

3년차 프론트엔드 이직 질문

안녕하세요 곧 만 3년 경력이 채워지는 웹 개발자입니다 현재는 에이전시에서 웹개발 업무를 맡고 있습니다 웹개발시에는 클라이언트에게 수주받아 프로모션 웹사이트를 만드는 일을 주로 하고 있습니다 다만 저는 프론트엔드 개발자로의 이직을 원하는데 현재 프로젝트를 개발할때 개발환경이 JS, PHP, MySQL을 사용하고 있습니다 기본적으로 위의 개발 언어들로 프로모션 사이트를 마크업(HTML/CSS), 프론트단부터 만들어서 백단까지 작업해서 하나의 프로젝트를 만드는게 가능합니다 또한 CSS Animation, GSAP과 Lottie 등을 이용해 웹 사이트에 애니메이션을 구현하는 부분도 하고 있습니다 보통 프론트엔드 개발자 구인글의 요구사항에는 '프론트엔드 개발 경력 3년 이상이신분 또는 그에 준하는 역량을 보유하신 분'이라고 되어있는데요 이때 제가 프론트엔드 3년차 경력으로 지원할 수 있는지 아니면 중고신입으로 지원을 해야하는지 조언을 듣고자 글을 작성하게되었습니다 * React는 회사 홈페이지를 리뉴얼할때 사용하고 프로젝트에서는 사용해보지 못하였습니다. (React, Redux-toolkit, express를 사용하였고, 애니메이션 구현에 GSAP, 프레이머모션, Lottie를 사용했습니다. 현재는 Next.js로 마이그레이션되었습니다)

타입스크립트 recoil 타입선언에 대한 질문입니다.

안녕하세요. redux를 recoil로 변경하면서 typescript도 같이 사용해보고 있는데 감이 잘 잡히지 않네요 타입스크립트에서 다른타입의 값을 가져와서 비교후 처리해야한다면 어떻게 해야할지 모르겠어서 질문을 드리게 되었습니다. 애초에 이러한 경우는 성립을 하지가 않는걸까요? 컴포넌트에서 deleteTagHandler에서 Tag타입으로 값을 받아와서 setRemoveToNoteTags()로 Tag타입의 매개변수 tag를 전달해주는데요 selector에서는 NotesList의 타입을 지원하고 있어서 그런거 같습니다... 가르침 부탁드리겠습니다 ㅠㅠㅠ 컴포넌트``` const setRemoveToNoteTags = useSetRecoilState(removeTagsSelector); const deleteTagHandler = (tag: Tag): void => { setTagsState({ type: "delete", tagsList: [tag] }); setRemoveToNoteTags(tag); }; ``` selector``` interface NotesList { mainNotes: Note[]; archiveNotes: Note[]; trashNotes: Note[]; editNote: null | Note; } const initialState: NotesList = { mainNotes: [...notes], archiveNotes: [], trashNotes: [], editNote: null, }; export const notesListState = atom({ key: "notesListState", // 고유한 키 default: initialState, // 초기 상태 }); export const removeTagsSelector = selector({ key: "removeTagsSelector", get: ({ get }) => {}, set: ({ get, set }, newValue: Tag) => { const notesList = get(notesListState); const removeTagFromNotes = (notes: Note[]) => { return notes.map((note) => { return { ...note, tags: note.tags.filter(({ tag }) => tag !== newValue.tag), }; }); ...... ```

프론트엔드 공부법에 대해 질문드립니다

솔직히 초반 기초부터 탄탄히 쌓아야하는 것이 중요하다고 생각하며 그렇게 준비하고 있습니다. 현재 저는 프론트엔드 공부를 8개월 정도 하고 있으며, js react 정도를 할줄 안다고 할 수 있습니다 제가 처음 공부할 때 공식문서와 cs지식을 기반으로 js를 공부하게 배워서 그렇게 공부하다보니 기초가 탄탄해지고 react를 시작할 때도 어떠한 기반으로 공부해야할지가 보여서 react도 비슷하게 공부하고있습니다. 그런데 최근에 react를 공부하면서 프로젝트를 하다보니 react query나 redux같은 상태관리 라이브러리의 필요성을 느끼고 공부하는데 이 두 라이브러리 또한 공식문서 보면서 낑낑대면서 하나씩 공부하다보니 속도가 너무 느리고 답답한 느낌이 들었습니다 사실 욕심은 맞지만 저는 현재 보충역 병특을 노리고 있으며 3개월 정도 안에 취업을 희망하고 있습니다 그런데 회사 조건들을 보면 대부분 ts와 next를 할줄 아는 사람들을 최소 조건으로 뽑더라구요. 그래서 기초가 탄탄하진 않지만 바로 ts, next를 같이 공부하면서 조건을 맞추는게 맞을지 아니면 그래도 천천히 공부하면서 ts 와 next를 공부해야할지 모르겠습니다.. 후자가 정석적이고 맞는거는 머리로는 알지만 빠르게 취업을 해야한다는 생각때문에 자꾸 야매로라도 후딱 배우고 이력서에 써버리고싶다는 생각이 드네요.. 물론 이력서에 기술을 쓴다는 것은 그 기술에 대해 어떤 질문이 들어와도 답을 할수 있어야한다고 생각하기에 두렵긴 합니다..

Usecontext와 redux 차이 궁금합니다!

예전에는 usecontext 만으로는 상태관리 하기엔 부족하다고 해서 redux를 꼭 공부하라고 배웠는데, 요즘에 들어보면 많이 업데이트 되면서 context 하나만으로도 전역 상태관리가 충분하다 해서요 그런데도 굳이 redux를 사용하는 이유가 따로 있을까요?

부트캠프 최종발표 내용에 관해서

선생님들 안녕하세요. 부트캠프에서 셀프세차장 예약 앱을 주제로 약 두달여간의 개발을 진행했고, 3일 뒤에 최종발표만을 남겨두고 있습니다. 부트캠프 운영진 측에서 최종발표 내용으로 개발 주안점을 둔 부분을 주로 다뤘으면 좋겠다고 하셨습니다. 발표 내용을 미리 구성해봤는데, 선생님들께서 보시고 조언 좀 주시면 감사하겠습니다. 저희 팀 개발 스택은 다음과 같습니다. FE: React, Redux-thunk, React-query BE: Spring Boot, MySQL, Amazon S3 아래와 같이 발표 내용을 구성해 봤습니다. 1. 프론트엔드 a. 아토믹 패턴의 활용 - 기획단계에서부터 모든 컴포넌트들을 미리 설계해놓고 atom, molecule등의 레벨로 미리 나눠놨다. 덕분에 개발을 빠르게 진행할 수 있었고, 유저들에게 일관된 인터페이스를 제공한다. b. 예외처리 - 유저들에게 보다 친절한 에러를 제공하기 위해 백엔드와 협의하여 세부 에러코드들을 정의했다. 각 컴포넌트들을 에러 바운더리로 감싸 GET 요청이 실패한 경우에는 Fallback UI로 화면을 덮어줬다. 그리고 각 API들의 onError 콜백을 부여하여 Mutation 요청이 실패한 경우에는 alert로 알려준다. c. 상태관리 - props drilling 현상을 방지하기 위해 redux-thunk를 사용해 세차장 정보를 불러올 때마다 세차장 정보를 전역 상태로 관리하여 자식 컴포넌트로 넘겨주게 구성했다. 2. 백엔드 a. 예약 신뢰성 - 사용자가 요청한 예약이 운영 시간을 준수하고 중복 예약이 방지되도록 예약 검증을 철저히 하였다. b. 예외 처리 - 명확한 예외 처리 및 상태코드 할당 c. 권한 - 역할 기반 권한 관리, 사용자 인증 및 JWT 토큰 처리 여기까지입니다. 내용을 잘 구성했는지 모르겠습니다. 제가 경험해본 프로젝트 중 가장 규모가 큰지라 발표 내용이 부족하진 않은지 걱정이 많이 됩니다. 발표 평가위원이 주로 개발자라고 하셔서, 개발자의 시선으로 봤을 때 위 주제들이 어떠한지 고견을 듣고 싶습니다. 감사합니다.

프론트엔드 이직은 어떻게 준비하나요?

안녕하세요! 6개월차 프론트엔드 신입입니다. 사실 이직을 바로 생각하는건 아니고 지금있는 회사에서 1년은 넘기고 이직이나 중고신입으로 대기업에 가고싶습니다 하지만 여러가지 준비는 해야하는걸로 생각이 들고, 어떻게 하면 좋을지 여기서 앞서나간 선배님들의 조언을 듣고자합니다. 현제 제 상태는 이렇습니다. 컴퓨터공학 22년 차석졸업 계약직 인공지능강사 6개월 현직 프론트엔드 개발자 해커톤 수상 4회 (1등 2회, 2등 1회, 3등 1회) 교육부 장관상 1회 소프트웨어 특허 1개 소프트웨어 저작권 9개 경험) 소프트웨어 동아리 회장, 교내 연구생 알고리즘) 프로그래머스 레벨3 외국어) 영어 프리토킹 스택) sveltekit(현직),nextjs,tanstack-query,redux-rtk,playwright,tailwind,css,styled-compnent,sotrybook,mocking service worker 취업을 할때는 대회에서 상을 받았던 이력으로 회사에서 좋개 봐줘서 빠르게 입사했지만, 대기업에 중고신입이나 이직은 많이 다를거 같아 고민입니다. 따로 토이프로젝트나, 오픈소스 기여를 하면 좋다는걸 알지만 개인적으로 회사에서 프로젝트가 재미있어 기존 회사 코드 성능 향상에 몰두하고있습니다. 회사코드를 보고 다듬고 동료들과 커뮤니케이션하는게 좋아, 자진해서 거의 15시간정도 회사 일만하고 있지만 정작 나중에 되서 다른회사 지원하면 안좋게 보이까 걱정도 조금됩니다 그래서 이곳에서 도움을 구하고자합니다 긴글 읽어주셔서 감사합니다

redux를 사용하는 react 커스텀 훅 테스트 어떻게 개선하면 좋을까요?

안녕하세요! 커스텀 훅을 테스트하다가 궁금한 점이 생겨 질문드립니다. 예시 코드와 같이 redux-toolkit을 사용하고 있으며 커스텀 훅 내부에서 redux store에 접근하고 있습니다. 이렇게 사용하는 것이 잘못된 걸까요? 커스텀 훅을 테스트하다가 useAppSelector를 사용하고 있는데 Provider를 제공하지 않았기 때문에 에러가 발생하는 것을 보고 해결 방법은 문서에 있지만 이 방법이 좋은 방식일까 궁금해졌습니다. 제 생각으로는 장바구니와 관련된 함수들을 useBasket에 모아서 관리할 생각이었습니다. 따라서 장바구니 정보를 갖고 있는 basket store를 useBasket 안에서 가져오는 것이 맞다고 생각했습니다. 혹시 이렇게 하는 것보다 더 좋은 방법이 있을까요? 개선하기 위해 더 배워야 할 것들에 대해 조언이 필요합니다!

어떤거부터 순서대로 공부해야할까요

이번에 react를 배우면서, Redux next.js, react query, Ts 등을 배워보려는데 어떤 순서로 배우는게 좋을까요..

(react redux) api 데이터 사용 질문

안녕하세요! api를 활용해서 데이터 받아와서 게시판형태로 list로 뿌리고 게시글 누르면 본문보이는 간단한 형태의 게시판을 만들어보는중 입니다. api를 이용해서 가져오는 함수를 재사용하고싶은데 잘안되네요.. list페이지에서 데이터 전부받아오기위해서 axios로 값을 받아와서 뿌리고, 게시글 누르면 넘어오는 id값으로 디테일페이지를 보려고하면. 또 다시 디테일페이지에서 axios로 api에 접근해서 값을 가져와야하나요? 서칭을해봤는데 다들 그냥 페이지마다 비동기로 값을 받아오는거같은거같은데 재사용보다 매번받아오는게 옳은건가요? redux를 학습하고싶어서 해보는데 잘안되네요..

(SSR 새로고침 문제)NextJS page에서 redux persist gate 설정하면 Client컴포넌트로 인식되는 문제

NextJS Pages Router에서 유저 데이터를 상태관리하기위해 redux를 사용했으나, 새로고침 시 데이터가 날라가는 문제를 해결하기 위해 persist gate를 사용했습니다. 하지만 redux persist gate를 사용하면 클라이언트 컴포넌트로 인지되는 문제가 있습니다. 궁금한 것 1) persist gate를 잘못써서 생긴 문제일까요? 아님 persist gate를 쓰면 안될까요? 2) 해결 방법으로 생각 해본 것은, "persist gate를 사용하지 않고 매 새로고침 시 저장되어있는 local storage에서 데이터를 새로 가져온다." 입니다. 3) ssr시 상태관리 새로고침 다른 방법으로 해결해본 경험 있으시면 아무렇게나 대답해주시면 감사하겠습니다!!! ----------------------------------------------- 문제의 코드 위치: https://github.com/bbookng/zippyziggy-v2/blob/main/frontend/zippy-ziggy/src/pages/_app.tsx 문제의 코드: import GlobalStyle from '@/styles/Global.style'; import useDarkMode from '@/hooks/useDarkMode'; import { media } from '@/styles/media'; import { darkTheme, lightTheme } from '@/styles/theme'; import type { AppProps } from 'next/app'; import { ThemeProvider, createGlobalStyle } from 'styled-components'; import normalize from 'styled-normalize'; import '@/styles/index.css'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import AppLayout from '@/layout/AppLayout'; import store, { persistor } from '@/core/store'; import { PersistGate } from 'redux-persist/integration/react'; import { Provider } from 'react-redux'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; import 'toastify-js/src/toastify.css'; import { ToastContainer } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; import DefaultHead from '@/components/Head/DefaultHead'; import Construction from './construction'; const queryClient = new QueryClient({ defaultOptions: { queries: { refetchOnWindowFocus: false, // default: true }, }, }); function App({ Component, pageProps }: AppProps) { const { colorTheme, toggleTheme } = useDarkMode(); return ( <Provider store={store}> <PersistGate persistor={persistor}> <QueryClientProvider client={queryClient}> <ThemeProvider theme={colorTheme === 'dark' ? darkTheme : lightTheme}> <AppLayout toggleTheme={toggleTheme}> <Component {...pageProps} /> ... </AppLayout> </ThemeProvider> <ReactQueryDevtools initialIsOpen={false} /> </QueryClientProvider> </PersistGate> </Provider> ); } export default App;

컴공 4학년 백엔드 전향

안녕하세요 컴퓨터공학을 전공하고 졸업예정인 취준생입니다. 대학을 다니면서 프론트엔드 분야로 준비를 해왔고 next.js ts react redux recoil등 기술 학습과 팀 프로젝트,대외활동을 병행해왔습니다. 최근 취업 준비와 면접을 다니면서 미래에 대해 고민하게되었고 늦었지만 자바 스프링 백앤드로 취업을 다시 준비해야겠다고 생각했습니다. 현 백엔드 수준은 자바 스프링jpa로 crud만 겨우 구현해 본 수준입니다. 배포나 협업 프로젝트 경험이 없습니다. 그러나 27살(남자)로 나이도 늦은편이고 전향에 대해 아직 고민되어 궁금한 부분을 현업자 분들께 여쭈어보고 싶습니다. 1. 현 백엔드 취업 신입 요구사항이 궁금합니다 2. 취업 활동에 나갈때는 리액트와 스프링으로 1인 프로젝트와 팀프로젝트 각각 하나씩 경험해있을 계획입니다. Si,서비스 가리지 않고 지원할 계획인데 경쟁력이 있을지 궁금합니다. 3.프론트로 대외활동한것 및 팀프로젝트 경험을 백엔드 이력서에 녹여내도 될까요?? 읽어주셔서 감사합니다.

session과 router 처리

안녕하세요. React를 이제 갓 배워 클론코딩에 활용하고 있습니다. 로그인 기능을 구현하고 있는데, React에 useContext 훅이나 Redux 와 같은 유용한 서드파티가 있지만 보통 세션 처리는 서버에서 하는 걸로 알고있습니다. 여기서 생기는 의문이 그럼 처음 서비스에서 세션 정보를 취득했을 때 그 정보를 클라이언트에서 상태 관리하여 사용하는 건지, 아니면 지속적으로 서버와 통신하여 가져오는건지 궁금합니다. 라우터 처리도 비슷한 질문인데요. 서버에도 리다이렉션이 있고, React에도 Router 라이브러리로 리다이렉션을 구현할 수 있는데 각각 어느 상황에서 쓰는건지 구분이 가지 않습니다. 초보적인 질문이라 좀 부끄럽네요.. 감사합니다!

React 상태관리 라이브러리에 대해서 질문있습니다 !

안녕하세요 새로운 프로젝트를 들어가기전 라이브러리를 고민중입니다. 한번도 사용해보지않은 zustand 혹은 jotai 를 사용해보고싶은데… 보통 zustand나 jotai를 사용할때 비동기처리 같은 부분도 해당 라이브러리만 이용하는지… 아니면 redux나 react-query 를 같이 사용하는지 궁금합니다…! 그리고 다른분들도 선호하시는 라이브러리가 있으시면 알려주십셔 !!! 감사합니다 !!!

redux에서 질문있습니다 !

안녕하세요 redux로 프로젝트 진행중인데… 혹시 redux를 사용하시면 비동기데이터는 redux로 처리하지만, 페이지내에서 입력받는 입력 form같은 데이터들은 useState로 페이지 내에서 관리하는지, 아니면 전부 redux로 관리하는지 궁금합니다 !

프론트엔드 신입 포트폴리오 질문입니다.

안녕하세요 지방대 전공자이며 프론트엔드 취업을 희망하고 있는 취준생입니다. 현재는 8월에 졸업하고 취업 준비를 진행하고 있습니다. 3~4학년 때 학교와 시청의 지원을 받아 외주 프로젝트를 진행한 경험이 2건 있습니다. 1. 관공서 주관 지역 경제 활성화 웹 ( react,redux-saga,express, aws 풀스택 ) 2. 자동차 공업사 웹 ( react ) 두 프로젝트 모두 팀으로 진행하였지만 팀원의 큰 도움없이 스스로 개발하였습니다. ( 협업에 대한 컨벤션도 없었으며 어쩌다 보니 혼자 개발하고 알려주는 형식이였습니다. ) 현재는 포트폴리오와 github에 레포를 고정으로 넣어 둔 상태입니다. 취업 준비 중 모 기업의 인턴십 프로그램을 진행하며 총 4개의 프로젝트를 팀,개인으로 진행을 하였습니다. 많은 성장을 했다고 스스로도 느끼고 있으며 코드 퀄리티와 협업에 관한 컨벤션, 리드미 정리 등 위의 두 프로젝트와 수준 차이가 극심히 난다고 생각이 듭니다. 혹시 이런경우엔 위 두 프로젝트는 대표 레포지토리에서 빼놓고 포트폴리오에서만 설명을 하는게 나을까요 ? ex) 리팩토링도 생각해봤지만 1번 프로젝트는 제 기준 너무 큰 프로젝트라 시간이 오래걸릴 것 같습니다..

게시판 프로젝트 궁금증

하찮은 질문이지만 제가 react node mongodb 를 이용해서 게시판 회원가입 로그인 그외 기능들을 넣은 사이트를 만드려고 하는데 회원가입 로그인은 redux로 전역적으로 상태관리를 합니다. 그런데 게시판은 redux로 상태를 따로 관리해줄 필요가 없을까요 ? 여러 정보 찾아보면서 db에서 가져온 정보를 리덕스에도 담아주는 방식으로 했는데 비효율 적 인것 같아서요..

Redux Saga => React Query 전환 시 수치화 가능한 이점이 있을까요?

비동기 API 호출을 Redux Saga에서 React Query로 전환했을 때 이점 중에서 수치화 할 수 있는게 있을까요?