프론트엔드 개발자 엄성준

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

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

먼저 user 객체를 생성합니다. let user = { name: "sungjun", age: 50, size: { height: 200, weight: 70, } }; 다음으로 deepCopy 객체를 생성한 후 JSON.stringify() 함수를 통해 user객체를 문자열로 변환합니다. 그 후 JSON.parse() 함수를 통해 문자열 user를 다시 object 형태로 변환해줍니다. (정말 간편한 방법인 것 같습니다.) let deepCopy = JSON.parse(JSON.stringify(user)); 다음으로 deepCopy.size.height의 값을 250으로 변경하신 후 결과를 보시면 user객체와 별개로 값이 변경되는 걸 확인하실 수 있습니다. deepCopy.size.height =..

네 번째 미션을 진행하면서 학습한 점에 대해서 적어보겠습니다. 일단 이번 미션을 진행할 때 피그마로 시안을 봤을 때는 굉장히 쉽겠다라고 생각을 했었는데 flex로만 layout구조를 잡다 보니 grid는 좀 생소해서 이번 기회에 제대로 복습을 한 것 같습니다. 또한 JS를 이용한 Toggle이 구현되어 있었는데 그 함수 안에 동작을 추가해서 구성하는 줄 알았으나 이미 구현된 JS에 css를 통해서 미션을 해결해야 된다는 생각이 들어서 가상 요소 before after를 이용해서 문제를 해결했습니다. 또한 아래는 제가 이번 미션을 하면서 참고한 사이트 입니다. https://projects.verou.me/bubbly/ Bubbly — CSS speech bubbles made easy projects.v..

세 번째 미션을 진행하면서 학습한 점에 대해서 적어보겠습니다. 일단 이번 미션은 요소가 꽤나 많아서 진행시간이 현제까지 한 미션 중 가장 오래걸렸던 것 같습니다. WAI-ARIA에 대해서 학습한 적이 없었었는데 제로베이스 강의를 통해서 클론 코딩 중 예시를 찾게되어 이번 프로젝트에 적용하였습니다. 또한 가상 요소 선택자 ::befor, ::after를 통해서 요소를 넣었을 때 표현이 되지 않아서 무엇이 문제일까 했었는데 position:absolute를 사용하면 적응이 되는 점을 알게되었습니다. 다른 부분에서는 크게 어려운 점이 없었던 것 같습니다.

오늘 두 번째 미션을 진행하면서 학습한 점에 대해서 적어볼까 합니다. background-img를 url로 임포토 하는 법을 학습했고 background-position 속성을 이용해서 0% 0% 각각 x 축과 y축의 %를 조절하여 제가 보여주고 싶은 부분의 background-img를 보여줄 수 있었습니다. 다른 부분은 수월하게 진행했던 것 같습니다. 아래는 제가 background-position 속성을 학습할 때 참고한 mdn링크입니다. https://developer.mozilla.org/en-US/docs/Web/CSS/background-position background-position - CSS: Cascading Style Sheets | MDN The background-position..

오늘 처음으로 HTML/CSS 미션 5개 중 첫 번째 프로젝트를 완료하였는데요. 진행하면서 어려웠던 점에 대해서 적어볼까 합니다. 먼저 저는 다음과 같이 프로젝트를 private Repository를 통해서 git hub에 업로드를 하고 있습니다. 제가 오늘 프로젝트를 진행하면서 느낀 점은 HTML, CSS는 어느 정도 실력이 있다고 생각했었는데 아직 부족하다고 느끼게 되었습니다. 오늘 구글링을 참 많이 했던 것 같습니다. 특히 가상 선택자 ::before, ::after에 대해서 아예 모르고 있는 상태여서 zero-base에서 제공해 주는 강의와 구글링을 통해서 학습한 것 같습니다. 이전에는 js를 통해서 구현하는 줄 알았던 부분이 알고 보니 css를 통해서 구현이 가능하다는 것을 깨달은 것 같습니다...