Dev

자기소개 Page를 만들면서 Navi bar가 browser scroll의 motion에 따라 아래와 같이 움직이게 만들고 싶다는 생각이 들었다. jquery 쓰는 것을 좋아하지 않아 자바스크립트로만 작성했습니다! 위 코드를 보면 알 수 있듯이 NaviNavbar는 navibar의 id입니다. 알고리즘은 다음과 같아요. 1. browser의 scroll이 움직일 경우 didscroll 은 true가 됩니다. 2. setInterval을 통해 0.25초 마다 브라우저가 움직였으는지 확인하고 ( didScroll === true ) 일경우 hasScrolled()를 실행시키고 didScroll을 false로 초기화 시켜줍니다. 3. hasScroll()은 scroll의 모션의 경우에 따라서 navibar가 ..

Javascript를 공부하는 사람이라면 변수선언 키워드인 var, let, const의 차이를 다들 알고 있을 거라 생각합니다. 여러 차이점이 있지만 키워드별 scope의 차이의 개념을 접했을 때 감이 잘 잡히지 않았어요 var 는 함수레벨 scope를 , let과 const 블록레벨 scope를 가지죠. 아래 Code를 보면 단번에 이해 되실 거에요. var 로 선언된 변수 scopeVar는 if{ } 블록밖에서도 그 값이 유효하다는 걸 알 수 있어요 ( 단, f2(){ } 함수내에서만 ) 반면에 let과 const로 선언된 변수는 if{ } 라는 블록 밖에서는 값이 유효하지 않아요

📘 Redux에 관해 공부 중 아주 훌륭한 학습 자료를 찾았다. https://www.inflearn.com/course/redux-%EC%83%9D%ED%99%9C%EC%BD%94%EB%94%A9 [무료] 생활코딩 - Redux - 인프런 | 강의 생활코딩에서 제공하는 Redux 강의로, 자바스크립트를 중급 이상 다루는 분들을 대상으로 리덕스를 이용해 더 단순한 코드로 더 복잡한 애플리케이션을 만드는 방법에 대한 수업입니다., - 강의 www.inflearn.com 🔥프로그래밍을 하는 사람이라면 모두 아는 '생활코딩' 자바스크립트를 어느정도 아는 사람이라면 무리 없이 들을 수 있는 강의였다. 강의에서는 리덕스를 '왜?' 쓰는지 아는 것이 가장 중요하다고 강조를 한다. 추상적인 개념을 그림을 통해 굉장히..

Javascript에서 변수는 굉장히 유연하다. 이 유연함이 장점이 될 수도 있지만 복잡한 서비스를 만들 때 code량이 증가하면서 type에 대한 착각을 할 경우가 생긴다. 이런 단점을 위해 필요한 javascript 확장 언어가 Typescript고 frontend 개발자라면 무조건 숙지가 필요한 언어임이 틀림 없다고 한다. Typescript를 처음 입문하기 위해서 수강할 인터넷 강좌를 찾던 중 인프런에서 아래와 같은 강좌를 발견하고 수강을 했다. 아래 강좌는 실제로 typescript를 이용하여 code를 작성하면서 어떻게 활용되는지 보여주면서 강의를 진행한다. https://www.inflearn.com/course/%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%B..

Redux 학습한 내용을 활용하여 crud기능이 가능한 프로그램을 만드는 와중에 예상치 못한 error에 봉착했다. Redux api .dispatch를 통해 redux reducer에 action을 보내줬을 때 하단과 같은 error가 발생했다. 한 참을 해매다 아래와 같은 발견을 했다. redux/4.2.0 기준으로 dispatch()의 parameter로 객체를 전달 시 객체의 key이름은 mode가 될 수 없다. 이게 나의 결론이 었다. key이름을 바꿀 시 정상적으로 dispatch가 정상 작동 했다. 내 추측으로는 아무래도 mode라는 option이 redux dispatch() api의 옵션조작과 관련 있지 않아서 못쓰게 만든거 아닐까라는 생각을 한다. 참고 ) 아래는 수강했던 강좌입니다. ..

프론트엔드 양성과정 국비수업을 들으면서 webpack에 대한 개념을 알게 됐지만 실제로 webpack을 사용한 적도 어떻게 적용해야 되는지 무지한 상태였다. 그래서 인프런에서 제공하는 webpack 강의를 수강했다. ( ↓↓↓ 하단 링크 ) html, css, javascript를 어느 정도 알고 있는 상태여서 추가로 선 학습없이 쉽게 강의를 들을 수 있었고, 실제 vscode 상에서 적용하는 예시를 보여주며 설명하는 방식이 머리에 쉽게 들어왔고, 한 강당 3 ~ 5분으로 집중력을 계속 유지됐다. https://www.inflearn.com/course/%ED%94%84%EB%9F%B0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%9B%B9%ED%8C%A9 프론트엔드 개발자를 위한 웹팩 - 인..

개발하는 크롱 크롱의 Dev Log 검색하기 CATEGORY ReactJS | NextJS [Warning: Each child in a list should have a unique "key" prop.] 에러 해결 개발하는 크롱 2020. 12. 22. 01:37 문제점 아래와 같이 자바스크립트의 map 함수를 사용한 경우 콘솔에서 " Warning: Each child in a list should have a unique "key" prop "이라는 주의 문구를 확인할 수 있다. {["AAA", "BBB", "CCC"].map(item => {item} )} React는 key prop을 사용하여 컴포넌트와 DOM 요소 간의 관계를 생성한다. 리액트 라이브러리는 이 관계를 이용해 컴포넌트 리렌더링..

window 환경 vscode 에서는 react component에서 swiper를 사용했을 때 swiper.css와 그외 다른 파일을 import하는데 문제 없었지만 code를 linux ubuntu server에 올렸을 때 문제가 생겼다.. 아래와 같은 현상이 었다. --> https://github.com/nolimits4web/swiper/issues/4871

ubuntu sftp에서 내가 만든 프로젝트 폴더의 owner가 root로 설정 되어 있어서 sftp 상에서 파일을 삭제하고 할 수 없었다. 이를 해결 하기위해 owner를 바꾸고자 아래 명령어를 사용했다. ( -R은 하위 파일에도 같은 적용을 하겠다는 옵션이다. ) 참고 ->https://itworld.gmax8.com/24 [Linux]리눅스 파일, 폴더 소유자 변경 chown 리눅스에서 파일 또는 폴더의 소유자를 변경하는 방법 리눅스에서 chown 이라는 명령어를 사용하여 파일이나 폴더 또는 하위경로의 소유자를 변경합니다. 파일, 폴더의 그룹, 사용자를 변경할 수 itworld.gmax8.com 이번엔 group을 바꾸고자 아래 명령어를 사용했다. ( owner 명령어와 다른 점은 : 이고 / -R..

React로 제작한 Portfolio를 배포(?) 하기 위하여 무료 Amazon Elastic Compute Cloud를 이용해보려고 한다. 아마존 클라우드 서버 호스팅 | Amazon Web Services Amazon Elastic Compute Cloud(Amazon EC2)는 500개가 넘는 인스턴스, 그리고 최신 프로세서, 스토리지, 네트워킹, 운영 체제 및 구매 모델의 옵션과 함께 워크로드의 요구 사항에 가장 잘 부합할 수 있도록 aws.amazon.com 1. Mobaxtem 사용하여 SSH와 SFTP를 연결한다 참고로 ) SSH란 Secure Shell의 약자로 네트워크 상 다른 컴퓨터에 접속 및 명령을 실행하거나 파일을 복사 할 수 있는 프로그램이다. ( Secure Shell에서 알 수..