전체 글 (118) 썸네일형 리스트형 22.11.05 : Redux란 무엇인가요? 왜 사용하시나요? Redux는 자바스크립트 앱을 위한 전역 상태관리 툴이다. 나는 개발 공부를 시작한 뒤로 상태 개발 툴로는 아직까지 Redux, Redux toolkit 만을 사용해보았기 때문에 다른 상태관리 툴과는 아직 비교를 해 볼순 없지만, 일단 어떤 툴인지 더 자세히 알아보구 속속들이 파해쳐본 뒤, 다른 상태관리 툴도 사용해보고자 한다. 일단 Redux는 복잡해진 상태관리를 더 손쉽게 하기 위해서 존재한다. 상 하위 관계에 있는 컴포넌트들의 상태의존도가 높아지고, 자식 컴포넌트들이 너무 많아졌을때, 나는 Redux toolkit(RTK)을 사용했다. Redux는 전역상태관리툴 중 가장 많이 쓰이고있고, 커뮤니티도 크기 때문에 참고 할수있는 레퍼런스들이 가장 많다. 그중 Redux팀은 RTK를 로직을 작성하기 위한.. 22.11.04 : 상태관리 하는 이유, 평소에 state 관리는 어떻게 하시나요? Q. 상태 관리를 하는 이유는 뭘까? 보통 부모자식관계에 있는 컴포넌트들은 state를 props로 전달하게 된다. 이 데이터는 부모에서 자식으로 가기도, 자식에서 부모로 전달되기도 한다. props drilling이라는 것은 props가 상위 컴포넌트에서 하위 컴포넌트들을 통해서 전달되는 것을 뜻하는데, 이것 자체가 문제가 되는 것은 아니다. 하지만 컴포넌트간 상태 의존도가 높아져 너무 여러 컴포넌트를 거치게되면 이 props가 어디에서 시작된 것인지 추적을 하기가 힘들기 때문에 유지 보수를 하는데 문제가 생긴다. 따라서 상태 관리를 전역에서 할 수 있는 tool이 필요하다. Q. 상태관리, 지금 어떻게 하는지? 현재 개인적으로 지역상태는 props로 관리하며 프로젝트가 커지고 컴포넌트간 상태 의존성이.. 내돈내여 : Front-end code convention code convention 1. NAMING CONVENTIONS (중요: 잘 지켜야 함!!) Compenents 이름: Pascal case (첫 단어를 대문자로 시작) Non-components: Camel case (띄어쓰기 대신 대문자로 단어 구분) 상위 폴더에 속해있는 파일들 이름 직관적으로, 알아보기 쉽게 통일 (ex: mypage folder > Myinfo.jsx , Mylikes.jsx, Myplan.jsx …) 속성명: Camel case로 작성 (className, onSubmit, onChange…) inline 스타일: Camel case로 작성 2. BUG AVOIDANCE null 또는 undefined 일 수 있는 값은 optional chaining 연산자 (?.)사용 3.. 내돈내여 : Github-flow & Git commit message convention Github-flow 전략 FE member's branches(eunji, hyelim, dada): 각자 기능 개발하는 브랜치(feature브랜치 역할) semi: 각 멤버의 branch들을 merge한 배포 전 테스트용 브랜치 (develop 브랜치) 사용전략 각 멤버의 기능 개발 branch에는 기능이 추가 될 때 마다 리뷰와 사인이 끝난 후 수시로 push 한다. 기능 구현이 완료 되면 semi로 pull request 하여 merge. semi에서 기능 개발 branch들을 병합한 후 오류 수정 및 검토 ⇒ master 브랜치에 pull request 하여 merge. master: 실제 배포가 될 브랜치. semi 에서 테스트 후 병합. 빌드 후 배포 Git commit message con.. 실전 프로젝트 - 내돈내여 (React + Spring) 광고 없는 여행 후기 내돈내여로 떠나기 ✈️ Back-End Github 👀 Front-End Github 👀 🧑🏻💻👩🏻💻 팀원 소개 서비스 개요 내 돈내고 내가 여행하는, 진정성있는 국내 단기 여행 정보 공유 플랫폼 서비스 서비스 아키텍쳐 Front-end node.js, 사용자 요청에 따른 각기 다른 웹사이트를 보여줄 수 있도록 동적 웹 호스팅이 가능한 EC2와, 리버스 프록시로서의 역할을 하며 서버가 SSL 요청을 처리하는데 드는 비용이 없는 nginx를 이용해 데이터 보안을 위해 https 환경으로 끊김없는 서비스를 제공 할 수 있고 많은 레퍼런스를 가진 PM2를 통한 무중단 배포를 하였고, 리액트 상태를 전역으로 관리하고 사용이 편리한 Redux-toolkit을 사용하였습니다. 또한 클라이언.. TIL: 자바스크립트의 특징 자바스크립트란 JavaScript 객체 기반의 스크립트 프로그래밍 언어. 인터프리터 혹은 just in time 컴파일 프로그래밍 언어로 일급함수를 지원한다. 자바스크립트로는 웹의 동작을 구현할 수 있다. 주로 웹브라우저에서 사용되지만 Node.js같은 프레임워크를 사용하면 서버 측 프로그래밍에서도 사용할 수 있다. 자바스크립트는 객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있다. 현재 자바스크립트의 최신 표준은 2015년 발표된 ECMAScript6. just in time : JIT 컴파일 또는 동적 번역은 프로그램을 실제 실행하는 시점에 기계어로 번역하는 컴파일 기법이다. 일급 함수 : 함수를 다른 변수와 동일하게 다루는 언어를 일급 함수를 가졌다고 표현. 일급 함수를 가진 언어에서.. TIL: 프로그래밍, 컴파일러와 인터프리터 프로그래밍이란? 프로그래밍이란 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션이다. 해결해야 할 문제(요구사항)를 명확히 이해한 후에 적절한 문제 해결방안을 정의할 필요가 있다. 0과 1 밖에 알지 못하는 기계가 실행할 수 있을 정도로 정확하고 상세하게 요구를 설명하는 작업이며, 그 결과물이 바로 코드이다. 컴파일러, 인터프리터? 컴파일러란 특정 프로그래밍 언어로 씌여진 프로그램 을 다른 프로그래밍 언어로 옮기는 언어 번역 프로그램을 말한다. 컴파일러는 고급 프로그래밍 언어를 실행 프로그램으로 만들기 위해서 저급 프로그래밍 언어로 바꾸는데 사용된다. 원래문서 (소스코드 혹은 원시코드) => 출력된 문서 (목적코드) 인터프리터란 프로그래밍 언어의 소스코드를 바로 실행하는 컴퓨터 프로그램 또는 환경을 말한다... TIL : useMemo, useEffect, useCallback 각 사용법, 차이 invalid Hook call 에러가 나는 원인에는 여러가지가 있는데 Hook에 대해 잘 모르는 상태로 쓸 때 에러 확률이 높다. 특히 커스텀 Hook을 만들어 사용할때! Custom Hook을 쓰는 이유는 use로 시작하는 여러가지 Hook을 하나로 묶기 위함임. useEffect 목적 : 뭔가가 바뀌면 어떤 동작을 자동으로 실행하기 위해 사용한다. 인자 인라인 콜백함수: 의존성 리스트에 있는 항목 중의 하나가 업데이트 되면 실행시킬 동작 의존성 리스트: 이 리스트에 있는 요소가 업데이트되면 콜백함수를 다시 작동. useEffect(()=>{어떤 동작},[뭔가]); 사용 예 useState와 함께 사용하는 예시 const [ state, setState ] = useStae('idle'); //프로세.. 이전 1 ··· 3 4 5 6 7 8 9 ··· 15 다음
