본문 바로가기

반응형

분류 전체보기

(644)
프로그래머스 : 보석 쇼핑 const isTrue = (count, cnt) => { for(let i=0;i
프로그래머스 : 다단계 칫솔 판매 (JavaScript) HashMap으로 판매자들을 number 로 변경, 그 후 배열로 부모 관계 데이터 표현 DFS 상위에 판매결과값 전달. const hash = new Map(); var edge; var answer; const DFS = (num, money)=> { const next = edge[num]; const nextMoney = Math.floor(money * 0.1); const currentMoeny = money - nextMoney; answer[num] += currentMoeny; if(next !== null && nextMoney!== 0) DFS(next, nextMoney); } function solution(enroll, referral, seller, amount) { const..
프로그래머스 : 표 편집 (JavaScript) https://programmers.co.kr/learn/courses/30/lessons/81303 코딩테스트 연습 - 표 편집 8 2 ["D 2","C","U 3","C","D 4","C","U 2","Z","Z"] "OOOOXOOO" 8 2 ["D 2","C","U 3","C","D 4","C","U 2","Z","Z","U 1","C"] "OOXOXOOO" programmers.co.kr JavaSciprt로 양방향 연결리스트 구현 후 처리해주면 쉽게 풀 수 있습니다. var list; var stack = []; var answer; const Delete = (k) => { stack.push([k,list[k][0],list[k][1]]); let pre = list[k][0]; let ne..
React 프로젝트에 Redux 적용하기 : Redux란?? 다음 Redux는 React.Hook 타입을 기본으로 적용하였습니다. 리액트에는 데이터를 전달하는 요소들이 다음 표와 같이 있습니다. 구분 설명 프로퍼티 상위 컴포넌트에서 하위 컴포넌트로 전달되는 읽기 전용 데이터입니다. state 컴포넌트의 state를 저장하고 변경할 수 있는 데이터입니다. 컨텍스트 부모 컴포넌트에서 생성하여 모든 자식 컴포너넌트에 전달하는 데이터입니다. 리덕스 서버에서 받은 데이터를 앱 전체에 전달하거나 관리합니다. 컨텍스트와 리덕스가 서로 비슷해 보일수 도 있다. 최상위 컨텍스트에서 서버에서 요청하고 데이터를 핸들링하는 로직을 넣으면 리덕스이기 때문이다. 하지만 리덕스는 라이브러리를 제공하면서 편리한 기능들을 제공한다. 리덕스는 어떻게 동작할까? - 컴포넌트는 dispatch() ..
Node.js : Oauth 로그인 연동 (카카오 로그인, 구글 로그인) Oauth KAKAO 로그인, 구글 로그인 같은 경우는 Oauth 플로우를 따르고 있습니다. 따라서 먼저 Ouath에 대해서 학습합니다. 지금 소개에서는 Oauth를 다 다루지 않고 이전 포스팅으로 대체하겠습니다. Ouath 는 모르겠고 구현만 필요해도 학습하는것을 추천합니다. 해당 플로우를 알아야 구현에 많은 도움이 됩니다. https://redbinalgorithm.tistory.com/443 OAuth, OAuth2 생각해보기 웹 사이트를 이용할 때 "네이버로 로그인" 같이 별도의 회원가입 없이 로그인을 제공하는 서비스를 이용해 본적이 있다. 이때 해당 플랫폼의 아이디가 있다면 외부 서비스에서도 인 redbinalgorithm.tistory.com 간단하게 Oauth는 내가만드는 클라이언트 서버에서..
SVG SVG svg는 벡터(vector) 이미지를 표현하기 위한 포맷으로 w3c에서 만든 벡터 이미지 표준입니다. SVG !== CSS 이지만 CSS를 이용해 SVG를 활용할 수 있습니다. Cicle width, height : svg 전체의 크기를 그려줍니다. (종이의 크기) = cx, cy : 현재 cicle태그인 원의 중심점을 의미합니다. r : 반지름을 의미합니다. (이값이 설정되면 원의 크기가 정해집니다.) stroke : 테두리선의 색상을 의미합니다. stroke-width : 테두리선의 굵기를 의미합니다. fill : 테두리를 제외한 내부요소의 색상을 결정합니다. rect x, y : svg 그림의 좌측, 상단에서 떨어진 정도를의미합니다. (cx, cy 다릅니다.) line x(12), y(12)..
접근성 : ARIA-TAB ARIA-TAB 탭은 스타일을 의미하는 것이 아니라 현재 페이지 내용에 색인을 제공하는 구조(tablist, tab, tabpanel)를 의미합니다. role 속성은 값에 따라 적용할 수 있는 HTML 요소가 제한됩니다.role="tabpanel" 속성은 요소에 사용할수 없습니다. 기본 골격 주요 속성 role ="tab" aria-selected : 현재 탭의 선택 여부를 확인합니다. aria-controls : 현재 tab과 연결된 panel의 id값을 적용합니다. tabindex : 활성 포커스 속성입니다. 자세한 내용 role ="tabpanel" tabindex : 활성 포커스 속성입니다. 활성되면 키보드 tab버튼으로 접근 가능합니다. aria-labelledby : 현재 panel과 연결된 ..
리팩토링2 : javascript 백엔드 진영에서는 좋은 책들이 많이 출간되어 있다. 유명한 클린코드, 디자인패턴 등.. JAVA공부를 하면서 많이 보았지만 최근에 JavaScript 공부를 하면서 리팩토링 관련 책을 찾고 있었다. 시중에 나와있는 리팩토링 책들은 Java기반이고 개발 방법론이기 때문에 상관은 없다지만 그래도 현재 학습하고 있는 JavaScript 기반의 기술서적을 원했고 주변 사람들의 추천으로 작년에 출간된 JavaScript 기반 리팩토링2라는 책을 알게되었다. 최근에 Js라는 언어를 공부하면서 클로저, 프로미스, 프로토타입, this 바인드, 이벤트 루프등 JS만의 다른언어에 없는 특이한 성질들을 학습하였고 이제는 고급 기법을 공부하기 위해서 이책으로 공부해 보려고한다.

반응형