Today Hailie Learned

URL은 서버가 제공되는 환경에 존재하는 파일의 위치를 나타낸다. CLI 환경에서 폴더와 파일의 위치를 찾아 이동하듯이, 슬래시(/)를 이용해 서버의 폴더에 진입하거나 파일을 요청할 수 있다. # username에는 사용자 이름 입력하기 # Ubuntu: file://127.0.0.1/home/username/Desktop/ # macOS: file://127.0.0.1/Users/username/Desktop/ ➥ 크롬 브라우저에 입력하면, 브라우저로 PC의 폴더와 파일을 탐색할 수 있다. URL은 Uniform Resource Locator의 줄임말로, 네트워크 상에서 웹 페이지, 이미지, 동영상 등의 파일이 위치한 정보를 나타낸다. URL은 scheme, hosts, url-path로 구분할 수 있..

클라이언트 - 서버 아키텍처(2티어 아키텍처) // Client Server Architecture (2 Tier Architecture) 상품 정보를 인터넷 어딘가에 존재하는 서버로부터 받아온다. 🤔만약 서버가 따로 존재하지 않고, 전부 앱 안에 담겨 있다면? ➥ 끊임없이 앱을 업데이트해야한다. 앱을 사용하는 사람들에게 상품 정보를 실시간으로 전달하기 어렵다. 또한 결제도 불가! (결제도 은행 서버와 연결해서 하는거니까) 상품 정보 같은 리소스가 존재하는 곳과 리소스를 사용하는 앱을 분리시킨 것을 2티어 아키텍쳐 / 클라이언트-서버 아키텍처라고 부른다. 리소스를 사용하는 앱이 클라이언트, 리소스를 제공하는 곳은 서버 서버는 리소스를 전달만 해주고, 리소스를 저장하는 공간이 따로 있다. 여기가 바로 데이..

🙃오류 메세지 ~ contains an input of type text with both value and defaultValue props. 👇 오류난 코드 const [username, setUsername] = useState('parkhacker'); 😄오류 해결 방법 ➥ 와 는 defaultChecked를 지원하고 와 는 defaultValue를 지원한다고 한다. 그래서 위의 defaultValue 값을 주석처리 해서 오류를 해결했다. (state의 초기값으로 원하는 값을 설정해줘서 문제 없다고 판단했다. ) 👇 오류 해결한 코드 const [username, setUsername] = useState('parkhacker'); 참고한 사이트 https://ko.reactjs.org/docs/..

👇 오류난 코드 {/* TODO : 하나의 트윗이 아니라, 주어진 트윗 목록(dummyTweets) 갯수에 맞게 보여줘야 합니다. */} {newTweet.map((tweet) => { return ; })} 주어진 트윗 목록인 dummyTweets에는 고유한 id값이 있어서 key값에 tweet.id를 설정했지만, 속성이 모든 개체에서 고유하지 않다고 오류가 났다. id라는 고유한 값이 있어서 문제가 없을거라고 생각했지만, 왜인지 모르게 오류가 났다. 😄오류해결 방법 map() 화살표 함수에 두 번째 매개변수인 index 를 사용하는 것이다. 👇 해결한 코드 {/* TODO : 하나의 트윗이 아니라, 주어진 트윗 목록(dummyTweets) 갯수에 맞게 보여줘야 합니다. */} {newTweet.map..

React에서 데이터를 다루는 두 가지 방법인 State와 Props State와 Props 차이 Props: 외부로부터 전달받은 값 (인자와 같이 넘겨받을 수 있다.) 함부로 변경될 수 없는 읽기 전용(read-only) 객체 State: 컴포넌트 내부에서 변화하는 값 어떤 것이 State와 Props에 적합할까? 이름 / Props 성별 / Props 나이 / State (매년 바뀜) 현재 사는 곳 / State (이사할때마다 바뀜) 취업 여부 / State (내 상태에 따라 바뀜) 결혼/ 연애 여부 / State (내 상태에 따라 바뀜) Toggle Switch / State (스위치를 on/off 여부에 따라 바뀜 // isOn:true, isOn:false) Props의 특징 - 컴포넌..

컴포넌트 나누는 것에 대해 왜 고민이 필요한가요?? ➥ 애플리케이션 안에서 다뤄지는 데이터를 컴포넌트들끼리 보다 유기적으로 주고받을 수 있도록 설계해야 하기 때문에 React를 이용해 어떻게 애플리케이션을 만들지 설계를 한다면 페이지를 만들기 전에, 어떤 컴포넌트를 만들고 이들을 조합할지부터 구상할 계획을 짜야한다!! SPA는 하나의 페이지를 가지고 있지만, 한 종류의 화면만 사용하지 않는다. WHY? 🤔 페이지 안의 버튼을 누르면 각 버튼에 대한 페이지 화면이 필요하니까! 또한 이 화면에 따라 '주소'도 달라진다! 라우팅(Routing) = 다른 주소에 따라 다른 뷰를 보여주는 과정 / 경로에 따라 변경한다. BUT😬 React 자체에는 이 기능이 내장되어 있지 않다. 그래서 우리가 직접 주소마다 다른..

=> 위의 .DS_store과 위 사진에는 없는 test.md파일이 말썽을 피웠다. 🤔문제 사항 깃헙 main 브런치에 공부한 내용을 내 브런치에 push 후, main 브런치에 merge를 해야한다. 그런데 어느날부터인지 pull, switch, add, commit, push시 .DS_store, test.md파일이 지속적으로 문제를 일으키고 있었다. 그리고 대부분은 위의 에러코드처럼 아래 파일이 덮여쓰인다고 변경되는 내용을 commit하거나 stash 하라고 오류창이 계속 떴다. 그런데 문제는 commit하거나 stash을 해도 해결되지 않는다는 점이였다!!! 🤔 해결 방법 내 브랜치에서 문제가 되는 폴더에서 .DS_Store와 test.md 파일을 제거하고 메인 폴더에서 .DS_store와 tes..

🤔nvm이란? nvm(Node Version Manager)= Node.js 를 설치하는 툴이자, Node.js의 다양한 버전을 관리하는 프로그램 (Node.js의 다양한 버전을 쉽게 설치할 수 있다. ) nvm을 왜 쓰지? OS에 특정 버젼의 Node.js 를 설치하면, 여러 버전의 Node.js 를 설치해야 할 경우에 대응을 할 수가 없게 된다. 그렇기 때문에 먼저 nvm 을 설치하고, 설치한 nvm 을 통하여 원하는 특정 버젼의 Node.js 를 원하는 조건에 따라 복수로 설치하는 방법이 나중을 위해서는 더 좋은 방법이 된다. ⭕️ nvm 설치 후 ➝ Node.js 설치 후➝ npm 설치! 🤔npm이란? npm(Node Package Manager) = Node.js 로 개발된 프로그램을(npm 패..

깃헙에서 포크를 하고, 클론을 해오고, 클론해온 파일을 VS Code로 실행할 때 엄청나게 간단하고 멋있는 방법을 알게 되었다! 페어 활동으로 만났던 분이 터미널에서 간단한 명령어로 바로 VS Code로 실행하는 것을 보고 바로 물어보았다. 👇 명령어 code . 다른 엄청난 설정이 있는게 아니고 그냥 구글링하는 정보로 정말 간단하게 설정할 수 있다는 정보를 얻게 되었고, 블로그에 남기고자 한다. step 1. VS Code를 실행한다. step 2. 셀 명령을 연다. (Shell Command) 단축키 = shift cmd p (⇧⌘P ) step 3. 바로 아래 뜨는 "Shell Command: Install ‘code’ command in PATH"를 클릭한다. 끝!!! 👇 클릭만 하면 아래와 같이..

Node는 무엇일까? JavaScript의 런타임이다. 우리는 JavaScript을 따로 설치하지 않는다. 대신 일정한 사양을 갖추어야 한다. ECMAScript 사양을 갖추면 브라우저가 JavaScript를 실행한다! 오랫동안 브라우저는 JavaScript를 작성하고 실행할 수 있는 유일한 장소였다. 그래서 JavaScript는 웹 애플리케이션에 적합하다. Node는 브라우저 밖에서 작동되는 JavaScript의 실행 환경이다. 이제 JavaScript 코드를 브라우저를 열지 않고, 심지어 브라우저가 없어도 실행할 수 있다. (그렇다고 똑같은 일을 할 수 있는 건 아니다. ) (-> 브라우저가 없으면 문서 객체 모델을 쓸 수 없고, 사용자의 입력, 이벤트 등을 사용할 수 없다. ) 그래도 Node는 정..