Programming150

• 

  [SSAFYcial] 싸피에서도, 현업에서도 자주 쓰는 Git 명령어 알아보기 개발에 입문하고 가장 먼저 배우는 것들 중 하나가 바로 Git일 텐데요. 오늘은 제가 개발을 거의 알지 못하던 SSAFY에서 처음 배웠지만, 개발자로 일하고 있는 지금도 자주, 또는 유용하게 쓰고 있는 Git 명령어들을 소개해보려고 합니다! Git이란많은 분들이 알고 계시겠지만 Git은 '버전 관리 시스템' 입니다. 개발을 하면서 여러 명이 하나의 코드 베이스에 수많은 변경 사항을 만들어야 하기 때문에, 이 과정에서 코드의 버전을 잘 기록하고 활용하기 위해 만들어진 도구인데요. 2005년, 리눅스 커널을 개발하던 개발자들이 만들었습니다. 이 Git을 사용하기 위한 명령어들을 터미널에 입력하면 내 코드의 상태를 자유자재로 저장하거나 되돌릴 수 있습니다. git add, git commit -m, git p.. Programming/ETC 2025. 1. 16.

• 

  개발자는 개발만 잘해도 될까 예전에 저장해놨던 토스 개발자분들의 대화를 오늘 봤다. 개발자라면 너무도 공감할 수밖에 없는 이야기가 나와서 기록해 본다.대화를 거칠게 요약해보자면 결국 개발의 퀄리티보다는 제품의 성공이 중요하다는 것이고, 이건 내가 1년 반동안 서비스를 개발하면서 제품을 성공도 시켜보고 실패도 시켜보면서 직접 체감할 수 있었던 부분이다. 이 부분까지는 많은 분들이 하시는 말씀이지만, 이 대화에서 새롭게 다가왔던 부분은 "기능의 요구가 들어왔을 때 그 기능을 구현하는 것보다, 왜 그 기능이 필요한지를 먼저 파악함으로써 더 효과적인 해결책을 제시할 수 있다...요구 사항 정의에 시간을 투자하는 것이 장기적으로 더 나은 결과를 가져올 수 있다"는 것이었다. 이 말을 듣자마자 내가 그동안 개발해왔던 것들 중 몇가지가 바로 떠.. Programming/ETC 2025. 1. 12.

• 

  [Python, VSCode] MacOS 맥북에서 Python 환경 설정하기 알고리즘 수업을 들으면서 오랜만에 파이썬을 사용하고 있다. 맥에서 파이썬을 쓰는 건 항상 윈도우 PC에 venv 가상환경을 설치해서 쓰던 싸피 시절과는 꽤 달라서 맥 그리고 VSCode 내에서 파이썬 사용 경험을 기록해보려고 한다. 1. pyenv를 설치한다.먼저 nvm과 유사한 python 버전 매니저인 pyenv는 기본적으로 설치하는 것이 좋다.brew install pyenv 2. 원하는 버전의 python을 설치한다.사실 맥북에는 python2가 기본으로 설치되어 있다. 하지만 나는 3이 필요해서 pyenv를 이용해 설치했다.pyenv install {version} 3. (python3 사용하는 경우) pip3를 사용해 원하는 모듈을 설치한다.python3를 설치했다면 pip3, python의 .. Programming/Python 2024. 11. 11.

• 

  [에러 기록] SyntaxError: unknown: Namespace tags are not supported by default React 앱에서 SVG를 MUI SvgIcon에 넣어 SVG 아이콘이 필요한 곳에 사용 중이었는데, 새로운 아이콘을 만드는 과정에서 앱이 렌더링이 안되면서 해당 에러가 나타났다. 처음에는 MUI와 관련된 에러인가 했지만, 스택오버플로우에서 SVG와 JSX(React)가 충돌해 발생하는 에러라는 사실을 알게 됐다. SVG는 XML(미리 태그가 지정되지 않은 마크업 언어)로 쓰여진 2차 벡터 그래픽 마크업 언어다. 이 때 namespace라는 건 XML을 사용하는 다른 언어들과 충돌하거나 혼동되지 않도록 이것이 SVG에 속한다고 명시해 주는 역할을 하는 요소다. 웹앱에서 SVG의 경우 이제 namespace를 사용하지 않아도 된다고 한다. 그런데 이 때 Figma에서 export한 SVG의 경우 간혹 가다.. Programming/React 2024. 10. 21.

• 

  [Jest] 특정 파일에 대한 커버리지 수집하며 실행하는 법 Jest로 만든 테스트를 실행할 때 npm run test:coverage 명령어로 전체 커버리지와 세부 정보를 수집할 수 있다. 그런데 작성한 테스트가 충분한 커버리지를 만들고 있는지, 더 높이려면 어떤 영역을 보충해야 할 지가 궁금할 때가 있다.아래 명령어를 사용하면 '한 가지 테스트만 실행하면서, 해당 테스트의 특정 파일에 대한 커버리지를 수집'할 수 있다.이 때 테스트 대상 파일과 커버리지 수집 파일은 달라도 된다.  npm test blahblah.spec.js -- --coverage --collectCoverageFrom=src/js/woofwoof.js Programming/React 2024. 7. 8.

• 

  [프론트엔드 테스팅] Yoni Goldberg의 JavaScript Testing Best Practices javascript-testing-best-practices/readme.kr.md at master · goldbergyoni/javascript-testing-best-practices📗🌐 🚢 Comprehensive and exhaustive JavaScript & Node.js testing best practices (July 2023) - goldbergyoni/javascript-testing-best-practicesgithub.com 이 GitHub README는 내 즐겨찾기에 들어 있은지는 오래 되었지만 처음으로 꺼내보게 되었다. 만 1년차 개발자가 되고 나서부터 가장 크게 달라진 점이 있다면 테스트 코드를 작성하고 있다는 것인데, 막상 테스트를 짜다 보면 어떤 원칙을 따라야 할지.. Programming/Javascript, Typescript 2024. 4. 15.

• 

  [HTML]  (non-breaking space, 줄 바꿈 없는 공백)이란? FE 개발을 하다 보면 JSX나 HTML에 명시적으로 공백을 표시해야 할 때가 있다. 텍스트 요소 길이가 너무 길 때 줄을 바꾸고 그곳에 nbsp를 쓰는 식이다. nbsp가 정확히 무엇을 의미하는지와 사용해야 하는 경우, 사용하면 안 되는 경우를 알아 보았다. 1. nbsp란? nbsp는 사실 공백을 표시하는 데 쓰는 것이 아니다. 하지만 공백의 역할을 한다. nbsp를 쓰면 공백이 표시됨과 동시에 그 위치에서는 줄 바꿈이 일어나지 않아 그 이전 공백이나 이후 공백에서 줄 바꿈이 일어나게 한다. 그러니까 극단적으로 한 p 태그 안의 모든 공백을 nbsp로 대체해 표시하면, p 태그의 콘텐츠가 p 태그를 감싸고 있는 div의 오른쪽 바깥을 한 줄로 뚫고 나가게 된다. 줄 바꿈 없는 공백을 HTML이 인식할.. Programming/HTML, CSS 2024. 3. 26.