본문 바로가기

전체 글225

[React] 왜 React인가? 정적인 페이지는 HTML, CSS만으로도 구현이 가능하지만, 동적인 페이지를 만들기 위해서는 JavaScript가 필요하게 되었다. 이어서 https://velopert.com/3612 누구든지 하는 리액트 1편: 리액트는 무엇인가 | VELOPERT.LOG 이 튜토리얼은 10편으로 이뤄진 시리즈입니다. 이전 / 다음 편을 확인하시려면 목차를 확인하세요. 프론트엔드 라이브러리 / 프레임워크 리액트는 정말 인기있는 프론트엔드 라이브러리입니다. velopert.com velopert님의 말씀에 따르면 요즘의 웹은 단순한 웹 페이지가 아닌 웹 애플리케이션이다. 웹에서 정말 많은 것을 할 수 있다. 그렇지만 UI(User Interface, 즉 사용자가 마주하게 되는 화면? 디자인?)를 동적으로 나타내기 위해서.. 2021. 11. 28.
[멋사 FE 스쿨] 20일차 리뷰 + 갑자기 은님 무물(!) 멋쟁이사자처럼 프론트엔드스쿨 20일차 w/ 제주코딩베이스캠프 20일차(09:00~18:00) 수업 w/ Wade morning break 자스의 날!! 교육과정 한달 되는날ㄷㄷ 시간이 부족한 건 사실. 이번 교육과정 내 정보가 정말 많은 것이 사실. 우리에게 남은 과제는 손가락으로 체화시키는 과정 사람 인 은 서로 기대고 있는 모양. 도움이 됐던 영상 추천 목록 공신 강성태 반복의 중요성 https://www.youtube.com/watch?v=fBhJrSqNaGQ&list=PLONJ3o27ongwxAGqw7f91h_nrudoHHFqA&index=12 부디 이 수업을 듣고 다른 선생님 수업을 들어라! 또 다르게 이해가 될 것임 조은님의 UX 책 추천 https://wit.nts-corp.com/2014/.. 2021. 11. 26.
[멋사 FE 스쿨] 19일차 리뷰 멋쟁이 사자처럼 프론트 엔드 스쿨 19일차 w/ 제주코딩베이스캠프 오전(09:00~11:50) 수업 w/ Licat morning break 어제 특강에 관하여 연봉에 관하여 → 초봉 5천? 문화 조성보다는 그만큼의 능력자를 뽑겠다는 의미에 가깝다 생각 쓸 수 있는 카드 중에 연봉을 낮추는 카드도 있다. 대표님 생각의 마지노선은 3000,,ㅎ → 물론 경력자는 논외 1년간은 돈 받으면서 훈련 받는다고 생각하자!! https://youtu.be/wfInwxT0UUA, https://youtu.be/fv5pIa_l7ns 영상에 관하여 이력서 소개 때 주의 깊게 읽어야할 포인트가 어디인지를 찝어 줘야함. ex. 모호한 코드를 클린하게 해주는 능력을 가지고 있는 개발자입니다 라는 표현은 모호한 표현이다. 차라리.. 2021. 11. 25.
[멋사 FE 스쿨] 18일차 리뷰 + 데일리 회고 오전(09:00~11:50) 수업 w/ Licat morning break 주니어만 해도 5개 정도 언어를 다룬다고..하하 node를 한다면 server는 필수로 다뤄야한다. 대기업이나 육성해서 키우려고 하지.. 어떤 회사라도 FE 개발자라고 서버를 모르지 않을것..! 기본적으로 다룰 줄은 알자 클라우드 VM 가격 비교 https://zetawiki.com/wiki/2020_클라우드_VM_가격_비교 https://brunch.co.kr/@topasvga/1242 https://swiftcoding.org/all-about-amazon-lightsail-billing FE 개발자라고 이런 걸 몰라도 될까? 물론 알아야한다. 제안하는 경우 물론 실무에서는 비용 산정으로만 가지는 않는다. NCP(네이버)로 갈.. 2021. 11. 24.
[멋사 FE 스쿨] 17일차 리뷰 + 데일리 회고 멋쟁이 사자처럼 17일차 오전(09:00~11:50) 수업 w/ Licat morning break 연봉에 관하여 월 200 이하로는 받지 말자 학력이 정말 중요하지 않았던 사례 고졸 회사 월급 가장 높으셨던 분 → 샤워, 화장실까지 계속 공식 암기 공부 실력이 갖춰진 고등학생. 대학교 시간 아까워서 안가고 인공지능회사 취업. 코딩은 거짓말하지 않는다. 타이핑한 시간에 비례해서 실력이 늘지 왕도가 없다. 마크다운 연습 마크다운 테이블 만들기 좋은 사이트https://www.tablesgenerator.com/markdown_tables tailwind 다시 실습 → 천하제일 이력서 만들기 대회 보통 pdf로 이력서를 내는데, html로 제출하면 확실히 강력할 것 이력서에 주니어의 skillset 점수를 .. 2021. 11. 23.
[멋사 FE 스쿨] 16일차 리뷰 오전(09:00~11:50) 수업 w/ Wade morning break 슬슬 취업 먼저하는 사람들이 생길텐데 너무 힘들어하지 말자. 사람을 뽑는 회사는 많고 자리는 많다! 실전 테크닉 수업 이어서 ir 테크닉 phark method clip이라는 속성은 요소의 부분을 잘라주는 것인데, absolute position이 있어야만 작동한다. → 보이지 않게 잘라서 이미지 최적화? 쌤은 kraken optimizer 이용 → 용량이 적으면 물론 렌더링도 용이함 이미지 자를 때 이용하면 좋은 사이트 https://bennettfeely.com/clippy/ → css를 마우스로 선택한대로 반환해준다. clip의 문제? → mdn 검색해보면 브라우저 호환은 굉장히 좋다. 하지만 deprecated .. 비추 →.. 2021. 11. 22.
[CSS] position 정리 https://developer.mozilla.org/ko/docs/Web/CSS/position position의 목적은 HTML 문서 상의 요소를 배치하기 위해서이다. position은 기본적으로 normal flow, float와 함께 층위적으로 구분된다. 정확히 이렇게 층위가 구분되는 것은 아니겠지만 물리적으로 이해를 간단히 하기에 도움이 된다. http://blog.wystan.net/2009/01/12/relationships-between-position-float-display 오래된 글이지만 정리가 잘되어 있어서 리다이렉트 float, normal flow와 함께 비교하며 이해하면 더 이해가 잘된다. position에는 5가지 값이 있다. static / relative / absolut.. 2021. 11. 21.
[CSS] inline vs inline-block https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=leesd88&logNo=220682157303 참고한 블로그 깔끔하게 정리되어 있어 한번쯤 보면 좋을 것 같다. 자꾸 헷갈리고 검색하게 돼서 한번 다시 정리 inline - width. height 적용 불가 - 상하 margin, padding(maring-top, margin-bottom, padding-top, padding-bottom) 적용 불가 - line-height 적용 불가 inline-block inline에서 안되던 것들이 적용 된다. - width. height 적용 가능 - 상하 margin, padding(maring-top, margin-bottom, pa.. 2021. 11. 21.
[멋사 FE 스쿨] 15일차 리뷰 오전(09:00~11:50) 수업 w/ Licat morning break 과제 같은 경우는 깃헙에 따로 repository를 만들어서 관리하자 벤딩 머신, 렌딩페이지, sns 과제들을 묶어서 관리하면 좋을 듯 만약 자신있는 거만 하나 따로 있다면 따로 관리해도 되고 벤딩머신(JS) 랜딩페이지(HTML, CSS) 각 구현 목적이 있는데 맞게 pin하고 다룰 것 페이스북 친구, 커뮤니티, 유튜브 채널이 어디에 집중되어 있는지 확인해보자생코보다는 더 깊은 커뮤니티를 찾아보자..! 어떻게든 귀동냥으로 듣는게 생기기 때무넹 아주 중요하다. 웹표준 관련 답변이 이상한 경우가 있었는데 유튜브 보다는 D2와 같은 대기업의 기술 블로그를 참고하자, 대중이 어렵다고 하는, 저명한, 두꺼운(?) 책도 좋고 해외 유명 책인.. 2021. 11. 19.
[CSS] 선택자 정리 + 헷갈리는 선택자 https://devahj.tistory.com/83 과거 정리해둔 것이 있지만 허접한 정리는 잊고 다시 싹 다 정리해본다. https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Selectors 어김 없이 MDN부터 출발 기본 선택자(Basic selectors) 더보기 전체 선택자(*) -> 문서 내 모든 요소(element) 선택 * { } 타입 선택자(elementname) -> 해당 이름을 가진 모든 요소를 선택 /* for example*/ div { } -> 모든 div 요소들이 선택된다. 클래스 선택자(.classname) -> class 특성(attribute)이 classname인 모든 요소를 선택 인 태그가 있을 때 .one으로 해당 요소 선택 가능.. 2021. 11. 18.