반응형

IT Tech 37

토이프로젝트 : 귤톡

생업이 바쁘다는 이유로, 여러가지 이유로 잠시 글로부터 멀어져 있었다. 글을 쓴다라는게 생각보다 쉬운일이 아닌만큼 이런저런 이유를 핑계로 글을 쓰지 못했다. 이 블로그라는게 정말로 필요한 지에 대한 의문도 사실 약간 있었다. 사실 어떤 개발을 해갈때 글을 쓰면서 정리를 해가면서 한다는 건, 느낌상으로 아주 무거운 강철 가방을 메고, 뛰어가는 느낌이다. 분명 목표가 저기 앞에 보이고, 어떻게 가야하는지 보이지만, 내가 메고 있는 가방때문에 앞으로 가지 못한다는 답답함이 있다.   하지만, 최근에 개발을 하면서 생각했던 점은 그 답답함은 그냥 느낌이라는 것이다. 아주 무거운 가방을 메고 달리는 것은 분명 그 당시의 기록을 높이는 데 아주 큰 방해물이 된다. 하지만 그렇다고 해서 그 가방을 놓고 뛰는 것은 단..

반복되는 리스트 아이템 가운데 정렬하면서 마지막 남은 요소는 좌측 정렬하기 - React.js

리스트 아이템을 반복적으로 그리다 보면 마주치는 아주 큰 산이 하나 존재한다. 바로 아이템을 어떻게 정렬할 것인가를 생각하는 것이다.   아무 생각없이 아이템을 그냥 다 붙여넣다보면 이렇게 좌측으로 몰린 아이들을 만날 수 있다. 이게 마지막은 이렇게 나와야하는데 모든 리스트들이 이렇게 나오게 된다.  그럼 여기서 해결하는 가장 쉬운방법은 css로 이 리스트의 container div에 justify-content center를 주게 되면, 이 친구들은 정 가운데로 모이게 된다. .campaignItemContainer { width: 100%; display: flex; gap: 30px; flex-wrap: wrap; justify-content: center;} 그럼 나머지..

IT Tech/React 2024.11.12

함수(Function)와 메서드(Method)

제가 웹 어플리케이션 개발을 배우면서 가장 먼저 배운 언어는 Java입니다. 당연히 Java를 먼제 배워서 메서드(Method)에 익숙해져있었습니다. 한참이 지난 후에야 JavaScript를 배우면서 함수(Function)을 배우게 되었습니다. 그럼 그렇게 배우는 과정에서 들게 된 생각은 무엇이었을까요? 함수와 메서드는 같은 것이라는 생각입니다. 물론 우리 선생님들은 그렇게 가르치지 않으셨지만, 배우는 사람이 가르치는 사람이 말하는 모든 것을 소화할 수 있다면 누군가를 가르친다는 것으로 돈을 버는 일은 불가능 했을 것입니다.  당연히 저는 가르침대로 이해하는 것이 아니라 그냥 제가 느낀대로 이해하게 되었고, 그 결과가 함수와 메서드의 차이가 도대체 무엇일까입니다. 같아 보이지만 같다고 할 수 없는 사이인..

리액트(React), 컴포넌트(Component)에 대해서

컴포넌트(Component)란?React를 사용할 때는 컴포넌트를 class 또는 함수로 정의할 수 있습니다. class로 정의된 컴포넌트는 아래에 자세히 설명하고 있듯 보다 많은 기능을 제공합니다. React 컴포넌트 class를 정의하려면 React.Component를 상속받아야 합니다.https://ko.legacy.reactjs.org/docs/react-component.html 리액트나 다른 프론트엔드 프레임워크를 사용하면 자주 나오는 단어 중 하나가 컴포넌트입니다. 그럼 컴포넌트는 무엇일까요?  컴포넌트의 영어 단어 뜻은 요소입니다. 즉, 컴포넌트는 요소를 말하는 것입니다. 그리고 지금 여기서 이야기 할 컴포넌트도 요소입니다. 간단하게 말해서 리액트와 같은 프론트엔드 프레임워크에서는 컴포넌트..

IT Tech/React 2024.09.07

React - Java Spring Boot 프로젝트에서 카카오 로그인 api 기능 구현하기

요즘 웹 어플리케이션이든 모바일 어플리케이션이든 로그인, 회원가입 기능을 구현할 때 카카오, 구글, 페이스북 등으로 로그인을 하는 기능을 구현하는 것은 기본이 됐습니다. 그 중 카카오 로그인을 리액트와 자바 스프링부트 프로젝트에서 구현하는 방법이다. 가장 먼저 할 일은 카카오 디벨로퍼에서 앱을 생성하는 것이다.  https://developers.kakao.com/ Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com카카오 디벨로퍼에 로그인을 한 후, 상단의 네비게이션 바에서 내 어플리케이션을 누른 후,  애플리케이션 추가하기 버튼을 클릭하고 내 앱을 생..

IT Tech/Java 2024.07.29

SpringBoot 프로젝트에 SPA 프로젝트 연결하기

SPA 프로젝트의 빌드 결과물을 Spring Boot의 static 폴더로 이동해왔다면, 이제 스프링부트 프로젝트에서 프론트 엔드 요청을 SPA 프로젝트의 html파일로 연결해줘야한다. 여기서는 React프로젝트를 이용해서 SPA를 만들었기 때문에 React의 빌드 결과물을 가지고 연결할 것이다. 이렇게 보면 resources 하위에 React의 빌드 결과 파일들이 자리잡고 있는 것을 볼 수 있다. 이제 Spring Boot의 컨트롤러와 Web Config 파일에서 해당 index.html 파일로 연결되게 설정만 해주면 된다. 가장 먼저 해야할 일은 Controller를 생성하는 것이다.  @Controllerpublic class SPAController { @RequestMapping({"/"}..

IT Tech/Java 2024.07.29

깃허브에 처음 프로젝트 올리기

깃허브에 처음 프로젝트를 올리는 방법입니다. 프로젝트를 처음 생성한 후 버전 관리를 하기 위한 방법으로 여러가지 git을 이용합니다. 여기서는 github에 나의 프로젝트를 올리는 방법에 대해서 알아보도록 하겠습니다.  먼저 나의 깃허브에 접속해서 New라는 버튼을 클릭해서 새로운 repository를 생성해주도록 합니다.   repository name을 작성해주고, 다른 사람들이 볼 수 있는 repository를 생성할 거면, Public으로 내가 선택한 사람들과 나만 볼 repository면 Private를 선택해서 생성해줍니다. 그리고 가장 마지막의 create repository 버튼을 클릭해주면, repository를 생성하게 됩니다.  그럼 이런 페이지를 볼 수 있는데요. 아주 쉽게 새로운 ..

IT Tech/github 2024.07.29

React 프로젝트 스프링부트 프로젝트 안으로 빌드하기

스프링 부트의 resources 폴더 안으로 React 프로젝트를 빌드하는 것은 정말로 쉽습니다.  먼저 스프링 부트의 프로젝트 안의 frontend라는 폴더 안으로 React 프로젝트를 생성했습니다.  이 폴더 안을 보면 package.json이라는 파일이 있는데 이 파일을 열어보면,  이렇게 scripts라는 설정 밑으로 명령어들을 설정해 놓은 부분이 있습니다. 이 부분의 build 부분이 초기 세팅과 같다면 아마 vite build 라고만 적혀있을 것입니다. 이것을 만약 저와 폴더구조가 같다면 위의 명령어를 그대로 붙여 넣으면 됩니다. 명령의 흐름은 이와 같습니다. 먼저 리액트 프로젝트를 build합니다. 그리고 resources 의 static 폴더를 강제로 지우고, static 폴더를 생성하는데..

IT Tech/React 2024.07.29

스프링 프로젝트 안에 리액트(React) 프로젝트 생성하기

리액트란 무엇인가!리액트란 프론트 엔드에서 사용하는 자바스크립트 라이브러리다. 리액트의 최종적인 결과는 결국 웹 브라우저가 읽을 수 있는 html, css, js 등의 파일로 웹 어플리케이션을 웹 브라우저에 그려주는 것이 최종 목표이다. 개발자들은 프론트 엔드의 UI를 컴포넌트로 작성해서 읽기 쉬운 가독성과 재사용성을 높여주고, 한 페이지씩 웹 서버에서 다운로드를 받는 것이 아닌 한 페이지 안에서 여러페이지를 다시 렌더링해서 UI를 업데이트하는 형식의 SPA를 지향하는 라이브러리입니다. 결국, html, css, js 파일이기 때문에 리액트 라이브러리로 빌드한 파일들을 스프링 부트의 resources 폴더에 집어넣은 후, 스프링 부트 어플리케이션을 배포 서버에 올려두면, 클라이언트는 리액트로 작성된 프론..

IT Tech/React 2024.07.29
728x90
반응형