FRONT-END110

• 

  [노마드/ReactJS 영화 웹 만들기] - Ch02 | 6. 컴포넌트 사용 JSX에서 컴포넌트 사용 이전에 만들었던 container 부분도 JSX를 사용하여 변경해 보고, Title과 NewBtn을 컴포넌트 형식으로 변경해 웹에 뿌려보도록 하자. 컴포넌트 생성 방법 우리가 만든 컴포넌트를 사용하기 위해서는 반드시 Uppercase로 작성되었어야 했다. 그리고 이 컴포넌트를 Arrow function을 사용해 함수로 만들어 주면, 사용할 수 있는 컴포넌트로 바뀌게 된다. //Title에 arrow function을 사용해 함수로 변경해줌! const Title = () => ( console.log('타이틀에 마우스가 감지 되었습니다.')}> 안녕하세요 ); const NewBtn = () => ( console.log('클릭 되었습니다.')} style={{ border: '.. FRONT-END/ReactJS Clone project 2023. 1. 15.

• 

  [노마드/ReactJS 영화 웹 만들기] - Ch02 | 5. JSX 사용법 JSX JSX는 자바스크립트를 확장한 문법이다. 보통 HTML이랑 비슷하지만 property를 HTML 태그의 속성처럼 사용하면 안 된다. 또한 반드시 컴포넌트는 uppercase로 넣어줘야 한다. /* 아래 방법은 절때 사용하지 않음 (기본 구조만 이해하면 됨) */ const Title = React.createElement('h2', { id: 'main-title', onMouseOver: () => console.log('타이틀에 마우스가 감지 되었습니다.') }, '안녕하세요'); /* 대신 JSX를 사용하는것이 훨씬 편리하고 많이 쓰인다.*/ const title = ( console.log('타이틀에 마우스가 감지 되었습니다.')}> 안녕하세요 ); 처음에 사용했던 기본 React 문법과 .. FRONT-END/ReactJS Clone project 2023. 1. 15.

• 

  [노마드/ReactJS 영화 웹 만들기] - Ch02 | 3. Events in React ReactJS로 영화 웹 만들기 자바스크립트에서는 마우스와 같이 어떠한 이벤트를 주기 위해선 많은 단계를 거쳐야 한다. addEventListener를 사용하여 간단하게 보자면 아래와 같다. 안녕하세요 클릭 클릭 이벤트 위 바닐라 JS를 React로 바꿔주면 더욱 간편하게 이벤트를 적용시킬 수 있다. const를 render 하고 싶은 경우 div를 만들어준다. 그리고 React.createElement("div", null, \[title, btn\]); 와 같은 배열을 만들어서 const를 넣어준다. const container = React.createElement('div', null, [title, btn]); 이제 버튼이나 태그 안 property에 eventListener 넣는 것도 가능하다.. FRONT-END/ReactJS Clone project 2023. 1. 15.

• 

  [노마드/ReactJS 영화 웹 만들기] - Ch02 | 2. 리액트 설정 및 기초 ReactJS로 영화 웹 만들기 React는 HTML, CSS, 자바스크립트만으로 웹 페이지를 만드는 것과 비교해 큰 이점이 있다. 프로그램 설계를 조직화할 수 있다. 웹 페이지를 HTML로 만들다 보면 같은 부분을 여러 번 다시 사용해야 하는 번거로움이 있지만, HTML만 봐도 페이지마다 공통적으로 바뀌는 부분을 일일이 인덱스를 이동하며 넣어줘야 한다. 그렇기에 웹 사이트가 커질수록 관리도 어려워지게 된다. 루트(route)가 수십 개이고 그 안에 사용되는 코드가 수 백 줄인 웹 사이트 라면 이 방법대로 하는 것이 아주 좋지 않다. 심지어 컴포넌트를 만들어서 넣어줄 수 도 없다. 그래서 만들어진 것이 Facebook에서 만든 ReactJS와 같은 프레임워크이다. 01) 전체 프로그램 설계를 깔끔하고 일.. FRONT-END/ReactJS Clone project 2023. 1. 15.

• 

  [TIL] 230114 Git 20230114 GIT 오늘은 현업에서 사용하는 깃에 대해 알아보았다. 개인프로젝트를 할 때에는 하지 않았던 버전관리, 레포, 브랜치 생성 및 머지 그리고 푸시를 토이프로젝트를 진행하면서 알게 되었다. 처음에는 터미널과 깃허브 데스크톱으로 진행했지만, 전체적인 흐름을 보기위해 소스트리도 병행하며 깃에 대한 전반적인 지식을 익혔다. 우선, 정리한 대표적인 깃 명령어는 다음과 같다. 대표 깃 명령어 git status - 깃의 변경사항을 알 수 있다. git add . - 스테이징에 수정된 모든 파일을 스테이징 area에 넣음 git commit -m “fix: RestController를 Controller로 변경” - 커밋 메시지를 넣음’ 최대한 자세하게 커밋메시지를 넣어주는 것이 중요 git check.. FRONT-END/TIL 2023. 1. 15.

• 

  [TIL] 230113 토이프로젝트 4일차 끝 2023013 최종적으로 토이프로젝트를 마무리했다. 3일 차에서 URL을 넣는 Form을 만들었고, 그 안에 Ajax와 mongoDB를 사용해 POST형식으로 DB 쪽에 넣고 GET방식으로 홈페이지에 뿌려주었다. 더보기 function ajaxBookMark(url, data) { bookmark_list = {}; $('#cards-box').empty(); $.ajax({ type: 'POST', url: url, data: data, async: false, success: function (response) { if (response['msg']) { response['msg']; } else if (response['error']) { alert(response['error']); } bookm.. FRONT-END/TIL 2023. 1. 15.

• 

  [TIL] 230112 토이프로젝트 3일차 20230112 토이프로젝트 북마크세이버라는 프로젝트를 진행하면서 1-2일 차에 프론트엔드에서 헤더 기능, 타이핑 기능, 메인 인덱스 UI를 백엔드에서 회원가입 기능을 추가하여 인덱스 페이지와 로그인 페이지를 마무리 지었었다. 3일 차에는 메인 화면에 URL을 추가하면 해당 URL의 meta og 태그들을 긁어 오고, 인풋의 여러 로직을 만들어 URL / 사용자가 원하는 카테고리 / 태그까지 넣어 화면에 뿌려지는 형식으로 로직을 짰다. 이과정에서는 Python, Flask, Pymongo, JS, BS4 스택을 사용했다. 로그인 부분 태그 기능은 프론트엔드에서 tagify 라이브러리를 사용하여 tag를 보여주는 기능을 구현했고, 백엔드는 토큰기능과 hash 보안 기능이 없는 부분만 구현해 주셨다. 더보기.. FRONT-END/TIL 2023. 1. 14.

• 

  [TIL] 230110 - 230111 토이프로젝트 1일차 - 2일차 20230110 - 230111 향해99에 처음 합류하고 바로 시작한 토이프로젝트. 사전에 알게된 파이썬과 바닐라 JS로만 만들어야 했던 조그마한 토이프로젝트가 4일간의 여정을 시작했다. 주특기만 정해진 네명의(프론트엔드2 백엔드 2) 팀원들과 BookMark Saver라는 프로젝트를 만들고 하나하나 기능을 추가해 나갔다. 우선 큰 틀은 로그인을 하면 메인화면에 입장하게 되고, 그곳에서 저장하고 싶은 웹사이트 URL, 카테고리, 태그를 넣어주면 각 사이트마다 정해진 meta og tag를 가져와 페이지에 뿌려주는 방식의 북마크 웹 사이트다. Index 인덱스 페이지에서는 간단하게 로그인 화면으로 이동할 수 있게 버튼을 생성하고 Typing 되는 JS 로직을 만들어 텍스트 효과를 프런트엔드 쪽에서 주었다... FRONT-END/TIL 2023. 1. 12.

• 

  [TIL] 230111 20230111 향해99에서 지급해 준 PyCharm을 사용하면서 간단한 프로젝트를 돌려보다, 익숙했던 VSCode가 아니라 너무 복잡하고 귀찮았다. 파이참으로는 대부분 파이썬을 사용했기에 인터프리터만 다운로드해 주면 아주 편하긴 했었다. 하지만 OT주 토이프로젝트를 진행하면서 4개월짜리 파이참을 쓰기는 싫었다. 토이프로젝트는 파이썬 기반으로 만들어질 것이기 때문에 VSCode에도 파이썬 관련 인터프리터들을 pip3 install 형식으로 가져와줘야 했다. 하지만 VSCode에서는 다양한 오류들을 뿜었다. ModuleNotFoundError: No module named 'pymongo' ModuleNotFoundError: No module named 'Flask' 위와 같은 오류가 콘솔에 계속해서 찍.. FRONT-END/TIL 2023. 1. 12.

• 

  [TIL] 230110 20230109 향해99 12기의 토이프로젝트를 진행하면서 처음으로 백엔드와 프론트엔드가 협업 프로젝트를 만들어보았다. 매번 혼자 pull > commit > pull > push만 했던 터라 네 명 모두 깃헙 협업은 처음 해보는 상황이라 무작정 부딪혀야만 했다. 우선 Git에 프로젝트를 공유하고 협업하고 최종적으로 Pull Requests와 merge까지 시키는 것을 목표로 삼았다. 시도 우선 한 명의 개발자가 새로운 Project repository를 생성하고 구성원으로 초대하거나 타깃 repository를 자신의 repository로 Fork 해줬다. Fork로 생성한 본인 계정의 저장소에서 clone or download 버튼을 누르고 표시되는 url을 복사한다. 여기서 주의할 점은 타깃 repo.. FRONT-END/TIL 2023. 1. 10.

• 

  [TIL] 230109 20230109 문제점 티스토리의 스킨 기능을 통해 스킨을 꾸미면서 CSS의 border-radius 기능을 넣던 도중, 안드로이드 및 윈도우 기반의 크롬/사파리에서는 문제가 되지 않던 border-radius와 overflow-hidden 기능이 MAC / iPhone에서는 적용이 되지 않는 점을 확인했다. 시도 단순히 z-index문제라고 생각되어 적용된 모든 박스에 z-index를 수정해가며 시도해보았다. 하지만 결과는 실패... 처음엔 -webkit-border-radius라는것이 있나? 라고 생각되어 관련한 문서들도 찾아봤지만 그 기능은 없었다. 그러던 도중 MDN 자료의 쌓임 맥락이라는 게시글을 확인해보게 되었다. 해결방법 결론은 사파리의 렌더링 엔진인 -Webkit 버그라고 한다. 버그를 해.. FRONT-END/TIL 2023. 1. 9.

• 

  [Git] .gitignore을 사용해 git에 추가되지 말아야 할 파일 정의하는방법 gitignore 사용해 git에 추가되지 말아야 할 파일 정의하는 방법에 대해 알아보겠습니다. gitignore .gitignore 파일이란? .gitignore 파일은 Git의 root 디렉터리에 저장되어, Git Repository나 Staging Area에 추가되지 말아야 하는(무시되어야 하는) 폴더나 파일을 정의하는 파일이다. .gitignore에 정의된 파일은 Staging Area에 올라가지 않기 때문에 tracking 되지 않는다. 따라서 git status 를 이용했을 때 보이지 않는다. Git에 추가되지 말아야 할 파일 정의 특정 항목별로 무시해야 하는 파일을 알아보기 전에 어떻게 git안에 추가하는지 간단하게 알아보자면 다음과 같습니다. 폴더 전체 무시 다음 줄을 추가하여 특정 폴더에.. FRONT-END/VS & GITHUB 2022. 10. 7.

• 

  [CSS] Pseudo-elements (placeholder, selection, first-letter) CSS에서 많이 사용하는 Pseudo-elements 3가지에 대해 간단하게 알아보도록 하겠습니다. Pseudo-elements 이 pseudo-elements는 실제로 존재하는 element는 아니지만, 스타일링을 할 수 있게 해 줍니다. ::placeholder ::placeholder는 placeholder의 스타일을 제어할 수 있습니다. ::placeholder { color: blue; font-size: 1.5em; } See the Pen placeholder by 서근 (@seogun95) on CodePen. ::selection ::selection은 텍스트를 마우스를 통해 드래그해 선택할 때 나타나는 효과를 제어할 수 있습니다. p::selection { color: red; back.. FRONT-END/CSS 2022. 10. 6.

• 

  [CSS] 결합/연결자 - Combinators CSS에서 유용하게 사용되는 결합자(combinators)에 대해 알아보도록 하겠습니다. Combinators CSS에서 선택자를 결합하는 방법에는 여러 가지가 존재하고 사용하는 결합자에 따라 결과도 다르게 보입니다. 자손 결합자 (Descendant Selector) 부모 그리고 자식 관계 "" 공백 결합자는 첫 번째 요소의 자손인 노드를 선택합니다. 자손 선택은 지정된 요소의 자손인 모든 요소와 일치합니다. 안녕하세요 서근 개발 노트입니다. 블라블라블라1 블라블라블라2 블라블라블라3 블라블라블라4 블라블라블라5 div p { background-color: yellow; } 자식 결합자(Child Selector) 부모 + 자식 관계 > 결합자라고도 칭합니다. 자식 결합자는 첫 번째 요소의 바로 아래.. FRONT-END/CSS 2022. 10. 6.

• 

  [CSS] Collapsing-Margin (마진 겹침 현상) CSS로 작업을 하다보면 마진이 겹치는 현상을 발견할 수 있습니다. 오늘은 이 Collapsing-margin 현상에 대해 알아보도록 하겠습니다. Collapsing-Margin 마진 상쇄 현상을 MDN에서는 다음과 같이 정의하고 있습니다. 블록의 top 및 bottom 마진은 크기가 마진 중 가장 큰(또는 동일한 경우 하나만) 단일 마진으로 결합(상쇄)되며, 이를 마진 겹침 상쇄라고 합니다. 하지만 floating 및 position absolute 요소의 마진은 절대 축소되지 않습니다. -MDN 즉, 마진 상쇄는 어떤 두 개 이상의 블록(block)의 top 그리고 bottom의 마진이 겹칠 때 어느 한쪽 값만 적용하는 브라우저 자체의 규칙입니다. 마진 상쇄 현상은 죄(left) 우(right)에서는.. FRONT-END/CSS 2022. 10. 6.