Hexion Lab Design

[개발지식] "Redux가 실제로 작동하는 방식과 의도하는 방식을 구별해야 한다" 들어가며리액트에서 useState 훅을 사용해서 상태값을 관리했는데 새로고침하면 초기값으로 돌아갔다.새로고침시에도 바뀐 상태값을 유지시키고 싶어 useState 초기값에 함수로직을 작성해봤다.검색해보니 이걸 '함수형 초기값' 또는 '레이지 초기값(lazy initial state)'라 함.const state값유지함수 = () => { // 로직 작성 return ~~ ; }; const [state, setState] = useState(state값유지함수);//혹은const [state, setState] = useState(() => { return ~~ ;});이런식으로...나는 개인플젝을 만들며..

[프론트엔드] Webpack 안 쓰면 손해! 모듈 번들링부터 최적화까지 완벽 정리Webpack여러개의 파일을 하나의 파일로 묶어주는 개발 자동화 도구. 즉, 모듈 번들러 모듈이란 쉽게 말해 각 코드를 여러 개의 파일로 분리하여 관리 하는 것이다.  ex) 기계의 부품 🙋‍♀️ 코드를 파일로 모듈화 하는 이유는요?코드 구조화 : 각 모듈별로 역할과 기능을 부여하여 코드를 구조화 시킨다. 필요한 기능을 포함한 모듈을 선택적으로 가져와 사용할 수 있으므로 코드의 복잡성도 줄일 수 있다. 동시에 코드의 가독성을 향상시키고 유지보수를 용이하게 만들어준다. 코드 재사용  : 자주 사용되는 코드를 별도의 파일에 저장하면 필요할때마다 가져와 쓸 수 있다 (중복코드 방지)코드를 개선하면 해당 코드를 가져와 쓰고 있는 ..

커밋 삭제 후 푸시까지! 깔끔하게 되돌리는 방법   git loggit reset HEADgit push -f origin "브랜치명" // ex) git push -f origin main  git log : 현재 까지 커밋메세지 내역 보기 가능git reset HEAD : 가장 최근 커밋 내역 삭제 git push -f origin "브랜치명" : 깃허브에 반영 (푸시된 커밋 삭제됨)

[개발지식] AJAX 요청 쉽게 하기! Axios vs Fetch 완벽 비교 📌 AJAX(Asynchronous JavaScript and XML) - 자바스크립트를 이용하여 XML(혹은 json) 데이터를 주고받는 기술- 백그라운드 영역에서 GET/POST 요청하여 서버와 통신- 비동기식으로 처리하기 때문에 서버와 통신하는 동안 다른 작업도 가능   (웹페이지 재로딩 필요 X)   AJAX로 GET/POST 요청하는 법1. axios 외부 라이브러리 사용 2. fetch() 문법 사용 (최신) XMLHttpRequest 문법 사용 (구식)  1. axios 외부 라이브러리 사용 npm에서 설치 시npm install axios  GET 요청 수행하기import axios from "axios"; ax..

[프론트엔드] 초간단 react 리액트 설치 방법 ! ( node.js 설치가 되어있다는 가정하에 ) 1. 리액트 결과물을 저장 폴더 생성  2. 윈도우 : 해당폴더에 마우스 우클릭 + SHIFT -> 여기에 PowerShell 창 열기 맥북 : 런치패드 -> 터미널열기   3. 터미널에 입력npx create-react-app 프로젝트명  설치중 .....  설치 완료!   해당폴더에 들어가보면 리액트 프로젝트 폴더가 생성되어 있음 짠  이제 vs code에 프로젝트 열고  터미널에  npm start입력후 localhost 포트번호 받고 미리보기 창 뜨면 성공