방방이네 블로그

게시판을 만드는것을 하던중 이렇게 간단한 게시판입니다 번호 제목 작성자 작성일 조회수 좋아요수

간단하게 구현하려고햇는데 이코드가 오류가 생겼었습니다.

  {Testlist.map((item, index) => {
                return (

                    <S.Container key={index}>
                        <S.Number>{item.number}</S.Number>
                        <S.Title>{item.title}</S.Title>
                        <S.Writer>{item.writer}</S.Writer>
                        <S.Date>{item.date}</S.Date>
                        <S.Views>{item.views}</S.Views>
                        <S.Like>좋아요</S.Like>
                    </S.Container>
                )
            })}

오류코드는 {item.date} 라는 변수를 사용하는구간인데 

item에 date가 new Date() 객체를 사용해서 date객체를 만든것을 그대로 사용 하려고 해서 그렇습니다.

이것을 해결하는방법은

           {Testlist.map((item, index) => {
                const formattedDate = item.date.toLocaleString();
                return (

                    <S.Container key={index}>
                        <S.Number>{item.number}</S.Number>
                        <S.Title>{item.title}</S.Title>
                        <S.Writer>{item.writer}</S.Writer>
                        <S.Date>{formattedDate}</S.Date>
                        <S.Views>{item.views}</S.Views>
                        <S.Like>좋아요</S.Like>
                    </S.Container>
                )
            })}

데이트 객체를 글자로 바꾼후에 jsx문법에 맞추어 작성해야한다는것을 알았습니다

오늘 열심히 작업한 부분은 달력에 들어가는 예약확인들에 갯수와 길이를 수정하는 작업을 했습니다

멘토들에 예약은 3개이상 나오게되면 좁은 달력칸에서는 3개이상 나오면 UI가 깨져  더보기 버튼으로 표시를 하였고

아래의..코드는 멘토들의 이름들이 길이가 정해져있지않기에 멘토들의 이름을 영어일때는 8자 한글일때에는 5자로 기준을 만들어

..표시를 했습니다...

if (mentos) {
    return (
        <S.DayCell key={index} $empty={day === null} onClick={() => openModalHandler(day)}>
            {day !== null ? (
                <>
                    {day}
                    {mentos.map((name, idx) => {
                        const mentoReservation = `${name}멘토 예약`
                        let EngChekck = /[a-zA-Z]/; //영어
                        let KorCheck = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/; //한글

                        let longname;

                        if (EngChekck.test(name)) {
                            longname = name.slice(0, 8) + "..." + "멘토 예약"
                        } else if (KorCheck.test(name)) {
                            longname = name.slice(0, 5) + "..." + "멘토 예약"
                        }
                        if (idx < 3) {
                            return (
                                <>
                                    {
                                        mentoReservation.length < 13 ?
                                            <S.CellText key={idx}>
                                                {mentoReservation}
                                            </S.CellText> :
                                            <S.CellText key={idx}>
                                                {longname}
                                            </S.CellText>
                                    }
                                </>
                            )
                        } else {
                            return (
                                <S.OverCellText key={idx}>
                                    더보기 {mentos.length - 3}개
                                </S.OverCellText>)
                        }

                    })}

                </>
            ) : null}
        </S.DayCell>
    );
}

달력에 표시는 잘되는데

데이트객체는 년월 일시 이고 월은!!!!!!!! 0부터 시작해서 +1을 해줘야 합니다

영어와 한글을 처리하는방법은 정규표현식을 활용합니다.

let EngChekck = /[a-zA-Z]/; //영어
let KorCheck = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/; //한글

정규표현식을 사용할땐 슬레시로  // 해당 영역을 정하고 

[] 이 안에다가 문자를 작성한다 ~  a-z A-Z ㄱ-ㅎ 이렇게 범위를 정할수가 있습니다

정규표현식으로 만든객체에

EngCheck.test(name) 이런식으로 test()메소드에 파라미터를 체크할수있습니다 이값을 불리언 값이기에  조건문을 활용하면 더좋습니다.

앱과 웹을 사용하다보면 칸을 크게 넘는 문자들을 ... 으로 처리해주는것들으 봤어서  제가 작성하 ㄴ코드에는 그런기능이없어서 그기능을 만들었습니다 

정규표현식으로 만든 저 부분을  영어는8자 한글을 5자를 기준으로 넘을시에는 아이디를 ... 으로 표시했습니다.

if (EngChekck.test(name)) {
    longname = name.slice(0, 8) + "..." + "멘토 예약"
} else if (KorCheck.test(name)) {
    longname = name.slice(0, 5) + "..." + "멘토 예약"
}

여기서 사용한 슬라이스는 문자열을 잘라내는 함수입니다 ㅎㅎ

파라미터로는 시작과 끝을 적어서 문자열을 원하는 길이만큼 잘라냈고 "..."과 이어 붙여 만들었습니다

멘토님이 알려준 Ellipsis (생략) 속성

Ellipsis라는 속성이 css에있습니다

이렇게 길이가있는곳에 text-overflow: ellipsis; 라는 속성주게되면 그길이를 넘어가게되면 ... 생략된다..

이것도모르고 바보처럼 열심히한 9월7일이였습니다

새롭게 알게된사실들

내코드에서 가장큰 문제점은항상 한파일에 모든것을 때려박는듯한 방식의 코딩이다였다.

리액트는 리액트 스럽게 사용해야하며 분리된 컴포넌트를 관리하고 컴포넌트들을 관리해야하는데 그런것들없이 하고있었다.

커스텀훅을 사용하며 코드들을 분리하는 습관을 들이고 재사용성을 높이는 컴포넌트를 만들어보자 

앞으로 내가 해야할일은

내코드에서 사용하는  재사용이 가능한 Date()객체는 전부하나로 통일시키며

캘린더또한 재사용이 가능하게 너비값을주게되면 거기에맞추어 정사각형으로 만들어지게 해야겠다.

역시 우매함의 봉우리 

부족한점

자바 개발환경을 만지는데 10시간이 걸렸다.

이유인즉슨 자바 프로젝트를 만든후

패키지안에 .java파일에  최상단에 자바 내장메소드를 불러오는데 오류가 뜨는 문제였다

알게된점

java 실행환경은 확실히 python과는 전혀 다르다 

python의 경우 인터프리터로 작동이되고 자바는 컴파일을 통해 기계어로 변환되어 실행된다는점이였다

이게 이렇게 힘들줄은 상상도못했다

최상단에 import javax.swing.JFrame

이라는 문구를 작성하여 

JFrame 객체를 가져다가 쓰려고했다

하지만 내가만든 프로젝트에서는 적용이 안되었다 분명 나는

JDK 17.0.7 이클립스가 되어있고 자바프로젝트를 만드는 행동을 했는데도 불구하고말이다

원인은!! 각각의 자바프로젝트는 해당 프로젝트에서 사용할 JRE를 설정 할 수 있었다.

부족한점 :

1. - 기본적인 자바에대한 지식을 쌓아야한다.
2. - 그다음이 스프링이다
3. - 프로그래밍 자바 언어에대한 습득이아닌 이클립스의 사용방법과 자바프로젝트가 어떻게 형성되고 실행되는지 알아야한다.
4. - 프론트엔드 지식쌓기

스스로 시도해본 것들 :

1. 이클립스 설치 
2. 자바기본문법  검색
3. 자바 강의 보기
4. 바닐라자바스크립트로 리액트 컴포넌트 따라하기!

알게된 점 :

1. 자바는 JDK 를 설치해야한다  JAVA SDK 인데 자바 개발을 하기위한 툴킷을 모두 모아둔것이다
2. SE 버전은 표준버전 EE버전은 기업용 버전이다 난 SE버전을 설치하면된다
3. 이클립스 IDE같다 자바가 기본적으로 클래스기반의 완전한 객체지향 프로그래밍언어라고 알았다.
4. 이클립스를 사용하다보니 오히려 자바의 기본을 빼먹는걸 알았다.
   * 이클립스 없이 텍스트 편집기로 자바 헬로월드를  실행하는 방법을 알고싶다!
5. vsc같이 단순한 IDE쓰다가... 이클립스 너무어렵다..
6. 자바는 프로젝트를만들때 그안의 요소가 대,소문자도 구분이있고,. 너무 어렵다.. 이걸 이클립스가 대신 해주는거같다.
7. 클래스>패키지>프로젝트 이런개념인거같

회고 :

오늘은 html과 css로 당근마켓을 클론하는과제였다 하지만.  단순하게 여러페이지들을 이미 클론 할수있는상태였다.

클론말고 제미있는 걸 하기위해 

자바스크립트를이용 리액트컴포넌트처럼 사용할수있는걸 만들어보자고 팀원이 제시했고