record4me

이번 리액트 숙련 강의를 들으며 이번에 만들었던 투두리스트를 되짚어봤어. useEffect, useRef useEffect - 로딩시에 콜백으로 안의 실행문을 한 번 만 딱 실행되게 해주는 함수야. useRef - 값을 Dom에 저장해서 렌더링해도 값을 유지하게 해주는 저장소 역할도 하고 - Dom에 직접 접근해서 값을 직접 DOM제어도 할 수 있어서 두 함수를 이용하자면 useEffect(() => { refComment.current.focus(); },[]) const refTitle = useRef(null); const 함수 = () => { refTitle.current.focus(); } 이런 식으로 useEffect론 로딩하자마자 해당 input에 포커스 줄 수 있고, 함수실행되고 마지막에..

이름 짓기 이번에 베이직 수업에서 변수, 클래스 이름 등의 이름 짓기에 대해 알려주셨어. 분명 직관적으로 잘 짓는다고 자부하고 있었는데 정말 작은 부분에서 못 짓고 있었다는 걸 알게 됐어. 그리고 바로 프로젝트에서도 수정했지. 물론 내가 보기엔 간단할 지라도 같이 협업하는 사람에겐 무슨 의미인 지 모르고, 그걸 사용하는 사람마다 일일이 알려줄 수 없으니 누가봐도 알아볼 수 있는 이름으로 지어야 해. 평소 삭제 버튼의 클래스 이름을 del-btn이라고 짓고 있었는데 이게 잘못 됐다는 걸 알았어. delete-btn라고 이런 식으로 길어지더라도 내가 함께 협업하는 사람도 직관적으로 알아볼 수 있도록 지어야 해. 예를 들어, del-btn 외에도 ed-btn 등 regi-btn 이런 것도 edit-btn이나 ..

느낀 점 이번 베이직 과제로 컴퓨팅 사고와 개발 공부법을 읽었는데 정말 좋은 것 같아. 만약 이걸 알고리즘 카타와 알고리즘 세션을 하기 전에 봤다면 왜 정렬함수들과 알고리즘을 그렇게 표현을 해서 써봐야 하는 지 이해하는 데에 도움이 되지 않았을까라는 생각이 들어! 초보, 입문 코딩에 정말 좋은 글 같아! 알고리즘 세션을 들을 때나 알고리즘을 풀 때나 어떤 생각으로 그 로직을 짜야하는 지 답답했는데 이 글 보면서 묵은 때 빠지 듯 확 풀렸어ㅋㅋ편ㅡ안.. *참고 사이트 - https://velog.io/@teo/computational-thinking

SyntaxError (구문 오류, 문법 오류) SyntaxError 객체는 문법적으로 잘못된 코드를 컴퓨터가 해석하려고 시도할 때 발생하는 오류를 나타내줘. JavaScript 엔진이 코드를 구문(문법) 분석을 할 때 언어의 구문에 맞지 않는 토큰이나 토큰 순서를 만나면 이 에러를 발생시켜서 수정하란 경고를 줘. SyntaxError : 경로 ~~ 코드면 파일.js:23(해당 오류 코드줄 ) 이런 식으로 이번에 zep에서 같이 공부하는 동료분의 고민을 리뷰하면서 해결했어. 해당 오류 예시 코드 export const ErrorEx = () => { const arr = [{ name : "장아찌", kind : "반찬", }, { name : "스테이크" kind : "반찬" } ] return ( {..

SPA - Singel Page Aplication의 준말이야. 단 한 개의 페이지로 이루어진 애플리케이션이야. 모바일로 된, 안드로이드앱같다며 웹앱, 웹애플리케이션이라고도 불려. 기존의 MPA 같은 여러 페이지로 나누어진 앱은 문제가 있어. 예를 들어, 좋아요 기능을 눌렀을 때마다 페이지가 다시 갱신되며 깜빡이면서 다시 위치가 조정되는 건데(리렌더링,re-rendering) 그건 사용자에게 굉장히 불편해. (누를 때마다 화면이 계속 깜빡이며 새로고침되는 것.) 하지만 실제, 인스타, 페이스북처럼 리액트를 사용하는 앱은 그런 좋아요를 눌렀을 때, 그 자리만 해당 컴포넌트만 이미지가 채워지는 것 처럼 보여. 그 자리만 다시 갱신되는 거야. 하나의 페이지 안에서 해당 요소만 바꿔주는 거지. 단 한 개의 페이..

리액트에서의 불변성 유지 리액트 같은 경우 주소값을 비교해서 변화를 감지하는 데, 직접적으로 값을 비교하면 리액트가 감지 못하고 감지하기 위해 페이지 리렌더링을 하게 돼. 예를 들면, 최근 리액드로 투두리스트를 만들며, 불변성을 지키지 않으면 일어나는 에러를 겪었어. input 값을 비워주려고 직접 input의 value부분을 가져와서 동등연산자로 빈값을 주려고 하니까 경고같은 에러를 받았어. (아래 글) A component is changing a controlled input of type text to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa). Decide betw..

CRA (Create React App) - 한 줄의 명령어로 React 프로젝트 개발에 필요한 요소들을 자동으로 구성하는 방법이야. - 실행 방법 yarn create react-app 폴더이름 이런 경우 React 프로젝트를 구성하기 위해 필요한 것들을 한 방에 알아서 깔아줘서 편해. -추가로, 리액트에 필요한 패키지를 설치해줄 때 명령어야. yarn add 패키지 이름 컴포넌트 - uiux요소를 표현하는 최소한의 단위인데 리액트의 핵심 구축 블록 중 하나야. - 리액트에서 개발한 모든 애플리케이션은 컴포넌트란 조각, 블록으로 구성돼. 헤더블록, 메인 블록, 푸터 블록 등으로. 리액트 컴포넌트를 표현하는 방법엔 두가지가 있어. - 함수형 컴포넌트 - 클래스형 컴포넌트 렌더링 - 리액트 앱이 실행되고 ..

React - 리액트는 javascript 라이브러리야. UI(User Interface)를 구축하기 위해 만들어졌어. - UI를 Building한다는 건 웹 또는 앱어플리케이션의 보여지는 부분을 구축한다는 거야. React자체적으로는 라이브러리로 분류되어있어. 하지만 일부 사람들은 React는 단순한 라이브러리가 아닌 프레임워크라고 간주하기도 해. 그 이유로는 세 가지의 프레임워크적인 특징을 가지고 있다고 볼 수 있어서야. 1. 컴포넌트 기반 아키텍처를 가지고 있어.(컴포넌트 기반) - 이를 통해서 애플리케이션을 작은 다위롤 분할하고 재사용할 수 있게 해. *아키텍처 - 크게 빌딩을 짓는 시공과 비슷한 개념이야. - 여러 조각이 합쳐져서 하나의 건물을 만들어 내는 과정이라고 생각하면 돼. 소프트웨어도 ..

임시 저장소 -dataArr = [] 이 임시 저장소 하나로 맡은 기능의 반이상을 해결할 수 있었어. 로컬스토리지에서 꺼내 온 데이터를 잠시 보관했다가 꺼내 쓸 수 있는데 이걸 통해 휘발되는 정보를 잡아서 유지시킬 수 있어서 사용자에게 저장한 정보를 보여줄 수 있어. 로컬 스토리지와 이 임시저장소를 순환해서 정보를 교환해서 넣고 배치한다고 보면 되는 것 같아. 상단의 이 dataArr 하나로 등록, 조회, 삭제 기능을 완성하게 됐어. 코드의 타이밍의 중요성 느낀 점 - 처음엔 이 임시 저장소를 어떻게 써야하나 싶었는데 이젠 값을 유지해 주는 데 정말 필요한 존재라는 걸 알게 됐어.

두 번째 팀프로젝트를 마치며, 익숙해진 github의 issue, PR 컨벤션 / 순수 자바스크립트만을 이용해서 구현하는 것.. github에서 pull Request는 대체로 써봤지만 issue를 템플릿을 사용해서 제대로 써 본 적은 이번이 처음이었어. issue를 적고 PR을 올리는 과정이 번거로울 수 있지만 팀원들의 진행 사항이 어떤 지 수시로 확인할 수 있고 내 작업물도 언제까지 어떻게 마무리를 할 지도 알 수 있어서 좋은 경험인 것 같아. 주말이 껴있어도 팀슬랙을 통해 소통할 수 있어서 좋았고 작업물에 대한 의견도 교환할 수 있어서 좋았어. jQuery를 사용할 땐 쉬웠다는 느낌이었는데 순수 자바스크립트로 전부를 구하려고 하니 어려웠어.. 1 해결하면 1오류가 터졌지만ㅋㅋ..팀원분들이 같이 고민..