토피넛라떼조아

파일 업로드를 할 때, Input태그를 활용하여 기존의 선택 방식이 아닌 영역을 지정해 drag & drop로 업로드하는 방법을 알아보겠습니다. Input과 Label 연결시키기 일단 파일을 업로드시킬 영역을 지정합니다. input 대신 사용할 커스텀 버튼을 만들 때 처럼 label을 활용하여 영역을 설정합니다. // Upload.tsx const Upload = () => { return ( Drag&Drop File Here // 첨부된 파일 리스트 ); }; export default Upload; input의 id와 label의 htmlfor을 연결시켜 주고 입맛에 맞게 css처리합니다. 이벤트 등록 useEffect를 활용해 이벤트 처리를 합니다. const handleDragIn = useCa..

일반적으로 많이 사용하는 react hook에 대해 알아보겠습니다. Hook Hook은 React v.16.8부터 새로 추가되었습니다. 함수형 컴포넌트에서도 life cycle을 효과적으로 관리하며 기존의 방식보다 직관적인 API를 제공합니다. 또한, 상태 관리 로직을 추상화 할 수 있는 장점도 있습니다. render porps이나 HOC와 같은 패턴으로 재사용 로직을 구현했을 당시에는 컴포넌트의 재구성을 강제하고 코드의 추적이 어려웠습니다. (wrapper hell) Hook을 사용한다면 컴포넌트마다 로직을 추상화하여 독립적인 테스트와 재사용이 가능합니다. 또한 계층의 변화없이 로직을 재사용할 수 있습니다. 그렇기 때문에 로직 기반으로 컴포넌트를 나눌 수 있어 함수 단위로 관리 할 수 있는 이점이 있습..

리액트 생명주기를 LifeCycle Method와 함께 알아보겠습니다. 생명 주기(Life Cycle) 클래스형 컴포넌트에서는 컴포넌트(클래스) 위주의 라이프 사이클을 갖게 되며, 컴포넌트가 생성, 업데이트, 제거될 때마다 특정 이벤트들이 발생하게 됩니다. Mount 컴포넌트의 인스턴스가 생성되고 DOM에 삽입될 때 다음과 같은 메서드가 순서대로 호출됩니다. constructor() 컴포넌트의 생성자 메서드로 컴포넌트가 만들어지면 가장 먼저 실행되는 메서드입니다. constructor(props) { super(props); // Don't call this.setState() here! this.state = { counter: 0 }; this.handleClick = this.handleClick...

그 동안 npm만 활용하여 패키지 관리를 하였는데, 최근 yarn을 활용해보면서 둘의 차이점이 궁금하여 찾아본 내용을 정리해봅니다. npm과 yarn 모두 자바스크립트 런타임 환경인 노드(node.js)의 패키지 관리자 입니다. npm 온라인 데이터베이스에 개발자들이 자바스크립트로 만든 여러 패키지를 올리면 이런 패키지 관리자를 통해 패키지를 설치하거나 삭제, 버전 관리와 의존성 관리 등을 편리하게 할 수 있습니다. npm npm(Node Package Manager)은 노드를 설치할 때 제공되는 기본 패키지 관리자입니다. 전 세계적으로 가장 많이 사용하는 패키지 관리 도구로써 공개된 모듈을 손쉽게 설치하고 활용할 수 있게 도와줍니다. npm은 commend-line client와 online datab..

리액트를 활용하여 프로젝트 빌드를 하고나면 웹팩과 바벨이 자동으로 설정됩니다. 이전 포스팅을 통해 웹팩에 대해 살펴보았으므로 이번에는 바벨에 대해 알아보겠습니다. 대충 자바스크립트 컴파일러로 이해하고 넘어갔었는데 왜 필요한 지, 어떻게 사용하는지 등에 대해 작성하겠습니다. 바벨 바벨은 자바스크립트 컴파일러입니다. ES6+ 문법이 등장한 시점에 브라우저는 이 문법을 이해하지 못했습니다. 따라서 이런 크로스 브라우징 문제를 해결하기 위해 생겨난 도구로써 ES6+버전의 자바스크립트, 타입스크립트, JSX 등 다양한 언어를 모든 브라우저에서 호환될 수 있도록 도와줍니다. 바벨의 동작 원리 파싱(Parsing) 바벨은 소스 코드를 분석하여 추상구문트리/AST(Abstract Syntax Tree)로 변환합니다. ..

들어가면서 2022년 12월에 SSAFY를 수료한 뒤 1월부터 5월까지 5개월 동안 구직활동을 한 후기를 써볼까한다. 처음에는 취업을 만만하게 봤다. 주변 동기들과 친구들이 원하는 기업에 척척 붙는 것을 보니 나도 그렇게 될 줄 알았다. 학창 시절부터 군대에 있을 때, 또 SSAFY를 하면서 항상 무엇이든 상위권을 유지하고 주변 평판도 좋았다. '너는 무조건 성공한다.' '너 아니면 누굴 뽑냐' '나중에 너가 사업을 한다면 꼭 나를 써주길 원한다' 이런 말들을 항상 들어왔고 그런 말들이 나를 자만하게 만들었다고 생각한다. 취업은 때가 되면 무조건 갈 수 있을 줄 알았다. 그렇기 떄문에 SSAFY를 하면서 다른 친구들이 구직활동을 시작할 때 나는 '지금은 내가 맡은 프로젝트에 집중하고 취업할 때가 되면 그..

지인의 추천으로 우연히 지원했던 티맥스 그룹에서 드디어 1승을 했다. 길다면 긴 5개월 동안 구직활동을 하면서 계속되는 불합격 소식에 스트레스를 받고 지쳐갔는데 드디어 최종 합격 통보를 받을 수 있어서 너무 기쁘다. 처음에는 티맥스 핀테크에 프론트 연구원으로 지원했는데, 어쩌다보니 티맥스 와플에 합격했다. 서류 전형 최근에 채용 공고가 많이 없어서 지원보다는 테스트와 면접에 집중하고 있었는데, 최종에서 불합격을 받는 상황이 많이 발생하니 점점 힘이 빠지는 시기에 지인이 티맥스 채용 소식을 알려줘서 핀테크 프론트 연구원으로 지원을 했다. 자소서를 제출하지 않아도 되는 점이 너무 감사했다. 5개월 동안 계속해서 자소서를 쓰고 수정하고 하는 동안 많이 지쳐서 만약 자소서를 작성해야 했다면 부담스러웠을 것 같다..

오늘 신한은행 1차 면접 결과가 나와서 서류 전형부터 1차면접까지 후기를 정리해보려고 한다.일단 1차 면접은 합격이다.서류전형 서류 제출 시기가 다른 기업들 코테, 면접 등과 겹쳐서 굉장히 서둘러서 작성하여 제출했다.포트폴리오를 제출했어야 했는데 만들어 둔 포트폴리오가 노션밖에 없어서 자소서 4번 항목인"본인이 수행한 디지털/ICT 관련 프로젝트와 업무 경험(경력 포함)을 모두 기술해 주세요."에 담당 업무를 복붙해서 제출했다. (포폴 제출 시 작성 불필요 항목) 서류 마감이 4월 10일까지였고 결과 발표는 24일에 합격을 받았다.포트폴리오를 제출하지 않아서 걱정했는데 크게 상관이 없었나보다. AI역검 / 코딩 테스트 / 1차 면접서류 전형 다음 이렇게 세 가지 전형이 함께 진행됐다.세 가지 모두 온라인..

세 번의 프로젝트동안 프론트엔드 개발자로서 개발을 진행했음에도 웹팩에 대해 이해하고 넘어가지 않아서 정리해보는 시간을 가지려고 합니다. React 같은 경우 CRA(create-react-app)으로 프로젝트 빌드 시에 개발 환경을 자동으로 설정해주기 때문에 큰 관심을 가지지 않은 점이 깊은 이해에 방해되었다고 생각합니다. 그래서 나름의 정리를 통해 webpack을 이해하고자 합니다. webpack 공식문서에서 설명하는 webpack은 모던 JavaScript 애플리케이션을 위한 정적 모듈 번들러(module-bundler) 입니다. 자바스크립트는 변수 유효 범위를 전역으로 가지게 됩니다. 이는 접근성은 좋지만, 웹 어플리케이션을 개발하다보면 각 스크립트에서 활용하는 변수명이 중복되는 등의 문제가 발생할..

지원했던 kt ds 서류 지원부터 최종면접까지 후기를 써보고자 한다. 서류전형 (서류/인적성/코테) 특이하게 서류 + 인성 + 적성 + 코테로 서류전형이 이루어졌다. 3월 12일에 서류 지원을 했다. 당시에 자소서가 다듬어지지 않아서 서류만 따로 검토하셨다면 여기서 떨어졌을지도 모른다. 인적성 검사와 코테는 3월 18일에 모두 치뤄졌다. 꽤 오랜 시간 시험을 봐서 피곤한 하루였다. 일단 kt에서 제공하는 플랫폼에서 1, 2, 3 차 시험으로 나누어졌고 다들 알고 계시는 간단한 인성 검사와 적성 검사를 봤다. 구직활동을 하면서 적성검사가 처음이라 직무 적합도 검사를 생각하고 펜과 종이를 준비하지 않았는데, 문제를 푸는 거라는 걸 시험이 시작되고 알았다. 다행히 문제를 복붙한 것처럼 같은 유형 문제가 많이 ..