ougi FE

오늘은 깃허브를 보다가 발견한 Husky에 대해서 알아보면서 기본으로 알아야 할 Git Hook까지 알아보도록 하겠습니다Git Hooks란?Git Hooks는 Git repository에서 특정 이벤트가 발생할 때마다 자동으로 실행되는 스크립트입니다훅은 .git/hooks 이곳에 저장됩니다 이 디렉토리에서는 Git이 기본적으로 제공한 유용한 스크립트 예제가 몇가지 존재합니다그리고 스크립트가 입력받는 값이 어떤 값인지 파일 안에 자세히 설명되어 있습니다 클라이언트 훅과 서버 훅으로 나눌 수 있습니다클라이언트 훅commit이나 merge를 할 때 실행됩니다클라이언트 훅은 매우 다양해서 committing-workflow 훅, email-workflow 훅, 기타가 있는데저는 committing-workflo..

오늘은 저희가 늘 테스트할 때 보였던 localhost에 대해서 알아보겠습니다 어떻게 동작하는지 알고 사용해봅시다!!localhost란?localhost는 컴퓨터 자신의 IP 주소를 나타내는 특별한 도메인 이름입니다주로 테스트를 할 때 사용되고 고정적으로 127.0.0.1 의 주소를 갖습니다 웹 브라우저에 http://localhost나 http://127.0.0.1을 입력하면 자신의 컴퓨터에서 실행 중인 웹 서버에 접속할 수 있습니다localhost의 동작 흐름로컬 서버 실행사용자가 localhost: 포트번호로 요청해당 포트를 리스닝 중인 로컬 서버가 요청을 수신처리된 응답이 다시 클라이언트(브라우저)로 전송localhost 사용 시 주의사항포트 충돌 문제: 이미 사용하고 있는 포트를 사용하면 포트에..

오늘은 CI/CD에 개념을 제대로 잡고 넘어가고 싶어 이렇게 글을 쓰게 되었습니다CI/CD란?CI/CD란 지속적 통합(Continuous Integration)과 지속적 배포(Continuous Deployment)의 약자로소프트웨어 개발 과정을 자동화하여 더 빠르고 안정적으로 애플리케이션을 고객에게 제공하는 방법입니다CI/CD 파이프라인 구축은 개발 효율성을 높이고 배포할 때 오류를 최소화합니다 먼저 CI에 대해서 더 자세히 말해보자면개발자가 코드 변경 사항을 정기적으로 병합하는 것을 의미합니다이 과정에서 코드 변경 사항마다 빌드와 테스트가 자동되어 문제를 빠르게 발견하고 해결할 수 있습니다 CD에 대해서 더 자세히 말해보자면CI 과정을 통해 테스트를 통과한 코드를 자동으로 배포하는 단계를 말합니다CD..

오늘은 깔끔한 코드를 작성하는 것으로 고민을 하다가Barrel export 패턴에 대한 글을 보게 되어서 이렇게 글을 쓰게 되었습니다Barrel export 패턴이란?Barrel export 패턴은 여러 개의 모듈을 하나의 진입점(entry point)에서 모아서 export하는 방식이라고 합니다이 방식을 사용하면 import문을 더욱 더 깔끔하고 간결하게 만들 수 있다고 합니다사용 예시먼저 폴더 구조를 말씀 드리겠습니다src/ components/ footer.tsx header.tsx index.ts  원래 Barrel export 패턴을 사용하지 않고 하려면 이런 식으로 import 해야 했습니다import Header from 'src/component..

최근에 프로젝트를 하나 하게 되었는데 FrontEnd 친구가 Svelte를 말하는 것을 보고배워보고 싶어 이렇게 글을 쓰게 되었습니다 Svelte해지기 위해 Svelte를 사용해볼까요?Svelte란 무엇일까? Svelte는 JavaScript의 라이브러리 중 하나로 React보다 가볍고 Vue보다 쉽다는 여러 좋은 장점들을 가지고 있습니다Svelte는 영어로 날씬하다라는 뜻도 가지고 있다고 합니다 장점학습 곡선이 낮습니다빠른 개발 속도가 올라갑니다렌더링 성능이 일정합니다단점느린 빌드 속도를 가졌습니다아직 React나 Vue 만큼 많이 쓰이지 않아 커뮤니티가 작습니다TypeScript가 Svelte의 신규 문법을 잘 따라가지 못하는 경향이 있다고 합니다다른 라이브러리들과의 차이점구조svelte는 다른 라이..

안녕하세요 조금 늦었지만 2024년도를 돌아보며 회고록을 작성하고 2025년도 계획을 세우고자 이렇게 글을 써보게 되었습니다☃️ 1~3월제가 이 광주소프트웨어마이스터고등학교에 들어오려고 다짐한 이유는초등학교 4학년 때부터 하던 배구선수를 부상으로 인해 그만두고 일반계를 갈 생각에 막막하기도 하고부모님에게 부담을 주지 않고 기숙사 생활을 하며 새로운 것을 제대로 해보고 싶어이렇게 이 학교에 들어오겠다고 다짐 했었습니다 저는 1월에 8기 디스코드방에 들어가게 되어 친구들이 나누는 대화를 살펴보다가처음으로 html, css, javascript에 존재에 대해서 알게 되었습니다어쩌면 저에게 큰 행운이었던 것 같습니다생활코딩이라는 분의 강의를 2번씩 돌려보면서 저는 그 3가지에 대해 공부하기 시작 했었습니다htt..

안녕하세요 오늘은 제가 최근에 제가 좋아하는 게임인 사과게임을 따라서 만들어보았는데 이 게임을 만드는 과정에 대해서 글을 써보고 싶어 이렇게 글을 써보게 되었습니다저는 토마토 버전으로 만들어보았습니다 ㅎㅎ사과 게임 소개사과게임이란 주어진 시간 안에 랜덤한 숫자 값이 들어있는 사과들을 없애는 것이 목표인 게임인데 사과를 없앨 수 있는 조건은 드래그 해서 생긴 네모 칸 안에 숫자 값들이 합해서 10이 되는게 조건입니다사과 한개 당 1점을 받습니다만드는 과정 과정을 나누어 보자면 크게 이렇게 나누어 구현 했던 것 같습니다시간 타이머 바 구현하기토마토들에 1-9까지 랜덤한 값을 주어 canvas에 그리기드래그하면 네모 칸 만들어지게 하기네모 칸 안에 숫자들이 10 되는지 확인하고 되면 사과를 없애고 점수 올라가..

오늘은 제가 앱잼에 나가게 되어 웹을 앱으로 만드는 방법을 살펴보다가 이렇게 글을 쓰게 되었습니다저는 평소에 react native를 배워서 웹 앱 말고 react native를 사용해서 앱을 개발해왔었는데웹 앱도 많은 장점이 있다고 하여서 배워보게 되었습니다웹을 앱으로 바꾸는 여러 많은 방법들이 있지만 저는 오늘 PWA에 대해 설명해보겠습니다❓ PWA란?PWA는 웹 기술을 가지고 모바일 네이티브 앱과 비슷하게 만들 수 있는 기술입니다 모바일 웹 사이트와 앱의 중간 형태로 모바일 앱과 웹 사이트의 장점을 결합하여사용자 친화적인 앱 경험을 제공할 수 있다고 합니다🌸 장단점장점빠른 성능을 제공한다고 합니다앱스토어를 거치지 않아도 웹 브라우저에서 바로 앱을 사용할 수 있습니다업데이트도 자동으로 이루어집니다모..

안녕하세요 오늘은 개발을 좀 더 깊이 있게 하기 위해서 브라우저의 동작 원리를 알아보려고 합니다 많이 어렵고 내용이 많을 수도 있지만 알아봅시다 !!브라우저의 구조 브라우저의 구조는 7가지로 나눌 수 있습니다브라우저 동작 원리사용자 인터 페이스(UI)브라우저에서 볼 수 있는 거의 모든 것 (주소창, 뒤로가기, 앞으로 가기, 새로고침, 북마크, 환경설정)브라우저 엔진사용자 인터페이스와 렌더링 엔진 사이에서 중재자 역할을 합니다렌더링 엔진HTML와 CSS, Javascript를 파싱하고 그 결과물로 페이지를 그려내는 역할을 합니다통신HTTP 요청과 같은 네트워크 호출 시에 실행합니다JS 엔진JavaScript 코드를 해석하고 실행합니다UI 백엔드브라우저가 동작하고 있는 운영체제의 인터페이스를 UI들을 처리합..

오늘은 블로그를 살펴보다가 JWT라는 인증 방식을 알게 되어 글을 쓰게 되었습니다그동안 제가 알고 있던 인증 방식은 주로 세션과 쿠키 정도였는데또 다른 방식이 있다는 사실이 흥미로워서 글을 쓰게 되었습니다❓ JWT(Json Web Token)가 무엇일까?JWT는 클라이언트와 서버, 서비스와 서비스 사이 통신 시 권한 인가(Authorization)를 위해 사용하는 토큰이라고 합니다 장점데이터 위조나 변조를 방지할 수 있습니다JWT에는 모든 정보를 담고 있기 때문에 별도의 저장소가 없어도 됩니다확장성이 좋습니다모바일에서도 잘 동작합니다 (세션은 모바일 X)단점토큰의 길이가 너무 깁니다Payload 자체는 암호화가 되지 않아 위험합니다토큰을 탈취당하면 대처하기 어렵습니다세션이나 쿠키와의 차이점은구분세션/쿠키..