본문 바로가기
728x90
반응형

분류 전체보기362

ㄴr는... 힘들 때... 어제 이어폰 충전기를 두고 가는 바람에 간밤 사이 배터리가 왕창 닳고 말았다. 일어나 확인해보니 6% 남은 배터리. 출근길에 다 꺼질까봐 조마조마하며 최대한 서둘러 회사로 향했다. 다행히 자리에 도착하자마자 운명을 달리한 이어폰. 퇴근 후 집에 돌아가면서 아직 갈 길이 정말정말 정말 멀다는 생각을 했다. 언제쯤 생각대로 챡챡, 한 번 했던 건 안 까먹고 챡챡 개발할 수 있을까. https://youtu.be/48kwYDv4ZYs 2021. 4. 7.
GitHub로 배포하기 GitHub는 Code 저장, 이전 상태 복구, 협업 이라는 전통적인(?) 기능뿐만 아니라... 우리가 만든 웹 페이지를 다른 사람들도 이용할 수 있도록 서버에 호스팅 하는 기능을 포함하고 있다! 제일 먼저 새로운 레포지토리 생성! (repository가 뭔디? 코드를 보관할 수 있는 저장소라고 생각하면 된다) 이때 주의해야 할 건...! 레포지토리의 이름을 .github.io 로 지정해줘야 한다는 점! 제대로 입력한 것 같으면 Create repository를 눌러주자. 와우! 여기서 uploading an existing file을 클릭. (올리고 싶은 파일이 있으니까!) 쨔잔. 여기서 드래그&드롭으로 올리고 싶은 파일을 넣어줘도 되고, choose your files를 클릭해 원하는 폴더로 이동한 .. 2021. 4. 6.
Props 전달 에러 해결 또 blog를 만드는 과정! Object가 담긴 Array인 data를 mapping 해 OnePost란 컴포넌트에 넣어줬다! 이를 통해 data Array 속 Object가 하나하나 돌면서 OnePost 안에 전달될 테다. 요놈이 하위 컴포넌트인 OnePost! props로 전달해준 blogData를 받아 비구조화 객체 할당을 통해 변수에 할당해줬다. 따라서 blogData 속 title이 화면에 뜰 테다! 오잉? 그런데 hi만 뜨고 {title}이 제대로 뜨지 않는다. Console에 찍어보니... 분명 존재하는 데이터인데 undefined가 뜬다. 대체 왤까? 문제는 바로 이 곳! 하위 컴포넌트에서 전달받은 props인 blogData는 JS 요소! 전달해줄 때도 { } 속에 넣었으니, 받을 때도 .. 2021. 4. 6.
돈으로 시간 사기 오늘은 누나야가 당직이라 먼저 일어나 나갈 채비를 했다. 덕분에 30분 정도 더 잘 수 있었다. 쿨쿨쿨. 개운하게 일어나 씻고 아침 먹고 집을 나섰다. 별다를 것 없는 월요일 아침이겠거니... 생각했는데, 으악. 바람이 어찌나 쌩쌩 불던지. 이대로 가다간 필시 감기에 들 것 같아 집에 들러 옷을 갈아입고 나왔다. 시계를 보니 8시 40분. 지하철을 타면 무조건 지각인 시간. 잠시 고민하다 오랜만에 택시를 타고 부산대로 향했다. 택시 기사님들은 PNU AVEC을 모르시기 때문에 장전동 새마을금고로 가달라 말씀드렸다. 그렇게 택시를 타고 우장춘대로를 지나는데... 학교 다닐 때 생각도 나고, 길가에 핀 꽃들도 이쁘고, 이어폰에서 흐르는 노래도 좋고, 의자도 푹신하고. 나도 모르게 마음이 여유로워졌다. 약 8.. 2021. 4. 5.
.map() is not a function 에러 해결 역시나 Blog Project를 진행하던 중... 우리의 친구 TypeError! 하도 많이 만나서 이제는 익숙하다. X.map() is not a function 에러는 → .map은 Array에 해당되는 함수! 따라서 X가 Array가 아닌 형태일때는 TypeError가 뜨고 만다. 즉 위 사진의 경우에는 data라는 녀석이 Array가 아닐 가능성이 오천퍼센트! data는 API 요청을 통해 받아온 값들을 map으로 return해 준 녀석이다. 전체 코드! 받아온 data 상태를 다시 mapping 해주면서 렌더링하고 있다. data를 console에 찍어보면 정체가 밝혀지겠지! 어...라라? Array 형태가 맞는데??? Array.map()을 했는데 왜 is not a function 에러가 뜬.. 2021. 4. 5.
CORS 에러 해결하기 React로 개발한 Frontend에서 DRF로 개발한 Blog Backend로 API 요청을 보내려 시도했다. 흔한 async await 요청. 혹시 몰라 Postman을 통해 직접 요청도 보내봤다. DRF Pagination을 적용했어서 next와 previous가 있긴 한데, 어쨋든 results 속에 우리가 원하는 데이터가 담겨있는 모습! 으악! 자세히 읽어보면 blocked by CORS policy → CORS 정책에 의해 막혔단다. 그럼 CORS 정책이 뭔디? 보안상의 이유로 브라우저는 교차 출처 HTTP 요청을 제한한다! 즉 한 API를 사용하는 웹 애플리케이션은 자신의 출처와 동일한 리소스만 불러올 수 있으며, 다른 출처의 리소스를 불러오려면 그 출처에서 올바른 CORS 헤더를 포함한 응.. 2021. 4. 5.
Web Service 기초 1. Web Service? 웹 서비스란 뭘까? 여러 대답이 가능하겠지만, 모든 설명은 다음과 같은 뿌리에서 출발한다. 바로... "우리는 웹 서비스로부터 원하는 정보를 얻는다!" 클라이언트가 이떠어떠한 정보를 제공해달라고 요청(Request)하면, 서버는 내부에 저장된 리소스들 중, 해당되는 정보를 담아 응답(Response)해주는 것이 전체적인 Web Service의 흐름. 즉 우리가 웹 서비스를 만든다!라고 말을 할 때, 여기에 숨겨진 뜻은... 이용자들의 요청을 처리할 수 있는 서버를 만드는 것!이라 할 수 있겠다. 와우! 그렇다면 이 때, 클라이언트의 요청과 서버의 응답을 통해 무엇이 오고 가는 걸까? → 요 녀석이 바로 HTML! 2. HTML 그럼 HTML은 또 뭘까. 우와! 간단히 말해 H.. 2021. 4. 4.
오예쓰 아무 감흥없이 먹던 과자. 문득 굉장히 기분 좋은 이름이란 생각이 들었다. Oh! Yes! 라니. 이런 저런 생각이 많았는데, 멋사 마치고 집에 돌아갈 때쯤에는 오히려 개운한 느낌이 들었다. 뭔가 이리저리 떠돌던 생각들이 하나로 정리된 듯한. 왜 그런가 생각해보니... 개인 노션에 그간 느꼈던 감정, 개선해야 할 점, 나아가야 할 방향 등을 글로 정리를 했는데 이게 굉장히 도움이 된 것 같다. 두루뭉실한 다짐들이 명확해지고, 중요하지 않은 걱정들이 걸러지고, 잊지 말아야 할 깨달음들이 선명히 새겨진 듯한 기분. 물론... 당장 내일의 내가 획기적으로 달라지지는 않겠지만 이렇게 조금씩 조금씩 쌓아나가다보면, 언젠가 뒤돌아 봤을 때 훌쩍(!) 큰 사람이 된 스스로를 기대해본다. 오예쓰! 2021. 4. 1.
기본 환경설정하기 1. VS code 비주얼 스튜디오 코드. 간단히 말해 코드 작성을 좀 더 용이하게 만들어주는 코드 편집기라 할 수 있다. 제일 먼저 Visual Studio 홈페이지에 접속! code.visualstudio.com/download Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and clo.. 2021. 3. 31.
728x90
반응형

티스토리툴바