나의 FE피봇이야기 (182) 썸네일형 리스트형 [useEffect]특징 3가지 이 자료는 별코딩 영상을 참조하여 작성하였습니다. useEffect는 브라우져가 랜더링 이후에 돔에 그림을 그린다. useEffect은 함수 작성 방식에 따라서 함수 실행여부가 달라진다. 1. useEffect (기본) usefEffect (()=>{ // 작성함수 }) 페이지가 랜더링 될때마다 useEffect 함수가 작동 2. useEffect( 특정 useState 언급) useEffect (()=>{ // 작성함수 }, [ value(Dependecy Array) ]) value 값을 작성하면 작성한 value에서만 작동. 즉 [ ] 안에 넣은 useState의 상태가 변경될때만 useEffect function이 작동. 3. useEffect( [ ] No 언급) useEffect (()=>{ .. [useState] CallBack 함수는 2가지 타입을 가지고 있다. 왜 useState를 설명하는데 CallBack 함수를 설명하냐하면, set000은 값이 변경될때마다 페이지를 re-loading 하기때문에 이것을 방지하기 위해서 Callback 함수를 활용. CallBack 함수의 2가지 특징 1. functions를 변수로 사용한다. => accept functions as arguments 2. functions를 돌려 준다. => Return functions => function 즉, 함수 '그대로'를 돌려주기 때문에 () === excute(실행문)이 필요. 참조 https://www.youtube.com/watch?v=gVhRtrOw-oM 2. functions를 돌려 준다. useState 사용 특히 input 함수에서 정보를 작성할 때마다 re-load.. [git] git (working Directory / Staging Area / Repository)작업하기 업데이트 일자(2024.01.30) 완전한 이해를 바탕으로 작성된 글이 아님으로 사전에 언급드립니다. 이 글은 드림코딩 영상을 참조하여 작성한 글입니다. 개인적으로 GIT 초보자가 가져야 할 Diagram 이라고 생각한다. git과 git hub는 다르다. git은 Local 저장소라 불리며, 3가지 단계로 나줘져 있다. git add 파일명 -untracked 파일 추가 staged modified 내용 수정이 이뤄지면 다시 add 를 통해서 staging area로 이동 시켜줘야 함 git rm --cached (파일명) staged를 add *과 add. 구분하기 add*하고 다시 a.txt 파일 삭제 하면 a.txt 삭제한 내용을 반영하지 못함( status) add.은 a.txt가 삭제된 상황까.. [Git] git과 github set 하기 업데이트 일자(2024.04.30)완전한 이해를 바탕으로 작성된 글이 아님으로 사전에 언급드립니다. 개인적으로 GIT 초보자가 가져야 할 Diagram 이라고 생각한다.git과 git hub는 다르다.git은 Local 저장소라 불리며, 3가지 단계로 나줘져 있다. 만약 이미 github에 만들어진 데이터를 복사할려면 아래의 URL에 들어가서 'git clone [github URL]' 복사https://angelplayer.tistory.com/222 [Github] Github 저장소(Repository) 생성 & 초기 설정Repository(저장소) 생성하기 github에 접속하여, Repositories 탭으로 이동하면 [New] 버튼이 있습니다. New 버튼을 누르면 새로운 Reposito.. [JavaScript]ScrollY? versus pageYoffset? 브라우저 반영 때문에 차이 발생 결론은 구형 브라우저 신경안써도 되면 scrollY 쓰고, 구형 브라우저까지 신경써야 한다면 pageYoffset을 쓴다.아니면 조건문 걸어서 둘 다 쓰던지. 참조 https://studyhardgogo.tistory.com/186 [UI]스켈렉톤 UI = Progress Indicator(Skeleton) “API 응답 시간이 짧은 경우에는 스켈레톤이 보여지지 않게끔” from KaKao tech 스켈렉톤 UI사용 이유는(a) 사용자에게 현재 시스템이 시간이 필요하다. (b) 대략적인 시간은 얼마다 라는 정보를 전달하기 위해서이다.Progress indicators tell users (a) that the system needs more time to process the last user action (for instance, to load a file, or to install a new update), and (b) approximately how much time remains. https://www.nngroup.com/articles/progress-indicators/ Progress I.. [React] 간단한 서버 세팅 하는 법 이 자료는 라매개발자 영상을 참조한 자료입니다. https://www.youtube.com/watch?v=d6suykcsNeY express를 통한 서버 설치. 서버용 폴더와 클라이언트용 폴더 각각 만들기 서버 설치 express를 이용한 서버 설치 1. (cmd) cd를 이용해 server 폴더 이동 2. (cmd 명령어) npm init 설치 3. (cmd 명령어) npm i express 4. 서버 파일 만들기 app.js // app.js 파일 안에 아래 code 넣기 const express = require('express') const app = express() app.get('/', function (req, res) { res.send('Hello World') }) app.listen.. [Javascript] vue.js computed와 methods computed 속성과 methods 속성의 차이점 computed => {{ }} methods = > attribute 1) {{ }}에 작성할 로직이 복잡하면 함수의 return 정의하여 사용(값 바로 >> {{ }} 전달 2) 계산량이 많아 캐시가 필요 1) 이벤트 핸들러 조정 가능 v-on 2) event가 발생 할 때 function () 작동 - 변수를 넣을 수 없음. - 변수를 넣을 수 있음. data : 단순한 값 computed : data의 단순한 값에 상태 변환( 사칙 연산 등) 정도면 사용 methods : prameter와 같은 값을 전달 받을 때 사용 methods > computed(사칙연산 등)) > data(메모리 할당 여부에 따라서 갈리는 듯) Computed compu.. [Javascript] scope 범위 (EnvironmentRecord / LexicalEnvironment) 이 내용은 책 '코어 자바스크립트'를 보고 저의 개인적인 해석으로 작성된 내용입니다. 내용이 틀릴 수도 있으니 중의 하시기 바랍니다. 실행 콘텍스트 - 실행 콘텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체. - 실행 컨텍스트 객체는 활성화 되는 시점에 variableEnviroment, LexicalEnvironment, ThisBinding 세 가지 정보 수집. 실행 콘텍스트를 생성할 때 VariableEnvironment와 LexicalEnvironment가 동일한 내용으로 구성. LexicalEnvironment는 함수 실행 도중에 변경되는 사항이 즉시 반영되는 반면() VariableEnvironment는 초기 상태 유지. VariableEnvironment와 LexicalEnviro.. [Javascript] 위아래 정보값 찾기 Hierarchy: parentNode: The element's parent in the DOM tree. childNodes: A collection of all child nodes (elements, text nodes, comments). children: A collection of only child elements (not text nodes or comments). previousSibling and nextSibling: References to siblings in the DOM. [Chrome]디버깅 1 : 버튼 연청색 : 하나하나 코드 실행하는 버튼 빨간 박스 : function으로 바로 들어가는 버튼 [Node.js] Node.js를 테스트 자료는 조코딩 영상을 참조하였습니다. node express(framework) - 웹 프레임워크(request response)를 만들고 사용하는 것 ( 단 node 자체 내장함스로도 서버 설정이 가능합니다.) express module 1. npm 'express'검색 2. (설치)cmd에서 'npm i express' 3. (실행) cmd에서 'node index.js' => 자기서버 'localhost:3000' port: 한 서버에 여러개의 포트 가능 FTP : 20,21(TCP) SSH : 22(TCP) 텔넷 : 23(TCP) SMTP : 25(TCP) DNS : 53(TCP/UDP) DHCP :67(TCP) HTTP : 80(TCP) HTTPS : 443(TCP) ap.. [CSS & Javascript]var 값 설정해서 JS에서 변경하기 var(--_원하는 명칭) 자바스크립트에서 명칭을 선택하고 원하는 값으로 변경 가능. 예시1) 예시 2) [Javascript] 데이터의 저장 이 글은 책 '코어 자바스크립트'를 보고 재구성한 내용입니다. 자바스크립트 데이터 저장 사실 1. 변수를 하나를 만들면 메모리는 주소를 하나만들고 그곳에 이름(식별자:identifier)만들고 데이터 주소를 저장한다. 즉 두 번의 메모리 할당을 한다. 이유는 데이터(식별자의 정보값)이 가변적으로 변하기 때문이다. 변수에 원시값만 있을 경우 주소 ... 1001 1002 1003 ... 데이터 이름(식별자): aa 값:@8002 주소 .. 8001 8002 8003 ... 데이터 '바보' 변수에 객체 정보가 있을 경우 주소 ... 1001 1002 1003 ... 데이터 이름(식별자): aa 값:@8002,13001 ... (식별자 정보)주소 .. 8001 8002 8003 ... 데이터 이름 : fool.. [Javascript] 배열 안에서 렌덤으로 뽑기 A 배열.[Math.floor(Math.random() * A 배열.length)] [HTML 속성값 가져오기, form] event.target[name-input].value 이벤트가 일어나는 함수내에서 HTML 중 000 속성값을 가지고 있는 값 선택하기 event.target['name-input'].value [href]를 가져와 #id 만들기 const activatedTab = document.getAttribute("href"); const contentTab = document.querySelector(activatedTab); const activatedTab = document.getAttribute("href"); const contentTab = document.querySelector(activatedTab); [setAttribute] <-> removeAttribute setAttribute("hidden", true) removeAttribute("hidden") [overflow] popup에서 확인 버튼 고정으로 만들기 popup안에 형제로 h3 / div class="grid" / button 이 있다. div class="grid" => height + overflow-y height를 고정하고 scroll이 하면 div = "grid" 자신만 고정된 height를 가지고 스크롤이 된다! [immutability] const vs freeze( ) const => 이름이 가리키는 값을 다른것으로 못 바꾸게 하는 것 freeze ( ) => 값 자체를 못 바꾸게 하는 것 참조 https://www.youtube.com/watch?v=ol239ZUGwHg&list=PLuHgQVnccGMBxNK38TqfBWk-QpEI7UkY8&index=11 이전 1 2 3 4 5 6 7 ··· 10 다음
