본문 바로가기

개발(Development)273

[Typescript] 설치 및 초기 세팅 방법(node.js 환경) # Typescript 설치 및 세팅 방법 개요 - 타입스트립트는 node.js 관점에서는 npm module 중 하나일 뿐이다. - 따라서 `npm` 으로 typescript 모듈을 설치하고, `tsc` 명령어로 ts파일을 js파일로 컴파일하면 된다. # 설치 및 세팅 방법 1. node.js 설치 (3가지 방법이 있음) - 방법1(초보자 추천): node.js 홈페이지를 통해 설치한다. - 방법2: n 으로 설치(버전 업그레이드에 용이) - 방법3: nvm (버전 스위칭에 용이) 2. package.json 파일 생성 (프로젝트 루트 경로 터미널에서) - `npm init -y` : 디폴트 세팅으로 package.json파일을 생성해준다. (나중에 수정 가능) 3. typescript 모듈 설치 (.. 2023. 5. 8.
[JavaScript] if 조건문 효율적으로 가독성 있게 쓰는 방법 # if 조건문 헬(Hell)에 빠지는 이유 자바스크립트에서 if 조건문을 쓸 때, 효율성/가독성이 떨어지고, 추가/수정이 어려워지는 이유는 대체로 2가지이다. 한번에 너무 많은 요소를 비교한다. 중첩(nested)조건이 많아진다. 1-1. 한번에 너무 많은 요소를 비교하는 경우 - 사례 예를 들어, 음식 종류를 비교하는 조건문을 보자. if(food === "pizza" && food === "pasta" && food === "burger" && food === "steak"){ return "Western food"; }else{ return "Asia food"; } - 가독성이 떨어진다 : 음식 종류가 10개 쯤 된다면 더욱 읽기 힘들 것이다. - 비효율적이다 : 동일한 코드(food === ".. 2023. 5. 7.
[React] 리액트 사이드 이펙트(Side-effect) 의미, 종류(feat. 순수함수) # 리액트 Side-effect의 의미와 종류 사이드 이펙트(Side-effect)란 React 자체에서는 제공하지 않는 모든 것을 말한다. 예를 들어, 아래의 작업들은 Side-effect 이다. fetch() 메서드 등을 통해 HTTP 통신을 시도하는 것 Local Storage 등에 데이터를 저장하는 것 DOM을 직접 조작하는 것 : ex) document.querySelector('.클래스명').add EventListener(...) setTimeout, setInterval 등의 타이밍 함수를 사용하는 것 위의 작업들은 브라우저의 Web API 등을 사용하는 것으로, React 자체의 기능은 아니다. React 입장에서는 자기가 제공하는 것 이외의 것(Side)으로 영향(Effect)을 미친.. 2023. 5. 6.
[VS Code] 중첩된 서브 폴더가 1개인 경우, 안 펼쳐지는 현상 해결 # VS Code에서 서브 폴더 1개 일 때, 안 펼쳐지는 현상 Visual Studio Code에서 디렉터리 구조상, 부모 폴더의 자식 폴더가 단 1개만 있을 경우, 아래와 같이 서브 폴더가 펼쳐지지 않고 상위폴더/하위폴더 상태로 표시될 수 있다. 별거 아닐 수 있지만, 디렉터리 구조 파악이 한 눈에 안 들어오고, 폴더를 잘못 선택하게 될 수도 있다. # 해결 방법 1. Settings 진입 2. Compact Folders 검색 3. Compact Folders 의 체크 해제 완벽하게 해결 되었다. 이제 서브 폴더가 1개만 있어도, 모든 디렉토리가 펼쳐져서 노출되는 것이 디폴트가 된다. 2023. 5. 2.
[JS]requestAnimationFrame/cancelAnimationFrame원리와 사용 방법(Feat. 브라우저 작동 방식) requestAnimationFrame을 3줄로 요약하면 아래와 같다. 1. requestAnimationFrame은 브라우저가 화면을 그리기(Paint) 직전에 실행할 코드를 등록한다. 2. requestAnimationFrame을 재귀적으로 반복호출하면, 60FPS 목표로 애니메이션을 최적화한다. 3. cancelAnimationFrame은 requestAnimationFrame으로 등록해둔 코드를 취소한다. 이게 도대체 무슨말인가?!! requestAnimationFrame을 제대로 이해하기 위해선 일단 브라우저가 화면을 그리는 원리부터 알아두면 좋다. 차근차근 정리해 보려 한다. 생각보다 쉽다. # 브라우저 작동 방식 - 브라우저가 화면을 그리는 원리는 대략 아래와 같다. 1. 서버에 요청하여 H.. 2023. 1. 21.
[AWS|GCP EC2] React+Next.js HTTPS 도메인 적용 방법 (Nginx 리버스프록시 연결 + snapd SSL 인증서 자동 갱신) # AWS | GCP : EC2에서 React+Next.js 서버 https 적용방법 AWS나 EC2 인스턴스에서 Next.js 기반의 React 프로젝트를 구동하고, SSL인증서를 설치(+자동갱신)하여 HTTPS로 연결하는 방법을 정리한다. 이 글은 Nginx 리버스 프록시와 Certbot을 통한 Let's Ecrypt 인증서를 사용한다. # 작업 순서 및 내용 순서 작업 내용 1 도메인 AWS|GCP IP 연결 설정 2 Next.js 배포용 설정 추가(+GitHub 업로드) 3 EC2 접속 및 Node.js 설치 4 GitHub에서 소스코드 Clone 해오기 5 npm 패키지 설치 6 .env 설정파일 생성 7 Next.js프론트 서버 빌드 및 구동 8 Nginx 설치/설정/구동 9 certbot-a.. 2022. 9. 23.
스마트폰 - 로컬 개발 서버(localhost) 접속 방법 # 스마트폰에서 로컬호스트 접속 방법 실제 스마트폰에서 화면을 확인해야할 경우, 내 컴퓨터에서 구동 중인 로컬서버에 스마트폰으로 접속하여 테스트해볼 수 있다. 서버 컴퓨터와 스마트폰이 동일한 Wi-Fi 에 접속한 상태에서 아래의 경로로 접속하면 된다. - http://내컴퓨터ip주소:port번호 맥북을 기준으로 아래와 같이 내 컴퓨터의 ip주소를 확인할 수 있다. 1. 시스템 환경 설정 2. 네트워크 3. ip 주소 확인 만약 localhost:3000 으로 서버가 구동되었다면, 스마트폰에서 http://192.168.219.171:3000 등으로 접속해주면 된다. 끝! 2022. 9. 22.
[React] Next.js 환경 구글 애널리틱스(GA) 적용 방법 # React + Next.js 환경 구글 애널리틱스(GA) 적용 방법 1) 단순 React 환경과 2) Next.js 환경에서 GA 적용 방법을 정리한다. GA4 기준으로 작성했다. 1) 단순 React 환경(CSR)에서 Google Analytics 적용 방법 1. GA 스크립트 복사 - 애널리틱스 홈 > 관리 > 데이터 스트림 > 웹: 사이트 클릭 > Google태그: 태그안내보기 > 직접설치 2. GA 스크립트 적용 - public/index.html 파일의 내부에 스크립트 적용 끝. 2) Next.js 환경에서 Google Analytics 적용 방법 Next.js 환경의 경우, 추가 작업이 필요하다. 다행히 Next.js 를 만든 Vercel에서 해당 방법을 제공한다. https://githu.. 2022. 9. 22.
[React] 카카오 애드핏 적용 방법(Next.js 환경) # React + Next.js 환경에서 Kakao AdFit 적용방법 리액트, 넥스트 환경에서 카카오 애드핏을 적용하는 방법을 정리한다. 1. 카카오 애드핏 적용 스크립트 확인 카카오 애드핏 광고 단위 생성 후, 아래 경로에서 카카오 애드핏 적용 스크립트를 확인한다. 그러나 위에서 취득한 아래의 스크립트를 리액트 + Next.js 환경에서 바로 적용하면 정상 작동하지 않는다. (그대로 적용하고 콘솔창을 확인해보면 에러 로그를 볼 수 있을 것이다) 2. KaokaoAdFit 전용 컴포넌트 사용 동적으로 엘리먼트를 생성해 스크립트를 적용해주면 된다. 아래와 같이 카카오 애드핏을 적용할 컴포넌트를 생성하고, 노출시킬 영역에서 사용해주면 잘 적용된다. 중복으로 광고를 로드하지 않도록 useRef를 사용했고, .. 2022. 9. 22.

티스토리툴바