본문 바로가기

분류 전체보기346

JavaScript 알고리즘(7) Multiple Pointers Pattern - averagePair 차근차근 시간날 때마다 알고리즘을 풀고 있다. 이번에는 Multiple Pointers 패턴에서 평균구하기 문제이다. 실컷 고민하다 결국 지난번 패턴과 같은 공식을 적용했더니 별문제 없이 통과를 했기 때문에, 이번에는 다른 사람의 풀이를 가지고 와 분석해보았다. JavaScript 알고리즘(7) Multiple Pointers Pattern - averagePair 매개변수로는 array 와 average가 주어지고, array 를 검사해서 두 수를 더한 평균이 average 와 같으면, 통과! (true) 이고, 같은 average 가 없다면 false 이다. 나의 풀이 while 문으로 계속 조건이 맞을때까지 무한반복하도록 만들었다. if 문으로 (맨앞과 + 맨뒤 숫자 / 2) 로 만든 평균값으로 매.. 2022. 4. 26.
Git(37) 원격브랜치에서 작업하고 pull, push 하기 다른 팀원이 원격 브랜치로 작업한 걸 넘겨받아 그 위에 살포시 내 코드를 얹어보려 한다. 그럼 원격 브랜치를 사용해 작업을 해보도록 하자. Git(37) 원격브랜치에서 작업하고 pull, push 하기 원격브랜치에서 작업한다는 의미는 협업을 의미한다. 다른사람이 작업한 코드가 반영된 + 원격브랜치 내용을 => 다시 내 로컬브랜치로 다운받아오고 다시 원격브랜치로 2022. 4. 19.
React(67) react-cookie 로 저장된 쿠키값 가져오기 웹 사이트 상단에 얇은 띠배너가 있다. 그로인해 레이아웃의 height 가 영향을 받았다. 띠배너를 삭제했을 때 이미 저장된 쿠키값을 가져와서 height 를 동적으로 주려고 한다. 자, 서론은 여기까지 하고 react-cookie 를 사용하여 쿠키값을 불러와보자 React(67) react-cookie 로 저장된 쿠키값 가져오기 Banner.tsx 배너가 들어있는 배너 컴포넌트에서는 쿠키 키가 선언되어 [배너 닫기] 버튼을 누르면 'hiddenBanner' 라는 쿠키값이 저장된다. (쿠키값을 저장하는 과정은 생략하겠다.) const COOKIE_KEY = 'hiddenBanner'; . . . // [배너 닫기] 버튼을 클릭시 위의 쿠키키가 추가됨 ** hoxy 쿠키값 세팅하는 과정이 궁금하시다면? (.. 2022. 4. 17.
Cookie(쿠키) / Cache(캐시) / Session(세션) / Token(토큰) 세션 / 쿠키 / 캐시 / 토큰 기술면접과 정처기의 단골문제 였던 녀석들 😎 하지만 정작 일하다 마주치면 순간 햇갈려서 다시 블로그를 찾아보게 만들었던 녀석들이다. 이번에야 말로 확실하게 정리를 해보자. (아래 글은 제가 이해한 방식대로 정리해본 포스팅입니다. 혹시 잘못된 정보가 있다면 알려주세요!) Cookie(쿠키) / Cache(캐시) / Session(세션) / Token(토큰) (이들의 공통 키워드는 데이터를 "임시저장" 이라는 개념에 사용되는 아이들이다. 개인적으로 유저 정보 등의 임시 데이터들은 매번 서버를 찔러서 가져오기 힘드니 잠시 브라우저나 웹서버 내에서 hold(저장)하는 느낌이었다.) 내 예상이 얼추 맞았다. 이론적으로 알아보니 http 프로토콜은 통신 후, 클라이언트랑 칼같이 연을.. 2022. 4. 13.
JavaScript 알고리즘(6) Multiple Pointers Pattern -areThereDuplicates 돌아온 알고리즘 6번째 시간, 조금씩 조금씩 꾸준히 학습해 나가면서 사고의 방향이 다양하게 확장되는 것을 느끼고 있다. 오늘의 패턴은 Multiple Pointers Pattern 이다. 핵심은 포인터 두개를 양끝단에 지정하고 요소를 하나씩 검사하는 방법으로 Big O notation 에서의 O(N) 만을 이용해 구현해야만 한다. (쉽게 생각하면 배고픈 탈옥수가 배식줄에 서있는데 도망치지 못하게 맨 앞과 맨 뒤에서 경찰들이 한명씩 심문하며 다가오는 느낌이랄까) JavaScript 알고리즘(6) Multiple Pointers Pattern 매개변수로 받은 값들 중에 겹치는 값들이 있는지 확인하는 일종의 validator function 을 만들어보자. 겹치면 true 안겹치면 false 가 리턴된다. f.. 2022. 4. 9.
React(66) react-cookie 로 1회성 모달 만들기 가끔 웹사이트를 들어가면 1회성 이벤트 팝업이 뜰때가 있다. [ 하루동안 보지않기 / 앞으로 보지않기 ] 등의 옵션도 있다. 이런 팝업은 time range 를 쿠키값을 설정해서 손쉽게 만들 수 있다. 그럼 함께 만들어보자 React(66) 쿠키를 사용해 페이지 진입시 모달창 한 번만 뜨게 만들기 react-cookie 라이브러리를 사용해서, [모달창 닫기] 를 클릭하면 hideModal() 함수가 실행되며 10년 후에 expires 되는 쿠키 값을 주어 당분간(10년동안?) 보이지 않게 하자 일단 기본세팅해주자. 임포트도 해주고, 쿠키값을 담을 변수를 만들어주자. import { useCookies } from 'react-cookie'; // 리액트 쿠-키 임포트 해오고 import moment fr.. 2022. 4. 8.
CSS - z-index 적용 안될때 (Why your z-index isn't working) (오랜만의 포스팅) z-index 는 나에게 너무 심플하게 다가왔다. 숫자가 높을수록 화면 상단에 div 등의 엘레멘트를 고정해주는 편리한 녀석😏 하지만 심플할수록 적용이 안되는 일이 빈번했다. 😑 이유를 파악도 못한 채 나는 css 여기저기 z-index 를 랜덤하게 넣었다 빼기를 반복하였고 어느날 정확하게 왜 안되는지 궁금해졌다. z-index 가 적용되지 않는 이슈를 해결해줄 강려크한 내용을 아래 블로그에서 참고하여 내가 이해해본 방식으로 정리해 보았다. Why your z-index isn't working (왜 나의 쥍인덱스는 안먹히는가) 1. Elements in the same stacking context will display in order of appearance, with latte.. 2022. 4. 4.
JavaScript 알고리즘(5) Same Frequency Counter Pattern 요즘에는 자바스크립트로 알고리즘 코드 패턴 공부 중이다. 여러 패턴들을 익히면서 재미를 찾아가는 중이다. 오늘 공부한 패턴은 Frequency Counter Pattern 이다. JavaScript 알고리즘(5) Same Frequency Counter Pattern 두개의 인자가 같은 숫자 혹은 글자 인지를 비교할 때, 하나의 객체에 요소 하나하나를 저장해 중복의 갯수를 표시하고, 나머지와 비교하며 같으면 제거해버린다. 만약에 같은 숫자라면 빈 객체로 돌아갈 것이고(true), 그게 아니라면 뭐라도 하나 남아있을 것이다.(false) function sameFrequency(firstNum, secondNum){ // 1. 숫자를 문자열로 만든다. (그래야 배열화할수있기 때문) const first =.. 2022. 3. 23.
React (65) 게시글 더보기 토글 버튼 만들기 게시글을 길게 작성한 경우 [더보기] 버튼을 누르면 나머지 글들이 보이는 기능을 만들어보자 결과화면 미리보기 아래 내용처럼 글을 일정 글자수 이상 길게 쓰게되면 [더보기] 버튼이 생기면서 게시글의 일부분만 보이게 된다. [더보기] 버튼을 누르면 전체 글이 보이고, [닫기] 버튼으로 다시 생략된 부분이 보여진다. React (65) 게시글 더보기 토글 버튼 만들기 토글기능은 useState를 통해 boolean 값으로 스위치처럼 사용할 것이고, 또한 글자수 제한 조건이 걸려있으므로 useRef 를 통해 글자수를 제한할 것이다. const [isShowMore, setIsShowMore] = useState(false); // 더보기 열고 닫는 스위치 const textLimit = useRef(170); .. 2022. 3. 21.
반응형