Styled Components의 강점 중 하나는 테마를 제공하는 것이다. 컨텍스트 API를 통해 아래에 있는 모든 React구성 요소에 테마를 적용시킬 수 있다.

이를 활용하면 다크모드, 라이트모드 등 다양한 테마를 홈페이지에 적용시킬 수 있다. (만약 CSS를 활용했다면..? 고생스러운 일이 아닐 수 없다.)

ThemeProvider

Styled Components에서는 ThemeProvider에 속한 모든 컴포넌트에게 theme속성을 가지게 해준다. (Context API)

기본 사용방법은 다음과 같다.

// App.js
import styled, { ThemeProvider } from "styled-components";

const Wrapper = styled.section`
  background-color: ${props => props.theme.bgColor};
  color: ${props => props.theme.color};
  padding: 4em;
  text-align: center;
`;

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
`;
const theme = {
  bgColor: "black",
  color: "white"
}

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Wrapper>
        <Title>안녕하세요!</Title>
      </Wrapper>
    </ThemeProvider>
  );
}
export default App;

원하는 상위 컴포넌트에서 <ThemeProvider theme={사용자 정의}> theme props를 전달하여 하위 컴포넌트에서 받아 사용이 가능하다.

darkmode, lightmode

ThemeProvide를 사용하면 간단하게 darkmode와 lightmode를 사용할 수 있다.

//theme.js
export const dark = {
    bgColor: "black",
    color: "white"
}

export const light = {
    bgColor: "white",
    color: "dark"
}

// App.js

import styled, { ThemeProvider } from "styled-components";
import GlobalStyle from "./GlobalStyle";
import { useState } from "react";
import { dark, light } from "./theme";

const Wrapper = styled.section`
  background-color: ${props => props.theme.bgColor};
  color: ${props => props.theme.color};
  padding: 4em;
  text-align: center;
`;

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
`;

function App() {
  const [isDark, setIsDark] = useState(true);
  const handleMode = () => setIsDark(!isDark);
  const theme = isDark ? dark : light;
  return (
    <ThemeProvider theme={theme}>
      <GlobalStyle/>
      <Wrapper>
        <Title>안녕하세요!</Title>
      </Wrapper>
      <button onClick={handleMode}>모드변경</button>
    </ThemeProvider>
  );
}
export default App;

다음과 같은 방식으로 쉽게 다크모드 및 라이트모드를 구성할 수 있다. 추후 isDark 변수는 Redux와 같은 상태 관리 라이브러리로 제어할 수 있다.

GlobalStyle

만약 Theme을 활용하지 않고 모든 요소들에게 스타일을 적용시킬려면 어떻게 하면될까? GlobalStyle을 활용하면 모든 요소들에게 스타일을 줄 수 있다.

// GlobalStyle.js
import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
  html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
        display: block;
    }
    body {
        line-height: 1;
    }
    ol, ul {
        list-style: none;
    }
    blockquote, q {
        quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
`;

export default GlobalStyle;

//App.js
function App() {
  return (
    <ThemeProvider theme={theme}>
      <GlobalStyle/>
      <Wrapper>
        <Title>안녕하세요!</Title>
      </Wrapper>
    </ThemeProvider>
  );
}

GlobalStyle은 createGlobalStyle를 사용하여 생성하면 된다. 해당 내용은 css reset에 관한 내용으로 전체적인 요소에 적용할 스타일을 넣으면 된다. 또한 <GlobalStyle/>은 최상단에 위치시켜야 전체적인 요소에 적용시킬 수 있다.

참고

공식문서

공식문서에서는 다음과 같이 설명하고 있다.

Visual primitives for the component age. 구성 요소에 대한 시각적 기본 요소.

ES6과 CSS의 최상의 비트(?)를 사용해서 스타일링하는데 스트레스를 날릴 수 있다.

이렇게만 설명하면 크게 와 닿지 않으니 다음 예제를 확인해보자.

기존 방식

.button {
    box-sizing: border-box;
    margin: 10px;
    padding: 15px 30px;
    border-radius: 15px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

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

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

import "./App.css"

<div>
  <button className="button button--color-white">하얀색</button>
  <button className="button button--color-black">검은색</button>
</div>

styled-components방식

const Button = styled.button`
  box-sizing: border-box;
  margin: 10px;
  padding: 15px 30px;
  border-radius: 15px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  background-color: ${props => props.bgColor};
  color: ${props => props.color};
`;

<div>
  <Button bgColor="white" color="black">하얀색</Button>
  <Button bgColor="red" color="white">빨간색</Button>
  <Button bgColor="black" color="white">검은색</Button>
</div>

Button base에 스타일링을 추가하려면 다음과 같은 방법이 있다.

1. class 추가
2. style={isBlack ? "{background-color: "black"; color:"white";}": ""}

만약 한 버튼이 상황에 따라 여러 색상으로 바뀐다면? 지저분한 코드가 더 추가될 뿐이다.

Styled-components를 이용하면 props를 통해 위의 상황을 쉽게 해결할 수 있다.

styled-components 동기부여

• 자동 CSS 페이지에서 랜더링되는 구성 요소를 추적하고 자동으로 스타일을 삽입해 줍니다.
• 클래스 이름 버그 없음 styled-components는 컴파일 때 자동으로 고유한 클래스 이름을 생성하여 중복, 철자오류에 대해 걱정할 필요가 없습니다.
• 단순 동적 스타일링 수십 개의 클래스를 수동으로 관리하지 않고도 props 또는 전역 테마를 기반으로 구성 요소를 스타일링할 수 있습니다.
• 손쉬운 유지 관리 스타일을 찾기 위해 다른 파일을 검색할 필요가 없어 유지보수하기 쉽습니다.
• 자동 공급업체 접두사 CSS를 현재 표준으로 작성해도, 자동으로 변환해 줍니다.

설치하기

# npm
npm install styled-components

# yarn
yarn add style-components

# 만약 typescript를 사용하신다면

npm install @types/styled-components
or
yarn add @types/styled-components

시작하기

Basic

기본적은 구조는 다음과 같다.

// styled.(구성요소)(백틱);
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;  
`;

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

function App() {
  return (
    <Wrapper>
      <Title>안녕하세요!</Title>
    </Wrapper>
  );
}
export default App;

const (변수명) = styled.(구성요소)(백틱)(백틱); 사용하는 것은 기존 컴포넌트 방식과 동일하다.

props

import "./App.css"
import styled from "styled-components";

const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
  text-align: center;
`;

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

const Button = styled.button`
  /* Adapt the colors based on primary prop */
  background: ${props => props.palevioletred ? "palevioletred" : "white"};
  color: ${props => props.palevioletred ? "white" : "palevioletred"};

  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;


function App() {
  return (
    <Wrapper>
      <Title>안녕하세요!</Title>
      <Button>기본</Button>
      <Button palevioletred>palevioletred</Button>
    </Wrapper>
  );
}
export default App;

구성요소에 palevioletred props를 추가하였다. 해당 Button에서는 props를 받을 수 있으며 사용 방법은 위와 같이 활용할 수 있다.

상속

import "./App.css"
import styled from "styled-components";

const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
  text-align: center;
`;

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

const Button = styled.button`
  color: palevioletred;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid  black;
  border-radius: 3px;
`;

const TomatoButton = styled(Button)`
  color: tomato;
  border-color: tomato;
`;

function App() {
  return (
    <Wrapper>
      <Title>안녕하세요!</Title>
      <Button>기본</Button>
      <TomatoButton>토마토</TomatoButton>
    </Wrapper>
  );
}
export default App;

상속하는 방법은 다음과 같다. styled.(부모 요소)

const ReversedButton = props => <Button {...props} children={props.children.split('').reverse()} />

위와 같이 사용자 정의 요소를 추가해도 정삭적으로 작동합니다.

마무리하며

styled-components를 사용하면 기존 CSS에 비해 코드를 재활용하여 쉽게 스타일링을 할 수 있습니다.

최근 화이트모드, 다크모드를 사용할 수 있는 홈페이지가 많이 만들어지고 있는데 이때 사용하면 쉽게 적용시킬 수 가 있습니다.

참고

공식문서

본 코드는 C언어 기준으로 설명된 것이며 MAC의 man을 참고하고 있습니다. (ver 12.2)

isalpha

다음 함수는 해당 문자가 알파벳인지 판단하는 함수이다.

man의 설명으로는 isupper(), islower()의 해당하는 문자인지 판단한다.

함수 원형

int isalpha(int c);

인자 값

unsigned char or EOF로 표현 가능한 (int c) 의 형태로 들어가게 되며, C언어에서 char형식의 문자가 int형으로 캐스팅되면 ascii코드로 변환하여 들어가게 된다.

리턴 값

true, false 즉 1과 0의 값을 리턴한다.

풀이

A-Z의 ascii || a-z의 ascii 값에 c가 포함되는지 확인.

isdigit

다음 함수는 해당 문자가 숫자인지 판단하는 함수이다.

man의 설명으로는 isupper(), islower()의 해당하는 문자인지 판단한다.

함수 원형

int isdigit(int c);

인자 값

unsigned char or EOF로 표현 가능한 (int c) 의 형태로 들어가게 되며, C언어에서 char형식의 문자가 int형으로 캐스팅되면 ascii코드로 변환하여 들어가게 된다.

리턴 값

true, false 즉 1과 0의 값을 리턴한다.

풀이

0-9의 ascii값에 c가 포함되는지 확인.

isalnum

다음 함수는 해당 문자가 알파벳 또는 숫자인지 판단하는 함수이다.

man의 설명으로는 isalpha(), isdigit()의 해당하는 문자인지 판단한다.

함수 원형

int isalnum(int c);

인자 값

unsigned char or EOF로 표현 가능한 (int c) 의 형태로 들어가게 되며, C언어에서 char형식의 문자가 int형으로 캐스팅되면 ascii코드로 변환하여 들어가게 된다.

리턴 값

true, false 즉 1과 0의 값을 리턴한다.

풀이

1. A-Z의 ascii || a-z의 ascii || 0-9의 ascii값에 c가 포함되는지 확인.
2. isalpha(c) || isdigit(c)

isascii

다음 함수는 해당 문자가 ascii값에 포함되는지 확인하는 함수이다.

함수 원형

int isascii(int c);

인자 값

unsigned char or EOF로 표현 가능한 (int c) 의 형태로 들어가게 되며, C언어에서 char형식의 문자가 int형으로 캐스팅되면 ascii코드로 변환하여 들어가게 된다.

리턴 값

true, false 즉 1과 0의 값을 리턴한다.

풀이

1. 문자 c가 0 ~ 0177 값에 포함되는지 확인한다. (8진법)
2. 문자 c가 0 ~ 127 값에 포함되는지 확인한다. (10진법)

isprint

다음 함수는 해당 문자가 출력가능한 문자인지 판단하는 함수이다.

man의 설명으로는 공백을 포함한 출력가능한 문자인지 판단한다.

함수 원형

int isprint(int c);

인자 값

unsigned char or EOF로 표현 가능한 (int c) 의 형태로 들어가게 되며, C언어에서 char형식의 문자가 int형으로 캐스팅되면 ascii코드로 변환하여 들어가게 된다.

리턴 값

true, false 즉 1과 0의 값을 리턴한다.

풀이

문자 c가 32 - 126에 포함되는지 확인한다.

6기 1차로 2022.01.03 ~ 2022.01.28 동안 진행한 후기입니다.

4주차 후기

대망의 마지막 주차인 4주차입니다!! 🥳 4주차에는 개인 과제 vs BSQ로 나누어 진행하는데 저희 팀은 개인 과제를 빠르게 끝내고 BSQ를 하자하여 C08 C09를 빠르게 진행하였습니다. 다른 피시너분들도 대부분 진도가 비슷했는데, 전 RUSH에서 다 0점을 받아 초초함을 느끼며 만점을 위해 열심히 과제 풀이를 진행하였습니다.

목요일날 BSQ를 피시너분들이 평가하는데 개인과제 및 BSQ 평가 받으시려는 분들이 많아 엄청난 티켓팅을 해야합니다. 무한 새로고침!

하지만,

BSQ 0점... norminette error... 가 나왔네여

동료 평가에서는 만점이였고 다시 한번 깃 클론해서 norminette 확인했는데 에러라니.. 너무 허무한 결과가 나왔습니다..

최종 시험

최종 시험은 10-18시까지 8시간 동안 진행되며, 중간에 나올 수 없었습니다. 저는 미리 스타벅스에서 동료들을 만나 간단한 샌드위치를 먹고 진행하였습니다.

최종 시험에서 70점 이상을 받아야 합격한다는 썰이 있어서 전 최선을 다했습니다. 아무래도 팀 과제 0점이 커서 100점 목표로 시험을 진행했습니다. (대부분 70-80점 정도 받고 시험 종료 후 나가십니다. 13-14시 정도에 마무리하네요.)

최종 결과는 90점으로 마무리했습니다.

최종 결과

과제 : C07을 제외한 C09까지 진행하였습니다. 시험 : exam00 - 80 exam01 - x exam02 - 84 final exam - 90 팀과제 : 0점 (전부 참여하긴함.) LEVEL : 9lv 3%

9lv을 넘겨 다행이였지만, 아쉬움이 많이 남았습니다. (평균 9lv - 10lv정도 입니다.)

라피신을 하면서 느낀점

42Seoul의 본과정을 하기위한 첫 걸음인 라피신을 하면서 배운 것이라면 동료학습을 뽑을 것 같습니다. 혼자 진도를 잘 나가시는 분들도 있지만, 동료들과 함께 학습하면서 토론과 평가를 진행하는와 배우는게 많이 있었습니다. 라피신에서 코딩쪽으로 실력이 올라가는 것보다 동료들과 함께하면서 같이 성장할 수 있다는 생각을 하게된 한달이였습니다. (좋은 문화를 경험할 수 있는 기회)

결과

결과는 최종 합격으로 42서울의 카뎃이 되었습니다!! 🥳🥳🥳🥳🥳 개발자라는 꿈을 가진 동료들과 2년 간 잘 공부해서 더욱 성장하는 개발자가 되겠습니다.

6기 1차로 2022.01.03 ~ 2022.01.28 동안 진행한 후기입니다.

2주차 후기

2주차 쯤 아이맥 사용과 zsh사용에 익숙해지며, 과제 진행에 대해 어느정도 이해가 되셨을 겁니다!! 이제 익숙한 C언어 과제를 풀면서 진도를 쭉 빼는 시간이였습니다. 저는 월-목 동안 C02까지 채점받아 LV4 78점 이였습니다.

C02는 문제수가 엄청 많았는데, 꼼꼼하게 NORM체크와 GCC체크를 하시는 것을 추천합니다.

꿀팁

저는 zsh를 사용하며 .zshrc 파일을 생성하여 아래의 명령어를 추가했습니다.

alias norm="norminette -R checkHeader"
alias gcc="gcc -Wall -Wextra -Werror"

추가 후 source .zshrc 명령어를 입력하시고 터미널을 껏다 켜주시면 됩니다.

위의 명령어를 추가하면 norminette나 gcc 할 때 옵션을 추가로 넣지 않아도 되며, 확실하게 평가를 받을 수 있습니다.

시험 취소 이슈

저희 기수 exam01에서는 서버 문제로 인해 시험이 중단되었습니다. 규정에 따르면 시험 시작 후 2시간 동안 서버가 고쳐지지 않는다면 자동 중단되었습니다. (시험 서버는 프랑스 서버이며, 한국에서 따로 조치를 하기 어렵다고 합니다. 시차 등의 문제) 기술적인 이슈로 시험을 치루지 못하면 1차와 2차 인원을 분리 선발한다고 얘기들었습니다.

Rush01

Rush01의 문제는 스토쿠 알고리즘과 유사한 문제가 나왔습니다. 이전 Rush00과 다르게 난이도가 있었으며, 시간 복잡도를 고려해야했습니다. (저희 팀은 7x7까지 가능했습니다 - 9x9까지하면 보너스 점수가!!) 하지만, 입력에 대한 예외처리가 부족하여 0점을 맞게 되었을 때 멘탈이 많이 흔들렸습니다.. 토일 빡시게 준비했는데... 0점이라니!!! 다들 입출력에 관한 예외를 잘 처리하시기 바랍니다.

2주차 진도

과제 : C02까지 클리어 시험 : 0점 (서버 이슈) RUSH : 0점 LEVEL : 4lv 78%

3주차 후기

3주차에는 육체적으로 많이 힘들어지는 시기였습니다. 맨날 출퇴근을 하여 밤늦게 들어가니 지치지만, 같이하는 동료가 있기에 힘이 났던 시기였습니다.

3주차가 진행되면서 다른 사람들과 진도의 차이, 레벨의 차이 등 서로 예민할 수도 있습니다. 하지만, 신경쓰지말고 자신의 페이스를 잘 찾는걸 추천드립니다. 또한 평가가 마르게 되며, 엄청난 평가 티켓팅이 발생합니다! (사전에 평가포인트를 많이 모아두세요!)

또한 선택과 집중이 필요한 시기입니다. 모든 C과제를 풀 수 없으면 풀 수 있는 과제 먼저 빠르게 풀어야합니다! (저는 C07을 포기하고 C09먼저 풀었습니다.) Rush와 BSQ에 관해서도 포기할지, 투자를 할지 선택해야합니다.

저는 Rush02를 포기하고 개인과제와 BSQ에 몰입하였습니다.

3주차 진도

과제 : C06까지 클리어 시험 : 84점 RUSH : 0점 LVEL : 7lv 20%

6기 1차로 2022.01.03 ~ 2022.01.28 동안 진행한 후기입니다.

라피신 1주차

첫날 O.T에는 빨리가도 되고 늦게 가도 됩니다! 저는 2시30분쯤 강남 클러스터에 도착하여 진행하였습니다. 처음 가면 간단한 신상 정보를 알려주고 프로필 사진도 찍습니다. (웹캠으로 찍어 사진이 아주... 😵) 클러스터에 도착했을 때 아이맥이 두둔!! 엄청 납니다. ( 처음 mac os를 사용하면서왜 애플애플 하는지... 느꼈습니다. )

첫날 받은 출입 카드와 아이맥

꿀팁!

처음 로그인 시 바탕화면에 유튜브 링크가 있습니다. 유튜브 링크로 들어가 동영상 시청 후 진행하는 것이 좋습니다!

처음 가게되면 git ssh-keygen 부터 설정하게 됩니다. (모든 과제는 git으로 채점합니다.)

42서울의 모든 과제는 친절하지 않습니다. 따라서 주위 피시너분들과 많이 소통해야합니다! 어색해도 말 걸고 친해집시다 ㅎㅎ.. 저는 옆에 계신분들이랑 한달을 함께하고 지금도 함께하고 있습니다.!

기본 설정이 끝났으면 Shell00 부터 과제를 시작하게 됩니다! (문제는 친절하지 않으니 영문버전과 한글버전 둘 다 확인하세요!)

과제를 통과하기 위해서는 한 과제당 2번의 평가를 받아야합니다. 1평가당 1개의 포인트가 소모됩니다! 예약 취소 시에도 포인트가 차감되며 포인트는 다른 동료를 평가해주면 1개의 포인트를 획득할 수 있습니다!!

포인트 이벤트가 있습니다! 이벤트 기간에는 평가 시 2개의 포인트를 획득할 수 있으며, 평가 포인트없이 평가를 받으실 수 있습니다!

평가 포인트가 많으시면 기부도 할 수 있습니다! 기부를 많이하게되면 포인트가 쌓여 다시 이벤트가 진행됩니다!

평가 시 주의사항을 잘 읽어보세요! 잘 읽지 않고 평가시 T.I.G를 받게됩니다..

과제를 시작한 당신에게! 꼭 100점에 목매일 필요는 없습니다! 또한 재도전한다해서 감점도 없습니다. 도전에 두려워하지 마세요!!

100점 맞느라 시간을 많이 버리시는 분들도 있습니다!! 모르는 문제는 빠르게 넘어가시길..

또한 평가 중 한 문제가 틀릴 시 남은 문제도 다 0점처리됩니다. 모르는 것은 바로바로 동료에게 물어보세요!

첫 주차는 대부분 월-목까지 Shell01까지 끝내고 토-일은 rush를 진행합니다.

rush를 꼭해야하나요?

하는 것을 추천드립니다! rush를 진행하게되면 과제보다 많은 점수를 획득합니다. 저는 모든 rush를 신청했지만 다 0점처리됬습니다 하하.

스케줄 관리

1주차 때 느낀게 스케줄 관리를 빡시게 해야합니다. 보통 피시너일 때 하루에 10~11시간 정도 클러스터에서 과제를 푸는데 체력소모가 장난이 아닙니다. 저는 점심을 먹고 13시에 집에서 출발해 14:30분쯤 도착하여 23시까지 했습니다 (집 도착해서 씻고 누우면 12시 30분..)

T.I.G란?

42서울에서는 T.I.G라고 규칙을 위반할 시 2시간의 활동을 진행하게 됩니다!

(처음에는 규칙 설명도 불친절하고 받는 이유를 모르는 경우가 허다합니다. 하지만 잘 생각해보면 이유가 다 있습니다.)

저희 기수는 2틀차에서 100여명 정도 한번에 T.I.G를 받았던 경험도 있습니다...

T.I.G를 받게 되면 다양한 활동(?)을 진행합니다. 또한 2시간 동안 로그인이 불가하니.. 안받는 것을 추천드립니다.

T.I.G를 많이 받았다고 평가에서 불이익을 받지 않습니다. (큰 위반이 아닌이상..) 받았다면 맘편히 활동을 진행하면 됩니다.

저도 첫주에 2번의 T.I.G를 받았으며 그 이후로는 대부분 받지 않습니다.

대망의 시험!!!

시험은 1~5시까지 진행됩니다!

시험 등록 무조건 하시길.. 2번해야합니다. 등록을 안할 시 로그인이 되지 않습니다.

시험 시작 후 로그인이 되셨다면 설명을 자세히 읽어보세요! 로그인하였다고 시험을 시작한 것은 아닙니다!

10분이내 시험을 시작못하면 강제 퇴실이 됩니다. 실제로 첫 시험에서 30%이상이 강제 퇴실 하였습니다...

1 주차 진행사항

과제 : shell00, shell01 100점

rush : 0점

시험 : 80점 Level : 2lv 74%

42서울은 프랑스 42에꼴로 부터 시작된 소프트웨어 인재양성 프로그램 중 하나입니다.

주요 특징으로는 교수, 교재, 학비가 없는 3無 교육이라는 점입니다.

https://42seoul.kr/seoul42/main/view

신청 방법

42서울을 신청하게되면 크게 2가지 단계로 진행되어 최종 본과정에 들어갈 수 있습니다.

1. 신청단계

신청단계에서는 온라인 신청, 온라인 테스트, 체크인 미팅이 진행됩니다.

1-1. 온라인 신청 및 온라인 테스트

온라인 신청 및 온라인 테스트는 언제나 볼 수 있으며, 이메일 당 한번의 시험기회를 주어집니다. 코딩 없이 논리력을 보는 테스트로

간단한 게임으로 진행됩니다.

• 2개의 게임에서 level 10 이상이면 대부분 통과됩니다.

1-2. 체크인 미팅

여기서 부터 엄청난 티켓팅 실력이 필요합니다!! 선착순으로 체크인 미팅 신청을 받으며, 간단한 신상정보를 확인하는 단계입니다.

저는 집 인터넷이 느려 피시방에서 진행하였으며, 로그인 대기상태로 기다리다가 해당시간에 로그인 후 절대 새로고침하면 안됩니다!

새로고침 시 대기 순서가 밀려날 수 있으며, 로딩을 계속 기다리면 저절로 되게됩니다.

2. 라피신 1개월 집중교육

라피신은 1개월 동안 Shell, C언어 과제를 학습하며 피신이 되기위한 마지막 테스트입니다!

라피신에 등록하기 위해서는 위의 체크인 미팅과 같이 티켓팅(?)을 해야합니다! (완전 빡셈)

2022년도 부터 모집인원 증가로 인해 비교적 쉬워졌지만, 어려운 것은 마찬가집니다.

라피신을 진행하게 되면 평가 목록이 무엇인지 모르지만! 다음과 같은 평가를 진행한다 말하고 있습니다.

1. 피시너가 2년의 기간동안 학습을 잘 할 수 있을까?

2. 42서울의 문화를 받아드리고 동료와 함께 성장할 수 있을까?

크게 2가지로 나뉘어지며, 실력이 좋으면 최종 합격될 확률이 높겠지만,

주로 동료 평가, 열정, 시험을 통해 평가하고 합격된다고 느꼈습니다.

42서울을 진행하게 된 계기

2021년도 취업준비를 진행하면서 CS나 사용하는 기술에 대해 얕은 지식을 가지고 있다는 것을 느꼈습니다.

부족한 부분을 알고 해당 부분만 집중적으로 공부하여 취업 준비를 할 수 있으나, 42서울을 진행하게되면 동료들과 함께하며 공부하는 것이 많은 도움이 될거라 생각하여 지원하게 되었습니다.

또한 취업 후에도 같은 42서울 동료들과의 개발자 커뮤니티는 도움이 될거라 생각하였습니다.

취업 준비를 바로 하실분들은 42서울보다는 데브코스나 우테코, 싸피 등 다른 프로그램이 어울릴 수도 있습니다!

QNA

• 대학교와 병행할 수 있나요?

크게 42서울에서 제한하지 않지만, 라피신 기간에는 클러스터 (학습 공간)에서 하는 것이 좋습니다!

(지원금 요건, 평가, 시험등의 이슈)

학생분들은 방학 기간이 어울리며 휴학을 추천드립니다!

• 비전공자도 가능할까요?

가능합니다! 하지만, 노력을 엄청 열심히 해야합니다.

비전공자와 전공자의 차이는 무시할 수 없습니다! (진도를 보면 전공자가 훨씬 빠릅니다.)

C언어에 대해 공부하시면서 라피신 지원하시면 좋을 것 같습니다.

마무리하며 42서울 프로그램은 국가에서 소프트웨어 인재 육성을 위해 지원하는 만큼 많은 혜택이 있습니다. 이러한 혜택을 누리며 공부까지할 수 있다니 1석2조 아니겠습니까!?

제 생각에는 일단 신청먼저 해보시고! 자신과 맞지않다면 그때 포기하셔도 괜찮으니 신청해보세요! 👍

동적타입

Javascript는 느슨한 타입의 동적 언어이다. 즉 변수는 어떤 특정 타입과 연결되지 않으며, 모든 타입의 값으로 할당이 가능하다.

let x = 42;
x = 'bar';
x = true;

원시타입 vs 객체타입

자바스크립트는 크게 원시타입과 객체타입으로 나뉜다.

• 원시타입
  • Boolean, Null, Undefined, Number, BigInt, String, Symbol
• 객체타입 (속성의 컬렉션)

원시타입

객체를 제외한 모든 타입은 불변 값을 정의한다. (변경할 수 없는 값)

Boolean

• Boolean타입은 논리 요소를 나타내며 true, false 두 가지의 값을 가질 수 있다.
• 0, -0, null, false, NaN, undeifined, "" 이라면 객체의 초기값은 false이다.
• 위의 예시 이외의 값은 true로 설정한다.
• 값이 undefined, null이 아닌 모든 객체는 조건문에서 true로 계산된다.
• 이는 값이 false인 Boolean객체도 포함된다.

const x = new Boolean(false);
if (x) {
    // 코드 실행 가능
}

const x = false;
if (x) {
    // 코드 실행 불가능.
}

Null

• Null은 어떤 값이 의도적으로 비어있음을 표현한다.
• Boolean 연산에서는 false로 취급한다.
• 특정 경우에, null은 원시적이지 않다. 모든 객체는 null값으로부터 파생되며 따라서 typeof 연산자에서는 object를 반환한다.

typeof null === 'object' // true

Undefined

• 변수를 선언한 후 값을 할당하지 않은 변수 혹은 값이 주어지지 않는 인수에 자동으로 할당된다.

  function test(x) {
    let y;
      console.log(x); // undefined
      console.log(y); // undefined
  }
  test();

Number

• Number 타입은 -(2^53 - 1) ~ (2^53 - 1) 까지의 값을 가질 수 있다.

• 부동소수점 숫자 외에도 +Infinity, -Infinity, Nan("Not a Number") 값을 가질 수 있다.

• 0, -0으로도 표현 가능하며 +0 === -0 은 참이다. ```

  42 / +0 Infinity 42 / -0

• Infinity

  #### BigInt

• 임의 정밀도로 정수를 나타낼 수 있다.

• Number의 안전 한계를 넘어서는 큰 정수도 저장과 연산을 할 수 있다.

• BigInt는 정수 끝에 n을 추가하거나 생성자를 호출해 생성할 수 있다.

• BigInt는 Number와 혼합해 연산할 수 없으며, 이때 TypeError가 발생한다.

  > const x = 2n ** 53n;
  9007199254740992n
  > const y = x + 1n;
  9007199254740993n

String

• String은 문자열을 나타내는 타입이며 인덱스 0 ~ 시작하게된다.
• C언어와 달리 Javascript 문자열은 불변하다.
• 따라서 문자열 연산이 필요하다면 원본 문자열을 사용해 새로운 문자열을 생성해야한다.

Symbol

• 변경 불가능하며 다른 값과 중복되지 않는 고유한 값이다.
• 충돌 위험이 없는 오브젝트의 유일한 프로퍼티 키를 만들기 위해서 사용할 수 있다.
• 심볼 값은 외부로 노출되지 않아 확인할 수 없다. (고유 심볼 값)
• ECMAScript 2015 (ES6)에 추가되었다.

객체타입

• 다양한 데이터를 담을 수 있다.
• 키(key)와 값(value) 쌍으로 구성된 프로퍼티를 여러 개 넣을 수 있는데 키(key)에는 문자형이 들어가야하며 값(value)에는 모든 타입이 들어갈 수 있다.

let user = new Object(); // 객체 생성자 문법
let user = {}; // 객체 리터럴 문법

예제

let user = {
     name: "sion", // 키: name, 값: "sion"
      age: 42,
      printInfo: function() {
        console.log("제 이름은 : " + this.name + " 나이는 : " + this.age + "입니다." );
    }
};

console.log(user.name); // sion
console.log(user["name"]); // sion
user.printInfo(); // 제 이름은 : sion 나이는 : 42입니다.

참고자료

mdn JavaScript docs 모던자바스크립트

make는 주어진 쉘 명령어들을 조건에 맞게 실행하는 프로그램이다. 이때 어떠한 조건으로 명령어를 실행할지 담은 파일을 Makefile이라고 부른다!

그러면 Shell Script를 사용하면 되지 않나? Makefile을 사용하면 변화가 생긴 소스파일만 컴파일 하지만, Shell Script를 사용하게 하면 전체를 다 컴파일 하게 된다. 따라서 Makefile을 사용하는게 효율적이다.

예제

NAME = libft.a
CC = gcc
CFLAG = -Wall -Wextra -Werror
RM = rm -f
AR = ar
ARFLAGS = rcs
INC = libft.h
SRCS = ft_isalpha.c ft_isdigit.c ...
OBJS = $(SRCS:.c=.o)

all : $(NAME)
$(NAME) : $(OBJ_FILES)
    $(AR) $(ARFLAGS) $@ $^
.c.o:
    $(CC) -I $(INC) $(CFLAG) -c -o $@ $<
clean:
    $(RM) $(OBJS)
fclean: clean
    $(RM) $(NAME)
re: fclean all
.PHONY : all clean fclean re

NAME (TARGET) : 최종적으로 만들어 낼 아카이브 명 CC : 컴파일 종류 CFLAG : 컴파일 옵션 RM : 삭제 옵션 AR : ar (여러 오브젝트를 하나의 아카이브로 묶음) ARFLAGS : ar 옵션

• r : 새로운 오브젝트 파일이면 추가, 기존 파일이면 치환
• c : 아카이브 생성시 표준 에러 진단 메세지 출력을 제한
• s : 아카이브 파일의 정보를 담는 인덱스를 생성한다.
  • 아카이브 인덱스를 생성하지 않으면 링크 속도가 느려진다.

INC : include 될 header file SRCS : 컴파일 할 c file OBJS : object 파일 $($srcs:.c=.o) 명령어를 통해 SRCS의 *.c 파일을 *.o로 변환 all : 결과물 .PHONY : 만약 target과 겹치는 파일이 있을 때 해당 명령어 실행이 불가능한 것을 막기 위함.

기본적인 명령어 형식

target : dependency1 ....2 .... n
    command1
        command2

$(NAME) : $(OBJ_FILES)
    $(AR) $(ARFLAGS) $@ $^

$(NAME) : target
$(OBJ_FILES) : dependency1
$(AR) $(ARFLAGS) $@ $^ : command 

해석 : 다음과 같은 명령어로. dependency를 이용해 target을 생성함.
실제 수행되는 명령어 : ar rcs libft.a ft_isalpha.o ...

$@ : 타켓 이름에 대응된다.

$< : 의존 파일 목록에 첫 번째 파일에 대응된다.

$^ : 의존 파일 목록 전체에 대응된다.

$? : 타켓보다 최신인 의존 파일에 대응된다.

$+ : $^ 와 비슷하지만, 중복된 파일 이름까지 모두 포함된다.

확장자 규칙 (Suffix rule)

파일의 확장자를 보고, 그에 따라 적절한 연산을 수행시키는 규칙이다.

.c.o:
    $(CC) -I $(INC) $(CFLAG) -c -o $@ $<

.c.o 표현은 .c와 .o 확장자를 가진 파일들을 확장자 규칙에 의거해서 처리될 수 있도록 표현된 것 이다.

즉 아래 명령어를 통해 .c를 컴파일해서 .o를 만들어 내는 루틴이 자동적으로 동작한다.
$(CC) -I $(INC) $(CFLAG) -c -o $@ $<

실제 수행되는 명령어 : gcc -I libft.h -Wall -Wextra -Werror -c -o ft_isalpha.a ... .a ft_isalpha.c ... .c 

참고

씹어먹는 C++ Makefile GNU Make 강좌