123일차

멘토님과의 만남 이전 피드백을 받게 되었다.

1. 참여기업목록 채용공고 목록 등 긴급 수정

검색조건 선택, 엔터 누를시 바로 검색되게하기
selectbox <== onChange / 입력 <=== onKeydown / checkbox <== onclick

"입사지원하기, 공고찜하기, 쪽지문의하기 는 취준생(일반 회원 일때만 나오도록) 처리
<= 사용자 타입 Seesion 처리 혹은 사용자 타입 넘겨받아 히든 처리 하고 버튼제어"

멘토님이 직접 오시기전 약 5시간 정도 문제를 해결해야하는 상황에 놓이게 되었다.
이건 간단한 작업이지만 실무에서도 클라이언트가 요구하면 바로 바로 문제를 해결해주어야하는 상황이 있을 것이라고 생각된다.

1.1 체크박스 선택시 처리

멘토님은 JQuery기준으로 알려주셨지만 이번에는 순수 자바스크립트를 사용하였으니 해당 이벤트를 등록해보도록 했다.
방법에 대해서 고민하였으나 쉬운 방법이었다.
form을 선택하고 체크박스에 변화가 있을 때마다 form을 자동으로 제출하면 되는 것이었다.
아주 쉽다.

// 체크박스들을 선택합니다.
const checkboxes = document.querySelectorAll("input[type='checkbox']");

// form을 선택합니다.
const form = document.getElementById("filter-form");

// 체크박스들에 대해 이벤트 리스너를 등록합니다.
checkboxes.forEach(checkbox => {
    checkbox.addEventListener("change", function () {
        // 체크박스 상태 변화가 있을 때 form을 자동으로 제출
        form.submit();
    });
});

엔터키 누르는 이벤트도 비슷하다.
다른점은 검색 버튼이 아니라 seach input element가 엔터 입력을 받을시 이벤트가 발생하게 해줘야한다.
keydown이벤트로 엔터가 입력될 경우 이다. 아스키코드를 이용해서 엔터키의 번호로 입력해도 된다.

const search = document.querySelector("#search");
search.addEventListener("keydown", function (event) {
    if (event.key === "Enter") {
        const search = document.querySelector("#search");
        searchValue = search.value;

        const type = document.querySelector("#type");
        typeValue = type.value;

        const industryId = document.querySelector("#industry-select");
        industryValue = industryId.value;

        pageValue = "8";

        listView(searchValue, typeValue, industryValue, roundValue, pageValue);
    }
});

1.2 취준생만 버튼 보이기

여기서 문제점은 session등을 활용하거나 그냥 스프링 시큐리티를 활용하면 쉽게 해결 할 수 있을 줄 알았으나....
내가 굳이 굳이 비동기로 값을 가져와서 굳이 굳이 버튼을 동적으로 만드는 데서 문제가 발생했다.
스프링시큐리티로 처리하면 버튼이 없는 상태이다. 그래서 없는 버튼에 이벤트를 등록하려하면 문제가 발생하고 다른 데이터들도 못가져오게 된다.

1.2.1 서비스

restful api로 view에 설정을 돌려주는 과정에서 auth라는 값을 하나더 만들었다.
auth에 각 멤버의 권한 상태를 받고 해결하는 문제로 했다.

  @Override
    public Map<String, Object> getPostings(Integer[] industrIds, String[] experienceLevels, String[] educationLevels, String[]         employmentTypes, String type, String search, Integer page) {
        // 회차
        public Map<String, Object> getDetail(Integer postingId, Authentication authentic
        List<Industry> industryList = industryService.getIndustryList();

        String senderId = null;
        String auth = null;

        posting.setScraped(false);

        // 해당 계정이 좋아요눌럿는지와 로그인되어잇는지 체크
        if (authentication == null) {
            senderId = "notLogin";
            auth = "notLogin";
        } else {
            Scrap scrap = scrapMapper.scrapCheck(postingId, authentication.getName());
            if (scrap != null) {
                posting.setScraped(true);
            }
            auth = memberMapper.getAuth(authentication.getName());
            senderId = authentication.getName();
        }

        return Map.of("posting", posting, "industryList", industryList, "senderId", senderId);
        return Map.of("posting", posting, "industryList", industryList, "senderId", senderId, "auth", auth);
    }

1.2.2 view

매우 간단하게 해결했다. 만약 권한이 없다면 class에 d-none을 추가해서 안보여지게 했다.

 // 좋아요 상태 표시
// 찜 상태 표시
   const wishBtn = document.querySelector("#wish-btn");

 if (posting.scraped) {
     wishBtn.innerHTML = "<i class=\"fa-regular fa-star\"></i> 공고찜취소";
    wishBtn.classList = "btn btn-outline-danger";
 } else {
     wishBtn.innerHTML = "<i class=\"fa-regular fa-star\"></i> 공고찜하기";
     wishBtn.classList = "btn btn-outline-warning";
  }

      wishBtn.addEventListener("click", wish);
    const applicationBtn = document.querySelector("#application-btn");

     if (auth === "admin" || auth === "company" || auth === "recruiter") {
          applicationBtn.classList.add("d-none");
           wishBtn.classList.add("d-none");
           noteBtn.classList.add("d-none");
   }

2. 멘토님과의 만남

여러 것을 알려주셨다.

공부방향
현재 까지는 먹힐것이다.
계속 흘러왓기 때문에 운영한걸 뒤엎을순 없다고 하셨다.
js jquery sql문 공부--> 굉장히 중요하다.
필요한 데이터를 뱉어야한다.

컨트롤러단은 거의 복붙 수준이고 그 중간은 문제가 없다고 한다.

페이지에 필요한 것은 그걸 얼마나 잘던져주냐 문제라고 하신다.

만약 연월일만 보고 싶다면 포맷해서 보여줄수잇지만 연열월 스트링으로 보여주는 등의 쉽게 해결하는 방법이 있다.

데이터를 가공하기 쉽게 던져주는게 중요하다.

그래서 실제 실무에선 화면과 sql 80%이상이다라고 하셨다.

우리는 프로젝트에서 2~3개의 조인을 했지만 실무에서는 조인을 매우 많이하고 쿼리문이 1만줄이 넘어가는 일이 발생하기도 했다고 하신다.
sql열심히 공부할필요가잇다. sqld 자격증 딸려고 공부해보기를 추천하셨다.
하면서 공부가된다.

서브쿼리는 from절에만 작성하는 것을 추천하셨다.
퍼포먼스 속도 차이가 많다고 하신다.
select절 whwere절에 쓰는건 반비추
다른데는 그냥 비추라고 하셨다.

서브쿼리 from전에 잇는건 걔가 제일 먼저 처리되기 때문에 처리 속도가 빠르다.

날짜비교
날짜 변경시 스트링으로 바꿔서하는건 비추
애초부터 string으로 저장해서 비교하던지 날짜비교를 사용하던지 하라고 하셨다.

리액트와 뷰 꼭 공부하기
앞으로 대세가 될 조짐이 많다

국내는 뷰가 많이사용하고잇다.
뷰를 먼저 배워보긴
vue
node.js베이스하에서 돌아가는데 더 쉽다.

전자정부프레임어ㅡ 4.0
리액트 msa마이크로 소프트 아키텍트

와장창 올리면 한덩어리 중간에 에러 발생하면 서버가 멈춰버림.
msa사용하면 url을쪼개서 올리는것이다. 중간에 올리더라도 나머지는 러닝상태인 것이다.

이걸 알려면 ms 도커 쿠버네티스 이런걸 공부해봐야 한다고 하셨다.

공부할때 주의점 보고 멈추지말고 실제로해보기샘플해논거에 적용해보기

모바일의 경우 반응형웹을 만드는 경우가 많다.
플루터로 앱개발 다하고잇음.그런데 반응형웹이 대부분이다.

인터넷에 외래키를 설정하지 않는 다는 것을 주워들어 여쭤보았으나
외래키 설정하지 않는 것은 날라리 프로젝트이다.

외래키를 설정하지 않으면 쓰레기 데이터가 생길 수 있다. 무결성을 위해서 넣는것이 좋다.

신입을 위해서
스킬 언제든지 익히면 업이된다.

일에 대한 의지 나에대한의지가 중요하다고 하신다.
이것도 저것도 할수잇다고 떠드는데 이야기하는 뉘앙스가 나는 이정도 할 수 있다라고 으실으실대는데 속으로 웃으신다고 하신다.
결국 신입이 할줄 알아봣자 이다. 맞는 말이다.
면접에서 할수 있는 것을 어필하는 것은 맞으나 매너를 갖추고 이야기하는게 맞다.

모자라지만 이런 것들을 경험해 보았고 이렇게 말하면 진지하게 들을 수 있다고 하신다.

자기 pr을 많이해라
제일 간단하게 블로그 작성

블로그 도움많이 된다고 하신다. 의지가 다시 불타올랐따.

2023.07.24

많은 길을 지나가야한다. 더 강한 의지를 가져야 한다.