개발자 도담씨

Home v6.14.2 동작 원리 브라우저를 켜서 처음 서버에 접속하면 routes컴포넌트의 지역 상태가 history.location 객체로 초기화. BrowserRouter가 props로 routes에게 history객체를 전달 Link 태그를 클릭하거나 , 브라우저 액션(앞,뒤로 가기 등) 을 수행 함으로 현재 url을 변경 가능. History 객체를 이용한 구독 매커니즘 때문에 routes 컴포넌트의 location 객체가 새로운 것으로 변경. 이로 인해 routes 컴포넌트가 리렌더링 되고 그 결과 RouterContext의 값이 새로 구성되면서, 트리의 하위에 존재하는 각종 라우팅 관련 컴포넌트들이 리렌더링. → 현재 URL에 맞는 UI 렌더링 컴포넌트는 현재 URL과 path props 값..

[ TESTING REACT COMPONENTS ] 리액트 관련한 코드를 테스트 하는 환경을 설정해보려한다. Jest라는 친구를 사용해 볼건데 create-react-app할때 이미 셋팅이 되어 있을 것이다. *Jest : 코드가 제대로 동작하는지 확인하는 Test Case 를 만드는 페이스북이 개발한 'JS 테스팅 프레임워크' 우선, npm test -- --coverage --watchAll로 내가 얼마나 코드를 테스트 했는지 현황을 볼 수 있다. 해당 명령어를 쳐서 보니 내가 검사를 하고 싶지 않은 파일까지 함께 떠서 설정을 조금 해주려한다. package.json에서 jest 설정을 해주었다. 해당 경로에 해당하는 파일들만 검사를 하는걸로..! 그리고 다시 coverage 명령어를 사용해보면 내가..

nestJS에서 typeORM과 함께 백엔드를 공부하고있는데 User 정보를 업데이트 하는 과정에서 비밀번호를 암호와 해야 했기에 @BeforeUpdate()를 사용해주었는데 작동을 안하잖아..? 💡기존 코드 // user.entitiy.ts @BeforeInsert() @BeforeUpdate() async hashPassword(): Promise { try { this.password = await bcrypt.hash(this.password, 10); } catch (error) { console.log(error); throw new InternalServerErrorException(); } } /*****************************************************..

리액트 매번 혼자 끄적이다가 생각보다 감이 잘 안오고 게을러서 그런지 매번 시작을 안하고 있다가 이번에 강좌를 구매했다 :) 리액트 시작전 알면 좋은 Javascript 개념 몇가지를 정리해 놓으려고한다 🙂 화살표 함수 [ 기존 ] function sayHello ( name ) { return name; } [ 화살표 함수 ] const sayHello = ( name ) => { return name; } * 매개변수가 하나일 경우 괄호 생략 가능 ex) name => { return name; } * 중괄호 생략시 자동 return ex) name => name; Template Literals [ 기존 ] const sayHello = name => { return "Hello " + name; ..

노마드코더 개발자 분의 리액트 강좌를 듣다가 정리해놓으면 추후에 좋을 것 같아 오랜만에 끄적여 본다. React Component의 Life Cycle에 관한 이야기다. 크게 어렵진 않았다 사실 vue랑 같아서... 크게 3가지 단계로 나뉘어진다 :) 1. Mounting 2. Updating 3. Unmounting Mounting @ constructor() - JavaScript에서 Class를 만들 때 호출 - Coponent가 Mount될 때 || 화면에 표시 될 때 호출 @ render () @ componentDidMount() - Component가 처음 render될 때 호출 Updating : state를 변경할 때! @ render() @ compontnetDidUpdate() Unm..

해당 카테고리는 단순히 글쓴이가 공부 후 정리해놓기 위한 목적으로 글쓴이가 추후 이해하기 쉽게 자기 멋대로 정리한 글입니다 :) 참고1 : sujinlee.me/webpack-react-tutorial/ 참고2 : 3트째 참고한 블로그 저번에 혼자 맨땅에 헤딩으로 리액트를 하면서 DB붙이고 하려니 구조를 어떻게 해야하는지 혼동이 오면서 접었었는데... 해당 참고글을 보고 2트해본다! 1트는 버전 문제 때문에 잘 안됐는데 오늘은 다시 해결해보는걸로 😥 준비사항에 있는 node와 yarn을 설치해주고 React Route는 또 몰라서 공부해왔다... 살펴보고 역시 이렇게 있었어 라고 생각이 들었다. 나 역시도 이 친구를 모를때 다른 주소에 따라 다른 뷰를 보여주고싶은데 어떻게 하는지 몰라서 조건문으로 1번을..

해당 카테고리는 단순히 글쓴이가 공부 후 정리해놓기 위한 목적으로 글쓴이가 추후 이해하기 쉽게 자기 멋대로 정리한 글입니다 :) 호옥시 잘못된 정보를 공부하고있다면 알려주세요! 참고1: beomy.github.io/tech/javascript/javascript-runtime/ 참고2: geonlee.tistory.com/92 참고3: velog.io/@stampid/React%EB%9E%80 React 기초를 다시 한번 공부하려니 Node를 다시 알아야 했고 Javacript 런타임 기반이다보니 해당 부분까지 공부하게 됐다. 매번 1화만 보다가 끝나는 기분이야..😢 자바스크립트는 싱글쓰레드-논블로킹 언어로 쉽게 말해서 쓰레드 하나에 비동기식으로 작동한다. 하긴 단일쓰레드인데 동기식(블로킹) 형식이였으면..

웹팩 해야하는데 또 새로운거 하고싶어서 리액트 찾다가 튜토리얼만 해봐야지 하고 시작한 리액트 튜토리얼 도전기🤤 틱택토를 만들어 본다구 한다 :) https://reactjs-kr.firebaseapp.com/tutorial/tutorial.html Tutorial: Intro to React – React A JavaScript library for building user interfaces reactjs.org react를 전역설치 하고 my-app이라는 react app을 하나 생성해 주었다. npm install -g create-react-app create-react-app my-app 해당 명령어를 실행하면 src폴더가 하나 생겼을 텐데 src하위 파일들을 모두 삭제한 후, /src/inde..