'분류 전체보기' 카테고리의 글 목록 (21 Page)

2022.02.18· 개발/⛵ 항해99

👩🏻‍💻 Weekly I Learned 📚 ⭐1주차 미니 프로젝트 마무리 금요일 자정까지였던 미니 프로젝트를 마무리하느라. 4-5일은 진짜 새벽 3시에나 잠에 들 수가 있었다. 덕분에 TIL도 쓸 시간이 없었다. 모든게 마무리 된 지금 간단하게 프로젝트에 대한 회고를 해보려고 한다. 이렇게 몰아치듯이 한 프로젝트에서 뭘 얻을 수 있을까? 라는 생각을 해봤는데, 피드백 시간에 할 질문들을 준비하고 프로젝트에 내용을 문서화시키면서 팀원들과 함께 우리가 짠 코드를 볼 시간을 가졌었다. 서로가 짠 코드에 대한 이야기를 하고, 마지막까지 구현하지 못했던 코드에 대한 이야기를 할 시간을 가진 건 정말 좋았다. 한 프로젝트를 협업으로 끝마쳤다는 뿌듯함과 이런 코드를 내가 구현했다고?! 라는 감격과 여러가지 생각이 들..

[항해99] Day03. TIL – Key값을 찾아라! Github을 다룰 줄 알아야 진짜 협업이 시작된다!

2022.02.18· 개발/⛵ 항해99

본 포스팅은 지난 11월에 작성되었습니다 ⭐ 웹 스크래핑 팀 프로젝트로 서로 해야할 것 들을 나누면서 어쩐지 나도 모르게 메인 페이지와 상세페이지에 걸친 웹 스크래핑 작업을 하게되었다. 다들 해보고 싶은게 있다고 해서 도맡아하게 된 것인다. 그 동안 혼자 독학으로 해보지 못 한 것이여서 조금 둑흔둑흔했다 웹 스크래핑(web scraping)이란? 웹 사이트 상에서 원하는 부분에 위치한 정보를 컴퓨터로 하여금 자동으로 추출하여 수집하는 기술을 이야기한다. 그리고 이 용어와 유사한 느낌으로 쓰이는 단어가 웹 크롤링이다. 혼용해서 쓰고 있지만. 웹 크롤링(web crawling) 은 자동화 봇(bot)인 웹 클로러가 정해진 규칙에 따라 여러 개의 웹 페이지를 브라우징하는 것을 의미한다. 내가 한 것은 웹 스크..

[항해99] Day02. TIL – DB로 데이터 보내기 / 데이터 불러오기 / 검색 기능 추가

2022.02.18· 개발/⛵ 항해99

본 포스팅은 지난 11월에 업로드되었습니다 정보DB 만들기 우리 팀 프로젝트에는 유저db, 리뷰db, 정보db 총 3가지가 필요한데, 나는 그 중에 정보 db가 필요한 부분을 만들게 되서 하루의 계획을 DB 데이터를 긁어와서 보내는 것으로 시작했다. DB가 필요하다는 걸 머릿속으로 생각만 했지 기능 구현 계획을 짜다보니 우선 DB 먼저 만들어 두는게 여러모로 편할 것 같았다. 그리고 우리 팀 프로젝트의 기획이 제대로 될지 확인을 해야했기에 몽고DB로 보낼 데이터 웹 크롤링부터 했다. 나 포함 다른 팀원 한명도 같은 페이지의 기능을 구현하게 되면서 각자 같은 사이트의 웹 크롤링부터 해보기로 하고 2시간 정도 뒤에 다시 만나서 이야기를 나누기로 했는다. 우리 둘 다 다른 방법으로 db를 만들고 있었다. 물론..

[항해99] Day01. TIL – 미니 프로젝트 기획 / Jinja2 사용

2022.02.18· 개발/⛵ 항해99

본 포스팅은 지난 11월에 업로드되었습니다. ⭐ 1주차 프로젝트 : 전시 뭐하니? (전시회 리뷰 사이트) 와이어프레임 작성 ✔ 1주차 팀원들과 함께 고안된 아이디어를 체계화시키는 것으로 대부분의 시간을 보냈다. 내가 생각지 못한 아이디어와 기능부분들을 함께 생각해나가다보니 이미 그럴싸한 프로젝트가 탄생한 기분을 느꼈다. ⭐ 파이썬 jinja2 사용법 Jinja2 is a templating engine for Python. jinja는 python 프로그래밍 언어용 웹 템플릿 엔진이다. Flask로 웹서버를 구축하고, jinja2는 그 속에서 실재하는 어떤 파일에 어떤 변수를 집어넣어서 약간 변경시켜서 html로 만들어주는 엔진이라고 볼 수 있습니다. ajax를 통해서 데이터를 받아오던 것을 jinja2..

개발자가 되기로 결심한 이유

2022.02.18· 개발/📝 TIL

💡 커리어 전향의 이유 왜 커리어 전향을 해? 라는 궁금증이 아마도 내 이력서를 받아보시는 분들의 머릿속을 스쳐 지나갈 것 같다. 그래서 나는 상세히 그 이야기를 해볼까 한다. 물론, 이렇게 블로그에 구구절절 적어서 공개할 필요있을까? 하는 생각이 들지만 뭐 어떤가, 난 사람들과 내 이야기를 공유하는게 즐거운 사람이니깐 😊 한국을 떠나 영국으로! 이 때 나는 정말 많이 지쳐있었다. 다니고 있던 직장 내의 파벌 싸움에 등이 터지고 있었고, 일은 재미있었지만 견제 세력들과 위에서 가해지는 압박에 스트레스가 이만저만 아니고 건강도 점점 안 좋아졌었다. 의사는 병원을 너무 자주 찾는 나에게 한 달의 휴식을 권했고, 물론 회사에서 이를 받아 줄 이유가 없었다. 이렇게 지내다가는 내가 좋아하는 일조차도 오랫동안 할..

[항해99/4기] 00. WIL (사전준비)

2022.02.18· 개발/⛵ 항해99

본 포스트는 2021년 10월에 등록된 글입니다. 본격적인 항해에 참여하기 전에 사전준비라고 해서 꼭 들어야하는 강의들이 제공된다. 여러 강의 중 웹개발 종합반 강의는 꼭 듣고 참석해야한다고 강조 또 강조를 하시던 매니저님. 나는 완전 라스트미닛으로 4기에 참여하게되서 사전준비를 할 시간이 딱 5일 남아있었는데, 그것도 중간에 전산오류로 내가 4기에 참여를 못하게 되는 줄 알고 이틀정도 시간을 날렸었다. 우여곡절 끝에 참여하기로 마지막에 결정을 하였고, 급하게 강의를 보며 준비를 시작했다. 😊 (+추가) 왜인지 모르겠지만 사전준비 강의를 다 들었는데, 완주가 뜨지 않는다. …. ⭐ 웹개발 종합반 강의는 총 5주차로 준비되어있다. 1주차 – html,css,Bootstrap, Javascript(JQuer..

[React.Js] UseState 사용 / 간단한 리스트 만들고 지우기

2022.02.18· 개발/React

React.js를 쓸 때 정말 많이 쓰는 hook 중에 하나인 useState 기본 중의 기본입니다. 일단 hook이란 무엇이냐?! Hook은 특별한 함수입니다. 예를 들어 useState는 state를 함수 컴포넌트 안에서 사용할 수 있게 해줍니다. 다른 Hook들은 나중에 살펴봅시다! 함수 컴포넌트를 사용하던 중 state를 추가하고 싶을 때 클래스 컴포넌트로 바꾸곤 했을 겁니다. 하지만 이제 함수 컴포넌트 안에서 Hook을 이용하여 state를 사용할 수 있습니다. 사용 방법은 아주 간단하답니다. 아주 간단한 리스트를 만들면서 사용 방법을 알아보겠습니다 Birthday Reminder 라는 컨셉의 리스트를 한 번 만들어보겠습니다. 5명 가량의 사람 프로필이 필요해서 레드벨벳 멤버들 프로필 사진을 긁..

[React.Js] 리액트 AXIOS 사용하기 / API 데이터 Fetch하기

2022.02.18· 개발/React

자바스크립트에서 API를 연동하기 위해서는 보통 fetch API 를 사용한다. 리액트도 자바스크립트 라이브러리 중 하나이기때문에 fetch를 사용해서 API 데이터를 비동기 통신을 할 수 있다. 하지만 많은 사람들이 리액트를 쓸 땐 Axios를 더 많이 사용하는 것 같다. API데이터를 받아오기 위해서 axios를 써보자! #Axios 다운받기 1️⃣ cmd 혹은 코드에디터 터미널을 이요해서 axios를 다운받습니다 npm i axios 설치가 잘 되었는지 확인하고 싶다면 Package.json 을 클릭해보시면 확인하실 수 있어요. 안에 axios가 있다면 설치완료! 2️⃣코드를 쓰고 있는 파일에 import 해주기 axios를 쓸 곳에 꼭 import를 해줘야 쓸 수 있답니다 3️⃣axios를 쓰는데..

[React.Js] 리액트 Router 사용하기

2022.02.18· 개발/React

리액트로 간단한 게시판을 만들어보기로 했다. 이 게시판에 들어가는 기능 중에 하나가 정보를 추가하는 것이다. 추가하기 위해서 등록페이지를 따로 만들고 메인 페이지를 따로 만들어야해서 router을 써야했다. React Router 리액트는 SPA (Single Page Application) 방식으로써, 여러 개의 페이지를 사용하며, 새로운 페이지를 로드하는 기존의 MPA 방식과 달리 새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태를 가집니다. 그림처럼 하나의 html 파일에서 회원추가 페이지로 넘어가기 위해서 클릭시 html이 바뀌는게 아니라 회원추가.js로 데이터가 렌더링해오는 방식이 SPA입니다. 그리고 이걸 하기 위해서 react-router가 필요합니다.

[React.Js] 리액트 시작하기, Create-React-App

2022.02.17· 개발/React

JavaScript를 공부하면서 어느 정도 이해하기 시작했다는 생각이 들자 이것저것 프로젝트를 더 만들어보고, 더 쉽게 만들어보고 싶다는 생각이 들었다. 그렇게 리액트에도 손을 댔다. React(리액트)는 자바스크립트 라이브러리 중 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 페이스북 개발자들이 만든건데, 작년까지만 해도 굉장히 핫했는데, 요세는 또 다른게 핫하더라. 하지만 어쩔 수 없다 일단. 나는 리액트 배를 탔다. 사실 그냥 웹페이지는 HTML, CSS 만으로도 충분히 만들 수 있다. 하지만 페이지가 점점 늘어나고, 동적인 인터랙티브한 웹을 만들기 위해서는 자바스크립트가 필요하다. 게다가 요즘은 단순한 웹이 아니라, 모바일에서도 쓸 수 있는 유동적인 걸 좋아하다보니 이럴 때, 리액트가 정말 ..

Git Pull / Git Push 오류 (Fatal: Couldn’t Find Remote Ref Master)>> 해결방안 [빡침주의]

2022.02.17· 개발/❌ 오류 노트

이런 무슨….이제껀 git pull origin master / git push origin master로 잘 되어왔는데 뜬금없이 오류가 엄청 나서 또 30분가량 헤매었다. ……. 아니 …master가 언제 main 으로 바꼈슴꽈? 구글링을 해보니 2020년 10월쯤부터 바꼈다는데, … 몇 주 전에 올린 repository에 파일들 다 어떻게 올라간거임? 나 master로 올렸는데? 혼란하다 혼란해….. [오류 메세지] fatal: couldn’t find remote ref master [해결] git pull origin master 를 git pull origin main 으로 올려주시면 됩니다 git push origin master 를 git push origin main으로 올리시면 됩니다 –..

[Github 오류해결] Src Refspec Master Does Not Match Any 해결하기

2022.02.17· 개발/❌ 오류 노트

공부한 내용을 나중에 다시 찾아보기 위해서 사소한 것까지 깃헙에 올려두려는 편인데. 프로젝트를 깃허브로 push하는 도중에 갑자기 이런 오류가 떴다 error: src refspec master does not match any error: failed to push some refs to ‘https://github.com/repository’ 해결 방안을 찾기 위해서 구글링을 했다! 첫 번째 방안은. 다시 git init을 해서 push까지 진행하는 것! 하지만 이 방법으로 나는 해결을 보지 못 했다. 두 번째 방안은, git branch를 main 에서 master로 변경해주는 거다. 디폴트 값으로 진행되는 게 main은데 master가 브랜치가 생성되지 않아서 생긴 오류인 것이다. git push..

티스토리툴바