ougi FE

안녕하세요 오늘은 개발을 좀 더 깊이 있게 하기 위해서 브라우저의 동작 원리를 알아보려고 합니다 많이 어렵고 내용이 많을 수도 있지만 알아봅시다 !!브라우저의 구조 브라우저의 구조는 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가지로 제한 되며 최상위 디렉토리 입니다일부는 선택이지만 일부는 표준화 되어 있..

오늘은 Next.js를 생각도 없이 사용하다 문득 이유를 알고 사용해야 하는데나는 이유를 모르고 또 사용을 하고 있었구나...라는 생각이 들어 자세히 알아보려고 합니다❓ Next.js 그게 뭘까?Next.js는 React 기반의 프레임워크입니다vercel에서 개발 했습니다 React는 라이브러리, Next는 프레임워크라고 합니다둘의 가장 큰 차이점은 응용 프로그램의 흐름 주도권을 누가 가지고 있느냐입니다Next.js는 특정 스타일과 규칙을 따르지 않으면 에러가 발생할 수 있습니다그래서 Next.js의 규칙과 스타일을 준수하는 것이 중요합니다  그리고 Next는 SSR을 쉽게 구현할 수 있게 해 준다고 합니다밑에 글에서 SSR에 대해 자세히 설명하고 있습니다!!https://baeougi.tistory.c..