악역영애의 개발일지

React 프로젝트를 시작해보자

그런데 이제 next.js 와 typescript 를 곁들인... !!

Node js 설치

프로젝트 생성 전에 무조건 node js 가 설치되어있어야 하므로 아래 커맨드로 node js 가 설치되어있는지 확인해보자

$ node -v

설치되어있지않다면, node js 홈페이지로 이동하여 Recommended For Most users 버전을 다운받자

https://nodejs.org/en

프로젝트 생성

내가 프로젝트 만들 위치로 이동하여 아래 커맨드를 실행시킨다

$ npx create-next-app react_next

아래와 같은 옵션을 선택해야하는데, 필요에 따라 선택하면 된다

√ Would you like to use TypeScript? ... No / Yes
 -> 나는 ts 쓸꺼라서 yes

√ Would you like to use ESLint? ... No / Yes
-> ESLint 쓸꺼라서 yes
참고로 ESLint는 간단히 말해서 야 이거 틀렷어!! 하고 난리쳐주는 고마운 검수자이다

√ Would you like to use Tailwind CSS? ... No / Yes
-> tailwind css안쓸래

√ Would you like to use `src/` directory? ... No / Yes
->소스 디렉터리 시작점을 app으로 할건지 

√ Would you like to use App Router? (recommended) ... No / Yes
-> 라우터 안쓸거라서 No

√ Would you like to customize the default import alias (@/*)? ... No / Yes
-> 안쓸거라서 No

src 안쓸때	src 쓸때	src 안쓰고 app router 안쓸때

프로젝트 실행

다운로드가 종료되면 아래 커맨드로 프로젝트를 실행시킨다

$ npm run dev

참고로  start 는 운영이고, dev는 개발이라고 보면 된다

run start 로 프로젝트를 실행시키면 로컬에서 소스코드 변경해도 바로 브라우저에 반영이 안된다
.next 로 만들어진 폴더의 내용물을 보여주기 때문이다

하지만 run dev로 실행시키면 소스코드 변경 시 바로 브라우저에 반영되므로 개발할땐 dev로 실행시키자

하지만 프로젝트 실행 시 다양한 이유로 실행이 안될수도있다.

나의 경우엔 node js 버전이 너무 낮아서 버전업이 필요한 상황이었다

$ npm run dev

> react_next@0.1.0 dev
> next dev

You are using Node.js 18.16.0. For Next.js, Node.js version >= v18.17.0 is required.

보면, 내가 설치한 node js 는 18.16.0 버전이지만, 요구되는 버전은 18.17 이다

nodejs 홈페이지 가보니까 20이 나와있는 상황이라 겸사겸사 다시 다운받았다.

node js 버전업 하는 방법이야.. 여러 방법이 있지만 나는 다 귀찮으므로 ㅋㅋㅋ

node js 홈페이지에서 다운로드파일 받고 실행시키면 알아서 버전업 된다

혹시 next: command not found 뜨면 npm install 해주고 실행하면 된다

호옥시!!! 그래도 안된다면 npm run dev 커맨드 실행하는 위치가 프로젝트 루트위치에서 실행하는게 맞는지 꼭 확인할것

프로젝트 확인

npm run dev를 실행하면 아래와 같이 표시될것이다

localhost:3000 부분을 클릭하면 브라우저가 열리고 react-next project가 보인다

여기까지 보인다면 프로젝트 설치  성공!

Android Studio Card Stack View

Android Studio 개발 시 아래 저장소의 yuyakaido CardStackView 를 import 하는데, dependencies 추가해도 안됐다

https://github.com/yuyakaido/CardStackView.git

해결방법

settings.gradle 에 아래 문구 추가

//기존
dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        mavenCentral()
    }
}

//수정
dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        jcenter() //추가
        maven{url 'https://jitpack.io'} //추가
        mavenCentral()
    }
}

평화로운 2023년의 어느날

중소기업에 취직하여 평화롭게 3년차 개발자를 향해 달리고 있던 2023년의 어느날, 

설날 명절선물로 빤스를 받고나서 이직생각이 들었다

이커머스 SM 회사였고 다양한 시도와 코드리뷰 문화를 만들어서 재미있게 회사생활하고 있었지만 

회사 재고로 남아있던 빤스를 받은순간... 정이 싹털렸다

갑자기 회사를 객관적으로 보게되면서

이렇게 발전 가능성없고.. 주어진일만 계속해서 하는 3년차 개발자..괜찮을까? 하는 생각이 들었다 

이직 준비

새로운 일을 도전해보고싶어서 이직을 준비했고 코딩테스트, CS를 열심히 공부했다

오랜만에 각잡고 취직현장에 들어서려고 하니 쉽지않았고 시장이 겨울이니 뭐니 했는데 다행히 중견기업으로 이직에 성공

대기업으로 분류되는 중견기업으로, 복지도 좋고 연봉도 괜찮았지만

실제로 6개월 넘게 다녀보니 직무자체는 중소기업이 더 재밌었던것같다

현 직장에서 프로젝트 PL을 맡으면서 개발보다는 현업담당자와 외주개발자와의 의견조율을 하며

DB, 인프라세팅을 하며 WBS관리를 하면서 매니징 역량은 늘은거같은데...

실제 개발 역량은 늘것같지 않아서 퇴근 후 공부를 하거나 토이프로젝트를 진행했다

퇴근 후 공부

퇴근 후 운동 및 공부를 하는건 진짜 헬이었는데, 하다보니 어느순간 익숙해졌다

특히 토이프로젝트를 진짜... 성심성의껏 공부하고 진행했다

AWS 서버에 무료 인스턴스를 올리고 github private 프로젝트를 jenkins 로 자동배포 하였고 사용스택은 아래와 같다

Back-End
- JDK 17
- Srping boot
- Spring Security
- JPA
- MariaDB

Front-end
- React
- Next.js

infra
- AWS linux
- Nginx

회사에서 이미 다 설정이 되어있었지만, 내가 처음부터 해나가는 과정은 생각보다 오래걸리고 내가얼마나 주먹구구식으로 회사를 다녔는지 깨닫게 해줬다

토이프로젝트이다보니, 참여율도 좋지않아서 프론트 react, next js 를 프론트작업자와 함께 공부했는데 너무 재밌었다

백단 질릴때는 프론트했다가.. 프론트 재미없을때는 백단 했다가 ㅎㅎ

원래는 실제 운영을 위한 사이트개발이었는데 시간 / 개발 / 수익 세가지를 모두 만족시킬수 없어서 프로젝트 종료중이다..

실제로  상업성을 띄는 사이트를 개발해보니, 회사에서 개발하던것과는 사뭇 달랐다

개발에 투자하니 시간이 많이 걸렸고, 그렇게 개발을 했더니 수익을 만족시킬 수 없었다..

만약 진짜로 사업을 한다면 프레임워크고 나발이고 최대한 가벼운 프로젝트로 빠른 수익성을 내는 개발을 해야겠다는 교훈을 얻었다. 실제로 어떻게 될지는 모르겠지만..

2023년을 마무리하며..

토이프로젝트와 회사일을 병행하면서 느낀점이 정말 많았던 해였고, 주택자금대출도 20%정도 상환했다

내년의 목표는 회사를 잘 다니면서 개인역량을 늘리는 것이다

2024년 목표

1. 1일1커밋
2. 알고리즘/코테 스터디
3. 개발서적 스터디
4. 다이어트
5. 주택대출상환 40%

건강을 챙기고!

돈도 잘 모으고!

공부도 열심히!

여러가지로 역량을 늘리는 한 해를 만들고 하반기쯤엔 다양한 기업에 지원해보고싶다 :)

@Component

개발자가 직접 작성한 class 전체를 Spring Bean 으로 등록

하위로 @Controller, @Service, @Repository 어노테이션이 있다

@Component
public class MyComponent {
// 클래스 내용
}

@Configuration

스프링에게 해당 클래스가 Bean 구성 Class 임을 알리는 어노테이션이다

즉, Bean 등록용 class로 사용할 수 있고 일반 메소드 또한 만들수있지만 주로 Bean 을 보조하는 역할을 한다

@Bean

외부 라이브러리 등 반환되는 객체를 Bean 으로 등록한다

쉽게말하면 @Bean 어노테이션을 사용하면 new ~ 로  생성해서 import 하지않아도 된다

스프링 간 객체가 의존관계를 관리하도록 하는 것에 가장 큰 목적이다

new 로 생성하면 생성자를 그득그득 붙여서 변경가능성이 있는데, Bean 을 사용하면 변경이 안되겠지

@Configuration //여기는 @Bean 등록 전용 class!
public class TestConfig {

    @Bean
    public MyBean myBean() {
      return new MyBean();
    }
    
    @Bean(name="myMethod")
    public MyBean myBean() {
      return new MyBean();
    }
    
    // @Bean 어노테이션이 없는 메소드
    public SomeConfiguration someConfiguration() {
      // 구성 정보 반환
      return new SomeConfiguration();
    }
}