Karice의 여행 & 코딩 블로그

서문

2023.08.15 인프콘이 열렸다.

1년에 한번 밖에 없는데다가, 추첨이라서 가기도 힘든 기회인데 운좋게 당천되서 참가하게됐다.

최대한 즐기고 배우기 위해 여러글을 찾아봤었고, 나만의 간단후기와 함께 팁을 써보려고 한다.

처음 컨퍼런스 갔거나, 인프콘에 대해 궁금하면 많은 도움이 될 것이다.

1. 사전준비

이미 티켓팅은 마쳤다는 전제로 글을 작성할 예정이다

인프콘은 매년 8월에 진행하고, 인프런에서 신청 가능하다. 하지만 추첨제이니, 신청하고 기도하는게 최선..

하지만 다시보기는 할 수 있으니 너무 걱정하지 마시길

사전 준비는 별로 할게 없지만, 두개는 꼭하면 좋을 듯하다.

1. 시간표 짜기

시간표는 보통 인프런 사이트에서 세션(프로그램) 소개하는 곳에서 함께 설정할 수 있다.

막상 가서 어떤 프로그램을 들을지 정하려면 힘드니, 어떤 세션을 들을지 미리 확인해보는게 좋다.

한개의 Time Cell에 여러 세션이 진행되니, 자신이 가장 듣고 싶은 세션을 미리 지정해두고 시간표를 만들어두자.

2. 부스 확인하기

크게 시간은 안들여도 되고, 간단하게 어떤 기업들이 참여하는지만 살펴보자. (함께하는 기업들에 있다.)

어짜피 가서 다 볼거지만, 미리 알아둬서 나쁠 건 없다고 생각한다.

보통 시간표나 부스는 인프콘 홈페이지에서 확인 가능하다.

2. 인프콘 당일

당일에도 도착하기 전에는 준비할것은 따로 없다.

세션을 들으면서 필기할 노트나 노트북과 가방만 있으면 된다. (굿즈 담을 가방은 현장에서 준다.)

해당 장소 (2023은 코엑스) 가서, 문자로 받은 QR코드를 보여주고, 입장 굿즈를 받아서 들어가면된다.

보통 시간에 맞춰서 가면 줄도 별로 없고 바로 입장가능한 것 같다.

이제 할일은 3가지 정도가 있다. (선택)

1. 부스 탐방

컨퍼런스를 후원해주는 기업들이 부스를 열고 굿즈나 이벤트를 하며 참여자들과 소통하는 곳이다.

대부분의 유명한 부스들은 줄서는 시간이 대부분(5분~ 20분정도)이다.

부스들의 목적은 많은 개발자들을 자신들의 인재풀에 등록하고 네트워킹하기 위함이다.

덤으로 회사 소개도 하고 네트워킹 및 자사 서비스 소개도 가능하다.

부스에가면 굿즈도 주고, 안가면 여러모로 손해본다고 생각해서 꼭 한번 다 돌아보는 것을 추천한다.

2. 세션 듣기

미리 정리해온 시간표를 보며 알맞는 강연실에 가면 된다.

인기 세션은 사람들이 많아서 앉을 자리가 없거나, 못들어가게 할 수 있으니 5분전에 미리 도착하는게 좋은 것 같다.

그리고 세션을 들으며 필기할 준비도 하면 정말 금상첨화이다.

세션의 퀄리티나 내용은 호불호나 케바케가 많아서 따로 말할건 없지만, 웬만해서는 관심있으면 다 들어보는게 좋은 것 같다.

그리고 세션이 끝나면 따로 발표자에게 질문을 할 수 있는 공간이나 시간이 있으니 너무 걱정하지는 말자.

3. 네트워킹

15시 40분 부터는 따로 네트워킹 시간이 있다.

내향적이거나, 별로 할것도 없을 것 같아서 많이 안가는 분들이 많겠지만, 은근 숨겨진 보석인 것 같다.

다양한 개발자들과 기업 채용담당자나 실무자들과 대화도 해볼 수 있는 기회이다.

내향형이라도 가면 열심히 매칭시켜주고 대화를 할 수 있도록 도와주니 걱정하지 않아도 될듯

3. 2023 인프콘 후기

여러모로 정말 많이 배우고, 느낀것이 많았던 시간이다. 여러 개발지식 + 네트워크를 얻을 수 있는 좋은 기회였다.

다들 비싼돈 주고 컨퍼런스를 가는지 이해가 됐다. 다음에도 좋은 기회가 있으면 꼭 참여해야겠다.

마지막으로 인프런에서 정리한 인프콘2023 정리글을 소개하며 마무리하겠다.

https://www.inflearn.com/pages/infcon-2023-report

https://www.inflearn.com/pages/infcon-2023-sketch

늦은 감이 있지만, 이번 2023 토스 NEXT 개발 챌린지 후기를 남긴다. 

Sever 직군 기준이니 참고바란다.

아마 토스 NEXT 관련 준비하는데, 도움이 될수도..?

1. 코딩 테스트

코딩테스트는 엄청 어려운 정도는 아니였다.

알고리즘 문제 4~6개 정도, 서술형 문제 4~7개 정도가 나왔었다. (정확한 갯수는 기억이 잘...)

알고리즘 문제

알고리즘 문제는 엄청 어려운 수준은 아니고 평소에 알고리즘을 풀어봤다면 느낌이 오는 수준이었다.

프로그래머스 Lv2 정도 난이도 인데, 문제 유형은 다양하게 나왔다. (NP, BFS, Backtracking 등)

사실상 인터넷을 접속할 수 있게 해주어서, 정말 안풀리는 사람들은 검색찬스를 썼을지도 모르겠다.

요즘 ChatGPT에게 물어보면 다 알려준다고 들었어서, 복붙해볼까 생각은 해봤지만, 역시나 문제는 그림도 있고, 글은 복사가 안되게 설정되있었다.

서술형 문제

사실상 고비였던 서술형 문제. 사실 이 부분 답변을 제대로 못해서 떨어졌을거라 생각했을 정도.

기본 CS보다는 진짜 최적화, 기능 향상, 문제상황 파악 및 문제해결 느낌으로 나왔다.

관련 지식을 접해보지 못했다면 손도 못댈수준 정도였다. 그래도 어찌어찌 3~4문제 정도 답변을 써서 제출했다.

이부분은 맥락이나 사전지식이 없으면 검색자체를 못하기 때문에, 여기서 변별력을 내려고 하는게 보였다.

그리고 사실상 서술형을 잘 못봐서 포기하고 있었는데, 코테 합격소식이 들려왔다.

소식 이후 1.5주 뒤에 1차면접이 잡혔다. (나는 늦게 면접을 본 편) 대부분 1~2주 안에 잡히는 것 같았다.

2. 포트폴리오  제출

그다음 할일은 포트폴리오 제출이다. 이부분은 미리 준비해두면 좋을 듯하다. 기간이 5~7일 정도 기간을 줬던 것 같다.

포트폴리오로 합불을 정하는게 아니라, 면접때 볼 소스를 미리 확인하려고 하는 것 같다.

그렇다고 대충내도 되는게 아니라, 면접을 생각해서 정말 자신있는 항목들만 쓰는것을 강추! (잘 모르는 것들을 내면 나중에 후회한다.)

이력서 참고한 사이트들

1. https://famelee.oopy.io/

2. https://techblog.woowahan.com/2531/

3. https://wonny.space/writing/work/engineer-resume

4. 내 포트폴리오 : https://www.notion.so/lyva/30bcb036bcc443dc81eadeabe829d2bc?pvs=4

3. 1차 면접

면접 준비

1차면접 발표가 나자마나 일단 카카오톡 오픈톡방을 찾아들어갔다.

보통 대기업, 유니콘에서 하는 공채는 오픈톡방이 만들어져있고, 거기서 정보공유도 하기때문이다.

그곳에서 미리 면접본 사람들의 Tip이나 정보를 조금은 주워들을 수 있다. 합격하면 공유도 가능!

그다음으로는 server직군에 맞는 CS관련 공부를 했다. (오랜만에 하니까 꽤나 어려웠다.)

CS는 유명한 질문들을 모아둔 github을 보며 공부했고, 개인적으로 대규모 트래픽 처리와 관련된 책을 읽었다.

참고한 깃헙 주소들 : 

https://rokrokss.com/post/2019/04/06/%EB%A9%B4%EC%A0%91-%EC%A4%80%EB%B9%84-%EC%A0%84%EC%82%B0-%EC%88%98%EC%97%85-%EC%B4%9D%EC%A0%95%EB%A6%AC.html#ds-and-algo

https://gyoogle.dev/blog/

면접 후기

그리고 대망의 면접날

면접은 1시간 30분 정도 Google Meet로 진행됐다.

면바면이니 참고만 하도록 하자.

진행은 말하기 어려우니.. 간단하게 말하면 트래픽 처리 및 서버 문제나 오류가 있을때 어떻게 대처할지 물어봤다.

그리고 포트폴리오에서 세세하게 물어보면서 3~4번 꼬리질문을 받는데, 정말 생각하기 힘든 질문도 받았다.

그럴때, 정말 토스 개발자들은 이정도까지 생각하고 고려하면서 개발하구나..를 떠올렸다.

예상못했던 질문들이 많아서 그런지.. 생각보다 답변을 제대로 못했다.

그래도 면접관님들은 나를 편하게 해주려고 하고, 해서 끝까지 집중해서 했었다.

마지막 10분은 준비해왔던 역질문을 하고 회의실을 나왔다.

면접이 끝나고 복기하면서 되돌아보는데, 씁쓸했다.

아무리 면바면이라고 하지만.. 나라도 나를 안뽑을 것 같았다. 

그리고 다음날까지 전화가 오지 않으며 결국 탈락 메일을 받았다. (합격한 사람들은 보통 1~2일내에 전화로 합격통보를 받는다고 한다.)

4. 후기

그래도 토스에서는 어떻게 일하고, 어떤 가치나 기술들을 중요하게 여기는지 알 수 있는 좋은 기회였고, 면접을 준비하면서 새로운 것들도 배우고, 잘 몰랐던 것들도 다시 공부할 수 있어서 좋았다. 앞으로 또 어떤 기회가 있을지는 모르겠지만, 자주 면접보는 것도 좋은듯.

상황

기존의 desc, asc를 넘어서, 나만의 정렬 규칙을 커스텀하고 싶은 상황이었다.

예를들면, 값이 10, 20, 21이 있으면 정렬을 20,21,10 이렇게 하고 싶었다.

해결방법

SQL의 FIELD를 사용하면 된다.

새로운 규칙을 만들어준다.

아래 코드에서, FIELD안의 첫번째 인자는 Table의 Column을 지정해주고, 주고 싶은 순서대로, 쭉 콤마로 연결해주면 된다.

코드

SELECT fieldname FROM table ORDER BY FIELD(fieldname, 'G15', 'G30'), fieldname;

참고

https://mohading.tistory.com/36

상황

SqlAlchemy에서 count 한 것을 비교해서 having에 넣어 준 후 결과값을 받으려고 한다.

따로 aliased를 사용하지 않고, 그냥 바로 .label() 한 column 명을 넣고 싶은데 그냥 값을 넣어도 계속해서 에러가 뜨는 상황

해결방법

.literal_column을 사용하면, label한 값도 filter, having, order에서 사용할 수 있다.

평소에는 text()를 이용하면 잘 되지만, 부등호나 사칙연산이 필요할 경우 무조건 .literal_column()을 써줘야 한다.

아니면 그냥 aliased로 지정해서 바로 변수처럼 써도 된다

코드

  test = db.session.query(
            func.count(Association.seller_id).label('use_count'),
            CommonCode.code_value.label('limit_count')
        ).select_from(Counselor) \
        .group_by(Counselor.id) \
        .having(literal_column('membership_use_count') < literal_column('membership_limit_count'))

참고

https://stackoverflow.com/questions/51793704/sqlalchemy-reference-label-in-having-clause

https://stackoverflow.com/questions/30313872/using-a-label-in-a-having-clause-in-sqlachemy

상황

같은 컴포넌트를 사용하지만, URL만 바뀌여서 새로 rendering이 안되는 상황

하지만 새로운 URL로 페이지를 바꿔주고 싶은 상황

this.$router.push(`/api-doc/${api_path_id}`)

위의 코드로 실행하니, URL은 수정이 되는데 페이지는 전혀 변동이 없다.

Data의 변동도 없어서 보니, Created가 실행안되는 상황이었다.

해결방법

Watch를 $route에 걸어주었다.

$route(URL)이 바뀌면서 새로 데이터를 받아오도록 설정했다.

새로고침 할 필요없이, 새로 데이터를 받아오고 뿌려주었다.

  watch: {
    $route() {
      this.pending = true
      const query = this.$route.params.apiId
      this.init(query).then(() => {
        this.pending = false
      })
    }
  },

상황

여러 줄의 값을 한줄로 합치고 싶어서 찾아보았다. python의 join과 비슷한 느낌임.

해결방법

group_concat을 select문에 넣어주고, 어떤 것들을 넣어줄지만 알려주면 된다.

자주 안쓰일 것 같은데, 잊힐때만 하면 쓰이는 일이 생기는 녀석

코드

select type, group_concat(name order by name) 
from test 
group by type ;

참고

https://fruitdev.tistory.com/16

상황

자주 실수하는 것중 하나.

기존 List가 있고, Api를 통해 리스트의 값을 받아서 기존 List에 저장했는데, 화면에는 전혀 변화가 없는 경우

해결방법

새로운 List객체에 Api로 받은 리스트를 받고, 기존 List에 새로운 List객체를 대입한다.

Vue의 reactivity 시스템은 모든 변화를 감지하지 못합니다..(언제그러는지는 정확하게 모르겠으나 개발하다보면 왕왕 있습니다..)

그래서 변화를 감지하지 못할때 강제 리렌더링을 해줍니다.

코드

아래와 같은 코드는 headerList가 기존 리스트이다.

새로운 열을 추가하고 싶을때는 아래와 같이 해준다.

...this.headerList는 기존 리스트를 뜻한다.

addHeaderRow() {
  this.headerList = [
    ...this.headerList,
    {
      header_name: '',
      header_value: ''
    }
  ]
},

참고

https://hyeonyeee.tistory.com/97

상황

v-text-input에서 별점을 입력받는데, 1~5사이의 값만 받고, 만약 5이상의 값을 넣어도, 5로 설정하고 싶었다.

해결방법

@input.native를 사용하면 된다.

:max, :min값은 줘도 생각보다 별로였다.

코드

// HTML

<v-text-field
  @input.native="handleInput_solution" //input 값 5이상이면 변경하게하기
  type="number" //숫자만 받게 하기
  placeholder="선택"
/>

//Script
handleInput_solution(ev) { // 5이상 값을 넣으면 5로 만들어주는 함수
  if (Number(ev.target.value) > 5){
    this.reviewSurveyAnswers.solution = 5
  }
},

참고

https://stackoverflow.com/questions/57063387/setting-max-and-min-limit-on-input-field

상황

Vue에서 리스트 안에 체크박스들을 넣었는데, 전체선택하는 함수를 만들고 싶었다.

해결방법

모든 리스트를 돌면서 현재 체크 상황과 똑같이 해주면 된다. 의외로 간단함

코드

HTML 코드

  <tbody>
    <tr
      v-for="(row, index) in paramList"
      :key="row.id"
      :style="row.param_apply ? null : { opacity: 0.4 }"
    >
      <td>
        <v-checkbox
          v-model="row.param_apply"
          @change="apply_check" //이부분!!
        />
      </td>
      <td>
        <TextInput
          v-model="row.param_name"
          dense
          required
          :error-messages="inputCheck(row.param_name, 'Param_Name')"
        />
      </td>
      <td>
        <v-text-field
          v-model="row.param_value"
          dense
          :error-messages="
            inputCheck(row.param_value, 'Param_Value')
          "
        />
      </td>
      <td>
        <v-text-field v-model="row.param_desc" dense />
      </td>
      <td>
        <v-btn x-small fab depressed>
          <v-icon color="error" @click="removeParamRow(index)">
            mdi-minus
          </v-icon>
        </v-btn>
      </td>
    </tr>
  </tbody>

Script

checkedAll(checked) {
  this.allChecked = checked
  for (let i in this.paramList) {
    this.paramList[i].param_apply = this.allChecked
  }
},

참고

https://linked2ev.github.io/vue/2020/12/06/Vue-%EB%AA%A9%EB%A1%9D%EC%97%90%EC%84%9C-%EC%B2%B4%ED%81%AC%EB%B0%95%EC%8A%A4(checkbox)-%EC%A0%84%EC%B2%B4%EC%84%A0%ED%83%9D-%EB%B0%8F-%EC%A0%84%EC%B2%B4%ED%95%B4%EC%A0%9C(all-selected,-deselected)/ 

상황

Object를 만들었는데, 내가 원하는 key값이 있는지 체크하려고 했음

해결방법

1. in을 사용하는 방법

2. Object.hasOwnProperty 사용하는 방법

코드

1. in을 사용하는 방법

const object_2 = {
	test_1:'test 1',
    test_2:undefined
}

console.log( 'test_1' in object_2 ) // true
console.log( 'test_2' in object_2 ) // true
console.log( 'test_3' in object_2 ) // false

2. Object.hasOwnProperty 사용하는 방법

const object_1 = {
	test_1:'test 1'
}

console.log( object_1.hasOwnProperty('test_1') ) // true
console.log( object_1.hasOwnProperty('test_2') ) // false

const object_2 = {
	test_1:'test 1',
    test_2:undefined
}

console.log( object_2.hasOwnProperty('test_1') ) // true
console.log( object_2.hasOwnProperty('test_2') ) // true

참고

https://velog.io/@minong/Javascript-%EA%B0%9D%EC%B2%B4%EC%97%90-%ED%95%B4%EB%8B%B9-key%EA%B0%92%EC%9D%B4-%EC%A1%B4%EC%9E%AC%ED%95%98%EB%8A%94%EC%A7%80-%ED%99%95%EC%9D%B8%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95