티스토리

개발모어

검색하기

블로그 홈

개발모어

ujaa.tistory.com/m

모든 꾸준히 해보자

구독자: 5

방명록 방문하기

주요 글 목록

Mixpanel을 활용한 사용자 행동 패턴 분석(1) 들어가며: 사용자 피드백으로부터 시작된 개선부스트캠프에서 6주간 블록 코딩을 기반으로 정적 웹사이트를 만들 수 있는 BooLock 을 만들었다. 서비스를 완성한 후 캠퍼분들에게 서비스를 사용한 후 피드백을 부탁드렸었다. 여러 피드백을 바탕으로 서비스를 개선해 나갔지만 사용자는 자신의 행동 중 어디가 불편한지 잘 모르는 경우도 있고 데이터를 이용해서 행동 속에서 사용자의 불편함을 객관적으로 도출해보고 싶다는 생각이 들었다.Mixpanel을 통해 사용자 행동 흐름 분석하기mixpanel을 사용하면 사용자의 행동 흐름을 파악할 수 있도록 플로우 리포트를 제공한다. 사용자의 행동 흐름을 수집해서 보여줌 모두가 직관적으로 데이터를 보고 직접 분석도 할 수 있어야 설득력이 생긴다고 생각했다.Mixpanel이 사용자.. 공감수 3 댓글수 1 2025. 1. 12.
Chromium의 렌더링 파이프라인: Blockly는 왜 움직이는 블록을 다른 레이어로 분리할까? 목표브라우저 렌더링 과정 딥하게 이해하기(크롬을 기준으로 작성)브라우저 렌더링을 최적화하는 기법 알아보기들어가며 최근 한 프로젝트에서 Blockly라는 블록 코딩 라이브러리를 사용하다가 이상한 현상을 발견했습니다. 블록을 드래그하면 순간적으로 이상한 위치로 이동하는 문제였습니다. 문제의 원인을 파악하기 위해 Blockly의 GitHub 코드를 살펴보던 중, 흥미로운 점을 발견했습니다. 바로 블록의 드래그가 시작될 때 해당 블록이 특정 레이어(drag layer)로 이동한다는 점이었습니다. startDrag(e?: PointerEvent): void { ... this.workspace.getLayerManager()?.moveToDragLayer(this.block);} 왜 Blockly는 드래그되는.. 공감수 6 댓글수 3 2025. 1. 1.
모노레포 개발 초기 환경 세팅 초기 세팅의 결과 목표[x] client와 server를 분리된 폴더에서 개발할 수 있다.[x] root환경에서 client와 server의 dev 모드를 실행할 수 있다.[x] vscode에서 저장을 하면 prettier와 eslint가 자동으로 돌아간다. Node.js 및 Pnpm 설치버전 확인확인한 날짜 분류 LTS 버전 명령어 다운로드 링크2024-11-04Node.jsv22.11.0node -v참고 링크2024-11-04pnpmv9.12.3pnpm -v참고 링크Node.js 설치 방법위의 다운로드 링크에 들어가서 설치pnpm 설치 방법npm install -g pnpmpnpm 초기화 및 워크스페이스 설정package.json 파일 생성pnpm initpackage.json 내용 수정{ "nam.. 공감수 3 댓글수 1 2024. 12. 12.
패키지 버전관리 틸드(~)와 캐럿(^) 정리하게 된 계기"tailwindcss": "^3.4.14","vite": "^5.4.10",package.json에 버전을 명시할 때 버전 앞에 붙는 틸드 ~ 와 캐럿 ^ 이 무슨 뜻인지 정확하게 이해하고자 정리하였다. (전에 글로 읽었었는데 까먹었다…)Software Versioning틸드와 캐럿에 대해 알아보기 전에 소프트웨어의 버전을 작성하는 방법부터 간단하게 이해하고 넘어가자. 소프트웨어의 버전을 명시하는 방법은 다양할 수 있다. 그 중 node.js와 npm은 모두 **시멘틱 버저닝(Semantic Versioning)**이라는 소프트웨어 버전 변경 규칙을 사용한다.Semantic Versioning시멘틱 버저닝은 Major.Minor.Patch 형태로 버전을 작성한다.https://semve.. 공감수 1 댓글수 0 2024. 12. 12.
EsLint와 Prettier의 충돌 막기 자주 사용하는 EsLint와 Prettier의 충돌 해결 방식ESLint와 Prettier 모두 코드 포매팅 기능이 있어서 서로 충돌이 발생할 수 있다. 이 문제를 해결하기 위해 보편적으로 eslint-config-prettier 와 eslint-plugin-prettier 플러그인을 추가로 설치한다.eslint-config-prettier: Prettier와 겹치는 ESLint의 포매팅 규칙을 비활성화eslint-plugin-prettier: Prettier의 포매팅 규칙을 ESLint 규칙으로 동작하게 함바로 eslint에서 prettier와 겹치는 포멧팅룰은 삭제하고 prettier의 포멧팅 룰을 eslint의 룰로 포함시켜 eslint를 prettier와 함께 쓰는 것이였다.이제는 권장하지 않는다.. 공감수 2 댓글수 1 2024. 12. 12.
husky & lint-staged로 코드 품질 올리기 🐶 Husky가 뭔가요모노레포로 개발 환경을 설정하면서 다른 팀원분들의 레포지토리를 많이 참고했는데 husky라는 라이브러리를 많이 쓰시는 것을 알게 되었다. 그리고 멘토링을 받으면서 자동화에 관심이 있다면 husky 사용을 추천받아 husky가 뭔지 알아보기로 했다.EsLint를 강제하는 방법이전에 팀원과 코드를 깔끔하게 작성하기 위해, 유지보수를 위해, 팀이 하나의 공통된 코드 스타일을 사용하고 코드의 품질을 올리기 위해 eslint, prettier를 사용하기로 했다. prettier는 auto save를 설정해놨기 때문에 어길일이 없지만 eslint를 명령어로 돌려야 돌아가게 된다. 그래서 PR을 올리기 전에 lint를 한 번 돌리고 올려야 하는데 만약 이를 까먹고 안 하는 경우가 발생한다면? .. 공감수 1 댓글수 0 2024. 12. 12.
SVG 파헤치기 SVG를 파헤치게 된 이유…블록 코딩 사이트를 만드는 팀 프로젝트를 진행하면서 blockly라는 블록 조립 라이브러리를 사용하게 되었다. 기획대로 UI를 수정하려고 보니 라이브러리의 많은 UI 요소들이 SVG로 만들어져 있었다. 이를 제대로 다루기 위해서는 SVG에 대한 이해가 선행되어야 된다고 생각했고 그래서 이 글에서 svg에 대해 알아보기로 했다.SVG 알아보기SVG는 뭐길래 안 깨지는 거니?SVG(Scalable Vector Graphics)는 이름에서 알 수 있듯이 벡터 기반의 그래픽 파일 포맷이다. JPEG와 같은 픽셀 기반의 래스터 파일과는 달리, SVG는 점과 선 등 기하학적 요소에 수학 공식을 적용해 이미지를 생성한다. 그래서 그래픽의 크기를 마음대로 조절해도 화질이 깨지지 않아 특히 아.. 공감수 0 댓글수 0 2024. 11. 17.
잠깐, eslint의 새로운 config 시스템에 대해 아시나요? 문제 상황처음에 vite + react + typescript로 기본 프로젝트 설정을 진행했는데 eslint 9.13.0 버전이 설치되었고 기본 설정 파일은 eslint.config.js였다. 그래서 해당 파일에 팀원분께 받은 .eslintrc.js 파일 내용을 eslint.config.js 에 무지성으로 그대로 복사했더니 다음과 같은 에러를 마주했다.A config object is using the "00" key, which is not supported in flat config system 해당 에러를 마주하면서 flat config system에 대해 처음 알게 되어서 정리하게 되었다.Flat Config System?ESLint v9.0.0부터는 기본적으로 flat config file fo.. 공감수 0 댓글수 0 2024. 11. 10.
Yarn Berry와 Pnpm 알아보기 그룹 프로젝트를 시작하면서 팀원들과 함께 패키지 매니저 선택에 대한 고민을 하게 되었다. 기존에 많이 사용되어 온 npm의 문제점을 개선한 다양한 모던 패키지 매니저가 등장했는데, 그 중 특히 주목받고 있는 pnpm 을 사용하기로 했다. 멘토님께서 yarn berry도 언급해 주셔서 pnpm이 yarn berry와 비교를 해본 뒤 패키지 매니저를 결정하기로 했다. (근데 사실 이미 pnpm을 사용하기로 이야기를 나눈 후에 yarn berry도 찾아보는 형식으로 이야기가 진행된 것이라 pnpm 걍 쓸 것 같다.)이 글에서 npm의 문제점을 짚어보고, 이를 해결하려는 yarn berry와 pnpm에 대해 간략하게 정리했다.기존 npm(또는 Yarn 1)의 문제점유령 의존성 (Phantom Dependency.. 공감수 12 댓글수 7 2024. 11. 3.
div 테두리 겹침 현상 해결하기 div의 테두리(border)가 겹치는 현상이 발생했다.border: 5px solid blue; 이 문제를 해결하기 위해서 구글링을 하다가 border-collapse 라는 속성을 알게 되었다. border-collapse는 표(table)에서 cell의 테두리가 분리(seperated)될지 상쇄(collapsed)될지 결정할 수 있는 속성이다. 근데 지금은 table의 cell이 아닌 div의 테두리가 겹치는 것이라서 다른 해결 방법이 필요해 보였다. 그때 한 동료분이 outline이라는 속성을 알려주셨다. mdn에 들어가서 outline에 대한 설명을 읽으면 border와의 차이점에 대해 나와있다.outline은 border와 다르게 콘텐츠 밖에 그려지며 절대 공간을 차지하지 않는다. 위의 예시에서.. 공감수 0 댓글수 1 2024. 10. 13.
부동소수점에 오차가 발생하는 이유(feat. IEEE 754) 인트로최근 모딥다를 읽다가 흥미로운 내용을 발견했다.부동소수점 산술 연산은 정확한 결과를 기대하기 어렵다. 정수는 2진법으로 오차 없이 저장 가능하지만 부동소수점을 표현하기 위해 가장 널리 쓰이는 표준인 IEEE 754는 2진법으로 변환했을 때 무한 소수가 되어 미세한 오차가 발생할 수밖에 없는 구조적 한계가 있다. 이 구절을 읽고 부동 소수점에 대해 정확히 알아보고 싶은 생각이 들었다. 그리고 왜 2진법으로 변환했을 때 무한 소수가 되어버리는 건지 궁금했다. 그래서 이번 글에서는 관련 내용을 찾아보다가 알게된 내용을 정리해보고자 한다.10진법 소수를 2진법으로 변환하기우선 간단하게 10진법 소수를 2진법으로 바꿀 수 있는 방법은 무엇인지부터 알아보았다. 간단한 예로 0.1을 변환해보자.소수에 2를 곱하.. 공감수 2 댓글수 2 2024. 10. 6.
Babel과 react Runtime 옵션 Babel은 무엇일까?babel 공식 사이트를 읽어보면 babel에 대한 설명이 잘 나와있다.Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.Transform syntaxPolyfill features that are missing in your target environmentSource code transformations Babel은 문법 변환을 지원한다. 그래서 최신 JavaScript 코드를 이전 버전의 브라우저에서도 호환 가능하도록 구버전 J.. 공감수 0 댓글수 1 2024. 9. 29.
실행 컨텍스트 가볍게 이해하기 자바스크립트를 조금 공부하다보면 실행 컨텍스트라는 용어를 한 번쯤 들어보게 된다. 이 개념을 확실하게 이해하기 위해 간단한 예제 코드를 통해 실행 컨텍스택과 실행 컨텍스트를 저장하는 스택의 동작 방식을 알아보자.실행 컨텍스트(execute context)란?실행 컨텍스트는 말 그대로 코드를 실행할 때 필요한 정보(맥락)를 의미한다. 이 정보에는 구체적으로 변수, 함수 선언, this 값 등이 포함된다. 자바스크립트 엔진은 코드를 실행할 때 실행 컨텍스트를 생성하고, 이를 실행 컨텍스트 스택에 쌓아 관리한다.실행 컨텍스트의 종류는 크게 4가지로 구분할 수 있는데, 그 중 자주 쓰이는 전역 실행 컨텍스트(Global Execution Context)와 함수 실행 컨텍스트(Function Execution C.. 공감수 0 댓글수 0 2024. 9. 22.
[부스트캠프 9기] 멤버십 웹 풀스택 4주 과정 회고록 멤버십의 첫 4주를 마쳤다. 시간이 정말 빠르게 흘러갔다. 이 기간 동안 많은 것을 배우고, 도전하고, 또 깨달았다. 4주 간의 여정을 돌아보며 느낀 점들을 정리해보고자 한다.시작부터 꼬인 멤버십을 시작하기 전, 학교 연구실 일을 정리해야 했다. 멤버십 시작 전 일주일과 첫 주 주말까지 최대한 일을 헤치우려 했지만, 양이 너무 많았다. 결국 이미 지친 상태로 멤버십에 들어왔고, 첫 주 주말에도 제대로 쉬지 못했다. 연구실 일에 대한 스트레스로 인해 초반에 체력 관리가 제대로 되지 않았다. 첫 시작을 평탄하게 하지 못해서 너무 아쉬웠다.기술에 대한 욕심과 깨달음 초반에 미션을 수행하면서 web component와 swagger를 꼭 공부해보고 싶었다. 하지만 이 기술들을 공부하는 데 시간을 너무 많이 써서.. 공감수 3 댓글수 1 2024. 9. 15.
offsetWidth으로 강제로 랜더링시키기 로그인과 회원가입 폼을 만들 때 로그인 화면에서 회원가입 버튼을 누르면 아래처럼 로그인 모달이 180도 가로로 뒤집히면서 회원가입 폼이 나타나게 하고 싶었다. 그래서 처음에는 180도 뒤집는 flip 애니메이션을 만든 뒤에 회원가입 버튼과 로그인 버튼의 click 이벤트 핸들러를 다음과 같이 작성했다.function animateForm() { const formWrapper = document.querySelector(".auth_form_wrapper"); formWrapper.classList.remove("animate_flip_reverse"); // 반대 애니메이션 제거 formWrapper.classList.add("animate_flip"); // 애니메이션 추가}function an.. 공감수 1 댓글수 1 2024. 9. 8.
객체를 불변하게 만드는 것이란?(feat.getOwnPropertyDescriptor()) 자바스크립트 개발을 하다 보면, 객체를 불변하게 만들어야 하는 경우가 종종 발생한다. 이런 상황에서 보통 우리가 사용하는 방법이 바로 Object.freeze()다. 그러나 단순히 Object.freeze()를 호출하는 것이 객체를 불변하게 만드는 이유일까? 사실 객체가 불변하다는 것은 객체가 가진 내부 속성에 따라 달라진다. 이번 글에서는 이 내부 속성에 대해 알아보겠다! Internal Slot과 Internal Method 내부 속성을 이해하려면 internal slot과 internal method 개념을 짚고 넘어가는 게 좋다. 다음은 ECMAScript의 6.1.7.2 Object Internal Methods and Internal Slots 내용을 참고해 internal slot과 inte.. 공감수 3 댓글수 1 2024. 9. 1.
[부스트캠프 9기 챌린지] 3주차 회고 - 🤒 🗒️ 3줄 요약골골됐다공부한 내용을 더 열심히 정리해야겠다…벌써 한 주 밖에 안 남았다니 이번 주는 전반적으로 컨디션이 좋지 않았다. 잠을 충분히 자지 못한 게 가장 큰 문제였던 것 같다. 저번 주까지는 괜찮았는데, 이제는 한계가 온 것 같다. 😢2주차의 다짐지난주에 3주차에 실행해보겠다고 적어둔 내용을 이번 회고에서도 돌아보았다. 3개는 조금밖에 실천하지 못해서 ❓ 표시를 사용했다. (❌는 너무 슬프잖아요)⭕ 미션을 진행하는 패턴 기록하기❓ 매일 2시까지만 미션하기❓ 매일 아침에 학습 정리하기❓ 동료 코드 리뷰(질문/피드백) 작성해두기⭕ 미션을 진행하는 패턴 기록하기매일 미션을 끝내고 해결할 때 사용한 시간을 기록해 보았다. 지난주보다 챌린지에 많은 시간을 쓰지 못했고, 다짐도 잘 지키지 못해 아.. 공감수 0 댓글수 0 2024. 8. 4.
[부스트캠프 9기 챌린지] 2주차 회고 - 😴 🗒️ 3줄 요약- 벌써 2주가?- 찾았다. 나에게 맞는 패턴.- 역시 사람은 잠을 자야 한다. 챌린지 미션이 갈수록 어려워진다는 말은 들었지만 첫 주차에 너무 힘들어서 설마하는 마음이 있었다. 그런데 역시나…ㅎㅎ 저번주에 지켜보고자 작성한 항목들이 있는데 모두 지키지는 못했지만 발전한 부분도 있다. 이번 주는 저번 주와의 비교를 중심으로 회고를 작성해본다.1주차의 다짐저번 주에 2주차에 실행해보겠다고 적어둔 내용이다. 두 번째 주를 보낸 뒤 스스로 잘 지켰는지 피드백 해보는 시간을 가졌다.⭕ 미션을 진행하는 패턴 기록하기❌ 매일 학습 정리 꼬옥‼️작성하기⭕ 설계한 내용 그림으로 정리하기❌ 9시에 동료의 코드를 미리 읽고 질문 작성하기❓ 피어세션을 진행하면서 나눈 내용 기록하기⭕ 미션을 진행하는 패턴 .. 공감수 0 댓글수 0 2024. 7. 28.
[부스트캠프 9기 챌린지] 1주차 회고 - 😇 🗒️ 3줄 요약- 다들 살아 계신가요? 😇- 나를 알아가기- 한 번 밖에 없는 기회 값지게 보내자 일요일까지만 해도 챌린지 시작할 생각에 신이 났는데 막상 시작하니 생각보다 너무 빡셌다…🤦‍♀️생각보다 매우 더…고로 일주일 동안 들었던 여러 감정과 생각을 정리하며 회고를 작성해본다.정신없이 흘러간 첫 주 DAY01 미션은 베이직에서 진행했던 미션에서 조금 난이도가 올라간 미션이였다. 그래서 구현과 학습 정리까지 원하는 만큼 마무리하고 조금은 여유로운 시간을 보냈다. 앞으로 이런 미션이 나오나? 짧은 착각을 했었다.DAY02부터 DAY04까지는 생각도 못한 난이도의 미션을 마주했다. 제 시간에 미션을 완성한 적이 하루도 없었고. 매일 새벽까지 하는 건 기본이었다. 잠을 아예 못 잔 날도 있었다.구현.. 공감수 0 댓글수 1 2024. 7. 21.
[네이버 부스트캠프 9기] 베이직 과정과 2차 문제 해결력 테스트 합격 후기 베이직 입과 결정!1차 문제 해결력 테스트를 본 후 그 다음 주 수요일 쯤 결과가 발표되었다. 공식 블로그에 나온 것처럼 1차 문제 해결력 테스트 결과에 따라 베이직 입과 대상자가 결정되는데 나는 2차 문제 해결력 테스트 대상자로 선정되었다. 하지만 부캠에서 2차 테스트 대상자 여부를 떠나 모든 사람의 입과를 권장하기도 했고, 베이직을 안하고 2차 문제 해결력 테스트 떨어지면 부스트캠프 과정 중 아무것도 해볼 수 없을거란 생각에 베이직 입과를 결정했다. 그리고 2차 문제 해결력 테스트부터는 분야별 응시 언어 제한이 생기는데 베이직을 진행하면서 내가 지원하는 web 분야의 언어인 javascript를 연습할 수 있을거라 생각했다.베이직 시작~ 베이직은 6월 24일부터 7월 5일까지 2주간 진행되었다. 규율.. 공감수 0 댓글수 4 2024. 7. 12.
[네이버 부스트캠프 9기] 지원부터 1차 문제 해결력 테스트 합격까지의 후기 5월쯤 부스트캠프 9기를 모집한다는 사실을 알게 되었다. 워낙 유명한 부트캠프 중 하나고 수료한 분들의 후기가 너무 좋아 관심을 가지게 되었고 5월에 하는 설명회를 듣게 되었다. 9기에서의 변화설명회를 들어보니 9기부터는 교육 과정에 변화가 생겼다. 작년까지는 코딩 테스트를 2회 본 후 챌린지 → 멤버쉽 순으로 과정이 진행되었다면, 이번에는 베이직이라는 과정이 신설되어 베이직 → 챌린지 → 멤버쉽으로 진행되고, 각 과정 시작 전에 코딩 테스트를 치루는 형식으로 변경되었다.기수8기9기과정1차 코딩 테스트 → 2차 코딩 테스트 → 챌린지 → 멤버쉽1차 문제 해결력 테스트 → 베이직(2주) → 2차 문제 해결력 테스트 → 챌린지(4주) → 3차 문제 해결력 테스트 → 멤버쉽(14주)베이직xo코딩테스트2번3번.. 공감수 0 댓글수 2 2024. 7. 11.
[혼공컴운] 1주차_Ch.01 ~ 03 📢 1주차🏷️ 범위: Chapter 01 컴퓨터 구조 시작하기 ~ Chapter 03 명령어🖊️ 내용 요약Ch 01. 컴퓨터 구조 시작하기컴퓨터 구조를 왜 알아야 할까? 컴퓨터 구조를 이해하면 복잡한 문제를 신속하게 판단하고 해결할 수 있으며, 성능, 용량, 비용까지 고려한 개발을 할 수 있다. 특히 대규모 서비스의 경우 이 세 가지 요소를 잘 선택하기 위해 단순히 프로그래밍 언어의 문법을 아는 것만으로는 충분하지 않고 컴퓨터 구조를 잘 알아야 한다. 컴퓨터 구조 개요컴퓨터 구조를 이해하려면 컴퓨터가 이해하는 정보와 컴퓨터의 네 가지 핵심 부품을 알면 된다.컴퓨터가 0과 1로 표현된 정보만 이해하며, 데이터와 명령어가 있다. 데이터: 숫자, 문자, 이미지 등 컴퓨터가 이해하는 정적인 정보명령어: 데.. 공감수 0 댓글수 2 2024. 7. 2.
[javascript] 정규 표현식 정복하기 다양한 곳에 쓰이는 정규표현식, 매번 봐도 헷가려서 정리하기 정규 표현식(regex)이란? 정규 표현식(regex)는 regular expression의 약자로 텍스트에서 특정한 규칙(패턴)을 가진 문자열을 찾을 때 사용할 수 있는 표현식이다. 정규 표현식으로 문자열에서 전화번호만 찾기, 유효한 이메일인지 확인하기 등 다양한 작업을 할 수 있어서 다양한 프로그래밍 언어에서 내부적으로 정규 표현식을 지원한다.💻 정규 표현식을 연습할 수 있는 사이트https://regexr.com/5ml92정규 표현식 사용하기정규 표현식을 나타내는 문법은 언어별로 조금씩 다르다. 그 중 javascript에서 정규식을 작성하는 방법은 다음과 같다.슬래쉬 사이에 패턴을 작성하고 종료 슬래쉬 뒤에 추가 옵션인 플래그를 붙인다.. 공감수 0 댓글수 2 2024. 6. 29.
[javascript] 프로토타입이 대체 뭔데 Javascript는 흔히 프로토타입 기반 언어(prototype-based language)라 불린다. 그래서 프로토타입을 이해하면 Javascript를 더 잘 이해할 수 있다던데...JS는 다중 패러다임 언어 프로토타입은 객체 지향과 관련이 크기 때문에 JS가 다중 패러다임 언어라 객체 지향적으로 코드를 작성할 수 있다는 사실을 넘겨 짚고 가자!그렇다면 객체 지향이 뭐야?객체를 여러 개 만들어서 프로그램을 더 쉽게 짜는 것을 지향하는 프로그래밍 방식이다.예를 들어, 코드로 차를 만드는 과정을 나타낸다고 했을 때 왼쪽처럼 차와 관련 있는 속성이나 기능을 순서대로 만들 수도 있지만, 오른쪽처럼 하나의 덩어리(객체)로 묶을 수도 있다. 객체로 묶으면 코드를 더 깔끔하게 정리할 수 있다. Class객체 지향.. 공감수 0 댓글수 0 2024. 6. 24.
파이썬으로 공부하는 자료 구조 자료 구조를 파이썬으로 공부해보기자료 구조자료 구조는 크게 선형 자료구조와 비선형 자료구조로 나눌 수 있다.배열 배열은 데이터(원소)를 순서대로 가지고 있으며 변경 가능한 선형 자료 구조다. 배열은 인덱스를 통해 어떤 원소든 쉽게 접근할 수 있지만, 원소를 추가하거나 삭제할 때는 비효율적이다. 파이썬에서 배열은 list이며, 내부적으로 동적 배열로 구현되어 있다. 객체들이 연속한 메모리에 있지 않지만, 객체의 메모리 주소가 연속한 메모리에 저장되어 있어 인덱싱이 가능하다.배열와 관련된 연산의 시간 복잡도연산시간 복잡도비고len(a) O(1) a[i] O(1) a[i:j] O(k) i 부터 j - 1까지 k개에 대한 조회가 필요하다.elem in a O(n)처음부터 끝까지 순차 탐색한다.a.count(.. 공감수 0 댓글수 0 2024. 6. 13.
컴파일러(Compiler)와 인터프리터(Interpreter) C언어는 빠르고, python은 느리다?컴퓨터와 소통하기컴퓨터는 0과 1로 되어있는 정보만 이해할 수 있지만, 우리가 0과 1로 코딩하는 것은 너무 힘들다. 그렇다면 python과 같은 사람이 이해하기 쉬운 프로그래밍 언어로 코드를 작성하고 나중에 컴퓨터가 이해할 수 있는 0과 1로 바꾸는 것은 어떨까? 컴파일러(Compiler)와 인터프리터(Interpreter)가 바로 고수준의 언어로 작성된 소스 코드를 기계어로 번역해주는 역할을 하며, 이 두 가지 방식에는 차이점이 있다.기계어란?CPU가 직접 해석하고 실행할 수 있는 명령어로 CPU 아키텍쳐마다 다를 수 있다.컴파일러컴파일러는 소스 코드를 한 번에 기계어로 변환한 뒤 실행한다. 대표적인 컴파일 언어로 C, C++ 등이 있으며, 컴파일 과정은 언어별.. 공감수 1 댓글수 1 2024. 6. 13.
ASCII 유니코드 UTF-8? utf-8 인코딩을 안해서 문자가 깨진 적이 한 두 번이 아니었다... 제대로 이해하고 넘어가자컴퓨터에서 문자는 어떻게 나타내지? 컴퓨터는 0과 1을 통해 숫자를 나타낸다. 그렇다면 컴퓨터는 "a", "가"와 같은 문자는 어떻게 나타낼까?0과 1을 이용해선 숫자밖에 나타낼 수 없기 때문에 각 문자를 대응되는 숫자로 정리해두면, 사용자가 특정 문자를 입력했을 때 이를 컴퓨터가 이해할 수 있는 숫자로 변환할 수 있게 된다. 이처럼 사용자가 입력한 문자나 기호들을 컴퓨터가 이용할 수 있는 신호로 만드는 것을 인코딩이라고 한다. ASCII1963년 미국에서는 위에서 설명한 것처럼 문자를 해석하기 위한 정보 교환용 표준 부호 체계를 만들었고, 이를 ASCII(American Standard Code for I.. 공감수 1 댓글수 1 2024. 6. 13.
2진법 10진법 16진법 대학교 1학년 때 배우고 까먹어버린 진법... 복습하기 위해 글로 정리하기로 했다.비트와 바이트디지털 세계는 2진법으로 정보를 나타내는 게 제일 효율적이다. 그래서 컴퓨터는 0과 1 두 개의 숫자만 사용해 수를 나타내는 2진법을 사용한다. 0 또는 1의 값을 가지는 디지털 데이터의 가장 작고 기본적인 단위를 비트(bit)라고 한다. 컴퓨터는 모든 데이터를 비트로 나타낸다. 하지만 비트 한 개로는 많은 양의 데이터를 나타낼 수 없기 때문에 여러 비트를 사용해 정보를 나타낸다. 일반적으로 8개의 비트를 묶어서 데이터를 처리하며, 8개의 비트가 모인 형태를 1 바이트(byte)라고 한다. 1 바이트는 28=256만큼의 데이터를 표현할 수 있다. 2진법과 10진법2진법으로 나타낸 숫자는 어떤 숫자를 어떻게 해석.. 공감수 0 댓글수 0 2024. 6. 13.
[노마드코더 React 10주 스터디 회고] 열정 만수르 React 4기 스터디를 시작한 계기2024년은 노마드코더와 함께 했다고 봐도 무방하다. 작년 12월에 시작했던 플러터 챌린지를 시작으로 앞으로의 목표를 대학원 진학과 취업에서 고민하다가 점차 마음이 개발자로 기울어져 올해 초에는 클린 코드 북클럽 챌린지까지 참여하게 되었다. 클린 코드 챌린지를 하면서 커리큘럼에 맞춰 꾸준히 공부하면서 공부 습관을 만들 수 있는 노마드코더 챌린지의 장점을 다시 느끼며 프론트엔드 쪽으로 공부를 꾸준히 해보고 싶다는 생각으로 react 10주 스터디 4기를 신청했다. 그리고 프론트엔드 공고를 봤을 때 사용 기술에 아직 써보지 못했거나 익숙하지 않은 기술이 대부분이 었는데 react 10주 스터디에서 해당 기술을 모두 배워볼 수 있겠다는 생각도 들었다. 생각보다 할 만 한 것 같은데...살려.. 공감수 1 댓글수 0 2024. 5. 14.
[주간회고록] 10주차 주간 회고록 9주차 기간: 2024년 4월 10일 → 2024년 4월 16일🗒️ 핵심 3줄 요약눈과 척추, 손목을 지켜야 한다…일주일 남았는데 불태워보자고!졸작 파이팅🎯 이번 주 목표❌ 건강하기👏 칭찬하고 싶은 점주말에 졸업 논문이랑 학회 논문 벼락치기로 다 씀😭 고치거나 버려야 할 점미리미리 하자…밤에 늦게 자거나 무리하지는 말자! 깨어있을 때 열심히 하자고.스터디 초반에 비해 많이 해이해진 것 같다. 캐럿마켓 초반부에 강의를 너무 못 들었더니 점점 따라가기 벅차다 느껴 그런 것 같다. 일주일 동안 할 수 있는 만큼 최대한 해보자! 15만원 환급 받아야지!!!🏃 일일 스프린트더보기2024년 4월 17일✅ 논문 개요 작성✅ 캐럿마켓 클론코딩 밀린 강의 다 .. 공감수 0 댓글수 1 2024. 4. 24.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.