관심있는 분야로 취업하기 위한 예상질문을 ai에게 물어보았을 때
- 질문 : 나는 신입 개발자이고 프론트엔드 관련으로 한국에서 취업하려고 해 취업 면접 질문을50개정도 중요한 순서대로 만들고 모범답변을 간단하게 작성해줘
- 답변
- 핵심 기술 및 개념
1. 브라우저의 렌더링 원리에 대해 설명해주세요.
HTML 파싱 → DOM 트리 생성 → CSS 파싱 → CSSOM 트리 생성 → 렌더 트리 생성 → 레이아웃 → 페인팅 순으로 진행됩니다.
2. 호이스팅(hoisting)이란 무엇인가요?
변수와 함수 선언이 스코프의 최상단으로 끌어올려지는 JavaScript의 동작을 말합니다
3. 클로저(Closure)에 대해 설명해주세요.
함수와 그 함수가 선언된 렉시컬 환경의 조합으로, 내부 함수가 외부 함수의 변수에 접근할 수 있게 합니다
4. REST API란 무엇인가요?
웹 서비스를 위한 아키텍처 스타일로, 자원을 URI로 표현하고 HTTP 메서드로 자원에 대한 행위를 정의합니다.
5. JavaScript의 this 키워드 용법에 대해 설명해주세요.
this는 현재 실행 컨텍스트를 가리키며, 함수 호출 방식에 따라 다르게 바인딩됩니다
6. 브라우저 저장소의 차이점(LocalStorage, SessionStorage, Cookie)을 설명해주세요.
LocalStorage: 영구 저장, SessionStorage: 세션 동안 저장, Cookie: 만료 기간이 있는 작은 데이터 저장
7. JavaScript에서 비동기 프로그래밍 방법을 설명해주세요.
콜백 함수, Promise, async/await를 사용하여 비동기 작업을 처리할 수 있습니다
8. Event Loop에 대해 설명해주세요.
단일 스레드 기반의 JavaScript가 비동기 작업을 처리하는 메커니즘입니다
9. 타입스크립트의 장점은 무엇인가요?
정적 타입 검사, 더 나은 개발자 경험, 코드 가독성 향상 등이 있습니다.
10. SPA, CSR, SSR의 차이점을 설명해주세요.
SPA: 단일 페이지 애플리케이션, CSR: 클라이언트 측 렌더링, SSR: 서버 측 렌더링 - 프론트엔드 프레임워크 및 라이브러리
11. React의 생명주기 메서드에 대해 설명해주세요.
컴포넌트의 마운트, 업데이트, 언마운트 시점에 실행되는 메서드들입니다
12. Virtual DOM이란 무엇이며, 어떤 이점이 있나요?
실제 DOM의 가벼운 복사본으로, 렌더링 성능을 최적화합니다
13. React Hooks의 장점은 무엇인가요?
클래스 컴포넌트 없이 상태 관리와 생명주기 기능을 사용할 수 있게 해줍니다
14. Redux의 핵심 개념을 설명해주세요.
액션, 리듀서, 스토어를 통해 애플리케이션의 상태를 관리합니다
15. Vue.js와 React의 주요 차이점은 무엇인가요?
Vue는 템플릿 기반, React는 JSX를 사용하며, 각각의 상태 관리 방식이 다릅니다 - CSS 및 스타일링
16. CSS에서 margin과 padding의 차이점을 설명해주세요.
margin은 요소 외부 여백, padding은 요소 내부 여백입니다
17. CSS의 position 속성값들의 차이를 설명해주세요.
static, relative, absolute, fixed, sticky 등이 있으며 요소의 위치 지정 방식이 다릅니다
18. Flexbox와 Grid의 주요 특징과 사용 사례를 설명해주세요.
Flexbox는 1차원, Grid는 2차원 레이아웃에 적합합니다
19. CSS 전처리기(Sass, Less 등)의 장점은 무엇인가요?
변수 사용, 중첩 규칙, 믹스인 등으로 CSS 작성을 효율적으로 만듭니다
20. 반응형 웹 디자인을 구현하는 방법을 설명해주세요.
미디어 쿼리, 유동적 그리드, 유동적 이미지 등을 사용합니다 - 성능 최적화 및 보안
21. 웹 성능 최적화 방법에 대해 설명해주세요.
이미지 최적화, 코드 분할, 캐싱, 지연 로딩 등을 사용합니다
22. CORS란 무엇이며, 어떻게 대처할 수 있나요?
교차 출처 리소스 공유로, 서버 설정이나 프록시 서버 사용으로 해결할 수 있습니다
23. XSS와 CSRF 공격에 대해 설명하고 방어 방법을 제시해주세요.
XSS: 입력 검증, CSRF: 토큰 사용 등으로 방어할 수 있습니다
24. 웹 접근성을 향상시키는 방법에 대해 설명해주세요.
시맨틱 HTML 사용, 대체 텍스트 제공, 키보드 접근성 보장 등이 있습니다
25. 프로그레시브 웹 앱(PWA)의 주요 특징은 무엇인가요?
오프라인 작동, 푸시 알림, 홈 화면 추가 등의 기능을 제공합니다 - JavaScript 심화
26. 프로토타입 상속에 대해 설명해주세요.
객체가 다른 객체의 속성과 메서드를 상속받는 JavaScript의 메커니즘입니다
27. 이벤트 위임(Event Delegation)이란 무엇인가요?
여러 요소의 이벤트를 상위 요소에서 효율적으로 처리하는 기법입니다
28. Promise와 async/await의 차이점을 설명해주세요.
Promise는 비동기 작업을 체이닝으로, async/await는 동기 코드처럼 작성할 수 있게 해줍니다
29. 모듈 번들러(예: Webpack)의 역할은 무엇인가요?
여러 모듈을 하나의 파일로 번들링하여 로딩 성능을 개선합니다
30. JavaScript의 실행 컨텍스트에 대해 설명해주세요.
코드가 실행되는 환경으로, 변수 객체, 스코프 체인, this 바인딩을 포함합니다 - 최신 트렌드 및 기술
31. GraphQL의 장점은 무엇인가요?
클라이언트가 필요한 데이터만 요청할 수 있어 오버페칭 문제를 해결합니다.
32. 서버리스 아키텍처의 이점을 설명해주세요.
인프라 관리 부담 감소, 확장성 향상, 비용 효율성 등이 있습니다
33. WebAssembly의 주요 특징과 사용 사례를 설명해주세요.
고성능 웹 애플리케이션 개발을 위한 저수준 언어로, 게임, 비디오 편집 등에 사용됩니다
34. Micro Frontend 아키텍처에 대해 설명해주세요.
대규모 프론트엔드 애플리케이션을 작은 단위로 분할하여 개발하는 방식입니다
35. JAMstack의 개념과 이점을 설명해주세요.
JavaScript, API, Markup의 조합으로, 빠른 성능과 보안성을 제공합니다 - 개발 방법론 및 도구
36. Git flow 전략에 대해 설명해주세요.
브랜치 관리 전략으로, master, develop, feature, release, hotfix 브랜치를 사용합니다
37. CI/CD 파이프라인의 중요성은 무엇인가요?
지속적 통합과 배포로 개발 효율성과 품질을 향상시킵니다
38. TDD(테스트 주도 개발)의 장점은 무엇인가요?
코드 품질 향상, 리팩토링 용이성, 문서화 효과 등이 있습니다
39. 코드 리뷰의 중요성과 효과적인 방법을 설명해주세요.
코드 품질 향상, 지식 공유, 팀 협업 강화 등의 효과가 있습니다
40. 애자일 방법론의 핵심 원칙을 설명해주세요.
반복적인 개발, 유연한 대응, 고객과의 협력 등을 중시합니다 - 소프트 스킬 및 커리어
41. 팀 내 의견 충돌 시 어떻게 해결하시나요?
객관적 데이터를 바탕으로 토론하고, 팀의 목표를 우선시합니다
42. 새로운 기술을 학습하는 본인만의 방법은 무엇인가요?
공식 문서 학습, 실제 프로젝트 적용, 커뮤니티 참여 등을 활용합니다
43. 프로젝트 일정이 지연될 때 어떻게 대처하시나요?
우선순위를 재조정하고, 팀과 소통하여 해결 방안을 모색합니다
44. 사용자 경험(UX)을 개선하기 위해 어떤 노력을 하시나요?
사용자 피드백 수집, A/B 테스트, 접근성 개선 등을 실행합니다
45. 동료 개발자와의 효과적인 협업 방법은 무엇인가요?
명확한 커뮤니케이션, 코드 리뷰, 지식 공유 세션 등을 활용합니다 - 기타 중요 질문
46. 웹 표준과 웹 접근성의 중요성에 대해 설명해주세요.
다양한 사용자와 기기에서의 일관된 경험을 제공하고, 정보 접근성을 보장합니다
47. 브라우저 저장소의 보안 이슈와 대응 방안을 설명해주세요.
민감한 정보는 암호화하여 저장하고, HTTPS를 사용합니다
48. SEO를 위한 프론트엔드 최적화 방법을 설명해주세요.
시맨틱 HTML 사용, 메타 태그 최적화, 페이지 로딩 속도 개선 등이 있습니다
49. 크로스 브라우징 이슈를 해결하는 방법을 설명해주세요.
브라우저 호환성 테스트, 폴리필 사용, CSS 리셋/노멀라이즈 등을 활용합니다
50. 프론트엔드 개발자로서의 본인의 강점과 약점은 무엇인가요?
강점: (개인의 기술적 역량, 소프트 스킬 등을 언급)
약점: (개선하고 있는 부분과 그 방법을 설명)
- 핵심 기술 및 개념
앱 개발 기술 관련 언어
개발자 취직에 좋은 사이트
- 사람인, 원티드, 잡코리아
7월 말에 iOS 신입 개발자로 취업하려고할 때 해야할 것과 필요한 개월 수
- Swift와 UIKit 기초 지식
중요도: 최상
필요 시간: 2-3개월
일정: 3월 중순 - 5월 말 - iOS 앱 개발 실습 및 프로젝트 경험
중요도: 상
필요 시간: 1-2개월
일정: 6월 - 7월 초 - CS 기초 지식 (데이터 구조, 알고리즘, 네트워크, 데이터베이스)
중요도: 중상
필요 시간: 1-2개월 (병행 학습)
일정: 3월 중순 - 5월 말 (Swift/UIKit 학습과 병행) - 버전 관리 시스템 (Git) 사용법
중요도: 중
필요 시간: 1-2주
일정: 6월 초 (프로젝트 시작 전) - RxSwift 또는 Combine 기초
중요도: 중
필요 시간: 2-3주
일정: 6월 중순 - 7월 초 (프로젝트에 적용) - 디자인 패턴 및 아키텍처 (MVC, MVVM) 이해
중요도: 중
필요 시간: 2-3주
일정: 6월 말 - 7월 중순 (프로젝트에 적용) - 협업 및 커뮤니케이션 스킬
중요도: 중
필요 시간: 지속적 개발
일정: 전체 기간 동안 꾸준히 개발 - 포트폴리오 준비 및 이력서 작성
중요도: 중
필요 시간: 1-2주
일정: 7월 중순 - 7월 말
MVC, MVP, MVVM의 차이
- MVC (Model-View-Controller)
- Model: 데이터를 담당해요. 예를 들면, 학교 성적표의 점수들이에요.
View: 화면에 보이는 부분이에요. 성적표를 예쁘게 꾸민 종이라고 생각하면 돼요.
Controller: 데이터와 화면을 연결해주는 역할이에요. 선생님이 성적을 계산하고 종이에 적는 것과 비슷해요. - 장점: 이해하기 쉽고 많이 사용돼요.
단점: 프로그램이 커지면 복잡해질 수 있어요.
- Model: 데이터를 담당해요. 예를 들면, 학교 성적표의 점수들이에요.
- MVP (Model-View-Presenter)
- Model: MVC와 같아요.
View: 화면을 보여주고 사용자 입력을 받아요.
Presenter: Controller 대신 있어요. View와 Model 사이에서 정보를 주고받는 역할을 해요. - 장점: View와 Model이 직접 연결되지 않아 더 깔끔해요.
단점: View와 Presenter가 너무 가까워질 수 있어요.
- Model: MVC와 같아요.
- MVVM (Model-View-ViewModel)
- Model: 여전히 데이터를 담당해요.
View: 화면을 보여주는 역할이에요.
ViewModel: View에 필요한 데이터를 준비해요. 마치 요리사가 재료를 손질하는 것처럼요. - 장점: View와 ViewModel이 덜 의존적이에요. 여러 View가 하나의 ViewModel을 사용할 수 있어요.
단점: 처음에는 이해하기 어려울 수 있어요.
- Model: 여전히 데이터를 담당해요.
과제
1. online Swift compiler를 이용해서 자기 이름 10번 출력
let x = "이송연"
for _ in 1...10 {
print(x)
}
Storyboard, UIView, SwiftUI의 세가지 방법으로 간단한 앱을 만드는 방법
- Storyboard를 사용한 방법
1) Xcode에서 새 프로젝트를 생성하고 "Storyboard"를 선택합니다.
2) Main.storyboard 파일을 엽니다.
3) 인터페이스 빌더를 사용하여 UI 요소(예: 버튼, 레이블)를 드래그 앤 드롭으로 추가합니다.
4) ViewController.swift 파일에서 @IBOutlet과 @IBAction을 사용하여 UI 요소와 코드를 연결합니다.
5) viewDidLoad() 메서드에서 초기 설정을 수행합니다. - UIView를 사용한 방법 (코드로 UI 구현)
1) Xcode에서 새 프로젝트를 생성합니다.
2) ViewController.swift 파일에서 다음과 같이 코드를 작성합니다.
class ViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() let button = UIButton(frame: CGRect(x: 100, y: 100, width: 200, height: 50)) button.setTitle("Click me", for: .normal) button.backgroundColor = .blue button.addTarget(self, action: #selector(buttonTapped), for: .touchUpInside) view.addSubview(button) } @objc func buttonTapped() { print("Button tapped") } }
SceneDelegate.swift에서 window?.rootViewController를 설정합니다. - SwiftUI를 사용한 방법
1) Xcode에서 새 프로젝트를 생성하고 "SwiftUI"를 선택합니다.
2) ContentView.swift 파일에서 다음과 같이 코드를 작성합니다:
struct ContentView: View { @State private var buttonText = "Hello, World!" var body: some View { VStack { Text(buttonText) .padding() Button(action: { self.buttonText = "Button clicked!" }) { Text("Click me!") } .padding() } } }
3) 미리보기 캔버스를 사용하여 실시간으로 UI 변경사항을 확인할 수 있습니다. - 세 가지 방법(Storyboard, UIView, SwiftUI)의 장단점
| 방법 | 장점 | 단점 |
| Storyboard | - 시각적으로 UI를 구성할 수 있어 초보자에게 친숙함 - 빠른 프로토타이핑 가능 - 방대한 UI 객체 라이브러리 제공 |
- 소스 컨트롤이 어려움 - 복잡한 UI에서 관리가 어려워짐 - 자동 레이아웃 문제 해결이 필요함 |
| UIView | - 세밀한 UI 제어 가능 - 성능 최적화에 유리 - 버전 관리가 용이함 |
- 학습 곡선이 높음 - UI 변경 시 즉각적인 시각화가 어려움 - 코드량이 많아질 수 있음 |
| SwiftUI | - 선언적 구문으로 코드가 간결함 - 실시간 미리보기 지원 - 크로스 플랫폼 개발 용이 |
- iOS 13 이상에서만 지원 - 일부 고급 기능 부재 - 새로운 프레임워크로 학습 필요 |
영화진흥위원회 api 사이트에서 추출한, 날짜별 흥행 영화 순위
{
"boxOfficeResult": {
"boxofficeType": "일별 박스오피스",
"showRange": "20250305~20250305",
"dailyBoxOfficeList": [
{
"rnum": "1",
"rank": "1",
"rankInten": "0",
"rankOldAndNew": "OLD",
"movieCd": "20244821",
"movieNm": "미키 17",
"openDt": "2025-02-28",
"salesAmt": "775125720",
"salesShare": "61.7",
"salesInten": "-17794720",
"salesChange": "-2.2",
"salesAcc": "14517970260",
"audiCnt": "80037",
"audiInten": "-2445",
"audiChange": "-3",
"audiAcc": "1465508",
"scrnCnt": "1815",
"showCnt": "6531"
},
{
"rnum": "2",
"rank": "2",
"rankInten": "16",
"rankOldAndNew": "OLD",
"movieCd": "20249251",
"movieNm": "콘클라베",
"openDt": "2025-03-05",
"salesAmt": "94182880",
"salesShare": "7.5",
"salesInten": "90636880",
"salesChange": "2556",
"salesAcc": "138151480",
"audiCnt": "10796",
"audiInten": "10402",
"audiChange": "2640.1",
"audiAcc": "15409",
"scrnCnt": "566",
"showCnt": "1081"
},
{
"rnum": "3",
"rank": "3",
"rankInten": "-1",
"rankOldAndNew": "OLD",
"movieCd": "20240614",
"movieNm": "퇴마록",
"openDt": "2025-02-21",
"salesAmt": "84353660",
"salesShare": "6.7",
"salesInten": "9867280",
"salesChange": "13.2",
"salesAcc": "3043377240",
"audiCnt": "8905",
"audiInten": "914",
"audiChange": "11.4",
"audiAcc": "318301",
"scrnCnt": "794",
"showCnt": "1530"
},
{
"rnum": "4",
"rank": "4",
"rankInten": "-1",
"rankOldAndNew": "OLD",
"movieCd": "20242404",
"movieNm": "캡틴 아메리카: 브레이브 뉴 월드",
"openDt": "2025-02-12",
"salesAmt": "43123980",
"salesShare": "3.4",
"salesInten": "-23243080",
"salesChange": "-35",
"salesAcc": "15811113026",
"audiCnt": "4605",
"audiInten": "-2607",
"audiChange": "-36.1",
"audiAcc": "1595994",
"scrnCnt": "543",
"showCnt": "1101"
},
{
"rnum": "5",
"rank": "5",
"rankInten": "-1",
"rankOldAndNew": "OLD",
"movieCd": "20252719",
"movieNm": "힘내라 대한민국",
"openDt": "2025-02-27",
"salesAmt": "34703200",
"salesShare": "2.8",
"salesInten": "-6101800",
"salesChange": "-15",
"salesAcc": "388282040",
"audiCnt": "3915",
"audiInten": "-699",
"audiChange": "-15.1",
"audiAcc": "41533",
"scrnCnt": "114",
"showCnt": "210"
},
{
"rnum": "6",
"rank": "6",
"rankInten": "-1",
"rankOldAndNew": "OLD",
"movieCd": "20234689",
"movieNm": "괜찮아 괜찮아 괜찮아! ",
"openDt": "2025-02-26",
"salesAmt": "24158200",
"salesShare": "1.9",
"salesInten": "-13196900",
"salesChange": "-35.3",
"salesAcc": "652925600",
"audiCnt": "2778",
"audiInten": "-1548",
"audiChange": "-35.8",
"audiAcc": "74251",
"scrnCnt": "392",
"showCnt": "561"
},
{
"rnum": "7",
"rank": "7",
"rankInten": "0",
"rankOldAndNew": "NEW",
"movieCd": "20241389",
"movieNm": "보더랜드",
"openDt": "2025-03-05",
"salesAmt": "15550600",
"salesShare": "1.2",
"salesInten": "15550600",
"salesChange": "100",
"salesAcc": "15550600",
"audiCnt": "2371",
"audiInten": "2371",
"audiChange": "100",
"audiAcc": "2371",
"scrnCnt": "209",
"showCnt": "388"
},
{
"rnum": "8",
"rank": "8",
"rankInten": "0",
"rankOldAndNew": "OLD",
"movieCd": "20252058",
"movieNm": "첫 번째 키스",
"openDt": "2025-02-26",
"salesAmt": "11696800",
"salesShare": "0.9",
"salesInten": "-601620",
"salesChange": "-4.9",
"salesAcc": "285966400",
"audiCnt": "1889",
"audiInten": "175",
"audiChange": "10.2",
"audiAcc": "36395",
"scrnCnt": "154",
"showCnt": "254"
},
{
"rnum": "9",
"rank": "9",
"rankInten": "0",
"rankOldAndNew": "OLD",
"movieCd": "20244762",
"movieNm": "서브스턴스",
"openDt": "2024-12-11",
"salesAmt": "17822500",
"salesShare": "1.4",
"salesInten": "1541400",
"salesChange": "9.5",
"salesAcc": "5263171980",
"audiCnt": "1810",
"audiInten": "135",
"audiChange": "8.1",
"audiAcc": "540423",
"scrnCnt": "182",
"showCnt": "225"
},
{
"rnum": "10",
"rank": "10",
"rankInten": "0",
"rankOldAndNew": "OLD",
"movieCd": "20241093",
"movieNm": "그 시절, 우리가 좋아했던 소녀",
"openDt": "2025-02-21",
"salesAmt": "15780300",
"salesShare": "1.3",
"salesInten": "1170000",
"salesChange": "8",
"salesAcc": "1314952900",
"audiCnt": "1807",
"audiInten": "212",
"audiChange": "13.3",
"audiAcc": "148074",
"scrnCnt": "229",
"showCnt": "308"
}
]
}
}Code Beautify 사이트에서 해당 소스를 beautify하여 보기 편하게끔 변경한 소스
참고자료 : 한성현 교수님 수업자료
'iOS프로그래밍실무 (3학년 1학기)' 카테고리의 다른 글
| 240410 iOS프로그래밍실무 6주차 (0) | 2025.04.10 |
|---|---|
| 250403 iOS프로그래밍실무 5주차 (0) | 2025.04.03 |
| 250327 iOS프로그래밍실무 4주차 (0) | 2025.04.02 |
| 250320 iOS프로그래밍실무 3주차 (0) | 2025.03.20 |
| 250313 iOS프로그래밍실무 2주차 (0) | 2025.03.19 |