오물오물 개발일기

👨🏻‍💻 늦었다 무한도전 박명수 어록 중 하나인 이 장면은 바로 다음 아래의 문장이 이어진다."늦었다고 생각할 땐 너무 늦은거다. 그러니 지금 당장 시작해라"- 거성 박명수바쁘다는 핑계로 지난 2년간 돌아볼 시간이 없었다.그러니 지금이라도 2년간의 회고를 해보려 한다.🥶 춥다물이 빠지면 누가 발가벗고 수영을 하고 있었는지 알 수 있다.- 워렌 버핏2023년도 초 겨울이었다.계절과 함께 스타트업 시장이 얼어붙었다.미국 금리 인상으로 인한 여파, 스타트업 투자 심리 위축 등등 많은 원인들이 있었다.이미 벌어진 일이다.징조는 있었지만 대비하지 못한 스타트업들에게는 치명적이었고 (대비를 위한 시간이 부족했을지도 모른다.)후속 투자를 받지 못한 많은 스타트업들이 무너졌다.그렇다. 수영장에 물이 빠지고 있었..

😥 급변하는 프론트엔드 환경 웹 개발에 있어서 프론트엔드의 급변하는 환경을 대부분은 모던 Javascript(ECMA2015)이후 부터 시작되었다고 대부분은 알고있지만 정확히는 ECMA2015부터가 아닌 그 이전부터 있었습니다. 바로 Node.js, npm을 통해 이루어지는 환경에서 시작되었습니다. 웹앱의 규모가 굉장히 커져감에 따라 더욱더 급변하고 복잡해집니다. 소프트웨어 하나를 만든다는 가정을 하면 규모가 어느정도일까요? 규모가 큰 웹앱은 수백만 수천만 라인의 코드가 될 수도 있습니다. 이코드들이 또 하나의 파일로는 작업할 수 없기때문에 수십, 수백개 이상의 파일이 하나의 어플리케이션을 위한 규모입니다. 하지만 이것들이 왜 프로젝트 구성을 복잡하게하는 원인이 되었을까요? 👍 스펙의 필요성 Javasc..

😱 벌써 끝이라고? 이맘때쯤 1년 차 회고를 작성했었는데 벌써 1년이라는 시간이 더 흘렀다. 많은 작업을 했고 많은 일들이 있었고 많은 고민들이 있었으며 많은 인연들이 있었다. 아직 정리되지 않은 이 기분으로 한 해를 마무리해야 한다니.. 아쉽기도 하지만 더 나은 미래를 위해 어김없이 2022년 회고를 작성한다. 😳 열심히 했다!! @baegofda's 2022 GitHub Skyline Please rotate your device Visit in desktop for the best experience. skyline.github.com 🌔 변화의 시작 올해는 이사로 시작하였다. 하지만 이사를 진행해야 하는 주에 다리에 화상을 입어서 힘들었던 기억이 난다. (한동안 정말 지옥 같았다.) 이사와 함께 ..

👏 컴포넌트 사용하기 ! 먼저 import와 state선언을 알아보겠습니다. 해당 예제는 Vue : https://github.com/baegofda/blog-vue React: https://github.com/baegofda/blog-react 위의 주소에서 데모와 함께 소스코드 확인이 가능합니다 ! 1. import 먼저 전체 컨테이너가 될 Todos라는 페이지 컴포넌트를 임포트하는 방법입니다. React React 프로젝트의 App.js에 import는 아래와 같이 파일 상단에 import를 합니다. // App.js import Todos from "./pages/Todos"; function App() { return ; } export default App; Vue Vue 프로젝트의 App...

🤷‍♂️ 어쩌다 만난 그대.. Vue 이번에 이직을 하게되며 React.js가 아닌 Vue.js기반을 사용하게 되었다. 더 나아가 검색최적화(SEO)를 위해 Nuxt.js를 도입할 예정이다 ! 때문에 알아보는 간단 React와 Vue 차이점을 알아봅시다. 👏 React는 라이브러리이고 Vue는 프레임워크이다. 라이브러리와 프레임워크 차이를 모르신다면? 네, 가장큰 차이점은 React는 라이브러리이고 Vue는 프레임워크입니다. 여기서 뜻하는 바는 React는 라이브러리인 만큼 자율성이 높아 구현하는 개발자들 특성에 따라서 구현, 구조의 차이가 있습니다. React는 JSX라는 문법으로 구현하지만 문법 내부에서 JS를 통하여 구현하는 자율도가 높은 반면 Vue는 Template형식으로 정해져있는 문법으로만 ..

🙏 Sass(Syntactically Awesome Style Sheets)? Sass는 CSS pre-processor로서, 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성과 가독성을 높여줍니다. 💡 CSS pre-processor(CSS 전처리기) ? CSS를 확장하는 스크립팅 언어로서, 컴파일러를 통하여 브라우저에서 사용 할 수 있는 일반 CSS 문법 형태로 변환합니다. Sass, Less, PostCSS, Stylus etc... 1. 💾 셋팅하기 Sass를 사용하기위해 node-sass를 설치합니다. yarn add node-sass 이후 Sass를 사용하기위해 css파일의 확장자명을 .scss를 사용하여 생성합니다. 💡 .sass 와 .scss Sass가 처음 릴리즈 되었을때는 .sa..

🙏 Context API란? 리액트 16.3부터 정식 릴리즈된 컴포넌트의 레벨과는 상관없이 props를 자유롭게 사용가능하게하는 Hooks이며 state management입니다. 1. 😋 맛보기 아래와 같은 컴포넌트 구조를 가진 사이트가 있다고 가정하여봅시다. state의 value값을 보여주는 컴포넌트는 F와 J라고 가정하고 값을 변화시키는 이벤트는 G 컴포넌트에서 발생한다는 가정 할 경우 value는 F컴포넌트까지 해당 value를 사용하지도 않는 A,B라는 컴포넌트의 props를 거쳐야합니다. handleSetValue()또한 A, B, E 컴포넌트동안 props를 전달받아야 최종 G컴포넌트에 전달이 됩니다. 이러한 문제점을 해결 해주는 Hooks가 바로 Context API입니다. Context..

🙏 useEffect란? class Component의 Lifecycle처럼 functional Component에서 Hook을 사용하여 특정 상황에 작업 처리를 가능하도록 해줍니다. 1. class Component Lifecycle 먼저 상대적으로 잘 사용하지는 않지만 이해를 위해 class Component의 Lifecycle를 알아보겠습니다. 사진에서 추가적으로 React 17.0버전 이후 componentWillMount()와 componentWillUpdate()는 폐기되었습니다. 👀 코드로 알아보기 전체의 파일 구조는 아래와 같습니다. 📂 src>App.js 테스트를 위하여 App.js의 코드는 아래와 같습니다. import { useState } from "react"; import "./..

💡 웹 정보의 중요성 위와 같이 똑같은 결과물을 위해 다른 방법들이 있습니다. 가 아닌 css로 시각적으로 표현 할 수 있지만 웹페이지에서 내포한 의미는 상이합니다. 단순 시각적 표현으로 만든것은 검색엔진에서도 보여주는것이 다릅니다. 이유를 알기위해 아래에서 웹표준과 웹접근성에대하여 알아봅시다. 1. 🤷‍♂️ 웹표준이란 ? 웹에서의 표준은 W3C의 토론을 해 나온 권고안을 말한다. 권고안 이외 단계 수준의 스펙은 비표준이거나 독자확장 요소를 의미하기 때문에 구분하여 사용해야 한다. 어떤 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상 작동해야함을 의미합니다. 권고안을 지켜 웹사이트를 제작하는것을 "웹표준을 지켰다"라고 말할 수 있습니다. 1-2. 👀 웹표준 조건 W3C 권장 표준 DTD..

1. 😅 첫 만남 리액트를 사용한 프로젝트를 만들어보고자 하였고 코로나 관련 API를 사용하기로 하였다. 두곳의 API를 사용하기로 하였고 그중 국내 현황은 굿바이코로나 에서 키를 발급받고 postman에 테스트를 해보았다. api 데이터 테스트를 해보니 문제가 없이 나오는걸 확인하였다. 이후 react에서 데이터를 불러보았습니다. . . . . 두근두근 . . . . . . . . 두근두근 . . . . sigh.. 이러한 문제의 원인과 해결을 위해 웹생태계의 다른 출처로 리소스 요청을 제한하는 것과 관련된 두가지 정책인 CORS와 SOP에대해서 알아보도록 하겠습니다. 2. 🙄 SOP(Same-Origin Policy) ? 자바스크립트(XMLHttpRequest)로 다른 웹페이지에 접근할때 같은 출처의..