분류 전체보기65

• 

  React에서 Props 사용하여 공통 컴포넌트 재사용하기 공통 컴포넌트로 분리하는 개념은 단순한 것이면서도 익숙한 사람들에겐 당연하지만, 누군가에겐 이러한 아이디어가 잘 생각나지 않을 수도 있다. 오늘은 React에서 공통 컴포넌트를 어떻게 재사용하는지, 그리고 props를 어떻게 활용할 수 있는지에 대해 포스팅해보려고 한다. 잘 설계된 컴포넌트는 여러곳에서 반복하여 사용될 수 있다. 공통 컴포넌트란? 공통 컴포넌트는 이름 그대로 여러 곳에서 사용될 수 있는 컴포넌트를 의미한다. 예를 들어, 프로필 카드, 버튼, 헤더 등 웹 애플리케이션의 여러 부분에서 반복적으로 사용되는 UI 요소들이 이에 해당한다. Props를 활용하여 각 컴포넌트별로 고유한 내용을 공통 컴포넌트에게 동적으로 표시되게 하기 props는 부모 컴포넌트로부터 자식 컴포넌트로 값을 전달하는 메커.. 개발 이야기/frontend 2023. 10. 22.

• React에서 로그인 시 callback으로 WebSocket 상태관리하기 React에서 WebSocket과 State Management를 활용하여 로그인 기능을 구현중이다. 여타의 react hook을 사용하지 않고, callback을 통해 부모 컴포넌트인 app.js와 자식컴포넌트인 login.js사이를 원하는 위치에서 왕복하도록 하였다. Callback을 활용한 로그인 정보 전송 현재 내 코드를 보면서 설명해보면, App 컴포넌트에서 WebSocket을 초기화하는 initWebSocket 함수는 로그인 작업이 시작되기 전에 호출되며, WebSocket 객체를 생성한다. // app.js const initWebSocket = (callback) => { const ws = new WebSocket('ws://웹소켓 주소'); ws.onopen = () => { conso.. 개발 이야기/frontend 2023. 10. 18.

• 

  Electron 이벤트값을 다르게 설정하여 리액트 컴포넌트 재사용하기 Electron.js와 React.js를 이용해 채팅 팝업창을 만들면서, 이전에 만들어둔 TitleMenuBar라는 컴포넌트를 재사용하고 싶어졌다. 일렉트론은 원래 디폴트로 제공해주는 상단 메뉴바가 있는데, 내가 원하는 UI로 디자인하기 위해 아래처럼 상단 메뉴바를 없앴다. 그리고 TitleMenuBar를 리액트에서 새로 만들어 일렉트론에서 기본으로 제공해주는 이벤트인 minimize()라던지 close()등에 연결하였다. BrowserWindow 코드 mainWindow = new BrowserWindow({ //생략 frame: false, // 여기서 default menu값을 없앰 }); // TitleMenuBar.js에서 발신한 ipcMain값을 읽은 뒤 이벤트 발생시킴 ipcMain.on('.. 개발 이야기/frontend 2023. 10. 13.

• 

  react-router-dom을 사용하는 이유와 구조 electron.js와 react로 데스크탑 메신저앱을 만들면서 초반에 router path를 잡아야 할 필요성을 느껴 react-router-dom을 사용했다. 또한 electron.js에서 ipcRenderer를 통해 react에서 만든 브라우저를 electron의 새 창으로 띄우고 싶어서, react-router-dom를 통해 새 창으로 띄우려는 path를 잡아 loadURL(path주소) 이벤트를 사용할 수도 있었다. 오늘은 이 react-router-dom 개념에 대해 포스팅 해보려고 한다. react-router-dom react에서 라우팅을 구현하기 위한 라이브러리이다. 기본적으로, SPA(Single Page Application)에서 페이지를 다시 로드하지 않고도 다른 뷰나 컴포넌트를 표.. 개발 이야기/frontend 2023. 10. 12.

• JS 알고리즘 - sort(), Math.max() 문제 오늘 푼 자바스크립트 알고리즘 문제는 어제 푼 것보다 더 어려운 것이었다. 문제는 아래와 같다. 졸업 선물 선생님은 올해 졸업하는 반 학생들에게 졸업선물을 주려고 합니다. 학생들에게 인터넷 쇼핑몰에서 각자 원하는 상품을 골라 그 상품의 가격과 배송비를 제출하라 고 했습니다. 선생님이 가지고 있는 예산은 한정되어 있습니다. 현재 예산으로 최대 몇 명의 학생에게 선물을 사줄 수 있는지 구하는 프로그램을 작성하세요. 선생님은 상품 하나를 50% 할인해서(반 가격) 살 수 있는 쿠폰을 가지고 있습니다. 배송비는 할인에 포함되지 않습니다. ▣ 입력설명 첫 번째 줄에 반 학생수 N(1 알고리즘 이야기/알고리즘 문제풀이 2023. 10. 9.

• 

  node express에서 html, js, css파일 정상적으로 불러오기 express에서 html을 불러올 때는 주의해야 할 사항이 있다. 우리는 보통 다음과 같은 방식으로 html을 연결하곤 하는데, 이렇게 하면 해당 html에 script로 박아넣은 js파일이나 css파일 등을 바로 읽지 못하고 오류가 날 수 있다. 주의사항 이를테면 아래처럼 html 파일을 연결했을 때, 아래처럼 404에러가 줄줄이 뜨는 것을 확인할 수 있을 것이다. 해결방법 해당 오류에 대해서는 아래 페이지에서 해답을 찾을 수 있었다. Serving static files in Express Serving static files in Express To serve static files such as images, CSS files, and JavaScript files, use the express.. 개발 이야기/backend 2023. 10. 9.

• 

  props로 내려줄때 원하는 부분만 가져오기 서론 코딩앙마 유튜브를 보며 react.js 스터디를 하고있다. next.js안에서만 리액트를 써봤고, 회사 프로젝트를 하느라 3개월동안 바닐라 자바스크립트만 쓰느라 react를 복습하며 놓친 부분을 메우고 있는 중이다! props로 내려줄때 원하는 부분만 가져오기 내가 기존에 알고있던 props 사용방식은 다음과 같다. 출처: https://ko.reactjs.org/docs/components-and-props.html#function-and-class-components function Welcome(props) { return Hello, {props.name}; } function App() { return ( ); } App 컴포넌트에서 name을 넘겨서 Welcome 컴포넌트에서 props... 개발 이야기/frontend 2023. 10. 9.

• 

  리액트 yarn start시 proxy 에러 해결 방법 ERROR 스프링부트와 리액트를 연동하기 위해 proxy를 설정하던 중 오류가 발생했다. 다른 블로그들을 보면서 이런식으로 package.json에서 proxy를 설정한 뒤 저장하고 yarn start를 해서 서버를 구동시키려는데 터미널에서 다음과 같은 오류가 떴다. "Invalid options object. Dev Server has been initialized using an options object that does not match the API schema." SOLUTION 이런 경우 당황하지 말고 터미널 켜서 http-proxy-middleware를 깔아보자 npm install http-proxy-middleware 그리고 src폴더 밑에 setupProxy.js라는 파일을 만들고 아.. 개발 이야기/frontend 2023. 10. 9.

• 

  스프링부트 미니 프로젝트 만들기 - 리액트 연동 초기 세팅 개발환경 포스팅 하기 앞서 내가 만들 미니 프로젝트의 개발환경은 이러하다. BACKEND framework | springboot build tool | gradle ide | STS FRONTEND library | react.js ide | VScode 스프링부트에 리액트를 연동해보고 테스트 데이터도 받아 와보자. 1. 스프링부트 프로젝트 내 React 프로젝트 생성 (1) 터미널 오픈 (2) 리액트 프로젝트 폴더 생성: 터미널에 아래 명령어 입력. 프로젝트명은 영어 소문자로 해야 할거다. npx create-react-app 프로젝트명 이렇게 나오면 성공. 2. 리액트 경로 확인 나는 이클립스 터미널이 영 텍스트도 짤리고 엑박도 많아서 그냥 탐색기 들어가서 확인을 해보았다. 탐색기에 스프링부트 프로.. 개발 이야기/backend 2023. 10. 9.

• 

  스프링부트 미니 프로젝트 만들기 - MVC 모델 큰 그림으로 개념잡기 문제점 일단 이번 프로젝트를 진행하기 전 개념 정립을 한번 더 해야 함을 느꼈다. MVC모델이 이해가 될 듯 하다가 말았던 이유는 직장 프로젝트에 쓰인 class가 책이나 인강에서 접하는 class와 달랐기 때문이다. 또한 이해가 안가는 용어들(dto, dao, vo, controller 등)을 검색해보면 어디는 dto를 쓰고 어디는 안 쓰고, 어디는 entity를 쓰고 어디는 안썼다. 혼란했다...숲을 모른 채로 나무부터 봐서 그런걸까. 서둘러 큰 흐름을 이해해야 할 필요를 느꼈다. MVC모델 개념 MVC모델에 대해서는 찾아보면 뭐가 많이 나온다. 그 중에 가장 직관적인 도식은 아래 그림이였다. 이제 좀 개념이 잡히는 데이터의 흐름. 나만의 버전으로 텍스트로 한번 도식화 해보려 한다. TIL스프링부트 .. 개발 이야기/backend 2023. 10. 9.