🌱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 (터미널에서 ..
2024.12.11
-
맥북에서 슬랙(Slack) 알림 안옴
맥북에서 슬랙(Slack) 알림 안옴
문제 상황 사내에서 슬랙 메신저를 사용중인 데 어느날 부턴가 슬랙 알림이 오지 않기 시작했다. 맥북에서 슬랙 알림 미리보기 혹은 소리가 나지 않을 때 아래 보기들을 확인해보자. 해결 방안 Slack 환경설정의 소리 및 모양에서 예시보기를 통해 간단히 테스트 할 수 있다. Mac 시스템 환경설정의 알림 센터 설정을 확인해야 한다. 1) Slack 환경설정 확인 1-1) 좌측 하단 프로필 클릭 > 환경설정 1-2) 알림허용 이 되어있는지 확인 1-3) 소리 및 모양 > 예시보기 1-3) 알림이 오는지 확인 여기서 되지 않는다면, 2) Mac 환경설정 확인 2-1) 시스템 환경 설정 > 알림 > Slack > 알림이 켜져있는지 확인 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 검색 > 원하는 단축키로 설정 상호 취향에 맞게 선택하면 되는데, 저는 "⌘ ⌥ ⇧ \" 로 했습니다. 활..
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과 같이 따로 설치한 폰트도 사용할 수 있습니다.) 에디..
2023.07.23
-
WebStorm 단축키 모음 - 유용한 Mac 단축기모음
WebStorm 단축키 모음 - 유용한 Mac 단축기모음
WebStorm 단축키 모음 요즘 VsCode를 사용하다가 Webstorm으로 이동하게 되면서 유용한 단축키를 정리했습니다. 찾기/편집 ⇧ ⇧ 전체검색: 프로젝트 전체에서 특정 텍스트를 검색합니다. ⌘ ⇧ o 전체 파일 찾기: 프로젝트 내에서 파일을 빠르게 찾습니다. ⌘ ⇧ f 전체 단어 찾기: 프로젝트 전체에서 특정 단어를 찾습니다. ⌃ g 단어 찾기: 커서가 위치한 단어를 찾습니다. ⌃ ⌘ g 단어 전체 찾기: 프로젝트 전체에서 특정 단어를 찾습니다. ⌘ e 최근 파일 보기: 최근에 열었던 파일 목록을 표시합니다. ⌘ + - 코드 펼치기/접기: 코드 블록을 펼치거나 접습니다. ⌘ d 한줄복사: 현재 행을 복사합니다. ⌘ f 찾기: 현재 파일에서 특정 텍스트를 찾습니다. ⌘ r 바꾸기: 현재 파일에서 ..
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) 강력 새로고침 크롬 브라우저에서 강력한..
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..
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,..
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을 리뷰어에세 검토할 준비가 된것으로 표시하거나, 그 반대로 할 수 있다. 설정 방법 ..
2022.11.14
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에게 존재해야 한다. 그 깊이가 깊든 관계가 복잡..
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 요청 ..
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..
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 ) 파일 삭제 초기 상황 이렇게 파일들..
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 : 영화 상세 설명 (영화 클릭시 상세설명 페..
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; // ..
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) => ..
2021.04.06
🏠 나만의 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..
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시에 해당 값을 가져올 수..
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..
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..
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..
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..
2021.05.20
-
[Side PJ] 야구게임 - 삽질과 배운점🛠
[Side PJ] 야구게임 - 삽질과 배운점🛠
복잡한 상태관리를 통해 간단한 야구게임을 만들어 보는 미니 프로젝트를 진행했다. 백엔드에서 API를 제공해 주었고, 간단한 로직같은 경우는 FE단에서 관리하기로 결정했다. 프로젝트를 진행하며 겪었던 크고 작은 error들과 배웠던 점을 정리해보겠습니다-! VS Code 사소한 문법 맞추기 [ Setting -> quote 검색 -> 수정 ] 오톰과 함께 프로그래밍 하면서 발견한 사소한 번거로움은 바로 VS Code 저장 시 자동 적용되는 문법 설정이 다르다는 것 JS에서 문자열이 auto로 되어있고 Prettier 상 JSX 도 체크가 안되있었지만 single, check 로 맞추었다. merge할때 이런 사소한 부분이 변경사항으로 기록되었기 때문에 고쳐주었는데 협업할 때 이런 사소한 문제도 발생하는구..
2021.05.20