본문 바로가기

전체 글351

React(69) TypeScript - 객체 속 객체의 반복문 사용하기 본 포스팅에서는 객체 반복문 사용법을 알아보고, 반복문에서 객체의 키를 매핑할 때 뜨는 아래의 타입스크립트 에러를 살펴볼 것이다. Element implicitly has an 'any' type because expression of type 'string' can't be used to index type React(69) TypeScript - 객체 안 객체 반복문 사용하기 array 는 반복문을 많이 써봤는데, 객체를 돌려보는 건 처음이다. 특히 객체 안의 객체는 처음이다. 막상 한번 훓고 지나갔던 문법들이 동창회한 느낌이었다. object.keys() 로 준비하기 객체를 배열렌더링을 위해 막연히 구글링하던 도중, 아주 유용한 녀석을 찾았다. 이녀석은 key 값만 쏙 빼서 배열화 시키는 objec.. 2022. 5. 15.
Mac - Karabiner 설치하고 맥 한영키 변경하기 주말을 맞아 개발팀 팀원님의 추천으로 Karabiner 라는 앱을 사용해보려고 한다. 이 아이는 키매핑을 위한 앱이다. 한마디로 내가 사용하고 싶은 기능을 원하는 키로 설정할 수 있다. (맥북의 장점인 사용자 최적화와도 맞물려있다👍) 원래는 키보드를 마우스처럼 사용하기 위해 이앱을 선택했지만, 일단 한국 유저들사이에서 가장 유명한 기능인 한영키를 변경해보려고 한다. Mac - Karabiner 설치하고 맥 한영키 변경하기 설치하기 설치 1. 공식 웹사이트에서 일단 다운받자 https://karabiner-elements.pqrs.org/ 설치 2. 다운받은 파일을 실행해준다. 그럼 application 에서 아이콘 확인가능 하다. Karabiner-Element 를 클릭 해보자 설치 3. 그리고 Syst.. 2022. 5. 14.
CSS - 테이블 row 홀수 짝수 번째 태그에만 스타일 적용하기 오늘은 한줄짜리 아주 간단한 css 이지만 잊어버릴까봐 기록으로 남겨놓는다. 1, 3, 5번째 줄만 옅은 회색을 만들고 싶다면 ? 자 만들러가보자. 결과화면 미리보기 아래처럼 홀수 번째 태그에만 색상이 적용되어있다. CSS - 테이블 row 홀수 짝수 번째 태그에만 스타일 적용하기 HTML 홀수 짝수 홀수 짝수 홀수 짝수 CSS div { background-color: white; } div:nth-child(2n+1) { background-color: gray; // 홀수만 적용 } div:nth-child(2n) { background-color: gray; // 짝수만 적용 } 요즘엔 죽어라 하지만 정체되는 느낌을 받고 있다ㅠ 스스로에게 조금이라도 나아가고 있는 거라고 다독이며 포스팅을 써본다 2022. 5. 13.
React(68) react-cookie 쿠키삭제하고 로그아웃 기능구현하기 react-cookie 의 활용에 대한 세번째 포스팅이다. 이를 통해 쿠키에 대한 지식과 여러 기능을 구현해보는 좋은 기회가 되었던 것 같다 :) 로그인 / 로그아웃 기능은 모든 웹에서 기초적인 필수기능이라고 생각한다. 그래서 로그아웃 기능은 어려울 줄 알았는데, 프론트에서의 처리는 예상보다 간단....(?) 했다. 그럼 로그아웃을 기능을 구현하러 가보자 결과화면 미리보기 딱히 미리보기라고 할 것도 없지만 어쨋든 이 버튼을 클릭하면 로그아웃이 될 것이다. React(68) react-cookie 쿠키삭제하고 로그아웃 기능구현하기 쿠키 값을 삭제 후, 로그인 페이지로 되돌아가는 로그아웃 버튼을 구현해보았다. 보통은 url을 통해 로그아웃 페이지만 이동하면 거기서 쿠키를 지워주게 되고 메인페이지로 리다이렉트.. 2022. 5. 8.
React - package.json 과 package-lock.json 이란 Updated 08/02/2022 오늘은 내부 라이브러리를 업데이트할 일이 있어, package.json 에서 버전을 올려주고 commit 하였다. build 하는데 자꾸 에러가 나는 것이었다. 알고보니 package-lock.json 도 같이 commit 해줘야 한다는 것을 알았다. package.json 은 프로젝트를 위해 사용되는 npm 프로그램(모듈)들의 버전 관리을 위한 세팅파일 정도로 알고 있었다. (팀원들과 동일한 환경에서 다같이 작업하려면 버전이 모두 똑같아야 하기 때문이다. a.k.a 의존성 ) 또한 요 파일은 한번 세팅 하면 딱히 건드릴 일이 없었기 때문에, 큰 관심을 두지 않았던 것 같다. 이런 일을 겪고 나니 package.json 이랑 package-lock.json 의 정체가 무.. 2022. 5. 3.
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.
반응형

티스토리툴바