전체 글 25

[프로그래머스] 완주하지 못한 선수

난이도는 1레벨이고 엄청 간단했지만 신기한 정규식 풀이가 있어서 남겨본다var solution=(_,$)=>_.find(_=>!$[_]--,$.map(_=>$[_]=($[_]|0)+1))var solution=(participant,completion)=>participant.find(name=>!completion[name]--,completion.map(name=>completion[name]=(completion[name]|0)+1)) 주자 배열을 {이름:완주자배열에 등장하는 횟수}로 맵핑하고, 그 맵에 참가자 이름 하나씩 넣어서 찾아볼때마다 횟수 떨어뜨려서 횟수 0나오는 놈 찾아뱉는 함수같네요  라는 고인물의 코멘트 어렵다 어려워... function solution(participant, com..

알고리즘 2024.05.26

[React] Hook

Hook의 규칙무조건 최상위 레벨에서만 호출해야 한다.반복문 조건문 중첩된 함수 안에서 호출하면 안됨렌더링될 때마다 매번 같은 순서로 호출되어야 한다.리액트 함수 컴포넌트에서만 hook을 호출해야 한다.eslint-plugin-react-hooks(hook의 규칙을 따르도록 도와주는 플러그인)useEffect 함수란?리액트 컴포넌트가 랜더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook이다 useEffect(이펙트 함수, 의존성 배열) 의존성 배열 - 배열 값이 변경되면 이펙트 함수 실행(생략 가능빈 배열로 넣을 경우 : mount.unmount 한 번씩만 실행됨의존성 배열을 생략한다면 컴포넌트 업데이트 될 때마다 실행useEffect 내의 의존성 배열이 없을 경우 클린업 함수가 실행되지 않는다..

Front-End/React 2024.05.12

[React] 생명주기

아직도 나에겐 많이 어려운 리액트..공부해도 끝이 없는 것 같다..  컴포넌트 생명주기마운트(DOM에 추가) -> 업데이트(새로운 props/state) -> 언마운트(DOM에서 제거)리액트16 +) 에러(에러 발생 시 실행)  라이프 사이클 이벤트 실행 순서constructor()를 포함한 라이프 사이클 실행 순서는 아래와 같다.constructor() : 엘리먼트를 생성하여 기본 state와 prop을 설정할 때 실행된다.componentWillMount() : 컴포넌트를 DOM에 삽입하기 전 실행render()componentDidMount() : DOM에 삽입되어 렌더링이 완료된 후 실행componentWillReceiveProps(nextProps) : 컴포넌트가 props를 받기 직전 실행sh..

Front-End/React 2024.05.11

[React] 포트폴리오 사이트 만들기

https://hshyeon.github.io/ Sohyeon Portfolio hshyeon.github.io 주요 페이지 1. Intro : 초기 화면 페이지 타자기를 치는 듯한 애니메이션을 넣어 지루함을 줄였다. 2. About : 나에 대한 설명을 담았다. 3. Works : Slick를 이용해 작업한 내용을 담았다. 처음에는 유튜브만 보여주었는데, 너무 대충같이 보여서 프로젝트별 썸네일 이미지를 만들어 hover하면 유튜브가 보이도록 만들었다. 그냥 있으면 hover 안해줄까봐 마우스 아이콘도 넣어줌..ㅎㅎ 추후 해당 프로젝트에 대한 설명도 추가해서 보여줄 예정! 4. Header : 특정 앵커포인트로 이동할 때마다 active 되도록 설정, 깃허블 링크를 담았다. 사용 라이브러리 1. Full..

Front-End 2024.04.01

[JavaScript] 데이터구조

1. 연결리스트 선형 구조인 배열과 다르게 노드들의 연결로 이루어짐. 삽입/삭제 용이 2. 트리 사이클 없는 무방향 그래프 3. 스택 LIFO 나중에 들어온게 먼저 나감 4. 큐 FIFO 먼저 들어온게 나감 5. 힙 스택/큐 2가지 모두 효율적으로 처리 가능 - 우선순위 큐를 보통 힙으로 구현 6. 해시 테이블 효율적 탐색을 위한 자료구조 key-value 쌍으로 이루어짐

알고리즘 2024.03.31

[JavaScript] 시간 복잡도 줄이기

1. 검색할 때는 배열 대신 set 2. 반복문 대신 연산으로 할 수 있으면 되도록 연산으로 -> includes/while문 말고 자료구조(스택, 큐) 쓰는 방법도 생각해보기 3. 기본 제공 메소드 너무 믿지 말기 시간복잡도함수명 O(1) at() , entries() , every() , isArray() , keys() , pop() , push() , shift() , values() , with() O(n) concat() , copyWithin() , fill() , filter() , find() , findIndex() , findLast() , findLastIndex() , flat() , flatMap() , forEach() , from() , fromAsync() , group()..

알고리즘 2024.03.27

[JavaScript] 단순 서치 성능 개선하기

코딩테스트 공부 겸 문제 푸는데 내 풀이가 performance 면에서 66점이라고 나왔다..자스로 코테보는건 생소해서 어렵네..function solution(A) { if(A.filter((a)=> a>0).length == 0) return 1; // Implement your solution here let max = Math.max(...A); for(let i =0 ;i다르게 풀어봐도 똑같은 점수가 나와서 뭐가 문젤까 하고 chat gpt한테 물어봄 Set을 활용하여 중복 검사 회피하기: 배열에 대한 includes() 메서드는 순차 검색을 수행하기 때문에 배열의 크기가 크면 성능이 저하될 수 있습니다. 대신에 JavaScript Set 객체를 사용하여 중복을 피하고 h..

알고리즘 2024.03.27

웹 접근성이란?

웹프로그래밍 기초때 배웠었는데 다 잊어버려서 다시 공부해야겠다.. 장애인, 특히 인지 장애나 신체 장애가 있는 사람들이 쉽게 사용할 수 있는 웹사이트와 웹 앱을 구축하는 기술을 웹 접근성이라고 합니다. 많은 장애인이 스크린 리더나 점자 디스플레이와 같은 보조 기술을 사용하여 인터넷을 검색합니다. 따라서 웹 접근성은 이러한 보조 기술을 웹사이트에 통합하는 데 필요한 도구와 자산을 배치하여 모든 사람이 디지털 컨텐츠에 접근하고 상호 작용할 수 있도록 하는 것을 의미합니다. 웹 접근성을 최우선으로 고려한다면 모든 사용자가 장애 여부와 관계없이 웹사이트에 접근할 수 있도록 할 수 있습니다. 웹 접근성을 고려한 웹사이트를 만드는 방법 1. 시맨틱 HTML 태그 사용 2. 대체 텍스트 제공 3. 접근성을 고려한 색..

Front-End 2024.03.25

[React] full-page 라이브러리 TypeScript 지원 안되는 에러

javascript가 아닌 타입스크립트로 포트폴리오 웹을 제작하던 중 라이브러리를 사용하려고 했으나, 에러가 났다. 해당 라이브러리는 타입스크립트를 지원하지 않아 나타나는 에러였는데, 구글링해보니 node_modules 안에 파일을 만들어 declare한다고 하는데 파일이 잘 보이지 않아서 더 간단해보이는 다른 방법을 이용했다. 다른 방법으로는 react-app-env.d.ts에 declare module "react-fullpage";을 추가해주면 됐는데, 나의 경우는 vite를 사용했기 때문에 vite-env.d.ts 파일에 해당 코드를 추가해줬다. 이게 코드 한 줄만 넣은거라 될까 했는데 되네..?

Front-End/React 2024.03.19

프론트엔드 기술면접 복기

꾸준히 업데이트 중입니다. 아직 많이 부족하니까 열심히 하자! 🌟내가 한 프로젝트에 대해 충분히 숙지하기! 1. var, let, const 의 차이 var는 함수 스코프, let/const는 블록 스코프 const는 재할당 불가능 var만 호이스팅 가능 -> 호이스팅의 개념 - 함수 호이스팅, 함수가 스코프의 최상단으로 끌어올려지는것, 선언 전 해당 함수 호출 가능 2. 클로저란? 중첩함수 외부 함수의 변수에 접근할 수 있는 함수를 반환함으로써 동작하며, 외부 함수가 실행을 완료한 후에도 해당 변수에 접근할 수 있습니다 3. http 통신, 메소드 Restful API GET,POST,DELETE,PUT, PATCH 4. SPA single page application 한 번 로드된 페이지에서 필요한..

Front-End 2024.03.12