Janu is Developing

콜백함수를 검색해서 찾아보면 "다른 함수의 인수로 전달되어 해당 함수의 내부에서 호출되는 함수"라고 하는데... 이렇게 설명하면 솔직히 알아듣나?그래서 Claude씨에게 물어봤는데,"나중에 실행해 달라고 맡겨놓은 함수"라고 간단히 이해하면 된다고 하더라. button.onclick = function(){ alert("버튼이 클릭됨!")}여기서 alert("버튼이 클릭됨")을 포함한 function이 바로 콜백 함수라고....콜백함수를 많이 볼 수 있는 것 중 하나는, 바로 전형적인 비동기 함수 중 하나인 setTimeout이다.setTimeout(function(){ console.log("3초 지났어")}, 3000)내가 헷갈릴까봐 설명하는건데,,,, setTimeout은setTimeout(()=..

새로 생성한 프로젝트가 있는데, 이 디렉토리별 구조와 역할에 대한 정리가 필요해보여서 간단하게 정리!1. public/정적 파일(html, 이미지, 파비콘 등)을 두는 폴더. 이 폴더 안의 파일은 빌드 시 가공 없이 그대로 복사되며 이미지나 메타 태그 등 HTML에서 직접 불러와야 할 것들을 저장한다.. ※ 정적 파일 : 서버에서 처리나 변환 없이 그대로 클라이언트에게 전달되는 파일. 요청할 때 마다 같은 내용이며, 처리시간이 없고(=응답이 빠름), 파일을 그대로 전송한다(=서버 처리 없음).웹팩이 건들지 안혹, 빌드 후에도 파일명이 그대로이며 직접 url접근이 가능하다. "한번 만들어놓으면 누가 언제 요청해도 같은 내용을 보여주는 변하지 않는 파일"ex) 로고, 배너, 폰트, 문서, 동영상 ※ 동적 파..

마음에 드는 웹앱 템플릿이 있어서 그거 다운받고 프로젝트를 세팅하는 과정에서 도대체 path를 어떻게 설정하는지 몰랐다.30분 정도 헤매는 과정에서 얻은 결과... 일단 의도한 결과는 나온것이므로 그 과정을 까먹기 전에 작성할련다. 난 금붕어니까...🐟 1. vite.config.ts에 alias로 @ 설정하기난 이거 자동으로 되는 지정어인줄 알았더니 내가 셀프로 설정해야 하는거더라?;어쨌든 alias로 설정해줬다.여기서 path란 내 파일에 있는 paths.ts가 아닌(난 이건줄 알았음 그럴리가 없는데 ㅋㅎ) Node.js의 내장 모듈인 path를 의미한다. Vite설정 파일은 Node.js환경에서 실행되지만 Typescript가 path모듈 타입 선언을 찾지 못해서 계속 빨간줄이 나타났다.➡️고로 ..

사실 여태까지 윈도우 버전같은거 한번도 생각 안하고 살다가...내 최애 인텔리젱 플러그인이 자꾸 오류가 나서 개발자한테 문의를 했었다.개발자가 내 운영체제랑 인텔리제이 버전을 확인하려 하는데 여태까지 할 줄 몰라서...미루고 미루다가 오늘에서야 윈도우 버전 확인하게 되었다. 1. 운영체제 확인(= 윈도우 버전 확인)왜 "윈도우 버전 확인하기"냐면, 운영체제가 윈도우인건 알고 있었는데 10인지 11인지 몰랐기 때문... 사실 둘이 분간도 어렵다.window + R검색창에 ``winver`` 작성운영체제 확인!이런식으로 블라블라 쏼라쏼라 표시되더라. 2. 윈도우 버전 + bit버전 확인이거 생각보다 쉬웠는데 여태까지 감으로 때려맞춘거 열받는다.윈도우 우클릭해서 설정 → 시스템 → 맨 밑으로 내려서 정보 →..

내가 정말 잘 쓰고 있는 씽크웨이 Tv99의 유일한 단점은 "한영키"가 없다는 것이다...어느날 열심히 개발하고 있었는데, 내가 뭘 잘못 눌렀는지 alt키가 한영으로 안바뀌고 자꾸 윈도우창이 뜬다이것때문에 그 전에 한바탕 했던 기억을 되살려서 이짓을 그만하는 방법을 알아냈었다. 1. 키보드 레이아웃 옵션을 변경한다.설정 ➡️언어 및 지역 ➡️ 언어옵션 선택그리고 해당 화면에서 [레이아웃 변경] 버튼을 클릭한다.그럼 위와 같은 창이 나오는데, 저기서 레이아웃을 변경하면 컴퓨터를 재시작해야 하므로 그건 알고 있어라...그런데 난 내가 원하는대로 "한글키보드(101키) 종류 1"로 잘 선택되어 있는데도 alt키를 눌렀을 때 한영변환이 안되는 문제였다....그래서 내가 택했던 방법은 2. 운영 체제의 배열 모드..

깃허브든, 깃랩이든 repository를 하나 파서 그걸 클론받아야 새로운 프로젝트를 시작할 수 있는데...하도 오래전에 깔다보니 다까먹었다 ㅋㅎ....그래서 기억 상기할겸 방법 정리하기 1. 내 컴퓨터에 원하는 폴더를 생성하기참고로 난 C에 Project라는 폴더를 하나 생성해서 C:\Project로 경로를 지정했다. 2. github or gitlab에 접속하기 3. 원하는 프로젝트에 대한 git clone(http)를 복사하기저거 복사하면 된다. 4. 원하는 폴더에 git bash 켜기C:\Project 우클릭 ➡️ 추가 옵션 표시 ➡️ git bash 열기5. bash창에 git clone + 복사한 http 주소 치기참고로 bash창에선 Ctrl + v 기능이 안되므로 우클릭으로 paste치기...

문자 전송을 위해 사용한 웹사이트는 알리고이다. 근데 이 서비스의 문제는 인코딩 방식이 UTF-8이 아닌 EUC-KR라는 것이다. 아예 spec에서 "통신사의 웹 문자 발송 시스템은 기본적으로 EUC-KR인코딩 방식을 따르고 있습니다"라고 못을 박았다.이번이 처음으로 API 통신 로직을 짜는거라 제대로 된 설명의 포스팅이 필요했는데 없어서...ㅠ 도움을 받아 코드를 작성하고 기능이 성공적으로 실행되는 것까지 확인할 수 있었다. 그러나 자바로 url을 만들고 api를 호출하는 것은 처음이라... 어쨌든 무슨 의미인지 공부는 해야 한다. API 기본 호출 순서URL 설정헤더(Header)설정바디(Body)설정요청 보내기여기서도 잘 정리했으니 여기선 간단하게 정리한다. 1. 요청 파라미터 구성 Strin..

이번에 useEffect를 정리하면서 Carbon | Create and share beautiful images of your source code Carbon | Create and share beautiful images of your source code carbon.now.sh이런걸 알게된다. 이런 편리한 사이트가 있다는걸 이제 알았네잉... 두고두고 써먹어야지리액트를 사용하는 갠프에서 제일 많이 사용되는건 useState, useEffect, useReducer이었던 것 같다.뷰 처음 배울때도 간단한것들부터 너무 어려웠는데, 리액트도 하다보면 괜찮아지겠지... 1. useEffect란 무엇인가리액트 공식 문서에 따르면 useEffect란 외부 시스템과 컴포넌트를 동기화하는 React Hook..

25.05.15일을 기준으로 갠프가 3월 초에 멈춰서 거의 진행되고 있지 않는데.... 그 이유는퇴근, 주말에는 좀 온전히 쉬고 싶다...같은 느낌이 좀 많이 컸다. 작년 11월에 입사하자마자 바로 갠프를 시작했으니 사실 개발 속도 생각하면 지금쯤 웹은 이미 다 완성하고 api단도 완성해서 배포까지 해보는게 정상이긴 한데.. 너무 힘들었다. 사실은 지금도 좀 많이 힘들다퇴근 후나 쉬는 날에 자기개발을 위해 공부하는건 상상 이상으로 엄청난 인내력과 체력을 필요로 하더라 생각해보니 인생에서 온전히 마음편하게 쉰 순간이 별로 없긴 했다.2달 취준하고 합격, 대학 졸업 ➡️ 1달 반? 쉬고 병원 입사 ➡️ 퇴사 후 2주 쉬고 바로 국비 수강 ➡️ 국비 종강 후 2주 후 바로 취업일자리 못구해서 사람들 죽어나가는..

갠프를 진행하면서 useState가 상태변화를 감지하는 것이라는걸 이해했다. 그런데 여러 요소를 제어할 때 한꺼번에 상태변화를 하고 싶은데 useState는 간단한 상태 or 1:1 상태를 감지하는 느낌이라고 이해했다.그래서 useState보다 좀 더 다양한 요소를 제어하는 Hook이 필요했는데... 찾다보니 useReducer를 알게 됬다.. 1. useState와 useReducer의 차이?useState : 간단한 숫자, 문자열, 불리언 값 관리에 적합하다.상태를 직접 변경하는 setter함수를 제공하며(set어쩌구~), 비교적 단순한 로직에서 사용된다. userReducer : 여러개의 값, 다양한 변경 방식에 적합하다.const [state, dispatch] = useReducer(reduce..