코딩기록

문제SNS에서 서로가 팔로우를 했다는 것을 '맞팔'이라고 표현합니다. 다음 팔로우 관계를 나타낸 배열을 통해 서로 맞팔 관계인 쌍의 수를 리턴하는 함수를 작성하세요. 이때 ["철수", "영희"] 라는 정보는 철수가 영희를 팔로우 했음을 나타냅니다. 입력  팔로우 관계가 표현된 String 2차원 배열 A. 출력  맞팔 관계인 쌍의 수 매개변수 : Stirng[][] A 리턴타입 : int 풀이const solution = (A) => { const followSet = new Set(); // 팔로우 관계 저장 let mutualCount = 0; // 맞팔 관계 수 for (const [a, b] of A) { const reverseRelation = `${ b } -> ${ a }`; /..

스왑 기본 동작좌항에서 배열의 각 위치에 우항의 값을 차례대로 할당하는 방식[a, b] = [b, a];​우항: [b, a] → 우항에서 b와 a의 값이 평가.좌항: [a, b] →  좌항에서 a와 b는 우항의 값을 차례대로 받는 것결과적으로,  좌항의  a에는 b의 값이 들어가고  b에는 a의 값이 들어감.    순열 재귀함수 - 스왑순열 (Permutation) 은 순서를 고려하여 나열하는 경우의 수let input = ['a', 'b', 'c'];let count = 0;// 순열 재귀함수 (배열, 시작할위치, 순열길이)const permutation = (arr, s, r) => { // 1. 재귀함수를 멈춰야할 조건 if (s === r) { count++; console.log(..

Array.from()은 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 배열로 변환하는 데 사용.문법 Array.from(arrayLike, mapFunction, thisArg);매개변수arrayLike: 배열로 변환하려는 유사 배열 객체 또는 반복 가능한 객체.mapFunction (선택 사항): 배열의 각 요소에 대해 호출할 매핑 함수.thisArg (선택 사항): mapFunction을 실행할 때 this로 사용할 값.사용 예제1. 유사 배열 객체를 배열로 변환  (문자열 => 문자배열)let str = "Hello"; let arr = Array.from(str); console.log(arr); // ["H", "e", "l", "l", ..

1. map const extractedCards1 = cards.map(card1 => { console.log('card1: ', card1); return card1});console.log('extractedCards1: ', extractedCards1);//printcard1: {}card1: {}extractedCards1: [ {}, {} ] 2. forEach cards.forEach(card2 => { console.log("card2:", card2);});//printcard2: {}card2: {} 3. for for (let i = 0; i  4. for...of for (const card4 of cards) { console.log( card4);}//print{..

useEffect는 React의 훅(hook) 중 하나로, **부수 효과(side effects)**를 처리하기 위해 사용된다.컴포넌트가 렌더링된 후 특정 작업을 수행하거나, 상태나 props의 변경에 따라 동작을 정의할 수 있게 해준다. 클래스형 컴포넌트에서 사용했던 생명주기 메서드(componentDidMount, componentDidUpdate, componentWillUnmount)를 대체하는 역할을 한다. 특징1. 의존성 배열에 따라 동작 2. 클린업(Cleanup)반환값으로 클린업 함수를 정의할 수 있음.이는 주로 이벤트 리스너 제거, 타이머 정리, 구독 취소 등에 사용.import React, { useState, useEffect } from 'react';export default fu..

코드의 주석이 조금 복잡하지만 요지는React의 setState 함수에서 콜백을 사용하는 것은 상태 업데이트가 비동기적이라는 점을 고려해 최신 상태를 안전하게 참조하기 위한 메커니즘이라는 것이다. const [number, setNumber] = useState(1);number는 현재 상태 값(배열)이고, setNumber는 이 상태를 업데이트하기 위한 함수.초기값( useState(1))은 원시타입 Number다.import React, { useState } from "react";export default function Counter2() { const [number, setNumber] = useState(1); // 비동기 적으로 실행됨-콜백사용하지 않아- 상태 업뎃시 최신 상태 반영안됨..

원시타입 state와 참조타입 state는 리액트에서 상태를 업뎃하는 방식과 리렌더링 조건에 차이가 있다.[ state, setState ]스테이트, 셋스테이트 통상적으로 이렇게 부른다. 살펴보면,  1. 원시 타입(Primitive Type) State원시 타입은 값 자체를 저장하는 데이터 타입.string, number, boolean, null, undefined, symbol, bigint특징값 자체가 변경되면 React는 해당 상태를 새 값으로 인식하고 리렌더링을 트리거함.업데이트가 간단하며 불변성(immutability)을 비교적 쉽게 유지할 수 있음.예제 [ jsx ]import React, { useState } from "react";function Counter() { const [c..

1. CRA (create react app)리액트 공식 홈피https://ko.legacy.reactjs.org/docs/add-react-to-a-website.html 노드와, npm 버전 확인node -vnpm -v  리액트 프로젝트 생성  npx create-react-app 프로젝트이름npx create-react-app my-app 설치확인 ls -al설치한 위치로 이동 cd my-app 간혹 프로젝트 생성 후 web-vitals 모듈이 누락된 경우 아래 명령어로 설치 하면된다. npm install web-vitals그리고 현재 250106월  react@19.0.0 버전과 @testing-library/react@13.4.0 버전 사이에 버전 충돌이 있다.1. React 버전 변경: re..

1. JavaScript를 공부하면서 느낀점음.. 역시 강으를 보며 코드를 따라하는것과 고민하며 직접 코드를 구현하는것은 큰 차이가 있다.가장 어려웠던것은 로직구현, 자바스크립트 문법도 아니고 '처음에 시작을 어떻게 하는가'였다.'JS를 작성하기에 앞서 먼저 내가 해야할것은?' 항상 이 생각이 먼저 들었고 여기서 막혔었다.그래서 쳇지피티에게 물었다'html, css, app.js가 이러이렇한데 내가 동적으로 index.js 파일을 만들려면 무얼해야해?'답을 주었고  js 작성순서를 아래와 같이 정리했다.  자바스크립트 작성순서1. html에서 dom 가져오기2. 이벤트        변수.addEventListener로 어떤이벤트에 어떤 함수를 붙일지 작성3. 함수에 동작 로직 작성        구체적인 ..

숫자배열 양수를 음수로 혹은 음수를 양수로 변환function invert(arr) { return arr.map(x => x == 0 ? - 0 : 0 - x); }  모두 양수로function invert(arr) { return arr.map(x => Math.abs(x)); }   모두 음수로function invert(arr) { return arr.map(x => -Math.abs(x)); }   참고 나, 쳇지피티

js 코드를 작성할때는 구조화된 단계적 접근이 중요하다. 일반적으로는 기능 정의 → DOM 조작 → 핵심 로직 → 이벤트 처리 → UI 업데이트 순으로 코드가 작성된다.   JavaScript 코드를 짤 때 일반적인 작성 순서:목표 정의 및 요구 사항 분석:먼저 코드가 해결하고자 하는 문제를 명확히 정의합니다.어떤 기능을 만들지, 그 기능을 어떻게 구현할지에 대해 설계하고 계획을 세웁니다.DOM 요소 선택 및 초기 설정:DOM을 조작할 요소들을 선택합니다. 예를 들어, querySelector나 querySelectorAll로 HTML 요소를 선택합니다.필요한 초기 상태나 설정을 해줍니다. 예를 들어, data-* 속성을 읽거나 초기화 작업을 합니다.핵심 로직 구현:주요 로직을 구현합니다. 예를 들어, ..

항상 콜백은 머리를 어지럽게 해서 흐름을 정리 했다.  1 const one = (callback) => {2 const a = 'one 함수 실행 후 생기는 데이터';3 console.log("one 함수");4 5 callback(a);6 };7 8 const two = (a) => {9 console.log(`${a}를 이용하는 two`);10 };11 12 one(two);13 14 //print15 one 함수 16 one 함수 실행 후 생기는 데이터를 이용하는 two 코드 흐름 설명12 one(two)one 이 실행 되면서 two라는 인자가 넘어가게 되고 1 (callback)callback이라는 매개변수에two가 담긴다one 함수에서 실행되는 함..

캐러셀, 슬라이드쇼, 이미지로케이터 모두 이미지가 회전하는 패턴을 의미하는 표현이다.캐러셀은 이미지 > 이미지 캡션 > 인디케이터 영역으로 구분된다. wai-aria의 role="region" => 탐색 가능함. role="region"은 배너,컨턴트인포같은 랜드마크 역할에는 적절하지 않지만 해당 영역을 탐색할때 도움을 받을 수 있는 일반적인 랜드마트 역할이다.region은 문서의 영역을 식별하는데 도움을 준다.aria-roledescription="carousel" => role에 대한 상세한 설명.보조기기가 region을 탐색가능한 영역으로 인식하고 carousel이라고 정확한 정보를 전달받게 됨.carousel이 여러개일 경우 aria-label="생활용품 슬라이드 배너" 처럼 aria-label속..

홈피 상단 로그인바 html 구조와 css배치가 다를 때1. grow로 순서를 잡고 2. flex-grow로 간격을 px나 margin이 아닌 auto나 flex-grow 등 가변적 수치로 조절하는 것이 좋다. [ html ] 구조          ul class="login-bar">      li>a href="/">로그인a>li>      li>a href="/">회원가입a>li>      li>a href="/">고객센터a>li>      li>a href="/">즐겨찾기a>li>      li>a href="/">쇼핑나들이a>li>    ul>   먼저 li > a를 감싸고 있는 login-bar클래스의 ul을 display: flex로 배치했다.   순서를  order 를 사용해 [로그인 > ..

html 기본구조 ul > li > a + ul > li > a + ul  ● aria-expanded="false"스크린리더 사용자에게 하위항목이 접혀있는지 펼쳐졌는지 알려주는 속성펼친 상태 : true접은 상태: false  ● aria-conttols="food"  /  id유니크한 id값을 식별해 컨트롤하는 속성  2depth ul에 id="food"이 2depth ul을 컨트롤하는 버튼(a태그)에 aria-conttols="food"aria-controls="food"가 id="food"를 컨트롤,2depth 의  aria-controls="fruits"  =>  3depth의  id="fruits" 를 컨트롤.    nav class="navigation">    h2 class="sr-onl..

1. HTML/CSS를 공부하면서 느낀점전부터 느꼈지만 html/css는 재밌다. 결과물을 바로바로 눈으로 확인할 수 있다는 점과 내 의지대로 만들어 가는 웹 세상이 참 매력적이다. 이번에 공부하면서 '웹 접근성' 이라는 개념에 대해 알게 되었다. aria-label, tabindex 등을 사용하는데 웹 접근성을 공부할 수록 프론트엔드의 필수적인 공부라고 느꼈다.  누가 모르더라도(알아주면 좋지만) 그를 위한 배려를 하며 살자는 내가 생각하는 삶의 방향과 사용자의 편의성을 생각해 일하는 프론트엔드의 업무와 닮았다. 그래서 프론트가 끌렸나보다. 마크업을 끝내고 css를 입히는데 태그에 따라 flex, position으로 배치하는 어려움이 있어 inline 요소, block 요소를 가진 태그를 생각하며 ht..

기본인스타그램 이미지에 배경색을 gradient로 스타일을 주는 방법이다. 파일을 받아 배경색을 주면 가로, 세로 34px의 이미지가 나온다. 최종적으로 저 노란 네모 테두리를 동그랗게 그려 배경색을 입힐 예정이다. 인스타그램 배경색1 [ css ].footer-rights li a:last-child { border-radius: 34px; border: 1px solid #000; background: linear-gradient(174deg, #285AEB 5.61%, #BC1888 22.32%, #CC2366 36.16%, #DC2743 51.91%, #E6683C 73.38%, #F09433 91.99%); box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2..