Cagn

프로젝트명퍼즐로그(Puzzlelog) - 조각을 퍼즐처럼 모아서 일기로 기록한다는 의미에서 '퍼즐로그'로 지었다. 프로젝트 기간2025. 02. 18 ~ 2025. 04. 09 기획 배경 및 소개- 일기라는 컨텐츠를 '기억 조각'으로 나누어 구성해보자는 생각에서 출발했다.- 하루가 끝나고 일기를 쓰기보다는, 그때그때 떠오를 때 다양한 형태의 조각을 남기는 구조 → 조각의 구조는 글, 사진, 영상, 음성이 있다.- 조각을 퍼즐처럼 조합해 완성된 일기를 꾸밀 수 있는 감성적인 다이어리 꾸미기 플랫폼 핵심적인 컨셉- 글 조각, 사진 조각, 영상 조각, 음성 조각을 모아서 일기를 구성한다.- 일기는 관리자가 에셋으로 등록한 스티커, 배경을 통해서 꾸밀 수 있고, 펜 드로잉도 가능하다.- 일기에 첨부된 조각(P..

프로젝트명릴레이 소설(Relay) - 직관적으로 이어쓰는 플랫폼이라는 의미 프로젝트 기간2025. 01. 17 ~ 2025. 02. 07 기획 배경 및 소개- 릴레이 형식으로 소설, 시, 수필, 시나리오, 희극을 이어 쓰는 창작 플랫폼- A가 1화를 쓰면, B와 C가 각각 그것을 이은 2화를 쓰고, 그것을 본 D가 2화 중 이어 쓰고 싶은 3화를 쓰는 형태- 분기 구조의 이야기가 생성되어서 이야기의 다양성과 창작의 확장성을 실험한 구조 주요 기술과 학습 내용- Quill.js를 통한 에디터 형식의 글쓰기 기능 구축- 뷰 페이지에서 다음화가 인기 화수가 이어질 수 있도록 알고리즘 설계 → 더 많이 진행된 화수를 기준으로 다음화가 이어지되, 진행된 화수가 같으면 조회수가 높은 작품으로 이어지게 함- 소설 상..

프로젝트명비트뱅크(Bitbank) - 비트교육센터(Bit)에서 만드는 은행(Bank)라는 의미프로젝트 기간2024. 11. 11 ~ 2024. 12. 13 기획 배경 및 소개- 기존 은행의 기능을 만들어보면서 데이터 전송방식을 익히고 싶었다.- 송금, 입출금, 대출 등 실제 은행의 기능을 웹에서 구현하고 싶었다.- 금융결제원 API를 사용하여 API의 기능에 대해서 익히고 활용하고 싶었다. 주요 기술과 학습 내용- Java & Spring 기반의 백엔드 구축- AJAX를 통한 비동기 통신 처리- 프론트엔드는 Javascript 기반으로 구축 (+ 카카오 로그인 API 구축) 구현 기능- 송금 기능 : 기본적인 계좌 이체 기능 구현- 락(저축) 기능 : 특정 기간동안 특정한 금액을 잠궈서 소비 불가능하도록..

리액트에서 배열을 출력하는 방법은 2가지가 있다. 배열 출력1) 전통적인 방식 (for, while, do while 문)이 경우에 JSX요소(HTML과 그 사이에 중괄호로 묶어진 자바스크립트 변수가 존재하는 형태)로 배열의 요소를 반복적으로 출력하려면 그 요소들을 담을 배열이 필요하다.function App() { const items = ["Chicken", "Pizza", "Hamburger"]; const elements = []; for (let i = 0; i {items[i]}); } return {elements};}export default App;이 경우, item에 들어있는 배열의 요소를 for문으로 돌리게 되고, push를 통해서 그 안에 들어있는 JSX요소를 반복적으로 e..

리액트는 코드를 변경하면 보여주는 뷰를 바로 바꾸지 않는다. 이 이유는 불필요한 렌더링(코드의 변경을 감지해서 화면에 그려주는 일)을 방지해서 성능 하락을 방지하기 위해서이다. 또, UI 상태를 직접 조작하는 것이 아닌, 함수의 상태에 따라서 변경되게 하기 위해서이다. 이로 인해 불필요한 연산을 줄인다. 바로 바꾸지 않기 위해서 리액트는 코드와 뷰 사이에 가상DOM을 만들고, 그 가상DOM의 변경을 감지하는 훅(useState, useEffect 등)을 통해서 그려준다.   훅(Hook)은 걸다, 연결하다(→Hook up)이라는 의미로 code와 가상DOM(Virtual Document Object Model), view를 연결해준다. 가상DOM은 문서 객체 모델의 약자로 객체로 문서를 만들어서 모델처럼..

리액트를 설치하면 다음과 같은 형태로 나오는데,여기에 있는 public이 외부로 보여지는 부분이고, src는 소스 부분으로 여겨진다.외부에서 가장 먼저 보여지는 부분은 index.html로 이곳에 있는 id="root"로 다른 부분을 띄워준다. 이 root는 src의 index.js와 연결이 되고, 이 index.js는 App.js와 연결이 된다.그렇기 때문에 실질적으로 React를 활용하기 위해서 입력하는 부분은 App.js인 것이다. 맨 처음 App.js를 들어가면 이런 형태로 되어있는데,여기서 ~ 의 내용은 미리보기 화면으로 날려도 문제는 없다.이곳을 날리고 나서 내용을 작성하게 되는데, App()하고 return의 사이 공간{빨간 네모}에 JavaScript를 입력하며, 와 사이 공간{주황 네..

＠ 리액트 설치법 프론트 기반 편집을 하기 위해서는 편집기가 필요한데,편리하고 무료로 많이 쓰는 편집기로는 Visual Studio Code가 존재한다. 이 편집기는 https://code.visualstudio.com/ 에서 다운받을 수 있으며, Visual Studio Code - Code Editing. RedefinedVisual Studio Code redefines AI-powered coding with GitHub Copilot for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and..

@ComponentScan - @Component, @Controller, @Service, @Repository, @Configuration이 붙은 클래스를 찾아서 자동으로 Bean으로 등록해주는 어노테이션​ ※ 스캔을 해주는 어노테이션의 종류어노테이션 종류역할@Component스캔을 하기 위해서 기본으로 들어가는 어노테이션(밑에 있는 어노테이션들은 어노테이션 정의에 이미 들어가 있어서 따로 추가하지 않아도 된다.)@ControllerMVC에서 Controller의 역할을 하는 클래스에 붙이는 어노테이션(포워드와 리디렉션 방식으로 뷰 및 액션으로 보내준다.)@ServiceMVC에서 Model(비즈니스 로직)의 역할을 하는 클래스에 붙이는 어노테이션(이전에 쓰던 MVC에서 UserDAO 등에 해당하는 ..

블로그에 배운 순서대로 올리느라 중간 내용을 올리지 못했다. 이제 조금씩 중간 내용을 올리도록 하겠다. React 왜 사용할까?1. 빨라서2. 편리해서 리액트는 모든 면에서 빠르고 편리할까? 그것을 알기 이해서는 SS와 SPA / CSR와 SSR을 이해해야 한다.SS (Static Site) - 정적 사이트 - HTML, CSS, JavaScript만으로 구성된 사이트 (그렇기 떄문에 데이터를 한꺼번에 요청하고 한꺼번에 응답한다) 단점 : 새로고침할 때마다 해당 페이지에서 필요한 정보를 모두 다시 불러온다. 장점 : 네트워크 트래픽으로는 우수(한 번에 보내기 때문에)하다. SPA (Single Page Application) 비슷한 데이터가 있는 경우, 중복된 데이터를 더 이상 불러올 필요가 없다. 불러..

나는 이전부터 클래스를 도장으로 비유했었다. 즉, 나의 생각을 클래스에 담고, 그것을 찍으므로서 객체로 만드는 것이다. (인스턴스화) 즉, 클래스는 나의 생각을 담은 것이기 때문에 추상적이고, 이것을 현실에 구현하는 것은 이 생각을 찍어서 구체적으로 만들어야 한다. 그렇다면 클래스는 메모리 영역 어디에 보관되는 것일까? 난 이점이 궁금했다. 배열과 객체는 힙(Heap) 영역에 보관되며, 스택(Stack)에 있는 변수를 통해서 참조된다.2024.10.12 - [코딩 공부/자바(Java)] - 배열 - 성적 처리 프로그램 배열 - 성적 처리 프로그램동일한 데이터 타입의 공간을 메모리에 순차적으로 확보해야 한다면, 이 변수를 순차적으로 하나로 묶는 것이 효율적이라고 생각한다. 그래서 이를 묶는 형태를 배열이라..