비전공 프론트엔드 개발자

먼저 이런 좋은 기회를 알게 해준 프론트 개발자 민우님께 감사인사를,,, 3박4일 일정으로 진행되는 구름톤에 참여하는 영광을 !! 현재 4기 모집중이라고 하는데, 이번 4기를 기점으로 잠깐의 휴식기를 갖는다고 하네요 ! 늦기 전에 얼른 지원해서 꼭 좋은 경험을 해보셨으면 좋겠습니다. ( 진심 x 10000 ) ( 구름톤 4기 지원 링크 https://9oormthon.goorm.io/ ) 어떻게 흘러가는지는 같은 팀원분이 블로그에 잘 정리해 두었기 때문에, 그 부분으로 대체하고, 저는 개인적으로 개발 관련과 아이디어? 에 초점을 두고 경험을 적어보려고 합니다. 구름톤 전반적인 흐름 읽어보기 : https://chucoding.tistory.com/103 ( 일정과 TIP 관련은 이 블로그를 참고해 주세요..

인프런에 있는 정재남님의 강의 "풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기" 를 듣기 시작했다. 처음 보는 라이브러리나 vite 혹은 dev 환경으로 키고, 등등 새로운 부분이 너무 많아서 제대로 이해하기 힘들었고, 따라가기 급급했다. 오늘 1일차의 목표는 개발환경에 대해 완벽히는 아니더라도, 어떤걸 사용하고 어떤걸 이용하는지 대략적인 그림을 이해하는것으로 목표를 잡았다. 일단 첫째로 vite 를 사용했다. vite 는 일단 프론트엔드 개발 경험을 향상시켜줄 툴이다. $ npm create vite@latest 를 입력하면 이름을 짓고, 개발환경 세팅을 선택할 수 있게 해주고, 바로 만들어준다. 확실히 편리함을 느꼈고, 기존에는 create-react-app 의 노예였는데, 이런 방법도 있다는것에..

밤잠없는 사람들 플랫폼 정리. 카카오 지도 의 개인위치 기반 주변 업체 리스트를 보여주는 플랫폼. 내가 구현한 기능 : 카카오지도 API 활용 & 이미지 CRUD 개선해야 할 부분. 1. https통신 => https 통신으로 변경되면서 개선해야할 두가지 기능이 있는데, 첫번째가 바로 소셜 로그인 기능이다. 사실 시간을 좀 들이면 해결할 수 도 있었지만 당장 구현한 기능의 퀄리티를 높이기 위해 포기한 부분중 하나라 아쉬움이 남는다. 두번째가 바로 개인 위치기반이다. 지도 컴포넌트를 뜯어보면 navigator.geoLocation() 이라는 함수가 있다. 이 함수는 https 통신일때만 작동하는 함수로써 현재 지도에서는 작동되지 않아 원하는 기능을 구현하지 못하고 있다. 2. 폴더 구조변경과 이름 변경 =..

React 심화 Virtual DOM Virtual DOM이 나오게 된 배경에 대해 이해합니다. DOM은 트리 형식으로 저장되어 있다. 이 트리형식은 데이터를 효과적으로 탐색하기 좋은 형식이다. 하나의 DOM만 변경되어도 모든 화면에서 리랜더링이 일어나고 이는 리플로우와 리페인팅을 하게된다. 이 과정에서 레이아웃 등등을 재연산을 하게되고, 그만큼 속도가 느려지게 된다. 하나만 변경을 했는데 모든 DOM요소들을 재연산을 하는게 낭비이기 때문에 가상돔(Virtual)이라는 개념이 등장하게 되었다. 가상돔은 DOM에 비해 상대적으로 가볍고, DOM이랑 같은 사본이다. 가상 DOM을 직접 조작할 수 없으며 사용자에 의해 DOM에 변화가 생길 경우 해당 부분의 변경점을 적용, 이후 DOM과 비교를 하고, 가상돔은..

브라우저 브라우저의 특징과 웹의 동작 원리에 대해 이해합니다. =>브라우저는 웹 서버에서 양방향으로 통신하여 HTML 문서 및 그림 동영상 등의 콘텐츠를 열람할 수 있게 해주는 GUI 기반의 소프트웨어 프로그램이다. 브라우저라는 소프트웨어를 통해 우리는 검색을 하거나, 물건을 사는 등의 행위를 할 수 있게 도와주고, 우리가 작성한 코드도 브라우저라는 소프트웨어 프로그램상에서 수행되게 된다. 브라우저마다 특징이 조금씩 다르지만 공통점이 있다면 바로 동작 방식이다. 브라우저는 사용자가 선택한 자원(HTML, PDF...)을 서버에 요청(request)하고, 서버의 응답(response)를 브라우저에 띄워준다(rendering). 사용자가 원하는 자원을 클릭하여 웹 페이지의 URL주소를 입력한다. => DNS..

번들링 번들링의 개념에 대해서 이해한다. 프론트 엔드 개발자에게 번들링은 사용자에게 웹 어플리케이션을 제공하기 위한 파일 묶음 이다. 프론트엔드 개발에서 번들링이 왜 중요한지 설명할 수 있다. 사실 작은 규모의 프로젝트의 경우 HTML CSS JavaScript 파일을 그냥 전송해도 크게 상관이 없는 듯 하다. 하지만 규모가 커지면서 발생하는 문제들이 있는데 이를 번들링이 해결해 준다. 프로젝트 규모가 커지거나, 파일을 나눠서 관리할 경우 만약 변수가 같다면 충돌이 일어날 것이다. 또한 불러와야 할 파일이 많아진다는건 무거워 진다는 소리고 인터넷 속도가 느릴 경우 이는 사용자에게 불편함을 야기할 수 있다. 만약 번들 파일을 줄이고자 파일의 공백을 다 지워서 코딩을 하게 되면 가독성이 떨어진다. 웹팩 웹팩..

웹표준 웹 표준의 개념과 등장 배경을 기억한다. => 웹 표준이란? W3S에서 권고하는 웹에서 표준적으로 사용되는 기술이나 규칙 이다. 크롬, 사파리 에서는 콘텐츠가 잘 보이지만, 인터넷 익스플로러에서는 안보이는 일이 자주 있었다. 크로스 브라우징이 되지 않아 각각 따로 개발을 해야 하니 시간과 비용이 많이 들었다. 이런 비용과 시간을 아끼고자 웹 개발의 형식을 통합하게 되었다. 그게 바로 웹 표준이다. 웹 표준을 지켰을 때의 장점을 이해한다. 1. 유지보수의 용이성 - HTML, CSS, JS 로 분리하여 관리하다 보니 유지보수가 용이해지고 코드가 경량화 되어 트래픽 비용감소. 2. 웹 호환성 확보 - 웹 브라우저의 종류나 버전 운영체제와 상관없이 항상 동등한 결과나 나오도록 할 수 있다. 3. 검색 ..

로컬 상태와 전역 상태의 차이점을 이해한다. => 로컬상태 : 특정 컴포넌트 안에서만 관리되는 상태 ( 장바구니 페이지에서 cartItem 중 수량체크 인풋, 그게 컴포넌트 안에서만 영향을 주기 때문에 로컬의 예시 ) => 전역상태 : 프로덕트 전체 혹은 여러 컴포넌트에서 동시에 관리되는 상태 ( 장바구니 페이지에서 cartItem 이 추가되거나 수량이 변경되면 금액이 변동된다. 이 금액은 여러 컴포넌트가 상태를 관리함. ) 전역 상태의 필요성을 이해한다. => 전역상태를 남발하는 것은 좋지 않다. 하지만 다른 컴포넌트가 하나의 상태를 다룬다면 출처는 반드시 하나여야 한다. 이를 전역공간으로 한다. 전역공간을 쓰지 않을 경우 공통의 부모 컴포넌트에서 props 를 사용하여 계속해서 내려줘야 하는데 이는 ..