joonkong1 님의 블로그

버그 분석팀 → 개인 프로젝트 전환 후 프로필 이미지가 안 보이는 3가지 원인왜 팀 프로젝트에서는 됐는데 개인 환경에선 안 됐나팀 프로젝트는 프론트엔드와 백엔드가 같은 서버에 배포되어 있었기 때문에 /uploads/profile/파일명 같은 상대경로가 정상적으로 동작했다. 로컬 개발 환경에서는 프론트(포트 3000)와 백엔드(포트 8000)가 분리되어 있어서 상대경로가 완전히 다른 서버를 가리키게 된다.배포 환경 프론트 + 백엔드 → https://myapp.com (동일 서버) img src="/uploads/profile/dog.jpg" → https://myapp.com/uploads/profile/dog.jpg ✅ 로컬 개발 환경 프론트 → http://localhost:3000 백엔드 → htt..

패키지 매니저yarn install 실행 시 "인식되지 않는 명령어" 오류발생한 오류yarn : 'yarn' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십시오. 위치 줄:1 문자:1 + yarn install + ~~~~ + CategoryInfo : ObjectNotFound: (yarn:String) [], CommandNotFoundException왜 이 오류가 발생하는가yarn은 Facebook이 만든 패키지 매니저로, npm과 별개의 프로그램이다. Node.js를 설치해도 yarn은 자동으로 딸려오지 않는다. 즉 yarn 자체를 따로 설치해야 한다.Pow..

day041. flex디스플레이 flex    - flexible box, flexbox라고 부른다. 요소의 크기와 순서를 유연하게 수정할 수 있으며,    한 줄에 요소를 배치하는 속성이다. 단, 요소의 크기보다 브라우저의 크기가 작아지면    한 줄에 꽉 차 보이도록 크기를 조절한다..box02-wrapper { display: flex; flex-wrap: wrap; border: solid 2px black; gap: 4px; width: 104p;}    1) 자신이 가진 내용물의 width 만큼만 차지하게 되며,     - width, height를 지정할 수 있다.(inline-block 속성과 동일하다.)    2) flex-direction : column, row, column-reve..

html을 마무리하고 css 과정에 돌입했다.css를 배우면서 점점 '홈페이지 다운' 모습으로 발전해 가는 것이 재미있었다.그러니까 CSS란 Cascading Style Sheets의 약자이다. CSS는 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는데 사용한다. 스타일을 HTML문서로부터 분리하는 것이 가능해진다. CSS란?    - CSS란 Cascading Style Sheets의 약자이다. CSS는 HTML 요소들이 각종 미디어에서 어떻게 보이는 가를    정의하는데 사용한다. 스타일을 HTML문서로부터 분리하는 것이 가능해진다. CSS를 사용하는 이유    - HTML만으로 웹 페이지를 제작할 경우, HTML 요소의 세부 스타일을 일일이 따로 지정해주어야 하기 때문에    많은 시간..

두달 간의 리눅스 공부를 마무리하고 드디어프론트엔드 공부의 첫 걸음을 내디뎠다.우선적으로 배웠던 것은 역시 html, 웹의 틀을 짜는 언어인 만큼 가장 먼저 배우기에 적합한 것 같다. day01 무엇이든 처음 배울 때에는 개념을 확실하게 하고 가는 것이 가장 중요하다.단순 암기로 공부를 한 경험이 많은 나로써는 주입식 교육의 폐해가 얼마나 치명적인지 알기에,긴 시간에 걸친 나의 공부가 마지막에 무너지지 않도록기초를 다지는 것에 노력했다. 재미는 없지만 한번 쭉 정리하고 본격적인 공부와 실습에 들어갔다.  서버와 클라이언트   - 서버 : 요청 받은 서비스를 응답해주는 대상   - 클라이언트 : 서버에게 요청하는 대상웹(Web)   - 요청과 응답이 일어나는 장소.웹 브라우저(Web Browser)   -..

1. 리눅스 쉘 1) 쉘 기능사용자로부터 키보드 입력을 받거나 파일로부터 입력을 받으면 해당 내용을 분석하여 커널에게 전달한다.늑수 문자 및 기호를 메타케릭터로 처리하여 커널에게 전달한다.  2) 쉘 유형CentOS 9 Stream 에서는 sh, bash 쉘을 제공한다. 그 외 나머지 쉘은 별도로 설치해야한다.     3) 쉘 관련 사용자 환경 파일관리자가 일반 사용자의 환경을 설정시켜 주는 경우 읽혀지는 파일은 다음과 같다./etc/profile -> 로그인 할 때만 읽혀진다./etc/profile.d/*.sh -> 쉘이 실행될 때만다 읽혀진다./etc/bashrc -> 쉘이 실행될 때마다 읽혀진다. 그리고 일반 사용자가 자신의 한경을 설정 하는 경우 읽혀지는 파일은 다음과 같다.$HOME/.bash_..

1. vi 편집기 1) vi 편집기 모드 2) 커서 이동 관련 키  3) 복사, 붙여넣기, 삭제 관련 키  4) 입력 관련 키   5) 확장 모드확장 모드는 다양한 기능을 제공한다. 확장 모드로 전환하려면 명령 모드에서 :(콜론)를 실시한다.   확장 모드에서 ! 이후에 리눅스 명령을 입력하고 엔터를 실시하면 명령이 실행된다. 명령모드에 콜론을 입력해서 확장 모드로 전환하고 !date를 입력해서 명령을 실행했다. 또는 확장 모드에서 ! 이후에 bash 명령을 실행하면, bash 쉘이 새로 실행된 쉘에서 명령어를 사용할 수 있다   6) swp 파일'swp' 파일을 알아보기 위해서 리눅스 윈도우에서 터미널을 실행한다. 1) vi 편집기로 오픈한 파일을 vi 편집기로 오픈한 경우 기존 터미널에서 'test...

1. 쉘1) 쉘표준 입력으로 입력한 명령어와 스크립트 파일에서 읽어 들이는 명령어를 해석하여 사용자와 커널의 중계 역할을 담당한다. 쉘이 아니면 우리가 명령을 내려도 커널이 알아먹지를 못한다는 뜻!쉘 유형에는 여러가지가 있지만 일반적으로 bash쉘을 가장 많이 쓴다.  2. 메타캐릭터메타캐릭터란 쉘이 단순한 문자가 아닌 특별한 기능을 하는 의미로 해석하는 특수 문자나 기호를 말한다. |  (파이프)앞에 실행한 명령어 결과를 파이프 다음 명령어로 넘겨준다. 맊약, 따옴표, 소괄호 안에 있다면, OR 개념이다. 앞서 grep이나 egrep을 사용할 때 함께 많이 사용해봐서 익숙하다.  ;  (세미콜론)여러개의 명령어를 순차적으로 수행하도록 한다.(앞에 명령이 실패되면, 뒤에 명령이 실행됨)&& (더블 엠퍼센..

1. 기본 명령어지난 주차에는 디렉토리와 파일을 이동하고 내용을 확인하는 방법에 대해 공부했다.  1) 생성과 삭제 다음으로는 디렉토리와 파일을 생성하고 삭제하는 방법에 대해 알아보았다.  mkdir디렉토리를 생성하는 명령어이다.  생성한 디렉토리보다도 하위 디렉토리를 만들고 싶을 때는 /를 이용하면 된다.  하지만 상위 디렉토리부터 하위 디렉토리까지 하나씩 만드는 것이 번거로울 때는-p 옵션을 추가하면 내가 입력한 최상위 디렉토리부터 최하위 디렉토리까지 한번에 생성된다.   rmdir디렉토리를 삭제하는 명령어이다. 하지만 디렉토리 안에 또 다른 디렉토리나 파일이 있다면 삭제할 수 없다.   rm파일이나 디렉토리를 삭제하는 명령어이다. 디렉토리를 삭제하는 경우에는 -r 옵션을 추가해야 한다.(파일에는 -..

1. 리눅스 설치리눅스 패키지를 받아서 설치를 진행했다.정해진 절차에 따랐기 때문에 정확히 알지는 못하지만리눅스를 실행하기 전에 네트워크에 잘 연결돼있는지만 확인하면대부분의 준비는 끝이라고 할 수 있다. # nslookup www.google.com  nslookup 명령어를 사용해서 goolge 주소를 탐색했을 때 결과가 나온다면네트워크에 정상적으로 연결이 됐다는 뜻이다.      리눅스 설치와 설정이 끝났다면추가적으로 Mobaxterm을 실행해준다. 세션을 만들고 세팅을 맞춰준다. 1) 세션세팅에서 리모트 호스트를 입력해준다.2) 폰트 캐릭터를 한글로 설정해준다 (폰트와 글자 크기는 취향껏)3) 북마크세팅에서 세션 이름을 설정해준다. 이렇게 되면 세팅은 마무리된다. 그러면 로그인 화면이 뜨는데 여기서..