공대키메라

저번 시간에는 React.memo와 useCallback을 사용해봤다. (궁금하면 여기 클릭!) 이번 시간에는 useReducer를 사용해볼 것이다. 참고한 사이트는 다음과 같다. 출처 : https://ko.reactjs.org/docs/hooks-reference.html#usereducer https://www.daleseo.com/react-hooks-use-reducer/ https://ko.wikipedia.org/wiki/%EB%9D%BC%EC%9A%B0%ED%8C%85 https://reactrouter.com/ https://reactrouter.com/docs/en/v6/getting-started/tutorial https://reactrouter.com/docs/en/v6/route..

지난 시간에는 React Hook 중에서 useContext, useRef, useMemo를 알아보았다. (궁금하면 클릭!) 이번 시간에는 useMemo와 유사한 Reac.memo에 대해 알아보고 비교하는 시간을 가질 것이다. 그리고 useCallback을 통해서 또 한번 최적화를 배워 볼 것이다. 참고 사이트는 다음과 같다. 출처 : https://ko.reactjs.org/docs/react-api.html https://react.vlpt.us/basic/19-React.memo.html https://ko.reactjs.org/docs/hooks-reference.html#usecallback https://www.daleseo.com/react-hooks-use-callback/ https://..

저번 시간에는 React의 Props와 State에 대해 알아보았고, React Hook의 기능 중 useState, useEffect를 알아보았다. (궁금하면 클릭!) 이번 시간에는 React Hook에 어떤 기능이 있는지 좀 더 알아볼 것이다. 이 내용은 다음 사이트를 참고했다. 참고 https://ko.reactjs.org/docs/hooks-intro.html https://ko.reactjs.org/docs/hooks-reference.html https://www.w3schools.com/react/react_usecontext.asp https://www.daleseo.com/react-hooks-use-ref/ https://ko.reactjs.org/docs/hooks-reference...

저번 시간에 React란 무엇인지, 그리고 장점이 무엇인지 알아봤고 마지막에는 boilder plate를 활용해 쉽게 React 프로젝트를 생성하는 법을 배웠다. (지난 정리가 궁금하다면? 클릭!) 이번 시간에는 React에서 꼭 알아야 하는 State와 Props에 대해 알아보겠다. 코드는 지난 시간에 이어서 기존에 추가하는 방식으로 진행할 것이다. 해당 내용은 다음 사이트에서 참고했다. 참고 https://ko.reactjs.org/docs/components-and-props.html https://ko.reactjs.org/docs/hooks-rules.html https://ko.reactjs.org/docs/hooks-state.html https://xiubindev.tistory.com/1..

사실 React는 잠깐 속성으로 빠르게 공부하고 화면 뿌리는건데 뭐 대충 하면 되지~ 하면서 대충 배웠었다. 하지만 최근에 문득 든 생각이 전에 배운 것인데 정말로 이것을 내것으로 만들고 싶다는 욕심이 생겼다. 또한, 진정으로 내가 이해하고 사용했다고 하기도 애매하기도 했다. 왜그러냐면 그냥 배낀거니까 말이다. 무엇이 그렇게 급했는지, 길게 보고 제대로 배워야 하는 지식들을 내몸에 사는 나쁜 벌레인 대충으로 무너지고 말았다. 그러므로 React에 대해서 다시 한번 차근차근 공부해서 마스터하는 시간을 가지도록 하겠다. 아니 하던 자바나 하지 뭐하냐고? 결국 다 알아야 하는 겁니다... 출처 사이트는 다음과 같다. https://ko.reactjs.org/tutorial/tutorial.html#setup-..

이번에는 저번에 글에 이어서 (저번 글 보고 싶다면 클릭!) 1. 유용한 js기능을 조금 더 소개하고 2. es6에서 도입된 generator 함수에 대해 알아보고 3. 또 날짜 변환을 공부할 것이다. 이 글을 정리하기 위해 참고한 사이트는 다음과 같다. 참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce https://blog.bitsrc.io/2-3-javascript-tricks-that-you-should-know-bfb9827fd835 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destruc..

필자는 회사에서 급하게 투입된 프로젝트에서 배정받은 일의 업무 분배도는 DB 쿼리 작성 40%, js 를 이용한 front 화면 생성 40%, 기존 java 로직을 활용한 비즈니스 로직 구현이 20%다. 여기서 javascript를 다루면서 많은 일이 있었는데 인터넷을 뒤져보면 js 사용 팁을 전수해주는데 이 기회에 한 번 정리할 예정이다. 참고 : https://modernweb.com/45-javascript-tips-tricks-practices/ https://sunlightmedia.org/ko/%EC%9E%90%EB%B0%94-%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%8C%81/ https://paperblock.tistory.com/62 많은 내용이 있지만 필..

필자는 최근에 회사에서 cals studio라는 node.js기반 프레임워크를 이용해서 AWS lambda 서버에 코드를 올리고 있다. 사실 그렇다는데 나는 뭐 그런가 보다 하고 이것을 내가 처음부터 직접 만든게 아니라 잘은 모른다. 하지만, 여러 비동기 처리 로직이 있는거 같은데 js에서 동기와 비동기를 어떻게 처리하고, 이러한 과정에서 콜백을 어떻게 잘 관리하는지 에 대해 학습하려고 한다. 1. 동기(Synchronous)? 비동기(Asynchronous)? 동기와 비동기를 설명하려면 어떻게 해야 할까? 이를 알기 위해 빌드업을 하겠다. Javascript는 싱글 스레드 언어로, 코드가 작성된 순서대로 작업을 처리한다. 여러개의 작업이 있으면 앞의 작업이 끝날 때 까지 기다렷다가 뒤를 순서대로 실행하..

1. 방문자 패턴이란? 의도 객체 구조를 이루는 원소에 대해 수행할 연산을 표현합니다. 연산을 적용할 원소의 클래스를 변경하지 않고도 새로운 연산을 정의할 수 있게 합니다. 즉, 우리가 클래스를 많이 바꾸는것 없이 다양한 타입의 클래스를 메소드로 추가할 수 있다. 사용 시기 다른 인터페이스를 가진 클래스가 객체 구조에 포함되어 있으며, 구체 클래스에 따라 달라진 연산을 이들 클래스의 객체에 대해 수행하고자 할 때 객체 구조를 정의한 클래스는 거의 변하지 않지만, 전체 구조에 걸쳐 새로운 연산을 추가하고 싶을 때 각각 특징이 있고, 관련되지 않은 많은 연상이 한 객체 구조에 속해있는 객체들에 대해 수행될 필요가 있으며, 연산으로 클래스들을 더럽히고 싶지 않을 때 구조 Visitor : 객체 구조 내에 있는..

이 글은 필자의 궁금증으로 작성했습니다. 공부합시다! 1. 발단 키메라 : 저 js 에서 StirngBuilder로 이렇게 작업했어요. 어때요? ㅎㅎ :) 동기A : 굳이 이렇게 해야 하는 이유가 있나요? 키메라 : StringBuilder를 사용하면 메모리를 아낄 수 있자나요 동기A : js에서도 그런가요? 그리고 마지막에 join하나 더하나 똑같은거 아닌가요? 키메라 : 보기 더 좋지 않나요? 자바처럼 함수 만들어서 쓰는게 깔끔하고 백틱을 사용해서 깔끔하게 보이게 하고 싶었어요. 동기A : 글쎄요 저는 별론데요? 굳이 그렇게 쓸 필요가 없어보이는데요? 키메라: ???? 동기A : ???? 2. 개요 js에서 StringBuilder를 만들어서 사용했는데, 내가 사용을 하면서도 무슨 단순히 보기 좋다는..