jeong_ga

https://jeong-ga.tistory.com/62 카카오 map API대신 주소가 적힌 지도로 이동하는 코드로 수정 https://jeong-ga.tistory.com/61 react - kakao map API 설정하기 kakao developer 가입 및 설정 Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기,.. jeong-ga.tistory.com 여기서 모든 API를 제거했지만 주소를 위도, 경도로 전환해야 하기 때문에 다시 API 코드를 추가하였다. 👉 관련 문서는 아래를 참고 https://apis.map.kakao.com/web/documentation/#services_Geocoder var geocoder =..

react-js-pagination https://www.npmjs.com/package/react-js-pagination react-js-pagination Simple, easy to use component for pagination. Compatible with bootstrap paginator stylesheets. Latest version: 3.0.3, last published: 2 years ago. Start using react-js-pagination in your project by running `npm i react-js-pagination`. There are 103 other p www.npmjs.com 사용한 라이브러리는 react-js-pagination 이다. np..

https://jeong-ga.tistory.com/61 react - kakao map API 설정하기 kakao developer 가입 및 설정 Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 앱.. jeong-ga.tistory.com API를 사용하여 지도가 표시되게 하는 코드는 앞서 작성했다. 진행사항을 확인받는 과정에서 해당 페이지의 의도에 맞게 사용하기 위해서는 화면에 지도가 표시될 필요가 없으며, 차라리 클릭하면 지도로 이동하는 게 낫다는 피드백을 받았다! 그래서 API기능을 삭제하고 를 이용하여 카카오 지도로 이동하는 기능을 추가..

kakao developer 가입 및 설정 Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 앱키 발급받기 kakao developers에 가입 내 어플리케이션 어플리케이션 추가하기 앱 이름 및 사업자 명 임의로 작성 어플리케이션을 추가를 완료하면 앱키를 발급받는다. 플랫폼 추가하기 좌측 플랫폼 클릭 용도에 맞는 플랫폼을 클릭하여 도메인을 입력한다. kakao map API 적용 https://apis.map.kakao.com/web/guide/ 카카오 맵 api 가이드를 통해 필요한 기능을 확인할 수 있다. code 작성하기 코드 작성 부분에 i..

docker란? Home - Docker Learn how Atomist will help Docker meet the challenge of securing secure software supply chains for development teams. www.docker.com 도커는 Docker Desktop은 컨테이너화된 애플리케이션과 마이크로서비스를 구축하고 공유할 수 있는 설치가 간편한 애플리케이션으로 도커대시보드를 통해 컨테이너 리소스를 시각적으로 관리할 수 있다고 나와있다. 다시 말해 다양한 프로그램과 실행 환경을 컨테이너로 추상화하여 동일한 인터페이스를 제공하기 때문에 프로그램의 배포 & 관리를 수월하게 해줌 컨테이너 컨테이너는 가상화 기술이지만 기존 VM과는 차이가 있다. 기존의 가상화 ..

회사의 디테일한 정보를 확인하는 companyDetail 컴포넌트를 작성하는 도중, 작업중에는 발생하지 않았지만 배포 후에는 오류가 뜨는 것을 확인하였다. 작업중는 이미 data를 가져온 상황에서 이미지에 대한 axios를 진행했기 때문에 오류가 발생하지 않았었지만! 배포 및 새로고침하여 발생한 렌더링 상황에서는 detail data를 가져오기도 전, 해당 data를 이용하여 이미지 data를 가져오려 했기 때문에 발생한 오류였다. 그래서! 아래와 같이 코드를 수정하여 작성하였다. useEffect를 이용하여 detailData의 값이 변화될 때 image data를 가져오는 axios를 실행하도록 코드를 설정 useEffect의 첫 렌더링 시 발생하는 오류(첫 렌더링 image axios를 진행하면 앞..

local에서는 문제없이 돌아가다 배포환경에서 리렌더링 하면 Uncaught SyntaxError: Unexpected token '

드디어 컴활 실기 발표가 났는데요! 결과 나오는 게 이주가 걸려서 더 오래걸리고, 짜증났던 시험이었어요..🙃 ​ 준비를 제대로 했으면 빨리 붙을 수 있었을 텐데 이정도면 붙겠지라고 생각한 게 착오였습니다! ​ ​​ 실기 준비를 하면서 몇 문제정도는 그냥 틀리지 뭐! 하면서 그냥 넘겼는데 이게 하나하나 모여서 불합격되더라고요😀.. ​ 처음본 실기 시험 점수는 이랬습니다! 재수한 실기 시험점수는 이랬어요! 이정도면 붙겠지.. 하면서 본 시험의 문제..^^.. 이점차로 떨어진 날은 넘 짜증나더라고요! ​ 처음봤던 엑세스보다 엑셀이 복병이었어요. 기존에 컴활 2급도 땄으니까 괜찮을 줄 알았는데 아니더라고요😂 엑세스는 반복적이라 연습으로 진행이 가능하지만 엑셀은 더 이해하고 풀어야 하는 것 같아요! ​ ​ 필기시..

제 직종은 업무에 엑셀을 사용하지 않기 때문에 자기 만족용으로 땄던 컴활2급 외에 다시 엑셀을 배울일이 없다고 생각했는데 컴활 1급이 필요해졌습니다^^ ​ 학점은행제를 하고 있는데 컴활이 학점인정 자격증이기 때문에 이왕 자격증으로 학점인정 받을 거 높은 학점을 받기 위해 컴활 1급 준비를 시작했습니다! ​ ​ 저는 유튜브+인터넷강의로 들었고 필기는 실기를 함꼐 준비하며 공부해야 더 이해가 쉽다고 하길래 실기까지하며 이주 공부했고 그중 필기시험만을 위한 필기 공부는 하루였어요! ​ ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 계획대로 한 게 없어서 많이 밀렸는데요. 주말은 약속이 있어서 공부를 해서 찐 공부한 날은 실기 8일, 필기 1일이네요. ​ 그리고 수요일에 시험보고, 다음날 10시에 결과발표가 났어요! 그리고 바로 다음주 금..

우선!! 기존에 작성했던 useState를 redux로 변경하였고, 배포 후 모바일에서 확인하는 과정에서 기본값이 navWrap의 className이 show인 상태인 것을 확인했다! 기존엔 resize이벤트로 이벤트리스너를 조절하였기에 위와 같은 문제가 발생한 것임을 확인하고! matchMedia의 값이 true, false인지를 확인하여 기본값을 지정하는 조건을 추가로 작성하였다. import { useEffect } from "react"; import { Routes, Route, useLocation, useNavigate } from "react-router-dom"; import { useSelector, useDispatch } from "react-redux"; import MainLay..

여태 이력서 소개 목적으로 작성하기만 했던 것 같아 readme.md를 용도에 맞게 제대로 작성하기 위하여 정리 및 기록하고자 하였다. readme.md는 깃 레파지토리를 새로 만들 때 체크박스로 추가 할 수도 있고, readme.md 파일을 깃 폴더가 있는 위치에 추가하여 작성할 수도 있다. readme.md를 추가하면 레파지토리의 가장 기본 화면에서 해당 문서를 바로 확인할 수 있어 해당 프로젝트를 설명 및 사용하기에 앞서 사용설명서와 같은 용도로 사용할 수 있다. Description 프로젝트에 대한 간략한 설명 어떤 내용의 서비스를 담고 있는지에 대한 기술 Environment & Prerequisite 실행 방법 및 환경으로 구체적으로 작성하면 좋다. 작성한 & 실행해본 환경이나 컴파일러와 같..

기존엔 Header, Footer, Nav, ContentComponent(내용들) 와 같은 컴포넌트를 따로 만들어 이걸 불러와 사용하는 컴포넌트를 screens에 작성하고, 여기서 해당 페이지 내용의 컴포넌트(Pages폴더에 만들었음)를 props으로 전달해 사용했다. 기존에 사용하던 방식을 계속 이어갔었는데 기존엔 컴포넌트로 전달하지 않았기 때문에 위와 같은 방식으로 사용했었음 아주아주 비효율적이라고 생각되어 수정하기로 함! 공용파일을 작성하는 common 폴더에 MainLayout.jsx라는 파일을 만들었음. MainLayout.jsx import Nav from "../navigation/NavBox"; import Header from "../header/HeaderBox"; import Fo..

기존에는 axios와 같이 기능이 있는 함수는 service.js에 따로 작성하여 필요 시 import해 사용했다. 아래는 로그인 기능을 수행하는 function! export function loginEvent(loginUrl, userData) { return axios({ method: "POST", url: loginUrl, data: { userid: userData.userid[0], passwd: userData.passwd[0], }, headers: { "Content-Type": "application/json", }, }) .then((res) => { if (res.data.status === "fail") { alert("회원이 아닙니다. 회원가입을 먼저 진행해 주세요."); re..

아키텍쳐 비지니스 요구 사항을 만족하는 시스템을 구축하기 위해, 전체 시스템에 대한 구조를 정의한 문서 시스템을 구성하는 컴포넌트, 컴포넌트간의 관계, 컴포넌트가 다루는 정보(데이타)를 정의한다. 현재의 요구사항 및 변화되는 비지니스 전략에 대응이 가능하도록 장기적인 로드맵을 수용하여 확장 가능한 형태로 디자인되어야 함 구현 및 사용하고자 하는 조직의 기술 수준 & 조직의 규모와 형태 & 비지니스의 형태에 맞춰 설계 아키텍쳐 설계 프로세스 비지니스 아키텍쳐 이해 비지니스의 목표, 전략을 이해해야 목표에 부합하는 아키텍쳐를 설계할 수 있음. 아키텍쳐 설계 원칙 정의 비지니스 아키텍쳐가 정의됐다면 시스템 설계를 위한 테크니컬 아키텍쳐를 설계하기 위한 원칙을 정해야 한다. 품질 속성 기간 조직 운용론 기반 기..

📍 참고사이트 https://poiemaweb.com/js-browser Javascript Environment | PoiemaWeb 대부분의 프로그래밍 언어는 운영체제(Operating System, OS) 위에서 실행되지만 웹 애플리케이션의 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행된다. 따라서 브라우저 환경을 고려할 때 보다 poiemaweb.com 브라우저 동작 원리 V8엔진으로 빌드된 자바스크립트 런타임 환경 Node.js의 등장으로 웹을 벗어나 범용 개발 언어가 되었으나, 가장 많이 사용되는 분야는 웹 브라우저 환경에서 동작하는 웹, 앱이다. 대부분의 프로그래밍 언어는 운영체제 위에서 실행되나 웹 애플리케이션 자바스크립트는 브라우저에서 html, css와 함께 실행된다. 👉브라..