programming language 73

[React] Props와 State 이해하기 / Hook(useState, useEffect) 적용

저번 시간에 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)란 무엇인가? / 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는 싱글 스레드 언어로, 코드가 작성된 순서대로 작업을 처리한다. 여러개의 작업이 있으면 앞의 작업이 끝날 때 까지 기다렷다가 뒤를 순서대로 실행하..

Javascript에는 StringBuilder가 필요 없나?

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

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..

Set이란? HashSet, TreeSet, LinkedHashSet

이번 글의 목적은 Set에 대해 이해하고, HashSet과 TreeSet, LinkedHashSet이 있는데 이 기능은 무엇이 있고, 어느 상황에 사용하면 좋을지 생각해는 것이다. 1. Set이란? 중복이 없는 element들을 저장하는 컬렉션. 더 형식적으로, set은 e1.equals(e2)같은 e1과 e2 의 한 쌍을 가지지 않는다. 이름에 함축되어 있듯이, 이 인터페이스는 수학적인 set abstraction을 모델화한다. 출처 : https://docs.oracle.com/javase/8/docs/api/java/util/Set.html 또한, set을 이해하기 위해 다음 그림을 참고하면 좋다. 수학적으로 중복되지 않은 항목들이 모인 것을 set라고 한다. 간단하게 set의 특징에 대해 이야히가..

[Java] Comparable, Comparator, 정렬 방법

필자는 무언가 정렬을 잘 못하는것을 최근 깨달았다. 그래서 이번에는 자바에서 정렬을 하는 방법을 학습하려고 한다. 이게 이런게 참 기초이지만 모르는다는것에 부끄러움을 사알짝 느끼면서 오늘도 시자악~ 1. Comparable oracle에서 Comparable에 대한 설명을 가져왔다. 이 인터페이스는 그것을 구현하는 각 클래스의 객체에 total ordering을 수행한다. 이 ordering은 클래스의 natural ordering으로 여기지고, 클래스의 compareTo 메소드는 natural 비교 메소드로 여겨진다. 이 인터페이스를 구현하는 객체의 리스트는 자동적으로 Collections.sort(그리고 Arrays.sort)로 정렬될 수 있다. 이 인터페이스를 구현하는 객체는 정렬된 맵에서 키로 이..

Map 알아보기

저번에 List에 대해서 정리를 했는데 정리를 하지 않을 것이 Map이랑 Set이 있다. 이번에는 Map에 대해 알아보고자 한다. 1. Map이란? java.util에 존재하는 map interface는 키와 값사이의 매핑을 나타낸다. 맵 인터페이스는 컬렉션 인퍼테이스의 하위 항목이 아니다. 그러므로 컬렉션 타입의 나머지와 약간 다르게 작동한다. 맵은 유일한 키를 가진다. 출처 : https://www.geeksforgeeks.org/map-interface-java-examples/ Map은 사전처럼 key-value 연관 매핑같은 사용에 완벽하다. 맵은 키로 색인을 하는데 혹은 키로 값을 가져오거나 수정할 때 사용한다. 흔한 시나리오는다음과 같다. 에러 코드와 그 설명에 대한 맵 우편번호와 도시의 맵..