분류 전체보기

https://www.codetree.ai/missions/5/problems/l-r-and-b?utm_source=clipboard&utm_medium=text 코드트리 | 코딩테스트 준비를 위한 알고리즘 정석 국가대표가 만든 코딩 공부의 가이드북 코딩 왕초보부터 꿈의 직장 코테 합격까지, 국가대표가 엄선한 커리큘럼으로 준비해보세요. www.codetree.ai arr = [list(input()) for _ in range(10)] bx,by = 0,0 lx,ly = 0,0 rx,ry = 0,0 for i in range(10): for j in range(10): if arr[i][j] == 'B': bx,by =j,i elif arr[i][j] == 'L': lx,ly = j,i elif arr[..

리액트 개발을 할 때 CSS를 적용하기 위해서는 따로 css파일을 만들어서 js, jsx 파일에 import하거나 인라인으로 지정해줬어야 했습니다. 전자의 경우는 파일의 개수가 늘어나고 클래스 네임을 일일이 붙여줘야 된다는 불편함이 있고 후자의 경우는 jsx방식으로 css스타일을 지정해줘야 한다는 불편함이 따르죠. 이것들을 해결해주고 조금더 리액트 스럽게 스타일을 적용할 수 있으며 여러 강력한 기능들을 제공해주는 styled-components를 소개합니다. styled-components 설치 npm install styled-components js 파일에 import import styled from "styled-components"; styled-components 사용법 const Box = ..

어느날 코딩을 하다가 다음과 같은 오류를 마주하게 되었다. 위 오류의 원인은 값이 undefined가 됐기 때문이라고 나와있다. console.log로 input의 value가 참조하는 state들을 출력했다. undefined가 된 걸 알 수 있다. 원인은 참조형(title,rating,content를 가지는 객체)인 data에서 setData()를 위와 같이 작성해서 생기는 문제이다. 위와 같이 바꿔주어 해결을 하였다. 참고로 위같이 해주어도 된다. data가 이전의 값으로 새로운 값을 만드는 것이기에 콜백함수로 해준다고 배웠다.

Recoil을 전역 상태관리 라이브러리로 리액트 친화적인 문법과 그 사용이 간편한 라이브러리로 CNU SW 아카데미 TA님에게 추천받은 상태관리 라이브러리이다. 리덕스는 그 이후에 사용할 것이기 때문에 우선, recoil의 사용방법에 대해 포스팅하고자 한다. 이 글을 읽으면 아주 기본적인 recoil 사용방법을 알게 될 것이다. Recoil 설치 npm install recoil RecoilRoot import React from 'react'; import { RecoilRoot, } from 'recoil'; function App() { return ( ); } recoil의 상태를 사용하는 컴포넌트는 부모트리 어딘가에 나타나는 RecoilRoot가 필요하다고 한다. 공식 홈페이지에서는 루트 컴포넌..

- 상태관리는 데이터를 전역적으로 관리하여 불필요한 렌더링을 줄이고 props drilling을 피할 수 있다. - 상태들이 복잡하게 얽혀있다 상호의존성이 높아UI가 어떻게 변하는지 알기 어렵다. 프로젝트가 커지고 state가 수십~수백개가 된다면 상태관리가 당연히 필요할 것이다. 1. context api 간단한 프로젝트에서는 props drilling을 피할 수 있는 좋은 대안이 될 수 있다. useReducer를 같이쓰는 경우가 많다. useReducer는 state를 한 곳에서 관리할 수 있게 한다. 2. redux 보일러 플레이트가 복잡하다고 하는데 redux toolkit으로 쓰면 더 쉽고 거기에 타입스크립트로 쓰면 큰 프로젝트 스케일링하기도 편하다고 한다. "제가 경험한걸로는 쇼핑몰 장바구니..

자바스크립트 엔진은 한 번에 하나의 태스크만 실행할 수 있는 싱글 스레드 방식으로 동작하지만 동기처리로 인한 블로킹이 발생하지 않는다. 이는 자바스크립트가 비동기를 지원하기 때문이다. 비동기 처리는 전통적으로 콜백함수를 이용하는데 콜백함수가 많아짐에 따라 콜백 지옥이 생길 수 있다고 한다. 콜백지옥은 가독성을 나쁘게 하고 비동기 처리 중 발생한 에러의 예외 처리가 곤란하고 여러 개의 비동기 처리를 한 번에 처리하는 데도 한계가 있다고 한다. -> 프로미스 챕터에서 더 자세히 알려준다는 데 기억해 두어야 겠다.

1. 리액트의 사용이유에 대해서는 모른다고 하셨다. 2. 리액트를 사용하는 이유가 단지 취업시장의 파이가 커서라고 하셨다. 3. recoil 사용하다가 redux 사용하면 좋을 거라고 하셨다. 4. Top down 방식으로 공부를 주로 하셨다고 했다. -> 나에게 제일 도움이 된 조언 내가 이후에 프로젝트를 만들면 어렵고 이런 식으로 해도 되는건지 의문이 생긴다고 말하자 노마드코더를 추천해주셨고 노마드 코더의 강의를 수강 후 따라 만들다보면 여러 에러도 만날 것이고 그러다보면 자연스레 실력이 늘 것이라고 하셨다. 매우 고마웠다. 앞으로는 블로그 포스팅을 많이 할 것인데 예를들어 내일 axios를 배웠다고 하면 axios 사용법에 대해 간략하게 포스팅을 할 것이다. 프로젝트를 만들면서 생긴 꿀팁이나 에러들..

리액트에서는 if문을 사용하는 대신 논리 연산자와 삼항 연산자를 이용한다. AND 연산자 {show && 보인다 } 위의 경우 show가 true일 때만 p태그가 보인다. {show || 보인다 } show가 false일때만 렌더링 한다. 삼항연산자 {toggle ? ✅ : ❎} const nullValue = null; const undefinedValue = undefined; const trueValue = true; const falseValue = false; const emptyString = ''; const emptyArray = []; 위의 값들은 렌더링이 되지 않는다.