jeong_ga

모던자바스크립트 DEEPDIVE - chapter 5 표현식과 문 값 식이 평가되어 생성된 결과를 뜻함 (평가란 식을 해석하여 값을 생성하거나 참조하는 것을 의미) 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 혹은 공간을 식별하기 위해 붙인 이름이다. 따라서 변수에 할당되는 것은 값 const sum = 10+20; 변수 sum에 할당되는 것은 10+20 이라는 식이 아닌 30이라는 값이다. 값은 식을 통해 생성할 수도 있으나 가장 기본적인 방법은 리터럴을 사용하는 것! 리터럴 리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법 사람이 이해할 수 있는 문자 혹은 기호로 표기한 코드로 자바스크립트 엔진은 런타임에 리터럴을 평가해 값을 생성한다. 값을 생성하기..

모던자바스크립트 DEEPDIVE - chapter 4 변수 변수 컴퓨터는 연산을 위한 장치와 기억을 위한 장치가 따로 존재하며 연산 후 이를 저장한 곳에서 해당 연산 값을 꺼내올 수 없다. (메모리 주소를 사용하는 것은 오류를 발생할 수 있기 때문에 금지되었다.) 하나의 값을 저장하기 위해 확보한 메모리 공간 그자체 메모리 공간을 식별하기 위해 붙인 이름 값의 위치를 가리키는 상징적인 이름 변수 이름을 사용하여 참조를 요청하면 자바스크립트 엔진은 변수 이름과 매핑된 메모리 주소를 통해 메모리 공간에 접근해 값을 반환 할당 변수에 값을 대입하는 것 참조 변수에 저장된 값을 읽는 것 식별자 메모리 주소에 뭍인 이름 변수 이름을 식별자라고도 부른다. 어떤 값을 구별해서 식별할 수 있는 고유한 이름 식별자는 값..

모던자바스크립트 DEEPDIVE - chapter 3 04.19 node.js 크롬 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경 브라우저에서만 동작하던 자바스크립트를 브라우저 외 환경에서 동작시킬 수 있도록 만든 실행환경을 뜻한다. npm 자바스크립트 패키지 매니저 node.js에서 사용할 수 있는 모듈을 패키지화 하여 모아둔 저장소 및 설치 관리를 위한 CLI를 제공 패키지 공개 및 검색하여 사용이 가능 REPL 간단한 자바스크립트 코드를 실행해 결과를 확인할 수 있다. node // 프롬포트 창이 > 로 변경된다면 js코드를 작성한다. ~~JS코드~~ node script.js // 자바스크립트 파일을 실행시키고자 할 때 사용하는 명령어 // node 명령어 뒤에 실행시킬 파일명을 작성..

axios와 같은 기능적 코드를 재사용하기 위해 외부 함수로 만드는 과정을 진행하는 와중에 NavArea.jsx:13 Uncaught TypeError: axiosData is not a function와 같은 오류를 만났다. axios function axiosGetData(url, getData) { return axios(url, { method: "GET", data: getData, }) .then((res) => res.data) .catch((error) => console.log(error)); }사용한 코드 - error const subLinkData = "./data/nav.json"; const [data, setData] = useState([]); const axiosData =..

수정 전 코드 import axios from "axios"; export default function axiosGetData(url, data) { return axios(url, { method: "GET", data: data, }) .then((res) => res.data) .catch((error) => console.log(error)); } export default function axiosSetData(url, data) { return axios(url, { method: "POST", headers: { "content-type": "application/json", }, data: data, }) .then((res) => res.data) .catch((error) => con..

완성된 login css 현재는 일반 사이트 사용처럼 로그인 페이지로 이동하여 로그인을 하도록 작성하였는데 이게 아닌!! url을 통해 홈페이지를 열면 가장 먼저 로그인 페이지가 나오고, 로그인이 완료되면 완성해놓은 이 나오도록 해야 하기 때문에 Login Route의 코드를 수정해야 했다. (admin이니까 당연했음...👀) 그래서 코드를 변경하기 전에 기록용으로 작성해 놓으려고 한다! login jsx import { Link } from "react-router-dom"; function LoginPages() { return ( login 로그인 설명 및 광고 이미지 login 아이디를 입력해 주세요. 비밀번호를 입력해 주세요. Log In 회원가입 비밀번호 찾기 ); } export defaul..

👉 참고 블로그 현재 진행하는 프로젝트는 내 개인 프로젝트가 아닌, 업무용으로도 진행될 여지가 있는 프로젝트이기 때문에 새로운 깃허브 아이디를 만들어 프로젝트를 진행했다. 이렇게되면 다른 아이디로 commit 을 할 때마다 Token을 변경해야 하는 번거로움이 발생하게 되는데 이를 해결하기 위해 SSH를 이용하기로 하였음!! SSH Key 생성하기 터미널을 실행하여 추후에 추가될 SSH 키를 확인하기 위해 기존 파일 목록을 확인한다. $ cd ~/.ssh $ ls -al SSH key 생성 -gitHub에서 사용하는 email과 생성될 키 이름 지정 $ .ssh ssh-keygen -t rsa -C "lja3248@gmail.com" -f "id_rsa_lja3248" 비밀번호를 입력하라는 메세지가 나오..

합격 결과를 문자로 미리 알려줘서 편했다! 학점은행제 학점 인증 자격증 중 하나인 네트워크관리사를 준비했고, 네관사2급에 앞서 준비했던 컴퓨터활용능력1급에 비해 훨씬 쉽고, 준비 기간이 짧은 시험이었다. 컴활은 찐 공부시간이 비교적 긴 것도 있지만.. 합격발표나고 다시 준비하는 기간들 때문에 더 오래걸렸음! 네트워크 관리사 2급은 필기는 기출문제로만 준비했었고, 아래는 필기땄을 때 작성했던 게시글 ..! https://blog.naver.com/3_3jahh/222744747600 네트워크 관리사 2급 필기 합격 후기 및 공부방법 컴활1급에 이은 두번째 자격증은 네관사 2급이었어요! 자격증이 비싸기도 하고 상설 시험은 아니라 조금 긴... blog.naver.com 네관사2급 실기는 유튜브 햄릿슈 + 구..

위 이미지와 같이 마우스를 갖다대면 밑줄이 생기는 코드를 작성했다! 기존엔 backgound-color, border를 사용해서 작업했기 때문에 가상선택자를 이용하여 작성한 코드도 따로 기록해 놓으려고 한다. /*more view btn*/ .tabelLink { position: absolute; bottom: 20px; right: 20px; width: 120px; height: 30px; line-height: 30px; text-align: center; border-radius: 5px; transition: all 300ms ease-in; } .tabelLink::before { position: absolute; display: block; content: ""; bottom: 0; wi..

아직은 redux를 사용하지 않기 때문에! 가장 상위에서 다른 하위 컴포넌트가 사용할 state를 생성하여 props로 전달해서 사용하고 있는데 상위가 하위에게 변경된 값을 전달해주는 것은 가능하나 하위 컴포넌트에서 변경된 값이 상위 컴포넌트에게 전달되는 것은 불가능했다. 나는 app.js react-router-dom를 사용하여 route를 만들었기 때문에 가장 상위인 app.js에서 useState를 생성하여 하위 컴포넌트인 route에게 값을 전달했다. -> 하위 컴포넌트들은 onClick이벤트가 발생하여 useState의 값이 변경되면 이 값을 상위 컴포넌트인 app.js에게 전달시켜줘야 했음! 📍 App.js > Home.js > Nav & Header & Container & Footer 의 ..

data는 50~51개의 인덱스를 가진 json data로 만들었음! button이 제대로 됐는지 확인하고 싶어서 51개로 늘려봄 table을 만드는 것까지만이기 때문에 페이지 및 컴포넌트의 이름은 table로 작성 이런 오류가 발생한다면 !! 👉 Warning: validateDOMNesting(...):cannot appear as a child of. Add a,orto your code to match the DOM tree generated by the browser. 📍react에선 tbody와 thead를 작성해야 오류가 발생하지 않음!!! home에서 보는 위젯 table import { useState, useEffect } from "react"; import axios from "ax..

동일한 컴포넌트를 가지고 mediaQuery와 useState를 이용하여 navigation을 만들었다. css가 useState의 값을 조절할 수는 없어 화면의 사이즈에 상관없이 useState의 기본값으로 nav가 표현되었다. 이를 수정하기 위해 현재 윈도우의 사이즈를 확인하여 useState의 값을 변경하는 함수를 만들었다! 모바일에서는 useState의 값이 false, nav가 안 보이는 것이 기본 값 PC 사이즈에서는 useState의 값이 true, nav가 보이는 것이 기본 값 으로 추가 설정함! 참고 블로그 import { useState, useEffect } from "react"; const [btn, setBtn] = useState(true); // button을 클릭하여 nav..

Container라는 컴포넌트를 재사용하기 위하여 Container는 기본 틀을 잡고, Container의 핵심 콘텐츠는 route마다 다른 컴포넌트 만들어 집어넣어 사용하고 싶었다. 그러기 위해서는 컴포넌트의 형제 형태가 아닌 자식 형태로 컴포넌트를 하위 컴포넌트로 전달해줘야 하는데 형식은 기존에 값을 전달하는 것과 동일하게 작성하면 된다! 대신!! 부모 컴포넌트에서 값을 전달해줄 컴포넌트를 import 한 후 import한 식별자를 하위 컴포넌트에게 전달해주면 된다. 후에 재사용을 위해 h3과 breadCrumb를 수정해야 하지만 일단은 여기까지 수정해놓고, Nav 코드를 더 손봐야 겠다 👊

일단은 이렇게 작성했는데 추후에 css파일을 줄이는 방법도 생각해 봐야함! src 폴더에 있는 style 관련 파일들을 public으로 옮겨야 했기 때문에 기본 css를 사용했다. scss, styled-components를 사용했기 때문에 해당 기능들을 사용하기 위해 검색을 했는데 아직 개발되지 않은 것들이 많아 좀 당황! 일단 styled-components로 작성한 코드를 public>style 폴더를 만들어 css 파일을 생성하였다. (아직 css는 nesting이 안 되더라.. ! 🥲) styled-components 에서는 styled-components의 createGlobalStyle과 styled-reset 라이브러리를 사용해 common.css와 reset.css를 생성했는데 css파일..

브라우저 렌더링 과정 node.js의 등장으로 js는 웹 브라우저가 아닌 서버사이드 애플리케이션 개발에서도 사용할 수 있는 개발 언어가 되었지만 js가 가장많이 사용되는 분야는 웹 브라우저 환경에서 동작하는 웹 페이지 / 어플리케이션의 클라이언트 사이드 이다. → node.js : 구글의 V8 JS엔진으로 빌드된 JS 런타임 환경 파싱 파싱은 또 다른 이름으로 구문분석이라고 한다. 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽고 실행하기 위해 텍스트 문서의 문자열을 토큰으로 분해하여 어휘 분석하고 문법적 의미와 구조를 반영하여 트리 구조의 자료 구조인 파스트리를 생성하는 일련의 과정을 말한다. token 문법적으로 더이상 하눌 수 없는 코드의 기본 요소 랜더링 html, css, js로 작성된 ..