멋쟁이 사자처럼 프론트엔드 심화과정 4기 - Day 6
경험들/교육2025. 4. 20. 15:05멋쟁이 사자처럼 프론트엔드 심화과정 4기 - Day 6

오늘은 처음 들어보는 '클린 아키텍처'라는 개념에 대해서 배웠다.설명을 듣고 지금까지 프로젝트를 해보면서 진행해보고는 있는데, 사실 아직까지도 개념이 완벽하게 잡히진 않은 것 같다.그래서 기억을 되짚어 보면서 다시 한번 정리를 하려고 한다. 1. 클린아키텍처의 핵심 원칙가장 중요한 규칙이라고 하면 이걸로 말할 수 있을 것 같다. "안쪽은 바깥을 몰라도 되고, 바깥은 안쪽에 의존해야 한다." 이것을 의존성 역전 원칙(Dependecy Rule) 이라고 한다. 쉽게 말하면, 화면이 로직을 호출할 수는 있지만 로직이 화면을 호출하면 안된다고 한다.또한 로직이 데이터를 가져오는 저장소를 호출할 수 있지만, 반대로 저장소가 로직을 호출하면 안된다고 했다. 2. 클린 아키텍처의 4계층 구조 클린 아키텍처는 4계층으..

멋쟁이 사자처럼 프론트엔드 심화과정 4기 - Day 5
경험들/교육2025. 4. 8. 23:26멋쟁이 사자처럼 프론트엔드 심화과정 4기 - Day 5

오늘은 데이터 베이스를 전반적으로 배웠다.이때까지는 백엔드에서 단순히 데이터베이스에 있는 데이터들을 꺼내서 나에게 주면, 그걸 보여주기만 했기 때문에 데이터베이스에 대해서 깊은 이해와 관심은 가지고 있지 않았다. 단순한, 정말 단순한 쿼리문은 사용할 수 있지만 그 정도에서 그치면 안된다는 것을 깨달았기 때문에 오늘 수업도 시작부터 많은 호기심을 가진 채로 시작했다. 1.  시스템이란?시스템이란 뭘까?강사님께서는 수업을 하면서 종종 단어 자체에 대한 질문을 하신다. 나는 시스템이란 흐름 이라고 생각했다.하지만 강사님의 설명을 듣다 보니 단순히 '흐름' 이라고만 정의 내리기에는 모자란 것 같았다. 항상 이해하기 쉽게 예를 들어 설명을 해주시곤 하는데 이번에는 병원에 갔을 때를 예를 들어 설명해 주셨다. 병원..

멋쟁이 사자처럼 프론트엔드 심화과정 4기 - Day 4
경험들/교육2025. 4. 5. 13:31멋쟁이 사자처럼 프론트엔드 심화과정 4기 - Day 4

오늘은 어쩌면 내가 이 과정을 신청하게 된 근본적인 이유 중 하나인 TypeScript 에 대해서 배워보는 시간을 가지려고 한다.솔직히 처음에는 그냥 귀찮기만 했다. 정말 하나부터 열까지 타입을 일일히 명시해줘야 했고, 오히려 가독성을 떨어뜨린다고 생각했다.하지만 많은 자유도를 부과하는만큼 많은 책임이 발생하고, 그에 따른 해답이 타입을 명시해주는 것이라고 했다.그렇지만 조금의 이점은 있다고 생각한 부분이 에러를 명확하게 짚어주는 것이었다. 만약 height 라는 항목을 heigth 라고 작성하면 JS에선 NaN이라고 나오는데 TS에서는 '너 혹시 그거 height 쓰려고 한거 아니야?' 라고 짚어준다. 이런 부분은 마음에 들었다. 하지만 그럼에도 불편함을 느끼지만, 나보다 더 많이 배운 사람들이 그게 ..

멋쟁이 사자처럼 프론트엔드 심화과정 4기 - Day 3
경험들/교육2025. 4. 4. 21:42멋쟁이 사자처럼 프론트엔드 심화과정 4기 - Day 3

1. Node.js 란?Node.js는 브라우저 밖에서도 JavaScript를 실행할 수 있는 환경을 만들어준다. 원래 JavaScript는 웹 브라우저에서만 동작했지만, Node.js 덕분에 파일을 읽거나, 서버를 만들고, 네트워크 요청을 처리하는 등 다양한 백엔드적인 작업도 가능해졌다. Node.js는 Google Chrome의 V8 JavaScript 엔진을 기반으로 만들어졌고, 이 엔진이 자바스크립트를 빠르게 실행시켜준다.게다가 C++로 작성된 다양한 저수준 API들을 Node에서 사용할 수 있도록 Node 바인딩을 통해 연결해준다. Node는 단일 스레드(Single Thread) 로 동작하지만, 내부에 이벤트 루프(Event Loop) 라는 메커니즘이 있어,비동기 처리를 효율적으로 해낸다.이벤..

멋쟁이 사자처럼 프론트엔드 심화과정 4기 - Day 2
경험들/교육2025. 4. 3. 22:40멋쟁이 사자처럼 프론트엔드 심화과정 4기 - Day 2

1. Vue.js2일차 수업에는 Vue.js를 이용해 MVC(Model, View, Controller) 패턴의 기본 구조를 경험하는 시간을 가졌다.기본적인 Vue 코드의 구조는 이렇게 된다. Vue.createApp({ data: { // 상태 데이터 }, methods: { // 기능 구현 }}).mount('#calc-app'); 실습으로 간단한 덧셈 계산기를 만들어 보았는데, 예제를 통해 HTML과 Vue.js를 결합하여 실습을 진행했다. 아래는 간단한 예제이다./* HTML 코드 */ 덧셈 계산기 계산기 입력폼 x: y: = 0 /* Vue의 MVC ..

멋쟁이 사자처럼 프론트엔드 심화과정 4기 - Day 1
경험들/교육2025. 4. 2. 23:00멋쟁이 사자처럼 프론트엔드 심화과정 4기 - Day 1

첫날 프론트엔드 심화과정에 참여한 나는 사실 기대 반, 걱정 반이었다. 특히 Next.js 라는 녀석은 이름은 많이 들었지만 제대로 파고 들면서 학습해본 적이 없어서 더욱 그랬다.역시나 첫 수업부터 쉽지 않았지만, 정리를 해보면서 기록으로 남기려고 한다. 1. 왜 Next.js를 배워야 하는가?항상 어떤 프레임워크나 라이브러리를 고르기 전에 응당 해야하는 질문이었다고 생각한다.그렇지만 이전에 내가 React를 선택했을때에는 지인의 추천, 그리고 사용하다보니 편해서가 주된 이유였다.그래서 편했다는 이유 외에 굳이 왜 ? 라는 질문에는 현재도 대답하기 힘들다.그렇지만 이번 멋쟁이 사자처럼 프론트엔드 심화과정은 왜 Next.js를 배워야 하는지 부터 수업을 진행했고, 그에 대한 이유를 어느정도 이해하게 되었다..

경험들/취업관련2025. 1. 18. 17:19첫 면접 후기

원래 제가 MZ 사전을 개발하면서 꾸준히 블로그 글을 포스팅 하려고 했는데, 그러지 못했습니다 ㅠㅠ댓글 기능 구현 중에 오류가 생겼는데, 서버와의 통신 중에 에러가 생겼습니다.그런데 백엔드 담당하는 개발자분이 현재 시간이 없으셔서 수정이 어렵고, 저도 취업을 목표로 하고 있기 때문에,최대한 마무리 짓고 면접 준비를 하는데에 바빠서 글을 올리지 못했네요... 죄송합니다.정리해서 차후에 포스팅 할게요 ! 1.  첫 면접 후기프론트엔드 개발자가 되어야 겠다고 생각한 뒤로 첫 면접을 보고 왔습니다 !...12월 말부터 서류를 넣기 시작했는데 이번에 처음 연락이 와서 면접을 보고 왔어요 !아마도 아직까지 연락이 없어서 결과는 불합격 인것같긴 하지만...ㅎㅎㅎ 그래도 적어두고 다음에 보면 도움이 될 것 같아서 적으..

image