전체 글

TIL - 2022.01.19 수요일

오늘 배운 것 - 과제의 api 주소를 잘못 설정했다는 것을 제출 한시간 전에 알았다. 경로 허겁지겁 바꾸느라 에너지를 많이 소모했다. 어제 공지를 제대로 읽지 않고 서둘러 작업하느라 생긴 미스였다. 앞으로는 공지를 꼼꼼하게 확인하고 과제를 해야지. - 어제 과제 중 놓쳤던 게시글 삭제를 구현하고, 게시글 작성 컴포넌트를 재사용해서 수정 기능도 구현을 완료했다. 점점 기능을 갖추어가는 모습이 정말 신기하다.. 재밌다. - 오늘 헤멨던 부분 1. 수정 페이지에 기존 입력 값을 value로 넣고 싶었는데 실패했다.. state도 전송이 제대로 안됐는지 undefined가 뜨고, 제일 심각한 문제는 저렇게 value를 넣어놓으면 내용 수정이 안된다는 것. 일반 html의 input value와는 다른 것 같다..

[Javascript] slice() 배열 자르기

slice() array.slice( begin, end ) slice 함수는 어떤 배열의 begin index부터 end index까지를 받아서 (end 미포함) 새로운 배열로 반환한다. 이 경우 원본 배열인 array은 바뀌지 않는다. end index가 생략되면 begin index부터 배열의 끝까지를 잘라낸다. 예시 // 프로그래머스 연습 문제 // 전화번호의 뒷 4자리를 제외한 나머지 숫자를 전부 *으로 가린 문자열을 리턴한다. function solution(phone_number) { let answer = ''; for(let i=0; i

[Javascript] switch 조건문

switch 조건문 복수의 if 조건문을 대체할 수 있는 조건문. 미리 설정한 변수값을 참조해서 조건식을 만들 수 있다. 특정 변수를 다양한 상황에서 비교할 수 있게 해준다. 여러가지 경우를 한번에 처리할 수 있어 효율적이다. 문법 switch(x) { case 'value1': // if (x === 'value1') ... [break] case 'value2': // if (x === 'value2') ... [break] default: // 예외처리 ... [break] } switch에는 반드시 case가 따라와야 한다. 예외처리에는 default를 사용한다. default를 걸면, case마다 일일이 break 걸어줄 필요 없이 자동으로 break가 설정된다. default는 반드시 case..

[Javascript] 삼항연산자 / 조건부 렌더링 / 옵셔널 체이닝

삼항연산자란? '조건문' ? '참일 때 실행할 식' : '거짓일 때 실행할 식' 삼항연산자는 JavaScript에서 세 개의 피연산자를 취할 수 있는 유일한 연산자이다. 기본 형태는 위와 같으며, 물음표와 콜론을 기준으로 조건문, 각각 True/False일때 실행할 식을 입력한다. if 명령문의 단축 형태로 주로 쓰이며 잘 활용하면 코드를 간결하게 만들 수 있다. 예시 props.isEdit ? "수정":"등록" // props.isEdit의 값이 True일 경우 "수정"을 반환한다. // props.isEdit의 값이 False일 경우 "등록"을 반환한다. 조건부 렌더링 '조건문' && '값이 참일 경우 실행할 식' 일정 조건 하에서만 식을 수행할 것을 명령하는 방법. 조건문이 참일 경우에만 && 뒤의..

[Javascript] 예외 처리 / try ... catch ... finally

예외처리란? try...catch 문은 실행할 코드블럭을 지정하고 예외(exception)가 발생(throw)할 경우의 응답을 지정한다. 이러한 일련의 과정을 예외처리라고 부른다. 문법 try { try_statements } catch (exception_var) { catch_statements } [finally { finally_statements }] try_statements : 실행될 선언들 catch_statements : try블록에서 예외가 발생했을 때 실행될 선언들 exception_var : catch 블록과 관련된 예외 객체를 담기 위한 식별자 finally_statements : try 선언이 완료된 이후에 실행될 선언들. 이 선언들은 예외 발생 여부와 상관없이 실행된다. 예시 ..

TIL - 2022.01.18 화요일

오늘 배운 것 - map 과 filter를 배웠다. map을 이용해 data가 들어있는 배열을 내가 원하는 형태로 불러오고, 해당 데이터를 react에 넣어서 자유게시판 목록페이지를 구현했다. - mutation 메소드를 사용한 뒤 refetch를 이용해 API 데이터를 다시 불러오는 방법을 배웠다. refetch를 해줘야 수정된 데이터가 페이지에 실시간으로 반영된다. - Next.js의 라우터를 이용하여 현재까지 만든 상세페이지, 목록페이지, 글쓰기 페이지를 상호 연결했다. 이게 뭐라고 굉장히 뿌듯하네.. 아직은 하드코딩된 부분이 많지만 차근차근 기능들을 구현해나가고 싶다. - 목록 페이지를 table 로 코딩할까 하다가.. 반응형으로 옮길때 영 구렸다는게 생각나서 flex로 바꿨다. 원래는 웹표준과 ..

[Javascript] 실무 반복문 map / filter

map() 배열의 각 요소에 대해 동일한 동작을 반복하고 그 결과값을 모은 새 배열을 리턴한다. 간단하게 반복문이라고 생각하면 된다. for를 사용해서 만들 수 있는 함수는 map으로 거의 다 구현이 가능하다. 실무에서 for보다 훨씬 많이 사용한다고 함. (for는 요즘 실무에서는 거의 사용되지 않는다고.) 문법 // 1. 일반적인 배열 const classmates = ["철수", "영희", "훈이"] classmates.map((el) => (`${el}어린이`)) // `${el}어린이` 는 (el) + "어린이" 와 동일하다. // el은 element의 약자 // 2. 배열 안의 객체 const classmates2 = [ {name : "철수"}, {name : "영희"}, {name : "..

[GraphQL] Apollo-Client로 API 읽어오기 (Query)

Query 메소드란? GraphQl의 경우 기존의 Rest-API와 CRUD 메소드에 차이가 있다. Rest-API GraphQL-API 생성 Create POST MUTATION 수정 Update PUT 삭제 Delete DELETE 조회 Read GET QUERY Mutation의 경우 지난번에 apollo-client로 간단하게 사용하는 법을 포스팅한 적이 있다. (https://guuumi.tistory.com/50) 이번에는 Query를 수행하는 방법을 확인해보자. Apollo-client로 graphQL Query 수행 기본적인 import 및 gql을 활용해서 API 이름을 지정해주는 방법은 useMutation과 동일하다. 다른 부분은 작동함수 라인이다. const [ qqq ] = use..

[Next.js] 정적 라우팅과 동적 라우팅 | Static-Routing and Dynamic-Routing

Routing / Router 라우팅이란 페이지 이동을 뜻한다. 그리고 라우터는 이러한 라우팅을 도와주는 도구이다. React 기반의 프레임워크인 Next.js에는 자체 라우터가 내장되어있다. 이 라우터를 불러와서 사용하면 간편하게 라우팅을 할 수 있다. 라우터에도 다양한 기능이 있으며, 이러한 것들을 포함하고 있는 라우터 자체를 라우터 객체라고 부른다. 주로 사용되는 라우터 객체의 내장 메소드는 다음과 같다. import {useRouter} from 'next/router' // 먼저 라우터를 import 해와야 사용할 수 있다. const router = useRouter() router.push("이동할 페이지") // 다른 페이지로 이동한다. router.reload() // 새로고침한다. ro..

TIL - 2022.01.17 월요일

오늘 배운 것 - 오늘은 컴포넌트를 활용해 소스코드를 분리해서 폴더 구조를 정리하고, props를 통해 각각의 컴포넌트간에 정보를 전달하는 방법을 배웠다. 그리고 배운 내용을 활용해서 자유게시판 소스코드를 컴포넌트로 쪼갰다. - 컴포넌트, state, props가 리액트의 핵심이라는 이야기를 몇차례 들었기 때문에 컴포넌트 구조에 대해 내 나름 상상하는 바가 있었다. 나는 컴포넌트로 웹페이지의 시각적인 요소들만 분리해서 사용한다고 생각했다. 모든 페이지에 공통으로 들어가는 네비게이터, 메인 배너, 자주 사용하는 유닛(button, input, span) 등을 미리만들어놓고 import 하는 방식을 상상했던 것. 그런데 실제로 배워보니 시각적인 요소 뿐 아니라 기능적인 요소까지 모두 분리해서 정리하는 방식이..