본문 바로가기

Programming

 (80)
[React] AWS S3 이미지 파일 업로드 하기 : AWS S3 버킷 생성 AWS S3는 Amazon Simple Storage Service의 약자로, 객체 스토리지 서비스이다. 우선, 이 서비스를 왜 이용하게 되었는가! 나는 프로젝트를 진행하면서 프로필 이미지를 저장 후, 불러오는 작업이 필요했다. 처음에는 백엔드 단에서 DB에 이미지 파일을 저장해두고 작업을 처리하였는데, 점차 파일이 늘어나면서 보다 효율적인 관리 방법이 필요하게 되었다. 그래서 알게 된 것이 AWS S3! AWS S3에 이미지 파일을 올려두고, 이미지 Url만 DB에 저장하는 것이다. 결과적으로 DB의 저장되는 용량을 줄일 수 있었다. 앞으로 또 이 서비스를 사용할 날을 위하여 정리해보았다. 1. 버킷 만들기 Amazon S3를 들어가면 보이는 화면이다. 여기서 오른쪽에 보이는 버킷 만들기 버튼을 클릭한..
[React] useState 객체 값 변경하기 useState의 값을 객체로 가지고 있을 때, 객체 내용을 업데이트 하는 방법이다. useState 객체 변경하기 setContition의 current 값을 가져온다. 원하는 객체 key, value를 저장하고, 업데이트 된 객체를 리턴한다. 전체 코드 import React, { useState } from "react"; function Test() { const [condition, setCondition] = useState({ category: "", val1: "", type: "", }); const changeCondition = (key, value) => { setCondition((current) => { let newCondition = { ...current }; newCond..
[React] 자식 컴포넌트에서 부모 컴포넌트에 있는 state 값 변경하기 부모 컴포넌트에 있는 값을 변경해주기 위해서는 자식 컴포넌트에 Props을 내려주게 된다. 하나의 방법으로 useState의 set 함수를 내려주어 부모의 state 값을 직접 바꾸는 모습을 볼 수도 있지만, 그것보다는 부모 컴포넌트에서 state 값을 변경하는 함수를 작성하고 자식 컴포넌트에 이 함수를 전달하는 방법이 안전한 것 같다. 부모 컴포넌트 import React, { useState } from "react"; import Child from "./Child"; function Parent() { const [search, setSearch] = useState(undefined); const changeSearch = (value) => { setSearch(value); }; return..
[Python] 문자열에서 특정 문자 삭제하기 : strip(), replace() 문자열에서 문자를 삭제하는 방법에는 여러가지가 있다. 그 중에 strip() 함수와 replace() 함수로 삭제하는 방법을 알아보려 한다. strip() 문자열 양 끝에서 공백을 제거하거나 원하는 문자를 제거한다. str = " strawberry " result = str.strip()# 'strawberry' result = str.lstrip()# 'strawberry ' result = str.rstrip()# ' strawberry' str = ",,rrttgg.....strawberry..rrr" result = str.strip(",.grt")# 'strawberry' replace() 문자열 내에 어떤 패턴에 일치하는 일부 또는 모든 부분이 교체된 새로운 문자열을 반환한다. str = "..
[JavaScript] DOM, Document, Node란? DOM (Document Object Model) 객체 지향 모델로써 구조화된 문서를 표현하는 방식으로, 프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경할 수 있도록 한다. Document 객체 웹 페이지를 의미하며, 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때 사용한다. 메소드 설명 document.createElement() 요소 생성 document.getElementById() id 요소 선택 document.getElementsByClassName() class 요소 선택 document.getElementsByName() name 속성값 요소 선택 document.getElementsByTagName() tag 요소 선택 document.getAttribute() 특정 태그가..
[Python] 집합(Set)과 딕셔너리(Dictionary) 파이썬의 컨테이너 자료형(여러개의 데이터가 묶여있는 자료형)에 대표적으로 리스트, 튜플, 딕셔너리, 집합이 있다. 보통 리스트를 쉽게 많이 사용하지만, 알고리즘을 풀다보면 경우에 따라 더 유용하게 쓸 수 있는 자료형이 있다. 그 중 집합과 딕셔너리는 시간복잡도를 줄일 수 있는 방법이 되기도 한다. 집합(Set) 1. 중복이 없다. 2. 순서가 없다. 집합 생성과 원소 추가/삭제 s = {1, 3, 5} s.add(7) s.update([3, 15, 4]) s.remove(5) # 원소가 존재하지 않으면 에러 s.discard(13)# 원소가 존재하지 않더라도 정상종료 집합 연산 union = s1 | s2 # 합집합 intersection = s1 & s2 # 교집합 diff = s1 - s2 # 차집합..
[JavaScript] 이벤트 등록 및 삭제하기 : EventListener EventListener 등록하기 1. onclick="function-name()" click 2. el.addEventListener('type', function-name, _option_); var target = document.getElementById('btn'); function buttonOnclick() { console.log("button click!"); } target.addEventListener('click', buttonOnclick); 3. el.addEventListener('type', function() {}); target.addEventListener('click', function() { console.log("button click!"); // button e..
[React] React란? React란? 리액트는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 이는 데이터가 앱에 사용되는 방식과 그 데이터가 변화하는 결과에 따른 UI 변경 방법에 대해 명확한 규칙을 설정하여 수행한다. 왜 React를 사용해야 할까? HTML과 CSS, JavasSript, Jquery 등 다양한 방법으로 웹 페이지 제작은 얼마든지 가능하다. 그렇다면 왜 React를 사용해야 할까? 요즘같은 시대에는 사용자의 응답에 따라 인터페이스가 지속적으로 변해야 하며, 웹 페이지는 각 페이지마다 관리가 되어야 한다. 하지만, 그렇게 하기 위해선 기존 방식으로 관리하기 어려워진 것이다. 결국, 페이스북에서는 이를 해결하기 위해 React를 출시하였고, 동적인 웹페이지를 관리하기 보다 수월해졌..

티스토리툴바