Jieunny의 블로그

📣 SPA 란? ✔️ 등장배경 ➰ 전통적인 웹사이트 : 사용자가 웹사이트 내의 다른 페이지로 이동하면, 매번 HTML 파일로 된 페이지 '전체'를 불러와야 했다. ➰ 이때마다 header, navigation bar 등 중복되는 요소들을 매번 불러오는 것은 서어와의 불필요한 트래픽을 발생 시켰다. ➰ 사용자 입장에서는 느린 반응성을 갖게 되었다. ✔️ SPA? ➰ Single Page Application ➰ 서버로부터 완전히 새로운 페이지를 불러오지 않고 페이지 갱신에 필요한 데이터만 받아 그 정보를 기준으로 현재의 페이지를 업데이트하는 웹 어플리케이션이나 웹 사이트 ✔️ 장점 ➰ 부분 데이터만 받아서 화면을 업데이트 하기 때문에 사용자의 행동에 빠르게 반응한다. ➰ 서버에서는 요청받은 데이터만 넘겨주..

➰ 37일차 오늘은 페어 활동이 너무 재밌었다😆 페어 활동하면서 대화 많이 한건 오랜만인 것 같구... 친해질 수 있는 분이 생겨서 신나는 하루 다음주 페어도 행복할 것 같다. 본격적으로 리액트 들어가게 되면 정신 없을 것 같으니까 미리미리 예습해놔야지 내일부터 4일 연휴.. 프로그램 시작하고 처음 있는 연휴다. 푹 쉬고, 그래도 양심상 공부는 좀 하고.. 어쨌든 신난다🎶

📣 리액트 ✔️ 프론트엔드 개발을 위한 JS 오픈소스 라이브러리 ✔️ 반드시 JSX를 사용해야 하는 건 아니다. 다만 문법적으로 가독성이 떨어지고 복잡해지는 단점이 있다. 📣 리액트의 특징 1️⃣ 선언형(Declarative) ➰ 한 페이지를 보여주기 위해 하나의 파일에 명시적으로 작성할 수 있게 JSX(HTML + JS)를 활용한 선언형 프로그래밍을 지향 ➰ HTML/ CSS/ JS 로 나눠 적을 필요가 없다. 2️⃣ 컴포넌트 기반(Component-Based) ➰ 컴포넌트 : 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 것 (구조와 동작에 대한 코드를 한 뭉치로 적은 코드셋) ➰ 컴포넌트는 서로 독립적이고, 재사용이 가능하므로 기능 자체에 집중하여 개발 가능하고 유지보수가 용이하다. 3️⃣ 범..

➰ 36일차 오늘 커리큘럼 어제 다 끝내놔서 코딩테스트 문제 풀고, 내일 할 리액트 스프린트 보고 이것저것 해봤다. 원래 CSS에 시간을 많이 들였었는데, CSS는 적당히 하고 그 시간에 내가 부족한 것들을 더 공부하는 게 나을 것 같다는 생각이 들어서 이제부터는 그럴 생각이다. 아직 본격적인 프로젝트를 하는 게 아니고, 미니 해커톤도 아니니 CSS보다는 기능에 신경쓰고, TS공부나 코테 공부를 할 생각! 리액트 배우기 시작하니까 재밌어지는 거 같다. 확실히 HTML, CSS만 쓸 때 보다는 복잡하지만 좀 더 멋진 페이지를 만들 수 있을 거 같은 느낌..? 코딩테스트도 전에는 너무 풀기 싫고 안풀리면 짜증나고 그랬는데 조금씩이라도 풀다보니 적응한건지 모르면 스트레스 받지 않고 찾아본다. 머리 싸매고 하는..

📣 fetch를 이용해 HTTP 요청을 보내고 응답 받아오기 ✔️ HTTP 요청 ➰ 클라이언트가 HTTP 프로토콜을 사용해 서버에 요청 보내는 것 1️⃣ basicChaining.js const newsURL = 'http://localhost:4999/data/latestNews'; const weatherURL = 'http://localhost:4999/data/weather'; function getNewsAndWeather() { // TODO: fetch을 이용해 작성합니다 // TODO: 여러개의 Promise를 then으로 연결하여 작성합니다 return fetch(newsURL) .then((response) => response.json()) .then((json1) => { retur..

📣 fs 모듈을 통해 비동기 구현하기 ✔️ fs.readFile("filename", [options], callback) ➰ "filename" 파일을 [options] 을 적용해 읽은 후 callback 함수를 실행한다. ➰ 파일을 비동기적으로 읽어올 수 있다. ➰ 두번째 인자를 "utf8" 로 명시하여 인코딩이 되도록 해줘야 한다. 1️⃣ callback.js const fs = require("fs"); const getDataFromFile = function (filePath, callback) { // TODO: fs.readFile을 이용해 작성합니다 fs.readFile(filePath, 'utf8', (err, data) => { if(err){ callback(err, null); }..