#frontend

부트캠프로 4개월 만에 포폴 쌓기

입문자도 할 수 있는 부트캠프를 하려고 하는데요 .. 프론트엔드 메인으로 하고 백엔드 협업 프로젝트까지 기초 잡고 진행하면 좋은 포폴 만들 수 있을까요? 찾아본 부캠 → https://camp.modulabs.co.kr/frontend 다른 부캠 추천 + 활동 추천, 피드백도 댓글로 자유롭게 부탁드립니다 !!!!

프론트엔드 부트캠프 어떤 걸 선택해야할까요

안녕하세요. 현재 4학년 1학기를 마친 26살 대학생입니다. 학교 수업에서 HTML, css, JavaScript를 배우고 난 뒤, 프론트엔드에 관심이 생겨 7월 모집인 프론트엔드 부트캠프에 지원을 하게 되었고, 감사하게도 두 가지 캠프 모두 최종합격을 하게 되었습니다. 엘리스 트랙 react 트랙 https://elice.training/track/react kakao x groom Deep dive 프론트엔드 개발자 과정 https://deepdive.goorm.io/frontend - 둘 중 하나를 선택해야 하는 상황인데, 이에 대한 도움을 받고자 질문 드립니다. 1. 현직자 관점에서 어떤 커리큘럼이 더 나을까요? 2. deep dive에서 진행하는 프로젝트가 조금 독특(?)하던데 (웹 애플리케이션 디버깅 및 최적화, 고객사 대응 프로젝트) 다른 부트캠프에서도 이런 프로젝트를 진행 하나요? 이에 대한 정보가 부족해, 질문 드립니다 🥲

React Spring 배포과정 중 의문의 404

react + spring boot로 진행하는 프로젝트가 현재 cloudtype이라는 플랫폼으로 배포중에 있습니다. 문제는 정확한 서버주소를 호출하는 것 같음에 불구하고 404 에러가 발생하여 해결하지 못하고 있습니다. 현재, 아래 사진과 같은 로그가 클라이언트, 서버에 각각 발생합니다. 서버에서는 다음과 같이 구성되어있고 @RestController @RequestMapping("/v1/login") @RequiredArgsConstructor @CrossOrigin(origins = "https://web-secondchance-front-bug-1cupyg2klvnmgdft.sel5.cloudtype.app") public class KakaoController { private final KakaoService kakaoService; private final Logger LOGGER = LoggerFactory.getLogger(KakaoController.class); @PostMapping("/kakao-login") public ResponseEntity<UserDto> kakaoLogin(@RequestBody KakaoLoginDto kakaoLoginDto) { String code = kakaoLoginDto.getCode(); LOGGER.info("Get Code from FrontEnd : {}", code); LOGGER.info("Request getAccessToken()"); kakaoLoginDto = kakaoService.getAccessToken(code); String accessToken = kakaoLoginDto.getAccess_token(); LOGGER.info("access_token : {}", accessToken); if(accessToken != null){ UserDto userDto = kakaoService.getUserInfo(accessToken); return ResponseEntity.ok(userDto); } else { return ResponseEntity.status(HttpStatus.BAD_REQUEST).body(null); } // accessToken이 null임에도 getUserInfo를 부름. // 안부르게 끔 위의 방법을 포함하여 // 1. map에서 true, false를 사용하여 해봄 // 2. getAccessToken을 map객체로 반환하게끔 하여 accessToken이 있으면 true, 없으면 false로 하여 isEmpty 함수로 체크하여 부름 // 위의 두 방법 전부 소용없음. 그냥 getUserInfo를 부름. } @PostMapping("/kakao-logout") public String kakaoLogout(){ return "ok"; } } 현재 리액트에서는 다음과 같이 axios.post로 접근하여 code를 전달합니다. 무엇이 문제일까요?

유튜브 알고리즘 영상이 떠서봤는데요!

신입 백엔드 개발자 최소 기준이라고 하시면서 -필수- CRUD REST API JWT Swagger ERD -옵션- Docker Frontend 현업에 계신 시니어 개발자분들이 보셨을때 주니어 개발자들이 필수는 다 가지고있었을까요?? 저는 스프링만 진득하게 공부하려고했는데 늦은걸까요? ㅠㅠ 저기서 crud rest api빼고는 아직 잘 모르겠네요

프론트 커리어,,,,,,

안녕하세요 Frontend로 일하고 있는 신입개발자 입니다. 지금 회사에서 React 커리어를 6개월 정도 경력을 쌓았고 이전 회사에서는 스타트업이어서 수익 문제 때문에 VueJS로 6개월 정도 커리어를 쌓았습니다. 그런데 이번 회사에 합류한 팀이 어쩔 수 없이 해체 되어서 회사에 주력적인 Frontend 기술인 Sencha ExtJs를 사용하게 될 것 같습니다. 구인 사이트에 찾아보니까 Sencha를 사용하는 기업이 많이 없는 것 같아서 커리어를 쌓아도 되는지 고민 됩니다. 많은 의견 주시면 좋겠습니다.

(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;

DRF를 자세히 공부해보고싶은데 독학으로 하려니 자꾸 턱턱걸립니다... django 백엔드에서 프론트엔드로 보낸 data가 안불러와져요

django rest framework로 웹을 개발하는 것을 공부하는 중인데 막히는부분이 많아서 점점 괴로워지네요. 이거를 보면서 독학하고 있는데요. https://wikidocs.net/book/9596 django views.py에서 response(data)를 발신하는 것까지는 되는데 next.js를 이용한 프론트에서 data를 받아오지 못하고 있어요... 왜 그럴까요? 디버그 메시지가 안뜨니 더 알기가 어렵네요. # backend/views.py """ from django.shortcuts import render from django.http import HttpResponse from rest_framework.decorators import api_view, permission_classes from rest_framework.permissions import AllowAny from rest_framework.response import Response # Create your views here. @api_view(['GET']) @permission_classes([AllowAny]) def hello_world(request): return Response('Hello, World!') # frontend/index.js """ import React, { useState, useEffect } from "react"; // config.js export const BACKEND_URL = "http://127.0.0.1:8000/"; const Home = () => { // State to store the data fetched from the backend const [data, setData] = useState(""); // useEffect hook to fetch data from the backend when the component mounts useEffect(() => { // Fetch data from the backend API using the '/api/hello' endpoint fetch("${BACKEND_URL}api/hello") .then((response) => response.json()) .then((data) => setData(data)); }, []); // Render the component JSX return ( <div> <h1>Welcome to Fine-Tuning Chatbot!</h1> <p>{data}</p> </div> ); }; export default Home; """ pure django-template를 이용해서 홈페이지 만들고 그 원리를 이해하는 것까지는 되는데 DRF는 정말 다른 세상이라고 느껴지네요...ㅎㅎ 좋은 강의나 책이 있으면 추천부탁드립니다. ㅠㅠ 위에 언급한 강의로 RESTful 배워보려는데, 기술스택이 많아서 그런건지 정보량도 많고 어렵네요 ㅠ

Redux 사용이유

안녕하세요 frontend 신입 개발자입니다. 운좋게 비전공자에서 교육 수강 후 바로 취업은 했지만, 성에 차지 않아서 바로 이직 준비를 하고 있습니다. 이직 준비과정에서 자소서에 쓴 내용도 그렇고 현재 기업에 취업할 때 받은 질문도 그렇고 해서 궁금한게 있습니다. 제가 첫번째 프로젝트에서 리덕스를 쓰고 그 이후부터는 리코일을 사용했습니다. 그 이유가 리덕스는 처음 배울때 너무 어려웠고, redux-thunk등 비동기 처리코드가 너무 길고 복잡하다는 단점이 있고, 리코일은 리액트의 useState훅과 비슷한 형태로 쉽게 전역 상태관리를 할 수 있다는 점이었습니다. 그래서 리코일을 사용한 이유는 저 위에 말한 이유로 대답을 했었는데, 첫 프로젝트에서 리덕스를 사용한 이유를 말하지 못했습니다. 그래서 면접에선 솔직하게 그땐 첫 프로젝트라 그때 검색했을 때 가장 많이 사용하는 것 처럼 보였기 때문에 리덕스를 선택한 것이지 장, 단점을 파악하진 못했다고 대답을 했습니다. 다행히 기업은 스타트업이고 면접관이 젊으신 분이어서 솔직함을 좋게 봐주신거 같은데, 이후에 대기업 면접에서도 똑같이 말하면 안될거 같아 고민입니다. 검색을 해봐도 리덕스 사용 이유보단 리덕스를 버리고 리코일로 넘어간 글만 보이는데, 혹시 리덕스를 사용하시는 분들이 있으시다면 그 이유를 알 수 있을까요?

django의 request로 받는 imagefile

안녕하세요. 저는 스타트업회사에서 백엔드 개발자로 근무하고 있습니다! django의 drf 프레임워크를 활용하여 api를 생성하여 사용합니다. 개발을 하던 도중에, 모바일 앱(react-native)에선 사진을 uri, name, type의 필드들로 이루어진 json 객체를 보내는데 이것을 어떤 원리로 django가 사진이라고 이해하고 저장하는지가 궁금합니다 왜냐하면, 기존에 있던 사진들을 s3에 저장된 url 문자열로 frontend에 보내주는데, 그 값을 가지고 다시 uri, type, name으로 쪼개서 다시 백으로 넘겨준다고 하더라고요(기존 사진을 그대로 사용하는 경우) 그런데 그렇게 받은 사진에 대한 객체를 처리하기 전에, s3상에서 그 파일이 삭제가 된 경우에도 정상적으로 작동하는 이유를 모르겠어서 그렇습니다 웹(react)에서는 같은 백 api를 사용하더라도 작동이 안 되고, 앱에서는 작동이 잘 되는데 이것 역시 원인을 잘 모르겠습니다...

SpringBoot3 + React 개발 방법

안녕하세요. 현 SpringBoot2 + thymeleaf로 서비스 운영 중에 있습니다. 다행히? 올해 전반기 서비스 개편 작업 건이 생겼습니다. 그래서, 신규 서비스의 개발 환경을 구성 중인데 SpringBoot3 + React를 하려 합니다. 환경 구성하려고 이것 저것 테스트 삼아 만들고 있는데 Backend, Frontend를 완전히 분리해 각각 구성 할지 말지 고민입니다. - 분리의 이유 : 기존 유지보수 입장에선 Back or Front 쪽 소소한 수정 사항이 있어 해당 파일 수정하고 전체 jar 패키징 해서 올리는 작업이 비 효율 적이라 생각했습니다. Back or Front 해당 부분 서비스만 적용 하면 좋다 생각했어요. - 병합의 이유 : 기존처럼 한 프로잭트에서 개발해야 관리도 편하고 서비스 배포도 Jar 하나만 관리 하면 되니까 손 쉬울 것 같습니다. 실무쪽에선 서비스 개발 및 배포를 어떻게 하고 있는지 궁금하네요. 두서 없는 글 읽어 주셔서 감사합니다.

FrontEnd Data Serialize

현재 벡엔드 프레임워크는 자바 스프링을 사용하고있습니다 자바 객체를 만들어서 프론트엔드에서 주는 데이터를 받을려고 하는데 자바 객체안에 또객체가있고 리스트형태의 객체도있습니다 푸론트엔드에서 어떤식으로 데이터를 보내줘야할까요? 아래보시면 as-is 를 to-be의 형태로 보낼려고합니다 차이점은 무엇이고 어떻게 프론트에서 데이터를 만들고 벡엔드로 보내줘야하나요 ? 벡엔드에서 데이터를 받을때 JSON parse error가 발생합니다 도와주세요 ㅠㅠ as-is { key :value } to-be { node :[ { key: value } ], node2: { key: value } }

webpack-dev-server proxy설정으로 cors 정책 우회가 가능한 이유

안녕하세요, 2년차 프론트엔드 개발자입니다. 최근 모회사 프론트엔드 직무 면접을 보던중, cors에 대한 질문을 받았었습니다. 이에 대해 제가 드린 답변은 아래와 같았습니다. "cors는 다른 출처임에도 불구하고 브라우저상에서 서로 상호작용이 가능하도록하는 정책이고, 이를 정석적으로 사용하기위해서는 Backend 서버에서 HTTP 응답 헤더의 Access-Control-Allow-Origin 속성에 Frontend 서버의 origin을 추가해주면 된다. 또한, Frontend단에서 개발간에는 위에서 말한 Backend 서버측에서의 작업없이도 webpack-dev-server의 proxy설정을 사용하면 proxy서버가 Backend 서버의 origin과 동일한 origin에서 상호작용해줌으로써 cors 정책관련 이슈를 우회할 수 있다." 위 답변에 추가로 면접관께서 여쭤보셨던 것은 "개발간에 어쨌든 로컬에서 proxy서버를 띄울텐데, 그 서버가 어떻게 Backend 서버와 같은 origin으로 상호작용할 수 있느냐?" 였는데요, 제대로 된 답변을 드리지 못하고 면접이 끝난 뒤에도 찾아본다고 찾아봤지만 해당 내용에 대해서 명확한 이유를 찾지못하였습니다. 제가 네트워크 지식이 부족해서 기본적인 proxy개념을 이해하지 못하고 있을 수도 있는데요, 혹시 관련 내용에 대해 잘 아시는 분이 계시다면 알려주시면 감사하겠습니다!