하랑이 성장기

2025.08.20 15:56

안녕하세요 ! 하랑이 입니다. 오늘은 Vue를 처음 학습하면서 가장 궁금했던 점인 React와의 차이를 한번 알아볼게요.저는 프론트엔드 개발자를 준비하는 과정에 있어서 주로 React를 사용해왔어요. 돌아가서 생각해보면, 처음 React를 선택하게 된 계기는 주변의 추천이 가장 컸던 것 같아요. 실제로 공고를 찾아봤을때 React의 공고가 거의 90프로가 넘었던터라, 당연하게도 React를 해야한다고 생각했어요. 그래서 다른걸 찾아보려고도, 사용하려고도 하지 않았었던 것 같습니다. 하지만 최근 입사예정인 회사의 기술스택은 Vue.js이기 때문에 새로운 공부를 할 좋은 기회가 생겼고 스스로의 성장을 위해서도, 회사에 빠르게 적응하기 위해서도 한번 제대로 학습해보려고 해요. 어쨌든, 처음에는 그냥 쉽게 생각..

최근 근황..그리고 취업성공 !

취업관련

2025.08.19 21:57

안녕하세요 하랑이 입니다.오랜만에 블로그에 글을 남기게 되었네요.그동안 블로그에 글도 깃허브도 잘 못 올리고 있었는데, 최근 제 근황을 정리해두고 싶어서 이렇게 글을 쓰게 되었습니다. 사실 아무것도 안 하고 지낸 건 아니고, 최근에 취업을 해버렸습니다 ! 드디어 ! 👏👏👏그래서 서울에서 지내다 본가에 다녀왔어요. 짐도 있고 취업하면 잘 못 내려갈 것 같아서 부모님 한번 뵙고 오려구요.그래서 본가에 내려가서 지인들도 만나고 부모님과 시간도 많이 보내고 왔습니다. 이제 그런 시간을 제외하면 개인적으로 Vue를 조금씩 공부하고 있었습니다.입사하게 된 회사에서 Vue를 기술스택으로 사용하고 있어서 미리 익숙해지고 싶다는 생각이 들었거든요.처음 웹을 입문할때부터 최근까지는 계속 React와 Next만 주로 ..

React는 왜 등장했을까?

프론트엔드 개념 정리

2025.06.18 17:29

내가 프론트엔드 개발자를 준비하면서 가장 많이 사용한 라이브러리는 단연코 'React' 이다.React는 2013년 페이스북에서 개발한 자바스크립트 라이브러리인데, 당시 웹 개발 방식을 개선하기 위해 개발했다.지금은 너무도 익숙해져버렸지만, 문득 React라는 것이 왜 개발되어서 내가 사용하고 있는가에 대해서 궁금해졌다.그래서 React에 대해서 알아보는 시간을 가져보려고 한다. React는 왜 등장했을까?1. 복잡한 UI와 불일치 상태2010년대 초반에 대부분의 프론트엔드 개발은 jQuery를 기반으로 UI를 조작하고 이벤트를 처리하는 방식이었다.하지만 핵심문제가 몇가지가 존재했는데,UI는 상태에 따라 바뀌어야 하는데 그 상태를 기반으로 UI를 직접 조작해야 했다. 버튼을 클릭하면 DOM을 직접 찾아..

멋쟁이 사자처럼 프론트엔드 심화과정 4기 - 2차 최종 프로젝트 회고

프로젝트 리뷰

2025.06.09 16:16

프로젝트 개요기간: 2024.05 ~ 2024.06 (약 4주)주제: 동네 이웃과 함께 나누는 식재료 및 공동 장보기목표: 이전과 다른 이웃과의 소통 문제 완화 및 늘어난 1인가구에 대응하는 식재료 나눔 플랫폼역할: 팀원, UI 디자인, DB 모델링, 채팅 시스템 구현, 3D 나눔함 페이지 구현배포 : https://www.sik-share.com/기술 스택Frontend: Next.js, TypeScript, react-three/fiber, shadcn-ui, tailwind css,Backend: postgreSQL, Prisma, Node.js, Next.js기획 의도와 주제 선정 과정이전까지는 뭔가를 만드려고 할때 단순히 편리한 것이나 하고 싶은것에 집중했다면, 이번에는 조금 더 사회적으로 가치..

멋쟁이 사자처럼 프론트엔드 심화과정 4기 - 1차 프로젝트 회고

교육

2025.05.04 15:48

프로젝트 개요기간: 2024.03 ~ 2024.04 (약 4주)주제: 개발자 협업 매칭 플랫폼 – 핏플(Fitple)목표: 누구나 프로젝트를 만들고, 참여 요청을 주고받을 수 있는 양방향 모집 시스템 구축역할: 팀장, 프론트엔드 개발, 백엔드 개발 UI 디자인, 일정 및 의사결정 총괄기술 스택 및 환경Frontend: Next.js, TypeScriptBackend: Supabase, Node.js설계 원칙: 클린 아키텍처 기반 도메인 분리구현 환경: CSR (Client Side Rendering), Serverless 환경기획 의도와 주제 선정 과정초기에는 ‘날씨 기반 옷/음악 추천’, ‘OTT 검색 플랫폼’, ‘최애 저장소’ 등 다양한 아이디어가 나왔다.하지만 생성형 AI를 활용해 이미지를 생성하려..

웹소켓이란 무엇일까?

프론트엔드 개념 정리

2025.05.04 11:56

1. 서버리스 환경에서의 채팅 구현 경험이전에 채팅 기능을 구현할 때, 서버리스 환경에서 작업을 했었다.사실 이런 환경에서 개발할 일이 많지는 않지만, 그 덕분에 풀링(Polling) 이라는 개념을 알게 되었다.당시에는 웹소켓을 제대로 다룰 수 없어서 풀링 방식으로 채팅을 구현했는데,아무래도 완성도 면에서 아쉬움이 남았다.그래서 이번 기회에 웹소켓의 개념부터 실제 동작 방식까지 다시 정리해보기로 했다.2. 웹소켓이란?웹소켓은 클라이언트(브라우저)와 서버 간에 지속적인 연결 상태를 유지한 채,양방향으로 데이터를 주고받을 수 있는 프로토콜이다.기존 HTTP는 요청을 보내야 응답이 오는 구조지만,웹소켓은 한 번 연결을 맺으면 서버와 클라이언트가 자유롭게 실시간 통신할 수 있다.3. 웹소켓이 등장하게 된 이유초..

멋쟁이 사자처럼 프론트엔드 심화과정 4기 - 프로젝트 중 채팅 구현

교육

2025.04.28 11:53

핏플(Fitple) 프로젝트 진행기 (1차 프로젝트)멋쟁이 사자처럼 프론트엔드 심화 4기에서 현재 1차 프로젝트를 진행하고 있다.이번 프로젝트의 중요한 조건은 다음과 같다.클린 아키텍처 기반 백엔드 설계DB는 Supabase 활용CSR(Client Side Rendering) 환경으로만 구성크게 보면 이 세 가지가 가장 중요한 조건이었다.프로젝트 주제 : "핏플" (Fitple)우리가 기획한 주제는 '핏플'이라는 이름을 가진 사이드 프로젝트 양방향 매칭 플랫폼이다.나 역시 포트폴리오를 쌓거나, 새로운 경험을 하고 싶을 때 인프런이나 홀라 같은 플랫폼을 찾아보곤 했다.하지만 항상 아쉬웠던 점은, 그런 플랫폼들도 결국 "회사 취업"처럼 운영된다는 점이었다.프로젝트 모집글이 올라온다내가 지원한다면접을 보고, ..

멋쟁이 사자처럼 프론트엔드 심화과정 4기 - Day 6

교육

2025.04.20 15:05

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

멋쟁이 사자처럼 프론트엔드 심화과정 4기 - Day 5

교육

2025.04.08 23:26

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

멋쟁이 사자처럼 프론트엔드 심화과정 4기 - Day 4

교육

2025.04.05 13:31

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

멋쟁이 사자처럼 프론트엔드 심화과정 4기 - Day 3

교육

2025.04.04 21:42

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.04.03 22:40

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.04.02 23:00

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

JavaScript Math 객체 정리

코딩 테스트 연습

2025.03.31 21:27

이번에 알고리즘 문제를 풀다가, 올림 같은 수학 연산을 하고 싶을 때 어떻게 해야할지 고민을 하다가, 도저히 해결을 못해서 검색을 통해 알게 된 Math 객체를 정리해보려고 한다. 1. Math 객체란?Math 객체는 JavaScript에서 기본 제공하는 수학 연산을 수행하는 내장 객체입니다. 숫자의 절댓값, 올림/내림, 랜덤 값 생성 등 다양한 기능을 제공합니다. 2. 자주 사용하는 Math 메서드 정리메서드설명Math.abs(x)절댓값 반환Math.ceil(x)올림 (소수점 올림)Math.floor(x)내림 (소수점 버림)Math.round(x)반올림Math.max(a, b, c, ....)최댓값 반환Math.min(a, b, c, ....)최솟값 반환Math.pow(x, y)거듭제곱(x^y) // ..

코딩 테스트 연습 전 준비사항 - 크롬 확장 프로그램(백준 허브)

코딩 테스트 연습

2025.03.31 17:12

회고록에 작성했듯이, 오늘부터 매일 백준이나 프로그래머스 문제를 풀고 깃허브에 올리려고 한다.하지만 한 문제를 풀때마다 새로 작성해서 커밋을 하게 된다면 굉장히 귀찮을 수 있는데, 이럴때 사용하기 좋은 크롬 확장 프로그램이 있어서 소개하려고 한다. 1. 크롬 웹 스토어에서 크롬 확장 프로그램 설치하기크롬 웹 스토어에서 '백준 허브'를 검색하고 설치까지 완료한다. 2. 깃허브 연동하기 확장프로그램을 눌러, 핀으로 고정시킨 뒤 아이콘을 누르면 깃허브와 연동할 수 있다 !Authenticate 버튼을 눌러 깃허브와 연동한다. 여기서 본인에게 맞는 옵션을 선택하면 되는데, 나는 이미 진행중이던 레포지토리가 있어서 레포지토리 이름을 입력한 후 연결했다. 3. 문제 풀고 자동 커밋 확인하기나는 프로그래머스를 활..

대학교 졸업, 그리고 1년 후까지 돌아보며

회고록

2025.03.28 09:55

1. 프롤로그많은 사람들이 하는 회고록, 하지만 단순히 유행처럼 따라가는 것이 아니라, 꼭 해야만 할 것 같고 또 하고 싶어서 시작해보려 한다.누가 이 글을 보게 될지는 모르겠다. 하지만 나는 이곳에서 하고 싶은 말을 마음껏 쏟아내고, 앞으로의 다짐을 새기며, 스스로의 시간을 조금 더 의미 있게 만들고 싶다. 무엇보다도, 내가 어떤 사람인지 좀 더 깊이 들여다볼 수 있는 매개체가 되었으면 좋겠다. 그리고 이 회고록이 내게 원동력이 되어 앞으로 한 걸음 더 나아가는 계기가 되길 바란다.이 블로그에 남길 이야기들이 면접관님들, 지인들, 혹은 우연히 들른 누군가에게 마냥 좋은 인상을 남기지는 않을 수도 있다. 하지만 그만큼 솔직하게 나 자신을 돌아보고, 더 강하게 채찍질하며 앞으로 나아가고 싶다. 2. 대학 ..

웹 포트폴리오 프로젝트 - 완료

프로젝트 개발일지

2025.02.20 18:40

웹 포트폴리오 제작 후기MZ 사전 프로젝트를 마친 이후로, 웹 포트폴리오를 제작하게 되었습니다.개발을 진행하면서 Next.js와 TypeScript의 필요성을 느껴 학습과 개발을 병행했고, 완벽하다고 할 수는 없지만 나름 성공적으로 마무리했다고 생각합니다.👉 웹 포트폴리오 링크:My Website My Website© 2025 MyWebsite. All Rights Reserved.port-next-webportfolio-front-m61t9knhb5c1f236.sel4.cloudtype.app이곳에서 제 웹 포트폴리오를 만나보실 수 있습니다 ! 그리고 프로젝트 마치고 난 뒤 이제 후기를 작성해 볼게요. 1. TypeScript & Next.js & Tailwind CSS이번 프로젝트를 통해 TypeS..

var, let, const의 차이점

프론트엔드 개념 정리

2025.02.19 15:38

모던 자바스크립트 정리를 하다가 var, let, const의 차이점을 한번 정리하고 가면 좋을 것 같아서 따로 빼서 글을 써보려고 해요. 우선은, 블록 스코프(Block Scope)와 함수 스코프(Function Scope), 그리고 호이스팅에 대해서 개념을 알면 var, let, const의 차이점에 대해서 이해하는데 훨씬 도움이 될 것 같아요. 블록스코프와 함수 스코프변수에는 접근할 수 있는 범위(스코프)가 정해져 있어요. 1. 블록 스코프(Block Scope){ } 중괄호로 감싸진 범위를 벗어나면 변수에 접근할 수 없어요.let과 const는 블록 스코프를 따라요.하지만 const는 선언과 동시에 값을 할당해야하며, 이후 값 변경이 불가능해요.if (true) { let a = 10; ..

모던 자바 스크립트 Deep Dive - 3장, 4장

모던 자바스크립트 Deep Dive 정리

2025.02.19 14:52

3장의 내용은 JavaScript를 사용하기 위해 어떻게 해야하는지에 대한 내용이라, 4장인 변수에 대해서 한번 정리해 볼게요.변수란?변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 공간을 식별하기 위한 이름이에요. 쉽게 말해, 값이 저장된 위치를 가리키는 상징적인 이름이에요. 변수를 사용하면 개발자가 직접 메모리 주소를 다룰 필요 없이 안전하게 값을 저장하고 참조할 수 있어요.var result = 10 + 20; 위 코드에서 result가 변수 이름이에요. 변수에 값을 저장하는 것을 할당, 변수를 통해 값을 불러오는 것을 참조라고 해요. 식별자변수 이름을 식별자라고도 해요. 식별자는 메모리에 저장된 값을 구별하는 고유한 이름이에요. 단순히 변수뿐만 아니라 함수, 클래스 등의 이름도..

모던 자바스크립트 Deep Dive - 2장

모던 자바스크립트 Deep Dive 정리

2025.02.18 22:29

자바스크립트란 무엇인가?오늘은 자바스크립트가 무엇인지에 대한 내용인 2장을 정리해보도록 할게요.2-1) 자바스크립트의 탄생1995년, 넷스케이프 커뮤니케이션즈는 웹 브라우저에서 동작하는 경량 프로그래밍 언어가 필요해 자바스크립트를 개발했어요. 브렌던 아이크가 만든 이 언어는 1996년 넷스케이프 내비게이터에 탑재되었고, 처음에는 "모카"로 불리다 "라이브스크립트"와 "자바스크립트"로 이름이 바뀌었어요. 그러나 자바스크립트의 성공은 순탄치 않았고, 이후 마이크로소프트가 만든 JScript가 등장하며 경쟁이 치열해졌어요.2-2) 자바스크립트의 표준화마이크로소프트의 JScript와 넷스케이프의 자바스크립트는 호환성 문제를 일으켰고, 이는 크로스 브라우징 문제를 낳았어요. 이를 해결하기 위해 1996년 ECMA..

티스토리툴바