Life and IT

클라이언트와 서버 간의 포트가 다르면 클라이언트에서 api 요청을 할 때 cors 정책에 위반이 된다. 이를 해결할 수 있는 방법으로 프록시 서버를 구축하여 서버와 서버 간의 통신을 하도록 해서 우회하는 것을 선택하였다. 이때 사용한 것이 웹팩 데브 서버이다. 이를 위해 웹팩과 웹팩 데브 서버에 대해서 알아보았고 내용을 정리해보았다. 웹팩으로 해결하려는 문제 자바스크립트 유효 범위 es6 modules 문법과 웹팩의 모듈 번들링으로 해결 - es6 modules 문법 import, from, export, default와 같이 모듈 관리 전용 키워드를 사용하므로 가독성이 좋다. 비동기 방식으로 작동하고 모듈에서 실제로 쓰이는 부분만 불러오기 때문에 성능과 메모리 부분에서 유리하다. 브라우저 별 http ..

TODO 오늘의 현재 요일 표기 오늘의 현재 날짜 표기 오늘의 현재 월 표기 오늘의 현재 연도 표기 일, 월, 화, 수, 목, 금, 토 요일 라벨링 표기 현재 월의 1일이 무슨 요일인지 판별하고, 해당 요일 라벨링에 1일 표기하기 현재 월의 마지막 날짜까지 달력에 표기하기 우측 화살표를 클릭 했을때, 다음 달의 요일 및 날짜 표기 좌측 화살표를 클릭 했을때, 이전 달의 요일 및 날짜 표기 특정 날짜를 클릭 했을때, 상단의 요일 및 날짜 반영하기 오늘의 종합적인 날짜를 구하려면 new Date 오브젝트를 활용. 개발자 도구의 콘솔을 확인해보니 Day와 Month는 숫자로 되어있음. -> 숫자에 대응하는 문자열로 변환하기 위해 Day, Month에 대한 배열을 생성 Day 배열과 반복문으로 라벨링 표기 ->..

늦었지만 깃허브에 프로젝트를 커밋하는 법을 알게 되었다. https://2hyes.tistory.com/91 Github: 깃헙에 프로젝트 올리는 법(윈도우) github에 가입이 되어있는 상태라는 가정 하에 방법을 작성하겠다. 사실 내가 자꾸 명령어를 까먹어서 쓰는 거다..🤦🏻‍♀️ 1. Git(깃)을 설치( https://git-scm.com/downloads ) OS에 맞는 것으로 설치해 2hyes.tistory.com 작년 9월 즈음 개발에 관심을 가지기 시작하여 만들었던 계정이 있었다. https://github.com/hatae94 hatae94 - Overview hatae94 has 10 repositories available. Follow their code on GitHub. gith..

오늘은 바닐라코딩 사전학습 가이드 STEP1의 마지막인 Google Clone을 해보려 한다. 제시된 조건은 다음과 같다. HTML, CSS만을 이용하여 구글 웹사이트와 최대한 비슷한 UI를 구현해보세요. UX 측면의 동작들은 구현하지 않아도 무관합니다. CSS 효과, 화면 조정에 대응하기는 신경 쓰지 않으셔도 괜찮습니다. 구글 로고나 아이콘 등은 인터넷에서 찾아서 사용하세요. 화면 사이즈 조정에 대한 대응은 하지 않으셔도 됩니다. 일단, 화면 사이즈 조정까지 해보는 것을 목표로 시작한다! 먼저 Wireframe을 구성하고, 클래스까지 정해 본다. 크게 세 박스이며, header | .main+.search+.gobutton | .nation+.instruction 으로 나뉜다. 그리고 웹페이지의 글꼴을..

www.youtube.com/watch?v=67stn7Pu7s4&list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y&index=15 다른 사람들은 길어봐야 3시간 걸렸던 코딩을 나는 7시간은 한 것 같다.. 밤을 새 버려서 너무 피곤하지만 그만큼 얻어가는 부분이 참 많다. wirefram 구축부터 아직 이해하지 못한 JS를 통한 동적 할당까지.. 코딩을 하면 할수록 배울 것이 이곳저곳에서 튀어나온다. 코딩 과정을 전부 나열하기에는 효율이 많이 떨어지는 것 같아서 내가 인지한 실수와 발생한 문제를 기록해보려 한다. 바로 html 마크업 시 클래스 지정에 규칙성이 없는 점이다. 이로 인해 발생한 문제는 css 코딩 시에 강의 영상의 말미에서 더 이상 참고를 하지 못하게 되는 것이었다. 막..

지난 1화에 이어서 햄버거를 세 덩어리와 독립적으로 오른쪽 상단에 위치시키고자 한다. youtu.be/X91jsJyZofw 아이콘 코드를 받아온 후, a 태그를 사용하여 코드를 작성한다. css로 돌아가서 position : absolute를 통해 햄버거의 절대 위치를 정의하고, 우측 상단에 맞게 right, top 픽셀 값을 설정한다. 사실 여기서 햄버거의 위치가 바뀌지 않아 결국 컨닝?을 하고 말았다.. 알고 보니 클래스 이름을 제대로 쓰지 않은 것이 원인이어서 약간 허탈했다; 기본적인 실수는 하지 않도록 더 신경 써야겠다! 이제 화면이 넓어질 때 햄버거가 나오지 않도록 해야 한다. 제이쿼리 밖의 navbar__toogleBtn 클래스에 display: none을 추가한다. 그런데 햄버거는 사라졌지만..

드림코딩 엘리님의 유튜브 영상을 보며 웹사이트의 반응형 헤더를 만들어 보았다. youtu.be/X91jsJyZofw 복습한다는 의미로 파일을 지우고 다시 혼자 정리하며 만들어보고 비교해보려고 한다. 따라 만들어볼 웹 사이트의 형태는 다음과 같다. 먼저, 가장 큰 남색의 박스에 공백으로 나뉜 세 개의 덩어리로 구성되어있다. (드림코딩, 메뉴, SNS 아이콘) 또한 창이 줄어듦에 따라 세 덩어리가 세로로 정렬되며, 오른쪽 위에 햄버거가 생성된다. 새로운 폴더와 html 파일을 생성하고, html의 기본 양식을 으로 불러온다. 파악한 구조대로 코드를 짜본다. 가장 왼쪽 덩어리는 아이콘과 드림코딩 문구로 이루어져있으며, 문구를 클릭했을때 메인 화면으로 연결되게 구현할 것이다. 가운데 덩어리는 ul 태그로 감싸고..