Front-end 개발
-
[멋쟁이사자처럼] 실습 - CSS SpeedrunFront-end 개발 2023. 7. 7. 08:53
1. CSS Speedrun 소개 복습을 어떻게 하지? 단어 외우 것 처럼 안보고 써보기 보다는 직접 써보는게 빠르고 효과적일 것이다. 게임으로 즐기면서 CSS 선택자에 대해 복습하면 동기부여도 된다. 2. 내 풀이 no. 내 풀이 정답 Inro li:first-child li:first-child Level 1 p:not(*[class="foo"]) p:not(.foo) Level 2 li:nth-child(odd):not(:first-child) li:nth-child(2n + 3) Level 3 div > * div > * Level 4 span[data-item] span[data-item] Level 5 p ~ span p ~ span Level 6 form *:not(*[disabled]) :..
-
[멋쟁이사자처럼] 프론트엔드 스쿨 7기 - 4일차 기록 및 복습Front-end 개발 2023. 7. 6. 06:42
목차 1. 인트로 2. CSS 텍스트 관련 속성 3. GitHub 저장소에 신규 코드 폴더 업로드 1. 인트로 - CLI git 에서 애먹는 사람들이 많음 - 점심이나 저녁 추천메뉴를 커밋하면서 연습하는 방법이 있음 2. CSS 텍스트 관련 속성 2-1. Color - 컬러보드를 통해서 색상 변경과 투명도(transparent) 변경이 가능함 - 투명도는 알파값 2-2. currentColor - color 상속 - 요소들이 많아 졌을 때 색상 관리하는데 유용함 - (개발자 도구) 제일 마지막 요소의 Color 값에서 대비율을 확인할 수 있음 - 카카오 고대비 태마 - 대비율은 웹 접근성 검사에서 사용됨 (노안, 색약을 위한 작업) - Lighthouse 보고서 생성 (웹 접근성 검사) 2-3. CSS ..
-
[멋쟁이사자처럼] 프론트엔드 스쿨 7기 - 3일차 기록 및 복습Front-end 개발 2023. 7. 5. 08:37
1. 수업 전 알아두기 1-1. 추천하는 확장도구 - (VSCode) Prettier : 코드 태그 자동생성 - (VSCode) Live Server : 실시간으로 Live Server 웹페이지를 열어 수정사항 확인 가능 휴대폰과 PC가 동일한 와이파이로 연결되어 있다면 휴대폰에서도 서버 웹페이지를 동일하게 확인가능 - (VSCode) vscode-icons : vscode 내 icon을 변경 가능 (setting > file theme 검색 > Icon Theme: VSCode Icons) - (VSCode) ident-rainbow : tab 색깔 변경 - (VSCode) Gitmoji : Git 활용시 커밋 메시지에 이모지 적용 - (VSCode) Ayu Mirage Bordered : (미설치) ..
-
[멋쟁이사자처럼] 프론트엔드 스쿨 7기 - 스터디 계획 세우기Front-end 개발 2023. 7. 5. 06:52
목차 1. 배경: 걱정거리 2. 스터디 주제 3. 스터디 방법 4. 모임 회수 5. 스터디 지향점 1. 배경: 걱정거리 스터디는 아는 사람이 주도하는 것이 좋다. 하지만 잘 아는 사람이 얼마나 많겠는가? 또 그 사람이 친절히 가르쳐줄 여유가 있을까? 스터디를 한다면 어설프게 가르치고, 배울게 아니라 습관을 형성하는 식으로 하는게 좋겠다. 현재 동기들이 만든 스터디는 소수로 운용되어 들어가지 못하거나, 직접 만들어야 한다. 스터디를 안하고 혼자하면 늘어지고 흐름이 끊긴다. (꾸준하지 못하다) 다른 사람들을 보면 조급해지고, 뒤쳐지는 느낌을 받는다. (정신건강에 해롭다) 2. 스터디 주제 - Tech!T Front-end School 수업 일지 및 복습 - HTML/CSS : 테킷 FE 스쿨, (백지) 클론..
-
[멋쟁이사자처럼] 프론트엔드 스쿨 7기 - 2일차 기록 및 복습Front-end 개발 2023. 7. 4. 11:35
1. 우리는 이렇게 공부해요 학습 곡선 어디에 있든지 그저 묵묵히 걸으면 목표한 바를 이룰 수 있다. 남은 비교 대상이 아니다. 초점을 안으로 모아 나만의 속도로 페이스를 잃지 마시고 묵묵히 걸어가라. 뱁새가 황새 따라가는 법은 뒤따라 나는 것이다. 그러면 같은 곳에 착지한다. 매우 많은 지식을 습득하게 될 것입니다. 때로는 너무 많은 지식에 버겁다고 느껴질 것이다. 그러나 버거운 마음을 내려두고 이해가 안되는 채로 내버려 두라. 중요한 것은 다시 나온다. 그러면 다시 공부하면 되다. 2번이 안되면 3번이면 된다. 모두의 속도는 다른다. 또 모두가 시작한 시점이 다르다. 나만의 속도로 페이스를 잃지 않고 묵묵히 걸어가라. 당신의 때가 옵니다. 반드시 옵니다. 2. 멋사 Front-end 공부방법 2-1...
-
[멋쟁이사자처럼] 프론트엔드 스쿨 7기 - 1일차 기록 및 복습Front-end 개발 2023. 7. 4. 08:38
목차 1. HTML/CSS 2. 김멋사 이력서 1. HTML/CSS 1-1. HTML - Section Tag 1-2. CSS - montserrat 폰트를 가져와서 전체 문서의 폰트로 변경 - Lorem Ipsum - 행간은 16px (160% 를 주는게 가장 보기 좋음) - Browser 간 다를 수 있는 마진 때문에 body, h1, h2 를 마진, 패딩 초기화 - div 가운데 정렬은 (margin-right: auto; margin-left: auto;) - div 그림자 주기 (box-shadow: 가로축 세로축 blur spray rgba(red, green, blue, 투명도);) - Floating 하고 겹치지 않게 overflow hidden 하는 법 - div 와 같지만 다르게 부르는..
-
[멋쟁이사자처럼] 프론트엔드 스쿨 7기 - 상세 훈련과정Front-end 개발 2023. 6. 27. 17:46
목차 1. 일정표 2. 주요 학습 내용 멋쟁이사자처럼 프론트엔드 스쿨 7길에 지원하고 약 1개월이 지났다. 나는 1, 2차 평가를 통과하여 최종 합격하고, 드디어 6월 23일 멋쟁이사자처럼의 HRD-Net 행정등록이 완료됬다. * 위 훈련과정은 테킷 홈페이지에서 사전 선발된 사람을 대상으로 진행된다. 내가 지원하면서 가장 궁금했던 사항이었고 이제야 볼 수 있게된, 테킷 프론트엔드 스쿨의 4개월 상세 교육과정을 공유한다. 첨부파일로 붙여 놓은 계획서는 일(日) 단위 오전/오후로 시간구분이 되어 상세한 일정이 계획되어 있다. 교육과정이 변동될 수 있지만, '제주코딩 베이스캠프'에서 강의를 진행한다면 참고하기 충분할 것이다. 1. 일정표 ( 2023.07.03 ~ 2023.11.10 ) 2. 주요 학습 내용 ..
-
[용어] 프론트엔드 관련 용어 해설, '프론트엔드 도대체 뭐야' 시리즈의 목차Front-end 개발/FE 용어 2023. 6. 27. 14:40
평소에 모르고 지나갔거나, 자주 쓰지만 헷갈렸던 용어를 풀어 써보는 컨텐츠 시리즈이다. 프론트엔드 개발 용어와 백엔드 개발 용어를 분리하여 정리해본다. 용어의 해설은 프론트엔드 개발 분야 관점에서 용어를 해설한다. ○ 도대체 서블릿 (Servlet) 이 뭐야 ○ 도대체 CDN 이 뭐야 (AWS CDN) ○ 도대체 AWS S3, Cloudfront 가 뭐야 ○ 도대체 Firebase 가 뭐야 ○ 도대체 Serverless 가 뭐야 ○ 도대체 웹팩이 뭐야 ○ 도대체 디자인 패턴이란게 뭐야 ○ 도대체 SPA, 랜딩 페이지가 뭐야 ○ 도대체 React18 Supense Fallback 이 뭐야 ○ 도대체 React Server Compoment 가 뭐야 ○ 도대체 번들링이 뭐야 (Code Splitting >다..
-
[멋쟁이사자처럼] 테킷 프론트엔드 스쿨 7기 지원 - 최종 합격Front-end 개발 2023. 6. 24. 07:22
목차 1. 합격 통지 2. 선물 특전 3. 행정 절차 4. 예비 합격 1. 합격 통지 오늘 (주)멋쟁이사자처럼으로부터 최종 합격 문자와 메일을 받았다. 최종 합격자 발표가 3일 뒤로 연기됨으로써 지원자가 기존 정원을 초과 했음을 직감했다. 발표 당일 같이 지원했던 지인의 경우 불안하게 '예비 합격자' 통보를 받았다. 나는 5월 17일부터 프론트엔드 스쿨 7기에 들어가기 위해 노력하는 시간을 보냈다. 온전히 여기에 시간과 노력을 쓴건 아니지만, 총 28일 경과했다. 2023년 5월 17일(수), 사전설명회 2023년 6월 08일(목), 1차 합격 발표 2023년 6월 12일(월), 2차 과제 마감 및 기초 프로그래밍 테스트 2023년 6월 20일(화), 최종 발표 및 행정 등록 (연기) 2023년 6월 2..
-
[멋쟁이사자처럼] 테킷 프론트엔드 스쿨 7기 지원 - 2차 과제 수행Front-end 개발 2023. 6. 8. 17:02
멋쟁이사자처럼에서 진행하는 프론트엔드 스쿨은 제주코딩베이스캠프과 함께한다. *제주코딩베이스캠프 : 제주에서 가장 큰 ICT 교육 행사로 카카오, 구름, 제주산학융합원 등 기업 및 지자체와 함께 진행하고 있는 무료 캠프. 다양한 교육 플랫폼에서 50여개의 동영상 강좌를 제공하고 있음 멋쟁이사자처럼에서 제공한 강의도 제주코딩베이스캠프의 강의다. 2차 영상 과제 및 기초 프로그래밍 테스트 진행 시 필수적으로 제공된 3개의 유튜브 강의들 수강해야 한다. 이번에는 각각의 JavaScript 강의를 보고 과제를 수행 기록을 남겨본다. (06.08.목 ~ 06.12.월) 1. 제주코딩베이스캠프 JavaScript 요약 강의 수강 및 요약 1-0. 기초 프로그래밍 테스트 정보 테스트 목적: 예비 훈련생의 지식 수준 판..
-
[멋쟁이사자처럼] 테킷 프론트엔드 스쿨 7기 지원 - 2차 과제 안내Front-end 개발 2023. 6. 8. 15:22
프론트엔드 스쿨 7기 1차 서류 전형에 합격했다! 이제 2차 과제를 준비해야 하는데 영상 과제와 기초 프로그래밍 테스트 총 2가지 구성되어 있다. 1. 영상 과제 제출 기한 : 2023.06.12(월) 15시까지 제출 방법 : 파일 이름 형식과 용량(300MB 이하 zip 파일)을 준수하여 지정된 구글 폼에 제출 영상 과제 질문 3가지 항목에 대한 답변 (3분) 질문 1. 프론트엔드 스쿨 지원 동기를 포함하여 자기 소개를 해주세요. (약 1분) 질문 2. 프론트엔드 스쿨 과정을 수강하게 될 경우 어떤 점이 가장 기대되는지, 과정이 종료된 후에 나는 어떤 모습으로 성장해 있을지 구체적으로 이야기해주세요. (약 1분) 질문 3. 아래 강의들을 수강하면서 무엇을 새롭게 배웠고 어떤 부분에서 흥미를 느꼈는지, ..
-
[멋쟁이사자처럼] 테킷 프론트엔드 스쿨 7기 지원 - 1차 자소서 (합격)Front-end 개발 2023. 5. 27. 20:32
처음 개발을 시작하거나, 경쟁률로 인해 떨어질 수도 있는 프론트엔드 교육을 신청하는데 막연하고 불안한 사람들을 위해 지원 서류를 공유합니다. 비록 같은 성과 과정을 겪지는 않았기 때문에 직접적인 도움이 될 수 없을지도 모릅니다. 하지만 제가 어떤 포인트에 맞춰 자기소개서를 작성했는지는 보시면 자소서 작성에 도움이 될 것이라 생각합니다. 개발자들 화이팅! 👍 합격 문자 합격 문자 합격 이메일 나의 제출 답변 질문 1. 프론트엔드 개발에 관심을 가지게 된 계기와 프론트엔드 개발자가 되기 위해 노력했던 시도를 구체적으로 기술해주시고 그 시도를 통해 얻은 결과물과 깨달은 점을 설명해주세요. (최대 500자) > 강력한 의지가 드러나는 배경 > 꾸준하고 다양한 시도들과 이를 통해 얻은 결과물 또는 깨달은 점 1...
-
[멋쟁이사자처럼] 테킷 프론트엔드 스쿨 7기 지원 - 자기소개서 항목Front-end 개발 2023. 5. 18. 03:45
자기소개 질문 항목 질문 1. 프론트엔드 개발에 관심을 가지게 된 계기와 프론트엔드 개발자가 되기 위해 노력했던 시도를 구체적으로 기술해주시고 그 시도를 통해 얻은 결과물과 깨달은 점을 설명해주세요. 질문 2. 팀의 목표를 달성하는 과정에서 갈등이 생겼을 때 어떤 식으로 문제를 해결했는지 구체적으로 작성해주세요. (문제가 발생한 상황과 이를 해결하기 위해 기울인 노력과 방법, 나만의 노하우 등을 구체적으로 작성해주세요) 질문 3. 프론트엔드 스쿨은 4개월 동안 전일제로 진행되는 몰입된 교육 과정입니다. 4개월 동안 효과적인 학습을 진행하기 위한 학업 계획과 취업 계획을 구체적으로 작성해주세요. (일일, 주간, 월간으로 세분화하여 학업 계획(주말 계획 포함)과 단계적인 취업계획을 작성해주세요) 기타 정보 ..
-
[용어] 스프린트(Sprint) - 단기 기획 및 실행 프로세스Front-end 개발/FE 용어 2023. 5. 18. 00:27
Sprint ? 영알못이라 잘 모르겠다. 영한사전에 검색해보면, sprint 1. [동사] (짧은 거리를) 전력 질주하다 [빨리 헤어쳐 가다] 2. [명사] (달리기수영 등의) 단거리 경기 3. [명사] 전력 질주 라고 나온다. 즉, 전력 질주 하겠다는 의미인데 요즘 IT 분야의 기획, 디자인, 개발에서 사용되는 것 같다. IT 분야에서는, 스프린트(sprint) 는 5일간의 단기간 프로젝트 수행법으로 사용된다. 한번의 선택으로 방향전환이 어렵거나 위험성이 따르는 큰 일을 할 때, '해보지 않고서 알 수 없는 걸?' '무엇을 선택해야할 지 모르겠어!' '무엇이 더 좋을지 지금은 확신이 서지 않아!' 등의 생각을 들지 않던가? 스프린트는 위와 같은 상황에 적용할 수 있는 적절한 수행방법론이 될 수 있다. ..
-
[멋쟁이사자처럼] 테킷 프론트엔드 스쿨 7기 지원 - 사전 설명회Front-end 개발 2023. 5. 17. 17:33
멋쟁이사자처럼 사전설명회 참여 https://www.youtube.com/watch?v=Iz1dXetcHzk [주요 Q&A] 1. 4개월이 몰입하기 좋음 (80일 정도) 2. 다양한 수업 리소스가 있음 - 줌 온라인 교육, 디스코드, 노션 워크스페이스(교안 확인) 사용 - 멘토링 지원, 수준별 특강, 이력서 특강 - 자율 스터디 (회고조, 주말 스터디), 알고리즘 수업 등 있음 3. 영상 과제: 보는사람에게 정성(자막, 화면전환)도 중요 하지만 내용(자세, 마음가짐)이 중요하다. - 제시하는 항목에 충실히 답변하면 합격함 - 프론트엔드 개발자가 되기 위해 무얼 어떻게 했는지 적어라, 어떤 결과까지 만들었다. 를 넣으면 좋음 - 성장의지, 협업능력, 문제해결능력, 커뮤니케이션 내용을 녹여서 자소서를 써라...