본문 바로가기
728x90
반응형

분류 전체보기231

SideEffect 란? Side Effect : 부작용 === 부수 효과 ( 부정적인 의미 x ) 주요한 효과에 따라서 발생되는 부수적인 효과 프로그래밍에서의 SideEffect 코드가 의도한 주된 효과 외에 추가적으로 발생하는 효과 프로그램을 구성하는 가장 작은 담위인 '함수'에서 자주 사용되는 용어 input을 받아서 output을 산출하는 것 이외의 모든 행위 순수함수 const sum = (x) => { return x+1 } -> x를 받아서 output 을 내는 것 외엔 별 다른 동작이 없다 ❗️ x 는 외부에서 받는 거니까 순수함수가 아니지 않은가? -> 인자로 받기 때문에 순수함수가 맞음! 하지만 이럴 경우👇엔 순수함수가 아니다 Side Effect const sum = (x) => { return num + 1.. 2022. 8. 8.
인스타 main창 클론 react편 정말 많은 고민과... 많은 구글링을 요했던... main창 react 구현... 와아 🎉 Main.js 👇 구현하고자 했던 것 1. 댓글 기능 구현 (map 함수를 쓸 것) 2. 댓글 하나 컴포넌트로 나누기 그리고 짜여진 순서를 정리해보자면 1. input 값 받을 수 있게 value(commentInput) 설정해서 useState 주기 2. input에 onChange가 일어나면 setcommentInput으로 받을 수 있게 함수 짜줌! 3. 받은 input 값을 배열화해서 '댓글 입력 - >댓글창에 댓글 올리기' 를 담을 동적인 요소가 필요해 setFeedComments로 useState 주었다. 4. 버튼에 onClick 일어날시 handleComment 이 일어나게 넣어주었다 5. 배열에 In.. 2022. 8. 7.
인스타 login창 클론 react편 일전에 html-css-js로 만들어 두었던 요 👆 login 창 js 코드를 모두 버리고 (🥹🥹) 몽땅 jsx 문법으로 다시 짰다. 기존 html은 그대로 쓰되 css를 scss로 바꾸었고 js만 jsx 문법으로 바꿈! 포스팅은 jsx만 다룰 예정 :) react 👇 react 관련 포스팅, 읽어보고 가세요! https://0119eunji.tistory.com/23 React 정의와 특징 react 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리 ui 즉 사용자 인터페이스를 구축하는데 사용할 수 있는 Js 라이브러리 선언형 컴포넌트 기반 절차적/ 선언적 절차적 - 원하는 결 0119eunji.tistory.com JSX(JavaScript Syntax eXtension) 리액트에서 사용하는 자.. 2022. 8. 6.
Hook & Props & State 기초 Hook : 갈고리 클래스 컴포넌트에서만 사용할 수 있었던 상태관리와 라이프 관리 기능을 함수 컴포넌트에서도 사용할 수 있도록 연동해주는 함수 때문에 훅이라는 이름이 붙었고 이런 훅들의 모음을 hooks 라고 한다 hook 등장 배경 리액트 초창기에는 클래스 컴포넌트만 사용했지만 함수 컴포넌트가 선언하기 편하고 직관적이고 메모리 자원을 덜 사용하는 등의 장점이 있어 이를 쓰고자 hook이 등장하게 되었다. hook 의 특징 함수 컴포넌트에서만 사용 가능하다 이름은 반드시 use- 로 시작한다 내장 hook이 존재한다 (useState, useEffect 등) 직접 만들어 사용할 수 있는데 이를 'custom hook' 이라고 한다 hook의 규칙 hook은 함수 컴포넌트 내부와 custom hook 내부.. 2022. 8. 6.
React 정의와 특징 react 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리 ui 즉 사용자 인터페이스를 구축하는데 사용할 수 있는 Js 라이브러리 선언형 컴포넌트 기반 절차적/ 선언적 절차적 - 원하는 결과를 만들기 위해서 어떻게 해야하는지에 중점을 두는 방식 : 원하는 결과를 만들기 위한 절차를 프로그래밍하는 방식 ex) 택시 탈 때 : 앞으로 두 블록 하다가 우회전~ 다음 블록까지 직진~ -> 복잡, 생산성 저하 : 자바스크립트로 직접 DOM을 조작하는 방식 ( DOM에서 ul tag를 찾고 li 태그를 만들고 p 태그를 만들고 자식으로 추가하고 등등) 선언적 - 원하는 결과가 무엇인지 중점을 두는 방식 : 원하는 결과가 무엇인지 선언하는 형태로 프로그래밍을 원하는 방식 ex) 택시 탈 때 : 위코드로 가주세.. 2022. 8. 1.
인스타 main page 클론 인스타 클론 과제 드디어 메인창 포스팅! 🔥🔥🔥 메인창 클론은 👆 위 페이지를 만드는 것이 과제였다 댓글 기능은 필수 구현 사항! (저작권 때문에 다 가려놨더니... 잘 안 보여서 당황 😅) 그리고 나는 👆 이렇게 구현했다 댓글 기능까지만 구현함! 👆너무 길고 방대해서... html 기능 구현한 부분만 가져옴 (css는 더 길다) html, css 몽땅 flexbox 써서 css 만들었고 옆 부분은 사이드 박스들은 복붙했다 ㅎ 인스타 특성상 헤더는 픽스 되어야할 거 같아서 무작정 positon : sticky 를 줬는데 생각해 보니 그럴 필요는 없었을 거 같다... 어차피 페이지 안 내리니까 😅 다소 뚝딱이는 페이지지만 나름 만족은 하고 있다. + 😅 문제점 class를 너무 주어서 가독성이 너무 떨어진.. 2022. 8. 1.
react, Node.js 와 NPM react 의 탄생 배경 초기의 웹사이트는 웹 사이트를 보여주고 다른 페이지를 이동해서 정보를 보여주는 기능이 전부였다면 이젠 웹 안에서 모든 것을 할수 있게 되었다. 사용자가 별도의 응용 소프트웨어(어플리케이션)을 설치하지 않아도 웹 브라우저를 통해서 기능들을 이용할 수 있도록 만들어진 서비스를 웹 어플리케이션이라고 한다. 현재 만들어진 웹서비스들은 '웹사이트'라 칭하기 보단 '웹 어플리케이션' 이라는 단어로 표현한다. 초기 웹사이트는 바닐라 자바스크립트로 개발하기에 충분했지만, 웹 개발이 복잡해짐에 따라 한계를 느꼈다. 이에 제이쿼리(라이브러리)가 등장했지만 DOM을 직접 조작해야하는 방식에서 벗어나지 못해 어려움을 느껴 이런 배경을 통해 새로운 라이브러리와 프레임워크의 필요성이 대두되었고 그 결과 .. 2022. 8. 1.
인스타 login page 클론 Day3 인스타 login page 클론 Day3 전 기록들 👇👇👇👇👇👇👇👇 인스타 login page 클론 Day1 https://0119eunji.tistory.com/15 인스타 login page 클론 Day2 https://0119eunji.tistory.com/17 인스타 login page 클론 Day3 🎉 👆 찐 결과물! ID PW 창에 1글자라도 들어가면 활성화된다 (둘 중 하나만이라도 들어가서 활성화되는 건 🙅‍♀️) 멘토님 강의를 듣고 Code Refactoring 겸 내 코드도 손을 봤다. html 은 시맨틱 요소를 좀 더 넣었고 css도 불필요하거나 중복되는 tag들 지우고 width height display text 순서로 맞추었다 html css 는 검색 엔진에 글을 잘 걸리게 하고 .. 2022. 7. 31.
git & github 사용법 git : 프로젝트의 버전관리를 도와주는 시스템 git version 어떤 프로그램을 수정 ,개선하여 완성한 것 이전과 약간씩 다른 변화들을 구분하는 표시 version 관리 이유! 수정할 때마다 파일을 새로 만들면 관리가 힘들다. 하지만 version 별로 관리하면 언제든 이전 버전의 코드로 돌아갈 수 있기 때문에 편리하다. 이력을 남길 목적으로도 쓰인다. github Git을 사용한 프로젝트의 저장소, 버전관리들을 한 프로젝트들을 관리하게 해주는 호스팅 서비스 개발자들의 social Network 하나의 프로젝트를 두고 여러명의 개발자들이 협업할 수 있기 때문에 명령어 git init : git 시작 (해당 폴더 들어간 상태에서 해야 함! 바탕화면에서 할 경우 내 모든 파일이 다 보인다 😂) git .. 2022. 7. 31.
728x90
반응형

티스토리툴바