분류 전체보기 170

[React] 리액트(React)란 무엇인가? / create-react-app 사용하기

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

[javascript] 유용한 js 기능 - 2 / generator 함수 / 날짜 변환

이번에는 저번에 글에 이어서 (저번 글 보고 싶다면 클릭!) 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..

[javascript] 유용한 js 기능 - 1

필자는 회사에서 급하게 투입된 프로젝트에서 배정받은 일의 업무 분배도는 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 많은 내용이 있지만 필..

[javascript] 동기 & 비동기 / promise, async, await 사용하기

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

방문자(Visitor) 패턴이란?

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

Javascript에는 StringBuilder가 필요 없나?

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

템플릿 메소드(Template Method) 패턴이란?

1. 템플릿 메소드 패턴이란? 의도 객체의 연산에는 알고리즘의 뼈대만을 정의하고 각 단계에서 수행할 구체적 처리는 서브클래스 쪽으로 미룬다. 알고리즘의 구조 자체는 그대로 놔둔 채 알고리즘 각 단계 처리를 서브클래스에서 재정의할 수 있게 한다. 즉, 알고리즘 구조를 서브 클래스가 확장할 수 있도록 템플릿으로 제공하는 방법이다. 사용 시기 어떤 한 알고리즘을 이루는 부분 중 변하지 않는 부분을 한 번 정의해 놓고 다양해질 수 있는 부분은 서브클래스에서 정의할 수 있도록 남겨두고자 할 때 서브클래스 사이의 공통적인 행동을 추출하여 하나의 공통 클래스에 몰아둠으로써 코드 중복을 피하고 싶을 때 서브클래스의 확장을 제어하고자 할 때 구조 Abstract Class : 서브클래스들이 재정의를 통해 구현해야 하는 ..

전략(Strategy) 패턴이란?

1. 전략 패턴이란? 의도 동일 계열의 알고리즘군을 정의하고, 각 알고리즘을 캡슐화하여, 이들을 상호교환이 가능하도록 만든다. 알고리즘을 사용하는 클라이언트와 상관없이 독립적으로 알고리즘을 다양하게 변경할 수 있게 한다. 다시 말하면, 객체들이 할 수 있는 행위 각각에 대해 전략 클래스를 생성(알고리즘군 정의)하고, 유사한 행위들을 캡슐화 하는 인터페이스를 정의하여(알고리즘을 캡슐화), 객체의 행위를 동적으로 바꾸고 싶은 경우 직접 행위를 수정하지 않고 전략을 바꿔주기만 함으로써 행위를 유연하게 확장하는 방법을 말한다.(이들을 상호교환이 가능하도록 만든다.) 이름에서 볼 수 있듯이, 객체의 행위를 우리가 원할 때, 즉 전략에 맞도록 변경하는 패턴이다. 사용시기 행동들이 조금씩 다를 뿐 개념적으로 관련된 ..

Tree 구조(Structure)란?

필자는 Tree 구조에 대해 많이 들었지만 정확히 이해를 하지 못한것 같다. 이번에는 제대로 개념에 대해 이해하고 이것을 코드로도 작성해볼 것이다. 이 글은 다음 사이트들를 참조했다. 출처 사이트 목록 클릭 더보기 https://en.wikipedia.org/wiki/Binary_tree https://yoongrammer.tistory.com/71 https://www.programiz.com/dsa/trees https://www.geeksforgeeks.org/introduction-to-tree-data-structure/ https://justin-miguel-fernandez.medium.com/algorithm-time-complexity-9bf96bc84d2d https://www.geek..

상태(state) 패턴이란?

1. 상태(state) 패턴이란? 의도 객체의 내부 상태에 따라 스스로 행동을 변경할 수 있게 허가하는 패턴. 이렇게 하면 객체는 마치 자신의 클래스를 바꾸는 것처럼 보인다. 사용 시기 객체의 행동이 상태에 따라 달라질 수 있고, 객체의 상태에 따라서 런타임에 행동이 바뀌어야 할 때 어떤 연산에 그 객체의 상태에 따라 달라지는 다중 분기 조건 처리가 너무 많이 들어 있을 때 구조 Context : 사용자가 관심있는 인터페이스를 정의. 객체의 현재 상태를 정의한 ConcreteState 서브클래스의 인스턴스를 유지 및 관리 State : Context의 각 상태별로 필요한 행동을 캡슐화하여 인터페이스로 정의 ConcreteState 들 : 각 서브 클래스들은 Context의 상태에 따라 처리되어야 할 실제..