일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
- javascript
- 오블완
- Study
- barrel export
- PullRequest
- frontend
- 회고록
- 티스토리챌린지
- Fe
- 협업
- github
- form
- 개발
- next.js
- Context API
- 프레임 워크
- js
- zustand
- 개발자
- svelte
- react
- SWR
- CSS
- 브라우저 동작
- react-query
- Pr
- 비제어
- JWT
- tailwind css
- 사과게임
- Today
- Total
목록전체 글 (50)
ougi FE

오늘은 제가 앱잼에 나가게 되어 웹을 앱으로 만드는 방법을 살펴보다가 이렇게 글을 쓰게 되었습니다저는 평소에 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 자체는 암호화가 되지 않아 위험합니다토큰을 탈취당하면 대처하기 어렵습니다세션이나 쿠키와의 차이점은구분세션/쿠키..

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

오늘은 개발을 하다가 지저분한 제 아키텍처를 보고 좋은 아키텍처에 대해서 많은 관심이 생겨 찾아 보다가가장 많이 보이던 FSD에 대해서 이렇게 글을 써보게 되었습니다❓FSD란?FSD는 기능 분할 설계(Feature-Sliced Design) 아키텍처 입니다크게 나누어서 3가지 개념으로 나누어집니다 Layer, Slice, Segment로 나눌 수 있습니다 장점코드의 배치가 명확하여 코드들의 위치를 쉽게 예측 가능하고 배치하기가 편리 어떤 코드가 내 프로젝트의 맥락과 상관이 있는지가 매우 명확 단점복잡하여서 러닝 커브가 꽤 있는 편코드가 분리되어 있어서 수정 작업이 번거로울 수 있음 (작은 프로젝트일수록 치명적)Layer최대 7가지로 제한 되며 최상위 디렉토리 입니다일부는 선택이지만 일부는 표준화 되어 있..