IT 일상/프로젝트

[사이드 프로젝트] fillsa 개발일지 010. Spring 패키지 구조 설계하기

패키지 구성의 종류 1. 계층형 └── src ├── main │ ├── java │ │ └── com │ │ └── example │ │ └── demo │ │ ├── DemoApplication.java │ │ ├── config │ │ ├── controller │ │ ├── dao │ │ ├── domain │ │ ├── exception │ │ └── service │ └── resources │ └── application.properties 각 계층을 대표하는 디렉터리를 기준으로 코드들이 구성한다. 해당 프로젝트에 이해가 상대적으로 낮아도 전체적인 구조를 빠르게 파악할 수 있다. 2. 도메인형 └── src ├── main │ ├── java │ │ └── com │ │ └── example..

[사이드 프로젝트] fillsa 개발일지 009. 리액트 처음 세팅하기 (3) CSS

React에 CSS를 적용하는 여러가지 방법 1. css 파일을 바로 import하기 가장 간단한 방법이지만 여러 컴포넌트에서 class name이 중복될 수 있어 관리하기가 매우 힘들다. // App.js import "styles.css"; const App = () => { return( ... ); } 2. React에서 제공하는 CSS module 이용하기 css 파일의 이름을 이름.module.css과 같이 변경하여 사용할 수 있다. 이것은 css 모듈이 작동하도록 코드를 변환하라고 컴파일 과정에 보내는 신호이다. // App.js import styles from "./App.module.css"; const App = () => { return ( CSS 적용 ); }; export def..

[사이드 프로젝트] fillsa 개발일지 008. 리액트 처음 세팅하기 (2) Axios, React Query, Zustand

1. Axios 설정 AJAX(Asynchronous Javascript And XML)을 구현하려면 Javascript 내장객체인 XMLRequest를 사용하거나 다른 HTTP Client를 사용해야한다. HTTP Client 라이브러리에는 Fetch API, Axios 등이 있고, 이 프로젝트에서는 Axios를 사용한다. 1) axios 설치 npm install axios 2) axios 모듈 만들기 src > apis 디렉토리 하위에 'customTestAxios.js'라는 파일 생성하기 import axios from 'axios'; const customTestAxios = axios.create({ baseURL: 'https://koreanjson.com/', }); export { cus..

[사이드 프로젝트] fillsa 개발일지 007. 리액트 처음 세팅하기 (1)

1. vscode extensions 설치하기 전부 필수는 아니고, 그냥 내 vscode에 깔려있는 것들을 나열해보았다. Auto Rename Tag ES7+ React/Redux/React-Native snippets ESLint HTML CSS Support JS Quick Console `console.log()` 코드를 log라는 축약어로 바로 쓸 수 있다. Live Server Prettier - Code formatter 프리티어 구체적인 설정 방법은 링크 참조 2. 리액트 디렉토리 구조 만들기 pages react router로 라우팅을 적용하는 컴포넌트들을 저장 여기에 담기는 컴포넌트들은 파일명을 '~~Page'로 끝내기 components 재사용 가능한 컴포넌트들을 저장 hooks 커스텀..

[사이드 프로젝트] fillsa 개발일지 006. vite로 리액트 프로젝트 생성하기

원래 webpack을 써서 리액트 개발을 이어가보려고 했으나 예전에 webpack은 느려서 답답하니 vite를 쓰는 게 좋다는 말을 들은 기억이 나서 뒤늦게 vite를 부랴부랴 찾아보았다. 그 전에 프론트엔드의 모듈 번들러에 대한 이해가 부족해서 함께 공부하였다. 모듈 번들러의 역사 npm의 등장 자바스크립트는 모듈(module)이 없다. 자바스크립트가 탄생했을 당시에는 ‘웹에서 자바스크립트로 대형 애플리케이션을 만들거야’라고 상상조차 하지 못했기 때문이다. 아주 간단한 동작만 하기 위한 목적을 가지고 태어났기에 파일을 여러 개로 만들어서 개발할 수도 없었다. 이후 node가 만들어지고 서버에서 js를 사용할 수 있게 되면서 require 함수와 module.export를 쓰는 CommonJS 방식의 모..

[사이드 프로젝트] fillsa 개발일지 005. 피그마로 리액트 코드 생성하기

어떻게 피그마를 코드로 변환할 수 있을까? 피그마 플러그인에서 react, code 등의 키워드로 검색해보았다. 그 중 다운로드 수가 제일 많은 플러그인 4가지를 추려봤다. 참고로 Figma to Code랑 Anima는 피그마에서 기본으로 추천해주는 플러그인 인 듯하다. 4개의 플러그인 중에서 무엇을 사용할지 결정하기 위해서 피그마에서 만든 아래의 동일한 페이지를 각각의 플러그인을 이용하여 React 코드로 변환시켜 비교해보았다. 1. Figma to Code 선택할 수 있는 옵션이 다양하지 않다. 지금 바로 필사를 시작해보세요. 필사는 외국어 학습에 유익한 방법입니다. 좋은 글을 따라 쓰면서 어휘력과 문장 구조를 향상시키며, 다양한 표현과 스타일을 배울 수 있습니다. 더불어 문화적 이해와 자극을 받아 ..

[사이드 프로젝트] fillsa 개발일지 004. 피그마로 목업 만들기

목업 만들기 목업을 제대로 만들지 않고 리액트 페이지부터 만들면 나중에 수정할 거리가 많아질 것 같아서 목업부터 확실하게 만들고 개발을 시작하기로 했다. 피그마에서 목업만 며칠째 만들고 있는데 이쯤되면 내가 개발자인지 디자이너인지 정체성 혼란이 오기 시작한다. 아무나 구경할 수 있도록 피그마 링크를 공개 상태로 해두었다. 자주 사용하는 피그마 기능 웹 디자이너는 아니지만 3번의 ssafy 프로젝트와 갈아엎어진 n번의 토이 프로젝트를 통해 터득하게 된 유용한 피그마 기능 몇 가지를 소개해보려고 한다. 1. 컴포넌트 공통적으로 자주 사용해야하는 디자인 요소는 컴포넌트로 만들어서 재활용하면 매우매우매우 편하다. 예전에 컴포넌트 기능을 잘 몰랐을 때는 헤더 디자인이 수정되면 복붙해놓은 모든 헤더들을 일일이 변경..

[사이드 프로젝트] fillsa 개발일지 003. 로고 만들기

무료 로고 제작 사이트 구글링해서 제일 상단에 나온 로고 제작 사이트 3가지, Canva, Wix, logomaster에서 로고를 만들어보았다. 1. Canva로 로고 만들기 canva는 여러가지 로고 템플릿 중에서 선택하여 색상이나 글자, 글꼴 등을 변경하는 방식으로 로고를 만들 수 있다. ai가 생성해주는 로고가 아니다보니 canva를 사용하는 다른 사람들과 로고가 겹칠 수 있다는 단점이 있지만, 세부적인 디테일을 즉석해서 수정할 수 있다는 점이 편리했다. canva 로고 템플릿을 이용하여 로고를 만들어보았다. 서비스명 'fillsa'의 앞글자 'f'가 깃대가 달린 펜 모양과 비슷하게 생긴 것이 포인트이다. 2. Wix로 로고 만들기 Wix는 서비스명을 입력하면 여러가지 폰트와 아이콘들을 조합하여 로..

[사이드 프로젝트] fillsa 개발일지 002. 프로젝트 생성하기

Github Repository 생성하기 간단하게 README 파일만 추가하여 repo를 생성했다. Spring 프로젝트 생성하기 Spring Initializr로 프로젝트 생성하기 Spring initializr에서 편리하게 Spring 프로젝트를 생성하여 다운받을 수 있다. Dependencies는 우선 Spring Web, Spring Data JPA, Lombok만 추가하였다. (캡쳐 화면상에서는 보이지 않지만 packaging 방식은 jar이고, java 버전은 17로 했다.) 다운받은 Spring Project를 압축을 풀어서 로컬 git 레포에 넣는다. 단, main 브랜치에서 dev-be 브랜치를 생성한 후에 파일을 넣었다. 만일 main 브랜치에 spring 프로젝트를 먼저 넣어준 이후에..

[사이드 프로젝트] fillsa 개발일지 001. 프로젝트 시작하기

서비스 아이디어 구상 요즘 아침마다 영어 필사를 하면서 간간히 영어 공부를 하고 있다. 그런데 곧 교재가 끝나간다. 교재가 끝나면 또 새로운 필사 교재를 찾아 구매하거나, 인터넷 상에서 필사를 할 지문을 직접 찾아다녀야한다. 이러한 귀찮음을 해결하기 위해서 영어 필사 지문을 생성해주는 서비스를 만들어봐야겠다고 생각하게 되었다.🙂 노션 페이지 생성하기 프로젝트의 컨트롤 타워 역할을 해줄 노션 페이지(notion.so/fillsa)부터 생성했다. 아직 전체적인 틀만 잡았고, 프로젝트를 진행하며 노션 페이지를 수정·보완하고 더 구체화할 것이다. 과연 배포까지 할 수 있을까...