본문 바로가기

전체 글530

[ 타입스크립트(TypeScript) ] 2개 이상의 동일한 기능인 useState와 handleChange를 각각 하나로 관리하기 📍 2개 이상의 동일한 기능인 useState와 handleChange를 각각 하나로 관리하기 구독신청 페이지를 만들면서 개인정보수집 checkbox와 광고성 정보 수신 input checkbox를 useState로 관리하려고 하는데, 여러 개의 useState로 선언하여 관리하니까 코드가 불필요하게 길어져 좋은 코드라고 보기 힘들었다. 그래서 기존에 const [state, setState] = useState(false)처럼 선언했다면 이를 object로 묶어 선언하니 코드가 줄어들었다. import { useState } from "react"; // 리팩토링 전 export default function Subscription() { const [allAgree, setAllAgree] = use.. 2022. 5. 16.
[ styled-components ] styled-components를 사용하지 않고 viewport 기준으로 img 변경하기 📍 styled-components를 사용하지 않고 viewport 기준으로 img 변경하기 구독신청 페이지를 반응형으로 구성하며 viewport를 기준으로 768px 이하는 모바일 환경, 768px 이상은 데스크탑 환경으로 페이지를 제작하던 중 viewport에 따라 브라우저의 메인 이미지를 다르게 설정해야 하는 방법이 필요했다. 그래서, styled-components로 viewport에 따라서 src를 바꿔 줄 수 있는 방법이 있는지 살펴보다 더 간단하게 사용할 수 있는 HTML태그인 태그가 있었다. 그래서 태그와 태그를 같이 사용했더니 굳이 styled-components를 사용하지 않고도 원하는 기능을 구현할 수 있었다. 우선 태그가 무엇인지 간단하게 살펴보자면, 0개 이상의 요소와 하나의 요소.. 2022. 5. 13.
[ 자바스크립트(JavaScript) ] npm과 caret, tilde, 패키지 설치하는 방법 알아보기 📍 npm과 caret, tilde, 패키지 설치하는 방법 알아보기 npm은 자바스크립트 패키지 매니저다. Node.js에서 사용할 수 있는 모듈들을 패키지화해서 모아둔 저장소 역할과 패키지 설치 및 관리를 위한 CLI(Command line Interface)를 제공한다. 자신이 작성한 패키지를 공개할 수도 있고, 필요한 패키지를 검색하여 재사용할 수도 있다. 내가 다니는 회사에서는 npm 패키지를 직접 만들어 사용하고 관리한다.(npm 패키지 보러가기) 취업 준비할 때 프로젝트를 하면 항상 패키지 === 가져다 쓰는 것이라고 생각했는데, 직접 패키지를 만들고 버전을 관리해야 하다 보니 까다로운 것이 한둘이 아니었다. 그래서 패키지 버전의 기본적인 내용들을 현업에 적용할 때 까먹지 않기 위해 글을 남긴.. 2022. 5. 11.
[ 자바스크립트(JavaScript) ] terminal에서 npm private 패키지를 다운받을 수 없을 때 📍 terminal에서 npm private 패키지를 다운로드할 수 없을 때 React에서 npm i를 통해 필요한 패키지를 다운받으려는데 Not found 에러가 뜨면서 정상적으로 찾지 못했다. 그래서 npm.js에 들어가보니 하단의 사진처럼 패키지가 정상적으로 등록은 되어있었다. 결국, terminal에서 npm login을 하지 않아서 패키지를 다운로드하지 못한 것이었는데, 생각해보니 private한 패키지를 현재 요청하는 사용자의 권한이 있는지도 확인하지 않은 채 다운로드할 수 있다면 패키지를 private로 설정한것이 무슨 소용이 있을까라는 생각이 들었다. npm login 커맨드 입력 후 자신의 npm.js계정을 입력하면 Logged in as 커맨드가 뜨는데 정상적으로 terminal에 np.. 2022. 5. 6.
[ 최종 합격 ] 트리플(Triple) 프론트엔드 개발 📍 [ 최종 합격 ] 트리플(Triple) 프론트엔드 개발 ✏️ 서론 20년 12월 20일부터 본격적인 FE 취업 준비를 하면서 취업하는 데까진 약 1년 5개월 정도 걸렸다. 그중에 약 7개월 정도는 1일 1문제씩 CS와 알고리즘 공부를 하는 것에 매진했고 나머지 기간은 React, TypeScript등 FE가 되기 위해 필요한 기본적인 기술 스택들을 공부했다. 그리고 21년 10월부터 4개월 동안 엘리스 SW 엔지니어 트랙 1기를 수강했고, 22년 2월에 수료하여 제일 마지막 프로젝트를 유지 보수하며 약 2개월 동안 여러 회사에 면접을 본 결과 제일 마지막에 면접을 본 트리플이라는 여행회사에 최종합격하게 되었다. 1년 4개월 동안 취업준비를 하며 느낀 점은 타인과 비교하지 말고 어제보다 더 나아진 자신.. 2022. 4. 25.