재시민

나의 스펙

• 서울 중위권
• 학점 : 3.9
• 프로젝트 경험 : 웹 2, 앱 2, 임베디드 1
• 어학 : 오픽 IH
• 자격증 : none
• 인턴 : none,,

배경

11기 불합격을 하고 상반기 취업에도 실패했다. 프로젝트 경험이 역시나 부족하다고 느껴 12기에 다시 재도전을 하기로 했다.

진행방법

1. 지원서 및 에세이 작성
2. SW적성진단
3. 인터뷰

3가지 순서로 12기 모집을 한다.

지원서 및 에세이 작성

일반적인 회사 공고 자기소개서와는 달리 교육을 목적으로 하는 기관에서의 자기소개이기 때문에 내가 왜 싸피를 들어야하는가? 싸피가 왜 필요한가? 에 대한 고민이 필요한 것 같다. 따라서, 에세이에 싸피가 꼭 필요한 이유 등 어필할 수 있는 내용으로 채워야 한다고 생각한다.

질문 향후 어떤 SW 개발자로 성장하고 싶은지 SW 관련 경험을 토대로 기술하고, SSAFY에 지원하신 동기에 대해서도 작성 바랍니다.

에세이는

• 경험의 부재
• 싸피가 가져오는 이점

위 두 항목을 기준으로 작성했다.

SW적성진단

전공자 입장에서 SW적성진단은 코딩테스트를 치룬다. 비전공자들은 GSAT 같은 시험을 봤다고하는데 정확하지는 않다. 코딩테스트는 꾸준히 문제를 풀어보고 대중적인 알고리즘에 대한 기본 문제를 쉽게 풀 수 있다면 무리없이 통과할 수 있다.

플랫폼은 SWEA 에서 보기때문에 SWEA 에서 제공하는 D1~D3 문제들을 풀어가며 준비를 했다. 11기때와는 다르게 맥북으로 시험을 진행했는데 문제가 생겼을 시 도움을 받을 수 없다는 점만 제외한다면 SWEA 환경을 어느정도 적응했을 때 무리없이 진행할 수 있었다.

위와 같이 준비한 덕분에 코딩테스트는 무난하게 통과했다.

인터뷰

작년 11기 준비에 이어 하나은행 PT 준비 경험을 토대로 혼자서 진행하려고 했는데 혼자서 하면 잘 안할것 같기에 내가 직접 스터디를 파고 인터뷰 준비를 했다.

인터뷰 준비기간이 되면 오픈채팅방이 하나 생긴다. 그 오픈채팅방에 들어가면 여러 사람들이 면접스터디를 구한다. 내 집 주위를 기준으로 스터디를 모집했고 전공1(나), 비전공(3) 명으로 구성된 스터디를 만들었다.

면접 스터디를 진행하면서 주로 PT 에 대해 많이 준비했던 것 같다. 어떤식으로 면접이 진행될지 몰라 구글링을 통해 IT 뉴스를 읽고 내용에 대해 서술하는 방식으로 진행했다. 그리고 다양한 IT 키워드에 대해 개념을 준비했다.

면접 준비는 인성 면접으로 준비했고, 에세이에서 질문할 만한 질문리스트를 만들거나 흔히 알려져있는 인성면접 질문 리스트를 이용했다.

인성 관련

1. 성격의 장단점
2. 개발자가 되고 싶은 이유
3. 어떤 개발자가 되고 싶은지
4. 본인은 리더인지 팔로워인지
5. 팀을 위해 희생한 경험
6. 최종적으로 원하는 직무
7. 실패나 어려움을 겪고 극복한 사례 / 도전정신이 드러나는 사례
8. 본인의 경쟁력
9. 마지막으로 할 말
10. 개발 동아리 / 관련 프로그램을 하시면서 힘들었던 적이 있다면 말씀해주세요
11. 책임자로써 팀원간의 불화가 있을 때 어떻게 대처할 것인가요?
12. 협업을 해본 경험이 있나요?
13. 최근에 읽은 IT 기사를 소개해주세요
14. 현재 본인의 전공을 선택한 계기가 무엇인가요?
15. 취업을 하기에 부족하다고 느끼는 이유가 무엇인가요
16. 팀플을 진행하면서 어려웠던 점이 있나요?
17. 추후에 개발자가 되었을 때 어떠한 프로그램을 개발하고 싶으신지?

또, 프로젝트 질문도 나올 것 같아 프로젝트에 대한 질문도 준비해 갔다.

프로젝트 관련

1. 프로젝트 내 역활
2. 개발 과정
3. 사용기술과 선택 이유
4. 프로젝트 진행 중 겪은 갈등 상황과 해결 방법
5. (에세이에 작성한) (’’’) 프로젝트가 무엇인가요?
6. (에세이에 작성한) (’’’) 프로젝트를 진행하면서 본인이 주도한 역할을 위주로 말씀해주세요.
7. 프로젝트를 진행하며 기술적인 어려움을 겪은 적이 있었나요? 어떻게 해결했나요?
8. 기재한 프로젝트 동작과정에 대해 말씀해주세요

인터뷰 후기

합격!!!

예비군가서 2시에서 3시가 가까워질때마다 가슴이 막 두근두근 부들부들 했는데 빠르게 확인해보니!! 좋은 결과를 얻을 수 있게 되었다!! 작년 11기 불합격일때 너무너무 아쉬웠는데 이번에는 합격해 감회가 새롭다.

얼른 수업에 열심히 참여해서 좋은 개발자로 거듭나고 싶다.

열심히 개발을 하고 테스트를 하면서 느꼈던 점은 이미지 렌더링이 은근느리다는 것이 었다. 기능개발을 빠르게 하다보니 놓치고 있었는데 분석을 해보려고 한다.

분석

웹사이트를 분석하는 도구는 여러가지가 있는데 대표적인 하나는 구글에서 제공하고 크롬 플러그인으로 설치가능한 'Lightroom'이다. 라이트룸으로 분석을 진행한 결과 아주 놀라운 결과를 얻게 되었다.

오마이갓 LCP 는 왜저렇고 성능은 52초라니.. 진짜 미친 성능이다. 주된 원인은 다음과 같았다.

음.. 좀 많은데..? 아니 많이 많은데??

우선적으로 이미지 크기를 적절하게 설정하기 위해서는 내가 사용한 이미지 컴포넌트에 대해 조사를 해볼 필요성이 있다고 깨달았다.

Next/Image

이미지를 출력하기 위해 Next 에서 제공하는 Next/Image 컴포넌트를 사용한다. jpg나 png 를 webp로 자동 변환시켜 렌더링하기에 파일 크기를 크게 줄여 효율적이다. 내가 가장 많이 컴포넌트를 사용한 코드를 보면 다음과 같다.

<div className="w-full h-1/2 image-box">
    <Image
        src={imageUrl}
        alt={name}
        className="object-cover w-full h-full"
    />
</div>

이미지에 사이즈가 명확하게 설정이 되어있지 않아 이미지 원본파일의 raw data가 그대로 적용되어 이미지 로딩이 커진것이었다..! 그래서 이미지에 명확한 사이즈를 선언하기 위해 고민을 해보았다.

우선은 Image 에 width , height 요소를 지정해주면 되지만 나는 이미지가 부모의 width, height 에 맞게 조절되어야 하기 때문에 이미지 크기를 지정하는건 올바르지 않다.

어떻게하면 부모크기만큼만 이미지가 가득 채워질지..?

fill ={true}

Next/Image 에는 여러가지 속성이 있고 속성 중 하나인 fill 이 있다. fill 을 사용하게 된다면 자동적으로 postion 이 "absolute" 가 지정된다. 따라서, 부모가 fixed 혹은 relative, absolute 여야 자식의 width, height 값이 조정된다고한다.

따라서, 부모의 relative 를 부여하고 Image 에 fill 속성을 부여했다.

<div className="w-full h-1/2 image-box relative">
    <Image
        src={imageUrl}
        alt={name}
        fill
    />
</div>

다시 검사를 해보면 ..!

확연히 줄어든 것을 볼 수 있다!

sharp vs Squoosh

Next/Image 는 Squoosh 를 기본적으로 이미지 최적화 모듈을 사용하고 있지만 sharp 라이브러리를 사용할 것을 권장하고 있다.

왜냐하면? webP 기준 응답속도가 3~4배 빠르기 때문이다. 그러면 처음부터 sharp 를 쓰는게 더 효율적인거 아닌가..? 왜 굳이 한 번 더 설치를 하는 것인지 궁금하군,,

squoosh 사용시 응답속도

sharp 사용시 응답속도

설명대로 sharp 사용시 응답속도가 개선되는 것을 볼 수 있다.

How To Eat

우리 매장은 맛있게 먹는 방법이 있다. 깻잎에 마요네즈가 섞인 천사채와 날치알, 환상의 마요네즈 소스까지 곁들여 쭈꾸미와 함께 쏙하면 기가막힌 천상의 맛이다. 하지만, 외국인들에게 이 맛있는 조합을 소개하기가 매우 어려운 사실.. 이를 해결하기 위해 만들어 보도록 하겠다.

이전 시간에 사용한 모달을 재활용해서 How To Eat 버튼과 모달창을 구현해보겠다.

const HowtoeatButton = () => {
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [curPage, setCurPage] = useState(0);

    const navigatePage = (direction : Direction) => {
        setCurPage((prevPage) => {
            if (direction === 'prev' && prevPage > 0) {
                return prevPage - 1;
            } else if (direction === 'next' && prevPage < MAX_PAGE) {
                return prevPage + 1;
            }
            return prevPage;
        });
    };

    return (
        <div style={{ position: "fixed", bottom: "20px", zIndex: 1000 }} className="left-1/2 how-to-eat">
            <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" onClick={() => setIsModalOpen(true)}>How To Eat</button>
            {isModalOpen && (
                <HowtoeatModal open={isModalOpen} onClose={() => setIsModalOpen(false)}>
                    <div className="flex h-11/12 bg-blue-700">
                        <NavigationButton direction="prev" onClick={() => navigatePage('prev')} />
                        <ContentDisplay img={img} description={desc[curPage]} pageNumber={curPage} />
                        <NavigationButton direction="next" onClick={() => navigatePage('next')} />
                    </div>
                </HowtoeatModal>
            )}
        </div>
    );
};

여기에서 두가지 버튼은 모달의 이미지를 넘기는 왼쪽, 오른쪽 버튼이다.

const navigatePage = (direction : Direction) => {
        setCurPage((prevPage) => {
            if (direction === 'prev' && prevPage > 0) {
                return prevPage - 1;
            } else if (direction === 'next' && prevPage < MAX_PAGE) {
                return prevPage + 1;
            }
            return prevPage;
        });
    };

위 함수를 통해 방향이 무엇인지에 따라 누른 버튼을 확인하고, 방향에 따른 페이지수 변화를 주는 역할이다.

대충 출력되는 화면을 확인해보자면

으 정말 멋없는 디자인.. 위의 색들은 화면 크기 조정을 위해 프레임을 만들어둔 것 이므로 뭐라하지 마세요!!

이제 여기에 찍어둔 사진을 적용해보겠다.

는 실패 (* 아직 사진 최신화가 되지 않아 불가능 ㅠㅠ)

사진 적용은 나중으로 미루고 디자인을 수정해야겠다. 기존 버튼 배치가 불편해보여서 하단으로 이동했다. 그리고 이미지와 컨텐츠 높이를 반반으로 수정했다.

무이스!!!! 확실히 이전보다 나아진 느낌!! 디자인 전공자 동생왈 매장의 메인 색 테마를 정하고 칠해라. 그리하여 색깔을 셀렉

해보았다. 전체적인 색 조합을 고려해보려고 이것저것 뒤져보았다.

요놈들이 뭔가 열정도 쭈꾸미의 유니폼 '검정' 과 열정도의 '빨강', 쭈꾸미의 '선홍' 이 어울리는 듯한 뭔가 그럴싸한 느낌을 받아서 셀렉!

확실히 디자인이 사는구만!! 좋습니다. 이거지 이거야. 이제 사진만 최신화하면 완성될 맛있게 먹는법 완성!

Use Case

1. 메뉴 출력을 N x 2 로 만들고 메뉴 마다 디테일 모달 띄우기
2. Sticky Navbar 제작
3. How to Eat

디테일 모달

현재 메뉴판은 한 줄로 쭉 나열되어있고 메뉴 카드마다 메뉴명, 메뉴 한국어명, 메뉴 디테일, 가격 이렇게 정보가 한꺼번에 나와있다. 내 생각에는 정보가 한 번에 다 나오면 귀찮은 동작없이 메뉴를 살필 수 있다고 생각하는데 아무래도 메뉴가 하나씩 나오게 되면 사용자 입장에서는 더 많은 스크롤을 내려야 한다. 따라서, N * 2 로 메뉴 리스트를 바꾸고 각 메뉴를 눌렀을 때 디테일 모달이 나오도록 변경하려고 한다.

우선, 모달 띄우기 전 화면에 출력할 내용은 외국어 메뉴명, 한국어 메뉴명, 가격이다. 이후 각 메뉴의 Element 에 onClick 을 부여해 데이터를 모달에 디테일 한 작업을 추가할 예정이다. 추후에 디테일 모달에는 Carousel 을 넣고 싶다.

N x 2의 메뉴

.menu-list {
    @apply flex flex-wrap gap-4 justify-center items-center;
}

@media (max-width: 600px) {
    .menu-list {
        @apply flex-row;
    }
}

gap 클래스를 기호에 맞게 수정해 주어 카드간의 간격을 조정하고, .menu-list 클래스에 flex-row로 변경하여 카드가 열별로 출력되게 변경했다.

이제 디테일 모달을 만들차례

만들려고 시도를 하자마자 클릭 이벤트를 넣는데 문제가 발생했다.

어이없는 오류 1 : 부모 Div 안에 모달 넣지말자

문제 상황

처음에는 모달을 열고 닫는 간단한 기능을 구현하려고 했다. MenuItemCard 컴포넌트에서 카드 요소를 클릭하면 모달이 열리고, 모달 내부의 닫기 버튼을 클릭하면 모달이 닫히도록 했다. 코드의 핵심 부분은 다음과 같다.

<div className="rounded-lg shadow-md bg-white overflow-hidden w-72 h-150 card" onClick={handleModalOpen}> 
    <Image src={imageUrl} alt={name} className="object-cover w-full h-1/2" width={240} height={100} /> 
    <div className="p-4 h-1/2"> 
        <h3 className="text-xl font-extrabold mb-2">{name}</h3> 
        <div className="text-md font-normal">{discription}</div> 
        <div className="text-gray-700 card-price">{price}</div> 
    </div> 
    {isModalOpen && ( 
        <DetailModal open={isModalOpen} onClose={handleModalClose}> 
            <div className="flex h-11/12 bg-blue-700"> {/* 모달 내용 */} </div> </DetailModal> )} 
</div>

이렇게 보면 당연히! 동작되었을 줄 알았지만 모달창이 영원히 닫히지 않는 문제가 생기게 되었다. 도대체 무엇이 문제였을까?!

문제 원인

문제의 원인은 모달이 부모 div의 onClick 이벤트에 의해 닫히는 것이었다. 모달을 클릭할 때도 부모 div의 onClick 이벤트가 호출되면서 setIsModalOpen 함수가 번복되는 상황이 발생했다.

해결 방법

해결 방법은 간단했다. onClick 이벤트를 부모 div에서 제거하고, 필요한 자식 요소에만 이벤트 핸들러를 설정하면 된다.

이 따위 문제를 2시간 넘게 잡고 있다는 것. 개발자로 살아남아가고 있다는 것.

수정된 코드

<div className="rounded-lg shadow-md bg-white overflow-hidden w-72 h-150 card">
            <div onClick={handleModalOpen}>
                <Image
                    src={imageUrl}
                    alt={name}
                    className="object-cover w-full h-1/2"
                    width={240}
                    height={100}
                />
                <div className="p-4 h-1/2"  >
                    <h3 className="text-xl font-extrabold mb-2">{name}</h3>
                    <div className="text-md font-normal">{discription}</div>
                    <div className="text-gray-700 card-price">{price}</div>
                </div>
            </div>

            {isModalOpen && (
                <DetailModal open={isModalOpen} onClose={()=>handleModalClose()}>
                    <div className="flex h-11/12 bg-blue-700">
                        {/* 모달 내용 */}
                    </div>
                </DetailModal>
            )}
        </div>

결과물

한국어 메뉴일 때는 공백이 매우 신경쓰이는데 일단 디자인 적인 부분은 나중에 신경쓰기로 했다. 깨알 수정안한 맛있게먹는법의 흔적

다음에는 How To Eat 모달을 수정할 예정!