Today Hailie Learned

인스타그랩은 메타가 2조원에 인수했을 당시 전 직원이 20명도 안되는 규모였다. 1년 만에 1조 원의 가치를 만든 클럽하우스는 전 세계 가입자가 수백만 명으로 증가할 때까지 개발자가 단 세명뿐이였다.  내가 정의하는 개발자의 모습은? 생각해보기=> 문제를 파악하고 문제를 해결하고 해결 방법을 공유하는 자 똑똑하게 질문하는 전략1. 성의있게 질문하기ex) 현재 A기능을 구현 중인데 사파리에서 사용자가 링크를 클릭하고 화면을 새로 고침해도 로딩 바가 계속 남아 있는 문제가 있습니다. 로컬 환경에서는 잘 동작하는데 베타로 배포한 페이지에서는 계속 문제가 발생합니다. 제가 생각한 원인은 00인데 생각보다 잘 해결되지 않습니다. 사용하는 라이브러리를 디버깅해봐야할까요? 아니면 다른 원인이 있을까요? 2. 스타일보..

로컬에서 백엔드를 실행하는데 연결이 되지 않아서 터미널을 봤더니 아래와 같은 메세지가 나왔습니다. Connection to localhost:5432 refused. Check that the hostname and port are correct and that the postmaster is accepting TCP/IP connections. 그리고 디비버를 실행했더니 친절하게 PostgreSQL에 문제가 있다고 알려줬습니다. 다양한 원인이 있겠지만, 쉽고 간단하게 다시 PostgreSQL 을 연결하는 방법으로 문제를 해결했습니다. 바로바로 삭제 후 재설치! # postgresql이 설치되어 있는것들을 모두 삭제 합니다. $ brew uninstall postgresql # 설치 되어있는 postgr..

node version 바꾸기 node -v // 내가 사용하고 있는 node 버전 확인하기 nvm list available // 사용 가능한 버전 조회하기 nvm install 20.12.2 // 20.12.2 버전 다운로드하기 (저는 lts 버전으로 사용함) nvm list // 설치되어 있는 버전 확인하기 nvm use 20.12.2 // 20.12.2 버전 사용하기 node -v

TOC 나 앵커를 작업하다가 스크롤이 해당 위치로 정확하게 가지 않는 에러가 있었습니다. See the Pen css scroll by HelloHailie (@hellohailie) on CodePen. 이 에러의 원인은 네비게이션바였습니다. 네비게이션바에 상단에 항상 fixed 되어 있기 때문에 네비게이션 바 height 만큼을 추가해줘야 가리지 않습니다. 이를 아주 간단하게 해결할 수 있습니다. scroll-margin-top: calc('헤더 height' + 10px); 아래처럼 해당되는 곳에 scroll-margin-top 을 설정해주면 문제를 해결할 수 있습니다. See the Pen css scroll by HelloHailie (@hellohailie) on CodePen.

.zshrc(닷 지셀알씨) 이 이야기는 루비(ruby 3.2.2) 버전을 설치하다가 .zshrc을 통으로 날려버린 슬픈 이야기를 담았습니다. 먼저 .zshrc 에 대해 알아봅시다. .zshrc은 Zsh 쉘의 설정 파일로, 사용자 정의 환경을 설정하고 쉘 동작을 조정하는 데 사용됩니다. 이 파일은 주로 사용자의 홈 디렉토리에 위치하며, Zsh 쉘이 시작될 때 자동으로 실행됩니다. 사용자는 이 파일을 수정하여 다양한 환경 변수, 별칭, 함수 및 기타 설정을 추가하거나 변경할 수 있습니다. 개발자라면 새 맥북을 받으면 설정하는 것이 iTerm2, Oh My ZSH 등등 일 것입니다. 이들을 설정하면 zshrc 파일이 채워집니다. 새로운 프로젝트를 진행하면서 해당 프로젝트를 로컬 환경에 다운 받고, 서버를 키는..

개인 프로젝트를 만드는데 백엔드 분께서 로컬에서 DB 세팅 후 백엔드 서버를 설치하고 서버를 켜는 방법을 알려주셔서 기록을 남기기 위해 글을 남깁니다. 프론트엔드가 로컬에서 DB 설치 후 서버켜는 방법을 알면 좋은 점은?! 1. 간혹 가다가 프론트엔드 테스트를 하다가 서버가 다운되는 경우, 쉬고 있는 백엔드 개발자에게 부탁을 하지 않아도 된다. 2. 데이터가 실제로 어떻게 저장되는지 확인할 수 있어서 신기하다. 3. 데이터가 들어가는지 안들어가는지 직접적으로 확인이 가능해서 디버깅이 용이하다. 1. Homebrew로 PostgreSQL 설치 brew install postgresql 1-1. 만약 Homebrew가 설치되지 않았다면?! /bin/bash -c "$(curl -fsSL https://ra..

이번 MacOS 업그레이드를 하면서 문제가 발생했습니다. 1. 기존에 작업하던 vscode 의 git 연동이 풀려있음. 2. Git을 재설치하라고 안내창이 나. 3. 터미널에 ```git --version``` 명령어를 치면 아래처럼 무서운 에러가 나옴 4. 할 수 없이 brew로 git을 설치하려는데 뭔가 느낌이 쎄해서 찾아보았더니 간단하게 해결할 수 있었습니다. 해결 방법 xcode-select --install 몰랐는데 MacOS 업데이트 높은 확률로 나오는 개발 관련 툴을 실행시 나오는 에러라고 합니다. 각 도구들의 문제가 아닌 Command line tool을 식별해서 발생한 문제라고 합니다. 설치는 대략 2~3분 정도 걸렸고, 문제가 있던 git이 정상적으로 돌아왔습니다.

✔️ 에러 코드 'replaceAll' 속성이 'string' 형식에 없습니다. 대상 라이브러리를 변경해야 하는 경우 'lib' 컴파일러 옵션을 'es2021' 이상으로 변경해 보세요. ts(2550) ✔️ 에러가 나온 이유 map을 쓰지 않고 바로 나 태그로 감싸서 리턴했더니 이런 오류가 나왔다. 😅 👇에러코드 👇 const mainTitle = title.replaceAll('\\', '').split(':')[0] const subTitle = title.replaceAll('\\', '').split(':')[1] 👇에러 수정 코드 👇 첫번째 방법 tsconfig.json 파일에서 "es2021"로 수정하기 "lib": ["es2021", "dom"], 두번째 방법 const mainTitle =..

✔️ 에러 코드 Uncaught (in promise) DOMException: The element has no supported sources. ✔️ 에러가 나온 이유 오디오 파일이 로드 중 상태에서, 로드가 최적화되기 전 재생을 실행하는 것이 문제가 되는 것 같다. 😅 그래서 오디오 파일을 완전히 불러온 후 재생하도록 코드를 수정했다. 👇에러코드 👇 import React from "react"; const AudioPlayer = () => { let audio = new Audio("../../assets/audio/train_horn.mp3"); const start = () => { audio.play(); }; return ( start ); }; export default AudioPla..

nvm 설치 방법 1. brew 설치 2. brew를 활용하여 nvm 설치 brew install nvm 3. 환경 변수 설정 - ~/.nvm 디렉토리 생성 mkdir ~/.nvm touch ~/.zshrc vi ~/.zshrc 파일 내에 코드 입력 export NVM_DIR="$HOME/.nvm" [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm esc + :wq(저장 후 종료) source 명령어로 스크립트 실행 source ~/.zshrc mac에서 프로젝트마다 node 버전 다르게 설정하는 방법 1. vscode 익스텐션 설치하기 vscode nvm integration 2. 프로젝트에 .nvmrc 생성하기 3. nvm list ..