🔥 HOT

• 

  맥북에서 슬랙(Slack) 알림 안옴 맥북에서 슬랙(Slack) 알림 안옴 문제 상황 사내에서 슬랙 메신저를 사용중인 데 어느날 부턴가 슬랙 알림이 오지 않기 시작했다. 맥북에서 슬랙 알림 미리보기 혹은 소리가 나지 않을 때 아래 보기들을 확인해보자. 해결 방안 Slack 환경설정의 소리 및 모양에서 예시보기를 통해 간단히 테스트 할 수 있다. Mac 시스템 환경설정의 알림 센터 설정을 확인해야 한다. 1) Slack 환경설정 확인 1-1) 좌측 하단 프로필 클릭 > 환경설정 1-2) 알림허용 이 되어있는지 확인 1-3) 소리 및 모양 > 예시보기 1-3) 알림이 오는지 확인 여기서 되지 않는다면, 2) Mac 환경설정 확인 2-1) 시스템 환경 설정 > 알림 > Slack > 알림이 켜져있는지 확인 2-2) 시스템 환경 설정 > 알림 > 알림센터 설정 확인 디스플레이를 미러링.. 댓글 2 2024.03.15

• 

  [github 에러 ]The requested URL returned error: 403 (fatal: unable to access) [github 에러 ]The requested URL returned error: 403 (fatal: unable to access) git은 레포 끌어올 때마다 오류가 꼭 생겨야 하나보다! 오늘은 또 새로운 오류! The requested URL returned error: 403 당시 상황 github 공동 repository 의 내 branch 를 fork 해왔고 그 branch를 local 로 clone한 후 local 에 step1 branch를 만들고 작업함 git add . git commit -m " ~~~~" git push origin step1 //오류 발생 ( 첫 push) git push origin step1 하는데 error 발생 !! remote: Permission to codesquad-members-2021/fe-w6-free-style.git denied to ink-0 fatal: unable to.. 댓글 0 2021.03.16

• 

  VS Code에서 ChatGPT 사용하기 (CodeGPT) VS Code에서 ChatGPT 사용하기 (CodeGPT) VS code에서 chat GPT 사용하는 법 설정 방법 1. chatGPT 가입하기 https://platform.openai.com/overview OpenAI API An API for accessing new AI models developed by OpenAI platform.openai.com 2. API keys 생성 3. VS Code 익스텐션에서 Code GPT 설치 4. Code GPT에 API Keys 설정 4-1) cmd + shift + p 4-2) 세팅 입력 CodeGPT: Set API KEY 4-3) 발급받은 API key 입력 🥳 사용할 준비 완료! 주의할 점 참고로 특정 사용량 까지만 무료이고 그 이후에는 과금이 되는데 아래 페이지에서 확인할 수 있다. https://pl.. 댓글 0 2023.03.10

• 

  input 관련 이벤트 파헤치기 - input onChange onKeyUp onKeydown input 관련 이벤트 파헤치기 - input onChange onKeyUp onKeydown 회사에서 value에 따라 style이 변경해야 하는 기능을 가진 input을 만들어야 했는데, input event를 활용해서 해당 문제를 해결할 수 있었는데요. 정확히 왜 해결되었는지 원론적으로 접근해보고 싶어서 공부한 내용을 적었습니다. input event에 대한 내용은 김맥스 기술 블로그- input 요소 관련 키보드 이벤트 총정리 를 활용했는데 정말 정리가 너무 잘되어있습니다. 김맥스님 감사해요❤️ 사용 기술 스택 React 에 antd textarea사용 code sand box 예시에서는 일반 input과 textarea에 이벤트를 걸어보았습니다. input의 이벤트 onBlur 요소에 focus가 헤재되었을 때 발생하는 이벤트 onFocus 요소에 focus시 발생하는 이벤트 onKeyP.. 댓글 2 2022.06.01

• 

  WebStorm 단축키 모음 - 유용한 Mac 단축기모음 WebStorm 단축키 모음 - 유용한 Mac 단축기모음 WebStorm 단축키 모음 요즘 VsCode를 사용하다가 Webstorm으로 이동하게 되면서 유용한 단축키를 정리했습니다. 찾기/편집 ⇧ ⇧ 전체검색: 프로젝트 전체에서 특정 텍스트를 검색합니다. ⌘ ⇧ o 전체 파일 찾기: 프로젝트 내에서 파일을 빠르게 찾습니다. ⌘ ⇧ f 전체 단어 찾기: 프로젝트 전체에서 특정 단어를 찾습니다. ⌃ g 단어 찾기: 커서가 위치한 단어를 찾습니다. ⌃ ⌘ g 단어 전체 찾기: 프로젝트 전체에서 특정 단어를 찾습니다. ⌘ e 최근 파일 보기: 최근에 열었던 파일 목록을 표시합니다. ⌘ + - 코드 펼치기/접기: 코드 블록을 펼치거나 접습니다. ⌘ d 한줄복사: 현재 행을 복사합니다. ⌘ f 찾기: 현재 파일에서 특정 텍스트를 찾습니다. ⌘ r 바꾸기: 현재 파일에서 .. 댓글 2 2023.07.15

🌱Latest

• 

  [IntelliJ /Pycharm] 파이참 파일 저장시 python 자동 정렬, 파이선 Formatter 설정하기 [IntelliJ /Pycharm] 파이참 파일 저장시 python 자동 정렬, 파이선 Formatter 설정하기 문제상황 파이참에서 Python3 로 코딩 시auto save reformat 즉, 저장 시 자동정렬이 되지 않음  파이참 프로가 아닌 PycharmCE 사용 중 -> EsLint, Prettier 플러그인 설치가 되지 않음 해결 방법1. black 설치 pip install black2. plugin에서 File Watchers 설치환경설정 > 플러그인 > "File Watchers" 검색 > InstallSetting > Plugin > "File Watchers" 검색 > Install3. File Watcher에 커스텀 룰 추가Settings > Tools > File Watchers 아래와 같이 설정 File Type: PythonScope: 현재 프로젝트Program: black (터미널에서 .. 댓글 0 2024.12.11

• 

  맥북에서 슬랙(Slack) 알림 안옴 맥북에서 슬랙(Slack) 알림 안옴 문제 상황 사내에서 슬랙 메신저를 사용중인 데 어느날 부턴가 슬랙 알림이 오지 않기 시작했다. 맥북에서 슬랙 알림 미리보기 혹은 소리가 나지 않을 때 아래 보기들을 확인해보자. 해결 방안 Slack 환경설정의 소리 및 모양에서 예시보기를 통해 간단히 테스트 할 수 있다. Mac 시스템 환경설정의 알림 센터 설정을 확인해야 한다. 1) Slack 환경설정 확인 1-1) 좌측 하단 프로필 클릭 > 환경설정 1-2) 알림허용 이 되어있는지 확인 1-3) 소리 및 모양 > 예시보기 1-3) 알림이 오는지 확인 여기서 되지 않는다면, 2) Mac 환경설정 확인 2-1) 시스템 환경 설정 > 알림 > Slack > 알림이 켜져있는지 확인 2-2) 시스템 환경 설정 > 알림 > 알림센터 설정 확인 디스플레이를 미러링.. 댓글 2 2024.03.15

• 

  WebStorm 초보자를 위한 유용한 설정과 단축키 안내 WebStorm 초보자를 위한 유용한 설정과 단축키 안내 WebStorm 첫 사용 시 유용한 설정 방법 안내 WebStorm 시작 시 최근 프로젝트가 아닌 메인 메뉴로 가게 설정하기 WebStorm을 실행할 때 최근에 작업한 프로젝트가 아닌 메인 메뉴로 바로 이동하는 설정 방법입니다. 설정 경로: System Settings > Reopen projects on startup VsCode는 MAC 독바에서 오른쪽 마우스로 New Open이 가능했으나 WebStorm은 달라 설정했습니다. 타인의 Commit 라인별로 보는 단축키 설정하기 다른 사람의 Commit 내역을 라인별로 보는 단축키를 설정하는 방법입니다. 설정 경로: Keymap > Annotate 검색 > 원하는 단축키로 설정 상호 취향에 맞게 선택하면 되는데, 저는 "⌘ ⌥ ⇧ \" 로 했습니다. 활.. 댓글 0 2023.07.27

• 

  WebStorm 폰트 변경 및 테마 설정 방법 WebStorm 폰트 변경 및 테마 설정 방법 WebStorm 테마 설정 방법 Preference(⌘+,) > Appearance & Behavior > Appearance > Theme Preference(⌘+,)을 클릭하여 설정 창을 엽니다. Appearance & Behavior > Appearance > Theme으로 이동합니다. 만약 Material Theme UI를 설치했다면, 해당 UI 테마 설정은 다음과 같습니다. WebStorm 폰트 변경 방법 디렉토리와 터미널 폰트 설정 방법 Preference(⌘+,) > Editor > Font 전체 파일과 터미널에 적용할 폰트 설정을 위해 Preference(⌘+,)을 클릭합니다. Editor > Font으로 이동합니다. (D2coding과 같이 따로 설치한 폰트도 사용할 수 있습니다.) 에디.. 댓글 0 2023.07.23

• 

  WebStorm 단축키 모음 - 유용한 Mac 단축기모음 WebStorm 단축키 모음 - 유용한 Mac 단축기모음 WebStorm 단축키 모음 요즘 VsCode를 사용하다가 Webstorm으로 이동하게 되면서 유용한 단축키를 정리했습니다. 찾기/편집 ⇧ ⇧ 전체검색: 프로젝트 전체에서 특정 텍스트를 검색합니다. ⌘ ⇧ o 전체 파일 찾기: 프로젝트 내에서 파일을 빠르게 찾습니다. ⌘ ⇧ f 전체 단어 찾기: 프로젝트 전체에서 특정 단어를 찾습니다. ⌃ g 단어 찾기: 커서가 위치한 단어를 찾습니다. ⌃ ⌘ g 단어 전체 찾기: 프로젝트 전체에서 특정 단어를 찾습니다. ⌘ e 최근 파일 보기: 최근에 열었던 파일 목록을 표시합니다. ⌘ + - 코드 펼치기/접기: 코드 블록을 펼치거나 접습니다. ⌘ d 한줄복사: 현재 행을 복사합니다. ⌘ f 찾기: 현재 파일에서 특정 텍스트를 찾습니다. ⌘ r 바꾸기: 현재 파일에서 .. 댓글 2 2023.07.15

• 

  React developer tools에서 Components와 Profiler가 노출되지 않는 문제 해결 방법 React developer tools에서 Components와 Profiler가 노출되지 않는 문제 해결 방법 프론트엔드 개발자로서 잘 사용하고 있는 React developers tools에서 Components와 Profiler이 노출되지 않는 문제 상황과 해결방법을 소개합니다. 크롬 개발자 도구 설정 변경을 통해 문제를 해결할 수 있다. 문제 상황 React local개발 시 Components와 Profiler가 노출되지 않음 React developer tools don't show Components , Profiler 해결 방안 1 1) Chrome > 설정 > 기본 설정으로 복원 크롬 devtools 세팅에서 기본 세팅으로 변경한다. Chrome > Settings > Preferences > Sync > Restore defaults and reload 2) 강력 새로고침 크롬 브라우저에서 강력한.. 댓글 0 2023.07.03

• 

  VS Code에서 ChatGPT 사용하기 (CodeGPT) VS Code에서 ChatGPT 사용하기 (CodeGPT) VS code에서 chat GPT 사용하는 법 설정 방법 1. chatGPT 가입하기 https://platform.openai.com/overview OpenAI API An API for accessing new AI models developed by OpenAI platform.openai.com 2. API keys 생성 3. VS Code 익스텐션에서 Code GPT 설치 4. Code GPT에 API Keys 설정 4-1) cmd + shift + p 4-2) 세팅 입력 CodeGPT: Set API KEY 4-3) 발급받은 API key 입력 🥳 사용할 준비 완료! 주의할 점 참고로 특정 사용량 까지만 무료이고 그 이후에는 과금이 되는데 아래 페이지에서 확인할 수 있다. https://pl.. 댓글 0 2023.03.10

• 

  [webpack 에러] TypeError: this.getOptions is not a function 에러 [webpack 에러] TypeError: this.getOptions is not a function 에러 Error Message ERROR in ./src/main.css Module build failed (from ./node_modules/style-loader/dist/cjs.js): TypeError: this.getOptions is not a function at Object.loader (/Users/ingychoi/Study/lecture-frontend-dev-env/node_modules/style-loader/dist/index.js:19:24) @ ./src/app.js 2:0-20 📌 문제 상황 webpack에서 loader 설정 시 TypeError: this.getOptions 에러 발생 아래는 webpack config 파일이고 css-loader , style-loader,.. 댓글 0 2023.02.13

• 

  [GitHub] PR Draft - PR 작업중표시 및 리뷰 일시정지 [GitHub] PR Draft - PR 작업중표시 및 리뷰 일시정지 PR Draft 상태는 간단하게는 리뷰 검토가 필요하다는 상태를 말한다. 발견 계기 PR 업무 중에 Draft 상태를 발견했다. 보통 Open 상태인 경우만 봐서 무엇인지 알아보았는데, 결론 PR이 Draft상태이면, 아직 작업중이라는 것이고, 검토할 준비가 될 때까지 리뷰를 달거나 머지할 수 없다. Pull Request 상태를 바꿀 수 있었다는 사실! 항상 이용하던 기능만 이용해서 몰랐었는데, 새롭게 알게 된 사실이다. GitHub Docs에 의하면 You can mark a draft pull request as ready for review or convert a pull request to a draft. PR을 리뷰어에세 검토할 준비가 된것으로 표시하거나, 그 반대로 할 수 있다. 설정 방법 .. 댓글 0 2022.11.14

🗒Note

• 

  티스토리 다크모드 적용하기 - by 다크모드 버튼 티스토리 다크모드 적용하기 - by 다크모드 버튼 드디어 미뤄왔던 나의 Tami.zip 블로그 다크모드 버튼을 만들었다. 미뤄왔던 이유는 크게 2가지 1. 사용자 테마에 따른 다크모드 지원 자료만 많음 -> 내가 원하는건 버튼을 통한 다크모드! 2. 티스토리는 배경을 바꾼 후에 필요한 CSS를 일일이 잡아서 바꿔줘야 함 하지만, 아늑한 밤에 킨 나의 블로그는 항상 아이어택을 선사했기 때문에 바꾸기로 결심했고 여러 시행착오를 겪었던 만큼 상세하게 어디에 어떤 코드를 넣으면 되는지 까지 설명하려 한다. 다크모드 버튼을 생성하는 과정에는 🔗다크 모드 라이트 모드 토글 스위치 기능 블로그를 참고했다. 다크모드를 설정하는 걸 설명하는 다양한 블로그들이 있었지만, 해당 블로그만큼 정확하게 내가 원하는 것이 없었느데, 다시 한번 해당 필자에게 감사의 말씀 드립니다... 댓글 15 2022.02.03

• 

  프론트 스타터 2021회고 - 어쨋든 frontEND! 프론트 스타터 2021회고 - 어쨋든 frontEND! 시작하자면 벌써 2022년 1월이 되었고, 사람 일은 정말 모르는 거다! 일단 현재는 프론트엔드 BE를 좀 할 수도 있는 직무로 취업했고, 전부터 계속 쓰고 싶었던 회고를 이제서야 쓴다. 내가 어떻게 취업하게 되었는지 모르겠지만 개발을 선택했던 과정(1) 그리고 지금 일하면서 느끼는 점과 앞으로의 목표들(2)을 써보려고 한다. 개발자로 돌아돌아도라간길 🎒이것저것 해보기 개발공부는 올해 21년 1월 시작되었다.(?) 나는 전자공학을 전공했지만 전자를 좋아하진 않았다. 근데 코딩은 뭔가 잘하는 사람만 해야할 것 같았다. 두 가지 사이에서 갈팡질팡 하는 사이에 4년이 지났고 대외활동만 열심히 하고 적당히 좋은 성적과 함께 졸업의 위기가 찾아왔다. 나...난 몰라... 그리고 그냥 취업 준비 시작! 목표는 모름.. 댓글 2 2022.01.10

• 

  TIL #1 빠르고 간편하게 React 로 InfiniteScroll (무한 스크롤) 구현하기 TIL #1 빠르고 간편하게 React 로 InfiniteScroll (무한 스크롤) 구현하기 React로 InfiniteScroll을 하는 방법 2가지 onScroll 이벤트 Intersection Observer API onScroll과 그 한계 사용자의 scroll event를 계속 보며 페이지가 끝에 오는지를 판단하는 방법을 구현이다. 하지만 드르륵 스크롤 할. 때마다 이벤트가 발생하는 것이다. 크롬에다 이것만 쳐봐도 알 수 있다. window.addEventListener('scroll',()=>console.log('🌀')) 그렇다면 남은 것은 🥳 Intersection Observer API 타겟과 viewPort 사이의 intersection 변화를 비동기적으로 관찰하는 방법 LazyLoading Infinite-scroll 사용자 결과 여부에 따른 애니메이션 등에 사용된다. 여기서.. 댓글 4 2021.07.28

React

• 

  [React] ReactHooks & Context API 를 이용한 state 관리 ( VS Redux) [React] ReactHooks & Context API 를 이용한 state 관리 ( VS Redux) 📌 React의 상태관리는 어떻게 진행되고 있었나? React 에서 서로 다른 component를 연결하는 방법은 props drilling 이다 . top레벨의 components에서 bottom레벨의 components 에겟 속성을 전달해야 한다. < 실제 TodoList 프로젝트 당시 props drilling 상황 Atomic design 패턴을 고려하여 만든 프로젝트를 진행할 당시 * TodoList Column을 누르면 popup이 나오고 * 그 안 (의안의안)의 Buton을 누르면 popup이 닫히는 동작을 작동시킬때 popup state를 끌고끌고 들어가야 했다... 이걸 해결하기 위해서는⭐️ global state가 모든 components에게 존재해야 한다. 그 깊이가 깊든 관계가 복잡.. 댓글 0 2021.05.04

• 

  [React] OAuth Github 로그인 구현하기 [React] OAuth Github 로그인 구현하기 전부터 너무나도 해보고 싶었던 깃허브 OAuth 로그인을 성공적으로 구현했다. 구현단계와 방법을 설명해볼 예정! 📌 프로젝트 구성 * React 함수형 컴포넌트 (jsx) 방식으로 구현한 프로젝트입니다! * BE와 함께한 프로젝트로 BE 단에서는 access-token 발급과 정보 요청을 맡아 처리했습니다. * FE단에서는 code요청한후에 Github 계정 정보를 바로 요청했습니다. 깃허브 로그인 구현을 검색해보면 구현하는 여러가지 방법이 있지만 크게 두가지로 나뉘는 느낌을 받았고, 2번 방법으로 처리했다 . 1) FE단에서 code 요청한 후 POST 로 jwt 요청 : 참고 (https://devhyun.com/blog/post/15) 2) ✅ FE단에서 code 요청한 후 GET으로 jwt 요청 .. 댓글 2 2021.06.05

• 

  [React] json-server에서 axios 로 데이터 불러오기 [React] json-server에서 axios 로 데이터 불러오기 json serve 라이브러리를 이용해서 CRUD를 구현해 보자 json-server 설치 npm install -g json-server db.json 파일 생성 { "todos": [ { "id": 1, "content": "HTML", "completed": true }, { "id": 2, "content": "CSS", "completed": false }, { "id": 3, "content": "Javascript", "completed": true } ], "users": [ { "id": 1, "name": "Lee", "role": "developer" }, { "id": 2, "name": "Kim", "role": "designer" } ] } server.js생성 // server.. 댓글 0 2021.04.12

• 

  [React] CRA로 프로젝트 초기 세팅 [React] CRA로 프로젝트 초기 세팅 create react app CRA 설치 //npx create-react-app {프로젝트파일명} npx create-react-app movie_app https://rrecoder.tistory.com/96?category=955706 React 리액트란, 리액트 작업환경 설정 사람들이 좋아하고, 인기있고 , 간편한 프레임워크! 자바스크립트 기반이기때문에 배우는데도 부담이 없다. 리액트를 익혀보고 직접 사용해보기 위해 노마드코더의 ReactJS 로 영화 웹서비스 만 rrecoder.tistory.com 이렇게 설치를 하면 사용하지 안아도 될 파일과 디렉토리가 넘친다. 나의 새로운 프로젝트를 위해 지워도 될 파일들을 싸그리 지워보자!! 1️⃣ 삭제 1️⃣- 1 ) 파일 삭제 초기 상황 이렇게 파일들.. 댓글 0 2021.04.11

• 

  [React ] React Router를 이용하여 component간에 props 넘겨주기 ( (Link & props) [React ] React Router를 이용하여 component간에 props 넘겨주기 ( (Link & props) react 를 이용하여 navigation bar를 간단하게 만들어보자 navigation bar를 만들어보면서 reactd에서는 페이지 간에 data를 어떻게 연결하고 공유하는지 공부해 볼 것이다. 1) react-router-dom 설치 * npm 으로 설치 npm install react-router-dom * yarn 으로 설치 yarn add react-router-dom 2) Routes 폴더 생성 routes 폴더에는 내가 만들고 싶은(이동할) 페이지 개수만큼 만든다 routes에 3개의 페이지 생성 - Home.js : 메인 영화설명 (영화를 보여주는 페이지 ) - About.js : 웹페이지 소개글 (자기소개 넣을 예정) - Datail.js : 영화 상세 설명 (영화 클릭시 상세설명 페.. 댓글 0 2021.03.18

• 

  [React] 리액트의 Hooks 예제로 정복하기 [React] 리액트의 Hooks 예제로 정복하기 React Hooks functional component에서 state를 가질 수 있게 만듦 class component, componentdidMount, render() 할 필요가 없음 -> 하나의 funciton 이 됨 이것은 함수평 프로그래밍 이라는 뜻이기도 함! recompose + react = 리액트 훅! 📌Class component를 이용한 react (기존 방식) 버튼 클릭시 count 가 하나씩 증가하는 기능 import React from "react"; import './App.css'; class App extends React.Component{ state = { count: 0 }; modify = (n) => { const { count } = this.state; // .. 댓글 0 2021.03.18

• 

  ReactHooks 정복하기 1탄 ( useState, useClick ) ReactHooks 정복하기 1탄 ( useState, useClick ) 기본적인 구조 useHooks라는 Hook이 있을 경우 const useHooks = (initial, ~) =>{ const [ curr, setCurr ] = useState(initial, ~); return { currItem : curr, changeItem: setCurr } } const App = () =>{ const {currItem , changeItem} = useHooks(초기값); {currItem} {changeItem(0)} } 🔥 useState 🔥 useInput (초기값 , 유효검사function) input 을 넣고, 원하는 입력 조건에 해당하는 값만 받기 //useInput Hooks const useInput = (initialValue, validator) => .. 댓글 0 2021.04.06

🍪 IssueCracker 굽는중

• 

  [SidePJ] Issue-Cracker 4부 - v0.1.0🍪 데굴데굴 굴러가는 이슈크래커 [SidePJ] Issue-Cracker 4부 - v0.1.0🍪 데굴데굴 굴러가는 이슈크래커 📌 Component 공유와 상태관리 FrontState 와 BackEnd State를 어떻게 관리해야 할까? 처음에는 담당자와 레이블마일스톤 을 어떻게 관리해야 할까 고민했다. 1) 눌러서 추가할 때마다 서버에 전송 2) FrontState에서 관리하고 이슈 작성을 누를 때 전송 GitHub에서는 어떻게 관리하는지 확인해보았느데 누르때마다 서버로 전송이 되는건가? 했지만 로치의 말로는 아폴로 서버같이 동작하는것이지 실제로 그럴리가 없을 것이라 했다. ㅎㅎ 결과적으로 2번을 선택 이슈 생성하기 전까지 저 세가지 정보는 필요 없기 때문에 FrontState로 관리하다 이슈 작성 시 전송한는것이 경제적이라 생각했다. 처음 SideBar를 만들 때 IssueAdd 에서 동작하게만 만들다 보니 상태값을 다 가지.. 댓글 0 2021.07.10

• 

  [SidePJ] 깃허브 Issue Cracker 3부 - Recoil 상태관리의 시작 [SidePJ] 깃허브 Issue Cracker 3부 - Recoil 상태관리의 시작 드디어 마지막 주가 왔다. 이번 미션의 마지막 주이자 , 코드스쿼드의 마지막 주다.. 6개월동안 열심히 달렸는데 끝이 보이는 것 같아 너무 아쉽다. (물론 나의 실력은 아직 갈길이 멀다) 그래도 화이팅하며 이번주 미션 최선을 다해서 라쿤과 함께 끝내볼 것~!!!!!! 아Zㅏ~~~~🔥 📌TypeScript와 Recoil을 활용한 모달 외부영역 클릭시 닫힘 처리 사실 airbnb에서 했어서 간단히 될 거라 생각했는데 생각보다 타입스크립트의 길은 험난했다. ❖ 원하는 상황 +아이콘 click : SideBarDrop 열림 모달 외 영역 click : SideBarDrop 닫힘 ❖ 오류 상황 Type '{ ref: RefObject; }' is not assignable to type 'IntrinsicAttr.. 댓글 0 2021.07.09

• 

  [SidePJ] 깃허브 Issue Cracker 2부 - Material UI 와 style-components의 대결 + 오류 해결 [SidePJ] 깃허브 Issue Cracker 2부 - Material UI 와 style-components의 대결 + 오류 해결 행복한 2주차 시작 📌 uuid 사용하기 React에 유일한 key 값을 제공하는 패키지 React에서의 유일한 key prop 값은 리액트가 리스트 아이템을 구분할 수 있게 한다. 그 전에는 배열의 key값에 인덱스를 넣었는데, 배열의 인덱스는 0,1,2,3.. 이므로 고유한 값이 아니므로 React가 렌더링을 잘못할 수 있기 때문에 고유한 값을 넣어야 한다. -> 배열에 data 추가 수정 시 전체 배열을 다 수정해야 하기 때문에 위 코드에서 uuid 패키지를 사용해 key값으로 사용할 유일한 UUID를 만들수 있고 이처럼 유일한 ID는 충돌할 염려가 거의 없습니다. uuid 같은 패키지를 사용함으로써 ID는 유일하고 예측가능해지고, 우리는 각 아이템에 대해 새로운 ID를 생성할 방법을 고민할 필요도.. 댓글 0 2021.06.29

• 

  [SidePJ] 깃허브 Issue Cracker 1부 - 프로젝트 시작 [SidePJ] 깃허브 Issue Cracker 1부 - 프로젝트 시작 마지막 프로젝트를 시작했다! 벌써부터 끝이 너무 아쉽지만 그래도 이번 프로젝트도 더더더 열심히 해보고자 한다. Issue Tracker Issue Cracker 🍪 시작! 이번 프로젝트는 Raccon , pyro, 노을, Neo와 함께하는 5인 대가족!!!!!! ( 다같이 밥도 못먹음!@ ) 우리의 목표는 이것! 1) 타입스크립트와 친해지기 2) Recoil 이랑도 친해지기 3) 에러처리와 최적화까지 4) CSS 강박에서 벗어나자!!!! ( 과연 될까 ) 단순히 깃허브 이슈 크래커 완성을 넘어서 리코일 라이브러리를 찐하게 이해하고 직접 구현해보는 시간을 가질 예정이다. 그러기 위해서는 첫주부터 달려야 하는데 면접이 하나 있어서 마음이 급하긴 하지만 열심히 해봐야지! 게시글을 쓰던 중에 타입에러인 경우가 .. 댓글 0 2021.06.29

🏠 나만의 Airbnb

• 

  [SidePJ] airdnd 3부 - 회고와 마무리 [SidePJ] airdnd 3부 - 회고와 마무리 주말동안 코드리뷰 받은걸 고치며 월요일 한주 시작 ! 📌 연속클릭 방지하기 현재 airdnd의 달력 화살표를 누르면 다른 달로 넘어가는데, 여기서 사용자가 연속으로 클릭을 하게 되면 이벤트가 꼬일 수 있어 preventClick이라는 함수로 방지를 해놓았다. 변경 전 const preventClick = () => { setTimeout(() => { setDisabled(false); }, 200); const handleClick = () => { if (disabled) return; setDisabled(true); preventClick(); 클릭을 누르면 disabled를 true로 바꿔 preventClick이 다 동작하는 2초동안 클릭이 불가했다가 2초 후에는 disabled = false.. 댓글 2 2021.06.06

• 

  [Side PJ] airdnd 2부 - 상태에 따른 CSS 변화 (상태지옥 State) [Side PJ] airdnd 2부 - 상태에 따른 CSS 변화 (상태지옥 State) 이번에는 왜 안찾아오나 싶었던 상태관리의 혼란이 다시금 찾아왔다.😵 📌 날짜 data state를 이용한 CSS 변화 ❖ 상황 체크인과 체크아웃 된날짜와 그 사이를 CSS 로 표시하기 캘린더를 만들고 클릭을 누르면 해당 dataset을 받아 ContextAPI로 관리하는 CheckIn, CheckOut 에 반영시켰다. click 이벤트가 발생했을 때 그 가능성을 조건문으로 비교하여 CheckIn, CheckOut 에 반영하는 방식으로 data흐름을 짰는데 여기서 문제는 클릭된 날짜의 상태관리다. CheckIn, CheckOut data는 전역관리가 되고 있는데 clickedData는 click이벤트 (handleTdBtnClick )안에서만 관리되고 있기 때문에 rendering시에 해당 값을 가져올 수.. 댓글 0 2021.06.05

• 

  [SidePJ] airdnd 1부 - 프로젝트 시작 ! [SidePJ] airdnd 1부 - 프로젝트 시작 ! 이번주 프로젝트는 3주간 😎Jenny 🧐Dong 과 함께하게 되었다 첫날은 역시 BE,FE 와 컨벤션과 git repository관리 등을 정하고 Jenny와는 Component구조를 짰다. ⬇️ Component구조 설계도 https://app.diagrams.net/#G13ElfK5XcWA_TtAZ3Bh6-GEVlhodBu7gh Flowchart Maker & Online Diagram Software Flowchart Maker and Online Diagram Software diagrams.net (formerly draw.io) is free online diagram software. You can use it as a flowchart maker, network diagram softwar.. 댓글 0 2021.05.28

• 

  [SidePJ] React 모달 영역 밖 클릭시 닫기 [SidePJ] React 모달 영역 밖 클릭시 닫기 📌 전체 구조 PayModalWrapper 가 RoomPayModal을 감싸고 있는 상태 동작 : 숙소를 누르면 모달창이 뜨고 모달창 외의 영역 클릭 시 모달창이 닫힌다. 📌 코드 handlePayModalOff 함수로 모달 외 영역 클릭 시 닫히는 클릭이벤트를 제어할 예정 return 부분 return ( {isPayModalClicked && ( handlePayModalOff(e)} > )} ); handlePayModalOff const ReservationMain = () => { const [isPayModalClicked, setIsPayModalClicked] = useState(false); const handlePayModalOff = (e) => { const clicked = e.t.. 댓글 0 2021.06.03

• 

  React로 Slider 구현 & React에서 Canvas로 곡선 그래프 그리기 (+globalCompositeOperation ) React로 Slider 구현 & React에서 Canvas로 곡선 그래프 그리기 (+globalCompositeOperation ) Jenny와 airbnb사이트 프로젝트를 진행하며 요금부분의 그래프를 구현한 내용입니다. 무엇보다도 canvas와 slider구현을 위한 엄청난 수학적 계산을 해주신 Jenny에게 이글을 바칩니다.. 🌹 폴더 구조는 이렇게 되어있는데 아래 Slider 과 ChartCanvas로 나눠서 구성했다. 📈 Slider Slider에는 총 2개의 상태가 있다. const { priceData, priceDispatch } = useContext(SearchContext); const [avg, setAvg] = useState((min + max) / 2); const [min, max] = [0, 1000000]; priceData : slider 가 가리키는 min,max 값 / useContext로 관리 a.. 댓글 0 2021.06.02

• 

  [side PJ ] ⚾️야구게임 - 문제상황과 해결과정 [side PJ ] ⚾️야구게임 - 문제상황과 해결과정 리액트에서의 상태관리는 중요하다는 것을 느끼게 하는 프로젝트였는데, 이번에는 상태관리의 문제로 착각한 경우로 짝궁인 오톰과 함께 3시간을 삽질했다.&0& 📌문제발생 1 팀을 선택했을 때 선택한 팀의 정보를 setState하여 하위 다른 component에서 사용하려 했으나 데이터가 렌더링 되지 않음 StartScreen안의 handleClickTeam const handleClickTeam = async () => { let teamId; if (type === 'home') { teamId = game.homeTeamId; } else { teamId = game.awayTeamId; } try { const { data } = await axios.get( `http://13.209.109.186/b.. 댓글 0 2021.05.20

• 

  [Side PJ] 야구게임 - 삽질과 배운점🛠 [Side PJ] 야구게임 - 삽질과 배운점🛠 복잡한 상태관리를 통해 간단한 야구게임을 만들어 보는 미니 프로젝트를 진행했다. 백엔드에서 API를 제공해 주었고, 간단한 로직같은 경우는 FE단에서 관리하기로 결정했다. 프로젝트를 진행하며 겪었던 크고 작은 error들과 배웠던 점을 정리해보겠습니다-! VS Code 사소한 문법 맞추기 [ Setting -> quote 검색 -> 수정 ] 오톰과 함께 프로그래밍 하면서 발견한 사소한 번거로움은 바로 VS Code 저장 시 자동 적용되는 문법 설정이 다르다는 것 JS에서 문자열이 auto로 되어있고 Prettier 상 JSX 도 체크가 안되있었지만 single, check 로 맞추었다. merge할때 이런 사소한 부분이 변경사항으로 기록되었기 때문에 고쳐주었는데 협업할 때 이런 사소한 문제도 발생하는구.. 댓글 0 2021.05.20