본문 바로가기

👩🏻‍💻Frontend/🦁 멋사 FES7

 (10)
FES7 15~19주차, 수료 멋쟁이 사자처럼 프론트엔드 스쿨 7기 15~19주 차, 수료 후기! 15주 차 firebase 수업을 끝으로 팀프로젝트가 진행되었다. 프로젝트를 어떻게 진행했는지 남겨보려고 한다! 프로젝트 초기 프로젝트 조편성이 된 날! 어색한 인사를 나누고 조장과 팀명을 정했다. 스터디와 책 집필을 하며 그래도 여러 사람과 이야기를 나눠봤다고 생각했는데 조원분들 모두 한 번도 이야기를 나눠보지 않은 분들이었다. 🫢 그리고 우리 조는 정규대학 과정을 마친 전공자는 없는 약간 애매한 전공자가 모인 조였다ㅋㅋㅋㅋㅋㅋ 신기했다 ㅎㅎ 이런저런 이야기를 나누다가 요즘 날씨가 좋다는 이야기가 나왔고, 놀러 가기 참 좋은 날씨라는 생각이 들었다. 그 생각으로부터 우리는 축제 및 체험을 모아서 볼 수 있는 서비스 'MOAMOA'를 개..
FES7 12~14주차 멋쟁이 사자처럼 프론트엔드 스쿨 7기 12~14주차 후기 새로 알게 된 것 React Hook Hook flow TDD Webpack API 통신 특이사항 책집필 시작 회고 프로젝트 팀 편성 모의고사가 있었는데 시간 안에 기능을 다 구현하지 못했다. 주관식 문제도 분명히 잘 풀었는데 오답으로 처리됐다. 나의 부족함을 다시 한번 깨닫게 되는 시험이었다. 미래의 팀원분들 미리 죄송합니다... 열심히 할게요...... 지난번 리액트 과제를 수업시간에 같이 풀어보는 시간이 있었는데 styled-components를 사용해서 css적용을 하지 않고, 기능도 완벽하게 구현하지 않아서 아쉬웠다.. 내가 구현한 게 맞는 방법인지를 확인하고 싶은데 확인할 수 없다는 것이 답답하다. 리액트 진도가 끝났고, 자바스크립트 라..
FES7 10주차, 11주차 멋쟁이 사자처럼 프론트엔드 스쿨 7기 10, 11주차 후기 새로 알게 된 것 리액트에서 CSS 적용하는 방법 styled-componetns 기본 사용법 Redux 기본 개념 합성 컴포넌트 React Router 개발자 도구창 기능 특이사항 책집필 스터디 참여 온보딩 챌린지 참여 리액트 과제 제출 참고 웹 개발자가 알아두면 좋은 SPA, MPA 당신이 웹 퍼블리셔, 프론트엔드 개발자가 아니더라도 웹 개발 분야에 있다면 SPA (Single Page Application) 혹은 MPA (Multi Page Application)에 대해서 들어본 적이 있을 거다. 처음 들어본다고? 괜찮다. SPA, M seunghyun90.tistory.com [React] 리액트 JSX에서 이미지가 엑박으로 나올 때 문제..
FES7 8주차, 9주차 멋쟁이 사자처럼 프론트엔드 스쿨 7기 8, 9주차 후기 새로 알게 된 것 DOM접근, 이벤트 생성자, 프로토타입, 클래스 비동기 개념 리액트 기초 리액트 상태관리의 필요성 특이사항 책집필 참여 스터디 시작 node.js 강의 오류 해결 못함 Sass , jQuery 복습 못함 이력서, D3, Chartjs 특강 참고 Context API는 왜 쓰고, 그렇다면 Redux는 필요없을까? 안녕하세요 오늘은 제가 평소에 궁금했던 주제로 글을 써보려고 합니다. Context API의 기능과 왜 사용하는지, Context API의 리렌더링 이슈란 무엇인지 그리고 Redux를 대체할 수 있는지. 위 내용을 설 hong-jh.tistory.com Context API란? 소개 및 사용법 Context API란? Con..
FES7 6주차, 7주차 멋쟁이 사자처럼 프론트엔드 스쿨 7기 6, 7주차 후기 새로 알게 된 것 javascript 메서드 얕은복사, 깊은복사 특이사항 js100제 2권 시작 독서 - 박미정의 깃 & 깃허브 입문 참고 Git branch 기본 사용법 및 Github 협업 방법 1. Git Branch 기본 사용법 - Git Branch 생성 - Git Branch 전환 - Git Branch 목록 확인 - Git Branch 삭제 - Git Branch 병합 2. Git Branch, Github 협업 방법 - Git으로 작성한 코드 Github에 Push하기 - Git으로 작성한 코드 Git coduking.com [GitHub] GitHub로 협업하는 방법[1] - Feature Branch Workflow - Heee's..
FES7 5주차 WIL 멋쟁이 사자처럼 프론트엔드 스쿨 7기 5주차 후기 새로 알게 된 것 이미지 최적화 이미지 파일의 크기가 초기 구동 속도에 관여하기 때문에 이미지 최적화가 중요함 모든 이미지가 100KB를 넘지 않도록 최적화해 사용하는 것이 좋음 원시타입 변수 [Javascript] 원시타입 변수, String, Number, Boolean, undefined, null, nullish, 단락회로평가 원시타입(Primitive Types)이란? 원시타입의 값은 변경 불가능하며 값을 변수에 저장하거나 전달할 때 값에 의한 전달을 한다. 따라서 원시 값을 다른 변수에 할당할 때는 값의 참조가 저장되는 것이 syeoi.tistory.com console.log()와 console.dir()차이 [Javascript] HTML ..
FES7 4주차 WIL 멋쟁이 사자처럼 프론트엔드 스쿨 7기 4주차 후기 새로 알게 된 것 flex로 세로 중앙 정렬을 하면 브라우저창이 작아졌을 때 상단이 잘리는 현상 발생 margin : 0 auto; 속성을 추가로 줘서 해결 체크박스는 가상요소 사용해서 만들지 않기 input태그로 만든 후 label 태그로 감싸 그 안에서 스타일 적용을 하면 된다. 가상요소로 만들경우 동적 구현이 힘들다. IR(Image Replacement)기법 스크린 리더 사용자를 위한 기업의 CSS IR(Image Replacement) 기법 IR(Image Replacement) 기법이란? 디자인적으로는 보이지 않지만 스크린리더나 브라우저를 위해 정보를 전달하는 텍스트를 넣는 방법을 말한다. 단순히 스크린 리더 사용자뿐 아니라 검색 엔진 최적 s..
FES7 3주차 WIL 멋쟁이 사자처럼 프론트엔드 스쿨 7기 3주차 후기 새로 알게 된 것 table 표에서 데이터가 없는 경우 공백을 넣어줘야 접근성에 좋다. 접근성을 위해 스코프 또는 아이디헤더도 적용해야 한다. svg svg 태그 내부 path에 지정된 색상, 크기 등의 속성을 바꿀 수 있다 gird 사용 방법 CSS Grid 정리 CSS Grid 속성 Grid란? 웹페이지를 위한 두 방향(x축, y축) 2차원 레이아웃 시스템으로, 자식 요소들이 컨테이너 안 공간을 맞추기 위해 크기를 설정하는 방법이다. grid 레이아웃을 만들기 위한 기본 syeoi.tistory.com 초점, 마크업 순서, 대체 텍스트 중요성 초점은 의미 있는 콘텐츠에 적용되어야 하며, 초점 이동은 논리적인 구조에 맞게 적용되어야 한다. 레이어 팝업 ..

티스토리툴바