🤍 은지log 🤍

💡 주소창에 주소를 입력했을 때의 흐름을 설명해주세요. 사용자가 브라우저의 주소창에 주소를 입력 브라우저에서 DNS 서버에 IP주소를 요청하고, DNS 서버에서 IP주소를 반환한다. 그후 브라우저에서 호스팅 서버에 IP주소를 요청하면 호스팅서버에서 HTTP를 요청하고 서버에서 HTTP를 응답 브라우저에서 렌더링이 일어나면서 화면이 보인다. 🔥 DNS(Domain Name System) 란? 웹사이트의 IP 주소와 도메인 주소를 이어주는 환경/시스템 : 웹사이트의 데이터가 저장되어 있는 호스팅 서버는 인터넷 회선이 연결된 컴퓨터/장치인지라 IP 주소가 할당되어 있고 이 주소가 실제 웹사이트 주소라 할 수 있다. DNS 서버는 이런 IP 주소를 특정 도메인 주소와 같다는 기록을 저장해두고, 인터넷 사용자들이..

form 필드에 value를 사용하면서 onChange 핸들러를 설정하지 않아 발생하는 에러 ✅ 해결방법 1. onChange 핸들러 설정 const onChange = () => { // onChange 이벤트 } 2. defaultValue 옵션 설정 : value 옵션을 defaultValue로 변경 3. readonly 옵션추가

React로 만든 프론트에서 axios를 통해 nodejs로 만든 api를 요청했더니 CORS 에러가 계속 발생했다. 분명 url로 들어가면 데이터를 잘 받아오는데, 왜 axios를 통해서 요청을 하게 되면 에러가 발생하는지 ..🤦🏻‍♀️ Access to fetch at 'http://localhost:8080/test' from orgin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response servers your needs, set the request's mode to 'n..

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? - Next/Link의 children으로 component를 줬을때 생기는 error 입니다. 이 코드에서 error가 발생했을시 , 1. component를 a tag로 감싸줍니다. // 수정된 코드 2. a태그를 styledComponents로 감싸주면 a tag의 lint error가 사라집니다. const CustomLink = styled.a``; // styled-components 부분 3. 공식문서의 주의사항을 참고하여 passHref를 추가해줍니다.

개인적으로는 GitHub , 사이드프로젝트 에서는 Gitea, 회사에서는 GitLab을 사용중이다. ...🫠 🍊 GitLab 이란 개인 또는 조직이 Git 레포지토리의 내부 관리를 제공하는 데 사용할 수 있는 Github로, 비공개된 Github 이다. 🍊 GitLab 사용이유 깃랩은 중앙 서버에서 git 저장소를 관리하는 방법이다. 레포지토리 또는 프로젝트를 완벽하게 제어할수 있으며, 공개 또는 비공개 여부를 무료로 결정할 수 있다. 🍓 GitLab (Clone,Checkout, Commit, Push ) 🍓 1. 소스 코드 Clone 하기 with HTTPS 소스코드가 들어있는 레포지토리에서 Clone -> Clone with HTTPS -> 복사한다. $ git clone https://gitlab..

최신순 오래된순 데이터를 오름차순(ASC)이나 내림차순(DESC)으로 정렬 : Default값은 Ascending(오름차순) // map 함수 앞 .sort((a: Type, b: Type) => sort === "asc" ? a.id - b.id : b.id - a.id, ) .map

🔆 Branch 생성 // only 브랜치 생성 git branch [Branch Name] // 생성과 전환 동시에 처리 git checkout -b [Branch Name] // 생성과 전환 동시에 처리 git switch -c [Branch Name] 🔆 Branch 전환 💡 switch 와 checkout 으로 전환할때, branch가 없으면 전환하지 못하기 때문에 위 브랜치 생성의 git checkout -b 와 git switch -c 로 브랜치 생성후 전환해야 한다. 아래 방법을 사용하는 경우는 이미 branch가 생성되어 있고 전환해야하는 경우에 사용한다. git switch [Branch Name] git checkout [Branch Name]

🔆 CLI, Command Line Interface Command Line으로 컴퓨터를 동작할 수 있는 환경, Command Line은 입력과 출력의 형태로 동작하며 모두 text 형태로 이루어져 있다. 🔆 CLI 요소 terminal : CLI를 제공하는 소프트웨어 또는 하드웨어, Window에서는 CDM이 있다. Shell : 사용자의 입력을 해석해주는 소프트웨어 Command prompt : 사용자의 입력을 대기하는 상태, 기본으로 $(Mac, Linux), 또는 >(Window)로 표시 된다. 🔆 CLI 명령어 현재 디렉토리 : pwd 디렉토리 (폴더) 삭제 : rm -r [폴더명] ( 🚨 del, rmdir 혹은 rm 을 사용하여 파일을 지울 경우, 복구할 수가 없습니다. 지워진 파일들을 영원..

여러 개의 레파지토리를 생성해야 하는 일이 생겼는데, 레파지토리 이름을 어떻게 지을 것인가에 대한 의문이 있었다. 그래서 검색을 해본것들을 요약해서 정리하자면 레파지토리 이름을 붙일 때 정해야 할 것은 크게 세가지가 있다. 1. 소문자 2. dash(hyphens) 3. 구체적으로 작성 리서치에 따르면 가장 많이 쓰이는 구분자는 하이픈(-)이다. 내 개인적인 생각으로도 소문자로만 나열하고 하이픈으로 구분한 것이 가독성이 가장 좋은 것 같다. 특히 이름이 길어지면 길어질수록 카멜케이스나 파스칼케이스는 읽기 어렵다. 예를 들어, 프로젝트명-프로젝트목표-언어 가 될 수도 있고, 프레임워크나, 팀에서 중요하게 생각하는 어떤 정보도 될 수 있다. 아래사진 참고

dependencies 와 devDependencies 는 설치 방법부터 다르다. dependencies 는 일반적인 npm install (라이브러리명)을 통해서 devDependencies 는 npm install (라이브러리명) --save-dev 혹은 npm install (라이브러리명) -D 로 설치하게 된다. dependencies 에는 애플리케이션 동작과 연관된것 devDependencies 에는 애플리케이션 동작과 직접적인 연관은 없지만, 이름 그대로 개발할 때 필요한 라이브러리를 설치하면 된다. 이렇게 구분해주는 이유는 결국 배포할 때 어떤 라이브러리가 포함되냐 인것인데, dependencies 에 설치된 라이브러리는 배포할 때 포함되지만 devDependencies 에 설치된 라이브러리..