zero-base 프론트엔드 스쿨 ⛪️ 20

React props와 state

제로베이스 강의 중 이해가 빠른 일취월장 리액트를 수강하면서 기억해야 될 점을 적어볼까 합니다. 먼저 props는 부모 컴포넌트가 자식 컴포넌트에게 전달하는 값입니다. 강의에서 자식 컴포넌트에서 props를 전달받을 때는 props.(전달받은 name)등으로 받았던 것 같고 이름이 정해지지 않고 사이에 추가 한 값이라면 props.children으로 받았던 것 같습니다. 또한 자식 컴포넌트에서는 전달 받은 props의 값을 변경할 수 없습니다. 다음으로 state는 컴포넌트에서 스스로 관리하는 상태 값 입니다. JS에서는 값이 변경되어서 rerendarin을 해주고 싶을 때는 함수를 재 호출 하는 방식으로 했었던 것 같은데 React에서는 원하는 부분만 동적으로 변경하기 위해서 useState() 함수를..

컴퓨터 공학 지식 정리

OSI7 Layer Application (Layer 7) 응용서비스 HTTP , SMTP Presentation (Layer 6) 인코딩 / 암호화 / 압축 등 데이터의 변형이 이루어짐 Session (Layer 5) TCP / IP 통신 연결을 수립 / 유지 / 중단 Transport (Layer 4) TCP / UDP Network (Layer 3) IP통신, 라우팅 Data Link (Layer 2) 이더넷, 랜카드, Mac 통신, 에러검출 Physical (Layer 1) 네트워크 하드웨어 전송 기술에 대한 프로토콜 Application (Layer 7) - 응용 계층 - HTTP, SMTP 같은 인터넷 응용 서비스와 관련 - 사용자와 가장 밀접한 계층으로 인터페이스 역할 - 응용 프로세스 간의..

JavaScript 프로젝트 과제 MISSION 5❗

JavaScript 프로젝트 과제 MISSION 4를 코딩하면서 느낀 점에 대해서 적어볼까 합니다. 후.. 이번 과제를 진행하면서 이틀 동안 정말 왜 안될까 왜 안될까 생각만 하면서 지낸 것 같습니다. 이번 과제는 비동기 통신 axios를 이용해서 데이터를 가져온 후 조건에 맞게 나열하고 기능을 구현하는 과제였는데 axios를 사용한 경험이 없었어도 이전에 강의에서 최신 문법인 fetch를 사용해 본 적이 있어서 쉽게 한 것 같습니다. 다음으로 무한 스크롤 구현이였는데 처음 접하는 observer방식이어서 인터넷 서칭도 해보고 유튜브 강의를 따라 하기도 하면서 학습한 것 같습니다. 아래는 제가 이번에 참고했던 유튜브 강의입니다. https://www.youtube.com/watch?v=Cq_UG1MHN6..

JavaScript 프로젝트 과제 MISSION 4❗

JavaScript 프로젝트 과제 MISSION 4를 코딩하면서 느낀 점에 대해서 적어볼까 합니다. 이번 과제에서는 제공되는 template이 없어서 font import부터 icon import까지 제 몫이었는데요. 달력 만들기에 앞서서 정말 감이 잡히지 않아서 여러 블로그도 찾아보고 유튜브도 찾아보고 검색 검색을 통해서 완성한 것 같습니다. 이런 학습을 유도하셨던 걸까요? 먼저 저는 HTML을 작성 후 CSS를 입히고 JS 완성을 한 뒤 HTML의 flex방식으로 되어있던 달력을 grid 방식으로 수정하였고 반응형으로 제작하라는 요구 사항이 처음에는 이해가 되지 않았는데 grid의 1fr로 주었기 때문에 자동으로 width에 반응해서 줄어들긴 해서 이대로 마무리 지었습니다. 다음으로 이번 과제를 통해..

JavaScript 프로젝트 과제 MISSION 3❗

JavaScript 프로젝트 과제 MISSION 3을 코딩하면서 느낀 점에 대해서 적어볼까 합니다. 이번 과제에서 제공해주는 template을 보면서 구조를 파악하는데 시간이 좀 걸렸었고 완성을 하긴 했지만 코드가 간결하지 못하고 반복되는 부분이 많은 것 같습니다. 이번 미션에서는 두 부분에서 좀 막혔었는데 하나는 forEach()를 통해서 받아온 객체요소를 따로따로 분리해야 하는 부분이 있었는데 그 부분에서 애를 좀 먹었던 것 같은데 스코프영역을 파악하고 cascading에 주의하면서 배치하니까 해결되었던 것 같습니다. 다음은 CustomEvent를 발생해야 하는 부분인데 이 부분에 대해서는 학습한 적이 없어서 mdn 등등 많은 검색을 통해서 많은 시도를 한 후 해결했던 것 같습니다. 번쩍 하고 생각이..

JavaScript 프로젝트 과제 MISSION 2❗

JavaScript 프로젝트 과제 MISSION 2를 코딩하면서 느낀 점에 대해서 적어볼까 합니다. 먼저 아직도 스코프 영역에 대한 부분이 미흡한 것 같습니다. Utils나 Modul의 대한 개념은 강의를 학습하면서 꽤 많이 알게 된 것 같습니다. 이번 프로젝트에서는 Utils를 사용했으면 좋겠다 해서 이전에 우희은 선생님에게 배운 DOM객체 생성 util과, DOMList생성 util을 사용해 봤습니다. 또한 지정된 시간마다 사용하는 setInerval() 함수를 사용했고 현재 시간을 가져올 수 있는데 Date() 함수 또한 사용했습니다. 이전에 강의에서 stopwatch를 만든 경험이 있어서 크게 어렵지는 않았지만 가장 어려웠던 부분이 여러 개의 시계를 생성해도 똑같이 작동하게 하는 부분이었는데 많이..

JavaScript 프로젝트 과제 MISSION 1❗

JavaScript 프로젝트 과제 MISSION 1을 하면서 느낀 점에 대해서 적어볼까 합니다. 제로베이스 프론트엔드 스쿨을 시작하기 전 HTML CSS에는 자신이 있는 편이 었지만 JS는 학습을 한 적이 없어서 많이 걱정했었습니다. 정말 많이 그래도 이왕이면 빨리 부딪혀 보자 해서 첫 번째 과제를 접하게 되었는데요. 먼저 문법 오류를 범하지 않기 위해서 '토이프로젝트 20개, 기능구현 100개 완벽실습 자바스크립트' 강의에서 학습한 엄격모드 Strict Mode를 사용했고 HTML에서 DOM객체를 가져오는 util함수도 사용했던 것 같습니다. 또한 상태를 보존하는 것이 이번 프로젝트의 핵심 이였는데 이 부분은 이전에 우희은 선생님의 강의를 보면서 배운 localstorage를 이용해서 쉽게 해결했던 것..

우희은 선생님의 입문자를 위한 자바스크립트 실습 후기

우희은 선생님의 강의 방식이 저한테 잘 맞았던 건지 자바스크립트 기초 문법 파트부터 실습 프로젝트까지 이해가 잘 되었습니다. 처음 강의 중 미니 프로젝트 세번을 진행하게 되었는데 마켓 서비스 만들기 프로젝트 실습을 진행할 때는 강의를 계속 멈추고 이해하고 다시 뒤로 갔다가 이해하고를 반복하였습니다. 하지만 2~3번째 프로젝트를 진행하면서부터는 제가 코딩할 수 있는 부분은 먼저 코딩하고 강의를 수강하는 식으로 진행하였던 것 같습니다. 다음으로 강의를 수강 중에 utils폴더에는 무엇이 담기는지, modul폴더에는 무엇이 담기는지 처음에는 이해하지 못하였는데요.강의를 수강하면서 제가 알게 된 점은 utils폴더에는 공통적으로 사용되는 함수가 저장되었고, modul폴더에는 dom객체를 파트별로 쪼개서 담아놓은..

20221224 다섯 번째 mission❗ & 느낀점

HTML/CSS를 공부하면서 느낀점 - 저는 HTML / CSS를 공부하면서 기초가 중요하다는 점을 느꼈던 것 같습니다. HTML/CSS 공부하면서 어려웠던 개념과 이유 - 가장 어려웠던 부분은 animation이나 grid였던 것 같습니다. 졸업 작품을 제작할 때 grid를 사용하지 않고 익숙한 flex만 사용하다 보니 그랬던 것 같고 animation 또한 익숙치 않았던 것 같습니다. 나만의 공부팁? - 제가 이번에 제로베이스 프론트엔드 스쿨을 신청한 이유는 졸업 작품 중에 제 실력에 대해서 너무 많은 현타가 와서 이번 6개월 동안 정말 열심히해서 죽이되든 밥이되든 한번 해보자 마음을 먹고 하고 있는데 이번 HTML/CSS미션을 하면서 1, 2, 3, 4 는 비교적 쉽게 했는데 mission 5에서 ..