위코드 - 스터디로그

wecode 사전 스터디 레플릿 과제를 풀며 정리한 내용입니다.아래 코드는 10이상의 숫자만 배열에 담아 리턴하는 함수입니다. 다차원 배열로 접근해서 for 을 중복해서 사용합니다. 전체 배열의 인덱스는 i 그 안의 배열의 인덱스는 j 로 설정되어 있습니다.다른 예제로

wecode 사전 스터디 레플릿 과제를 풀며 정리한 내용입니다.배열을 인자로 받는 helloBot 함수를 만들어서 아래와 같이 출력되게 만드는 과제입니다.배열을 순회하며 0일 때는 '안녕하세요', 1일 때는 '또 만나네요'를 반환해야 합니다. for 반복문과 if 조건

wecode 사전 스터디 레플릿 과제를 풀며 정리한 내용입니다.아래 정의된 두가지 배열을 concat 메서드로 더하고, 중복된 값을 filter 메서드로 제거하는 과제입니다.위 배열을 concat 메서드로 합치고, menu 란 변수에 담습니다.콘솔을 찍어보면 중복된 요

위코드 사전스터디 과제로 자기소개 페이지를 만들며 정리한 내용입니다. flex 와 media query 를 활용한 반응형 다단구조를 만든는 연습을 하였고, 들어가는 이미지는 서버에서 불러오는 것을 고려해 html 태그에 스타일 속성으로 넣었습니다. 사이트 링크 깃허

Semantic 의 사전적 정의는 '의미의, 의미론적인' 입니다. Semantic Web 은 의미론적 웹을 뜻합니다. 기계가 이해할 수 있는 형태로 의미가 부여된 웹을 말합니다. 웹에 존재하는 수많은 데이터들에 메타데이터를 부여해 '의미'와 '관련성'을 가지는 거대한

CSS position 속성은 웹 문서 상에서 요소의 위치를 지정해주는 태그입니다. positon 속성에 relative absolute fixed 등의 값을 적용한 후 top right bottom left 를 사용해 최종 위치를 지정할 수 있습니다. 적절히 섞어서

CSS 의 display 속성은 웹 상에서 각 요소들이 어떻게 보여주고 서로 상호 배치되는지를 결정합니다. 여러가지 속성이 있는데 inline inline-block block 이 대표적입니다.display: inline - 문자 처럼 한줄에 가로로 배치되는 요소dis

wecode 레플릿 과제를 풀며 정리한 내용입니다.input 과 textarea 태그로 사용자가 직접 텍스트를 입력할 수 있는 영역을 만들 수 있습니다.input 태그는 type 과 placeholder 라는 속성을 가집니다.type="text" 는 텍스트를 입력하는

wecode 레플릿 과제를 풀며 정리한 내용입니다.최소값과 최대값을 매개변수로 받아 두 숫자 사이의 랜덤 숫자를 구하는 함수를 만들면 아래와 같습니다.Math.random() 은 0 이상 1 미만 (0 ~ 0.9999...) 의 난수(랜덤한 숫자)를 반환합니다. Mat

wecode 레플릿 과제를 풀며 정리한 내용입니다.주소에서 도시를 찾아 삭제하고 새로운 주소를 리턴합니다. 도시는 무조건 '시'로 끝납니다. '경기도 성남시~' 처럼 앞에 도가 붙을 경우 도시명은 총 3자이고, 도가 없고 '서울특별시, 부산광역시' 같은 도시명이 앞으로

wecode 레플릿 과제를 풀며 정리한 내용입니다.미국은 태어나면 0살이고 1년 후 생일 지나야 1살이 됩니다. 반면 한국은 태어나면 1살이고 연도가 빠뀔 때마다 한 살씩 먹습니다. 이 기준을 가지고 만 나이를 계산하는 함수를 구현합니다. 만 나이는 현재 연도에서 출생

wecode 레플릿 과제를 풀며 정리한 내용입니다.for.. in 문을 활용해 객체 및 배열을 순회하는 방법으로 푸는 문제입니다. getExamResult 함수는 매개변수로 scores 와 requiredClasses 를 받습니다. scores 는 아래와 같이 객체

OS 는 사람과 컴퓨터 사이의 중간 관리자로 일종의 번역기 역할을 합니다. 컴퓨터는 0과 1밖에 모르기 때문에 우리가 쓰는 컴퓨터 언어를 대신 해석해서 전달해줍니다. 단순 번역만 하는 것이 아니라 각종 컴퓨터의 자원들(cpu, 메모리)도 쓸 수 있게 해줍니다.OS 는

위코드 프리코스 수업을 들으며 정리한 내용입니다.인터넷은 전 세계의 컴퓨터가 서로 연결되어 정보를 교환할 수 있는 하나의 거대한 컴퓨터 통신망을 말합니다. 인터넷은 1950년대 광범위하게 설치된 전화선을 통해 시작되었습니다. (모뎀)그 후 1969년대 2차 세계 대전을

위코드 파운데이션 과정을 들으며 정리한 내용입니다.초기의 웹 사이트는 링크를 이용해 여러 페이지의 정보를 이동하며 보는 것이 전부였다면, 이제는 웹 안에서 문서를 작성하거나, 쇼핑을 하고 SNS 를 사용하게 되었습니다. 사용자가 별도의 응용 소프트웨어를 설치하지 않고

위코드 프리코스 과정을 들으며 정리한 내용입니다.Git 은 분산 버전 관리 시스템, VCS (Version control System)으로 파일의 변경 사항을 추적해 관리하는 시스템입니다. 변경 사항을 기록하고 특정 시점의 버전으로 돌아갈 수 있게 해주며 프로젝트 중

위코드 파운데이션 과정을 들으며 정리한 내용입니다.웹프론트엔드에서 Routing 은 다른 경로(url)에 따라 다른 화면을 보여주는 것을 으미합니다. 기존 웹페이지에서는 html 에 a 태그 링크를 걸고, 화면에서 해당 링크를 클릭했을 때 다른 페이지로 이동하게 했습니

위코드 코드카타를 풀며 정리한 내용입니다.숫자 배열과 배열 내 두 숫자를 더해서 나온 합계로 두 숫자의 인덱스 값을 배열로 반환합니다.배열의 요소를 돌면서 확인해야 하므로 for in 반복문 형태를 만들어 줍니다.합계에서 배열의 요소를 뺀 값이 다른 요소이므로 배열의

위코드 파운데이션 과정을 들으며 정리한 내용입니다.기존 CSS 문법의 불편함을 개선하고자 나온 기술이 CSS 전처리기입니다. CSS 전처리기의 문법으로 파일을 작성하면, 실제 실행 전 브라우저가 읽을 수 있는 CSS 파일로 변환해줍니다. CSS 전처리기에는 많은 종류가

위코드 파운데이션 과정을 들으며 정리한 내용입니다.css 속성의 작성 순서는 동작이나 성능향상에 영향을 주지 않지만, 유지보수를 고려해 연관관계를 파악하기 쉽게 작성하는 게 좋습니다. 레이아웃에 영향을 많이 주는 순서대로, 인접 속성끼리 묶어서 작성합니다. 권장하는 속

위코드 코드카타를 풀며 정리한 내용입니다.정수인 숫자를 인자로 받고, 그 숫자를 뒤집어서 return 합니다.숫자의 개념으로 접근하지 않고 문자로만 생각하게 되면 아래와 같은 잘못된 코드를 짜게 됩니다.정답 코드는 아래와 같이 간결합니다. 문제를 정확히 이해하고 적용하

위코드 파운데이션 과정을 들으며 정리한 내용입니다.리모트는 원격 저장소인 깃허브 공간을 말합니다. 로컬은 내 컴퓨터에서 작업하고 있는 프로젝트 폴더 공간을 말합니다. 레파지토리는 한 리모트에만 연결될 수도 있지만, 여러 리모트 공간에도 연결 가능합니다. 각 리모트 마다

위코드 파운데이션 과정을 들으며 정리한 내용입니다.Hook 은 state 관리와 lifecycle 관리 기능을 함수 컴포넌트에서 상용할 수 있게 연동(hook In)해주는 함수입니다.(미리 만들어 놓은 함수를 가져다 쓰는 것) 이런 Hook 들의 모음을 Hooks 라고

위코드 파운데이션 과정을 들으며 정리한 내용입니다.props 는 컴포넌트 속성값으로 부모 컴포넌트로부터 전달받은 데이터를 지닌 객체입니다. props 로 전달하려는 값(변수, 함수, state값, event handler 등)들은 모두 자식 컴포넌트에게 전달할 수 있습

위코드 파운데이션 과정을 들으며 정리한 내용입니다.리액트에서 state 는 컴포넌트 내부에 있는 상태값으로 해당 컴포넌트가 UI에 보여줄 정보를 결정할 때 사용합니다. 컴포넌트 내에서 정의해서 사용하고 변경이 가능합니다.state 를 사용하기 위해 useState 함수

위코드 파운데이션 과정을 들으며 정리한 내용입니다.부모 컴포넌트로부터 전달 받은 객체 형태 데이터를 자식 컴포넌트에 전달하는 props 와 UI 에 보여줄 정보를 결정할 때 사용하는 상태값 state 를 같이 활용해보겠습니다.아래 예제를 보면,color state 를

위코드 파운데이션 과정을 들으며 정리한 내용입니다. 문제 strs 단어가 담긴 배열에서 공통된 시작 단어를 반환합니다. 해설 배열의 첫번째 요소를 STR 기준값으로 설정한 후 공통되는 글자를 비교하다가, 다른 값이 나오는 인덱스 위치에서 STR 을 잘라 새로운 기준

위코드 파운데이션 과정을 들으며 정리한 내용입니다.Side Effect 는 한글로 표현하면, 부작용, 부수효과라고 할 수 있습니다. 주요 효과 이외에 부수적으로 일어나는 효과를 말합니다. 함수의 본질적 역할이 input 을 받아서 output 을 산출하는 것이라고 했을

위코드 파운데이션 과정을 들으며 정리한 내용입니다.아래처럼 함수의 return 문 위에서 Side Effect 를 실행하면, Side Effect 가 렌더링을 블락킹할 수 있습니다.코드는 위에서 아래로 순차적으로 실행하므로, 사이드 이펙트 doSideEffect() 가

위코드 파운데이션 과정을 들으며 정리한 내용입니다.깃 커밋 메시지는 3자가 보았을 때 이해할 수 있게 적어줍니다. 기본적으로 아래와 같이 분류할 수 있습니다.Add - 레이아웃, 기능 추가Remove - 내용 삭제 (폴더 / 파일 삭제)Modify - 수정 (JSON

위코드 파운데이션 과정을 들으며 정리한 내용입니다.좋은 코드란, 기본적인 것을 잘 지켜서 누가 읽어도 쉽게 이해할 수 있는 코드입니다. 서로의 코드를 이해하기 위해 약속한 리액트 컨벤션들을 아래 소개합니다. 해당 컨벤션이 정답은 아니니 참고만 하세요.예시)리액트는 st

위코드 파운데이션 과정을 들으며 정리한 내용입니다.리액트는 데이터로 이루어진 UI 를 그리는 라이브러리입니다. 이 데이터 시간이 지나도 변하지 않는 값(백엔드 API 로 가져올 필요 없는 값)을 상수 데이터 정적인 데이터 라고 합니다.반복되는 UI 구조는 상수 데이터와

위코드 파운데이션 과정을 들으며 정리한 내용입니다.프론트엔드와 백엔드는 프로젝트 초반 개발속도가 다릅니다. 백엔드가 API 를 구성하기 전에 프론트엔드가 UI 를 그려야 한다면, 실제 API 와 유사한 샘플 데이터인 Mock(모조, 거짓) Data 를 만들어서 사용해

위코드 코드카타를 풀며 정리한 내용입니다.숫자로 이루어진 배열 nums 를 인자로 전달하면, 숫자중에서 과반수가 넘은 숫자를 반환하세요.배열내 숫자를 하나씩 비교해야 하므로 for 반복문을 두번 돌리면서 비교합니다. 숫자 중 과반수가 넘으면 되므로 이 숫자가 전체 배열

위코드 파운데이션 과정을 들으며 정리한 내용입니다.정보가 필요할 때 클라이언트는 서버에 HTTP 통신으로 요청을 보내고 응답을 받습니다. fetch 메서드를 사용해 데이터를 요청해서 받고(read), 생성하고(create), 수정하고(update), 삭제(delete)

위코드 파운데이션 과정을 들으며 정리한 내용입니다.만드는 사람이 불편해야 쓰는 사람이 덜 불편합니다. 초기에 하는 작업들이 귀찮아도 잘 해두면, 훗날의 나에게, 다른 개발자에게, 서비스 사용자에게 좋은 경험을 줄 수 있습니다. 지금 프로젝트는 팀원들과 머지하지 않지만,

위코드 파운데이션 과정을 들으며 정리한 내용입니다.JWT(JSON Web Token) 는 클라이언트와 서버 간 정보를 JSON 개채로 안전하게 전송하기 우한 개방형 표준입니다.(access token 을 만드는 방법 중 하나) JWT 는 JSON 개체에 기본정보, 전달

위코드 파운데이션 과정을 들으며 정리한 내용입니다.REST API 란 REST 하게 API를 서술하는 방법입니다. REST 는 Representational State Transfer 의 약자로 상태를 전달하는 방법을 의미합니다. 통신이란 특정 자원(데이터)를 어떤 방

위코드 파운데이션 과정을 들으며 정리한 내용입니다.서로 다른 데이터이지만 resource(자원)의 종류가 동일 할 때 Path parameter 를 사용합니다. path 는 경로 parameter 는 매개 변수입니다. 아래처럼 product 의 1이라는 변수를 사용해

위코드 파운데이션 과정을 들으며 정리한 내용입니다.바탕화면으로 이동한 후 깃 클론으로 프로젝트 파일을 받고, 기록된 패키지들을 설치합니다. git clone \[레파지토리 주소] - 프로젝트 파일 내려받기npm install - pakage.json 에 기록된 패키지들

위코드 에서 공부하며 정리한 내용입니다.리액트 컴포넌트는 UI 표현이나 동작 로직 등 여러 역할로 사용됩니다. 컴포넌트는 재사용할 수 있는 최소단위 UI 지만, 이런 기능들이 복잡하게 들어갈 수록재사용이 어렵고 가독성과 유지보수성이 떨어집니다. 이를 막고자 컴포넌트를

위코드에서 공부하며 정리한 내용입니다.하나의 코드로 작성된 카드 UI 를 컴포넌트로 분리하고 카드뷰와 리스트뷰로 구분해 사용할 수 있게 만듭니다. 우선 반복되는 카드 디자인을 Mock 데이터와 map 메서드로 만듭니다. Mock 데이터는 U에서 변경되는 요소를 고려해

위코드에서 공부하며 정리한 내용입니다.라우팅을 설정하는 가장 기본적인 방식은 정적 라우팅입니다. 라우터 컴포넌트에서 사용할 경로와 해당 경로로 접속 시 보여줄 컴포넌트를 미리 정의해두는 방식입니다.규모가 크고 복잡한 애플리케이션을 만든다면 이렇게 경로를 미리 설정하는

위코드에서 공부하며 정리한 내용입니다.쿼리 스트링은 URL 의 한 부분으로, 요청하는 URL 에 부가정보를 포함할 때 사용합니다. 기존 URL 은 단순한 형태의 요청과 응답을 주고 받았지만 쿼리 스트링을 사용하면 조건에 맞게 정렬된 특정 형태의 정보를 요청하고 받을 수

위코드에서 공부하며 정리한 내용입니다.동적 라우팅을 직접 구현해보는 과제입니다. 페이지 구성과 구현해야 할 동작은 아래 이미지와 같습니다.몬스터 카드가 나열된 리스트 형식의 Monsters 컴포넌트에서 해당 몬스터를 클릭 했을 때 /detail/몬스터 id 로 이동하게

위코드에서 공부하며 정리한 내용입니다.데이터베이스는 컴퓨터 시스템에 저장된 정보나 데이터를 모두 모아놓은 집합입니다. 데이터 모양은 대략 엑셀의 스프레드 시트와 비슷합니다. (모두 그렇진 않습니다.) 이런 데이터들은 보통 데이터베이스 관리시스템 (DBMS, Databa

위코드에서 공부하며 정리한 내용입니다.객체에 컴포넌트를 맵핑해서 메뉴 탭을 클릭했을때 다른 컴포넌트가 보이게 만들 수 있습니다. 아래 예시에서 바뀌는 데이터는 메뉴를 클릭했을 때 스테이트가 바뀌고 이에 따라 아래 보여지는 컴포넌트가 달라집니다.우선 상수 데이터로 메뉴

위코드에서 공부하며 정리한 내용입니다.useEffect 로 불러온 목데이터로 map 함수를 돌릴 때 위와 같은 오류가 난다면 아래 내용을 참고하세요.위 메시지는 map 메소드로 읽어야 할 데이터의 정보가 undefiend 이기 때문에 오류가 나는 것입니다. 아래와 같이

위코드에서 공부하며 정리한 내용입니다.브랜치 이름은 페이지 단위로 만듭니다. (feature/login) 기능 별로 더 잘게 나누어도 되지만, 아직 git 이 익숙하지 않다면 페이지 단위로 나눕니다새로운 feature/product 브랜치를 만든다면, 작업을 진행했던

위코드 코드카타를 정리한 내용입니다.두 개의 input 으로 복소수가 string 으로 주어지면, (복소수는 a+bi 형태의 실수와 허수로 구성) input 받은 두 수를 곱해서 반환하세요. 복소수 i의 제곱은 -1 입니다.우선 복소수로 들어오는 인자의 값을 실수와 허

위코드 코드카타를 정리한 내용입니다.양수로 이루어진 m x n 그리드를 인자로 받고 상단 왼쪽에서 시작해 하단 오른쪽까지 가는 길의 요소를 다 더했을 때 가장 합이 작은 값을 찾아서 리턴하세요. 한 지점에서 우측이나 아래로만 이동할 수 있습니다.grid0 으로 특정 값

위코드 코드카타를 정리한 내용입니다.주어진 숫자 배열에서, 0을 배열의 마지막쪽으로 이동합니다. 원래 있던 숫자의 순서는 유지합니다.기존 배열을 포인문으로 순회하면서 0의 갯수를 카운트하고, 0이 아닌 값들은 새로운 배열에 담아줍니다. 그리고 카운트한 0의 갯수만큼 새

위코드 특강(카카오 윤경옥 개발 팀장님)을 듣고 기록한 내용입니다. 비전공자가 컴공을 전공한 개발자보다 뛰어나긴 쉽지 않다.(신입이라면 더욱) 비전공자로서 열등감을 가지는 것은 당연하다. 거기서 멈추지 말고 열등감을 동력으로 더 성장해라. 더 꾸준하게 오래 공부해라,

위코드 1차 팀프로젝트를 진행하며 정리한 내용입니다. 플리츠마마(업사이클 가방 판매) 사이트를 클론한 위플리츠(개발자를 위한 it 기기 판매) 사이트를 만들고 있습니다.상단 컬러 카테고리는 고정되어 있는 메뉴바이므로 상수데이터를 만들어서 map 함수를 사용했습니다. 상

위코드 코드카타를 정리한 내용입니다.재귀(recursion)란, 자신을 정의할 때 자기 자신을 호출하는 방법을 뜻합니다. 예를 들면 아래와 같습니다.위와 같이 작서알 경우 10에서 시작해서 무한으로 마이너스 값이 내려갑니다. 그래서 재귀함수는 언제 멈출 것인지 조건을

위코드에서 공부하며 정리한 내용입니다. 사진 출처, westudy개발이나 테스트 목적이 아닌 실제 사용자들을 대상으로 서비스하는 서버를 말합니다. (로컬 환경에서 실행되는 애플리케이션은 로컬에서만 동작) 운영 서버는 트래픽 대응, 빠른 응답 속도와 가용성을 보장해 안정

위코드 1차 팀프로젝트를 진행하며 정리한 내용입니다. 플리츠마마(업사이클 가방 판매) 사이트를 클론한 위플리츠(개발자를 위한 it 기기 판매) 사이트를 만들고 있습니다.이메일, 비밀번호, 이름, 성별, 휴대폰, 생년월일, 개인정보 유효기간을 입력하는 회원가입 페이지입니

위코드 코드카타를 정리한 내용입니다.양수 N 을 이진법으로 바꾸었을 때 연속으로 이어지는 0의 갯수가 가장 큰 값을 리턴합니다. 이어지는 0은 1과 1사이의 것을 말합니다. (정확한 풀이는 아닙니다.) 입력된 숫자를 toString() 메서드를 사용해 이진수로 변형하고

위코드 1차 팀프로젝트를 진행하며 정리한 내용입니다. 플리츠마마(업사이클 가방 판매) 사이트를 클론한 위플리츠(개발자를 위한 it 기기 판매) 사이트를 만들고 있습니다.회원가입 시 프로필 사진을 입력하는 기능을 구현했습니다. input 태그로 파일을 입력받는 동시에 해

위코드 코드카타를 정리한 내용입니다.배열안의 각 요소들은 주식 가격입니다. 한번의 거래만 할 수 있을 때 가장 큰 이익을 구합니다.배열의 순서를 나누고 이중 for 문을 돌려 각 값들을 빼줍니다. 두번째 for 문의 인덱스는 i + 1 로 시작하고 기존 배열에서 i 를

위코드 1차 팀프로젝트를 진행하며 정리한 내용입니다. 플리츠마마(업사이클 가방 판매) 사이트를 클론한 위플리츠(개발자를 위한 it 기기 판매) 사이트를 만들고 있습니다.멘토 리뷰를 받고 정리해본 유효성 검사 방식을 정리했습니다. 기존에는 유효성 검사를 하나씩 실행해서

위코드 1차 팀프로젝트를 진행하며 정리한 내용입니다. 플리츠마마(업사이클 가방 판매) 사이트를 클론한 위플리츠(개발자를 위한 it 기기 판매) 사이트를 만들고 있습니다.회원가입시 사진을 포함한 정보를 보낼 때는 FormData 를 활용하면 각 데이터를 일괄 전송할 수

위코드 코드카타를 정리한 내용입니다.아래와 같이 문자가 담긴 배열을 입력하면 같은 알파벳으로 이루어진 단어끼리 묶어줍니다.알파벳을 비교하기 위해, 전개구문으로 분리해서 배열에 담은 후 sort 메소드로 알파벳 순으로 정렬하고 join 합니다. 그 값을 key 값으로 정

위코드 1차 팀프로젝트를 진행하며 정리한 내용입니다. 로그인 한 유저에게는 토큰(JWT)을 발급하고 이를 브라우저의 로컬스토리지에 저장해서 관리합니다. 이후 마이페이지 접속이나 상품 주문 및 삭제의 동작을 할 때는 해당 토큰을 제시해 인증된 사용자라는 것을 알려야 합니

위코드 1차 팀프로젝트를 진행하며 정리한 내용입니다. 상단 카테고리를 선택해서 대분류 리스트 페이지를 보여주고 거기서 필터 버튼을 클릭하면 쿼리스트링을 추가해서 소분류가 되는 코드를 작성했습니다. 쿼리스트링 형식은 아래와 같습니다 .에러가 났던 코드는 아래와 같습니다.

위코드 1차 프로젝트에서 만난 에러를 바탕으로 모던 JavaScript 튜토리얼을 참고해 정리한 내용입니다.목데이터로 테스트한 페이지가 백엔드와 통신할 때 에러가 나는 경우가 많습니다. 이번 프로젝트에서는 두가지 경로로 에러가 발생했는데 하나는 데이터를 받을 때 보내주

위코드 코드카타를 정리한 내용입니다.숫자로 이루어진 리스트 nums 를 인자로 주고 그 안의 연속적인 요소를 더했을 때 가장 큰 값을 찾아 리턴합니다.forEach 로 배열 요소를 돌면서 현재값과 누적값을 더합니다. 이때 0보다 큰 값만 누적되도록 0 과 (누적값+현재

위코드 1차 팀 프로젝트로 기본적인 커머스 사이트 flow 를 가진 사이트(플리츠마마)의 클론 코딩을 진행했습니다.개발 기간 : 2022.9.19 ~ 2022.9.29 개발 인원 : 프론트엔드 3명, 백엔드 2명Front-End : React.js, sass, Java

위코드 코드카타를 정리한 내용입니다.선형탐색은 반복문을 통해 배열의 요소를 하나씩 확인하며 해당하는 값의 Index 을 구합니다. 이 때 배열의 길이가 길어지고 복잡한 계산이 들어있다면 실행 속도가 느려질 수 있습니다. 그래서 더 효과적인 탐색을 위해 이진 탐색법을 사

위코드에서 공부하며 정리한 내용입니다.CSS-in-JS 는 자바스크립트 파일 안에서 css 를 작성하는 방법입니다. JS 파일안에서 css 코드를 작성하므로 css 의 변수와 함수를 그대로 사용할 수 있고, css 클래스명을 해시 값으로 자동 생성해 작명에 대한 고민을

위코드에서 공부하며 정리한 내용입니다.기획이나 디자인이 변경되거나, 기능 추가로 코드를 수정해야 하는 상황은 자주 발생합니다. 그럴 때 기존 코드가 복잡해서 수정하기 어려운 상황을 방지하기 위해 관심사의 분리가 필요합니다. 관시사 분리란 작성한 코드가 하나의 관심사만

위코드에서 공부하며 정리한 내용입니다.프로젝트를 시작할 폴더에 진입한 후 터미널에 명령어를 입력해 설치합니다. 프로젝트 이름은 소문자(kebab-case)로 작성하는 게 일반적입니다.위 명령어로 생성한 폴더로 진입해 Third-Party Library 를 생성합니다.라

위코드에서 공부하며 정리한 내용입니다.Hooks 이 등장하기 전에는 관심사 분리를 위해 Presentational - Container 패턴으로 로직을 담당하는 컴포넌트와 UI를 담당하는 컴포넌트를 분리해서 관리했습니다. Hooks 이 등장한 후에는 함수 컴포넌트에서도

위코드에서 공부하며 정리한 내용입니다.모달 창이 떴을 때 마우스 스크롤을 움직이면 모달 창 뒤에 있는 UI 가 움직이지 않도록 막아주는 훅입니다.useLockBodyScroll 훅이 호출되면서 문서의 body 태그 스타일 중 overflow 를 hidden 으로 해서

위코드에서 공부하며 정리한 내용입니다.(사진 출처, 위코드)실제 서비스를 운영한다면, 서로 작업한 코드를 병합하는 과정에서 발생하는 콘플릭트를 사전에 해결해야 합니다. 그러기 위해 중간 단계의 브랜치를 만들어 활용합니다. Main - 실제 배포해서 운영하고 있는 코드가

위코드 2차 프로젝트를 진행하며 정리한 카카오톡 소셜로그인 관련 내용입니다. (리액트, 프론트엔드에서 인가코드만 받아서 백엔드에 넘겨주는 과정)카카오 개발자 사이트 공식문서에서 아래와 같이 로그인 과정을 설명합니다. 더 자세한 내용은 공식문서를 참고하세요.카카오 개발자

깃허브에 올리면 안되는 정보는 .env 파일에 환경변수로 저장하고 .gitignore 에 등록해야 합니다. 이 부분을 깜빡해고 커밋 푸쉬를 했다면 git rebase 로 해당 커밋을 지워도 캐시가 남아서 지워줘야 합니다. 캐쉬 삭제 명렁어는 아래와 같습니다.git i

리액트에서 슬라이드 기능(캐러셀) 을 만들기 위해 react-slick 라이브러리를 사용했습니다. 라이브러리는 기본 세팅된 모양만 가져다 쓰기에는 간편하지만, 요소 하나하나를 커스텀한다면 경우에 따라 더 복잡할 수 있습니다. (개인적인 의견) 간단한 사용법과 커스텀 방

위코드에서 공부하며 정리한 내용입니다.(사진 출처, 위코드)디자인 패턴은 프로그램을 개발하면 자주 발생하는 문제들의 해결책을 패턴화 해 둔 것으로 일종의 모범 답안 혹은 공량집 이라고 할 수 있습니다. 검증된 답이 있다면 굳이 새로운 답을 찾지 않고 바로 적용합니다.

위코드에서 공부하며 정리한 내용입니다.Redux(리덕스)는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너 입니다. 리덕트는 데이터가 단방향으로 흐르게 설계한 Flux 에서 영감을 받아 만들었습니다. Flux 는 개념적인 디자인 패턴이고, Redux 는 Flux 개념

위코드에서 공부하며 정리한 내용입니다.Redux 는 예측 가능한 상태 컨테이너로 자바스크립트 기반의 프레임 워크에서 모두 쓸 수 있지만, (Angular, Vue, React 등) 리액트에서는 React-Redux 라이브러리를 사용해야 state 와 props 가 연동

위코드에서 공부하며 정리한 내용입니다.소프트웨어를 배포하기 전 동작여부를 검증합니다. 테스트 종류는 크게 유닛 테스트, 통합 테스트, 인수 테스트로 나눌 수 있습니다. 보통 QA 과정에서 자동화로 테스트를 진행합니다. 유닛 테스트는 각 함수 및 클래스 단위로 진행해서

위코드에서 공부하며 정리한 내용입니다. (사진출처, 위코드)Javascript 테스트 도구 Jest 를 활용합니다.아래와 같은 계산기 프로그램 코드가 함수 단위로 나뉘어져 작성되었을 때, 단위 테스트 코드를 작성해보면 아래와 같습니다.(테스트 파일은 calculate.

위코드 2차 프로젝트를 진행하며 정리한 내용입니다. (프론트에서 인가코드를 받아서 백엔드에 넘긴 후 백엔드에서 생성한 토큰받기, 프론트에서 토큰을 받는 것은 보안상 위험) 생각나는 대로 순서만 간략하게 남깁니다.

"NHN", "우아한 형제들" 에서 수많은 개발자들을 채용하고 함께 일해본 HR 10년차 장준님 위코드 특강을 듣고 정리한 내용입니다.채용담당자는 회사에서 원하는 스킬, 경력, 역량, 인재상, 커뮤니케이션 스킬, 성향을 적어 놓고 원티드(채용사이트)가 원하는 양식에 맞

위코드에서 공부하며 정리한 내용입니다. 백엔드 서버 IP 주소가 변경되면 모든 API 의 IP 주소를 수정해야 합니다. 이때 config.js 파일을 만들어 관리하면 전체 IP를 한번에 수정할 수 있습니다. (이렇게 하지 않으면 모든 fetch 함수를 찾아가서 직접 주

위코드에서 공부하며 정리한 내용입니다. 스타일드 컴포넌트를 사용할 때 S 객체로 묶어서 사용하면 const 로 각 스타일드를 매번 선언하고 할당하지 않아도 됩니다. 우선 S 객체를 사용하지 않고 선언해서 사용하는 방법을 보면,이때 컴포넌트 앞에 S. 을 붙이고(스타일드

위코드에서 공부하며 정리한 내용입니다. 스크롤을 내리면서 특정 위치에서 플로팅 버튼을 띄우거나 사라지게 하는 방법입니다. 우선 스크롤 이벤트에 따라 실행하는 함수가 다른 전체 렌더링을 방해하지 않도록 useEffect 에 담고, 해당 페이지가 언마운트 되었을 때 클린업

위코드 2차 팀프로젝트로 개발자 채용사이트를 만들었습니다.(우아한 청년들 사이트 참고)개발기간 : 2022/10/04 ~ 2022/10/14개발 인원 : 프론트엔드 3명, 백엔드 2명Front-End : React.js, Styled-Components, Naver-A

위코드 기업 협업에 참여하며 공부한 내용을 정리 및 회고한 내용입니다.기업협업 1주차 미션은 SQL 과 NoSQL 공부였는데, 특이한 점은 공부하는 과정에서 떠오른 모든 생각을 정리하지 않고 적어보라는 것이었다. 이 블로그의 SQL, NoSQL 관련 몇몇 게시물은 그

위코드 기업 협업에 참여하며 공부한 내용을 정리 & 회고 한 내용입니다. 기업협업 2주차에는 하나의 서비스를 골라 NoSQL 로 데이터 모델링을 해보고 있다. 관련 내용은 이후에 포스팅할 예정인데 그 과정에서 알게 된 도메인이란 개념에 대해 간단히 정리해볼까 한다. 이

위코드 기업 협업에 참여하며 배운 내용을 정리 & 회고 한 내용입니다.NoSQL 데이터 모델링을 마치고 하나의 서비스를 골라 만들어보는 작업을 진행했다. 코드 기반 리뷰는 처음이라 이런 저런 질문을 했는데 그 과정에서 동기, 비동기, 프로미스, 콜백 등 각종 개념에 대

위코드 기업 협업에 참여하며 배운 내용을 정리 & 회고 한 내용입니다. 기업협업 2주차 미션은 NoSQL 모델링이었다. how 가 아닌 what 의 관점으로 데이터베이스와 SQL, NoSQL 에 대한 공부를 했으니, 이제 how 를 해볼 차례였다. 이번 과제도 처음엔

위코드 기업 협업에 참여하며 배운 내용을 정리 & 회고 한 내용입니다. (너무 깁니다. 보지 마세요)하나의 서비스를 선정해 NoSQL 데이터 모델링을 해보고 현실적인 시간을 고려해 도메인 모델을 재 설정하고 직접 만들어 보는 미션을 받았다. 데이터 모델링에 2-3일,

위코드 기업 협업에 참여하며 정리한 내용입니다.리액트에서 데이터를 불러와 map 메서드로 화면에 보여줄 때 key 값을 입력해주지 않으면 해당 키 값을 입력하라는 메시지가 뜹니다. 이 key 는 해당 요소에 고유성을 부여해 리액트가 어떤 항목을 변경, 추가, 삭제 할지

위코드 기업협업을 진행하며 정리 & 회고 한 내용입니다.Next.js 를 써야 해서 관련 개념을 조금 찾아보았다. 새로운 언어는 아니고 리액트를 더 편리하게 쓸 수 있는 도구의 느낌. 약간만 살펴보아도 Next.js 를 꼭 써야 겠다는 생각이 든다. 서버사이드 렌더링

위코드에서 제공하는 프론트엔드 학습 자료 일부를 정리한 내용입니다.리액트에서 사용하는 Hooks 인 useState 에는 아래와 같이 타입을 정의할 수 있지만 초기값을 boolean 값으로 넣어주면 타입 추론을 하므로 해당 타입을 적지 않아도 됩니다.boolean 값만

위코드 기업협업에 참여하며 정리한 내용입니다. 기업협업 프로젝트는 타입스크립트를 활용해 진행했다. (타입스크립트는 기존 자바스크립트에 더 명확한 타입을 명시해주는 방법) 타입스크립트 문법이 익숙하지 않은 것을 떠나 자바스크립트 기초가 부족하니 명확한 타입을 정하는 것

위코드 기업협업에 참여하며 정리한 내용입니다. 특정 영역을 클릭하면 해당 영역이 포커스되면서 강조 표시가 유지되고, 그 영역에 맞는 컴포넌트를 불러와서 우측에 띄워주는 기능을 아래처럼 구현했다. View 컴포펀트 안에 ViewNav 는 아래와 같은 형태를 가지는데, 태

위코드 기업협업에 참여하며 정리한 내용입니다.아래 도식처럼 하위 컴포넌트에서 입력한 데이터가 위로 올라가 최종 view 에 반영해야 한다면 여러번 콜백함수를 거치게 된다. 아래 구조는 Editpanel 에 이벤트가 발생하는 버튼이 있어서, 그 하위에 EditpanelM