ougi FE

안녕하세요 오늘은 제가 최근에 제가 좋아하는 게임인 사과게임을 따라서 만들어보았는데 이 게임을 만드는 과정에 대해서 글을 써보고 싶어 이렇게 글을 써보게 되었습니다저는 토마토 버전으로 만들어보았습니다 ㅎㅎ사과 게임 소개사과게임이란 주어진 시간 안에 랜덤한 숫자 값이 들어있는 사과들을 없애는 것이 목표인 게임인데 사과를 없앨 수 있는 조건은 드래그 해서 생긴 네모 칸 안에 숫자 값들이 합해서 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 자체는 암호화가 되지 않아 위험합니다토큰을 탈취당하면 대처하기 어렵습니다세션이나 쿠키와의 차이점은구분세션/쿠키..

오늘은 제가 한전 빛가람 에너지밸리 소프트웨어 작품 경진대회에 나갔는데 대회도 끝났고 다시 되돌아보고 성장하는 겸 회고록을 작성해보려 합니다✊ 참여 계기제가 이 대회에 참여한 계기는 저희 학교 작년 선배님들이 대상을 탔다고 하신 것도 듣기도 하였고제가 정말 믿는 친구들이 함께 나가자고 말도 해주고선생님이 나갈 대회를 추천해 주셨는데 딱 마침 추천해 주신 대회가 빛가람 에너지밸리 소프트웨어 작품 경진대회여서 이 대회에 참여하게 되었습니다📜 기획저희는 사회적 문제를 해결하고 싶어서 처음에 목적을 사회적 약자의 어려움을 덜어내는 쪽으로 먼저 정하고주제를 내기 시작 했습니다 나온 주제들은 이렇게 있었습니다공간 너비에 따라 크기를 조정하는 우산담배 연기 측정 시스템여행 물건 도난 방지 시스템점자 인식 방법물체 ..