Daily 177

22.06.24_TIL

📌 습하고 눅눅하던 목요일이 지나고 맑은 하루를 졸린눈으로 시작했습니다🥲 새벽까지 새로운 리액트 강의를 들었는데 내용이 너무 좋아서 시간 가는줄 모르고 들었습니다. 강의는 유데미의 'React 완벽가이드'라는 제목의 외국 강사분께서 강의하는 내용이었는데 리액트를 사용하는 이유부터 차근차근 설명해주시고 내용이 리액트에 대한 내용이 깊이있어서 천천히 학습 할 수 있었습니다. 또, 이번에 진행했던 express 서버를 구현해서 리액트를 이용한 crud를 프로젝트에 fetch를 해서 실제 서버에서 API 데이터를 받아와 렌더링을 해보기로 해서 마음이 들떴습니다. 이번에도 무사히 해결할 수 있도록 기대해 봅니다.** 📗 오늘 학습한 내용 JSON (JavaScript Object Notation) 구조가 재귀 함..

22.06.23_TIL

📌 재귀함수를 하는 날인데 나는 재귀를 할 때마다 너무 어렵게 생각해서 풀이를 하는데 시간이 오래걸렸는데 이번 커리큘럼을 통해서 재귀를 조금 더 잘 쓸수 있는 사람이 되었으면 한다. 📗 오늘 학습한 내용 재귀함수 자기 자신을 호출하는 함수 반복적인 작업을 해야하는 문제의 코드를 간결하게 작성할 수 있다. 모든 재귀 함수는 반복문으로 표현할 수 있따. 재귀문제 해결 방법 문제를 좀 더 작게 쪼갠다. 1번과 같은 방식으로, 문제가 더는 작아지지 않을 때까지, 가장 작은 단위로 문제를 쪼갠다. 가장 작은 단위의 문제를 풀어서 전체 문제를 해결한다. 재귀를 사용하는 경우 주어진 문제를 비슷한 구조의 더 작은 문제로 나눌 수 있는 경우 중첩된 반복문이 많거나 반복문의 중첩 회수를 예측하기 어려운 경우 재귀적으로 ..

22.06.22_Section2 회고

Section2 회고 내가 정말 부족한 것이 무엇인지 그것을 고치려면 어떤것을 해나가야 하는지에 대해서 깨닫게 되는 섹션이 되었습니다. 전반적으로 부족하다고 느낀 것은 css로 디자인을 하는 부분입니다. 스터디원 분들과 진행했던 리액트 0부터 100까지 더미데이터를 사용하여 CRUD를 만들고 각자 진행된 것을 발표하였을 때 너무 디자인의 필요성에 대해서 느끼게 되었습니다. 🍀 목표 상기하기 연봉 4000이상의 개발자가 되기 회사의 코딩, 구현 테스트, 면접을 통과하여 회사에 취직하기 프론트엔드 개발자로 자리 잡고 풀스택 개발자 도전하기 ✅ Keep 매일 7시 기상 후 학습 준비 동기와의 교류 나는 항상 나보다 못하는 사람은 없다고 생각하면서 살아왔다 누군가에게는 배울점이 무조건 존재하기 때문이다. 그렇기..

22.06.21_TIL

📌 오늘은 코드스테이츠 전 수료생이자 나의 대학교 동기와 함께 코딩을 같이 해보았다. 덕분에 Postman 사용하는 방법과 서버의 과정등을 자세히 알 수 있었다. 📗 오늘 학습한 내용 Express express를 사용하여 항공편 검색 및 API 생성 항공편 목록 전체 조회 항공편 목록중 항공기 아이디검색을 통한 행선지 조회 항공편 예약하기 전화번호를 통해 예약한 항공편 조회 📘 추가로 공부할 내용 기술면접 준비 section2에서 배운 내용들을 가지고 기술면접을 준비해 본다. 고차함수 객체지향 프로그래밍 비동기 React 네트워크 Ajax node.js express 📝 오늘 느낀 점 & 마음 가짐 내일 솔로프로젝트를 하는 날이다. 이런것에 대한 정보는 찾지 못하였다. 그런데 섹션2에서 나온내용으로 ..

22.06.20_TIL

📌 금요일날 배운 내용을 가지고 항공편을 검색하는 서버 및 API를 생성하는 과정을 배우는 날이다. 먼가 요즘 백엔드라 재미있는 건지 없는 건지 궁금하지만 힘들땐 재미있다고 해야 힘들지 않으니 재미있다!!!!!! 📗 오늘 학습한 내용 Express express를 사용하여 항공편 검색 및 API 생성 항공편 목록 전체 조회 항공편 목록중 항공기 아이디검색을 통한 행선지 조회 항공편 예약하기 전화번호를 통해 예약한 항공편 조회 📘 추가로 공부할 내용 기술면접 준비 section2에서 배운 내용들을 가지고 기술면접을 준비해 본다. 고차함수 객체지향 프로그래밍 비동기 React 네트워크 Ajax node.js express 📝 오늘 느낀 점 & 마음 가짐 내일 솔로프로젝트를 하는 날이다. 이런것에 대한 정보..

22.06.18_TIL

📌 오늘 리액트를 0부터 100까지 Create react app 부터 시작하여 CRUD를 구현해보는 날이다. 내가 과연 잘 할 수 있을까에 대한 의문을 해결할 수 있는 날이 된 것이다. 어떻게든 해결을 했으면 좋겠다. 나는 할 수 있다!! 📗 오늘 학습한 내용 React CRUD 구현하기 Create 구현 Read 구현 Delete 구현 Update 관련 자료 찾아보기 및 구현 진행 Python Study [level3]정수 삼각형 문제 풀이 식을 그림으로 그려서 풀어보면 나름 풀 수 있는 문제였다. 📘 추가로 공부할 내용 React CRUD 구현하기 Update 기능 구현 📝 오늘 느낀 점 & 마음 가짐 항상 Update하는 방법이 너무 헷갈리는 것 같다,,, id중복 없애고 객체 내용에 맞게 st..

22.06.17_TIL

📌 Node.js와 비슷하지만 조금 더 편하게 사용할 수 있는 Express를 사용하는 날이다. 어제보다는 쉽겠지???! 📗 오늘 학습한 내용 Express node.js에서 웹 서버, API 서버를 제작하기 위해 사용되는 프레임워크 미들웨어 추가 가능 (가장 큰 장점) 라우터를 제공 미니 노드 서버를 Express로 리팩토링 Express에서 CORS를 설정하는 방법 const cors = require("cors"); const app = express(); //모든 도메인 app.use(cors()); //특정 도메인 const options = { origin: "https://homile.tistory.com", // 접근 권한을 부여하는 도메인 credentials: true, // 응답 헤..

22.06.16_TIL

📌 web server의 기초 백엔드와 소통을 할 수 있도록 배우는 날이다. 학부생때 백엔드를 배워서 프론트엔드를 하다가 백엔드를 봤을 때 조금 남다른 기분이 들었다. 📗 오늘 학습한 내용 SOP(Same-Origin Policy) 동일 출처 정책 같은 출처의 리소스만 공유가 가능하다. 출처: 프로토콜, 호스트, 포트를 말한다. 이 중 하나라도 다르면 동일한 출처로 보지 않는다. 잠재적으로 해로울 수 있는 문서를 분리함을써 공격받을 수 있는 경로를 줄여준다. 개발중인 웹 사이트에서 다양한 api 또는 정보를 사용하고 싶을 때는 다른 출처의 리소스를 사용해야 하는데 SOP정책에 위반된다. 이를 CORS를 사용하여 해결할 수 있다. CORS(Cross-Origin Resource Sharing) 교차 출처 ..

22.06.15_TIL

📌 실제 API정보를 받아와서 리스트를 출력하며 필터를 작성하고, json 파일을 프로미스형태로 넘겨서 출력하는 내용을 진행하는데 너무 재미있을 것같다. 📗 오늘 학습한 내용 React API 호출 API가 작성된 URL을 받아온다. fetch로 json 형식으로 받은 뒤 value를 return 한다. value를 사용해 기능을 구현한다. 📘 추가로 공부할 내용 React CRUD 구현하기 기본틀 잡기 더미데이터 생성 컴포넌트 분리 📝 오늘 느낀 점 & 마음 가짐 React를 강의 없이 혼자 스스로 만들어 보자고 결심한지 4일 정도 지나서 기획 -> 기본틀까지 완성했다. 앞으로 기능 구현을 조금 더 한다면 완성될 것이다... 나는 할 수 있다! 그리고 기본틀이 너무 이쁘지 않다.... 놓치고 있던 C..

22.06.14_TIL

📌 useEffect를 저번주 페어분이 알려주셨는데 이것을 실제로 활용해보니 상당히 편하게 사용할 수 있어서 좋다. 📗 오늘 학습한 내용 React Side Effect(부수 효과) 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 fetch를 통해 API를 가져올 때 이벤트를 활용해 DOM을 직접 조작할 때 Pure Function(순수 함수) 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수 useEffect side effect를 실행할 수 있게 해주는 HOOK 렌더링 조건 컴포넌트 생성후 처음 화면에 렌더링 컴포넌트에 새로운 props가 전달되며 렌더링 컴포넌트의 state가 바뀌며 렌더링 사용방법 useEffect만 작성할 경우: 렌더링 마다 실행 useEffect 뒤에 빈 배열 작성..