림찌의 개발일기 💻

✅ 무엇을 공부했는지 - 리액트를 다루는 기술 일정 웹 어플리케이션 예제 작업 ✅ 공부한 것에 대한 짧막한 요약 - 짧은 예제를 따라하면서 앞서 배운 리액트에 대해 복습을 할 수 있었다. ✅ 공부한 것에 대한 느낀점 - 그냥 따라 치는게 아니라 이해가 안 가는 부분에 대해선 구글링이나, 책의 설명을 자세하게 읽으면서 예제를 따라하니 좀더 리액트에 대해 알게 된 것 같다 ㅎㅎ 그리고 TIL 작성하는걸 까먹어 버렸다!! ㅠㅠㅠ 앞으론 잊지말자.

✅ 무엇을 공부했는지 리액트 스타일링에 대한 방법들과 간단한 예제를 통한 사용 ✅ 공부한 것에 대한 짧막한 요약 리액트로 스타일링을 할 때는 일반 css를 주는 방법도 있고 sass(scss) 를 사용하는 방법도 있고 css Module를 사용하고 (이 안에서도 classnames 라이브러리를 사용하는 등... 여러가지 방법론이 있다) styled-compoents 라는 라이브러리를 설치해서 사용하는 방법도 알아 보았다. 예전에 제로초님 강의에서 사용한 ant-design 도 한번 더 살펴보았다... ✅ 공부한 것에 대한 느낀점 중복되는 부분을 함수로 빼서 처리하면 굉장히 편리할 거 같은데... 여러번 뭔갈 만들어봐야 감이 잡히지 않을까 싶다..! 퍼블리셔 경력을 이용해서 이것저것 해보자구!

✅ 무엇을 공부했는지 - 리액트 Hook 1. useMemo 2. useCallback 3. useRef 4. 커스텀 Hook ✅ 공부한 것에 대한 짧막한 요약 - 리액트 Hooks 정리 - 커스텀 훅 만들어보기, 커스텀 훅 사용해보기 ✅ 공부한 것에 대한 느낀점 - hook을 어떨 때 사용해야할지 전보다 감이 오는 것 같다. 커스텀 Hook을 사용하면 코드가 엄청 짧아질 거같은데 응용하는데엔 연습이 필요할거 같다! 🤔

✅ 무엇을 공부했는지 - 리액트 라이프 사이클 - 리액트 Hooks ✅ 공부한 것에 대한 짧막한 요약 - 리액트 라이프 사이클 정리 - 리액트 Hooks 정리 ✅ 공부한 것에 대한 느낀점 - 프로젝트를 한번 경험해보고 한 번더 리액트 개념을 들여다 보니, 잘 모르고 썼던 것들에 대한 이해가 더 잘 되는것 같았다. 그리고 hooks 가 정말 간편하다는걸... 다시 한번 느꼈다!

Today I Learned 요즘 클라우드 웹 개발자 과정을 수강하며 프로젝트를 만드느라 공부를 제대로 못했다 😂 다시 기초부터! 튼튼히! 다져보자 ✅ 무엇을 공부했는지 ✅ 공부한 것에 대한 짧막한 요약 ✅ 공부한 것에 대한 느낀점 이제부터 꾸준히 작성하는 버릇을 들이자. 이렇게 세가지를 중심으로 작성해보자 ㅎㅎ 아자아자 화이팅!

현재 MVC 패턴으로 Node 개발을 하는 것과, openAPI를 통해 Node를 개발하는것 두가지를 배우고 있다. 해당 포스트는 두개의 개념을 정리하기 위해 작성하였다. 개발환경은 node express에 .ejs 확장자를 사용한다. 우선 두가지의 차이? MVC 패턴 기반 - 프론트엔드 도움없이 백엔드 개발자가 원맨쇼를 하는 개발이라고 보면 된다. 백엔드 쪽에서 정적 html와 같은 화면단도 제어해주기 때문이다. 응답을 처리할땐 POST와 GET 형식을 주로 사용한다. 사용자가 브라우저에서 요청을 하면 일단 View(화면단) 을 던져주어야 하므로 GET으로 화면을 가져온다. 그리고 사용자가 입력하고 저장 혹은 보내기를 누르는 액션을 실행하면 POST 방식으로 데이터를 받아서 처리를 해주는 식이다. 앞서..

Node.js 란 무엇일까 🤔 - node.js 는 자바스크립트로 빌드된 자바스크립트 런타임이다. 일단 특징 세가지를 언급하고 자세한 특징을 서술하겠다. 런타임 환경? 특정언어로 만든 프로그램들을 실행할 수 있는 환경을 뜻한다. node는 javascript 프로그램을 컴퓨터에서 실행을 할 수 있다. 즉, node.js 는 자바스크립트 실행기라고 봐도 된다. 특징 1. 이벤트 기반 개발 모델이다. (ex. click event) 2. 논블록킹 I/O 모델을 제공한다. 3. 싱글 스레드를 사용한다. 4. NPM 이라는 자바스크립트 오픈소스 라이브러리 저장소 생태계를 제공한다. 1. 이벤트 기반 개발 모델이다. 이벤트 기반 개발 모델이란, 이벤트가 발생할때 미리 지정해둔 작업을 수행하는 개발 방식이다. 이벤..

const me = { name : '달림', age : 27, gender : '여자', 'hobby?' : '게임하기!', } 객체 리터럴로 객체를 생성하는 코드의 예시이다. 각각의 프로퍼티를 ` , ` 으로 나누며 key값과 value 값이 존재한다. 객체 리커럴 프로퍼티의 key값은 ''로 감싸주어도 되고 감싸주지 않아도 되는데 감싸주지 않는게 좋다. ''로 감싸주는 경우는 1. 맨 앞에 숫자가 붙어 있거나 2.띄어쓰기나 3.특수문자가 포함되어 있는 경우에 포함하여 적어준다. 객체 리터럴의 값을 불러오는 방식은 두 가지이다. console.log(me.name); // 결과 : 달림 console.log(me['name']); //결과 : 달림 이 두개의 콘솔을 찍어보면 불러오는 방식은 다르지만 ..

클래스형 컴포넌트와 함수형 컴포넌트의 비교를 위해 간단한 끝말잇기 예제를 가져왔다. 클래스형 컴포넌트 class WordRelay extends Component{ state = { //state를 먼저 이렇게 선언 word: '리액트', value: '', result: '', }; // 끝말잇기 오답 체크 onSubmitForm = (e) => { e.preventDefault(); if(this.state.word[this.state.word.length - 1] === this.state.value[0]{ //마지막 word의 첫번째와 지금 적은 값의 첫번째가 같으면 실행 this.setState({ result: '딩동댕, 이어서 작성해주세요', //정답일시 나오는 문구 word: this.st..

Hook 리액트는 클래스 컴포넌트와 함수형 컴포넌트 두가지로 나눠진다. (함수형 : hook) 원래 리액트에선 Class 컴포넌트만 이용할 수 있었지만, hook을 사용하면 class를 작성할 필요 없이 react와 상태값을 사용할 수 있다. hook의 특징 상태관련 로직을 재사용할 수 있도록 도와준다. 컴포넌트 재사용을 좀더 유려하게 해주고, 로직에 기반을 둔 함수들도 컴포넌트를 나눠줄 수 있다. class를 사용하지 않고 state를 사용할 수 있다. componentDidMount, componentWillUnmount... 등 라이프 사이클을 컴퍼넌트 안에 입력해주지 않아도 된다. 한 마디로, hook은 state 관리를 할 수 있고 라이프사이클을 작성하지 않아도 되고, 코드의 재활용성이 좋다. ..