Today Hailie Learned

미션! 클라이언트의 액션(버튼 클릭)에 따라 각기 다른 HTTP 요청을 서버로 보내고, HTTP 요청에 담아 보낸 단어를 소문자 또는 대문자로 응답을 받아 화면에 보여 주기! 스터디 시간에 정답 코드를 봤기 때문에 자신 있게 도전했지만 풀리지 않았다.. 정말 코드에는 문제가 없었다. 그래서 여기저기 코드를 다시 보고, 끝내는 깃 클론을 다시 해와서 새로운 파일에서 코드를 작성했는데도 실행이 안됐다. 10시가 넘어서 같이 풀었던 페어에게 연락이 왔다. 그때까지만 해도 스터디에서 정답인 코드를 봤기 때문에 금방 해결할 수 있을 것 같다고 했는데 안됐다. 두시간이 넘도록 들여다봤는데도 도저히 해결책을 못찾겠어서 너무 답답했지만, 이대로 잘 수는 없었다!!! 그래서 정말 지푸라기라도 붙잡는 심정으로 디스코드에 ..

저의 default 브라우저 설정은 safari였습니다. 그런데 콘솔창을 볼 때나, 다른 작업을 할 때 chrome 브라우저가 훨씬 좋았습니다. 그래서 지금까지 복사 & 붙여넣기 또는 클릭을 하는 등 굉장히 비효율적인 방법으로 chrome 브라우저로 창을 띄웠는데 더이상 참을 수 없어서 visual studio code의 기본 브라우저 설정을 바꿔보았습니다. 1. vs code에서 톱니바퀴를 누르고, 설정에 들어갑니다. 2. browser 라고 검색한 뒤, Open-in-brower: Default 값을 chrome으로 적어둡니다. 3. 끝!! 정말 쉽고 간단해서 이제부터 더 빠르고 효율적으로 코딩 공부할 수 있게 되었어요!

SOP란? SOP은 Same-Origin Policy의 줄임말로, 동일 출처 정책을 말한다. https://shinystarforever.tistory.com:443 https:// => 프로토콜 shinystarforever.tistory.com => 호스트 443 => 포트 출처(origin)는 프로토콜, 호스트, 포트의 조합으로 되어있고, 이 중 하나라도 다르면 동일한 출처로 보지 않는다. **알아두기** http 프로토콜의 기본 포트는 80 https 프로토콜의 기본 포트는 443 SOP은 애초에 다른 사이트와의 리소스 공유를 제한하기 때문에 로그인 정보가 타 사이트의 코드에 의해서 새어나가는 것을 방지할 수 있다. => 이러한 보안상 이점 때문에 SOP은 모든 브라우저에서 기본적으로 사용하고..

next.js라는 서버사이드 렌더링 프레인 워크로 만들어진 파일을 Create React App를 사용했을때와 같이 'npm start' 명령어로 브라우저를 여는데 위 화면과 같은 오류를 만났습니다. Port 3000 is alreay in use. Create React App를 사용했다면 자동으로 다른 포트로 연결을 해주었지만, next.js는 저 문구만 나오고 더 이상의 진전이 없었는데요! 그래서 구글링 고고!! 맥북 터미널 창을 열고, 아래와 같은 명령어를 입력했습니다. STEP 1. sudo lsof -i :포트번호 ➥ 저의 경우는 3000 포트를 찾고 싶어서 sudo lsof -i :3000을 입력했습니다. ⭐️⭐️⭐️여기서 sudo를 안쓰면 완전히 kill 한게 아니기 때문에 꼭 sudo를 ..

방법 1. export default를 써주고 import로 받기 예시 - 내보낼 파일 const person = { name:'Max' } export default person 예시 - 받을 파일 (정확한 이름을 써주지 않아도 된다) import person from './person.js' import prs from './person.js' 방법 2. export만 써주고 중괄호 써서 import하기. (파일 안에서 정의된 정확한 이름 사용) 예시1 - 내보낼 파일 const person = { name:'Max' } 예시1 - 받을 파일 import {person} from './person.js' 한 문장으로 작성도 가능하다. 예시2 - 내보낼 파일 export const clean = () ..

1. reduce 사용하기 // For large data, it's better to use reduce. Supose arr has a large data in this case: const arr = [1, 5, 3, 5, 2]; const max = arr.reduce((a, b) => { return Math.max(a, b) }); // console.log(max); // 5 2. Math.max.apply 사용하기 // For arrays with relatively few elements you can use apply: const arr = [1, 5, 3, 5, 2]; const max = Math.max.apply(null, arr); //console.log(max); //5 3...

API의 대표적인 아키텍처인 REST API 어떻게 요청과 응답을 하는 것이 바람직한 방법인가? 👇👇 REST API “Representational State Transfer”의 약자 웹에서 사용되는 데이터나 자원(Resource)을 HTTP URI로 표현하고, HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식을 말한다. HTTP 프로토콜을 기반으로 요청과 응답에 따라 리소스를 주고받기 위해서는 알아보기 쉽고 잘 작성된 메뉴판이 필요한데, 이 역할을 API가 수행해야 하므로 모두가 잘 알아볼 수 있도록 작성하는 것이 중요하다. 로이 필딩 (Roy Fielding)의 박사학위 논문에서 웹(http)의 장점을 최대한 활용할 수 있는 아키텍처로써 처음 소개되었다. REST API를 디자인하는 방법 레오나..

SSR(Server Side Rendering) 웹 페이지를 브라우저에서 렌더링하는 대신에 서버에서 렌더링한다. 브라우저가 서버의 URI로 GET 요청을 보내면, 서버는 정해진 웹 페이지 파일을 브라우저로 전송한다. 그리고 서버의 웹 페이지가 브라우저에 도착하면 완전히 렌더링된다. 서버에서 웹 페이지를 브라우저로 보내기 전에 서버에서 완전히 렌더링했기 때문에 Server Side Rendering 이라고 한다. ✔️ 웹 페이지의 내용에 데이터베이스의 데이터가 필요한 경우, 서버는 데이터베이스의 데이터를 불러온 다음, 웹 페이지를 완전히 렌더링 된 페이지로 변환한 후에 브라우저에 응답으로 보낸다. ✔️ 웹 페이지를 살펴보던 사용자가, 브라우저의 다른 경로로 이동하면 브라우저가 다른 경로로 이동할 때마다 서..

웹페이지에서 일부분만 바꾸고 싶다면 AJAX를 사용한다. AJAX 란? AJAX는 Asynchronous JavaScript And XMLHttpRequest의 약자로, JavaScript, DOM, Fetch, XMLHttpRequest, HTML 등의 다양한 기술을 사용하는 웹 개발 기법이다. AJAX의 가장 큰 특징은, 웹 페이지에 필요한 부분에 필요한 데이터만 비동기적으로 받아와 화면에 그려낼 수 있다는 것이다. 예를들어 1, 구글 홈페이지에서 검색창의 경우, 유저가 검색창에 한 글자씩 입력할 때마다, 해당 글자로 시작하는 단어들을 서버로부터 받아와, 추천 검색어로 보여준다. 예를들어 2, 무한 스크롤이 발생할 때마다 Fetch를 통해 데이터를 가져와서 업데이트하고 렌더링하기 예를들어 3, 네이버..