전체 글
-
모바일 기기를 체크하여 크로스 브라우징 지원하기 (navigator.userAgent 사용하기)JS,TS 2022. 8. 25. 21:52
들어가며 실무를 하면서 느끼는 취준생 때와의 가장 큰 차이점은, 실제 서비스를 제공하는 입장에서 다양한 환경과 브라우저, 기기에 대응하는 크로스 브라우징이 필요하다는 것이다. 이전에 개인 프로젝트, 팀 프로젝트를 진행할 때는 사실 비용(시간과 노력)이 너무 많이 들기 때문에 모바일 화면처럼 만들어 놓은 웹앱 형식의 프로젝트를 많이 구성하였다. 이전 프로젝트 예시 1) 스터디 모집을 위한 팀 프로젝트 2) 우리 동네 가게는 코카콜라, 펩시 중 무엇을 주는지 제공하는 서비스 물론 현재도 웹 보다 모바일이 주력 서비스라면 이런 형식을 가지는 서비스도 많이 있지만, 우리 서비스는 데스크 탑 웹을 기반으로 서비스를 제공하기 때문에 다양한 브라우저와 기기에 맞게 화면을 보여줘야 한다. 이렇게 실무에 와서 써보게 된..
-
자바스크립트 프로젝트에 타입스크립트 도입하기React.js, Next.js 2022. 8. 24. 22:14
타입스크립트 설정하기 현재 우리 리액트 버전에 맞춘 17로 타입스크립트 설치를 가정하겠습니다. 프로젝트 내의 현재 버전에 맞춰 진행해주세요. 1. 타입스크립트 전역 설치 $ yarn global add typescript / npm install -g typescript 2. 타입스크립트 설정파일 생성하기 먼저 config 파일을 왜 설정해야 하는지에 대한 의문점이 있을 수 있기 때문에 이에대한 레퍼런스 블로그를 링크로 달아놓겠습니다. config 파일이란 무엇인가요? (jsconfig.json / tsconfig.json) 1) tsc 사용하기 $ npx tsc --init $ npx tsc --init 를 명령어를 실행하면서 tsconfig.json 설정을 추가할 수 있습니다. 로컬에서 tsc 를 실..
-
리액트 18 > 17 마이그레이션하기React.js, Next.js 2022. 8. 23. 22:42
목차 마이그레이션 이유 기본 패키지 구조 패키지 제거하기 패키지 설치하기 index.js 코드 변경하기 결과 레퍼런스 마이그레이션 이유 CRA(Create React App)로 패키지를 초기화하는 경우, 가장 최신 버전인 18 버전을 설치하게 된다. 현재 우리 서비스의 리액트 버전은 17이고, 사용하고 있는 라이브러리들이 18 버전에 맞춘 마이그레이션이 진행되지 않았다.. lock 파일의 라이브러리 별 의존성 문제가 있기 때문에 쉽게 버전업을 못하고 있는 상황이기 때문에, 사용하고자 하는 라이브러리가 리액트 17 버전에서도 문제가 없는지 확인하기 위해 18 버전의 리액트를 17 버전으로 마이그레이션 한다. 따라서 CRA로 빠르게 패키지를 초기화한 이유 17 버전으로 마이그레이션 한 후 사용하는 방법을 적..
-
안녕하세요! FE 개발자 이준희입니다.About me 2022. 8. 23. 21:55
안녕하세요, FE 개발자 이준희입니다. 기존에 velog, 깃허브 레포지토리를 통해서 경험한 내용을 정리해봤는데 레포지토리에 한정되거나 한 번에 모아 보는 부분에 있어서 노션만큼 편하지는 않다고 생각해서 개인 노션에만 작성하고 게시글 공유를 중단한 상태였습니다. 하지만, 현업에서 매일 배우는 새로운 내용들을 노션에만 방치하는 게 아닌 구글링을 통해 다른 개발자 분들께도 도움이 되면 좋을 것 같아서 기술 블로그를 시작해볼까 합니다. 아직은 카테고리도 제대로 정하지 못했지만, 양질의 글을 공유할 수 있도록 노력해보겠습니다. 잘 부탁드립니다!