일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
- 프론트엔드
- 쿠버네티스
- 블록체인
- JavaScript
- 솔리디티
- VUE
- 백엔드
- 이더리움
- 웹
- 백준
- HTML
- 자바스크립트
- k8s
- es6
- 타입스크립트
- 알고리즘
- next.js
- AWS
- docker
- TypeScript
- 이슈
- BFS
- 컴퓨터공학
- 파이썬
- 리액트
- react
- 클라우드
- CSS
- 가상화
- kubernetes
- Today
- Total
![react](https://tistory1.daumcdn.net/tistory/4365896/skin/images/react-logo.png)
목록자바스크립트 (37)
즐겁게, 코드
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/EYFj2/btrdruWO1fK/jlhh7ZpEuRjqZ8fKpQaEak/img.png)
SOLID 원칙은 작은 모듈을 만들거나 큰 아키텍처를 기획할 때 모두 유용하게 사용되는 원칙입니다. 이 원칙은 객체지향 프로그래밍에만 적용할 수 있는 이론이 아니라, 소프트웨어를 설계할 때 이 원칙을 지켜가며 설계하면 소프트웨어의 유연성과 재사용성을 높일 수 있을 것이라 기대됩니다. SOLID 란? S : Single Responsive Principle (단일 책임 원칙) O : Open Closed Principle (개방 - 폐쇄 원칙) L : Liskov Substitution Principle (리스코프 치환 원칙) I : Interface Segregation Principle (인터페이스 분리 원칙) D : Dependency Inversion Principle (의존성 역전 원칙) 단일 책..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/JCvoi/btrdfH2vfY1/WJYdXTM8OiEiM73kDmmLeK/img.png)
오늘은 객체에 담긴 값을 불변으로 만드는 방법에 대해 알아보도록 하겠습니다. const person = { name: "chanmin", age: 25, }; 먼저 const 키워드로 선언한 변수에 객체 리터럴을 할당한 모습입니다. 이러면 객체가 불변 상태가 된 걸까요? 물론 아닙니다. 이렇게 const 변수에 객체를 할당하면 해당 객체의 참조 만이 불변값이 되어 새로운 객체를 할당하는 것이 불가능하고, 내부 프로퍼티를 변경하는 것은 여전히 자유롭게 가능합니다. const person = { name: "chanmin", age: 25, }; person.age = 100; person.school = "KAU"; console.log(person); // age 프로퍼티의 값은 변경이 가능합니다. //..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cjEhKA/btrcIUHqoyU/Ho9YboO68TWAcuTgouR2wK/img.png)
자바스크립트의 진화 자바스크립트 스펙은 계속해서 추가되고 있는데, 새로운 기능을 사용하려 해도 구버전 브라우저나 런타임 환경(Node.js)에서는 이를 제대로 지원하지 못하는 경우가 종종 있습니다. 따라서 최신 문법을 사용하자니 구세대 브라우저에서는 코드가 동작하지 않고, 그렇다고 항상 과거의 문법으로 코드를 짤 수도 없는 노릇인데요, 이런 딜레마를 해결하기 위해서는 최신 문법을 구버전 환경에서도 실행할 수 있도록 이전 문법으로 치환하는 트랜스파일 이라는 작업을 수행해야 합니다. 트랜스파일 예시 ES6에 새로 도입된 분해 할당 이라는 문법이 있습니다. // index.js const student = { name: "chanmin", age: 25 }; const { name, age } = studen..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/d2woQN/btrcEw7ywhP/ZhcbSKTybLKsv4F8Yzc3r0/img.png)
비동기 코드 테스팅 지난 글에서 jest 로 기본적인 테스트를 구성하는 방법을 다루었다면, 조금 더 나아가 비동기적으로 동작하는 코드를 테스팅해 보겠습니다. 테스팅 설정 이전 글에서 테스트 코드는 node.js 환경에서 동작한다고 언급했는데요, 따라서 @babel/preset-env 프리셋을 통해 트랜스파일을 수행하면 ES6 문법을 거의 다 사용할 수 있지만, async-await 문법을 사용하려 하면 ReferenceError: regeneratorRuntime is not defined 라는 오류를 만나게 됩니다. 이를 해결하기 위해 @babel/plugin-transform-runtime 이라는 바벨 플러그인을 설치하고 적용해줍니다. yarn add -D @babel/plugin-transform-..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cGCZ5F/btq52U2dZy5/EEQGVCmcFygsjneKY8OEB0/img.png)
Array.from() 은 문자열 등 유사 배열(Array-like) 객체나 이터러블한 객체를 배열로 만들어주는 메서드입니다. (※ 유사 배열 객체란, 키가 인덱스 값으로 되어있고 길이를 나타내는 length 속성을 갖는 객체를 의미합니다.) // 1. 문자열을 배열로 만드는 예시 console.log(Array.from("Hello")); // [ 'H', 'e', 'l', 'l', 'o' ] // 2. 유사 배열 객체를 배열로 만드는 예시 console.log(Array.from({ 0: "찬민", 1: "희진", 2: "태인", length: 3 })); // [ '찬민', '희진', '태인' ] // 3. 함수의 매개변수들을 순서대로 배열로 만드는 예시 const funcA = (...argume..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/XeWmv/btq5g5jQkTE/PPFWXbta0u9UeCEtKd00BK/img.png)
타입스크립트가 점점 프론트엔드 생태계에서의 입지를 굳혀가고 있는데요, 간단한 입력값을 상태로 관리하는 예제를 타입스크립트로 구성해보도록 하겠습니다. 😆 진짜 쉬워요! 타입스크립트를 끼얹기 전까진... import React, { useState } from "react"; const App = () => { const [name, setName] = useState(null); const handleInput = (e) => { setName(e.target.value); }; return ( {name} ); }; export default App; 입력받는 값을 상태로 관리하고 화면에 나타내는 코드입니다. 이렇게만 보면 간단하지만 갑자기 타입스크립트를 얹게 되면 막막할 수도 있는데요, 위 코드에 차근..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/uvFZs/btq434FiwJm/2hKkwcVgMlsU4Wd2YjNyo0/img.png)
🚨 주의! 본 포스팅은 리액트 웹 어플리케이션을 기반으로 합니다. 지난 글에 이어 유저 페이지에서 프로필 사진을 지정할 수 있도록 하고, 이미지를 업로드하면 곧장 S3에 올라갈 수 있도록 합니다. 이를 구현하는 과정을 크게 [input 태그 커스텀] - [AWS SDK 연동] - [대체 이미지 설정] 단계로 나눠 설명드리겠습니다. [1 / 3] - input 태그 커스텀 먼저 클라이언트의 파일 업로드를 위해 input[type=file] 태그를 활용합니다. 그런데, 이걸 스타일하는게 아주 악랄합니다. input[type=file]는 브라우저가 기본적으로 “파일 선택 / 선택된 파일 없음” 이라는 문구를 출력하는데요, 이게 속성을 설정한다고 해서 보이지 않는게 아니라 position: absolute 등 ..