본문 바로가기

전체 글

(95)
Netlify로 react 프로젝트 배포하기 여태 github page로 배포했는데 이번에는 다른 방법으로 배포해보려고 여러 웹호스팅 서비스를 알아보다가 무료 웹 호스팅 서비스 Netlify를 알게 되었다. aws, heroku, github pages 등 어떤 서비스로 배포해볼까 고민이 있었는데, 그중에서 Netlify를 선택한 이유는 1. github pages는 몇번 사용해봐서 다른 서비스를 사용해보고 싶었고 2. aws 서비스는 단순한 정적 웹사이트 배포에 좀 과한 것 같아서 (개인적인 내 생각..) 3. heroku는 무료버전에서는 30분간 서비스 트래픽이 없다면 sleep 모드로 들어가고 다시 서버 실행할 때 응답이 느리다 하여 결론은, - 무료이고 - 깃허브 연동으로 간단하게 빌드 및 배포할 수 있어서 Netlify를 선택했다. - N..
react 프로젝트, 크로스브라우징 대응하기 react 프로젝트를 진행하면서 처음으로 다양한 브라우저에서 모두 대응이 되나 확인을 해보던 중, 역시나 IE에서는 호환이 되지 않았다. (처음에 흰 화면만 보여서 서버가 안 열렸나 했는데, 보통 호환이 안 된 경우 흰 화면만 나온다고 한다..) 그래서! 이번에 이론으로만 공부했던 polyfill을 설치하여 사용해보려 한다. 설치하기 전에 잠깐, 'babel'과 'polyfill'의 차이 babel은 크로스브라우징을 위해 es6 구문들을 es5 구문으로 이해할 수 있도록 해 주고, polyfill은 최신 ECMAScript 환경을 만들기 위해 코드가 실행되는 환경에 존재하지 않는 빌트인, 메서드 (Map, Set, Promise)등을 사용 가능하게 하는 역할을 한다. 1. react-app-polyfil..
Controlled components와 Uncontrolled components Controlled components (useState) import React, { useState } from "react"; export default function App() { const [inputValue, setInputValue] = useState(""); const handleInputChange = (e) => { setInputValue(e.target.value) } const handleSubmitButton = () => { alert(inputValue); }; return ( ); } Uncontrolled components (useRef) import React, { useRef } from "react"; export default function App() { ..
React 프로젝트 진행시 API_key 숨기기 1. src 폴더 외부에 .env 파일을 만든다. 2. .env 파일 내부에 API key를 넣는다. 반드시 'REACT_APP'를 붙여서 변수명을 설정해야 함. REACT_APP_API_KEY=[key] 3. gitignore 파일에 .env 파일을 추가한다. + 사용 예시 const url = `https://...${process.env.REACT_APP_API_KEY}`
[JS - Project] ecommerce-website | Issue & Solution 자바스크립트로 구현한 쇼핑몰 기능을 담은 프로젝트 - mock data를 json으로 직접 만들어 진행 - localStorage로 데이터 저장 ShoesMall Goods Choose the product you like All Color Black Blue Brown Green Grey Pink Purple Red White Yellow heeyeonjeong.github.io 📚 구조 & 기능 📌 Home header - (mobile) sidebar menu - scroll시, nav-menu 상단 고정 new-section - new goods section - 가로 scroll - goods 클릭 시, Detail-Page 이동 goods-section - mock data 받아와서 동적으로 ..
[React, TypeScript - Project] 독서 기록 서비스 구현하기 | Issue & Solution - response된 book 데이터 타입지정 Instantly parse JSON in any language | quicktype app.quicktype.io - 위 사이트에서 response된 데이터 타입을 추론하였다. 📚 problem & Solution 1. edit container에서 클릭된 book 데이터 받기 - api에서 직접 book 데이터를 받아오지 않고 (불필요) url의 params를 얻어서 해당 book의 id를 이용하여 전체 데이터인 book에서 find 메서드로 book 데이터를 출력했다. 2. error 주소 - to={`/${url}`} => 작성 시 오류는 없어졌지만 원하는 동작은 /뒤에 url이 붙어야 하는 코드가 아니기 때문에 이 방법은 포기 - to={url |..
git commit 메세지 규칙 아래 규칙에 최대한 맞춰 git commit 메세지를 작성 중입니다. Feat : 코드나 테스트를 추가했을 때 Fix : 버그를 수정했을 때 Remove : 코드를 제거했을 때 Update : 코드보다는 문서나 라이브러리 등을 보완했을 때 Docs : 문서를 수정했을 때 Style : 코드 포맷팅에 대한 부분 변경, CSS 등 Rename : 이름을 변경했을 때 Move : 코드를 이동할 때 refac : 코드 리팩토링
Function Expressions과 Function Declarations 함수 표현식과 함수 선언식 Function Declarations 함수 선언식 function 함수명(){ //구현로직 } Function Expressions 함수 표현식 let 함수명 = function (){ //구현로직 } Function Expressions 함수 표현식 Function Declarations 함수 선언식 호이스팅 영향을 받지 않는다. 호이스팅의 영향을 받는다. 클로저로 사용 or 콜백으로 사용