WEB

회사의 협력사가 회사가 힘들어져 개발팀도 모두 퇴사한 상황에 운영 중인 프로젝트에 개발이슈가 있어 도움요청이 왔고 디버깅했던 프로젝트 경험담입니다. 그동안 학습하며 배운 지식을 토대로 부딪히면서 겪은 경험위주의 작성으로 작성된 프로젝트를 현재 운영하고 있지는 않지만 잘못된 점은 말씀해 주시면 학습 및 수정하겠습니다. 0. 어떤상황인가? 문제인식 협력사에 사정이 있어 기존 개발자들이 퇴사한 상황에서 프로젝트를 인수받음 협력사가 필요로 하는 특정 이슈를 디버깅해야 함(java spring boot 기반의 코드수정, 데이터 추출 등) 현재 SSL 사설인증서를 사용 중인데 만료시점이 다되어 이를 갱신해야 함 현황 협력사 내부에서 사용 중이던 내부 피씨 맥미니(intel chip)에 모든 자료들이 들어있음 인수인..

Promise의 정의 Promise는 자바스크립트 비동기 처리에 사용되는 객체입니다. 여기서 자바스크립트의 비동기 처리란 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성'을 의미하며, Promise 객체를 사용해 순서를 보장해 줄 수 있습니다. 하지만 비동기처리를 위해 Promise를 잘못사용하면 성능에 좋지 못한 결과를 초래할 수 있습니다. Promise의 병렬처리란? Promise의 병렬처리란 동시에 여러 Promise를 실행하는 것을 의미하는데. 동시에 완료해야 하는 서로 연관성이 없는 독립적인 비동기작업을 수행할때 유용하게 사용합니다. 자바스크립트는 Promise를 병렬로 실행하기 위한 몇 가지 method를 제공하는데, 이 method를 상황에 맞..

공식문서를 통해 진행 Next.js 사이드 프로젝트 특성상 검색엔진에 노출이 필수적이기에 Next.js의 도입이 필요하여 간단하게 튜토리얼을 진행해 보았다. Next.js는 빠른 웹애플리케이션을 만들기 위한 빌딩블록을 제공하는 리액트 프레임워크이다. 정확하게 리액트의 어떤부분을 서포트 해주는것인가. 웹 애플리케이션을 만들기 위해 고려해야할 몇가지가 있다. 유저인터페이스-우리의 앱을 유저가 어떻게 사용하고 적응하는가? 라우팅 - 사용자가 우리의 앱에서 어떻게 이동하는지? 데이터 fetching- 데이터를 어디서 어떻게 가져올것인가? 렌더링 - 정적, 동적인 컨텐츠를 언제 어디서 보여줄것인가? 인터그래이션(통합) 인증, 결제등을 어떨게 연결한것인가? 인프라구조 - 우리의 앱코드를 배포하거나 저장을 어떻게 할..

자바스크립트는 스크립트 언어라서 즉석에서 코드를 실행할 수 있음 REPL이라는 콘솔제공 R(Read),E(Evaluate),P(Print),L(Loop) 윈도우에서는 명령 프롬프트, 맥이나 리눅스에서는 터미널에서 node입력 프롬프트가 > 모양으로 바뀌면, 자바스크립트 코드 입력 입력한 값의 결과값이 바로 출력. 간단한 코드 테스트 용도 > const str = 'Hello World, hello node'; undefined > console.log(str) Hellor world, hello node undefined > 모듈 노드는 자바스크립트 코드를 모듈로 만들 수 있음 모듈 : 특정한 기능을 하는 함수나 변수들의 집합 모듈로 만들면 여러 프로그램에서 재사용 가능 module.exports로 모듈..

function one() { second(); console.log("하나") } function second() { third(); console.log("둘") } function third() { console.log("셋") } one(); 더보기 코드순서 셋 > 둘 > 하나 ↑ 이순서로 쌓이고 third() ↓이순서로 실행돰 second() first() anonymous 호출스택(함수의 호출, 자료구조의 스택) anonymous는 가상의 전역 컨텍스트(항상 존재) 함수 호출 순서대로 쌓이고 역순으로 실행됨 함수실행이 완료되면 스택에서 사라짐 LIFO(Last in first out)나중에 쌓인게 먼저나가는 후입 선출 구조로 스택이라 불림 function oneMore() { console.l..

노드교과서를 토대로 정리한 내용 1. 노드의 정의 Node.js는 크롬 V8자바스크립트 엔진으로 빌드된 자바스크립트 실행기로 브라우저의 종속성에서 벗어남 멀티쓰레드인 자바에비해 싱글쓰레드와 비동기가 가능하여 쉽게 접근이 가능한 장점으로 인기가 폭증 참고서 https://ko.javascript.info/ 모던 JavaScript 튜토리얼 ko.javascript.info 2. 내부구조 2008년 V8엔진 출시 후 09년 노드 프로젝트 시작

개발환경세팅을 마치고 미리 준비할것들을 확인해보았다.당연히 자바스크립트 지식이 중요한데 mdn문서를 다시 한번 훑어봤다.https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript A re-introduction to JavaScript (JS tutorial) - JavaScript | MDN Why a re-introduction? Because JavaScript is notorious for being misunderstood. It is often derided as being a toy, but beneath its layer of deceptive simplicity, powerful langua..

리액트 네이티브의 학습이 필요해서 공식문서를 통해 학습을 진행했습니다. https://reactnative.dev/docs/getting-started Introduction · React Native This helpful guide lays out the prerequisites for learning React Native, using these docs, and setting up your environment. reactnative.dev 메인화면에 요약된 리액트 네이티브 특징은 다음과 같다. - 안드로이드와 ios를 리액트를 통해 만들수 있다. - 문법상 자바스크립트를 사용하고 웹앱처럼 보이지만 native app을 실행해볼수 있다. - native app에 대한 공부없이 리액트를 학습했다면 ..

.../ 이 거슬린다. 우리가 진행한 프로젝트는 상대경로를 통해 각 폴더에 접근한 프로젝트였다. 상대경로를 이용하면 굳이 코드 건드리지 않고 작업은 편하다고 생각했지만 컴포넌트가 세분화 될수록 다른 개발자가 만든 컴포넌트를 import해올때 어디에있는지 경로를 찾는것도 일이라 생각했다. 처음부터 설정하고 작업을 진행할걸이라는 생각이 들면서 다음프로젝트에 절대경로를 설정해서 개발을 진행하면 코드가 좀더 깔끔하지 않을까 생각하며 절대경로 설정방법을 확인해봤다. 설정방법 이래저래 찾아보니 cross-env 라이브러리를 설치하는 방법도 있는데 공식문서를 보니 json파일추가로 라이브러리 설치없이 절대경로 설정이 가능한것 같아 이 방법으로 적용해보았다. CRA문서 > jsconfig.json 또는 타입스크립트의 ..

만들었다고 끝이아니다. 사이트의 성능개선을 위해 크롬에서 제공하는 웹사이트의 성능을 측정하는 도구 LightHouse로 측정했고 하성능 최적화를 위해 하나하나씩 해결이 필요했다. 우선 각각의 컴포넌트 파일이 어떤 코드로 구성이 어떻게 되어 있는지 확인이 필요했고, 어떻게 하면 초기 리로딩 성능을 개선할지 인사이트를 주는 cra-bundle-analyzer라는 패키지를 발견해서 적용해보았다. 설치 1. 먼저 webpack-bundle-analyzer를 devDependencies로 설치 $ yarn add -D webpack-bundle-analyzer 2. cra-bundle-analyzer도 devDependencies로 설치 $ yarn add -D cra-bundle-analyzer 3. 아래 명령..