뭘 배웠지?

Refactoring React Code: Overview를 보고 배운점 최근에 작업한 프로젝트 Affitalink(Github)를 리팩토링 하기로 마음먹고, 다른 사람들은 어떻게 리팩토링 하는지 찾아보다가 좋은 글을 발견했다. 정리(TLDR;) 1. 코드 포맷팅을 하자 2. 쓸모없는 제거 3. 이름 생각하기 4. 반복 그만(DRY: Don't Repeat Yourself) 5. 함수형 컴포넌트 O / 클래스 컴포넌트 X 6. 화살표 함수는 렌더 밖으로 7. 번들을 작게 만들자 이상적인 리팩토링은 리팩토링이 일어나지 않는 것이라고 한다. 좋은 코드를 작성해서 버그와 이슈 가능성을 줄이자. 정기적인 코드 리뷰가 도움이 될 듯 싶다! Technical Debt가 뭐지? '기술적인 부채'라고 번역되고 있다. ..

Next.js Crash Course를 보고 배운내용 Next.js 프론트엔드 + 백엔드 콤비네이션으로 Vercel이라는 회사가 만들었다 정적인 사이트도 가능하고, 서버사이드 렌더링 가능 중간이상의 리액트 프로젝트, 프로덕션 레벨의 앱을 만들면 Next.js로 만들고 싶을거라고 한다 장점 API Routes TypeScript나 Sass 사용하고 싶으면 그냥 확장자만 변경하면 된다 디플로이가 쉽다 Vercel, heroku 등으로 쉽게 푸시 ... 등 라우팅 라우팅 기능이 정말 쉽다 CRA에서 react-router-dom으로 했다면 여기서는 그냥 pages 폴더에 넣으면 끝이다 예를 들어 pages폴더 안에 about.js를 만들어주면 localhost:3000/about.js 이렇게 접속이 가능하다 ..

컴포넌트를 가져와서 색상을 바꾸거나, 마진을 주거나 스타일을 바꾸려고 styled-components 공식 문서를 보고 (=> https://styled-components.com/docs/basics#styling-any-component) className를 넣어주는 간단해 보이는 방식인데 안됐다.. 1시간에 걸친 검색, 실험을 했고 매우 작고, 치명적인 실수를 발견했다 밑의 예는 가져온 버튼 컴포넌트에 margin을 주고 싶었던 1시간의 고통 문제의 코드 StyledButton을 우선 만들어줬다 Button.style.s import 'styled' from 'styled-components' const StyledButton = styled.button` background: blue; color..

엘리스 SW 엔지니어 트랙 65일차 온라인 강의날 마지막 온라인 강의 엘리스에서 하는 마지막 온라인 강의다 짧은 시간에 많은 내용을 살펴볼 수 있어 좋았다 원하는/필요한 내용을 추리고 강화시키자 다음주부터 팀프로젝트가 시작된다 React를 팀 단위로 사용해볼 수 있는 기회다 한 가지 컨텐츠 아이디어로는 복습 하면서 정리를 다시하고, 배운 내용과 순서를 공유하는 것 그럼 혼자 공부하는 사람들에게 약간의 길잡이가 될 수 있지 않을까 싶다 styled components 실습 오늘은 React UI에 대한 듀토리얼이고 styled components로 만드는 실습을 한다 styled components는 아직 강의만 들은거라 스타일과 프로그래밍 코드를 같이 적는 것이 익숙치 않지만 좋은점들이 보인다 props..

엘리스 SW 엔지니어 트랙 64일차 온라인 강의날 CSS Module class, id 등에 랜덤 문자열(hash) 달아 준다 CSS Module 사용 예시 app.module.css .title { font-size: 2.5ream; color: palevioletred; } App.jsx import styles from "./app.module.css" export default function App() { return ( Hello World ) } UI 프레임워크 이미 만들어져 쉽게 쓰기에 좋다 해당 프레임워크 디자인 벗어나기 쉽지 않다 컴포넌트 커스터마이징 어렵다 Ant Design, material UL 등 Ant Design 사용 예시 import "antd/dist/antd.css" i..

엘리스 SW 엔지니어 트랙 63일차 마지막 실시간 강의날 React, Redux, Router 실습 저번주 Create에 이어서 실습 시작 node modules Github에서 받은 것에 node modules 없다 npm install 하면 package.json에 맞춰서 node_modules 만들어준다 npm install MUI: Material UI React 라이브러리 컴포넌트 가지고 스타일 Material UI는 컴포넌트들으 가져다 쓰면 되고 Tailwind CSS는 컴포넌트를 만들어 주게 도와주는 것처럼 보인다 신기한 기능 전자 음성 speechSynthesis.speak(new SpeechSynthesisUtterance('축하합니다. 화이팅. 고마웠어요 ')); Firebase Baa..

엘리스 SW 엔지니어 트랙 57일차 온라인 강의날 상태 관리 데이터를 저장하고 하나 이상의 컴포넌트에서 데이터 공유하는 것 컴포넌트 안, 여러 컴포넌트 간의 상태 등 모두 상태 관리라 그런다 MPA 상태 관리 서버의 데이터로 페이지 렌더링하기 때문에 클라이언트 데이터와 서버 데이터 큰 차이 없다 SPA 상태 관리 클라이언트 데이터와 서버 데이터가 많이 다르다 Why 상태 관리? 데이터가 많아지고, 유저와 상호 작용하는 데이터가 많아지며 백엔드와의 데이터 통신도 고려해야 한다(ex. GraphQL) 장점 높은 품질 코드 작성에 유리 성능, 네트워크 최적화 데이터 관리 고도화(예: localStorage 활용한 persist state) 단점 Boilerpate 문제 파악해야 할 로직, 레이어 많다 잘못 사..

엘리스 SW 엔지니어 트랙 55일차 온라인 강의날 Promise 콜백 헬(콜백이 중첩 되는 것)을 좀 더 보기좋게 사용할 수 있는 기술 아직 가져오지 않은 데이터(이게 왜 Promise라고 불리는 이유일까?)에 대해 .then | .catch | .finally 등 핸들러를 붙여서 데이터 처리, 오류 처리, 정리 로직을 실행한다 .then 체인으로 비동기 실행을 마치 동기 실행처럼 동작하게 한다 Promise 사용 예시 function returnPromise() { return new Promise() => { setTimeout(() => { const randomNumber = generateRandomNumber(100) if(randomNumber < 50) resolve(randomNumber..

엘리스 SW 엔지니어 트랙 54일차 온라인 강의날 MPA(Multi Page Application) 서버에 미리 여러 페이지 두고 유저가 요청시 적합한 페이지 전달 서버에 라우팅 처리하는 기능 있고, 서버에서 여러 페이지 관리 페이지 요청마다 모든 리소스 받아오니까, 페이지 간 데이터 재활용하기 힘들다 SPA는 데이터를 재활용하기 편하다는 뜻이겠구나 SPA(Single Page Application) 한 페이지에서 다른 페이지로 안넘어가고 전체 웹앱을 사용 Client side routing 기술 활용해서 페이지 진입시 리로드 없이 라우팅 AJAX 기술 활용, 페이지 이동시 서버에 데이터만 요청하고 자바스크립트로 페이지 만든다 여러 페이지를 구성요소로 보고 여러 페이지 스타일 컴포넌트 재활용 자바스크립트..

엘리스 SW 엔지니어 트랙 53일차 실시간 강의날 CRUD 복습 Update 복습을 하자! 제일 복잡하니 라우팅 url을 공유할 수 있게 만들어준다 window.history를 사용해서 만들면 코드가 엄청 길어주는데 react-router-dom 이라는 녀석을 npm에서 다운받아서 사용하면 편하다 npm install react-router-dom 웹 어플리케이션을 만들 때 라우팅이 반이다 어떻게 라우팅을 하는지 중요하다 react-router-dom 배우긴 어렵지만 강력한 기술 최상위 컴포넌트에서 라우터를 쓰겠다고 선언해야된다 => 라우터 어렵다 안익숙해서 그렇지 CORS(Cross Origin Resource Sharing) 보안(유저 보호) 위한 정책 브라우저가 막지만, 설정은 서버가 해야된다. 다..