엠마의 개발공부일지

FCM을 활용한 web push기능 구현

Emmababy — Thu, 6 Apr 2023 14:59:29 +0900

스프링 - 리액트 프로젝트에서 웹으로 push알림 보내기

FCM이란?

- Firebase Cloud Messaging(알림push요청을 fcm서버로보내면, 해당 토큰을 가진 유저에게 알림발송)

- 실시간 알림을 받을 수 있기때문에, 웹사이트에서 활용하기 좋음

- 웹 이외에도 IOS, Android에서도 사용가능(사용방법이 각각 조금씩 다름)

FCM을 사용하는 이유?

- 비슷한기술로 SSE를 많이 사용하지만, SSE는 단방향통신만 가능하고 FCM은 양방향가능! 추후 확장가능성을 생각할때 - 양방향 기술로 써보고 싶었음.

전체흐름

- FCM은 여러 언어로 구현할 수 있지만, 이 포스팅은 프론트-TS, 백엔드-Springboot기준으로 작성

1. FCM사이트에서 프로젝트를 생성하고, 토큰을 요청한다

2. FCM토큰을 리턴받는다

3. 토큰을 백엔드로 보낸다(이번플젝에는 로그인하면 프론트로부터 받는것으로 설정함)

4. 토큰은 서버측에서 관리해야하므로 DB에 저장한다

5. 알림발송해야할때 DB에서 토큰을 꺼낸다

6. 메시지객체에 토큰과 내용을 포함하여 FCM으로 보내면

7. FCM에서 토큰 주인에게 바로 web push알람을 보내준다

- FE는 FCM사이트(https://console.firebase.google.com/u/0/) 코드스니펫을 받아 fcm으로 토큰요청이 가능!

- BE는 FE로부터 토큰을 건네받았다고 가정하고 아래의 설명 진행!

부연설명

0. FCM을 시작하기위해선 해당 사이트(https://console.firebase.google.com/u/0/)가입 후 프로젝트를 생성해야함.

(하나의 아이디로 프로젝트만들고, 협업을 원하는사람을 초대하는방식으로 진행)

- FE : 프로젝트설정 > 일반 > 내 앱 메뉴에서 자바스크립트 코드를 복사하여 FCM으로 토큰요청하여 받는다

- BE : 프로젝트설정 > 서비스계정 탭> 자바코드(FCM초기화 요청코드)를 복사하여 빈으로 등록, 새 비공개키(json파일)를 다운받아 프로젝트에 ‘resources’경로 바로아래에 저장한다

백엔드에서는 프로젝트 실행할 때마다 FCM 초기화요청을 FCM서버로 보내야한다. 그래야 그 다음부터 메시지 발송요청을하면 정상적으로 발송됨

1. 초기화 요청 코드 적용

- 초기화는 프로젝트를 실행할때 한번만 실행되면 되므로 설정파일(Webconfig)에 빈으로 등록했다.

- 초기화할때는 나의정보가 포함된상태로 fcm서버에 요청이되는방식인데, 이 정보는 비공개키(json파일)에 포함되어있다. - 비공개키(json파일)의 경로를 변수에 저장해두고, 그안에 내용을 InputStream을 이용해 읽어올 수 있도록 한다

- FirebaseOption부분은 정해진 양식이나, FCM 사이트에서 생성한 프로젝트가 하나일경우 .setProjectId 메서드는 생략해도된다.

- 초기화부분에서 예외가 발생할 수 있으므로 무조건 try-catch로 예외처리를 한다(없으면 에러남!)

    @Value("${com.blackdragon.fcm.path}")
    private String fcmPath;
    
	@Bean
    public FirebaseApp initializer() {
        try {
            log.info("initialized start");
            InputStream inputStream =
                    new ClassPathResource(fcmPath).getInputStream();

            FirebaseOptions options = FirebaseOptions.builder()
                    .setCredentials(GoogleCredentials.fromStream(inputStream))
                    .setProjectId("heytossme2")
                    .build();
            log.info("initialized completed");
            return FirebaseApp.initializeApp(options);
        } catch (Exception e) {
            log.error("error message = {}", e.getMessage());
        }
        return null;
    }

2. 메시지발송 메서드를 정의한다.

- 나는 서비스단에 해당 메서드를 정의했다.

- 포인트는 발송되는 이부분! send메서드에 FCM에서 정해놓은 Message형식을 넣어주면 끝!

FirebaseMessaging.getInstance().send(message);

- Message의 형식에는 사이트(https://firebase.google.com/docs/cloud-messaging/send-message?hl=ko#java)에서 여러활용방법을 찾아볼 수 있지만, 나의경우에는 가장 기본인 알림내용 + FCM토큰만 포함했다.(필수이기도하고)

- 그리고 알림내용은 WebPushConfig 객체에서 필요한부분만 추가(알림타이틀, 내용) 했다.

- 만약 알림을 보낸내역을 따로 DB에 저장한다면, 발송완료 후 예외가 터지지않을경우에 저장해주면 된다(아래코드참고)

public void sendPush(NotificationRequest request) {
    log.info("request : " + request.getRegistrationToken());
    WebpushConfig webpushConfig = WebpushConfig.builder()
            .setNotification(new WebpushNotification(request.getTitle(), request.getBody()))
            .build();

    Message message = Message.builder()
            .setWebpushConfig(webpushConfig)
            .setToken(request.getFcmToken())
            .build();

    for (var app : FirebaseApp.getApps()) {
        log.info("app list = {}", app.getName());
    }

    try {
        String response = FirebaseMessaging.getInstance().send(message);
        log.info("response : " + response);
    } catch (FirebaseMessagingException e) {
        log.error("fcm을 통한 메시지 push 발송 실패");
        log.error("error code : " + e.getErrorCode());
        log.error("error message : " + e.getMessage());
    } catch (Exception e) {
        log.error("error : " + e.getMessage());
        for (var i : e.getStackTrace()) {
            log.error("error : {}", i);
        }
    }

    Notification notification = Notification.builder()
            .message(request.getBody())
            .type(request.getType())
            .readOrNot(false)
            .item(request.getItem())
            .member(request.getMember())
            .build();

    notificationRepository.save(notification);
}

3. 해당 메서드 호출

- 이제 필요한 시점에 아래와같이 sendpush메서드를 사용하면 된다

- buyerPush - 이 객체에는 알림을 보낼때 필요한 모든정보를 담아두었다.

notificationService.sendPush(buyerPush);

트러블슈팅

1. Default Error가 발생하는경우

- FCM 프로젝트가 1개일땐 자동으로 Default로 지정, 여러개일땐 각각의 프로젝트id로 지정해줘야하는데 제대로 Initializing이 안되었을 때
- 알림을 받는사람의 토큰값을 잘못저장해놓고 보냈을 때
- 토큰값이 비어있을때

2. 메시지 발송 실패
- 발송되는 메시지의 형태를 갖추었다면 특이 에러는 발생하지 않음
- 만약 fcm토큰이 사용 불가가 된다면 아래와 같은 에러 발생

3. FCM token의 특징
- FCM토큰은 만료기간이 없음
- FCM토큰 사용이 불가한 경우는 FCM프로젝트를 삭제했거나, 현재 사용하는 프로젝트로 부터 받은 private key가 아닌 다른 프로젝트의 키를사용하지않는경우 ⇒ 기기 별로 토큰이 발급 되기 때문에, 아무런 생각 없이 기존 토큰을 쓰는 경우가 있음(=나))
(또는 기존 다른 프로젝트에서 발급 받은 FCM토큰을 교체하지 않고 사용하는 경우
- FCM 토큰은 기기별 로 발급 됨

4. 비공개키(json파일) 경로
- 로컬환경에서 이 파일을 불러오는경로와, 배포환경(AWS, Azure같은..)에서 불러오는 경로는 다름!ㅠㅠ 나의경우는 아래와같았음
- 로컬 : path: src/main/resources/firebase-service-account.json
- 배포환경 : path: file:/home/runner/work/project-BE/project-BE/src/main/resources/firebase-service-account.json

다 하고나서보니 정말 간단하고 이렇게 심플하지만..

앱푸시는 레퍼런스가많지만, 웹푸시는 많이 없었다ㅠㅠ..

그나마 웹푸시에 관해 포스팅된글에는 어떤게 필수이고 선택인지에대한 정보가 아쉬워서

필수인것 위주로 작성해보았다.

나처럼 오래 삽질하지말고, 빠르게익혀서 빠르게 적용하고 다음을 향해 나아가는분이 있길... 바란다

Swagger - 프로젝트 문서화 하기

Emmababy — Fri, 20 Jan 2023 18:56:15 +0900

새하얗게 까먹어버렸기때문에

블로그에 박제해 본다

1. Swagger 라이브러리 추가

    implementation 'io.springfox:springfox-boot-starter:3.0.0'
    implementation 'io.springfox:springfox-swagger-ui:3.0.0'

2. application.yml에 설정 추가

=> 스프링MVC와 Swagger를 매칭해 주기 위함

  spring:
    mvc:
      pathmatch:
        matching-strategy: ant_path_matcher

3. Swagger 설정파일 추가

@Configuration
@EnableSwagger2
public class SwaggerConfig {

    @Bean
    public Docket api() {
        return new Docket(DocumentationType.SWAGGER_2)
                .select()
                .apis(RequestHandlerSelectors.any())
                .paths(PathSelectors.any())
                .build().apiInfo(apiInfo());
    }

    private ApiInfo apiInfo() {
        return new ApiInfoBuilder()
                .title("title")
                .description("description")
                .version("1.0")
                .build();
    }
}

4. 서버 실행 후 http://localhost:8080/swagger-ui/index.html 주소에서 swagger페이지 확인가능

Swagger페이지 커스텀하기

1. 단순 Error API없애기

API목록중에 내가 만들지않은 Error API가 있을것이다. 그것을 안보이게 하고싶으면 아래의 내용을 참고한다.

- Swagger 설정파일에서 apis부분을 any()가 아닌 내 프로젝트명으로 바꿔준다(자바 아래의 패키지명)

(error api는 내 프로젝트가아닌 spring단에서 만들어진 api이기때문에, 내 프로젝트에서 만들어진것만 쓰겠다는 의미)

    @Bean
    public Docket api() {
        return new Docket(DocumentationType.SWAGGER_2)
                .select()
                .apis(RequestHandlerSelectors.basePackage("com.emma_dev.ohguohgu"))
                .paths(PathSelectors.any())
                .build().apiInfo(apiInfo());
    }

2. 특정 경로의 API만 가져오고 싶은경우

- path부분에 any()가 아닌 ant()메서드를 사용하여 원하는 경로만 보이게 설정 가능

- 나만 보고싶은 api가 있는경우 설정값을 다르게하여 노출이 안되게 할 수 있다.

    @Bean
    public Docket api() {
        return new Docket(DocumentationType.SWAGGER_2)
                .select()
                .apis(RequestHandlerSelectors.basePackage("com.emma_dev.ohguohgu"))
                .paths(PathSelectors.ant("/admin/**"))
                .build().apiInfo(apiInfo());
    }

3. 각 API에 부가설명 붙이기

각 API 맨 오른쪽에 회색글씨로 API메서드 명이 써있는데, 이 부분을 API에 대한 설명으로 교체할 수 있다

부가설명 없음

부가설명있음(편안)

API에 @ApiOperation을 추가하여 부가설명을 붙일 수 있다.

아래와같이 각 API명과, 추가 설명을 붙이고싶다면, @ApiOperation 어노테이션에 notes키워드를 추가해주면 된다

이런식으로 구현 못해놓고 얼렁뚱땅 넘어가면 안된다(ㅠㅠ)

4. 파라미터로 넘어오는 인자에 대한 설명을 붙이고 싶을때

- 입력해줘야하는 인자의 형식이라던가 설명이 필요할때는 해당 파라미터앞에 @ApiParam어노테이션을 추가하여 value를 입력해준다.

2022년 회고 : Break time

Emmababy — Sun, 1 Jan 2023 15:57:29 +0900

⛔ 재정비 타임

올해 최고의 사건은 아무래도 퇴사 후 각잡고 공부를 시작한 것이다.

회사다닐때 내가 뭘 알고 뭘 모르는지 정말 모르겠어서 고민이 많았다. 체계적인 공부를 하며 맘껏 질문하고 제대로 공부해보는 시간을 갖고싶었다. 당시 다니던회사에서는 백엔드를 해볼수있는기회가 전혀없었고, 계속 다른방향으로 가던터라 성장의 기회를 잡기어려웠기때문에 지금이라도 공부해서 진짜 내 자리에 찾아가고싶다는 열망이커서 퇴사를했다.

여러 부트캠프를 알아보다가, 시간에급급해 빠르게 밀어붙이기보다는 커리큘럼이 괜찮은 과정을찾아보다가 제로베이스와 함께하게되었다. 6개월의 과정중 현재 4개월을 채운상태이고, 이 순간 드는생각은 '커리큘럼이 진짜 괜찮다는것'.

궁금했던것들이 아주 체계적이고 꼼꼼하게 짜여서 수업영상으로 제공된다. 공부를하면서도 이것만해서 될까?싶은 의문이 전혀들지않아서 좋았다. 이 과정을 다 따라가는것만으로도 충분할것같아서 마음이 놓인달까. 물론 따라가는것자체가 힘들긴하지만... 그건 내가해야할 몫이니깐 일단 따라가는중이다

앞으로 남은기간 2달. 프로젝트를 아주 지겹도록 해야하는기간이다.

' 이렇게 계속하다보면 회사가서 덜 떨리지않을까?

여러가지를해볼테니 해본것중 비슷한거를해야하는상황이오면 땀이 덜나지않을까?

구글링해서 착착 찾아서할줄아는 내가되지않을까? '

이런 내가 되길바라며 오늘도 프로젝트 진행중

내 마음을 돌봤던 시간

2022년 1월 1일, 나의 다이어리에 적혀있던 문구는

'내 마음이 어땠는지 살펴보며, 나를 챙길 줄 아는 내가 되길 바란다' 였다.

나는 원활하고 무탈하게 하루하루를 보내는걸 아주 많이 선호하기때문에, 내가 좀 손해보더라도 그게 맞다고 생각한다면 묻고 go! 하는 경향이 아주 크다. 그러다보니 나를 못챙기는 상황이 꽤나 많았는데, 그럴때마다 내탓을 했던것같다.

가끔 실제 상황보다 더 크게 걱정하고, 그 사건에 마음이 휘둘리는게 맘에 안들어서

일기장에 정리해보며 마음을 다 잡으려고 했는데 올해는 그 연습을 잘 해냈던것같다.

그 연습과정에서 책의 도움을 아주 톡톡히 봤다. 나에게 독서란 매년 1월에 세우는 목표에 불과했지만, 우연히 만난 책 한권이 내 마음을 평온하게 도와줬다. '나만 이렇게 생각했던건 아니구나, 이렇게 느끼는게 이상한게 아니었구나'등등 너무 사소해서 주변에 말할필요을 못느낀것들, 그리고 궁금했던 것들을 다른사람들은 어떻게 생각하고 살아가는지 알게되서 좋았다.

이래서 사람들이 책읽느라 시간가는 줄 모른다고하는걸까? 물론 난 책읽느라 시간가는줄 잘 알아서(?) 그 정도의 경지는 모르겠지만, 가끔 마음이 지치고 힘들땐 책으로 도망쳐 보겠다고 결심했다.

~~+) 읽고 싶은 책 리트스가 생긴것은 덤~~

‍♀️ Reboot Time

회사를 퇴사하던 8월즈음, 난 무기력증에 시달렸다.

무언가를 할 힘은있지만 할 마음이 없는것. 이게 무기력증이라고한다.

회사에 도움이 못된다고 생각했던 나에게 무기력증이 왔었던것이다.

회사그만두고 공부를 시작하기 전에 돈쓰는것도 재미없다는것을 느낀나는 이 사태의 심각성을 느끼고 결단을 내렸다.

'강제성이 있어서 해내야만 하는것'

'하루이틀이아니라 공부하는 내내 할수있는것'

'하지만 공부에 지장을 주지않을정도의 약간의 노동'

이 모든것을 충족하는건 아르바이트라고 결론을 내렸다.

대학생 때 이후로 아르바이트는 처음이라 너무떨렸지만, 뭐라도 해서 움직이지않으면 갯벌에 묻히듯이 내 스스로에게 잠식될것만 같아서 필사적으로 열심히 다녔다.

주중에 조용히 공부하다가 힘들고 지칠때쯤 주말이온다. 그럼 잠깐 알바가서 열심히 일하고 오면 일상의 균형이 맞다는생각이 든다.

내가 의도한대로 사람들과 말하며 활발하게 일을하니 몸은힘들었지만 꽤나 즐겁다. 즉각적으로 사람들의 피드백이오니까 속이 후련하달까..? 코딩과는 다른 결의 일이라 신선한느낌이다. 그래도 알바할때마다 느끼는건, 진짜 내 일을 하며 즐거움을 느낀다면 몇배나 더 즐겁겠다..! 집가서 열공해야지!! 이런느낌! 얼마나 좋은 선순환인가

이사

운좋게 내가 원하는 위치의 보금자리로 이사하게되었다.

집순이인 나는 집이주는 안정감이 중요한사람이다. 이전 집보다 더 크고 생활이 편한집이라 너무만족스럽다.

나도 나지만 우리 강아지가 이동네를 좋아하는것같아서 너무좋다

올해 봤던 드라마중에 '작은아씨들'에서 이런 대사가 나온다

'좋은 집에서는 어떤 힘든일이 있어도 다시 일어날 힘이생긴다'는것!

새로 각잡고 시작하는공부가 생각보다 더 힘들고 고되지만,

이 집에서 마음의 안정을 찾은 나는 다시 잘할수있다는 근거없는 자신감이 생겼다

2023년에는 좀 더 나아진내가, 좀 더 좋은 회사에 둥지를 틀었으면 하는게 가장 큰 바람이다.

요즘들어 더 느끼는건데, 아무리 지지고볶는 회사생활이라지만

소속된곳이 없는것보다는, 내가 회사안에서 성장하고 회사도 나로인해 더 성장한다면 그만한 보람은 없을것같다.

어려운 문제에 맞닥드릴때마다 숨이 턱턱막히지만, 해결해보겠다는 내 의지와 경험이 더 나은나를 만들어 줄거라고 믿는다. 대단한 사람이 살아남는게아니라, 존버만이 살길이라고 들었다! 지내보니 그말이 맞는것같다

앞으로 나의목표는 위대한사람이아니라 존버러이다!

thymeleaf수정 시, 서버 재시작하지않고 바로 반영하는 방법

Emmababy — Tue, 20 Dec 2022 11:49:48 +0900

thymeleaf코드만 수정하고나서, 서버 재시작없이 바로 반영하는 방법

1. maven => pom.xml / gradle => build.gradle에 devtools 의존성 추가

compileOnly("org.springframework.boot:spring-boot-devtools")

2. application.yml => spring 설정 아래에 devtools, thymeleaf관련 설정 추가

3. 설정화면(단축키 : ctrl + alt + s) -> build,Execution, Deployment > Compiler > Build project automatically 체크!

4. edit configuration에서 modify options 클릭 후 아래의 두 설정을 선택하여 적용!

5. 서버 재시작하면 타임리프 수정내용이 바로 적용되어 보이게 됨!

배열 | 이차원배열 회전시키기

Emmababy — Thu, 8 Dec 2022 00:17:47 +0900

▶주어진 2차원배열을 시계방향 90도로 회전시킨 결과를 출력하시오

▶Guide

- 그리려고하는 2차원배열의 형태를 머리속으로 그려놓고, 빈 2차원 배열을 만들어준다

- 기존배열을 읽어오는 2중 for문을 사용

- 한줄을 잡아서 어떤 인덱스로 변경되는지 파악해보고, 2중 for문안의 i, j 값을 활용하여 대입해주기

> 전체 배열길이 3과, 내부배열길이 5를 분리해서 생각하고

> 이중 for문을 그대로 만들어준다

> 이 안에서 쓰는 숫자는 i, j 뿐이다

> i, j 로 조합하여 만들어지는 숫자 (r) 하나만 계산하면 끝!

> 배열의 90도 회전으로인해 00자리에 있는숫자가, 02자리에 찍혀야 한다

> 여기까지는 i, j값만 잘 매칭하면 되서 수월하다

> 이과정에서 초보는 약간의 수고로움은 있을수밖에 없는것같다

> r 계산할때는 새로만들어질 배열을 머릿속으로 그려봐야 이해가잘된다

> 사용된 i, j, r을 새로운 이차원배열에 배치해서 대입해주면 끝!

> 확인을 위해 이차원배열로 출력해보기

    public static void main(String[] args) {

        int[][] arr = {{1, 2, 3, 4, 5}, {6, 7, 8, 9, 10}, {11, 12, 13, 14, 15}};
        int[][] arr90 = new int[arr[0].length][arr.length];

        for (int i = 0; i < arr.length; i++) {
            for (int j = 0; j < arr[i].length; j++) {
                int r = arr.length - 1 - i;
                arr90[j][r] = arr[i][j];
            }
        }

        for (int i = 0; i < arr90.length; i++) {
            for (int j = 0; j < arr90[i].length; j++) {
                System.out.print(arr90[i][j]);
            }
            System.out.println();
        }

    }

JSP파일에서 JDBC연결이 안될 때

Emmababy — Tue, 15 Nov 2022 15:35:41 +0900

현재상황

> java에서는 db에서 데이터를 잘 가져오지만, jsp파일에서는 아래와 같은 오류가 발생

원인

jsp에서 jdbc연결이 잘 안되는경우, 그 원인으로는 두가지로 추려볼수있습니다

Driver jar파일이 인식안되는경우
경로가 분명하지않아서 인식안되는경우

해결방법

1번의 경우

WEB-INF lib폴더에 본인이 쓰고자 하는 jdbc jar파일을 넣어줌

위의 조치로 안될경우 인텔리제이의 경우 project structure에 libraries와 artifacts에 jdbc jar파일을 추가해줌
위의 조치에도 안될경우 톰캣과 연관이 있을 수 있으니 jre파일 내부에 jar파일을 추가해줌

2번의 경우

상대경로형식 : String url = "jdbc:sqlite:sqlite.db";

절대경로형식 : String url = "jdbc:sqlite:C:/dev/sqlite/sqlite.db";

상대경로보다는 절대경로로 바꿔주기 > jsp에서는 상대경로를 인식못할수있음

참고이미지

현재 연결된 db파일이 어떤경로에서 가져오는지 정확히 확인하기

[오류해결] npm ERR! Missing script: "start" : npm start error

Emmababy — Thu, 14 Jul 2022 15:36:44 +0900

증상

npm create-react-app test 명령어로 새폴더에 리액트 환경을 만들고 나서

IDE에서 npm start 명령어 입력하면 아래와 같은 오류가 뜸

npm ERR! Missing script: "start"
npm ERR!
npm ERR! Did you mean one of these?
npm ERR!     npm star # Mark your favorite packages
npm ERR!     npm stars # View packages marked as favorites
npm ERR!
npm ERR! To see a list of scripts, run:
npm ERR!   npm run
npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\emma\AppData\Local\npm-cache\_logs\2022-07-14T06_28_06_983Z-debug-0.log

원인

내 컴퓨터에 설치된 create-react-app의 버전이 낮으면 일어날 수 있는 오류

그리고, 설치과정에서 내컴퓨터에 어느 경로에서라도 'npm create-react-app'명령어가 적용이되어야하는데,

무슨이유인지는 모르겠지만 일부 폴더에서만 저 명령어가 적용되었다. 그래서 다른경로에서는 저 명령어 적용이 안되었던 것

해결

create-react-app을 삭제하고, 재설치하고, 실행하면 된다

삭제 : npm uninstall -g create-react-app

재설치: npm install -g create-react-app

실행: npx create-react-app test(원하는이름작명)

에러가 났던 프로젝트는 저 명령어를 실행해도 똑같이 에러난다

그렇기 때문에 저 명령을 실행하고, 새로 프로젝트를 만들어야한다.

[Flexbox]

Emmababy — Thu, 31 Mar 2022 14:39:34 +0900

float - 이미지 / 텍스트를 배치

정렬방식
	가로, 세로방향 중심축 설정
	flex-direction : row, column, row-reverse
	컨텐츠가 가로범위를 넘어가면, 다음줄로 wrapping하는것
	flex-wrap : nowrap, wrap-reverse
이 둘을 합친거	flex-flow : row nowrap;
아이템 배치
	배치를 가운데, 오른,왼쪽으로 하는것(중심축배치)
	justify-content : flex-start, center, space-around, space-between
	중심축이아닌곳의 배치
	align-items : center , baseline(텍스트에맞춰 정렬)
	justify-content의 중심축아닌축의 간격 및 위치
	align-content : center, space-around, space-between


	컨테이너내부의 내용물의 순서를 바꿔준다
	order : 1
	컨테이너의 크기에따라 꽉차서 늘어나는 정도
	flex-grow : 1 (default : 0)
	컨테이너가 작아졌을때 어떻게 행동하는가 지정
	flex-shrink: 1 (default : 0)
	flex grow/shrink를 사용하지않았을때 설정된 %에 맞게 채움
	flex-basis: auto(%로 표현) => 각각의 item들 안에 %로 표시해준다
	align-self : 사이드축으로 배치를 옮길때
	center , baseline(텍스트에맞춰 정렬)

아이템이 수평으로 나아가므로 main axis는 수평축임

git clone받아서 다른컴퓨터에서 react 작업시작하기

Emmababy — Thu, 31 Mar 2022 10:31:19 +0900

집에서 프로젝트 시작했고,

회사에서 git clone받아서 수정하고 싶은상황

문제

폴더만들어서 거기에 git clone받았더니 이런 에러가 뜬다

PS C:\Users\emma\Desktop\study\react\TOY1_dogfoodshoppingmall> npm start
> coding_apple@0.1.0 start
> react-scripts start
node:internal/modules/cjs/loader:936
  throw err;
  ^

Error: Cannot find module 'react'
Require stack:
- C:\Users\emma\AppData\Roaming\npm\node_modules\react-scripts\scripts\start.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Object.<anonymous> (C:\Users\emma\AppData\Roaming\npm\node_modules\react-scripts\scripts\start.js:43:31)
    at Module._compile (node:internal/modules/cjs/loader:1103:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1155:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)
    at node:internal/main/run_main_module:17:47 {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'C:\\Users\\emma\\AppData\\Roaming\\npm\\node_modules\\react-scripts\\scripts\\start.js'
  ]
}

해결방법

clone을 다 받은상태에서 npm install 명령어를 실행해 줘야 package-json module이 업데이트 됨

그런다음 npm start해보면 잘 실행됨

[IntelliJ] JAVA 버전 바꾸는 방법(JDK버전)

Emmababy — Wed, 16 Feb 2022 16:13:20 +0900

기존에 8버전을 쓰다가 11버전으로 변경해야 하는 프로젝트가 생겨서 기록해보는 "버전변경방법"

인텔리제이에서 6곳을 변경해주면 된다

(5곳 - 버전변경선택 / 1곳 - 원하는 JDK선택)

Project Structure창 (단축키 : SHIFT+CTRL+ALT+S)

* Project

1) SDK 변경

2) Language Level 변경

* Module

3) Language Level 변경

* SDKs

4) 원하는 JDK를 선택한다(JDK는 한 폴더에 모아두는것을 추천!)

Project Setting (단축키 : CTRL+ALT+S)

* Build,Execution,Deployment -> Build Tools -> Gradle

5) Gradle JVM 변경

* Build,Execution,Deployment -> Compiler -> Java Compiler

6) Project bytecode version 변경

다시 구글링하는일 없게 이번에는 꼭 알아두겠다(다짐 )