styled-component가 존재하기 전 react에서 style을 사용하던 방법

1. JavaScript에서 css파일 import

style.css

* {
    box-sizing: border-box;
}
body {
    margin: 0;
    padding: 0;
    font-family: -apple-system;
}

위와 같은 CSS 파일을 만들고 난 뒤, index.jsx

import { createRoot } from "react-dom/client";
import App from "./App";
import "./style.css";

createRoot(document.getElementById("root")).render(<App />);

위와 같이 js 파일에서 불러온다.

이렇게 CSS 파일을 불러오게 되면 JavaScript 파일 안에 있는 모든 내용이 만든 모든 페이지에 스타일이 적용된다.

JavaScript 파일에서 import를 통해 CSS를 불러오게 된다면 스타일 코드들이 어플리케이션 전체에 적용되므로 주의할 필요가 있다.

2. 인라인 style 속성 사용

index.jsx

function App() {
    <div style={{ color: "white", backgroundColor: "black" }}>hello world!</div>;
}

위와 같이 style 속성을 사용해 스타일을 지정한다.

인라인 스타일 속성을 사용하게 되면 JavaScript 형식의 코드를 적어야 하고, :hover, :active와 같은 속성을 사용할 수 없다는 단점이 있다.

3. CSS 모듈 사용

App.module.css

.box {
    background-color: black;
    color: white;
}

index.jsx

import styles from "./App.module.css";

function App() {
    <div className={styles.box}>hello world!</div>;
}

module.css파일에 일반적인 CSS 작성 방식으로 CSS를 작성하고, className들을 오브젝트의 속성인 것처럼 사용한다.

css모듈의 장점은 className을 랜덤으로 만들어주어서 클래스들이 서로 충돌되는것을 막아준다. 하지만 계속해서 className들을 복사/붙여넣기 해야 한다는 단점이 있다.

이러한 문제를 해결하기 위해 탄생한것이 바로 styled-components다!

styled-components 기본 사용법

먼저, styled-components를 설치하려면 아래와 같은 명령어를 실행하면 된다.

npm i styled-components

컴포넌트를 생성 방법

import styled from "styled-components";

const {컴포넌트명} = styled.{HTML태그}`
    // css 코드
    background-color: white;
    width: 1000px;
    height: 100px;
`;

이렇게 생성한 컴포넌트는 자동으로 class명을 만들어주고, 그 클래스 안에 스타일 코드를 담아준다.

아래의 인라인 스타일을 통해 작성한 코드를

function App() {
    return (
        <div style={{ display: "flex" }}>
            <div style={{ backgroundColor: "white", width: "100px", height: "100px" }}></div>
            <div style={{ backgroundColor: "black", width: "100px", height: "100px" }}>
                <span style={{ color: "white" }}>hello world!</span>
            </div>
        </div>
    );
}
export default App;

styled-components를 사용하면 아래와 같이 작성할 수 있다

import styled from "styled-components";

const Container = styled.div`
  display: flex;
`;

const WhiteBox = styled.div`
  background-color: white;
  width: 100px;
  height: 100px;
`;

const BlackBox = styled.div`
  background-color: black;
  width: 100px;
  height: 100px;
`;

const Text = styled.span`
  color: white;
`;

function App() {
    return (
        <Container>
            <WhiteBox />
            <BlackBox>
                <Text>hello world!</Text>
            </BlackBox>
        </Container>
    );
}

export default App;

하지만 WhiteBox, BlackBox는 background-color만 다르고 width, height값은 같다는 문제가 있다.

이 문제를 해결하기 위해 styled-components에서는 프로퍼티(props)를 통해 컴포넌트에 데이터를 전달할 수 있다.

Props를 통한 styled-components에 데이터 전달

아래 코드와 같이 components에 자신이 지정한 props의 이름을 components를 선언할 때 ${(props) => props.{propsName}; 이렇게 작성하면 {속성이름}="속성값"의 속성값이 components에 전달된다.

const Box = styled.div`
  background-color: ${(props) => props.bgColor};
  width: 100px;
  height: 100px;
`;

function App() {
    return (
        <>
            <Box bgColor="white" />
            <Box bgColor="black" />
        </>
    );
}

export default App;

위 코드의 첫 번째 Box 컴포넌트는 bgColor="white"를 넘겨줬으니 background-color: ${(props) => props.bgColor};가 값을 받아 코드가 실행될 때에는 background-color: white;로 바뀌게 된다.

prefix 경고 해결

하지만 이렇게 React에게 표준 HTML 속성이 아닌 props를 전달하게 되면 경고가 발생한다.

이를 prop 이름에 $ prefix를 붙이면 해결된다. 자세한 설명은 이 글에서

prefix를 통해 아래와 같이 경고를 해결할 수 있다

const Box = styled.div`
  background-color: ${(props) => props.$bgColor};
  width: 100px;
  height: 100px;
`;

function App() {
    return <Box $bgColor='white' />;
}

export default App;

고급 기능

컴포넌트의 상속

또한 위 코드의 Box의 스타일과 대부분의 스타일이 중복되는 다른 컴포넌트를 원한다면 스타일을 상속하는 새 컴포넌트도 생성할 수 있다.

const Box = styled.div`
  background-color: ${(props) => props.$bgColor};
  width: 100px;
  height: 100px;
`;

const Circle = styled(Box)`
    border-radius: 50px;
`;

위와 같이 작성하게 된다면 Box가 가지는 모든 스타일에 border-radius: 50px;이 추가된 컴포넌트가 만들어진다. Circle은 Box의 bgColor props도 가져오기 때문에 색상도 지정할 수 있다.

function App() {
  return (
    <>
      <Box $bgColor='white' />
      <Circle $bgColor='black' />
    </>
  );
}

HTML 태그 속성값 변경

styled-components에서는 태그의 속성값도 변경할 수 있다.

const Input = styled.input.attrs({ required: true, minLength: 5 })`
  background-color: black;
  color: white;
`;

function App() {
    return (
        <>
          <Input />
          <Input />
          <Input />
          <Input />
          <Input />
          <Input />
        </>
    );
}

attrs를 통해 변경된 속성을 확인할 수 있다.

as prop으로 태그만 변경

여기에 더해 컴포넌트의 스타일은 유지하면서 HTML태그만 변경할 수도 있다.

const Btn = styled.button`
  color: white;
  background-color: black;
  border: 0;
  border-radius: 15px;
`;

function App() {
    return (
        <>
            <Btn>Log in</Btn>
            <Btn as='a' href='/logout'>
                Log out
            </Btn>
        </>
    );
}

컴포넌트에 as="태그이름"이라는 prop를 추가하면 components의 HTML태그만 변경할 수 있다. 위 코드에서는 button태그로 지정된 Btn 컴포넌트를 as="a"를 통해 anchor로 변경하였다.

as prop을 통해 태그를 변경한 컴포넌트도 변경한 컴포넌트의 속성을 설정할 수 있다. 위 코드에서는 태그를 anchor로 변경하였으니 href 속성을 사용할 수 있다.

가상 선택자 사용하기

styled-components에서는 Pseudo Selectors(가상 선택자)를 사용할 수 있다.

const Box = styled.div`
  width: 200px;
  height: 200px;
  span {
    font-size: 36px;
    &:hover {
      font-size: 48px;
    }
  }
`;

function App() {
    return (
        <Box>
            <span>😭</span>
        </Box>
    );
}

위와 같이 Box 안의 span을 target 해 font-size와 같은 스타일을 지정할 수 있다. 또한 & 연산자를 통해 &:hover, &:active와 같은 속성도 사용할 수 있다.

const Box = styled.div`
  width: 200px;
  height: 200px;
  span {
    font-size: 36px;
    &:hover {
      font-size: 48px;
    }
  }
  span:hover {
    font-size: 48px;
  }
`;

여기서 &:hover와 span:hover은 동일하게 동작한다.

하지만 여기서 Box 컴포넌트 안의 span 태그를 다른 태그로 변경하면 가상 선택자로 지정한 스타일은 태그 이름에 의존하고 있기 때문에 동작하지 않는다.

const Emoji = styled.span`
  font-size: 36px;
`;

const Box = styled.div`
  width: 200px;
  height: 200px;
  ${Emoji}:hover {
    font-size: 98px;
  }
`;

function App() {
    return (
        <Box>
            <Emoji as='a'>😭</Emoji>
        </Box>
    );
}

위와 같이 코드를 작성하면 as를 사용해 Emoji의 태그를 변경하여도 정상적으로 동작하는 것을 확인할 수 있다.

GlobalStyle 설정

styled-components를 사용하는 중 모든 컴포넌트에 공통으로 적용되어야 하는 스타일이 필요한 경우가 있다. 이러한 경우 createGlobalStyle을 사용해 전역 스타일을 관리할 수 있다.

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
`;

ReactDOM.createRoot(document.getElementById("root")).render(
    <ThemeProvider theme={darkTheme}>
        <GlobalStyle />
        <App />
    </ThemeProvider>
);

createGlobalStyle로 생성한 GlobalStyle은 일반 컴포넌트처럼 사용할 수 있다. App 컴포넌트와 함께 렌더링하면 앱 전체에 스타일이 적용된다.

styled-components에서 테마 설정하는 방법

styled-components는 ThemeProvider Warpper 컴포넌트를 통해 전체 앱 테마를 사용할 수 있다.

index.js

import ReactDOM from "react-dom/client";
import App from "./App";
import { ThemeProvider } from "styled-components";

const darkTheme = {
  textColor: "white",
  backgroundColor: "black",
};

const lightTheme = {
  textColor: "black",
  backgroundColor: "white",
};

ReactDOM.createRoot(document.getElementById("root")).render(
  <ThemeProvider theme={darkTheme}>
    <App />
  </ThemeProvider>
);

ThemeProvider 컴포넌트는 자신의 아래에 있는 모든 요소에 테마를 사용할 수 있게 해준다. <ThemeProvider theme={테마이름}> 형식으로 사용하면 된다.

지정한 테마 컬러를 사용하려면

const Title = styled.h1`
    color: ${(props) => props.theme.textColor};
    backgroundColor: ${(props) => props.theme.bgColor};
`;

위와 같이 사용하면 테마에 따라 다르게 색상이 적용된다.

마무리

styled-components의 기본 문법부터 추가 기능까지, 그리고 실제 프로젝트에서 어떻게 활용할 수 있는지 살펴보았습니다.

styled-components는 한마디로 "CSS의 컴포넌트화"입니다.

제 글이 styled-components를 전반적으로 이해하고 실무에 적용하는 데 도움이 됐으면 합니다.

React + styled-components로 사이드바를 개발하는 과정에서 커스텀 prop(예: boolean, string 등)을 DOM에 그대로 넘겨 두 개의 경고 메시지를 마주치게 되었다.

1. 카멜케이스(isSelected)로 넘긴 경우:

   • React는 해당 prop을 DOM에 전달하지 않으며, 아래와 같은 경고를 출력한다.

2. 소문자(isselected)로 넘긴 경우:

   • React는 해당 prop을 custom attribute로 DOM에 전달하고, boolean 값이 전달되면 아래와 같은 경고를 출력한다.

원인 정리

• React는 표준 HTML 속성이 아닌 prop을 DOM에 전달하지 않으려 한다.
• 카멜케이스(prop: isSelected)는 DOM에 전달하지 않고 경고만 띄움.
• 소문자(prop: isselected)는 custom attribute로 간주하여 DOM에 전달하고 boolean 값 전달 시 경고 출력.
• string, number, object 등 다른 타입의 커스텀 prop도 마찬가지로 불필요하게 DOM에 전달되면 비슷한 문제 발생 가능.

기존 코드

// index.tsx
<S.Elem
  key={key}
  isSelected={currentPath === key}
  onClick={() => navigate(`${key}`)}
>
  ...
</S.Elem>

// style.ts
export const Elem = styled.div<{ isSelected: boolean }>`
  ...
  background-color: ${({ isSelected, theme }) =>
    isSelected ? theme.color.selectedWhite : "transparent"};
`;

해결 방법

$ Prefix 사용 (공식 권장)

styled-components에서는 prop 이름에 $ prefix(트랜지언트 프롭)를 붙이면 해당 prop을 실제 DOM에 전달하지 않고 내부 스타일 계산에만 사용한다.

수정된 코드

// index.tsx
<S.Elem
  key={key}
  $isSelected={currentPath === key}
  $variant="primary" // string prop 예시
  onClick={() => navigate(`${key}`)}
>
  ...
</S.Elem>

// style.ts
export const Elem = styled.div<{ $isSelected: boolean; $variant?: string }>`
  ...
  background-color: ${({ $isSelected, theme }) =>
    $isSelected ? theme.color.selectedWhite : "transparent"};
  color: ${({ $variant }) => ($variant === "primary" ? "blue" : "black")};
`;

• $isSelected, $isselected, $variant, $fooBar 등 $ prefix만 붙이면 케이스, 이름 방식 전부 상관 없이 사용 가능하다

결론

• React에서 커스텀 prop(boolean, string, number 등)을 DOM에 직접 전달하면 경고가 발생하거나, 의도치 않은 동작이 생길 수 있다.
• 카멜케이스(prop: isSelected)는 "인식하지 못하는 prop" 경고, 소문자(prop: isselected)는 "boolean attribute" 경고 등 다양한 문제가 있다.
• styled-components에서는 $ prefix를 붙이면 안전하게 사용할 수 있고, DOM에는 전달되지 않는다.
• 이 방법은 boolean뿐 아니라 string, number, object 등 모든 커스텀 prop에 적용 가능하다.

이 패턴을 사용하면 styled-components에서 커스텀 prop 경고와 불필요한 DOM 속성 문제를 예방할 수 있다.

3월 어느 날, 친구가 나에게 와서 말했다.
"나 파이썬 코드 공유 사이트 만드려고"

서비스를 만들게 된 계기

대구소프트웨어마이스터고등학교 1학년은 정규 시간에 파이썬 과목을 이수한다.
파이썬 수업 시간에는 조건문, 반복문, 클래스 같은 기본 개념을 배우고, 선생님이 내주신 문제를 푼 뒤 구글 클래스룸에 본인이 푼 코드를 올리고 발표하는 방식으로 수업이 진행된다.

하지만...
코드를 구글 클래스룸에 올리려면 파일로 제출해야 하고, 문법 하이라이팅도 안 되고, 폰트 사이즈 조절도 안 돼서 여러모로 불편함이 많았다.

이렇게 불편함을 느끼던 어느 날, 대소고 1학년 짱짱맨 대형이가 나에게 와서
"파이썬 코드 공유 사이트를 같이 만들어볼래?"
라고 제안했다.

나 역시 수업 시간에 같은 불편을 겪고 있었고, 이론 공부에 약간 지쳐 있던 터라 프로젝트를 하면 분명 재밌을 것 같아서 바로 수락했다.

내가 맡은 역할

팀원은 총 3명, 프론트 1(본인), 백엔드 1, 디자인 1명으로 시작했다.

기획의 시작

3월과 4월 초에는 학교 행사도 많았고, 4월 말엔 시험기간이라 프로젝트를 잠시 미뤄둘 수밖에 없었다.
하지만 5월 3일 시험이 끝나고, 바로 다음 날인 5월 4일부터 본격적으로 기획을 시작했다.

프로젝트명은 코드를 공유한다는 의미로 Sh4re!로 결정!

개발 시작

개발을 시작해서 뷰를 만드는 중, 첫 번째 큰 문제를 만났다.
바로 코드 하이라이팅을 어떻게 할지였는데, 구글링을 해보니 highlight.js라는 라이브러리가 있어서 언어와 코드만 입력하면 자동으로 하이라이팅이 되어 완전 편했다.

두 번째 문제는 ‘로그인 페이지를 어떻게 구현할 것인가’였다. 리액트 같은 라이브러리 없이, 순수 HTML과 JS로 만들기로 해서 고민이 많았다.

결국 모달 창 형태로 구현하기로 하고, 쿠키를 활용해서 로그인 상태를 유지하고, 로그인/회원가입/로그아웃 같은 주요 동작을 처리했다. 헤더와 모달의 상태도 동적으로 업데이트하는 구조로 만들었다.

기능 개발에 집중하던 중, 서버 담당 친구에게 서버비가 무려 한 달에 6만 6천원이나 나온다는 이야기를 들었다.

실사용??

개발을 이어가던 중 선생님께 “제가 친구랑 이런 서비스 만들고 있는데, 수업시간에 쓰면 편할 것 같지 않나요?”라고 물어봤더니
“원래 코드 공유 방식이 너무 불편했는데, 완성되면 충분히 쓸 수 있겠다!”라는 긍정적인 답변을 받았다.

그래서 개발 속도를 높이기 시작했다.

우리 서비스의 주요 기능인 코드 공유와 발표는 진도 나갈 때만 쓸 수 있는 구조라, 파이썬 문법 진도가 얼마 남지 않은 상황에서 최대한 빨리 끝내야 1~2주라도 수업에 활용할 수 있었다.

그래서 기존 일정과 할 일의 우선순위를 뒤로 미루고, 일주일간 쉐어 개발에만 시간을 썼다.

서버 친구와 5월 11일부터 18일까지 집중 개발 기간을 잡고 모든 시간을 쏟아부었다.

학교 커밋 랭킹을 보니 우리가 나란히 1등, 2등을 차지했다

평일에는 수업시간, 쉬는시간 가리지 않고 개발했고,

그렇게 완성된 서비스는...

이런 다양한 기능들을 갖추게 됐다.

이 외에도 티처 페이지, 유저 페이지를 만들었고, 서버 친구가 시간이 남아서 코멘트 기능까지 구현해줬다.

서비스 소개

개발이 끝난 뒤 1학년 반을 돌며 서비스 소개도 했다.

드디어 실사용!

마무리하며

이 프로젝트를 시작하기 전엔 내가 뭘 배우는지도 잘 모르겠고, 이 길이 과연 내게 맞는지 고민도 많았다.

그런데 직접 무언가를 만들어보고, 그 결과물을 친구들이 실제로 사용하는 걸 보니 정말 뿌듯하고 재밌었다!

개발 잘하는 서버 담당 친구 덕분에 서버와의 통신, DB 다루는 법, 협업 방식, SEO 등 이론으로만 접했던 다양한 것들을 직접 경험할 수 있었다.

V1 그 이후

몇 차례 실사용 후, 선생님께서
“아이디어가 너무 좋아서 다른 학교 선생님들도 쓸 수 있게 개발해보면 좋겠다”
라는 피드백을 주셔서 V2 개발을 시작하게 되었다.

V1을 만들며 정말 많은 걸 배웠지만, 시간에 쫓겨 개발하다 보니 라이브러리 없이 HTML과 JS만으로 구현해야 했고, 한계도 많이 느꼈다.

모든 기능을 한 페이지에 몰아넣으니 컴포넌트 단위로 코드를 나눠야겠다는 필요성을 엄청 절실히 느꼈고, 코드 재사용성도 많이 떨어졌다.

V2는 프로젝트 규모가 더 커질 예정이라 오류가 많은 JS 대신 타입 안정성이 더 좋은 TypeScript를 도입하기로 했다.

그래서 V2는 React, Styled-Components, TypeScript를 활용해서 훨씬 체계적이고 안정적으로 개발할 예정이다.

Sh4re!가 더 궁금하다면?

• Sh4re 서비스 바로가기
• Sh4re WEB 레포지토리
• Sh4re V2 개발 구경하기

개발자가 궁금하다면?

• me@chaeyn.com
• Github
• 포트폴리오

대구소프트웨어마이스터고등학교에 입학하기까지의 과정과 비포스쿨, 그리고 3월 한 달간의 경험들을 기록한 글입니다.

대소고 입학 전

대소고에 관심을 갖게 된 계기

나는 초등학교 5학년때부터 개발에 관심이 있었고 웹기초와 C언어 등을 학습하며 나한테 맞는 전공이고 재미도 있다고 느껴서 대구소프트웨어마이스터고등학교(이하 대소고)에 진학해야겠다 라는 생각을 가지게 되었다.

입학준비와 성적

하지만 나는 중학교 2학년까지 공부를 거의 하지 않아 2학년 말 성적은 50~60%정도가 나왔고 대소고에 지원하기에는 부족한 성적이였다.

나는 대소고에 가는 것이 간절했기에 중3 개학때부터 게임을 그만두고 성적을 올리는 데에만 전념해서 전교등수 100등 가까이 올리게 되었고 최종 34%로 성적을 맞출 수 있었다.

진로체험과 여름방학

작년 대소고에서는 7월, 9월에는 세 차례에 걸처 진로체험이라는 것을 실시했는데 이때 학교에 가서 Figma 디자인, c언어, 웹페이지 만들기 활동에 참여했다.

진로 체험에서 어떤걸 배우려고 가는거 보다는 선배들에게 학교에 대한 정보를 많이 들을 수 있는게 크다. 만약 대소고에 지원할 예정이라면 진로체험은 3번 다 빠지지 말고 가서 선배들과 친해질 수 있으면 좋겠다. 생각보다 선배들에게 들을 정보가 정말 많다.

또한 마이스터고등학교는 중학교 성적을 3학년 1학기까지만 보기에 여름방학부터는 컴공 전공을 하고 계신 선생님께 도움을 받으며 제대로 된 C언어 공부를 하기 시작했다.

인생 첫 해커톤 참가와 수상

원서 지원 날짜가 다가올 때 쯤 후배들과 대구교육청에서 주최하는 해커톤에 나가게 되었다.

수상하려고 나간 것이 아닌 경험삼아 나간 대회였지만 나는 내가 할 줄 아는것이 진짜 아무거도 없구나를 뼈저리게 느끼며 그나마 할 줄 아는 html css js과 머신러닝 프로그램을 사용해 겨우 [프로젝트] (https://github.com/chaeyn/EyeDOMplus/tree/main)를 만들었고, 운이 좋게도 심사기준과 딱 맞아 대구 중등부 우수상을 수상하게 되었다.

원서 접수

해커톤이라는 큰 이벤트도 지나가고 대망의 원서 접수 날짜가 되었다.

원서 접수 전날까지도 일반전형으로 지원할지 특별전형으로 지원할지 정말 고민했지만 학교에서 특별전형이 1차에서도 떨어지면 일반으로 붙여주고 2차에서도 떨어지면 다시 일반으로 붙여준다는 말을 듣고 '특별전형으로 지원 안 할 이유가 있나?' 하고 특별전형으로 원서를 접수하였다.

대소고에서 집이 먼 학생들을 위해 교육청에서도 원서를 제출할 수 있게 해줬지만 나는 학교를 빠지고 싶었기에 왕복 2시간 거리임에도 학교로 가게 되었다.

하지만 거의 다 와갈 즈음에 담임선생님게 전화가 와서 원서접수가 취소되었다는 말을 듣게 되었다. 내가 잘못하고 빼먹은게 있었나 생각하면서 학교에 도착해 선생님께 이야기를 들어보니 가산점 만점이 3점인데 내 점수가 4점이라서 원서접수를 취소시켰다는 말을 들었다. (올해부터 성적산출방식이 바뀌어서 가산점 만점이 4점인데 말이다..)

이미 접수는 취소되어버려서 어쩔 수 없다는 말을 듣고 허무하게 집에 돌아오게 되었다. 다음날에도 학교를 빠지게 되어서 내심 나쁘지 않았다

면접

어찌저찌 원서 접수를 마치고 남은 면접 준비도 마무리하고 대망의 면접 날이 밝았다.

심층면접은 면접관들이 자소서와 생기부 기반으로 중학교 학교생활에서 궁금한 것을 물어보는 형식이었고

시험은 정보책을 통채로 외우면 쉽게 풀리는 수준이었고 수학은 중학교 3개년 과정 통틀어서 나오기 때문에 기본기가 중요했다.

시험을 완벽하게 보지 못했다는 생각에 떨어지면 어떻게 하지 생각 하던 중 다행히 최종합격 소식을 듣게 되었다!!

비포스쿨

첫째날과 첫 기숙사

12월 예비소집을 다녀온 후 7주간 파이썬, 수학 과제를 하며 방학을 보내다 비포스쿨에 갔다.

학교에 도착한 후 시청각실에 가서 이름이 새겨진 과잠과 텀블러를 받았다.

5일간의 일정을 들은 후 방학동안 같이 과제를 한 비포스쿨 조 친구들과 아이스브레이킹을 하고 처음으로 기숙사에 들어갔다. 우리학교 기숙사는 한 방에 4명이서 같이 쓰는데 괜찮은 친구들이 같은 방에 배정되어서 다행이었다.

기숙사 생활이 처음이어서 그런지 새벽 2시가 다 되어서 잠들고 6시에 일어났다.

둘째날에는 취업동향 소개를 들었는데 간단하게 정리하면 "앱, 게임개발자 취업 안되니 웹이나 서버만 해라"다. 나는 이미 선배들한테 많이 들었었고 웹을 할 생각이라 상관은 없었지만 다른 친구들은 꽤나 충격을 받은 모양이었다.

시청각실에서 대기하고 있던 중 선배가 잠시 나오라고 했는데 반강제로 인터뷰를 하게 되었다. 원래 인터뷰 할 생각이 없었지만 이왕 하게 된거 제대로 해보자 하고 오래 생각을 하고 말을 했는데 카메라 감독님이 말 잘 한다고 해주셔서 좋았다.

저녁에는 독서골든벨을 했는데 운이 좋게도 거의 모든 문제를 맞아 32팀중에 3등을 하고 프랭크버거 쿠폰을 받게 되어 행복했다.

마이다스 IT와 카카오뱅크

셋째날 아침에는 일어나서 밥을 먹자마자 판교로 출발했다. 잠을 푹 자고 일어나도 대전이었고 버스 타는게 힘들었지만 '드디어 판교에 가본다!!' 라는 생각으로 4시간을 버티며 도착했다.

마이다스 IT 라는 회사에 가서 점심을 먹었는데 밥이 정말 맛있었다. 이렇게 맛있는데 세끼나 나온다는 사실을 듣고 충격받았다.

마이다스에서는 LLM기술과 뉴로우-S 소개를 들었다.

LLM기술 시간에는 LLM의 정확한 정의와 머신러닝과 딥러닝의 차이점을 들었다.

나는 머신러닝을 직접 사용해봤음에도 딥러닝과의 차이점을 몰랐는데 머신러닝은 사람이 데이터의 특징을 설계하고 보다 적은 데이터로 학습이 가능하며 간단한 문제 해결에 적합하고, 딥러닝은 자동으로 특징을 추출하고 상대적으로 대량의 데이터와 복잡한 문제 해결에 적합하다는 정리 덕분에 정확한 개념을 정립할 수 있어서 좋았다.

뉴로우-S는 올해부터 전국 7개 마이스터고등학교에 도입되는 역량 강화 서비스인데 간단하게 정리하면 1일 1회고를 적게 도와주고 일상생활이나 팀프로젝트, 면접 등의 상황을 AI와 대화하며 소통능력을 기를 수 있는 기능이 있는 서비스이다.

곧 학교에 도입된다고 하는데 매일 저녁에 회고를 강제로 해야하는 것이 틀을 잡아주는 것을 좋아하는 나에겐 가장 큰 장점으로 다가왔다.

마이다스에서의 일정을 마치고 카카오뱅크로 이동한 뒤 카카오뱅크에서 회사 소개를 듣고 카카오뱅크에 있으면 좋겠다 하는 기능을 기획하는 활동을 끝으로 대구로 내려오게 되었다.

4일차와 테스트들

4일차에는 아침부터 수학테스트를 치게 되었다. 코딩테스트만 생각하고 있다가 수학테스트를 까먹고 있었는데 방학때 열심히 수학학원을 다닌 결과인지 잘 보게 되었다.

오후에는 6기 선배님이 오셔서 특강을 하셨는데 학교 오기 전에 소마고 선배님들의 블로그 글을 보며 특강하러 오신 선배님의 글과 전자책까지 읽었었는데 직접 보고 학교생활 관련 정보들을 정리해서 설명해주셔서 좋았다.

저녁에는 코딩테스트도 보았는데 정말 아깝게 한 문제를 틀려 너무 아쉬웠다. 이중for문이나 재귀함수를 사용해서 팩토리얼을 계산하는 문제였는데 너무 어렵게 생각하는 바람에 30분동안 고민하다가 결국 풀지 못했다. 하지만 5명만 맞췄다는 문제를 풀어서 기분은 좋았다.

대망의 마지막 날

마지막 날에는 독서토론을 하고 발표를 했는데 친구들이 발표 잘 한다고 칭찬해줬었다. 비포스쿨의 마지막 시간으로는 우수멘티 시상이 있었는데 감사하게도 상을 받게 되어서 기뻤다 부상으로는 맥북거치대를 받았다. 개학하니 전교생한테 돌리긴 했지만

D-1

비포스쿨이 끝난 후 집에서 html css 복습도 하고 밀린 수학학원도 다니며 정신없이 시간을 보내다 금방 일주일이 지나가서 기숙사에 갈 시간이 되었다. 방배정은 가장 큰 방에서 3명만 쓰는 좋은 방이 걸리고 심지어 친한 친구까지 같은 방이 되어서 기분이 매우 좋았다.

드디어 입학!

기대하던 첫 날

첫 등교를 하는데 기숙사에서 1분만에 교실까지 갈 수 있어서 느낌이 신기했다 반 친구들은 정말 착하고 말 잘 듣는 친구들이 걸려 다행이다 생각했고 임시반장을 뽑는데 25%확률을 극적으로 뚫고 뽑혀서 다행이었다.

입학식을 하고 온 뒤에는 여러 수업 OT를 듣고 대망의 맥북을 받으러 가게 되었다!! 작년 선배들은 M2에어를 받았지만 10기는 프로M4를 받게 되어 정말 말로 표현할 수 없이 기뻤다 좀 무겁긴 하지만

기숙사 임시자치와 반장

입학을 하고 바로 다음날 기숙사 임시자치선거를 했다.

나는 입학하기 전부터 기숙사 자치를 꼭 하고싶었어서 출마했다. 남자는 총 3명을 뽑는데 12명이나 지원해서 4:1이라는 어마무시한 경쟁률이 나오게 되었다.

후보 포부를 말하는데 이때까지 이렇게 떨린적이 있었나 할 정도로 긴장되었다. 반장선거와는 비교가 안될 정도다. (1학년 전교생 앞에서 말을 하니..)

다행히 친구들이 많이 뽑아줘서 임시자치에 당선되었다

자치위원을 하면 매일 1시 가까이 되어 자고 6시 반쯤에 일어나야 해서 몸은 정말 힘들지만 기숙사 순찰도 돌아보고 늦게까지 선배들과 이야기도 하며 나름 재밌게 지내던 중 반장과 자치위원은 겸임이 안된다는 슬픈 소식을 듣게 되었다.

자치위원을 할 지, 반장을 할 지 일주일동안 정말 고민했는데 자치는 체력문제와 당선이 될거라는 보장이 없어서 반장을 하기로 했고 반 친구들이 임시반장 할 때 좋게 봐줘서인지 무투표로 반장 3연임을 하게 되었다.

반장이 된 당일, 자치 회의를 하려고 사감실에 들어가려는데 사감선생님께서 반장이 됐다는 소식을 들으시고 이제 안나와도 된다고 하셨다. 임시자치도 못한다니 정말 아쉬웠다.

전공수업

올해 대소고 1학년들은 파이썬(7), 웹기초(4), 컴퓨터시스템일반(4) 과목을 듣는다.

파이썬

파이썬 수업은 비포스쿨때 미리 배우고 와서 그런지 정말 일부 내용들을 제외하고는 거의 다 아는 내용이고 기초중의 기초를 배우는거라 나는 주로 수업이 시작하면 오늘 나가는 진도만큼 문제를 풀어놓고 자습을 한다. (수업시간에 글쓰고있어도 뭐라고 안하시는 선생님 정말 감사합니다)

웹기초

웹기초 과목은 말그대로 html, css, js의 기초를 배우는 과목인데 웹기초도 파이썬과 마찬가지로 거의 다 아는 내용이기 때문에 복습 형식으로 듣고있다. 선생님이 매일 배운 내용으로 간단한 페이지를 만드는 실습을 시키시는데 내가 정확하게 어떤 부분이 약한지 알 수 있어서 만족한다.

컴퓨터시스템일반

컴퓨터시스템일반은 중학교때 배웠던 정보교과의 확장판 느낌이다. 진법, 2진수의 연산, 보수 등을 배우는데 처음에는 수학과 정말 비슷해서 쉬웠지만 가면 갈수록 수학과는 살짝 다른 면이 있어 헷갈리기도 한다.

일반교과

대소고에서는 다른 일반고들과 마찬가지로 일반교과목도 배우는데 솔직하게 말하면 이렇게 배우는게 도움이 되는지 모르겠다. 국어는 없어지고 수학은 난이도가 너무 쉽고 사회는 수업이라기 보다 강연듣는 느낌, 과학도 대충 훑고 지나가는 느낌이다. 아직 시험도 치지 않았고 제대로 된 수행평가도 보지 않았기에 딱 이렇다 단정지을 순 없지만 적당히 공부하며 내신을 챙기는 쪽으로 갈 것 같다.

방과후

월요일, 목요일 8-9교시에는 스포츠, 수요일 8-9교시에는 정보처리기능사 필기 방과후를 한다. 작년에는 월요일 목요일 나눠서 각각 음악, 스포츠를 했었지만 올해부터는 짝수반은 1학기때 스포츠, 홀수반은 음악을 하고 2학기때 체인지 하는 방식으로 바뀌었다.

나는 가위바위보를 두 번이나 이겨 검도에서 살아남았지만 검도를 선택한 것을 정말 후회하고 있다. 1시간 40분동안 쉬는시간 없이 강당에서 맨발로 활동하고 생각보다 힘이 많이 들어간다. 그리고 가장 중요한 것이 검도복을 입고 수업을 해야 해서 수업전후로 10분씩 시간을 잡아먹는것이 정말 싫다. 빨리 플루트나 기타 했으면

동아리

동아리는 특별한 일이 없으면 월 화 수 10-11교시와 금요일 5교시, 방과후가 없는 날에는 8-9교시에도 동아리실에 간다. 나는 B1ND라는 동아리에 인턴으로 있는데 바인드에서는 '단디'라는 프로그램을 통해 신입생들에게 웹, 서버, 안드로이드, ios를 모두 한번씩 간단하게 배워보고 자신에게 맞는 전공을 찾을 수 있게 도와준 후, 찾은 전공 공부를 시켜준다.

나는 원래 전공을 웹으로 정하고 학교에 들어왔기에 전공 고민은 없었지만 단디를 하면서 서버(자바)를 배우니 확실하게 나는 서버쪽은 아니구나 라는 생각이 들게 되었다. 자바는 단디 하기 전에도 배웠는데 이렇게 어렵게 느껴지는게 맞나 싶은 생각도 든다.

ios와 안드로이드는 바로 구현이 되는게 정말 매력적이어서 나중에 시간이 나면 꼭 배워보고 싶은 생각이 들었다.

단디 전공 체험이 끝난 후 전공 조사를 했는데 10기 13명중에 웹은 단 2명, 서버가 7명이나 나와버려서 선배님들이 당황하셨다. 급하게 웹과 앱 선배님들이 전공 홍보를 하시고 재조사를 해서 다행히 최종 전공은 웹 4명 서버 4명 안드 2명 ios 3명으로 밸런스가 맞춰졌다.

개인 공부

나는 학교에 오기 전에 C언어와 웹기초 공부를 어느정도 하고 왔기에 학교 수업을 따라가는 데에는 전혀 문제가 없어서 개학 하고 부터는 전공수업시간과 10-11교시, 심자1,2를 거의 빠짐없이 공부를 하고 있다.

노마드코더 강의를 보며 JS 공부를 하는데 영어강의이지만 완벽한 한국어 자막 덕분에 오히려 다른 강의들보다 이해가 더 잘되는 느낌이다.

알고리즘 공부도 해야하는데 문제를 풀려면 가장 간단하게 -> 쉽게 -> 보통 -> 어렵게 이런 순으로 풀이 시도를 해야하는데 언제부턴지 내가 생각할 수 있는 선에서 가장 어렵게 풀려고 시도하고 안되면 점점 난이도를 내리다가 머리가 아파져 풀이를 포기하고 이렇게 무한반복이 되고 있어서 단순하게 사고하는 방식을 길러야 할 것 같다. 글을 쓰는 시점에서는 백준 브론즈 난이도부터 천천히 다시 풀려고 시도하고 있다.

그 외 이런저런 이야기

정말 간절하게 원했던 학교에 오고 난 후 1달정도 지났는데 이 학교에 와서 느낀거 중에 가장 큰 것은 시간이 정말정말 빠르게 가고 정상적으로 사고를 못하게 바뀌어가고 있는거 같다.

6시50분기상 12시취침이라는 정말 빡센 일정과 부족한 자유시간 때문인지 몸도 많이 피곤해지는거 같기도 하고 친구들이 "너 상태 안좋아보인다", "사람 자체가 피곤해보인다" 이런 소리를 많이 들어서 실력 기르는거도 중요하지만 건강도 챙기면서 지내야겠다고 생각했다.

그리고 또 다른것은 입을 최대한 닫고 있어야 한다는 건데, 학교 오기 전에 선배들의 입을 무겁게 하라는 글을 보고 그정도인가 생각하며 지냈는데 정말 입을 무겁게 해야 한다. 이 학교에 와서 내 생각을 다른 사람에게 말했다가 좋은 일이 생긴적이 단 한번도 없다.

그래도 아직까지는 우리 학교에 만족한다. 반 친구들은 학교생활 10년중에 가장 말을 잘 듣고 반에서 개발이야기하는것과 비슷한 전공을 가지고 24시간 붙어서 생활하는거도 좋고 이건 장점이자 단점이지만 일반고에 비해서 정말 다양한 경험을 할 수 있기도 하고 빡센 시간표이지만 틀에 잡힌 생활을 할 수 있어 마음만 먹으면 정말 실력을 기를 수 있을 것 같다는 생각이 든다.

마무리

제대로 된 글을 처음 쓰고, 총 세 차례에 걸처서 썼기 때문에 각 파트마다 말투가 달라지기도 하지만 글을 쓰며 제 생각을 정리할 수 있어서 좋은 경험을 한 것 같습니다.

저는 이제 막 새로운 시작을 준비하고 있고, 지금까지 쌓은 소중한 경험들과 앞으로 쌓아나갈 배움을 바탕으로 최선을 다해 성장할 것이니 기대하고 지켜봐주세요.

여기까지 총 8천자 마크다운 1만자에 달하는 길고 긴 글을 읽어주신분들 정말 감사합니다.

• 깃허브
• 포트폴리오
• 플로우 1217 채근영