고차 컴포넌트(HOC)와 Hooks React를 비교적 최근에 사용하기 시작한 개발자 분들이라면, 클래스형 컴포넌트보다 함수형 컴포넌트와 Hook에 익숙할 것입니다. React는 초기에 클래스 컴포넌트만을 지원하였지만 16.8버전에서 Hooks를 도입하며 본격적으로 함수형 컴포넌트를 지원하게 되었습니다. 현재에는 공식 문서에서도 함수형 컴포넌트 + Hooks 조합을 권장하고 있는 상황이지만 여전히 클래스 컴포넌트 또한 지원하고 있기에 우리는 과거 코드를 열다 보면 클래스 컴포넌트를 종종 발견하곤 할 것입니다. 이번 포스트는 클래스 컴포넌트와 함수형 컴포넌트를 비교하는 내용은 아닙니다. 단지 컴포넌트 간에 재사용될만한 로직들을 간편하게 정리하는 방법에 대해 공부하다 자연스레 커스텀 훅을 접하게 되었고 클래..

Clean Code "오류 처리" Clean Code 저서를 읽은 후 주관적인 내용을 많이 포함하고 있는 글이기 때문에 틀린 내용이나 생각이 다른 부분이 있다면 제안해주세요 :) Javascript 예외 처리 Javscript에서는 다른 일부 언어와 같이 예외 처리를 위한 Error객체를 지원하고 있습니다. Clean Code 저서에서는 길게 이어지는 분기 처리 형식의 오류 처리보다는 예외 처리 형식을 추천하고 있는데요. Javascript에서는 예외 처리를 어떻게 처리하는지 간단하게 살펴보려 합니다. function division(operand1: number, operand2: number): number { if (!operand2) { throw new Error('Invalid Operand'..

Clean Code "주석" Clean Code 저서를 읽은 후 주관적인 내용을 많이 포함하고 있는 글이기 때문에 틀린 내용이나 생각이 다른 부분이 있다면 제안해주세요 :) 우리는 나쁜 주석과 좋은 주석을 짚어보기 전에 분명히 해야 할 것이 있다. 바로 가장 좋은 코드 구성은 주석을 달지 않는 것이라는 점이다. Clean Code 저서에서는 주석을 필요악이라고도 표현한다. 코드는 리팩토링을 거쳐 변화하고 진화하지만 주석은 유지 보수되지 않는다. 따라서 정말 필요한 주석만을 추가하고 필요성이 없어진 주석은 없애주어야 한다. 다시 한 번 명심하자. 주석을 사용할 바에 코드로 그 의도를 표현하자. 좋은 주석 법적인 주석 오픈소스를 사용할 경우 소스코드 상단에 저작권을 표시하는 주석을 추가하는 것은 좋은 주석이..

React Router v6 React Router는 현재 리액트의 라우팅 기능을 지원하는 가장 인기있는 라이브러리입니다. 이 React Router가 지난 2021년 11월에 정식 6.0 버전이 릴리즈되었습니다. 5.0 버전에서 큰 변경사항이 없었고 이후 꽤나 오랜만에 출시된 버전이기에 라이브러리에 많은 변화가 있습니다. 그래서 v5를 사용하고 있는 프로젝트에 v6 도입을 원활하게 하기 위해 두 버전 간의 차이를 중심으로 정리해보았습니다. React Router v6는 React 16.8 이상의 버전을 필요로 합니다 React Router v6는 React Hook을 많이 사용하기 때문에 버전 업그레이드를 위해 React 16.8 이상의 버전을 사용해야 합니다. 좋은 소식으로는 React Router ..

Clean Code "Function" Clean Code 저서를 읽은 후 주관적인 내용을 많이 포함하고 있는 글이기 때문에 틀린 내용이나 생각이 다른 부분이 있다면 제안해주세요 :) 한 가지만 하는 함수를 만들어라 사실 한 가지 기능만 하는 함수를 정의하는 것은 꽤나 모호하다 한 가지 기능이란 것은 추상화 수준에 따라 다르게 정의될 수 있기 때문이다 추상화 수준을 설명하기 위해 하나의 예제를 만들어보았다 예제 코드 시나리오 - 간단한 두 수 계산기 만들기 유저는 '계산하기' 버튼을 누른다 '계산하기' 버튼을 누르면 입력된 두 가지 수, 연산자를 DOM에서 가져온다 입력된 연산자, 피연산자가 유효한지 판별한다 두 수가 모두 입력되었는가? 연산자는 선택되었는가? 연산할 수 없는 숫자가 제공되지는 않았는가?..

React Testing Library 튜토리얼 본 포스트는 기초적인 React Testing Library 사용법에 중점을 두고 있습니다. 리액트 테스트 코드 설계에 관한 포스트는 향후 학습을 진행하고 작성해볼 예정입니다 Testing Library 테스팅 라이브러리는 UI 컴포넌트를 사용자 중심적인 방식으로 테스팅할 수 있게끔 하는 패키지이다 우리는 테스트에 구현 세부 사항이 포함되지 않도록 하여 컴포넌트 리팩토링이 진행되더라도 테스트에는 영향을 끼치지 않는 방법을 도입하고 싶어 한다. 그런 면에서 테스팅 라이브러리는 사용자가 애플리케이션을 어떻게 사용하는지에 최대한 가깝게 테스트를 작성할 수 있도록 도움을 주는 유틸리티를 제공한다 테스팅 라이브러리의 코어인 'DOM Testing Library'는 ..

Clean Code "의미있는 네이밍" Clean Code 저서를 읽은 후 주관적인 내용을 많이 포함하고 있는 글이기 때문에 틀린 내용이나 생각이 다른 부분이 있다면 제안해주세요 :) 의미가 불분명한 불용어 사용을 자제하라 불용어(Noise word) - 큰 의미를 가지지 않아 검색엔진 색인에서 제외되는 단어 const userInfo = useSelector((state) => state.USER.data); // AS-IS ​ const user = useSelector((state) => state.USER.data); // TO-BE Clean Code에서는 'Info', 'Data' 키워드를 대표적인 불용어로 꼽고 있다. 하지만 나의 경우 변수 네이밍에 'Data', 'Info' 키워드를 매우 ..

2021년 상반기 삼성전자 대학생 인턴 과정을 다녀왔다. 하반기 취업 준비를 진행하기 이전 삼성전자라는 큰 기업에서 인턴 과정을 경험해볼 수 있어 너무나 많은 도움이 되었었고, 채용 프로세스 또한 신입 채용과 동일하게 진행되어 대기업 채용 프로세스를 처음부터 끝까지 경험해볼 수 있었던 좋은 시간이었다. 반년 넘게 시간이 지났지만, 삼성전자 대학생 인턴을 준비하시는 분들께 조금의 정보라도 전달해드리고 싶어 포스트를 작성하게 되었다. 2021 상반기 삼성전자 대학생 인턴 채용 일정 서류전형 결과 발표 : 4/13 (화) SW 역량테스트 : 4/25 (일) 최종 면접 : 5/25 (화) 최종 합격 발표 : 6/21 (월) 일정을 좀 더 자세하게 기입해드리고 싶지만 캘린더랑 사진첩 뒤져본 최선입니다 ㅠ. 삼성 ..

학부 3학년 시절부터 금융 IT 분야에도 관심이 생겼던 터라 2021년 하반기에 금융, 증권업 IT 채용공고에도 지원서를 제출했었다. 그중 최종 합격 결과를 받아볼 수 있었던 신한은행 채용과정을 회고해보고자 한다. 개인적으로 느끼기에는 은행사 채용과정은 서비스 IT 기업과는 미묘하게 다른 프로세스들이 있어 흥미로운 부분이 있었던 것 같고, 최대한 기억을 떠올려 신한은행 개발자를 준비하시는 분들께 도움이 되어드리고 싶다. 2021 하반기 신한은행 디지털/ICT 수시 채용 일정 서류 결과 발표 : 10/6 (수) AI 역량 검사 : 10/7 (목) ~ 10/10 (일) 코딩 테스트 : 10/11 (월) 1차 면접 : 10/19 (화) 1차 면접 결과 : 10/29 (금) 2차 면접 : 11/10 (수) 최종..

2021년은 정말 운이 좋게도 많은 기업들의 면접 기회를 받을 수 있었고, 그 중에서도 원하던 기업의 합격 결과를 받아볼 수 있어 행복한 연말을 보냈었다. 이번 포스트에서는 그 중 악명 높은(?) 카카오 블라인드 채용 과정을 회고해보고자 한다. 2022 카카오 블라인드 신입 공채는 정말 나에게는 모든 단계들이 고비였고 힘든 여정이었다. 그래서인지 준비 과정에 힘들었던 점들이 투정처럼 보이지 않을까 살짝 걱정이 된다. 아무쪼록 카카오 채용 과정을 준비하시는 분들께 조금이나마 도움이 되었으면 하는 바람으로 기억을 떠올려보고자 한다. 2022 KAKAO BLIND RECRUITMENT 채용 일정 1차 코딩 테스트 : 9/11 (토) 1차 코딩 테스트 결과 : 9/17 (금) 2차 코딩 테스트 : 9/25 (토..