JiYoung Dev 🖥

React + Typescript 프로젝트 시작하기현재 경로에 typescript React 앱 프로젝트 생성yarn create react-app . --template typescript  tsconfig.js타입스크립트를 자바스크립트로 변환 시키는 컴파일 설정을 한꺼번에 정의 해놓는 파일브라우저에서는 타입스크립트를 읽지 못하기 때문에 자바스크립트로 컴파일 해야 한다. 프로젝트를 컴파일 하는데 필요한 루트 파일, 컴파일러 옵션 등을 상세히 설정할 수 있다.  { //컴파일 대상에서 제외할 파일들을 지정하는 속성 "exclude": [], // 타입스크립트 컴파일러의 옵션들을 지정하는 속성 "compilerOptions": { "target": "es5", ..

Props Drilling 지우기 Props Drilling 지우기Guidelines for easily modifiable frontend codefrontend-fundamentals.com  구독중인 유튜버가 하나의 영상을 새롭게 올렸는데, 토스에서 작성한 Frontend Fundemental을 소개하는 영상이었다. Frontend Fundemental은 Toss 개발자가 작성한 좋은 프론트엔드 코드의 기준을 자신들의 기준에 맞춰 작성한 문서이다. 프론트엔드 개발을 하면서 다양한 소스를 보지 못해 어떤 코드가 좋은 코드인지 모르겠다는 생각을 했는데 이 문서를 정독하여 좋은 코드란 무엇인지 읽어보고 현재 나의 코드는 어떤지 돌아보고 나만의 좋은 코드를 작성하기 위해 생각을 정리해보는 시간을 가지고자 ..

이번에 30초 마다 API를 호출하는 코드를 구현하면서 setInterval 함수를 사용하였다. 사용법은 알고 있었는데 setInterval이 어떤 건지 찾아보다가 비동기와 관련된 개념들이 나와서 정리를 하게 되었다. 따라서 오늘은 비동기 개념에 등장하는 Call Stack, Callback Queue, Event Loop에 대해 알아보았다.  본론에 들어가기 전에 브라우저에서 HTML 내부 Javascript로 작성된 코드가 실행되는 과정에 대해 잠시 정리해보자. 🔎 Javascript 실행원리웹 브라우저는 아래와 같은 구조로 구성된다. 사용자 인터페이스: 검색창, 뒤로가기/앞으로가기 버튼, 새로고침 등 브라우저 프로그램 자체 GUI브라우저 엔진: 사용자 인터페이스와 렌더링 엔진 사이의 동작 제어렌더..

부트캠프에서 React를 처음 접했을 때 CRA(react-create-app)을 통해 앱을 구성하고 실행하였다. 회사에 입사한 후 프론트엔드 개발을 맡게 되면서 프로젝트를 구성하게 되었는데, CRA의 경우 내장 라이브러리가 많아서 규모가 커지면 성능 문제가 발생할 수 있다는 글을 보게 되었다. 따라서 이번 프로젝트에서는 CRA가 아닌 직접 Webpack을 적용하였는데(CRA가 자동으로 Webpack을 적용), 그 과정에서 Webpack이 무엇인지, 어떤 역할을 하는지, 각 설정에 대해 알아보고자 한다. 🔎 Webpack이란 Webpack은 모던 Javascript 애플리케이션을 위한 정적 모듈 번들러이다.Javascript를 위한 모듈 번들러가 Webpack만 있는 것은 아니다. 하지만 이번 포스팅에..

오늘은 리액트를 이용해 로컬에 존재하는 첨부파일을 업로드하여 API로 전송하는 기능을 구현해 보았다.   태그먼저, 리액트에서 첨부파일을 업로드 하기 위해서는 태그를 사용할 수 있다. 해당 태그는 HTML 기본 태그로 로컬 컴퓨터에 존재하는 파일을 가져 올 수 있도록 도와주는 태그이다. 만약 아무 설정 없이 해당 태그만 사용한다면 아래와 같이 보여준다.  파일 선택이라는 버튼과 텍스트가 뜨고, '파일 선택' 버튼을 클릭하면 우리가 잘 알고 있는 파일을 업로드 하는 창이 뜬다.   이렇게 간단하게 input 태그의 file 속성만으로도 파일 업로드를 할 수 있지만 조금 더 사용자가 편하게 사용할 수 있도록 drag & drop 기능을 추가할 수 있다.  을 사용한 drag & drop 기능 추가들어가기에..

Spring Boot와 연동하여 shop 만들기 [Spring Boot] Spring Boot 사용하기 (2023.06.07) Spring Boot 개발 환경 준비 🎈 프로그램 설치 (Spring & MySQL) spring tool suite 4 Spring | Tools spring.io C드라이브 바로 아래에 설치 (필수는 아님!) jar파일도 압축파일이라 압축풀기하면 됨 그런데 안되는 경 danyoujeong.tistory.com CORS 오류 (Cross Origin Resource Sysytem) 교차 출처 리소스 공유 proxy 서버(미들웨어)로 해결을 하자 setupProxy.js 검색 프록시 서버란 클라이언트와 서버 사이에서 데이터 요청과 응답을 대신 받아주는 역할을 해줌 보안상의 문제로..

react 템플릿 사용하는 법 git Clone 후 node 설치까지 해줘야함! Boot Strap 은 react BootStrap 사용 https://react-bootstrap.netlify.app/ React Bootstrap | React Bootstrap The most popular front-end framework, rebuilt for React react-bootstrap.netlify.app react UI 툴 https://mui.com/store/ React themes & templates - MUI Store A collection of the best React templates, React dashboard, and React themes. It includes templa..

React에서 카카오지도 API 사용하기 🎈 OPEN API 사용하는 방법 🎈 key 발급받기 1. 로그인 후 애플리케이션 추가 React는 JavaScript 기반이므로 JavaScript 코드 사용할 예정 2. web 플랫폼 등록하기 만약 jsp/servlet에서도 사용할거라면 해당 주소도 추가(ex. 8080)해야 사용할 수 있다! 3. react-kako-maps-sdk 로 리액트에서 kakao map 사용하기 typeScript 자료형 지정해주는 script >> 최근 뜨는 중 3.1. index.html head태그에 api 입력 3.2. react-kakao-maps-sdk 설치 3.3. App.js 작성 MapMarker, Map > import 해줘야 함! import "./App.css..

Session/Local Storage에 데이터 저장하기 /** * Local Storage vs Session Storage * - 주의사항! 둘 다 브라우저에 저장을 하는 데이터 * - local Storage : 동일한 PC + 동일한 브라우저일 경우, 저장된 데이터를 불러 올 수 있음 * ex. 자동 로그인, 장바구니, ... * => 브라우저를 닫더라도 데이터가 계속해서 저장되어있다. * - session Storage : 브라우저 창이 종료되면 세션도 함께 종료되면서 데이터 소멸됨 * ex. 로그인 기록 */ 백엔드, 프론트 어디서 관리할 것인지는 자유 순서의 차이일뿐! 1. Local Storage 자동 로그인, 장바구니와 같이 보안이 딱히 필요하지 않을 때 사용 1.1. 저장하기 local..

🎈 영화 API 불러오기 - fetch, Axios 사용 import React, { useEffect, useState } from "react"; import axios from "axios"; import "./App.css"; const Ex04 = () => { let movieUrl = "http://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=f5eef3421c602c6cb7ea224104795888&targetDt=20230501"; /** * 화면에 영화 랭킹을 띄어주자! * * jQuery + Ajax >>>>> 논외! (사용추천X 속도 느림) * Fecth API (New!) *..