본문 바로가기

프로젝트 캠프 : Next.js 2기

 (14)
[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 사전직무교육 6~7일차 후기 1. 리액트에서 활용하기 좋은 ES6 문법1) 구조분해할당(=비구조화할당)구조분해할당하지 않은 rest를 스프레드연산자로 처리해서 받을 수 있다. 2) 스프레드 연산자a. 함수 매개변수 -> 나머지 매개변수b. 비구조화 할당 -> 비구조화 할당하고 남은 값 처리c. 배열 i) 깊은복사 ii) 배열 합치기배열을  concat 메서드를 이용하면 합칠 수 있지만, 스프레드 연산자를 이용해서도 가능하다.const arr1 = ['a', 'b', 'c']const arr2 = ['1', '2', '3']const combine = [...arr1, arr2]console.log(combine) // ['a', 'b', 'c', '1', '2', '3']d. 객체  i) 깊은복사  :  원본의 주소값과 참조를 끊어..
[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 사전직무교육 8~9일차 후기 1. 조건부 렌더링import React from 'react'// 조건부 렌더링 : 특정조건에 따라 다른 결과를 보여주는 // if문 , 삼항연산자, 논리연산자(&&), 즉시실행함수const App = () => { const isLoggedin = false; // 즉시실행함수 return ( {(()=> { if (isLoggedin) { return Login Successful } return Login Failed })()} )}export default App  2. React Hook1) useStateimport React, { useState } from 'react'import Input from './compon..
[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 사전직무교육 1주차 후기 지난 월요일부터 수코딩님이 강의하시고 스나이퍼 팩토리에서 주관하는 일경험 프로그램에 참여하게 되었다.네개의 기업이 협업하는 프로젝트에 참여하여 기술을 경험하고 포트폴리오를 쌓을 수 있는 프로그램이다.  이전에 스파로스에서 했던 Next.js를 다시 잡으니 쉽지 않겠다는 생각과 함께 JS를 복습하는 시간을 가졌다. Node를 하면서 공부했으니 3번째로 다시 보는 내용일 것인데, 아직도 개념이 중구난방으로 헷갈리는 것을 보니 아직 취업하기엔 이르다는 생각만 남았다. 수코딩 님의 강의로 코딩공부를 시작했기에 감회가 새로웠던 점은 있다. 물론 그 때 JS까지만 듣고 간 터라 스파로스에선 고생하긴 했지만, 그래도 남는 것이 많은 경험이긴 했다. 거의 반년정도 놨던 프론트를 다시 한다고 생각하니 걱정이 앞서긴 하지..
[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 사전직무교육 5일차 후기 타입스크립트란? 타입스크립트는 자바스크립트의 슈퍼셋이다. 타입을 지정해줌으로써 에러를 사전에 방지할 수 있고 vsCode가 타입을 통해 추론하여 자동완성 기능을 제공하니 개발 생산성이 향상된다. 그리고 타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 파일을 한번 변환해주어야 합니다. 이 변환 과정을 우리는 컴파일(complile) 이라고 부릅니다. 1. 타입추론 : 타입스크립트가 해당 변수의 타입을 추론하는 방법. 변수 선언시 명시하지 않아도 할당된 값을 통해 타입을 추론해준다. 2. 타입명시 : 변수 선언시 타입을 명시하는 방법. 변수명 뒤에 콜론(:)을 붙여 명시 const num: number = 10; const arr: number[] = [1, 2, 3]; const arr2: ..
[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 사전직무교육 3~4일차 후기 1. return 키워드Javascript에서 return 키워드로 함수를 호출한 곳에 값을 넘길 수 있다.원래 return은 함수가 실행되는 도중에 함수를 호출한 곳으로 돌아가라는 의미다.따라서 return 키워드를 사용하면 값을 지정하지 않아도 함수를 호출한 곳으로 돌아간다.   return 키워드를 '문장 B' 이전에 사용했으니 해당 위치에서 함수가 종료되어 '문장 A'만 출력된다. 2.  단축 속성명/메서드명객체를 정의할 때 Key와 Value가 같을 시, 각 값을 반복표기하는 것이 아니라 한번만 표현한다.const obj1 = { a: "apple", b: "21:, c: {}}console.log(obj1.a) // appleconst a = "apple";const b = 21;const c..
[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 사전직무교육 1~2일차 후기 1. 자바스크립트 실행방법node 명령어를 사용하는 방법code runner 익스텐션을 사용하는 방법html 파일에서 script 태그를 사용하는 방법외부스크립트 -> 내부스크립트 -> 웹 브라우저의 개발자 도구 -> Console 탭에서 작성하는 방법 2. var, let, constvar는 변수, 사용하면 안됨.let, const : 재할당이 필요할 때는 let, 재할당이 필요없으면 const사용방법이 어렵다면 기본적으로 const로 쓰고, 분명 재할당된 식별자 때문에 에러가 뜬다면 let으로 바꾸면 된다. 3. 자료형1) 기본자료형 : 숫자, 문자열, 논리, 특수, 심볼숫자형 : 문자열(형) : 따옴표로 감싸져서 문자로 표현된 것.논리형 : true, false특수자료형undefined : 선언만 ..

티스토리툴바