분류 전체보기77 [Trouble Shooting] Prettier에서 package.json을 자꾸 발목잡을 때 해결방법 + 어찌 해결했더니,,, 또 다른 경고가.. 사실, 본인은 ESlint와 Prettier를 부트캠프에서 "설치하면 좋은 툴" + "코드 일관성 및 유지보수성 확보"라는 소개를 바탕으로 설치했기 때문에 이전 글과 같이 깊이 알지는 못했다. 기본적인 설정이 끝나고 자잘한 실수나 예측되는 오류를 잡아주니 좋다고만 생각했다. 하지만 이를 설정하고 여러 코드를 작성해보니 신경써야 할 것들이 2배가 된 느낌이었다. 아주 자잘한 부분까지 일일이 저장하고 검사하니 여간 귀찮은게 아니었다. 그럼에도 불구하고 예측되는 오류를 잡아주니 좋다고 생각했지만.. 어떤 파일을 작성하고 나면 꼭 package.json을 붙잡고 늘어져서 해당 파일에 가서 save를 해야만 react dev 서버가 정상적으로 렌더링되니 이 부분을 꼭 고쳐야겠다는 생각이 들었다. # 분명,, 아무.. 2023. 4. 15. Code convention (eslint + prettier) 코드 컨벤션이란? 코드컨벤션은 프로그래밍에서 코드를 작성하는 일련의 규칙이나 모양을 말한다. 실질적으로 협업을 위해 코드를 만들 때 보편적으로 사용되고 있는 모양과 유사하게 코드를 구성함으로서 협업 시에 불필요한 리딩 오류를 줄이기 위한 노력들로 생각할 수 있다. 코드 컨벤션을 준수하고 있는가?에 대한 영역은 여러 현장과 상황에 따라 다르게 받아들여질 수 있으나, 크게 Code Quality와 Code Formatting로 구분하여 생각할 수 있다. Code Quality(코드 품질)는 코드의 성능, 가독성, 유지보수성을 종합적으로 평가하는 것을 말한다. 하지만 개발자가 코드를 작성하는 단계에서 이 모든 것을 스스로 종합하여 평가하는 것은 쉽지 않다. 따라서, 개발 과정에서 코드 품질에 신경을 쓴다 함은.. 2023. 4. 15. React-quill을 활용한 구현 예제 참조블로그 : https://velog.io/@onezerokang/Quill%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%B4%EC%84%9C-%ED%85%8D%EC%8A%A4%ED%8A%B8-%EC%97%90%EB%94%94%ED%84%B0-%EB%A7%8C%EB%93%A4%EA%B8%B0-Quickstart1 Quill을 사용해서 텍스트 에디터 만들기: Quickstart(#1) quill을 시작하는 가장 좋은 방법은 간단한 예제를 만들어보는 것입니다. Quill은 DOM element를 사용하여 에디터를 세팅할 수 있습니다.이게 Quill의 초기 세팅법입니다!Quill의 진정한 장점은 유연성과 velog.io 맨땅에 헤딩으로 공식문서와 chat gpt를 갖고 씨름하던 나에게,,, .. 2023. 4. 13. (Rich-TextEditor) React-quill Rich Text-Editor & WisWig Rich Text-Editor(리치 텍스트 에디터)와 WisWig(위즈윅) 에디터는 흔히 블로그나 웹 문서를 작성할 때 흔히 볼 수 있는 위와 같은 에디터를 말한다. 통상적으로 비슷한 의미로 쓰이지만 다음과 같은 차이점을 갖는다. 리치 텍스트 에디터는 일반적으로 HTML 코드를 직접 작성하는 것이 아니라, 일반적인 텍스트 에디터와 비슷한 방식으로 작동한다. 사용자는 문서의 스타일, 글꼴, 크기 등을 선택하거나, 강조, 들여쓰기, 링크 등의 일반적인 기능을 수행할 수 있지만, 사용자가 작성한 문서는 HTML 코드로 저장된다. 반면에 위지윅 에디터는 "What You See Is What You Get"의 약자로, 사용자가 작성한 문서가 실제로 출력될 모습과 비.. 2023. 4. 12. [Trouble Shooting] <input> 태그에서 undefined가 제출되는 경우 React 프로젝트를 진행하다가 아래와 같은 오류가 발생했다. (본 사례의 경우 이미 해결한 내용을 다시 점검하고 해결하느라 예시 코드를 활용했다.) import "./styles.css"; export default function App() { const handleSubmit = (e) => { console.log(e.target.value); // 일단 여기서 undefined 출력 }; return ( ); } 사실, 이 문제에 대한 다음 스텝은 어렵지 않게 찾을 수 있었다. 기존에 본인이 코드를 짜면서 input에서 event를 다루는 연습을 종종 했기에 사전에 작성했었던 코드들을 살펴봄으로서 찾을 수 있었다. 태그는 내부에서 제출되는 각 요소가 제출한 최종 이벤트들을 모아서 하나의 객체로 .. 2023. 4. 11. Flux와 MVC (단방향 데이터 흐름) (1) 리덕스는 기본적으로 "단방향 데이터 흐름"을 갖고 있다. (혹은 Flux 아키텍쳐를 채택한다고도 한다.) 이 흐름을 이해하기 위해서는 소프트웨어 개발이 어떤 구조에 기반하는지부터 시작해야 한다. 다음은 소프트웨어 개발에서부터 단방향 데이터 흐름 vs 양방향 데이터 흐름까지 본 글을 목차화한 것이다. 1. 소프트웨어 개발에서의 아키텍쳐(architecture) 2. 웹 소프트웨어 개발에서의 Model과 View 3. Flux 아키텍쳐 (단방향 데이터 흐름) 4. MVC 아키텍쳐 (양방향 데이터 흐름) 5. 단방향 데이터 흐름 vs 양방향 데이터 흐름 유의할 점은 본인이 상당히 컴퓨터 공학에 대한 지식이 부족하다는 점(🤣)과 함께 각 개념들이 대립되는 개념이라기보다는 상황에 맞게 선택되어야 하는 개념이라는.. 2023. 4. 10. Cors 에러 및 프록시 SOP 및 Cors의 개념 HTTP 통신이 네트워크 망을 통해 확산되고, 여러 리소스가 공유되기 시작하면서 보안 상의 취약점이 대두되었다. 이를 개선하고자 등장한 개념이 SOP와 Cors 개념이다. 모든 웹은 각각의 출처(Origin)를 갖는다. 출처는 프로토콜 + 호스트 + 포트의 조합으로 되어 있고, 이 중 하나라도 다르면 동일한 출처로 보지 않는다. 아래는 동일하지 않지만 헷갈리기 쉬운 출처의 예시이다. 1. 프로토콜 (http vs https) : http://example.com vs https://example.com 2. 호스트 (haseong.example vs example) : http://haseong.example.com vs https://example.com 3. 포트 (:44.. 2023. 4. 4. 모던 개발 프로세스와 CI/CD 파이프라인 (개요) 개발 프로세스란? 모든 소프트웨어 개발은 최종적으로 "배포(Deply)"를 목적으로 한다. 배포된 소프트웨어와 일련의 수익모델을 통해 수익을 창출해야 하기 때문이다. 개발 프로세스는 이러한 개발 및 유지보수의 목적으로 수행되는 활동을 절차적으로 정리한 모델을 말한다. 전통적 개발 프로세스 vs 모던 개발 프로세스 전통적인 개발 프로세스 모델로는 대표적으로 워터폴(Waterfall) 방식이 있다. 워터폴 방식은 예외적인 상황을 최소화하여 팀의 규모나 상황에 관계없이 정확한 결과물을 제공하는 것을 전제로 한다. 워터폴 방식은 이름에서도 알 수 있듯, 요구분석 => 설계 => 개발 => 테스트 => 유지보수의 선형적 모형을 갖고 있다. 워터폴 개발 방식은 실제 출시 기한을 정해놓고 프로세스가 진행되며, 실제 .. 2023. 4. 3. 테스트의 종류와 테스트 트로피 참고문서 : https://www.baytechconsulting.com/blog/test-pyramid-vs-testing-trophy-whats-the-difference 프론트엔드에서 테스팅이 필요한 이유 2가지 1. Agile과 DevOps의 확산 - Agile과 DevOps 프로젝트 flow에 E2E 테스트만을 사용하여 소프트웨어 개발을 할 경우 뒤늦게 버그를 찾고 원인을 찾는데 시간이 많이 소요되게 된다. 특히 E2E 테스트에서는 종합적인 결과만을 피드백하기 때문에 단위 기능에서 발생하는 에러를 찾기가 힘들다. 2. 프론트엔드 개발의 고도화 - 프론트엔드 개발이 고도화되면서 다양한 라이브러리와 인터페이스의 상호작용 또한 고도화되었다. 이러한 기능들을 구현하기 위한 코드도 고도화되는 것 또한 .. 2023. 4. 1. AWS(아마존 웹 서비스) 클라우드 컴퓨팅 시스템 클라우드 서비스(Cloud Service)가 보편화 되기 이전까지, 웹을 배포하기 위해서는 별도의 자사(혹은 개인의) 서버용 컴퓨터가 필요했다. 이는 소형 서비스 등에서 불필요한 지출을 야기했다. 하지만, 가상화 기술(Virtualization)의 발전에 따라 클라우드 기술이 보편화되면서부터 각자가 만든 서비스를 타사의 데이터 센터의 메모리에 저장해놓고, 이를 사용대비 비용지출(온디멘드/Ondemand) 방식으로 변화하기 시작했다. 이러한 변화는 다음과 같은 장단점을 갖는다. 장점 1. 필요할 때마다 컴퓨팅 능력을 유연하게 조절할 수 있다. 2. 고정비용(온프레미스/Onpremises)이 사용한 만큼의 비용(온디맨드/Ondemand)으로 바뀌었다. 3. 컴퓨터의 스냅샷을 이용해 다.. 2023. 3. 31. Optimization(최적화) 최적화는 다양한 맥락에서 세부적인 차이를 가진 단어이지만, 보편적으로 "가능한 적은 리소스를 소모하면서 빠르게 원하는 결과를 얻을 수 있도록 개선하는 것"을 의미한다. 최적화를 통해 얻을 수 있는 이점은 여러가지이지만 사용자 이탈률 감소, 사용자 전환률 증가, UX향상이 가장 눈에 띄는 이점이다. 최적화는 HTML 기본 구조에서부터 시작해서 React.js까지 개발에 사용되는 모든 프로세스에 적용될 수 있다. HTML에서의 최적화 1. DOM 트리를 가능한 한 가볍게 만들기 : 자식 요소가 많고, 트리의 복잡도가 높을수록 연산해야 할 요소가 많아진다. 2. 인라인 스타일 피하기 : 각 요소에 인라인 스타일을 넣을수록 렌더링에 불리하다. CSS에서의 최적화 1. 사용하지 않는 CSS 스타일 제거 : CSS.. 2023. 3. 30. TDD(Test-driven Development) : JS TDD 개발 방법론? 테스트 주도 개발 방법은, 기능 단위마다 테스트케이스를 먼저 작성하고 이를 수정하는 방향으로 코드를 짜는 개발방법론을 말한다. 테스트 주도 개발에서 사용하는 개발 순서는 다음과 같다. Write Failing Test: 실패하는 테스트 코드를 먼저 작성한다. Make Test Pass: 테스트 코드를 성공시키기 위한 실제 코드를 작성한다. Refactor: 중복 코드 제거, 일반화 등의 리팩토링을 수행한다. 테스트를 먼저 짜서 개발을 하게 될 경우 다음과 같은 이점을 갖는다. 1. 버그에 대응하는 간결한 코드를 짤 수 있다. 2. 개발 후 에러를 줄일 수 있다. 3. 단위 테스트를 끝낸 코드이기 때문에, 오류에 대한 리포트가 충분하고 향후 유지보수가 용이하다 느낀점,,, TDD 개발.. 2023. 3. 29. Typescript 개요 타입스크립트란? Typescript는 마이크로소프트에서 개발한 자바스크립트 기반의 프로그래밍 언어이다. 타입스크립트의 공식문서에 따르면, 타입스크립트는, 1) 자바스크립트의 구문에서 추가적인 integration을 넣음으로 자바스크립트의 단점을 보완한다. 2) 자바스크립트가 호환되는 모든 에디터 및 환경에서 작동한다. 3) 규모에 상관없이 안정적인 작업을 가능하도록 한다. 는 강점을 갖는다. 추가적인 타입의 추가가 갖는 강점 ( Udemy 강의자료 참조 ) function add (a, b) { return a + b; // a + b를 하길 원해! } // DOM의 결과물을 가져올 때 === 문자열로 가져옴 add('5', '3') // "ab" function add (a: number, b: num.. 2023. 3. 29. Bundling (번들링) 번들링이란? 여러 파일을 하나의 패키지로 묶어서 배포하는 것을 말한다. 번들링을 해야하는 이유 : 여러 파일로 제작된 애플리케이션은 서버를 통해 데이터를 주고받을 때, 파일의 종류가 많고 다양할수록 상당한 자원을 소모하게 된다. 번들링을 하게 된다면, 이러한 자원을 아끼고 더 나은 유저경험과 자원절약을 도모할 수 있게 된다. Webpack이란? 번들링을 하기 위한 툴로, npm으로 설치할 수 있다. npm install -D webpack webpack-cli 전세계적으로 esbuild, parcel, rollup, snowpack, vite, webpack 등의 번들링 툴들이 있지만, 현재 가장 많이 활용되고 있는 번들러(번들링 툴)은 Webpack이다. Webpack이 기능하는 원리는 "모듈 번들러".. 2023. 3. 20. 인터프리터와 컴파일러의 차이를 직관적으로 이해해보기! 참조자료 : https://www.geeksforgeeks.org/difference-between-compiler-and-interpreter/ Difference between Compiler and Interpreter - GeeksforGeeks A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company interview Questions. www.geeksforgeeks.org "자바스크립트"는 인터프리터 언어이기 때.. 2023. 3. 16. TCP/IP 4계층 참조문헌 https://ko.wikipedia.org/wiki/%EC%9D%B8%ED%84%B0%EB%84%B7%EC%9D%98_%EC%97%AD%EC%82%AC https://www.geeksforgeeks.org/tcp-ip-model/ TCP/IP 등장배경 TCP/IP의 등장배경은 ARPANET(Advanced Research Projects Agency Network)에서 사용되던 Network Control Program (NCP)가 계층화되어있지 않아, 통신이 복잡하고 안정성을 저해하는 문제의식에서부터 출발한다. NCP를 사용하여 통신을 할 때에는 사용자들이 호스트 간의 통신에 필요한 모든 것을 직접 구현해야 했고, 이는 네트워크 관리와 개발의 복잡성을 증가시켰다. TCP/IP 계층은 이러한 .. 2023. 3. 13. 컴퓨팅 사고 : 분해, 패턴인식, 추상화, 알고리즘 참고문헌 : https://learn.microsoft.com/en-us/training/modules/computational-thinking-importance-education/ Computational thinking and its importance in education - Training Computational Thinking is a way of thinking about problems, similar to mathematical thinking or scientific thinking. But it is slightly different than those methods of thought. The problems being solved with computational thinkin.. 2023. 3. 11. 프로그래밍 = 서비스 제공을 위한 컴퓨터 실행의 원천 (feat. 첫 아이폰을 만졌을 때와 지금) 참고문서 : https://ko.wikipedia.org/wiki/%EC%8B%A4%ED%96%89 실행 - 위키백과, 우리 모두의 백과사전 위키백과, 우리 모두의 백과사전. ko.wikipedia.org 주의! 혹시나, 보는 분이 계시다면 이 게시글은 상당한 문과적 감성 + 추억팔이가 포함된 글이오니! 관심이 없으신 분께서는 다음의 요약문만 보고 다음 게시글로 넘어가시길 강력히! 권장드립니다. 자바스크립트를 MDN과 구글링을 통해 학습하다보면, 자꾸 인터프리터 / 스크립트 / 런타임 / 컴파일과 같은 용어가 등장한다. 각각의 용어를 찾아보면 운영체제 런타임 환경 등의 더 어려운 단어들로 해당 용어를 설명하고 있었다. 이에 절망하고 있다가 https://velog.io/@jhur98/%EC%BB%B4%E.. 2023. 3. 10. OSI 7계층 참고문헌: https://ko.wikipedia.org/wiki/OSI_%EB%AA%A8%ED%98%95 https://www.ibm.com/docs/ko/aix/7.1?topic=networks- OSI(Open Systems Interconnection) 모형과 OSI 7계층 1970년대 말, ISO와 CCITT 2개이 국제 표준화 기구는 발전해가는 네트워크 모델의 안정성과 효율성을 확보하기 위해 네트워킹 모델을 정의하는 문서를 제작했다. 1970년대 이전에는 소수의 컴퓨터 간의 네트워크 통신이 주된 형태였기 때문에 대규모의 네트워크 형태가 되었을 때 여러 문제가 발생했다. 1. 호환성 : 통신규격과 프로토콜이 각 컴퓨터마다 달랐다. 2. 확장성 : 컴퓨터와 단말기 간의 점대점 연결에 초점이 맞춰졌기.. 2023. 3. 9. Cookie & Session 대표적인 네트워크 통신 인증방식인, Session과 Cookie를 이해하기 위해서는 먼저, HTTP의 무상태성부터 이해해야 한다. HTTP는 기본적으로 무상태성(Stateless)에 기반한다. 무상태성이란, HTTP 통신이 이뤄질 때 이전 요청과 관련 정보를 기억하지 않는 것을 말한다. HTTP가 무상태성을 채택한 이유는 다음과 같다. 1. 확장성 HTTP는 전 지구를 범위로 하는 프로토콜이기 때문에, 최대한 가벼워야 한다. 만약, HTTP 각각이 상태를 유지하기 위한 규칙을 도입한다면 불필요한 상태를 정의해야 하고 이는 서버의 부하로 이어진다. 이를 방지하고자 HTTP는 무상태성을 채택하고 있다. 2. 유연성 HTTP는 다양한 클라이언트와 서버 간의 통신을 지원함에 있어 무상태성을 채택함으로 클라이언트.. 2023. 3. 7. 이전 1 2 3 4 다음
