Yeon’s Dev Log

리액트를 개발할때 컴포넌트를 어떤 기준으로 작성하시나요? SOLID원칙을 통해 어떻게 컴포넌트를 작성할지에 대해서 살펴보도록하겠습니다. 본격적으로 시작하기전에 리액트 가이드문서에서 계층을 분리하는 과정을 먼저 보고가겠습니다. 리액트 계층분리과정 https://react.dev/learn/thinking-in-react 글을 요약하였습니다. 실제예시가 본문에 잘나와있으므로 참고하시기바랍니다. 1. UI를 컴포넌트 계층으로 쪼개기 컴포넌트를 하위 컴포넌트들로 쪼개야하는데 나누는 관점에는 차이가 있을수있습니다. 이미 디자인팀에서 정해놓은 계층이 있다면 그것을 기준으로 분리해도되고, 개발관점에서는 SRP원칙에따라 분리를 할수도있습니다. JSON이 잘구조화되어있다면, 응답값을 기준으로 컴포넌트 구조를 분리해볼수도..

드디어 TanStack Query v5가 릴리즈되었습니다! v4보다 용량은 더작게, 하지만 더 직관적이게 변화했는데요, 변경사항과 마이그레이션시의 주의사항을 살펴보도록 하겠습니다. 1. Breaking Change 가장 큰 변화에는 코드베이스로부터의 overload를 제거하여 useQuery와같은 훅을 더 직관적으로 만들었다는 것입니다. 사실 v4부터 하려고 기획했던것이지만 타입스크립트에서의 제약으로 인해 할수가없었는데요, TS 4.7에서 이부분이 보완되었고, 훅을 호출할때의 다양한 매개변수를 이제는 신경쓰지 않아도되게 변화하였습니다. v5에서는 객체만을 지원합니다. 이 부분은 DX측면에서 큰 성과라고 할수있습니다. 일일히 overload를 고려하지않아도되며, 하나의 객체만을 전달하면되기때문에 일관성이 ..

'unload' 이벤트는 이제 크롬에서 점차 실행되지 않도록 변경된다고 합니다. 도대체 왜 사라지는것이며, unload 이벤트를 대체할수있는 이벤트에는 무엇이 있을까요? 1. Background unload 이벤트는 말그대로 페이지가 unload 될때 실행되도록 설계되었습니다. 이론적으로 사용자가 페이지에서 다른페이지로 이동할때마다 실행되었습니다. unload 이벤트가 가장 일반적으로 사용되는 시나리오는 다음과 같습니다. Saving user data: 페이지에서 나가기전에 데이터를 저장한다. Performing cleanup tasks: 페이지를 끝내기전에 열려있는 리소스를 제거한다. Sending analytics: 페이지 종료시 사용자 상호작용과 관련된 데이터를 전송한다. 하지만 unload 이벤트..

2022년 상반기 하이닉스 신입 공개체용에 ✨최종합격✨ 했습니다. 제가 지원했던 직무는 IT 직무이며, 이천에 위치하고 있습니다. 당시 자격요건에는 4년제 학사 이상 졸업(예정)자이며, 전산/컴퓨터/산업공학/경영정보학/전기/전자/반도체 등 관련전공자라는 조건이 있었습니다. 채용 전형은 서류전형 -> SKCT ( IT는 코딩테스트와 인성검사) -> 면접전형으로 3가지의 단계로 진행되었습니다. 비록 최종적으로 하이닉스에 입사하지는 않았지만, 각 단계에 대한 후기와 꿀팁을 적어보려합니다. 지원하고자하는 많은 분들께 도움이 되길 바라며, 혹시 궁금하신점이 있다면 댓글로 달아주시면 됩니다. 1. 서류전형 서류전형에는 기본인적사항, 학력, 경력, 학부전공이수내역, 외국어능력사항과 함께 4가지 자소서 질문 문항에 대..

2022년 상반기 라인 신입 공개 채용에 ✨최종합격✨ 했습니다. 제가 지원했던 직무는 Web FrontEnd Engineer 이며, 라인플러스 법인 소속입니다. 지원서접수, 코딩테스트, 필기테스트, 1차 면접, 2차면접의 채용과정을 거쳤는데, 각 단계에 대한 후기와 지원꿀팁을 순서대로 적어보려 합니다. 제글이 도움이 되길 바라며, 궁금하신 점은 언제든지 댓글로 달아주시면 됩니다! 1. 지원서 접수 지원서에는 기본인적, 학력, 경력, 어학사항과 함께 3가지의 자소서 질문 문항에 대한 답변을 적게됩니다. 지원서 접수단계의 경우 적혀있는 것처럼 지원자격만을 확인하기 때문에 자격만 갖춘다면 코딩테스트를 응시할 수 있지만, 필기테스트의 지원자격을 판단할때는 지원서 + 코딩테스트 결과를 같이 고려하여 합격여부가 나..

1. 콜백함수란? 다른 코드(함수 또는 메서드)에게 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수이다. 예를들면 A와 B는 토요일 오전 7시에 만나기로 하였다. 둘은 만나기위해 5시에 기상하여야 한다. A는 알람을 5시에 맞춰 푹자다가 기상하였다. 하지만 B는 알람이 고장나서 편히 잠들지 못하고 수시로 일어나서 시간을 확인하다가 기상하였다. 여기서 콜백함수를 쓴 사람은 A이다. B는 수시로 시간을 구하는 함수를 직접 호출하였지만 A는 알람을 울리는 함수를 호출할 당시에는 아무것도 하지 않다가 정해진 시간이 되었을때 함수를 호출하였다. B는 함수를 호출하는 제어권을 자신이 가지고 있으면서 함수를 호출하였고, A는 제어권을 알람에게 넘겨주고 취침이라는 다른일을 하다가 함수가 호출되었다. 여기서 콜백함수의..

1. This 란? 자바스크립트에서의 this는 상황에 따라 바라보는 대상이 달라진다. 즉, 실행컨텍스트가 생성될때, 함수가 호출될때 결정된다. 1) 전역공간에서의 This: 전역공간에서는 전역객체를 가리키게된다. 브라우저 환경에서 전역객체는 window이고, Node.js에서는 global 이다. 자바스크립트에서 모든 변수는 특정객체의 프로퍼티로서 동작하게되는데, 전역변수를 선언하면 자바스크립트 엔진은 이를 전역객체의 프로퍼티로 할당하게 된다. 2) 메서드 내부에서의 this: 메서드 내부에서는 호출한 주체에 대한 정보가 담긴다. 어떤함수를 메서드로서 호출하는 경우 호출주체는 함수명앞의 객체가 된다. 3) 함수내부에서의 this: 함수내부에서는 전역객체를 바라보게 된다. ES6에서는 함수내부에서 thi..

1. 실행컨텍스트란? 실행컨텍스트는 실행할 코드에 제공할 환경정보를 모아놓은 객체로, 자바스크립트는 실행컨텍스트가 활성화되는 시점에 선언된 변수를 호이스팅하고, 외부환경정보를 구성하고, this값을 설정하는 등의 동작을 수행하게된다. 자바스크립트는 동일한 환경에 있는 코드들을 실행할때 필요한 환경정보들을 모아 컨텍스트를 구성하고, 이를 콜스택에 쌓아올렸다가 가장 위에서부터 실행하여 전체코드의 환경과 순서를 보정하게 된다. 어떤 실행컨텍스트가 활성화될때, 자바스크립트 엔진은 해당 컨텍스트에 관련된 코드들을 실행하는데 필요한 환경정보를 수집해서 실행컨텍스트 객체에 저장하게되는데, 이때 수집하는 정보는 variavle environment, lexical environment, this binding 3가지이..

1. 자바스크립트의 데이터 타입: 기본형과 참조형 자바스크립트의 데이터 타입에는 2가지가 있다. 기본형(prototype)과 참조형(refrence type)이다. 기본형 Number, String, Boolean, null, undefined, Symbol 참조형 Array, Function, Date, Map, Set, RegExp 기본형은 불변값이고, 참조형은 보통 가변값이다. 컴퓨터는 데이터를 늘릴경우를 대비하기 위해, 중복데이터에 대해 효율성을 높이기 위해 변수영역과 데이터 영역을 분리하게 된다. 기본형이 불변값인 이유는 기본값에서의 변경이 새로 만드는 동작을 통해서만 이루어지기 때문이다. 반면에 참조형은 기본형과는 달리 객체의 변수영역이 별도로 존재하여 다른값을 얼마든지 대입할수있고, 데이터 ..

1. 문제 마법사 상어는 파이어볼, 토네이도, 파이어스톰, 물복사버그 마법을 할 수 있다. 오늘 새로 배운 마법은 비바라기이다. 비바라기를 시전하면 하늘에 비구름을 만들 수 있다. 오늘은 비바라기를 크기가 N×N인 격자에서 연습하려고 한다. 격자의 각 칸에는 바구니가 하나 있고, 바구니는 칸 전체를 차지한다. 바구니에 저장할 수 있는 물의 양에는 제한이 없다. (r, c)는 격자의 r행 c열에 있는 바구니를 의미하고, A[r][c]는 (r, c)에 있는 바구니에 저장되어 있는 물의 양을 의미한다. 격자의 가장 왼쪽 윗 칸은 (1, 1)이고, 가장 오른쪽 아랫 칸은 (N, N)이다. 마법사 상어는 연습을 위해 1번 행과 N번 행을 연결했고, 1번 열과 N번 열도 연결했다. 즉, N번 행의 아래에는 1번 행..

1. 문제 스타트링크가 "스타트 택시"라는 이름의 택시 사업을 시작했다. 스타트 택시는 특이하게도 손님을 도착지로 데려다줄 때마다 연료가 충전되고, 연료가 바닥나면 그 날의 업무가 끝난다. 택시 기사 최백준은 오늘 M명의 승객을 태우는 것이 목표이다. 백준이 활동할 영역은 N×N 크기의 격자로 나타낼 수 있고, 각 칸은 비어 있거나 벽이 놓여 있다. 택시가 빈칸에 있을 때, 상하좌우로 인접한 빈칸 중 하나로 이동할 수 있다. 알고리즘 경력이 많은 백준은 특정 위치로 이동할 때 항상 최단경로로만 이동한다. M명의 승객은 빈칸 중 하나에 서 있으며, 다른 빈칸 중 하나로 이동하려고 한다. 여러 승객이 같이 탑승하는 경우는 없다. 따라서 백준은 한 승객을 태워 목적지로 이동시키는 일을 M번 반복해야 한다. 각..

1. 문제 길이가 N인 컨베이어 벨트가 있고, 길이가 2N인 벨트가 이 컨베이어 벨트를 위아래로 감싸며 돌고 있다. 벨트는 길이 1 간격으로 2N개의 칸으로 나뉘어져 있으며, 각 칸에는 아래 그림과 같이 1부터 2N까지의 번호가 매겨져 있다. 벨트가 한 칸 회전하면 1번부터 2N-1번까지의 칸은 다음 번호의 칸이 있는 위치로 이동하고, 2N번 칸은 1번 칸의 위치로 이동한다. i번 칸의 내구도는 Ai이다. 위의 그림에서 1번 칸이 있는 위치를 "올리는 위치", N번 칸이 있는 위치를 "내리는 위치"라고 한다. 컨베이어 벨트에 박스 모양 로봇을 하나씩 올리려고 한다. 로봇은 올리는 위치에만 올릴 수 있다. 언제든지 로봇이 내리는 위치에 도달하면 그 즉시 내린다. 로봇은 컨베이어 벨트 위에서 스스로 이동할 ..

1. 문제 마법사 상어는 파이어볼과 토네이도를 조합해 파이어스톰을 시전할 수 있다. 오늘은 파이어스톰을 크기가 2N × 2N인 격자로 나누어진 얼음판에서 연습하려고 한다. 위치 (r, c)는 격자의 r행 c열을 의미하고, A[r][c]는 (r, c)에 있는 얼음의 양을 의미한다. A[r][c]가 0인 경우 얼음이 없는 것이다. 파이어스톰을 시전하려면 시전할 때마다 단계 L을 결정해야 한다. 파이어스톰은 먼저 격자를 2L × 2L 크기의 부분 격자로 나눈다. 그 후, 모든 부분 격자를 시계 방향으로 90도 회전시킨다. 이후 얼음이 있는 칸 3개 또는 그 이상과 인접해있지 않은 칸은 얼음의 양이 1 줄어든다. (r, c)와 인접한 칸은 (r-1, c), (r+1, c), (r, c-1), (r, c+1)이다..

1. 문제 마법사 상어가 토네이도를 배웠고, 오늘은 토네이도를 크기가 N×N인 격자로 나누어진 모래밭에서 연습하려고 한다. 위치 (r, c)는 격자의 r행 c열을 의미하고, A[r][c]는 (r, c)에 있는 모래의 양을 의미한다. 토네이도를 시전하면 격자의 가운데 칸부터 토네이도의 이동이 시작된다. 토네이도는 한 번에 한 칸 이동한다. 토네이도가 한 칸 이동할 때마다 모래는 다음과 같이 일정한 비율로 흩날리게 된다. 토네이도가 x에서 y로 이동하면, y의 모든 모래가 비율과 α가 적혀있는 칸으로 이동한다. 비율이 적혀있는 칸으로 이동하는 모래의 양은 y에 있는 모래의 해당 비율만큼이고, 계산에서 소수점 아래는 버린다. α로 이동하는 모래의 양은 비율이 적혀있는 칸으로 이동하지 않은 남은 모래의 양과 같..

1. 문제 반지름이 1, 2, ..., N인 원판이 크기가 작아지는 순으로 바닥에 놓여있고, 원판의 중심은 모두 같다. 원판의 반지름이 i이면, 그 원판을 i번째 원판이라고 한다. 각각의 원판에는 M개의 정수가 적혀있고, i번째 원판에 적힌 j번째 수의 위치는 (i, j)로 표현한다. 수의 위치는 다음을 만족한다. (i, 1)은 (i, 2), (i, M)과 인접하다. (i, M)은 (i, M-1), (i, 1)과 인접하다. (i, j)는 (i, j-1), (i, j+1)과 인접하다. (2 ≤ j ≤ M-1) (1, j)는 (2, j)와 인접하다. (N, j)는 (N-1, j)와 인접하다. (i, j)는 (i-1, j), (i+1, j)와 인접하다. (2 ≤ i ≤ N-1) 원판의 회전은 독립적으로 이루어..

1. 문제 주사위 윷놀이는 다음과 같은 게임판에서 하는 게임이다. 처음에는 시작 칸에 말 4개가 있다. 말은 게임판에 그려진 화살표의 방향대로만 이동할 수 있다. 말이 파란색 칸에서 이동을 시작하면 파란색 화살표를 타야 하고, 이동하는 도중이거나 파란색이 아닌 칸에서 이동을 시작하면 빨간색 화살표를 타야 한다. 말이 도착 칸으로 이동하면 주사위에 나온 수와 관계 없이 이동을 마친다. 게임은 10개의 턴으로 이루어진다. 매 턴마다 1부터 5까지 한 면에 하나씩 적혀있는 5면체 주사위를 굴리고, 도착 칸에 있지 않은 말을 하나 골라 주사위에 나온 수만큼 이동시킨다. 말이 이동을 마치는 칸에 다른 말이 있으면 그 말은 고를 수 없다. 단, 이동을 마치는 칸이 도착 칸이면 고를 수 있다. 말이 이동을 마칠 때마..