DonZ 기술 블로그 — CS 공부와 회사 업무 중 발견한 이슈 경험담.https://seod0209.github.io/https://seod0209.github.io/posts/%EC%95%88%EC%A0%84%ED%95%9C-%EB%B0%B0%ED%8F%AC-%EB%B0%A9%EB%B2%95(1)/https://seod0209.github.io/posts/%EC%95%88%EC%A0%84%ED%95%9C-%EB%B0%B0%ED%8F%AC-%EB%B0%A9%EB%B2%95(1)/Google AdSense를 등록하던 도중 ads.txt를 찾을수 없다는 알림이 보였다. 그래서 ads.txt를 어떻게 넣어야 할까 고민을 하던중 여기저기 검색해봤는데 띠용..? 너무 간단한 방법이긴 한데.. 내가 숨겼던 id나 개인 정보가 ads.txt 내에 그대로 적혀있는데 이러면 숨길 필요가 없는거 아닌가. 근데 아무리 생각해도 숨겨야할것같았다 나의 …Wed, 14 Aug 2024 00:00:00 GMTCI/CDhttps://seod0209.github.io/posts/Zippu/https://seod0209.github.io/posts/Zippu/프로젝트 소개 어디야? 지각을 뿌시는 그날까지 매번 약속 때마다 거짓말 하는 친구들의 본격 지각 타파를 위한 서비스를 제공하기로 했다. 작업 기간:  2023.04 2023.10 지각뿌셔는 이런 기능들을 제공해요! 1. 그룹 및 약속 친구들과 그룹을 만들고 약속을 만들어보세요. 카카오, 애플 소셜로그인 firebase dynamic link로 구현…Thu, 11 Jul 2024 00:00:00 GMTZippuReact-Nativehttps://seod0209.github.io/posts/whale/https://seod0209.github.io/posts/whale/프로젝트 소개 지난 포스트 에 이어서 오늘은 제일 복잡했던 고래의 움직임에 대해 글을 쓰려고 한다. 👉🏻 소스 코드 고래의 움직임 (1) whale.ts 1. 고래위치 위치 = 위치 + 속도 wPos는 고래의 현재 위치를 나타내며, speedX와 speedY는 고래의 속도를 나타낸다. add 메서드는 고래의 현재 위치에 속도를 더하여 새로운 위치를 계산…Tue, 02 Jul 2024 00:00:00 GMTp5.jshttps://seod0209.github.io/posts/p5js%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8/https://seod0209.github.io/posts/p5js%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8/프로젝트 소개 👉🏻 소스 코드 Nature of code 4장까지 스터디를 진행하면서 주로 물속에서 물체의 움직임과 관련하여 발표를 주로하였다. 4장까지의 내용을 복습할겸 해당 프로젝트를 진행하게 되었다. 목표 구현 화면 고래상어 화면의 끝에 닿을 경우 움직임의 방향을 바꾼다. 머리를 기준으로 몸통과 꼬리가 따라 움직인다. 배경화면 별들의 크기는 랜덤으…Mon, 24 Jun 2024 00:00:00 GMTp5.jshttps://seod0209.github.io/posts/%EC%98%B7%EC%B2%B4%ED%86%B5/https://seod0209.github.io/posts/%EC%98%B7%EC%B2%B4%ED%86%B5/Desktop, mobile 프로젝트 개요 사건의 발단은 간단하다. 친구 짐정리를 도우러갔다가 헌옷수거함을 찾기가 어려웠던것에서부터 이 프로젝트는 시작되었다. 흔히 보이던 헌옷수거함이 막상 찾으니까 없었다. '자치구' 마다 헌옷수거에 대한 정책이 달랐다. 👉🏻 자치구별 정책 정리 송파구는 지도로 찾기쉽게 알려주던데.. 강서구는 없더라구요? 헌옷 수거함을…Tue, 14 May 2024 00:00:00 GMT공공 APIhttps://seod0209.github.io/posts/Hash-Map%EA%B3%BC-Javascript-Map%EA%B3%BC-Set%EC%9D%98-%EC%97%B0%EA%B4%80%EC%84%B1/https://seod0209.github.io/posts/Hash-Map%EA%B3%BC-Javascript-Map%EA%B3%BC-Set%EC%9D%98-%EC%97%B0%EA%B4%80%EC%84%B1/Hash Map과 Javascript Map과 Set의 연관성 해시 맵(Hash Map)과 JavaScript의 Set 및 Map은 모두 데이터를 저장하고 관리하는 데 사용되는 자료 구조입니다. 이들 간에는 몇 가지 연관성이 있습니다. 해시 기반의 자료구조: 해시 맵, Set 및 Map은 내부적으로 해시 함수를 사용하여 요소를 저장하고 검색. 이를 통해 요…Tue, 27 Feb 2024 00:00:00 GMTJavaScripthttps://seod0209.github.io/posts/%EC%B2%AB-%EC%98%A4%ED%94%88%EC%86%8C%EC%8A%A4-Contribution/https://seod0209.github.io/posts/%EC%B2%AB-%EC%98%A4%ED%94%88%EC%86%8C%EC%8A%A4-Contribution/라이브러리가 deprecated되었다 오랜만에 블로그를 작성하려하는데 에..? upstream/master로 chirpy theme repository를 업데이트 후 conflict 대잔치.. 그러던 중 plugin관련 라이브러리가 deprecated되었다는 경고를 보게되었다. Babel에서 클래스 속성을 변환하는 플러그인이 필요한 이유 은 Babel에서 …Sun, 25 Feb 2024 00:00:00 GMTOpen-Sourcehttps://seod0209.github.io/posts/SSH%EB%A1%9C-git-clone-%ED%95%98%EA%B8%B0/https://seod0209.github.io/posts/SSH%EB%A1%9C-git-clone-%ED%95%98%EA%B8%B0/SSH SSH 란 Secure Shell 의 줄임말로, 두 컴퓨터 간 통신을 할 수 있게 해주는 하나의 protocol Protocol 이란, 서로 다른 통신 장비 간 주고 받는 데이터의 양식과 규칙입니다. 인터넷 연결만 되어있어도 내 컴퓨터의 terminal 을 통해 다른 지역에 있는 컴퓨터 혹은 서버를 관리할 수 있게 해주고, 파일도 공유 가능 ex) …Sat, 24 Feb 2024 00:00:00 GMTGithttps://seod0209.github.io/posts/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4%EB%A5%BC-Github%EC%97%90-%EC%97%B0%EB%8F%99/https://seod0209.github.io/posts/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4%EB%A5%BC-Github%EC%97%90-%EC%97%B0%EB%8F%99/1. 백준허브 (BaekJoonHub) 플러그인 설치 백준허브 확장 프로그램을 'Chrome에 추가' 설치 2. 백준허브 플러그인에 Github 계정 인증 플러그인 더블클릭 'Authenticate' 클릭 3. 레포지토리 연결 기존 레포지토리가 있는 경우? 기존 레포지토리 연결(Link an Existing Repository) 없는 경우? 새로운 Priv…Fri, 23 Feb 2024 00:00:00 GMTAlgorithmhttps://seod0209.github.io/posts/App-Camera-%EC%B5%9C%EC%A0%81%ED%99%94/https://seod0209.github.io/posts/App-Camera-%EC%B5%9C%EC%A0%81%ED%99%94/얼굴 인식 성능 최적화: App 카메라 최적화 사례 프로젝트 개요 라이브러리를 활용하여 얼굴 인식을 구현하였다. 하지만 전체 화면에서 얼굴 인식을 수행할 때 성능 저하가 발생하여, 이를 해결하기 위한 최적화 작업을 진행하였다. 💡 아래 예시는 v2 API 기준이다. v3+에서는 대신 를 사용하고, prop은 제거되어 prop 또는 프레임 프로세서 내부에서…Sat, 03 Feb 2024 00:00:00 GMTReact-Nativehttps://seod0209.github.io/posts/Sentry%EB%A1%9C-%ED%9A%A8%EC%9C%A8%EC%A0%81%EC%9D%B8-%EC%97%90%EB%9F%AC%EC%88%98%EC%A7%91%ED%95%98%EA%B8%B0/https://seod0209.github.io/posts/Sentry%EB%A1%9C-%ED%9A%A8%EC%9C%A8%EC%A0%81%EC%9D%B8-%EC%97%90%EB%9F%AC%EC%88%98%EC%A7%91%ED%95%98%EA%B8%B0/Sentry Sentry는 소프트웨어 개발 및 운영에서 발생하는 버그와 에러를 모니터링하고 추적하는 플랫폼. 주요 기능 및 특징은 다음과 같다: 1. 실시간 에러 모니터링: Sentry는 실시간으로 애플리케이션에서 발생하는 에러를 모니터링하고, 사용자가 발생한 오류를 신속하게 확인 가능. 2. 스택 추적: 에러가 발생한 곳의 스택 추적을 제공하여 버그의 원…Wed, 03 Jan 2024 00:00:00 GMTFrontendhttps://seod0209.github.io/posts/Android-%EB%B0%B0%ED%8F%AC-%ED%9B%84-keystore-%EB%B3%B4%EC%95%88/https://seod0209.github.io/posts/Android-%EB%B0%B0%ED%8F%AC-%ED%9B%84-keystore-%EB%B3%B4%EC%95%88/배경상황 안드로이드 개발 후 Play Store 에 배포를 하기 위해서는 키스토어(Key Store)를 이용하여 Signing된 apk 또는 aab(Android App Bundle)이 필요합니다. 디버그 및 릴리즈 빌드할 때 keystore 파일을 잘 관리/사용했어야 하지만 개인 폴더에 스토어 키를 관리한 결과..키를 잃어버리게 되었고… 따라서 관련 파일…Thu, 12 Oct 2023 00:00:00 GMTAndroidhttps://seod0209.github.io/posts/Android-Studio-Keystore-%EC%83%9D%EC%84%B1%ED%95%98%EA%B8%B0/https://seod0209.github.io/posts/Android-Studio-Keystore-%EC%83%9D%EC%84%B1%ED%95%98%EA%B8%B0/Command로 Keystore 생성하기 keytool은 jdk 설치 폴더의 bin에 위치해 있기 때문에 Java를 환경변수설정으로 지정해주었다면 위치와 상관없이 command창에서 실행이 가능하지만, 환경변수설정을 지정 하지 않았다면 keytool의 경로로 가서 아래의 커맨드를 입력하도록 한다. 1. Go terminal at the project roo…Wed, 11 Oct 2023 00:00:00 GMTAndroidhttps://seod0209.github.io/posts/Proguard%EB%A1%9C-%EC%95%88%EB%93%9C%EB%A1%9C%EC%9D%B4%EB%93%9C-%EC%86%8C%EC%8A%A4%EC%BD%94%EB%93%9C-%EB%82%9C%EB%8F%85%ED%99%94/https://seod0209.github.io/posts/Proguard%EB%A1%9C-%EC%95%88%EB%93%9C%EB%A1%9C%EC%9D%B4%EB%93%9C-%EC%86%8C%EC%8A%A4%EC%BD%94%EB%93%9C-%EB%82%9C%EB%8F%85%ED%99%94/안드로이드 앱의 보안 중요성 안드로이드 앱을 빌드하면 aab apk 파일로 만들어 진다. 이들은 단순히 우리가 작성한 코드들의 압축에 불과하다. 따라서 apk의 압축을 풀면 우리가 작성한 코드의 내부가 모두 보인다. 안드로이드 스튜디오에서 보면 아래와같이 모두 보이는것을 알 수 있다. 만약 이 상태로 앱을 출시한다면 앱의 리버스 엔지니어링이 가능하다는 뜻이…Wed, 11 Oct 2023 00:00:00 GMTAndroidhttps://seod0209.github.io/posts/APK%ED%8C%8C%EC%9D%BC-%ED%81%AC%EA%B8%B0%EB%A5%BC-%EC%99%9C-%EC%A4%84%EC%97%AC%EC%95%BC-%ED%95%A0%EA%B9%8C/https://seod0209.github.io/posts/APK%ED%8C%8C%EC%9D%BC-%ED%81%AC%EA%B8%B0%EB%A5%BC-%EC%99%9C-%EC%A4%84%EC%97%AC%EC%95%BC-%ED%95%A0%EA%B9%8C/APK파일 크기를 줄이는게 왜 필요할까? 한국 사용자들은 대부분 네트워크 환경이 좋고, 최신 플래그십은 256GB, 심지어 보급형 기기도 128GB 고용량의 스마트폰을 사용한다. 하지만 모두가 이런 환경을 가지고 있을까? 전 세계적으로는 그렇지 않은 경우가 많다는걸 이번 프로젝트를 통해 알게 되었다. 회사는 글로벌 시장을 대상으로 하고 있으며, 특히 인도와…Tue, 10 Oct 2023 00:00:00 GMTAndroidhttps://seod0209.github.io/posts/%EC%95%B1-%EC%82%AD%EC%A0%9C-%ED%9B%84-%EC%95%8C%EB%A6%BC%EC%9D%B4-%EC%95%88%EC%99%80%EC%9A%94/https://seod0209.github.io/posts/%EC%95%B1-%EC%82%AD%EC%A0%9C-%ED%9B%84-%EC%95%8C%EB%A6%BC%EC%9D%B4-%EC%95%88%EC%99%80%EC%9A%94/FCM?? 먼저 푸시 알림을 보내기 위해서는 파이어베이스에 대한 이해가 필요하므로, 파이어베이스의 공식문서를 차근차근 정리해 보았다. FCM 아키텍처? Firebase 클라우드 메시징(FCM)은 무료로 메시지를 안정적으로 전송할 수 있는 교차 플랫폼 메시징 솔루션이다. FCM은 아래처럼 활용한다면, 메시지를 보낼 수 있다. 자체 앱 서버를 구현하거나, 또는…Sun, 02 Jul 2023 00:00:00 GMTZippuReact-Nativehttps://seod0209.github.io/posts/Web-RTC/https://seod0209.github.io/posts/Web-RTC/1. Web RTC ? 웹 애플리케이션과 사이트가 중간자 없이 브라우저 간에 오디오나 영상 미디어를 포착하고 마음대로 스트림 할 뿐 아니라, 임의의 데이터도 교환할 수 있도록 하는 기술 드라이버나 플러그인 설치 없이 웹 브라우저 간 P2P(peer to peer network; 동등 계층간 통신망) 연결을 통해 데이터 교환을 가능하게 하는 기술 WebRTC…Wed, 28 Jun 2023 00:00:00 GMTFrontendhttps://seod0209.github.io/posts/React-Native-%EA%B0%81-OS-%ED%99%94%EB%A9%B4%EB%B9%84%EC%9C%A8/https://seod0209.github.io/posts/React-Native-%EA%B0%81-OS-%ED%99%94%EB%A9%B4%EB%B9%84%EC%9C%A8/Problem iOS화면만 보고 개발했을 때 AOS의 화면이 와장창.. Improvement 해당 코드는 React Native 프로젝트에서 화면 크기, 여백, 글자 크기 등을 일정한 기준에 맞추어 설정하기 위한 유틸리티 함수와 상수를 정의하였다. Limitation 1. 성능 이슈 가능성 Dimensions.get('screen') 호출이 매번 함수 호출…Tue, 13 Jun 2023 00:00:00 GMTZippuReact-Nativehttps://seod0209.github.io/posts/Data-Binding/https://seod0209.github.io/posts/Data-Binding/데이터 바인딩 데이터 바인딩? 화면상에 보여지는 데이터(View) 와 브라우저 메모리에 있는 데이터(Model) 를 묶어서(Binding) 서로 간의 데이터를 동기화하는 것 = HTML에서 서버 혹은 스크립트상에서 받아온 데이터를 화면상에 그려주고 있다고 가정을 했을 때, 해당 값이 변경이 될 경우 다시 HTML 상에 데이터(값)를 변경된 값에 따라서 맞추…Thu, 11 May 2023 00:00:00 GMTBlogginghttps://seod0209.github.io/posts/Clean-Architecture-%EB%8F%84%EC%9E%85%ED%95%98%EA%B8%B0/https://seod0209.github.io/posts/Clean-Architecture-%EB%8F%84%EC%9E%85%ED%95%98%EA%B8%B0/Clean Architecture 도입 배경 초창기 "회사 관리자 웹서비스"는 패턴을 사용해서 개발을 진행했습니다. 처음 MVVM 패턴을 도입하면서 Activity or Fragment에서 처리되었던 UI + 비즈니스 로직들이 UI(Activity or Fragment) 와 ViewModel(비즈니스 로직) 으로 분리되었습니다. 그 결과 역할 분담이 되어 …Tue, 09 May 2023 00:00:00 GMTBlogginghttps://seod0209.github.io/posts/Micro-Frontend-%EC%A0%81%EC%9A%A9%ED%95%B4%EB%B3%B4%EA%B8%B0/https://seod0209.github.io/posts/Micro-Frontend-%EC%A0%81%EC%9A%A9%ED%95%B4%EB%B3%B4%EA%B8%B0/마이크로 프론트엔드 아키텍처 소개 별도로 개발 및 배포 가능한 여러 작은 웹 애플리케이션을 조합하여 하나의 웹 애플리케이션을 만드는 개발방법론. 마이크로프론트엔드는 한 팀이 하나의 유닛으로 독립적으로 개발하고, 시험하고, 배포할 수 있는 프론트엔드의 조각이다. 그러나 우리는 이 조각들을 함께 붙여서 단일한 웹 애플리케이션으로 사용자에게 보여주는 것을 확실히…Wed, 03 May 2023 00:00:00 GMTFrontendhttps://seod0209.github.io/posts/Mirco-Frontend/https://seod0209.github.io/posts/Mirco-Frontend/마이크로 프론트앤드는 마이크로 서비스처럼 전체 화면을 작동할 수 있는 단위로 나누어 개발한 후 서로 조립하는 방식이다. 여기서 작동 단위에 사용된 프론트앤드 프레임워크로 Angular 이든, React 또는 Vue 또는 Vanilla 자바스크립트에 상관하지 않고 조합 가능한 방법을 제공한다. 마이크로 프론트앤드 기반 독립된 팀별 애플리케이션 개발 Micro…Tue, 02 May 2023 00:00:00 GMTFrontendhttps://seod0209.github.io/posts/React-%EC%99%9C-%EC%93%B8%EA%B9%8C/https://seod0209.github.io/posts/React-%EC%99%9C-%EC%93%B8%EA%B9%8C/https://velog.io/@youthfulhps/React React를 사용하는 이유 https://okayoon.tistory.com/entry/프레임워크와 라이브러리React는 뭐야 https://m.blog.naver.com/magnking/220972680805 https://velog.io/@mollog/React에서의 가상돔 개념 https…Thu, 27 Apr 2023 00:00:00 GMTFrontendhttps://seod0209.github.io/posts/Data-Model/https://seod0209.github.io/posts/Data-Model/1. 사용 이유가 있나요? 그렇다면 DTO와의 차이는 무엇인가요? 해당 모델을 사용한 목적과 도입한 결과에 대해서도 설명해주세요. https://emewjin.github.io/model/ https://yozm.wishket.com/magazine/detail/1663/ https://velog.io/@jjunyjjuny/프론트엔드 데이터를 가공하라 ht…Tue, 25 Apr 2023 00:00:00 GMTFrontendhttps://seod0209.github.io/posts/%EC%99%9C-React-Native/https://seod0209.github.io/posts/%EC%99%9C-React-Native/왜 React Native를 도입해야 하는가 ? 🧐 1. 앱개발은 처음이라.. ✨ React Native는 React 문법을 통해 앱 개발을 할 수 있는 프레임워크이다. React와 매우 유사하므로 React를 통한 웹 개발 경험이 있는 나에게 앱개발의 진입장벽을 낮춰주었달까? 쉽게 React Native를 익힐 수 있다. 그리고 Emulator를 이용하…Sun, 23 Apr 2023 00:00:00 GMTZippuReact-Nativehttps://seod0209.github.io/posts/Nextjs%EC%97%90%EC%84%9C-i18n%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0/https://seod0209.github.io/posts/Nextjs%EC%97%90%EC%84%9C-i18n%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0/사용자의 지역 다국어 지원을 위해 유저가 어떤 locale의 유저인지 알 수 있어야한다. 클라이언트 window.navigator 유저가 브라우저를 사용하고 있는 환경이라면 Web API 이용 가능. navigator.language는 유저가 사용중인 브라우저UI 언어를 저장하고 있음. 이는 브라우저가 직접 세팅함. navigator.language 를 가…Wed, 04 Jan 2023 00:00:00 GMTFrontendhttps://seod0209.github.io/posts/class/https://seod0209.github.io/posts/class/Classes 클래스는 객체를 생성하기 위한 템플릿이다. 클래스는 데이터 와 이를 조작하는 코드 를 하나로 추상화 한다. 자바스크립트에서 클래스는 프로토타입을 이용해서 만들어졌지만 ES5의 클래스 의미와는 다른 문법과 의미를 가집니다. Class 정의 Class는 사실 "특별한 함수"이다. 함수를 함수 표현식과 함수 선언으로 정의할 수 있듯이 class 문…Tue, 10 Aug 2021 00:00:00 GMTJavaScripthttps://seod0209.github.io/posts/loop/https://seod0209.github.io/posts/loop/반복문을 왜 써야할까? 만약에 어떤 변수에 1부터 10까지 더한다고 생각해보자. 반복문이 없다면 우리는 변수에 계속해서 숫자를 더하는 코드를 10줄 써야할 것이다. 100까지 더하면 100줄, 1000까지 더하면 1000줄로 늘어나는 노가다의 현장.. Loops and iteration(루프와 반복) 루프는 어떤 것을 반복적으로 시행할 때 빠르고 간편한 방…Fri, 11 Jun 2021 00:00:00 GMTJavaScripthttps://seod0209.github.io/posts/OOP/https://seod0209.github.io/posts/OOP/프로그래밍 패러다임(programming paradigm) 개념 : 프로그래밍 패러다임에는 함수형, 논리형, 절차형, 객체지향형이 있다. 이들은 선언형과 명령형으로 분류할 수 있다. 이 중 선언형 프로그래밍(Declarative Programming)은 ‘무엇을 할 것인가’와 가깝고, 명령형 프로그래밍(Imperative programming)은 무엇을 ‘…Tue, 08 Jun 2021 00:00:00 GMTProgramminghttps://seod0209.github.io/posts/Model%EA%B3%BC-View%EC%9D%98-%EC%9D%98%EC%A1%B4%EC%84%B1%EC%A0%9C%EC%96%B4/https://seod0209.github.io/posts/Model%EA%B3%BC-View%EC%9D%98-%EC%9D%98%EC%A1%B4%EC%84%B1%EC%A0%9C%EC%96%B4/들어가며 앞서 클린아키텍처에서 살펴보았듯이 설계적 관점에서의 좋은 코드는 확장과 수정에 용이하며, 설계 이후에도 추가적인 유지 보수에 적은 비용이 들어가는 코드를 말한다. 이를 실현하기 위해 추구해야 할 설계 방향은 다음과 같다. “ 객체 간 응집도는 높이고, 결합도는 낮게. 요구 사항 변경 시, 코드 변경을 최소화 하는 방향으로.” 의존성을 고려해본다면 …Mon, 07 Jun 2021 00:00:00 GMTArchitecturehttps://seod0209.github.io/posts/Clean-Architecture-2/https://seod0209.github.io/posts/Clean-Architecture-2/계층을 나누는 목적 로버트마틴이 추구한 아키텍쳐의 큰 두 가지의 가치는 다음과 같다. 첫 째, 같은 목표를 가진다. 둘 째, 소프트웨어를 계층(layer)로 나눠서 관심사를 분리한다. 아키텍쳐는 선을 긋는 기술이며, 이 선을 경계(boundary)라고 부른다. 경계를 이렇게 쓰는 이유는 핵심적인 비즈니스 로직을 외부요인이 오염시키지 못하게 만들려는 목적으로…Sun, 06 Jun 2021 00:00:00 GMTArchitecturehttps://seod0209.github.io/posts/Clean-Architecture/https://seod0209.github.io/posts/Clean-Architecture/Clean Architecture 1. 기본 개념 (1) Architecture? : 여러가지 컴퓨터 구성요소들에 대한 전반적인 기계적 구조를 설계하는 방법. (2) Software Architecture? : 시스템을 쉽게 이해하고,개발하고,유지보수하고,배포할 수 있게 하고 프로그래머의 생산성을 최대화시키는 설계 방법을 의미한다. (3) Clean Arc…Sat, 05 Jun 2021 00:00:00 GMTArchitecturehttps://seod0209.github.io/posts/toy-Project-2/https://seod0209.github.io/posts/toy-Project-2/Care of Legend Github Repository : Front end Care of Legend Github Repository : Back end 프로젝트 소개 구독 커머스(서브스크립션 커머스: Subscription Commerce), 신문을 구독하듯 한 번의 구매로 특정 상품을 정기적으로 받아볼 수 있는 서비스를 일컫는 말이다. & 39;케…Wed, 19 May 2021 00:00:00 GMTProjecthttps://seod0209.github.io/posts/scroll/https://seod0209.github.io/posts/scroll/문제점 내가 맡은 상품상세페이지의 길이가 너무 길다. 한 번에 이동하고싶다. 또한 페이지 이동시 스크롤을 상단에 위치하고 싶다. 해결방안: scrollTo() 1. Syntax 2. window.scrollTo() 어디로 위치를 이동할지 함수를 각각 정의해준다. 생성한 함수를 각 탭에 onClick이벤트에 적용시킨다. 맨위로 가기 버튼 3. 페이지 이동시 …Mon, 26 Apr 2021 00:00:00 GMTJavaScripthttps://seod0209.github.io/posts/toy-Project-1/https://seod0209.github.io/posts/toy-Project-1/Market Chokurly Github Repository: Front end Market Chokurly Github Repository: Back end 프로젝트 소개 " 마켓컬리는 신선 및 친환경과 뗄 수 없는 관계이다. 마켓컬리라는 이름 뜻은 '식문화의'라는 뜻의 영단어 'culinary·컬리너리'에서 시작되었다." (자료출처) 우리 팀은 이러한 …Sun, 25 Apr 2021 00:00:00 GMTProjecthttps://seod0209.github.io/posts/fetch/https://seod0209.github.io/posts/fetch/백엔드로부터 데이터를 받아오기위해 꼭 거쳐야하는 ,, 목데이터를 퍼블릭으로 부터 받아오기 위한 필수관문,,,, 이번 포스트에서는 원격 API를 간편하게 호출할 수 있도록 브라우저에서 제공하는 fetch() 함수에 대해서 살펴보겠다. 1. fetch API Fetch에는 일반적인 오브젝트로 Request 와 Response 가 포함되어 있다. 이것들은 ser…Sun, 18 Apr 2021 00:00:00 GMTJavaScripthttps://seod0209.github.io/posts/object/https://seod0209.github.io/posts/object/만약 프로토타입글을 보지 않았다면 보고온뒤 객체로 올것. 이유는 읽다보면 알게될지도,, 1. 의의 JavaScript는 객체기반의 스크립트 언어이며 JavaScript를 이루고 있는 거의 모든 것은 객체이다. 객체란 여러 속성을 하나의 변수에 저장 할 수 있도록 해주는 데이터 타입으로, 자바스크립트의 객체는 키(key)과 값(value)으로 구성된 프로퍼티…Sun, 11 Apr 2021 00:00:00 GMTJavaScripthttps://seod0209.github.io/posts/React-Life-Cycle/https://seod0209.github.io/posts/React-Life-Cycle/컴포넌트가 브라우저에서 나타날때, 사라질때, 그리고 업데이트 될 때, 호출되는 API 이다. '컴포넌트 초기 생성 업데이트 제거' 순서대로 살펴보겠다. 💡 현재는 함수형 컴포넌트+Hooks가 권장됩니다. 아래는 클래스형 컴포넌트 라이프사이클의 학습 기록입니다. 1. 컴포넌트 초기생성 컴포넌트가 브라우저에 나타나기 전, 후에 호출되는 API 들 1 1 co…Sat, 10 Apr 2021 00:00:00 GMTReacthttps://seod0209.github.io/posts/Margin-Collapse/https://seod0209.github.io/posts/Margin-Collapse/분명 margin top(또는 margin bottom)을 먹였는데... 왜죠 왜 사라지는거죠;; '마진 상쇄(Margin collapsing)'가 일어나는 원인을 알아보고 아래 사진처럼 대참사가 일어나지 않게하는 방법을 찾아보자. 1. Margin collapsing 의의 1 1 개념 마진이 겹치게 되면 상쇄가 일어나는 현상. 즉,흔히 마진 겹침 현상 이…Tue, 30 Mar 2021 00:00:00 GMTWebCSShttps://seod0209.github.io/posts/Z-Index/https://seod0209.github.io/posts/Z-Index/(position: fixed를 설정한)A레이아웃 아래를 지나가야할 (position: relative를 설정한) B레이아웃이 아무렇지 않게 위를 지나갈때의 그 당황스러움이란,,, 1. Containing Block(CB) 1 1 의미 특정한 가상의 영역을 가리키는데, 이는 어떤 엘리먼트의 '자식 엘리먼트들이 위치나 크기 등을 결정지을 때 기준으로 사용할 …Mon, 29 Mar 2021 00:00:00 GMTWebCSShttps://seod0209.github.io/posts/overflow/https://seod0209.github.io/posts/overflow/요소의 박스보다 내용이 길어질 경우 어떻게 보여줄 것인가? 이와 관련된 개념으로 블록 서식 맥락(block formatting context; 이하 'BFC')에 대해 살펴보고 BFC가 생성되는 overflow의 상황을 살펴보고자 한다. 1. 블록 서식 맥락(block formatting context) 1 1 의미 웹 페이지를 렌더링하는 시각적 CSS의 …Sun, 28 Mar 2021 00:00:00 GMTWebCSShttps://seod0209.github.io/posts/Html5-Graphic/https://seod0209.github.io/posts/Html5-Graphic/HTML5에서는 와 를 이용하여 기존에 플래시, 실버라이트로 했던 그래픽 처리를 대체할 수 있다. 1 . Canvas 1 1. 의의 Canvas는 자체가 그래픽을 구현 하는 것이 아닌 웹문서에 그래픽 구현을 위한 영역을 정의하고 실제로는 JavaScript를 이용해 Canvas API로 만든 코드를 이용해 그래픽을 구현한다. 픽셀기반의 즉시 모드 그래픽 시…Sat, 27 Mar 2021 00:00:00 GMTWebHTMLhttps://seod0209.github.io/posts/DOM/https://seod0209.github.io/posts/DOM/DOM (Document Object Model) 1 1. 개념 및 의의 DOM(돔)이란 웹페이지의 HTML을 계층화시켜 트리구조로 만든 객체(Object) 모델이다. JavaScript는 이 model로 웹 페이지에 접근하고, 페이지를 수정할 수 있다. DOM은 HTML인 웹페이지와 스크립팅언어(JavaScript)를 서로 연결하는 역할을 한다. http…Mon, 22 Mar 2021 00:00:00 GMTWebJavaScripthttps://seod0209.github.io/posts/value/https://seod0209.github.io/posts/value/1. 약속어(Reserved Words) : 이미 사용중인 함수 단어들 이므로 코딩할 때 함부로 사용할 수 없다. ::예시1 alert() : 알림창 \ 사용자에게 안내하고 싶은 텍스트를 보여줌 ::예시2 console.log() :개발자 도구 개발자가 확인하고 싶은 내용을 출력 이전 값들을 지우고 싶다면? 2. Variables(변수) 1. 변수 선언(생…Sun, 21 Mar 2021 00:00:00 GMTWebJavaScripthttps://seod0209.github.io/posts/Css-Conect/https://seod0209.github.io/posts/Css-Conect/CSS? = HTML tag에 디자인을 입혀주는 것 HTML과 CSS파일의 연결: 1. HTML document에 CSS파일 불러오기 : HTML file과 CSS file과의 관계를 설명 2. HTML에 CSS적용는 방법(in CSS): Selector: CSS 적용대상 1. 개별 적용 tag= 단순히 태그 이름만 기재 class= ‘.classname’…Wed, 17 Mar 2021 00:00:00 GMTWebCSShttps://seod0209.github.io/posts/semantic/https://seod0209.github.io/posts/semantic/웹페이지에 이미지를 생성하는 방법은 크게 두가지로 구분할 수있다. HTML tag를 활용하는 방법과 CSS에서 tag에 attribute 추가하는 방식이다. 두 방식의 특징과 차이점에 대해 검토하기에 앞서 Semantic HTML 과 그와 관련된 HTML tag에 대해 살펴보겠다. Semantic HTML 1. 의미 웹페이지를 구성할 때, 우리는 non s…Tue, 16 Mar 2021 00:00:00 GMTWebHTMLhttps://seod0209.github.io/posts/type/https://seod0209.github.io/posts/type/Data type Data type(데이터 형) 은 쉽게 말하자면 '메모리에 저장되는 방식'을 의미한다. 자바스크립트 언어의 특징 중 하나가 데이터 타입을 신경쓰지 않는다는 것이다. 타입 체크가 쉽다는 건 다른 언어보다 편하다고 할 수 있겠지만, 코드를 잘못 짜면 자칫 오류가 날 수 있습니다. (다른 언어에서는 변수에 어떤 값을 할당해서 변수의 type이 …Wed, 10 Mar 2021 00:00:00 GMTWebJavaScripthttps://seod0209.github.io/posts/html/https://seod0209.github.io/posts/html/Codecademy의 Beginer friendly courses 중 HTML과정에서 배운내용을 다시 정리해보고자 한다. HTML이란 무엇인지 그 의미를 알아보고 이후 HTML의 속성 및 요소들 대해 검토하겠다. 참고자료: https://www.codecademy.com/catalog/language/html css 1. HTML? HTML(Hyper Te…Mon, 08 Feb 2021 00:00:00 GMTWebHTML