현직자 특강
의도적인 반복훈련을 해라
어려울 수록 가치있는 일이며 도전할 이유가 있는 것이다->할수록 어려워지는 것이 당연한 것
일주일에 40이상, 그이외의 시간도 수업에 할애해야 한다.
평소 좋은 태도를 항상 유지하면 기회를 잡기 유리해진다.
수업시간인 평일에 이론을 공부한 뒤 주말에는 실습을 해야한다!
->이론 암기만 하는 것은 시험을 위한 공부, 모든것은 실제로 실습해봐야 나의 것으로 만들 수 있다
끊임없이 제대로 된 기능을 하는 사이트(제품)을 만들어나가는 것이 가장 효율적이고 빠른 공부법
적절한 태도
1. 개방성과 호기심->열린 마음으로 새 기술과 개념을 배우고 끊임없이 변하는 개발지식을 호기심을 지니고 배우려는 자세가 필요
2. 적극적 참여 ->부캠은 실습중심 수업이므로 수동적으로 강의를 듣기보다 적극적으로 질문해가야 한다
3. 끈기와 인내심-> 오류를 해결하는데 많은 시간이 걸릴 수 있으니 포기하지 않고 문제를 해결할 끈기가 필요
4. 협력과 팀워크->동료와 협업하고 서로의 의견을 존중해야 한다
개발해야 할 소프트 스킬
1. 문제해결 능력
2. 커뮤니케이션->협업시 비개발인에게도 설명가능해야 한다
3. 시간관리->단기간에 많은 내용을 학습해야 하므로 우선순위를 정해 학습해야 한다
4. 자기주도 학습->스스로 학습 계획을 세우고 추가적으로 공부해야 한다
5. 네트워킹 능렬->지속적인 관계를 유지하는 것이 유리
6. 적응력-> 새로운 기술이나 도구가 나오면 빠르게 배우고 적용해야 함
html/css: 웹페이지의 기본 구조와 스타일 구성
퍼블리셔: 디자이너의 웹디자인은 html/css로 표현
JavaScript
3줄 wiki 이론 -모든것을 알아야 한다
- 몰랐던 무언가를 배우면 3줄로 명료하고 확실하게 설명할 수 있어야 cs지식을 내것으로 만들 수 있다->면접 연습도!!
->오래걸리는 작업이므로 틈틈이 주기적으로 정리해두어야 한다
공부방법
-무작정 클론코딩하는 것은 그리 효율적이지 않다.
=> figma 예제 디자인을 참고해 코딩하는 것이 더 효과적
https://www.figma.com/templates/web-design-inspiration/
20+ Web Design Inspiration & Templates | Figma
Start your design process with free website editable templates for inspiration. Sort through hundreds of website designs. Get started for free today!
www.figma.com
1. figma를 활용해 코딩한다 (간격, 크기, 이미지등을 빠르게 찾을 수 있음)
2. chatGPT를 사용해 작성을 완료한 코드를 채점하고 피드백 받는다. (이때, 단순히 코드를 달라고 하면 성장을 막는것)
웹 개발의 핵심 개념
-dom 조작
"DOM"은 웹 개발에서 "Document Object Model"의 약자로, HTML, XML 문서의 구조화된 표현을 의미합니다. DOM은 웹 페이지를 구성하는 요소들을 트리 구조로 표현하며, 자바스크립트 같은 프로그래밍 언어를 사용해 이 트리의 요소들을 동적으로 조작할 수 있습니다. 이를 통해 웹 페이지의 내용이나 구조를 실시간으로 변경할 수 있습니다.
매일 알고리즘 문제를 1시간동안 풀어야 한다 ->알고리즘 테스트 대비
-자바스크립트의 함수, 비동기화 등 여러 문법이 아니라 기본문법만을 가지고도 풀 수 있다
a. 돔조작 선수과정
1. 자료구조-트리구조
2. 브라우저 렌더링 과정
3. 자바스크립트 심화 ->객체지향 프로그래밍 (oop)
b. 이벤트 핸들링
1. 이벤트 기본개념
2. 콜백함수
3. 비동기 프로그래밍
c. Ajax와 API호출
1. HTTP프로토콜
2. RESTful API 기본->원칙과 구조를 이해하고 설명할 수 있어야 한다
블로그 포스트는 배운문법을 정리하는 것보다 느낀점이나 피드백으로 느낀 사항 등 "나의 의견"을 적는것이 좋다
-git에 수시로 작성하는 것이 좋다->git을 못쓰는 개발자는 없다
-git merge를 통해 출돌 시나리오를 인위적으로 만들고 해결하는 연습을 하는 것이 좋다
-브랜치 전략 학습=>git branch를 통해 여러 브랜치 전략을 사용
브랜치 전략은 다양하다. 어떤 기술이든 장단점이 있다. 개발자는 특히 아키텍트는 기술을 선택할때 트레이드 오프한다. 누군가에게 단점이 나에겐 장점이 될 수 있다.
1. 웹 기초
- HTML, CSS, JavaScript 공부: 웹 개발의 기초 언어인 HTML, CSS, JavaScript를 학습합니다. HTML은 웹페이지의 구조를 정의하고, CSS는 스타일을 적용하며, JavaScript는 동적인 기능을 추가합니다.
- 프로그래머스 알고리즘 문제 풀이: 알고리즘 문제를 풀어 프로그래밍 사고 방식을 키우고 문제 해결 능력을 향상시킵니다.
- 깃허브에 프로젝트 올리기: 코드 버전 관리 및 협업을 위해 Git과 GitHub를 사용하여 자신의 프로젝트를 관리하고 공개합니다.
- 터미널 명령어 공부: 터미널(명령 셸)과 명령어 기반 작업을 이해하고, 디렉토리 구조 탐색 및 파일 관리 작업을 익힙니다. 터미널 명령어는 시스템 작업을 효율적으로 수행하는 데 중요한 도구입니다.
2. 웹 개발 핵심 개념
- DOM 조작: 웹 페이지의 구조를 동적으로 조작하는 방법을 이해합니다. JavaScript를 사용해 HTML 문서의 요소를 추가, 수정, 삭제할 수 있습니다.
- Git 기본 개념 및 버전 관리: Git의 기본 개념과 버전 관리 방법을 학습하여 코드 변경 사항을 추적하고 협업할 수 있는 능력을 기릅니다.
- 심화 자바스크립트: JavaScript의 심화 개념을 공부하여 언어의 깊은 이해와 고급 기능을 활용할 수 있도록 합니다.
3. 소프트 스킬
- 좋은 태도 유지: 성실하고 끈기 있는 자세가 중요합니다. 이는 미래에 좋은 기회나 멘토를 만날 수 있는 기회를 제공할 수 있습니다. 긍정적이고 지속적인 노력이 성공에 큰 영향을 미칩니다.
4. 프레임워크 및 라이브러리
- 리액트: 사용자 인터페이스를 효율적으로 구축할 수 있는 React 라이브러리를 학습합니다. 컴포넌트 기반 구조를 통해 재사용 가능한 UI 요소를 만들 수 있습니다.
- Next.js: React를 기반으로 한 프레임워크인 Next.js를 학습합니다. 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원하며, SEO 최적화 및 성능 개선에 유리합니다.
5. 프로젝트 및 포트폴리오
- 프로젝트 준비: 혁신적인 아이디어보다 현재의 지식을 최대한 활용하는 것이 중요합니다. 프로젝트에서 문제를 어떻게 해결했는지를 중심으로 평가받으며, 아이디어보다 개발 과정과 결과물이 더 중요합니다.
- 포트폴리오 구성: 포트폴리오에는 자신이 해결한 문제와 적용한 기술을 명확하게 보여주는 것이 중요합니다. 프로젝트의 아이디어보다는 기술적 접근 방식과 문제 해결 과정이 평가됩니다.
6. 신입 사원 평가 기준
- 기본기와 성실함: 신입 개발자는 기본적인 기술 스택(자바스크립트, 리액트, Next.js 등)에 대한 이해와 적용 능력이 중요합니다. 최신 기술보다 탄탄한 기본기가 우선시됩니다.
- 기술 깊이와 적응력: 기본기를 깊이 있게 이해하고, 새로운 기술을 빠르게 배우고 적응할 수 있는 능력이 중요합니다. 넓고 얕은 지식보다는 깊이 있는 이해가 선호됩니다.
이 가이드는 웹 개발의 기초부터 고급 개념까지 체계적으로 학습할 수 있도록 돕기 위한 내용으로, 각 단계에서 필요한 기술과 접근 방법을 정리했습니다.
개인 프로젝트와 포트폴리오 구축 가이드
1. 포트폴리오 강화
- 개인 프로젝트의 중요성: 개인 프로젝트를 많이 수행하고, 이를 GitHub에 올려 포트폴리오를 만드는 것은 매우 중요합니다. 프로젝트를 통해 자신의 기술과 문제 해결 능력을 구체적으로 보여줄 수 있습니다.
- 프로젝트의 형태:
- 퍼블리싱 프로젝트: HTML과 CSS를 사용하여 웹사이트의 구조와 디자인을 신경 써서 제작합니다. Figma와 클론 코딩을 이용해 디자인을 구현한 프로젝트를 갤러리화해 포트폴리오에 포함시키는 것이 좋습니다.
- 미니 프로젝트: 학습한 내용을 실제로 적용하여 미니 프로젝트를 만들고 배포합니다. 이러한 프로젝트는 신뢰도를 높이고 실제 능력을 증명하는 데 도움이 됩니다.
- 포트폴리오의 구성:
- 퍼블리싱: HTML 구조와 CSS 스타일링을 잘 구현한 프로젝트를 보여주어야 합니다. 페이지의 레이아웃, 반응형 디자인, 사용자 경험을 고려한 설계가 중요합니다.
- 프로그래밍: JavaScript와 React, 또는 다른 프레임워크를 활용하여 구현한 기능을 포트폴리오에 포함시킵니다. 기능별로 어떤 문제를 해결했는지를 구체적으로 설명하는 것이 좋습니다.
2. 이력서 및 자기소개서 작성
- 이력서 맞춤화:
- 다양한 이력서 준비: 회사마다 요구하는 기술과 직무가 다를 수 있으므로, 하나의 이력서를 여러 곳에 보내는 것보다 각 회사에 맞는 맞춤형 이력서를 준비하는 것이 효과적입니다.
- 자기소개서: 회사의 문화나 직무에 맞춰 자기소개서의 내용도 조정합니다. 각 회사의 요구사항을 반영하여 자신이 해당 회사에 적합한 후보자임을 부각시킬 수 있습니다.
3. 자바스크립트와 프레임워크
- 자바스크립트 프레임워크:
- React: 현재 가장 많이 사용되는 자바스크립트 프레임워크입니다. 컴포넌트 기반의 UI 개발에 매우 유용하며, 대규모 애플리케이션 개발에 적합합니다.
- Angular와 Vue.js: 이 두 프레임워크도 유용하지만, React만큼 널리 사용되지는 않습니다. 그러나 Angular와 Vue.js도 유망한 기술이므로 관련 지식을 갖추는 것도 좋습니다.
- 백엔드 기술:
- Node.js: 서버 사이드 JavaScript 환경으로, 자바스크립트 기반의 백엔드 개발에 적합합니다.
- Next.js: React의 프레임워크로, 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원합니다. 프론트엔드와 백엔드 기술을 동시에 다룰 수 있게 해줍니다.
- 학습 우선순위:
- 프론트엔드 우선: 프론트엔드 기술에 대한 이해와 실력을 확실히 쌓은 후, 백엔드 기술에 도전하는 것이 좋습니다. 프론트엔드와 백엔드를 함께 다루는 것은 다소 복잡할 수 있으므로, 기본기를 탄탄히 한 후에 백엔드 기술을 배우는 것이 효과적입니다.
4. 포트폴리오와 이력서 작성의 팁
- 프로젝트 다양화: 가능한 다양한 프로젝트를 포트폴리오에 포함시켜 자신이 넓은 기술 스택을 가지고 있음을 보여줍니다.
- 기술적 설명: 각 프로젝트의 기술적 설명과 자신이 맡은 역할을 명확하게 기재합니다.
- 실제 배포된 프로젝트: 실제로 배포된 프로젝트가 있다면, 포트폴리오에서 실제 URL을 제공해 보여주는 것이 좋습니다.
이 가이드는 웹 개발자의 포트폴리오를 강화하고 이력서를 효과적으로 작성하는 데 도움을 줄 것입니다. 기술적인 역량을 명확히 하고, 맞춤형 이력서와 포트폴리오로 채용 기회를 높이세요.
Q&A
이력서나 포트폴리오는 양보다 질이라고 생각하는데 비슷한 기술을 활용한 프로젝트는 하나만 기재하는 편이 나을 까요?
오늘 오후 5:18 내가 한 프로젝트가 있으면 다 기술하는 것이 좋고. 쓸데없는 양이 많으면 안좋겠다. 그런데, 내가 학습한 내용을 확실하게 이해하고 있고, 이러한 문제를 이렇게 해결했다라는 내용이라면 좋을 수 있다.
보통 프론트엔드와 백엔드는 어떻게 나뉘나요? 프로젝트를 하다 보면 지금 내가 하고있는 작업이 어떤 분야인지 헷갈릴 때가 있어서요...
블로그에 내가 리액트 훅을 학습하기 위해서.. 어디서 활용이 많이 될까? 고민하고 그런 사이트를 1,2페이지를 만들어서 연습도하고 어려운점이라는 해결하는 과정을 (스스로 학습해서 문제를 해결하는 과정)을 블로그, 실제로 서버에 올려서 보여주기도 하고,
이력서를 보면서 질문을 한다.
이때 대답을 잘하면
API 설게는 당연히 백엔드가 더 잘한다.[오후 5:21]누군가 API설계는 프론트 개발자가 한다. <-- 이렇게 주장하는 사람 본적 있음...[오후 5:21]API 성능이 굉장히 중요하기 때문에. 이 응답결과도 백엔드에서 고민하면서 만들어야 한다.[오후 5:22]프론트에서는 이러한 요청과 이러한 데이터가 오면좋겠어...[오후 5:22]HTML, CSS, JavaScript... Next.js( 백엔드 같은 느낌이 들기도 한다.... 실제로 백엔드 코드같기도...)[오후 5:23]앞으로 점점 이것저것 잘할 필요가 있다.[오후 5:23]즉.... 세상은 풀스텍을 원할 것이다.
경력 단절이 있는 사람의 이력서가 들어왔을 경우 영향을 많이 끼칠까요??
SI 회사에서 많이 근무한 사람들을 면접 봤는데.....
SI 회사에서 기술적으로 많은 것을 요구하지 않는다. 솔루션을 이용, 단순개발.
회사에서 공부하세요 라는 말을 안한다.
경력이 4년 - 물경력
여러분들이 가고 싶은 회사 3,5차 경력.
내 실력이 점점 향상할 수 있는 회사.
경력 단절이 있는 사람의 이력서가 들어왔을 경우 영향을 많이 끼칠까요??
신입이면 경력단절이어도 신입이지 않을까?
너 나이가 좀있는데, 어린치구가 코드 리뷰할때 좀 싸납게 하면 어떠냐?
자존감인 높은 사람.
자존심이 높은 사람(X)
프론트엔드 개발자는 소통을 잘해야 한다고 하셨는데 기획자, 디자이너, 백엔드와 협업을 할 때 어떤 자세/방식으로 소통을 하는 것이 좋을까요?
신입 개발자를 채용하실 때, 개발 실력 외에 어떤 요소가 가장 중요한 영향을 미칠 수 있을까요? 포트폴리오, 자기소개서, 태도, 인상 등 어떤 부분에서 이사람을 꼭 뽑아야겠다는 생각이 들었을 지 궁금합니다
프론트엔드 개발자를 뽑겠다. 그것에 맞는 이력서. (나는 진짜 훌륭한 프론트엔드 개발자거든요. 난 훌륭한 프론트 엔드 개발자가 될꺼거든요. )[오후 5:36]억지로 뭔가 한것 같다.[오후 5:37]나는 팀에서 항상 별명이 "갓**"이었어요.
이력서 - 문제를 잘 해결할 것 같다.[오후 5:38]지금은 B, 앞으로 A+[오후 5:39]개발 잘하는 사람은 글도 잘쓴다.
책 많이 읽어야 한다.길고 글자 작고 슈카월드 - 영웅문
이거를 누가 시켜서 한게 아니구나
로그 글, github repository에 있는 소스, 실제 동작하는 웹페이지가 뭔가 목적을 가지고 유기적으로 잘 만들었구나
부트캠프 수료 후에 이력서나 포트폴리오 준비 말고 취업을 위해 가장 우선순위로 두고 해야할 것이 무엇이 있을까요? (알고리즘/프로젝트/CS공부 등..)
알고리즘 (다음주부터 매일) 프로젝트 - 장기프로젝트 , 토요일(하루젝트 프로젝트) 책의 예제 , 수업의 예제는 단순 문법을 익히는 용도 한페이지라도 html, css, 제대로 자바스크립트가 동작하도록 만들기를 하면 매일하는 공부 (알고리즘) 월~금 (교육 따라가기 위한 공부) 토, 금(쉴때) - 내가 배운 내용으로 작지만 실제돌아가는 프로젝트 하기 주력 공부, git, 터미널, CS, 알고리즘
그래서 어떤 사이트의 페이지를 봐도, "뭐 이정돈 금방 만들겠네." 이런 자신감!! 이런 자신감을 가지면 면접볼때는 자신감있게 대답가능 3줄 위키...(매일) - 내가 배운거 내 입으로 설명할 수 있어야 한다.
보통 알고리즘을 풀때, 한문제에 어느정도 시간을 두고 풀어야 할 지 감이 잡히질 않습니다. 어느정도 시간을 투자해야할지...
쉬운 문제는 1시간 5 어려운 문제는 2,3일 걸릴 수도 있다. 한시간 몇개를 푼다..이런목적은 잡지말고.... 하루에 시간을 할당해서 푼다. 알고리즘을 잘푼다고 프로그래밍 개발 잘하는거 아닙니다.
신입은 신입다워야 한다 너무 높은 단계의 기술보다 기본기가 탄탄함을 보여주는게 좋다. 현실에 충실한게 좋다. 회사에서의 개발을 중요시해야한다. 괜히 다른 새기술에 시선을 두는것보다 내가 배운내용을 잘 이해하고 적용하고 설명할 수 있는게 중요하다. 부캠에서 강사가 해준대로 복붙하면 안되고 나만의 포폴을 써야한다. 아무튼 기본기가 중요!!