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번 행..