포트폴리오 강의
•
포트폴리오 문서(or 경력기술서)
◦
다른 직무 경험(ex: 교육) 이 있으면 자기소개서나 포트폴리오에 녹이기
◦
프로젝트 진행 한 것 위주로 작성
▪
기간
▪
인원
▪
기능
▪
기술스택 - 예시
▪
설계 문서
•
ERD - DB 설계 (erdCloud)
•
와이어프레임 - figma (디자인)
•
Sequence Diagram - 서비스 로직
•
Flow Chart
•
중요한 포인트는 코드를 보지 않고도 한눈에 파악가능한 설계도
▪
트러블 슈팅
•
인상깊은 버그나 테스트 상황
•
어려웠던 경험을 극복한 사례
회사 분석 참고 사이트
참고사항
좋은 회사일 가능성 높은 곳
•
기술 스택이 상세하게 되어 있다
◦
프레임워크, DB, 인프라, 비동기 기술, No SQL, Cloud 기술(쿠버네티스, 도커 등등) 등등 (기술적으로 복잡한 경우는 대규모 서비스일 가능성이 높기 때문)
◦
일반적으로 간단한 전산실 규모 SW는 기술 스택이 단순
•
테스트를 중요시한다
◦
테스트 코드 작성 필요
•
문서화를 잘한다 (면접가서 물어볼 수 있는 부분 - 공고에 잘 없음 있으면 기술 공유 잘하는지로 되어 있음)
•
신입을 키우려는 회사(사수도 있고, 개발문서도 작성하고 배포나 CI/CD/Test 자동화를 하는 회사)
◦
기본적으로 업무에 자동화를 하는 회사
— 아래 포인트는 정답은 없는 것으로 보입니다
•
고민할 포인트
◦
B2C
◦
B2B
•
고민할 직무
◦
웹서비스 회사 ⇒ 택
◦
솔루션회사 ⇒ 택
◦
SI/SM/웹 에이전시
◦
전산실 ⇒ OUT!!
교육이 끝난 후! (이때가 중요)
본인 스케줄에 맞추어 학습 루틴 만들기 (아래는 예시)
오전: 잡 서치 및 입사지원
오후: 코딩 테스트 문제 풀이
저녁: 기술 블로그 쓰기, 글 쓰면서 간단한 예제는 직접 구현해서 테스트 해보기
교육 후 2주내로 입사 문서 완성 시키기 (완성할 목록)
1.
이력서
2.
자기소개서
3.
포트폴리오 문서
입사지원하면서 코딩 테스트 문제 + 기술 정리 글쓰기 및 예제 구현 해보기 루틴 진행하면서
면접 기회가 오는 것을 준비할 것
기술 면접 준비
면접 후 데이터 관리
지원회사 | 직무 | 장점 | 단점 | 연봉 | 평판 | 면접 후기 |
아임웹 | 백엔드 | 대용량 경험가능 | 웹 에이전시?? | ?? | 나쁘지 않음 | 기술적인 질문이 많음 |
프론트엔드 테스트 관련 메모
1.
Web의 3요소:
a.
HTML, CSS, Javascript
b.
HTML : 뼈
c.
CSS : 피부, 화장
d.
Javascript : 근육, 인성
2.
HTML
a.
시맨틱 태그 : 포함된 콘텐츠가 어떤 의미를 가지고 있는지 목적을 명확히 하기 위해 사용하는 태그
i.
종류: header, main, footer, nav, aside, article, section, address ….
b.
인라인 태그, 블록 태그
i.
인라인 태그: 인라인 태그끼리 수평으로 나열된다.
1.
<a>, <img>, <span>, <br>, input …
ii.
블록 태그: 블록 태그끼리 수직으로 나열된다.
1.
<div>, <h1>~<h6>, <p>, main, ul, li, form…
3.
Input 태그 : 사용자로부터 입력을 받아오는 태그
a.
type 속성 : text, password, email, tel, submit, radio, checkbox, hidden
4.
HTML 안에서 스타일 지정 방법 :
a.
<style></style>
b.
<link src=~></link>
5.
CSS
a.
선택자
i.
태그: 태그명
<a href=”https://naver.com id="link" class="naver"></a>
태그 :
a {
background-color: ‘red’;
}
클래스
.naver {
background-color: 'red';
}
아이디
#link {
background-color: 'red';
}
<div>
<a href="https://naver.com" id="link" class="naver">네이버</a>
<p>
<a href="https://naver.com" id="link1" class="naver">네이버</a>
<a href="https://kakao.com" id="link2" class="kakao naver">네이버</a>
</p>
</div>
div a { } - 내 핏줄이면 다 된다. (div의 핏줄인 a 태그의 스타일 지정)
p > a - p가 직접 배아파 낳은 자식
.naver.kakao { } - 모두 해당 항목
.naver, .kakao {} - naver 클래스이거나, kakao 클래스인 경우
HTML
복사
6.
JavaScript
a.
변수 선언
i.
var : 함수 스코프, 옛날거, 변수
ii.
let : 블록 스코프, 최신거, 변수
iii.
const: 블록 스코프, 최신거, 상수(불변)
b.
타입
i.
Number, BigInt, String, Boolean, Symbol, … 나머지는 object
ii.
typeof 사용 시 6가지 타입만 나옴
c.
배열 메소드
i.
find : 배열에서 조건에 만족하는 첫 번째 특정 요소를 반환
ii.
foreach : 배열 반복
iii.
map : 새로운 배열 반환
iv.
filter : 조건에 만족하는 배열 반환
v.
reduce : 값 반환
vi.
some : 존재 유무 Boolean 반환
d.
구조 분해 할당
const choi = { name: "최인규", age: 20, job: "TEACHER" };
const { name, age, job } = choi;
console.log(name, age, job);
JavaScript
복사
e.
spread 연산자
const arr1 = [ "블랙핑크", "에스파", "아이즈원" ];
const arr2 = [ ...arr1 ]
console.log(arr1 == arr2); // false
JavaScript
복사
7.
Jquery
a.
가장 인기있는 자바스크립트 라이브러리로…적은 코드 작성으로 다양한 기능을 제공하는 것이 특징입니다. (어떤 기능이냐면…) HTML 요소를 조작, 이벤트 추가, 변경, 삭제 또는 CSS 변경까지 수행 가능하다.
b.
또한 크로스 브라우징을 지원합니다.
c.
CDN 방식으로 사용하거나, 직접 라이브러리를 다운받아 사용 가능하다.
d.
$(document).ready = window.onload()
i.
document - html을 의미
e.
jquery에서 html 요소를 불러오는 방법
i.
태그명, 아이디, 클래스 이용
f.
each
$.each(!!, function(@@, $$) {
console.log()
});
!! : 배열
@@ : 인덱스
$$ : value
JavaScript
복사
8.
프론트엔드 일반상식
a.
서버사이드 렌더링(SSR) - JSP, Django
i.
장점: 완성된 페이지, 검색 최적화
ii.
단점: 변경되는 부분만 변경하는 것이 아니라, 전체 페이지를 클라이언트로 보내는 형식
b.
클라이언트사이드 렌더링(CSR) - React, Vue, Angular
i.
장점:
1.
변경되는 부분만 변경해서 딱 보여줌
2.
브라우저에서 렌더링을 해주기에 사용자에게 더 가까움
3.
중요한 비밀 정보들을 서버에 전달하지 않고, 브라우저에서 관리하기 때문에 좋음
ii.
단점:
1.
검색 최적화가 부족…
2.
root에 모두 불러와서 처음에 가져오기 때문에 첫 로딩이 좀 느림
9.
웹 스토리지
a.
웹 브라우저(클라이언트) 에서 데이터를 저장하는 저장소
b.
로컬스토리지, 세션스토리지
c.
쿠키와의 차이점
i.
쿠키는 4kb 텍스트만 저장할 수 있음
ii.
웹 스토리지는 크롬 기준으로 5MB 정도 저장할 수 있음
10. 화면의 새로고침 없이 서버와 통신(XMLHttpRequest)을 해서 그 결과를 받아 화면의 일부분만을 갱신해주는 기술 - Ajax, Axios, 비동기통신