전체 글

자바스크립트 enum 사용하기 Object.freeze()

자바스크립트 enum과 같은 변수를 만들기 위해서 Object.freeze()를 사용할 수 있다. const obj = { a: 1, b: 2, } obj.a = -1; console.log(obj); // {"a": -1, "b": 2} Object.freeze(obj); obj.b = -2; console.log(obj); // {"a": -1, "b": 2} 위와 같이 Object.freeze()를 적용하면, 더 이상 객체의 프로퍼티가 수정되지 않는다. Object.isFrozen() 메서드를 통해서 이 객체가 freeze 되었는지 판별할 수 있다. console.log(Object.isFrozen(obj)); // true 참고자료 : https://developer.mozilla.org/ko/d..

React 컴포넌트 props.children에 대해서 알아보기

리액트의 컴포넌트 props는 children이라는 값을 가진다. props.children은 모든 컴포넌트에서 사용될 수 있고, 해당 컴포넌트의 여는 태그와 닫는 태그 사이의 모든 내용을 가진다. // TmpComponent.js const TmpComponent = ({ children }) => { return {children} ; }; export default TmpComponent; 위와 같이 props.children을 사용할 수 있다. TmpComponent 컴포넌트로 감싸지는 모든 내용은 TmpComponent의 외곽선이 적용된 div 태그 내부에 존재하게 된다. // App.js import "./styles.css"; import TmpComponent from "./TmpCompo..

React Redux에서 connect와 bindActionCreators 사용하기

React에서 Hook을 사용하지 않고 Redux를 사용하는 방법을 알아봤다. react-redux의 connect 메서드를 통해서 전역 상태와 dispatch를 props로 전달할 수 있다. 추가적으로 bindActionCreators를 사용하여 자동으로 액션 함수를 dispatch로 감싸줄 수 있다. bindActionCreators는 필수적으로 사용할 필요는 없지만, 코드를 간단하게 만들어준다. connect로 연결한 상태와 dispatch 함수는 props를 통해 받아와 사용할 수 있다. import { bindActionCreators } from "redux"; import { connect } from "react-redux"; import { addOrderAction } from "../..

npm & package.json에 대해서

package.json은 프로젝트에 대한 정보를 가지고 있다. 이를 통해서 협업할 때 같은 버전의 모듈들로 프로젝트를 함께 진행한다. 이것으로 협업때 다른 모듈 버전을 사용함으로써 생길 오류를 방지한다. 우리들은 선배들이 먼저 만들어 놓은 모듈을 사용하여 빠르고 검증된 라이브러리를 사용할 수 있다. node.js에서 외부 라이브러리를 받는 가장 대표적인 방법이 npm(Node Package Manager)를 사용하는 것이다. 그리고 프로그램이 실행되기 위해서 어떤 패키지가 필요한지 적어둔 것이 바로 package.json이라고 할 수 있다. package.json에는 여러 속성이 있다. name, version, desciption은 프로그램의 정보를 담고 있다. scripts를 통해서 CLI에서 사용 ..

다양한 OpenAPI / API 들 알아보기

🍟 SK open API https://openapi.sk.com/ SK open API 다양한 데이터 상품 IT 기술에 대한 정보와 다양한 행사 소식, 뉴스레터를 통해 확인해보세요. 뉴스레터 신청하기 문의가 필요하신가요? 서비스 사용, 기술 등에 대한 문의 사항에 대해 답변드립 openapi.sk.com 주로 TMap을 통해서 여러가지 지역에 대한 정보를 제공하는 API들을 제공하고 있다. 11번가의 쇼핑 데이터나 AI관련 API등 여러가지 api를 지원한다. 대부분의 API는 무료로 제공되며, 일일 사용량을 넘기면 사용이 제한된다. 일일 사용량을 넘겨 사용하기 위해서는 따로 문의가 필요한 듯 하다. 🥗 Naver Cloud Platform https://www.ncloud.com/ NAVER CLOU..

timer 만들기 (in React)

useEffect와 setInterval을 사용하여 timer를 만들 수 있다. import { useEffect, useState } from "react"; const getSeconds = (time) => { const seconds = Number(time % 60); if(seconds { const [time, setTime] = useState(300); // 남은 시간 (단위: 초) useEffect(() => { const timer = setInterval(() => { setTime((prev) => prev - 1..

파이썬에서 리스트 안에 리스트 삽입하기 (Python)

파이썬에서 다차원 배열을 만드는 방법에 대해서 기록하고자 한다. # 초기화 all_list = [] insert_list = ['1', '2', '3'] # insert_list를 저장 후 새 값을 넣어 다시 저장한다. all_list.append(insert_list) insert_list.append('4') all_list.append(insert_list) # 우리가 기대하는 것은 1,2,3의 값을 가지는 list와 1,2,3,4의 값을 가지는 list를 all_list가 가지는 것이다. print(all_list) # 하지만 실제로 출력되는 값은 # [['1', '2', '3', '4'], ['1', '2', '3', '4']] 알고리즘 문제를 푸는 도중에 위와 같이 리스트 안에 리스트를 삽입하..

TCP와 UDP에 대한 간단 정리

인터넷의 transport protocols 서비스에는 TCP와 UDP가 존재한다. 이 둘의 가장 큰 차이점은 reliable 이다. TCP는 error와 loss가 없고 패킷을 순서대로 보낸다. 반면에, UDP는 받는 그대로 바로 보낸다. 따라서 error가 있을 수도 있고, 패킷의 loss가 발생할 수도 있으며, 패킷을 순서대로 보내지도 않는다. TCP의 특징 패킷을 보낸 process와 받는 process간의 신뢰할 수 있는 전송을 제공한다. 🫒 데이터를 보내기 전에 미리 연결한다. (set-up, connection-oriented) congestion control 🧅 만약 네트워크가 과부화 되면, 보내는 패킷의 양을 조절한다. flow control 🧅 받는 process가 받을 수 있는 양 ..