본문 바로가기

Software90

JS를 배우고 있다면 꼭 알아야 "모던 JavaScript 튜토리얼" 코딩 공부 할 때 웬만해선 인터넷에 공개된 자료들이 많아서 책을 사지 않고도 공부할 수 있는데, 특히나 JavaScript같이 인기 있는 언어는 더 그렇죠. 저도 JS 공부 처음 시작할 때는 무료 온라인 코딩 코스부터 수강하고 시작했고 그 후로는 막히는 게 생기면 모질라 재단의 MDN web docs를 검색해서 답을 찾고 있습니다. 그런데 최근에 "모던 JavaScript 튜토리얼(https://ko.javascript.info/)"이라는 프로젝트를 알게 되었는데 JS 공부한다면 필수적으로 알고 있으면 좋을만한 사이트라고 생각해서 소개합니다. 모던 JavaScript 튜토리얼 ko.javascript.info 문법이나 예제 등을 검색하다 보면 자주는 아니지만 종종 "The Modern JavaScript.. 2023. 1. 19.
리눅스 환경에서 NodeJS 설치하기 윈도의 WSL이나 리눅스 환경에서 "NodeJS"를 설치하는 방법입니다. Package 설치로 간단하게 가능하지만 설치할 때 되면 꼭 찾아보게 돼서 기록합니다. sudo apt-get install nodejs 위 명령어로 간단히 설치 가능합니다. 이렇게 설치하면 "npm"도 같이 설치됩니다. 어! 그런데 개발할 때 버전이 중요하던데 어떤 버전이 설치된 거지?? ㅡ.,ㅡ 설치버전은 다음과 같이 "node -v" / "npm -v" 명령으로 확인할 수 있습니다. 그럼 LTS 말고 최신 버전이나 다른 버전을 설치하고 싶을 때는 아래 링크를 참고하면 되겠습니다. GitHub - nodesource/distributions: NodeSource Node.js Binary Distributions NodeSour.. 2023. 1. 10.
리액트 빌드 결과 빈화면만 보일때 - 상대경로 설정하기 오늘은 리액트를 시작하는 저 같은 초보들은 한 번쯤 경험했을 법한 문제라고 생각하는데 이상하게도 여느 리액트 강의에서도 메인으로는 다루지 않는 빌드 시에 관련되는 경로에 관한 내용입니다. 그런데 생각해보면 리액트도 html, java script, css라서 그런 기본 소양을 가지고 있다는 전제를 깔고 가기 때문에 이런 건 당연한 내용이라고 여겨서 강의에서 다루지 않는지도 모르겠네요. 아무튼 리액트 프로젝트를 만들고 나서 빌드 스크립트를 실행하면 "build"라는 이름의 폴더가 생기면서 안에 배포에 사용할 결과물이 생성됩니다. 위에 보시는 것처럼 빌드 폴더 안에 보면 여러 가지 파일들이 생성되어 있는데 이 중에서 웹을 시작하게 하는 파일은 index.html입니다. 상식적으로 리액트로 만든 웹앱을 실행하.. 2022. 12. 12.
React 배포시 원본 코드 구조 숨기기 (Source map 만들지 않기) 리액트로 앱을 만들어서 배포를 하고 브라우저 개발도구에서 소스를 살펴보면 내가 짠 코드의 원본을 그대로 확인할 수 있습니다. 중간에 빌드라는 과정을 거쳤기 때문에 최소한 코드 압축 정도는 되어 있을 줄 알았는데 말 그대로 코딩했던 폴더구조가 그대로 드러납니다. 이런 게 가능한 이유가 바로 소스 맵(Source Map)이 있어서라고 하는데요. 소스 맵은 빌드된 파일과 원본을 연결시켜주는 역할을 합니다. 소스 맵은 배포된 앱에서 문제가 발생했을 때 디버깅을 쉽게 해주는 이점이 있습니다. 하지만 보안적인 문제라던가 비루한 코드가 공개되는 부끄러움 때문에라도 요걸 숨기고 싶을 때가 있는데 그럴 때는 빌드 시에 소스 맵을 작성하지 않도록 하면 됩니다. 위 그림은 크롬 개발도구에서 리액트로 만들어진 웹의 소스를 확.. 2022. 12. 4.
styled-components 사용법 [part 2 /2] 지난 포스팅에 이어서 styled-components 사용법에 대한 내용이며 이번에는 좀 더 헷갈렸던 고급 사용법에 대해서 공부해 보겠습니다. 의사 선택자(pseudo-selector) 선택자에 옵션을 줘서 일부 요소만 선택하는 방법입니다. 영어로는 pseudo라는 명칭을 사용하던데 많은 CSS 자료에서 "의사"라고 번역을 하네요. & (ampersand) "&"기호를 하나만 사용하게 되면 '모든 요소'를 의미합니다. 그냥 이렇게만 얘기하면 무슨 얘기인지 잘 이해가 안 되죠?! 저는 그랬습니다. ㅡ.,ㅡ 암튼 예제를 보면 이해가 쉽게 됩니다. 이 예제는 'styled-components' 공식 홈페이지의 예제를 그대로 가져와서 주석만 번역했습니다. 그리고 아래 내용을 이해하기 위해서는 CSS의 기본 문법.. 2022. 11. 14.
CSS의 기본 - 개념, 문법, 용법 정리 "styled-components"를 공부하던 중 계속 진도를 나가기 위해서는 CSS에 대한 지식이 좀 더 필요하겠다고 느껴서 CSS에 대해서 한번 짚고 넘어가려 합니다. CSS란 CSS는 Cascading Style Sheet의 약자로 HTML 문서의 요소들을 어떻게 보여줄지를 정의한 서식 문서입니다. HTML4부터 서식 설정을 HTML 문서로부터 분리하는 게 가능해져서 CSS라는 별도의 파일로 관리하게 되었고 그래서 사이트의 스타일을 손쉽게 관리해 줄 수 있도록 해주는 역할을 합니다. CSS는 W3C라는 기관에서 표준안을 관리하는데 1996년에 최초 표준 권고안이 제정되었고 지금까지 계속 개발이 이어지고 있다고 합니다. 참고로 지금 최신 버전은 CSS2.1입니다. CSS 문법 CSS는 선택자와 선언부.. 2022. 11. 7.
[React] styled-components 사용법 [part 1 / 2] styled-components는 리액트에서 CSS를 더 편하게 사용할 수 있도록 만들어주는 유용한 도구인데요. 저는 아직까지도 CSS가 마치 하나의 코딩 언어처럼 어렵게만 느껴지다 보니 styled-components에서는 이건 또 무슨 소리인가 싶더라고요. 그래서 기초부터 찬찬히 다시 봐야겠다는 생각이 들었습니다. "styled-components"에 대한 특징이나 기본적인 설명은 생략하고 넘어가겠습니다. 어치피 styled-components 좋은거 잘 알고 이미 잘 사용하고 있기 때문에 어떻게 사용하는지가 중요한 거 아니겠습니까?! 설치 styled-components 사용을 위해서는 먼저 설치하고 프로젝트에 추가해 줍니다. npm, yarn 등을 이용해서 설치합니다. # with npm npm .. 2022. 10. 27.
JavaScript(React, Node.js) - VSCode에서 디버깅하는 방법 디버깅은 코딩에서 참 중요한 부분이고 좋은 툴이 있으면 참으로 편리한 분야입니다. 이제 새로운 언어를 시작했으니 디버깅 방법도 한번 알아보겠습니다. VSCode에서 React, Node.js의 디버깅 방법을 찾아보면 다양한 글들이 있는데 제경우 대다수의 방법으로는 성공하지 못해서 제가 찾은 방법도 공유합니다. 디버깅하고자 하는 Node.js 프로젝트를 열어서 서버 서비스를 시작(npm start)합니다. 잠시 기다리면 안내 메시지에 브라우저로 접속할 수 있는 주소가 나타나죠. 이 주소를 복사해 둡니다. 그런 다음 VSCode 좌측의 디버깅 메뉴로 이동해서 "create a launch.json file"이라고 된 링크를 누릅니다. 그러면 선택창에 어떤 디버깅 환경을 사용할지 물어보는데요. 크롬 많이들 사.. 2022. 2. 4.
JavaScript 시작, React, Node.js 개발환경 준비 2022-01-13 update log: typescript 템플릿 사용 옵션 추가 C++, Python 여전히 모두 진행 중인 언어이고 아직 가야 할 길이 멀지만 시대의 흐름이란 게 무시를 못하는 게 자연스럽게 자바스크립트를 시작하게 되었습니다. C++, Python 학습노트 시작한 것도 어느 정도까지는 진도를 나가고 내용도 더 보완하고 싶지만 일단 지금은 자바스크립트가 재미있고 당장 써먹을 곳도 더 많아 보이네요.^^ 웹 환경에서는 플랫폼에 구애받지도 않고, 온라인 설루션을 만드는 것도 쉽고 거기다가 제가 처음 코딩을 접했던 시절의 C언어만큼이나 이제 자바스크립트가 메인이 된 것 같은 느낌이 듭니다. 아직 모르는 것 투성이지만 대충 자바스크립트 기반에다가 React, Node.js 프레임워크를 사용하.. 2022. 1. 31.
리버싱 핵심원리, 메모장 WriteFile() 후킹 - 64비트에서 따라하기 리버싱이라는 흥미로운 분야에 발을 담근지는 벌써 몇 년이나 되었지만 꾸준하게 공부한 적이 없어서 그냥 재미로 예제나 따라 해 보는 수준입니다. 그래도 그나마 공부다운 공부를 하게 만들어준 자료가 바로 나뭇잎 책이라고 알려진 '리버싱 핵심원리'인데요. 저 같은 초보도 이 책 하나만 보면 리버싱이란 게 뭐구나 감 정도는 잡을 수 있게 해 주고 그리고 주변에 후기를 찾아보면 이거 하나로도 경지에 오르신 분들도 계실 정도로 아주 유익한 교재라고 생각이 됩니다. 오늘은 리버싱 핵심원리의 책 3부 30장에 있는 윈도 메모장 WriteFile() 함수 후킹 예제를 64비트 윈도에서 여러 가지 에러들을 해결하면서 실습한 후기를 정리해 보려 합니다. (개인적으로 재미도 있었고 가장 많이 공부가 된 부분이라서 언제 한번 .. 2021. 9. 27.
프로세스 이름으로 PID 번호 구하기 이름으로 해당 프로세스의 PID 번호를 구하는 방법입니다. 위 작업 관리자 캡처 화면의 경우 Notepad.exe의 PID는 5528입니다. 그런데 이 번호는 메모장이 실행될 때마다 변경되기 때문에 PID가 필요한 경우 유용하게 사용할 수 있습니다. #include #include DWORD GetProcessByFileName(LPWSTR name) { DWORD process_id_array[1024]; DWORD bytes_returned; DWORD num_processes; HANDLE hProcess; WCHAR image_name[MAX_PATH] = { 0, }; DWORD i; EnumProcesses(process_id_array, 1024 * sizeof(DWORD), &bytes_r.. 2021. 8. 18.
Pyinstaller 패키징 때 PyQt ui 파일 포함시키는 방법(여러개도 됨) 문제점 파이썬으로 GUI 프로그램을 만들 때 PyQt를 애용하고 있습니다. PyQt는 ".ui"라는 확장자를 사용하는 별도의 GUI 리소스 파일이 있어서 파이썬에서 이 UI파일을 읽어오기만 하면 되기 때문에 아주 편리하게 사용할 수 있습니다. 그래서 UI가 약간 수정이 있다 해도 메인 소스를 손댈 필요가 없어서 생산성 측면에서 큰 장점이 있습니다. 그런데 이렇게 별도의 UI 파일이 있는 프로그램은 Pyinstaller로 패키징 할 때 리소스 파일이 누락되어서 패키징이 제대로 되지 않을 때가 있습니다. 제가 경험해본 바로는 UI 파일을 스크립트에서 불러올 때 상대 경로로 접근하는 경우 Pyinstaller로 패키징 할 때 UI가 누락되는 걸 경험했습니다. 그래서 이런 경우는 UI파일을 참조할 때 절대 경로.. 2021. 7. 22.
pip upgrade 에러 - 엑세스가 거부, No module named 'pip' pip 업그레이드 중에 발생할 수 있는 에러 해결법입니다. pip 모듈을 사용하다 보면 가끔 이런 안내를 만나게 됩니다. pip의 새로운 버전이 있으니 업그레이드를 하라는 건데요. 이런 안내를 받고 아무 생각 없이 이렇게 업그레이드를 시켰습니다. pip install python-dev-tools 그럼 이런 경고를 만날 수 있는데요. 서버에서 새로 설치할 pip정보를 검색한 후에 정보가 확인되면 컴퓨터에 깔려있는 이전 버전의 pip를 지우고 나서 새로운 버전을 설치하는 과정으로 진행이 되는 것 같습니다. 그런데 원래 깔려있던 pip를 지우는 중에 pip.exe에 접근을 못해서 에러가 발생합니다. 이게 참 당연한 건데 저는 생각도 안 해보고 뭔가 문제가 있다고 생각했었습니다. pip가 알아서 다 잘하니까 .. 2021. 7. 16.
selenium사용하지 않고 네이버쇼핑 검색결과 크롤링하기 네이버 쇼핑의 검색 결과가 필요해졌습니다. 검색 페이지 크롤링하면 되니까 어렵지 않게 할 수 있을 거라고 생각했었는데 그게 아니었습니다. 대신 검색정보를 담고 있는 JSON파일을 찾을 수 있었고 더 쉬운 방법으로 해결이 되어서 내용을 남깁니다. 크롤링의 기본은 사이트의 구조를 파악하는 일이죠. 저는 특정 카테고리의 해외직구 제품 네이버 랭킹 1~100위 제품을 가져올 계획이고 여기서 그 카테고리는 TV입니다. 먼저 해당 페이지를 분석해보겠습니다. "네이버 > 쇼핑 > 카테고리TV > 해외직구"로 이동합니다. F12 or Ctrl+Shift+I 를 눌러서 "개발자 도구"를 열어줍니다. 여기서는 로딩되는 웹페이지의 모든 정보를 볼 수 있습니다. 그리고 좌측 상단의 마우스 모양의 버튼 or Ctrl+Shift.. 2021. 7. 9.
Pyinstaller로 변환한 exe 파일의 실행 경로 찾기 Pyinstaller로 파이선 스크립트를 실행파일로 변환했을 때 겪을 수 있는 경로 문제에 대한 이야기입니다. 프로그램 동작중에 데이터 파일을 가져오거나 저장해야 할 일이 있을 때 파이썬 스크립트 상태에서 실행할 때는 아무런 문제가 없었는데 Pyinstaller로 패키징을 한 후에 실행을 하면 똑같은 위치에 멀쩡히 잘 있는 데이터 파일을 찾지 못한다고 에러가 뜨거나 파일을 저장했다는데 엉뚱한 곳에 저장을 해서 난감한 경험을 격으셨다면 끝까지 읽어보시고 해결해보세요. 본 포스팅은 프로그램의 runtime과 관련된 내용으로 pyinstaller의 기술문서인 아래 링크를 참고하였습니다. 자세히 공부를 하고 싶다 하시는 분은 링크의 문서를 다 읽어보시면 좋을 것 같고요. 난 결론만 있으면 돼 하시면 아래 글을 .. 2021. 7. 8.