'개발/⛵ 항해99' 카테고리의 글 목록 (4 Page)

2022.02.19· 개발/⛵ 항해99

👩🏻‍💻 Today I Learned 📚 ✨ 데이터 바이딩이란? 두 데이터 혹은 정보의 소스를 일치시키는 기법으로, 화면에 보이는 데이터와 브라우저 메모리에 있는 데이터(여러개의 자바스크립트 객체)를 일치시키는 것을 말한다. 예를 들어, MVC 모델에서 model과 view를 서로 묶어 model과 view의 “자동 동기화” 시키기 라고 이해할 수 있다 ✨ 양방향 데이터 바인딩 양방향 바인딩이란, 자식 컴포넌트에서 발생하는 이벤트를 감지하는 바인딩과 자식 컴포넌트에 데이터를 전달하는 프로퍼티 바인딩이 결합된 형태를 말한다. 장점 : 데이터를 직접 렌더링 해줄 필요가 없기 때문에 그와 관련한 코드가 필요 없어져서 코드가 짧아진다. ⇒ 양방향 데이터 바인딩은 데이터의 변경을 프레임워크에서 감지하고 있다가, ..

[항해99] Day22. TIL – Redux를 사용하는 것과 Context API 사용의 차이점

2022.02.19· 개발/⛵ 항해99

👩🏻‍💻 Today I Learned 📚 ✨ Redux – Middleware vs Context API 미들웨어 Redux 에는 미들웨어(Middleware)라는 개념이 존재합니다. 리덕스로 상태 관리를 할 때에는 우리가 [userReducer] 를 사용해볼 때 접했던 개념인 reducer 함수를 사용합니다. 리덕스의 미들웨어를 사용하면 액션 객체가 리듀서에서 처리되기 전에 우리가 원하는 작업들을 수행 할 수 있습니다. 예를 들자면.. -특정 조건에 따라 액션이 무시되게 만들 수 있습니다. -액션을 콘솔에 출력하거나, 서버쪽에 로깅을 할 수 있습니다. -액션이 디스패치 됐을 때 이를 수정해서 리듀서에게 전달되도록 할 수 있습니다. -특정 액션이 발생했을 때 이에 기반하여 다른 액션이 발생되도록 할 수 ..

[항해99] Day16. TIL – React(리액트) 에서 JSX 배열 반복문 / React – Router v6 변화

2022.02.19· 개발/⛵ 항해99

⭐ React(리액트) 에서 배열 반복문 쓰기 이번 주에 주어진 개인 과제를 하기 위해서 코드를 썼는데, 공부할 때는 술술술 적히던 코드가 갑자기 꽉! 막혔다. 바로 배열 때문이였는데, return () 안에서 for문을 불러 낼 수 있나, 없나에 대한 의문과 늘 상 map()으로만 반복문을 만들어내던 버릇으로 한참을 헤매였다. 일단, 못 불러낸다! ㅎ 역시나 기억에 없었던 이유가 확실하게 있었다. for문 자체를 return () 값 안에서 불러낼 수 없지만 함수로 위에서 쓰고 JSX를 반환하는 함수로 호출을 할 순 있다! 개인 과제로 만들고 있는 일주일 평점을 주는 프로젝트인데, 앞선 메인 페이지에 뜨는 평점이 들어가 있는 부분은 랜덤 숫자를 뽑아서 💜🤍 이모티콘을 이용해서 만들었다. 이 때 랜덤으로..

[항해99] Day15. TIL – 주특기 입문시작 / 라이프 사이클이란?

2022.02.18· 개발/⛵ 항해99

👩🏻‍💻 Today I Learned 📚 ⭐라이프 사이클이란? 라이프 사이클을 이야기 하기 전에 ‘리액트’의 특징적인 부분을 먼저 이야기 해야합니다. 리액트는 컴포넌트를 기반으로 하는 View 중심의 자바스크립트의 라이브러리입니다. html단위 하나하나를 객체로 생각하는 DOM은 여러가지 하위 값을 가지고 있습니다. 이걸 트리 구조라고 합니다. 이 때 트리 중 하나가 수정될 때마다 모든 DOM을 뒤지고 수정할 걸 찾고 수정한다면 불필요한 연산들이 엄청 많이 일어납니다. 리액트는 이 부분의 보안할 수 있는데요. 이게 가상DOM이라는 것입니다. 기존 DOM과 어떤 행동 후 새로 업뎃된 부분이 가상DOM에 표현되고 두 가지를 비교해서 수정된 부분은 바꿔줍니다. 그러면 불필요한 연산들이 일어날 필요가 없겠죠? ..

[항해99] Week02. WIL – ECMAScript, ES란? ES5/ES6 문법 차이

2022.02.18· 개발/⛵ 항해99

👩🏻‍💻 Weeky I Learned 📚 ⭐ ECMAScript 란? JavaScript를 공부하다보면 ECMAScript 라는 단어를 한번쯤은 보게 될 겁니다. 두 용어가 믹스되어서 사용되기 때문에 헷갈리기 쉽습니다. 오늘 그 두 가지 용어의 차이를 알아보려고 합니다. ECMA 인터내셔널 👉🏻 정보 통신에 대한 표준을 제정하는 비영리 표준화 기구입니다 브라우저가 생겨나고 서로 사용자를 끌어내기 위해 혼란스러울 시기에 MS의 IE가 JScript 라는 이름으로 자바스크립을 더해서 만들어냅니다. 이 때 이미 Javascript는 존재하고 있었는데 두 가지의 스크립트는 시간이 흐를수록 달라져가고 더욱 혼란을 가중하자 ECMA 인터내셔널에서 이런 스크립트 언어에 대한 표준을 내리게 됩니다. 이 뿐만 아니라 다..

[항해99] Day10. TIL – 알고리즘 공부는 습관이다 / 망한 하루

2022.02.18· 개발/⛵ 항해99

👩🏻‍💻 Today I Learned 📚 ⭐ 알고리즘 공부는 양인 것 같다 알고리즘 공부는 꾸준해야 한다는 걸 한번 더 깨달았다. 하면 할 수록 사고의 방식이 다양해지는 것 같고. 확실히 알고리즘 문제를 풀 때에는 단순히 머리로만 생각만 하는게 아니라 노트에 간단히 그림을 그리거나 생각을 적어 내려가면서 하는 것이 훨씬 빨리 풀 수 있다는 점도 깨달았다. 노트에 적어 내려가다 보면 안 풀리던 것도 뭔가 잘 보이는 느낌이 든다. 오늘 로또 관련 문제를 푸는데 1시간 이상이 걸렸지만 결국은 풀어냈고, note taking 도 엄청 많이 했다. ⭐ 소통의 방식 이런 문제를 2주차에 겪게 될 지 몰랐는데, 불만이 있다면 매니저에게 이야기를 해서 풀어 나가야 할 문제인거 같은데, 이걸 그렇게 모두가 보는 앞에서 ..

[항해99] Day09. TIL – For문에서 Filter로 가는 과도기 (For문, Filter() 공부)

2022.02.18· 개발/⛵ 항해99

👩🏻‍💻 Today I Learned 📚 ⭐ 배열이 나타났다하면 생각나는 for문 다양한 알고리즘 문제를 부여받았고, 하나씩 풀어보고 있는데 배열로 하는 문제만 나왔다하면 자연스레 for문을 쓰고 있다. 이제 지겹기까지한 for문. 문제에 따라서 다르겠지만 어떤 문제는 for문을 쓰면 효율적이기도하다. 하지만 이제 내장함수를 사용해서 풀 수 있는 문제는 써서 풀고 싶은데 오류가 계속 나니깐, 내장함수 때문인건지, 오타가 있는건지, 내가 쓰는 함수에 확신이 없어서 계속해서 회피만 하게 된다. 오늘 함께 공부하는 팀원 중 한 분이 reduce() 라는 메서드에 대해서 설명해줄 수 있겠냐고 물어보셔서 따로 검색을 해봤었다. reduce()함수는 그저 배열의 요소의 전체 합산을 구하거나, 최고값을 구할 때 썼는..

[항해99] Day08. TIL – 2주차 알고리즘 공부 시작!

2022.02.18· 개발/⛵ 항해99

👩🏻‍💻 Today I Learned 📚 ⭐ 새로운 주 -! 새로운 팀원들! 새로운 주가 시작되었다. 이번 주는 주특기 들어가기 전에 기초적인 공부를 하는 주간으로 주특기로 ‘리액트’를 선택한 내가 자바스크립 문법을 다질 수 있는 주이기도 하다. 이미 제공받은 수업들은 본 상황이고 가지고 있던 모던 자바스크립트 책을 이번주에 독파해야겠다는 생각이 들었다. 새로운 팀을 부여받고, 나는 이 팀의 팀장이 되었다! 뭐랄까, 지난 주 미니 프로젝트하면서 시간 분배라던가, 흐름도를 머릿속으로 그리는 역할을 했었는데 (팀장도 아니였지만) .. 이번엔 진짜로 그래야하는 상황이 왔다. 새로 만난 팀원들과 간단한 자기소개도 없이 이것저것 계획을 이야기했던 나 .. ㅎ 성격이 급해가지고 이거원 ㅎ ⭐알고리즘 격파! 항해99..

[항해99] Week01. WIL 휘몰아쳤던 프로젝트 마무리 / 피드백

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..

티스토리툴바