🥡오늘 한 것 - 블로깅마니했다 과연 영양가가 있는지 모르겠지만..? 하루에 개념 + 실습을 하는데 둘 다 적는게 맞는건지 모르겠다. 어젠 실습을 오늘은 개념을 블로깅해봤는데 개념이..더.. 나은거같기도... 개념을 적으면서? 예제로 ? 실습을 넣는다! 적으면서 해결했다 감사합니다. - 오늘 했던 실습을 바탕으로 클론코딩중인데 막상 처음부터 리액트를 쓰려니 헷갈린다 분명 더 간단한거같은데😟 계속 써보면서 손에 익히기! 🥡해야할 것 - 내일 당장 또 새로운 개념들을 배우는데 월요일 까지인거 보면 분명.. 대단한 건가본데... 얼른 리액트 라우터쓰는거 마저끝내기
상황 pages폴더 안에 있는 컴포넌트들을 app.js에서 import하는 과정에서 오류가 났다. 에러코드 Module not found: Error: You attempted to import ../pages/PT which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project's node_modules/. 원인 CRA에서 import로 엮인 파일들의 컴파일은 src 파일 안에서만 이뤄진다. You can either move it inside src/ pu..
SPA 전통적인 웹페이지에서는 한 부분만 바뀌더라도 페이지 전체를 로딩 했어야 했다. 웹사이트가 복잡해지면서 사용자와 상호작용이 더 빈번하게 일어나게 되었는데 그럴때마다 중복된 요소들을 매번 불러오는것이 서버와 불필요한 트래픽을 발생시켰다. 반면에 SPA에서는 화면에 필요한 데이터만 서버에서 전달받아서 브라우저에 해당하는 부분만 업데이트 하는 방식으로 작동한다. Sounds Great! However! 🥝 SPA 단점 1. 로딩하는데 오래걸린다. html은 화면로딩시에 script태그로 javascript를 받아오는데 이때 대부분의 코드가 javascript에 들어있으니 무거워져서 로딩하는데 시간이 걸린다. 2. 최적화가 어려워진다. 검색로봇이 웹페이지에 있는 정보수집, 분석해서 인덱스에 저장하고 사용자..
🏋🏽문제 문자열을 입력받아 해당 문자열에 등장하는 두 칸의 공백을 모두 한 칸의 공백으로 바꾼 문자열을 리턴해야 합니다. 🔍나의 풀이 어제와 비슷한 패턴이었는데 '조건에 맞는 경우에만 추가해줘라'라고 깔끔하게 작성하고싶었으나 계속 복잡해져서 결국 continue를 썼다. 1. 빈 문자열일경우 빈 문자열 리턴하고 2. 반복문을 돌려서 i번째 자신이 빈 문자열이고 && i-1번째 역시 빈 문자열이면 무시 3. 아니라면 결과값에 추가하라 🔍레퍼런스 풀이 1. 전 문자열이 공백이 아니거나, 현재문자열이 공백이 아니라면 추가하라 2. 아닐경우 전 문자열에 공백을 추가한다 3. 다음 반복문에서 또 전 문자열이 공백인지 확인 후 추가하거나 무시하게된다. 나의 풀이랑 비슷한 패턴같아서 오늘은 정말로 참고만...!
🫒오늘 한 일 - 블로깅을 세개 했다! 데일리코딩, 리액트과제, TIL - 애플코딩님 리액트강의 이벤트.. 넘 신기하고 짜릿해..... 간단한 과제만 했는데 다른것도 시도해보고싶다! 🫒해야할 일 - JSX쓰는 방법이 아직 낯설다! 강의 들으면서 만들어보고싶은거 하나씩 꼭 만들어보기 - 요즘 너무너무너무너무 피곤하다 :( 심각 수준 영양제 잘 챙겨먹고 아침 산책 다시나가기!!
과거 리액트란 무엇인가... 의 문만 열어본 자로써 전날 밤 유튜브 강의 몇 개를 보고 오늘 바로 리액트 과제를 받았다. 다행히 아주아주 기초적인 부분을 다루는 과제라서 다행이었지만 앞으로의 나날들이,,,,,,, 어지럽다! 😊 일단 완성해야하는 화면은 이렇게 생겼다. 각각의 컴포넌트를 완성하고 구성해 주면 된다. 1. sidebar 컴포넌트 구현 - Font Awesome라이브러리를 사용해서 아이콘을 만들어준다. - jsx는 class역할을 하는 어트리뷰트 이름이 className이다. 2. Counter 컴포넌트 - dummydata로 전달되는 트윗의 개수를 total 값에 입력을 해줘야 한다. - react에서 데이터는 항상 {중괄호} 안에 있어야 한다. 3. footer 컴포넌트 - 웹페이지 하단을..
🏋🏽 문제 2차원 배열(배열을 요소로 갖는 배열)을 입력받아 각 배열을 이용해 만든 객체를 리턴 🔍 첫 번째 풀이 function convertListToObject(arr) { if (arr.length === 1 && arr[0].length === 0) return {} //빈배열은 빈객체로 리턴 let obj = {}; for (let i = 0; i < arr.length; i++) { if(arr[i].length === 0 || arr[i][0] in obj ){ continue; //배열안의 요소의 요소가 비거나 이미 요소의 첫번째 값이 배열의 키로 들어가있다면 무시해라 }else { obj[arr[i][0]] = arr[i][1]; // {"배열의 첫번째 요소":"배열의 두번째 요소"} ..
//이부분이 어떠한 이유로 자동으로 생성되어서 테스트에서 자꾸 오류가 났었다 // const { response } = require("express"); const newsURL = "http://localhost:4999/data/latestNews"; const weatherURL = "http://localhost:4999/data/weather"; function getNewsAndWeather() { // TODO: fetch을 이용해 작성합니다 // TODO: 여러개의 Promise를 then으로 연결하여 작성합니다 //입력: url * 2 //출력 : {news:[{},{},{}],} let obj = {}; //빈 객체를 만들어서 나중에 값을 넣어준다. return ( fetch(news..
🍅오늘 한 일 - 비동기, 프로미스 영어프레젠테이션을 했다! - 리액트 맛보기를 했다 🍅알게된 점 - Promise의 pending 상태에 대해 헷갈렸었다. 비동기처리를 시작하기전인지 진행중인지 단순히 resolve, reject 메소드를 안적어줬을 뿐인지 스터디원분이 질문 안해줬으면 얼렁뚱땅넘어갔을 것이다. Promise의 state는 오직 resolve, reject 메소드만이 바꿀 수 있으며 한번 fulfilled 혹은 rejected 상태가 되면 돌아갈 수 없다. 또한 pending 상태가 아니라면 settled 상태이다. settled는 fulfilled 와 rejected상태를 의미한다. 프로미스 상태 정보 의미 변경 조건 pending 비동기 처리가 아직 수행되지 않은 상태 프로미스 생성 직..
🍅동기와 비동기 실행 요청을 하고 결과를 기다리는 주체가 누구인가에 따라 동기, 비동기로 나뉜다. 동기는 요청을 한 주체가 결과를 받고 비동기는 요청을 한 주체가 아닌 다른 주체가 결과를 받는 것이다. from 냠냠맨 - 이부분은 실행컨텍스트를 공부하고 나면 이해할 수 있는 부분이라 가볍게 상기 시키고 넘어가 본다. 동기처리 : 특정 코드의 실행이 완료될 때까지 기다리고 난 후 다음코드를 실행하는 것 비동기처리 : 특정 코드의 실행이 완료될때까지 기다리지 않고 다음 코드를 실행하는것 - 여기서도 블로킹/논블로킹 개념이 있으나 실행컨텍스트 이해가 필요하다 동기 처리는 실행순서가 보장되지만 속도가 느리고 비동기 처리는 속도가 빠르지만 실행순서가 보장되지 않는다. console.log("바로 나타났으면 좋겠당..
