'💻 Programming' 카테고리의 글 목록 (3 Page)

[TypeScript] Map

2023.07.27

map은 React.js에서는 주로 배열로 이루어진 데이터를 뿌려줄 때 많이 사용했었는데, 타입스크립트에서 사용법이 조금 특이한 것 같아 간단하게 정리해보고자 한다. 1. Map이란? 자바스크립트와 타입스크립트에서 제공되는 데이터 구조 중 하나로, Key와 Value의 쌍을 저장하는 컬렉션이다. 이 컬렉션은 값에 대한 고유한 키를 사용하여 값을 저장하고 검색하는 데 사용된다. 2. Map의 특징 1) 고유한 key값 `Map`은 key-value 쌍을 저장하는데, 각 key는 중복될 수 없으며 unique한 고유값이어야 한다. key가 중복될 경우, 가장 마지막 value가 저장된다. 2) key-value 쌍으로 저장 각 항목을 key-value의 쌍으로 저장하여, key값을 사용하여 해당 key에 연..

💻 Programming/Algorithm

[프로그래머스 Lv. 0] 배열 회전시키기

2023.07.26

프로그래머스 알고리즘 풀이 https://school.programmers.co.kr/learn/courses/30/lessons/120844 사용 언어 : 자바스크립트 JavaScript JS 1. 배열 회전시키기 1) 문제 설명 정수가 담긴 배열 numbers와 문자열 direction가 매개변수로 주어집니다. 배열 numbers의 원소를 direction방향으로 한 칸씩 회전시킨 배열을 return하도록 solution 함수를 완성해주세요. 2) 제한 사항 3 ≤ numbers의 길이 ≤ 20 direction은 "left" 와 "right" 둘 중 하나입니다. 3) 입출력 예 numbers direction result [1, 2, 3] "right" [3, 1, 2] [4, 455, 6, 4, ..

💻 Programming/React

[Redux] React Redux 기본 개념과 설치/세팅 정리

2023.06.25

1. Redux란? 상태관리 라이브러리, 중앙 state 관리소를 사용할 수 있도록 도와주는 패키지 컴포넌트 간에 state 데이터들을 부모-자식 관계로 설정하여 props를 통해 한정적으로 전달하지 않고, 중앙에서 관리하여 어떤 컴포넌트에서든 쉽게 접근하고 제어할 수 있도록 해준다. 1) Redux의 흐름 View에서 액션이 일어난다. dispatch에서 action이 일어나게 된다. action에 의한 reducer함수가 실행되기 전에 middleware가 작동한다. middleware에서 명령내린 일을 수행하고 난 뒤, reducer함수를 실행한다. reducer의 실행결과 store에 새로운 값을 저장한다. store의 state에 subscribe하고 있던 UI에 변경된 값을 준다. 2) Pro..

💻 Programming/Algorithm

[프로그래머스 Lv. 0] 인덱스 바꾸기

2023.06.25

프로그래머스 알고리즘 풀이 사용 언어 자바스크립트 JavaScript JS 1. 프로그래머스 Lv. 0 인덱스 바꾸기 1) 문제 설명 문자열 my_string과 정수 num1, num2가 매개변수로 주어질 때, my_string에서 인덱스 num1과 인덱스 num2에 해당하는 문자를 바꾼 문자열을 return 하도록 solution 함수를 완성해보세요. 2) 제한 사항 1

💻 Programming/JS, TS

[JavaScript] 자바스크립트로 크리스마스까지 남은 시간 계산하기

2023.06.21

나는 개인적으로 크리스마스의 분위기와 무드를 매우 매우 좋아하는 사람이다. 아직 한여름도 채 오지 않았지만, 자바스크립트를 이용하여 올해 크리스마스까지 남은 시간을 계산해 보자! 1. JavaScript를 사용하여 크리스마스까지 남은 시간 계산하기 먼저 HTML을 간단하게 작성하고, 자바스크립트 코드를 작성해봤음! 자바스크립트 코드블럭 내에 순서 단계를 주석으로 적어두었고, 자세한 설명은 코드블럭 하단에서 풀어서 적어보려고 한다. Santa is coming! // 1) 시간을 표시할 HTML 요소 지정 const countdownClock = document.querySelector(".countdown"); // 2) 함수 작성하기 const waitingXmas = () => { // (1) 오늘 ..

💻 Programming/JS, TS

[JavaScript] var, let, const

2023.06.20

1. 변수란? 1) 정의 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름 기억하고 싶은 데이터 값을 메모리에 저장하고, 저장된 데이터 값을 재사용하기 위해 사용 식별자: 변수의 이름을 '식별자(identifier)'라고도 하는데, 식별자는 값 자체가 아닌 값을 저장하고 있는 메모리 주소를 기억한다. 식별자는 변수명에 국한된 개념이 아니고, 변수, 함수, 클래스 등의 이름은 모두 식별자라고 할 수 있다. 2) 변수의 생성 3단계 - 선언, 초기화, 할당 (1) 변수 선언 변수 선언이란 변수를 생성하는 것, 즉 값을 저장하기 위해 메모리 공간을 확보하고 변수명과 확보된 메모리 공간의 주소를 연결해서 값을 저장할 수 있도록 준비하는 것을 말한다. 변수를 선언..

💻 Programming/HTML, CSS

[HTML] 웹 문서의 기본 구조: header, main, footer

2023.05.19

메뉴 1 메뉴 2 메뉴 3 h1는 가장 중요한 제목으로 페이지에 1개만 사용할 것 중간을 빼먹지 않고 순차적으로 사용할 것 글씨 크기를 조정하는 용도로 사용하지 않는다 부차적, 보완적 영역 웹페이지의 하단

💻 Programming/HTML, CSS

[CSS] BEM (Block-Element-Modifier)

2023.02.25

https://naradesign.github.io/bem-by-example.html 예제로 이해하는 BEM. HTML, CSS(flex/grid), UI/UX, Accessibility, 정찬명 naradesign.github.io

💻 Programming/HTML, CSS

[CSS] CSS, 그리고 스타일 시트

2023.02.20

📌 CSS란? Cascading Style Sheets의 약자로, 웹페이지를 보기 좋게 꾸미기 위해 작성하는 코드 HTML이 웹문서의 뼈대를 이룬다면, CSS는 근육이라고 볼 수 있음 (나중에 배우게 될 JS는 동적인 웹사이트 구현하는 뇌의 역할) /* 선택자 { 속성1: 속성값, 속성2: 속성값2} */ p { text-align: center; color: red; } 📌 스타일 시트 스타일 시트는 크게 '브라우저 기본 스타일'과 '사용자 스타일'로 나뉘고, 여기서 사용자 스타일은 다시 '인라인 스타일', '내부 스타일 시트', '외부 스타일 시트' 세 가지로 나뉘는데 이 중에서 내부 스타일 시트와 외부 스타일 시트에 대해 정리해보려고 한다. 1. 내부 스타일 시트 : 같은 HTML 웹문서 안에 작성..

💻 Programming/기타

프론트엔드 웹개발 공부 유용한 사이트 정리

2023.02.19

강의 노마드 코더 - 유튜버 노마드코더 니콜라스의 무·유료 강의 사이 https://nomadcoders.co/ 유데미 - 미국 온라인 강의 사이트 https://www.udemy.com/ko/ 인프런 - 국내 온라인 강의 사이트 https://www.inflearn.com/ 개발 전반 MDN Web Docs - 웹 관련 나무위키같은 사이트 https://developer.mozilla.org/ko/ 출퇴근길 개발 읽기 - 개발 관련 컨텐츠, 트렌드 관련 다양하고 유익한 자료 https://github.com/Integerous/goQuality-dev-contents CSS Flexbox Froggy - CSS Flexbox에 대한 개념을 게임으로 이해할 수 있는 사이트 https://flexboxfr..

티스토리툴바