코드캠프 부트캠프 1일차-2

개발일기·2022년 1월 10일
0

JSX란?

React의 CSS(CSS-IN-JS) - emotion

이렇게 태그에 의미를 부여할 수 있어서, 태그만 봐도 무엇을 의미하는지 예상을 할 수 있다. 또한, className을 입력하지 않아도 되기 때문에, 코드 길이기 짧아져 가독성이 좋아진다다.

CSS-IN-JS활용

다음은 직접 작성한 코드

export default function emotionPage() {

return (
    <Wrapper>
        <LargeBox>
            <Title>게시물 등록</Title>
            <User>
                <Writer>
                    <SmallTitle>작성자</SmallTitle>
                    <InputContent placeholder ="이름을 적어주세요."/>
                </Writer>
                <Password>
                    <SmallTitle>비밀번호</SmallTitle>
                    <InputContent type="password" placeholder ="비밀번호를 적어주세요."/>
                </Password>
            </User>
            <PostName>
                <SmallTitle>제목</SmallTitle>
                <InputContent placeholder = "제목을 작성해주세요."/>
            </PostName>
            <PostContent>
                <SmallTitle>내용</SmallTitle>
                <InputContent placeholder ="내용을 작성해주세요."/>
            </PostContent>
            <br/>
            <Address>
                <SmallTitle>주소</SmallTitle>
                <Search>
                    <AdNum>12345</AdNum> 
                    <SearchAdNum>우편번호 검색</SearchAdNum>
                </Search>
                <Blank></Blank><br/>
                <Blank></Blank>
            </Address>
            <br/>
            <YouTube>
                <SmallTitle>유튜브</SmallTitle>
                <InputContent placeholder ="제목을 작성해주세요."/>
            </YouTube>
            <br/>
            <Picture>
                <SmallTitle>사진 첨부</SmallTitle>
                <PictureSetting>
                    <PlusImages>+<br/>Upload</PlusImages>
                    <PlusImages>+<br/>Upload</PlusImages>
                    <PlusImages>+<br/>Upload</PlusImages>
                </PictureSetting>                    
            </Picture>
            <MainSetting>
                <SmallTitle>메인 설정</SmallTitle>
                <SelectMainSetting>
                    <input type ="radio" name="mainsetting"/> 유튜브
                    <input type ="radio" name="mainsetting"/> 사진
                </SelectMainSetting>
            </MainSetting>
            <SignUp>등록하기</SignUp>
        </LargeBox>
    </Wrapper>
)

}
최대한 직관적으로 변수명을 만들고자 했지만 쉽지가 않았다. 역시 이름정하는게 가장 어려운것같다. 좀 더 센스있고 알아보기 쉬운 이름을 지을 수 있게 책이라도 읽어야하나...

profile
개발자가 꿈이에오

2개의 댓글

comment-user-thumbnail
2022년 1월 10일

저도 이름 정하는건 정말 어려운거같아요 힣
충분히 센스있고 직관적인 이름을 잘 생각해내실거에요 홧팅!!

1개의 답글