CodeCamp TIL 12 03.29 1. 알림창 꾸미기 ⇒ Modal 2. 주소, 우편번호 검색 ⇒ React-Daum-Postcode 조건부 랜더링으로 유튜브 url를 선택적으로 보여주기로 상세페이지에 작성함 조건부 렌더링과 true, false를 밑에서 나올 prev를 사용해서 줄임으로써 리팩토링 할 수도 있다. Modal에 그냥 인풋을 넣는게 아니라 react-daum-postcode를 활용해서 주소, 우편번호 검색 모랄... 구조분해할당CodeCampmodalprevStatereact-daum-postcodedestructuring assignmentCodeCamp [TIL] 10월 18일 Callback,promise,async/await Callback? Api문서를 찾아보거나, 개념적인 내용을 찾아볼때 Callback 함수란 말을 많이 접할수 있게된다. Callback 함수의 의미는 크게 2가지 이다. 다른 함수의 인자로 이용되는 함수 이벤트에 의해 호출되는 함수 다른함수의 인자로 인용될때 다른함수의 인자로 들어갈때의 예시는 아래와 같다. add 란 함수의 인자로 callback이란 함수가 들어가 있고 함수 내부에서 cal... CodeCampCodeCamp Javascript - 원시자료(Primitive) Javascript에는 두가지 데이터 타입으로 나뉜다: 원시형(Primitive) vs 참조형(Reference) 원시형의 특징은 불변성이고 참조형의 특징은 가변성이다. 원시자료(Primitive) 종류를 알아보자! String number bigint boolean undefined symbol 이렇게 보면 우리가 javascript에서 쓰는 자주쓰는 데이터의 타입은 원시자료인것을 알 수 ... JavaScriptprimitiveCodeCampCodeCamp [TIL] 9월 8일 파일의 컴포넌트화 기존에 폴더구조를 (container/presenter ) 구조로 변경한 내용을 기반으로 실습을 하였다. 하나의 페이지로 2개의 페이지 만들기 (등록하기, 수정하기) 기존 포트폴리오 과제에서 등록하기 페이지를 구현했다. 이페이지와 동일한 레이아웃을 가지고 있는 수정하기 페이지를 하나더 만들어야 한다. 먼저 등록하기 페이지의 폴더구조를 보면 src>components>commons>units>... CodeCamp코드캠프CodeCamp 06. 실무형 폴더구조 와 props container / presentational 패턴이란 소스코드를 Javascript(기능)와 HTML(UI)로 나누는 방법을 의미합니다. Container 는 Javascript Presenter 는 HTML 위의 내용을 두개의 파일로 나누면 이렇게 됩니다. 세부 내용은 이렇게 됩니다. 부모 자식 컴포넌트의 관계에서 props는 밑으로 event는 위로 전달하는데 부모는 props를 통해... CodeCampCodeCamp [TIL] 9월 28,29일 ImageUpload(2) 위 태그를 보면 미리보기 상태에서도 스토리지 서버에 저장하는것을 알수 있다. 만약 게시글을 등록하지 않고 미리보기 상태에서 뒤로가기를 클릭한다고 하면 쓸모 없는 이미지들이 스토리지에 저장되게 되고 해당 이미지는 영원히 사용하지 않게 된다. 위와 같은 상황을 피하려면 이미지를 실제 등록할때만 서버에 업데이트 하면 된다. 이미지 미리보기는 컴퓨터에 저장된 내용을 기반으로한 임시 URL생성으로 보... CodeCampimageUploadCodeCamp [Project] 프로젝트 2주차 프로젝트 2주차 부터는 본격적으로 코딩을 시작했다. 기본적인 페이지이동, 상하단 탭바의 css등은 이미 마무리 지어서 파일을 git pull 받았기에 각자 정해진 폴더 내에서 css 작업부터 시작했다. 메인 페이지, 리스트 페이지 메인페이지, 리스트 페이지 2개의 페이지를 맡아서 css 작업을 진행했다. 진행해야할 페이지의 구조는 다음과 같다. 메인페이지 처음 보이는 부분은 로고 및 카테고리... reactnativeCodeCampCodeCamp 210914 코드캠프 12일차 여태까지 알람창(alert)를 사용해왔는데 모달을 사용하면 예쁘게 띄줄수 있다. 모달 기능을 사용하기위해서는 AntD 설치후 import 해줘야한다! 모달 Docs에서 설정 등을 적용시켜줘야 한다. 📔 비밀번호 모달창 띄우기 모달을 쓰기위해 import 해주기 isModalVisible은 모달이 켜고 꺼지기 myPassword는 비밀번호 입력을 위한 변수 모달 창 켜기 끄기 변수 html 써... CodeCampTILCodeCamp 210927 코드캠프 17,18일차 프론트엔드를 공부 중 이지만 나중에 백엔드 개발자, 프로젝트 매니저분들과 원활한 커뮤니케이션을 백엔드의 기본을 알아야 한다고 하셨다! 그래서 JavaScript, postgreSQL, DBeaver, apollogrphql를 이용해서 간단한 백엔드를 만들어보았다. 📔 먼저 index.ts를 만들어서 postgreSQL과 연결하기 위한 코드를 작성해준다. DBeaver 를 실행시켜서 postg... CodeCampTILCodeCamp
TIL 12 03.29 1. 알림창 꾸미기 ⇒ Modal 2. 주소, 우편번호 검색 ⇒ React-Daum-Postcode 조건부 랜더링으로 유튜브 url를 선택적으로 보여주기로 상세페이지에 작성함 조건부 렌더링과 true, false를 밑에서 나올 prev를 사용해서 줄임으로써 리팩토링 할 수도 있다. Modal에 그냥 인풋을 넣는게 아니라 react-daum-postcode를 활용해서 주소, 우편번호 검색 모랄... 구조분해할당CodeCampmodalprevStatereact-daum-postcodedestructuring assignmentCodeCamp [TIL] 10월 18일 Callback,promise,async/await Callback? Api문서를 찾아보거나, 개념적인 내용을 찾아볼때 Callback 함수란 말을 많이 접할수 있게된다. Callback 함수의 의미는 크게 2가지 이다. 다른 함수의 인자로 이용되는 함수 이벤트에 의해 호출되는 함수 다른함수의 인자로 인용될때 다른함수의 인자로 들어갈때의 예시는 아래와 같다. add 란 함수의 인자로 callback이란 함수가 들어가 있고 함수 내부에서 cal... CodeCampCodeCamp Javascript - 원시자료(Primitive) Javascript에는 두가지 데이터 타입으로 나뉜다: 원시형(Primitive) vs 참조형(Reference) 원시형의 특징은 불변성이고 참조형의 특징은 가변성이다. 원시자료(Primitive) 종류를 알아보자! String number bigint boolean undefined symbol 이렇게 보면 우리가 javascript에서 쓰는 자주쓰는 데이터의 타입은 원시자료인것을 알 수 ... JavaScriptprimitiveCodeCampCodeCamp [TIL] 9월 8일 파일의 컴포넌트화 기존에 폴더구조를 (container/presenter ) 구조로 변경한 내용을 기반으로 실습을 하였다. 하나의 페이지로 2개의 페이지 만들기 (등록하기, 수정하기) 기존 포트폴리오 과제에서 등록하기 페이지를 구현했다. 이페이지와 동일한 레이아웃을 가지고 있는 수정하기 페이지를 하나더 만들어야 한다. 먼저 등록하기 페이지의 폴더구조를 보면 src>components>commons>units>... CodeCamp코드캠프CodeCamp 06. 실무형 폴더구조 와 props container / presentational 패턴이란 소스코드를 Javascript(기능)와 HTML(UI)로 나누는 방법을 의미합니다. Container 는 Javascript Presenter 는 HTML 위의 내용을 두개의 파일로 나누면 이렇게 됩니다. 세부 내용은 이렇게 됩니다. 부모 자식 컴포넌트의 관계에서 props는 밑으로 event는 위로 전달하는데 부모는 props를 통해... CodeCampCodeCamp [TIL] 9월 28,29일 ImageUpload(2) 위 태그를 보면 미리보기 상태에서도 스토리지 서버에 저장하는것을 알수 있다. 만약 게시글을 등록하지 않고 미리보기 상태에서 뒤로가기를 클릭한다고 하면 쓸모 없는 이미지들이 스토리지에 저장되게 되고 해당 이미지는 영원히 사용하지 않게 된다. 위와 같은 상황을 피하려면 이미지를 실제 등록할때만 서버에 업데이트 하면 된다. 이미지 미리보기는 컴퓨터에 저장된 내용을 기반으로한 임시 URL생성으로 보... CodeCampimageUploadCodeCamp [Project] 프로젝트 2주차 프로젝트 2주차 부터는 본격적으로 코딩을 시작했다. 기본적인 페이지이동, 상하단 탭바의 css등은 이미 마무리 지어서 파일을 git pull 받았기에 각자 정해진 폴더 내에서 css 작업부터 시작했다. 메인 페이지, 리스트 페이지 메인페이지, 리스트 페이지 2개의 페이지를 맡아서 css 작업을 진행했다. 진행해야할 페이지의 구조는 다음과 같다. 메인페이지 처음 보이는 부분은 로고 및 카테고리... reactnativeCodeCampCodeCamp 210914 코드캠프 12일차 여태까지 알람창(alert)를 사용해왔는데 모달을 사용하면 예쁘게 띄줄수 있다. 모달 기능을 사용하기위해서는 AntD 설치후 import 해줘야한다! 모달 Docs에서 설정 등을 적용시켜줘야 한다. 📔 비밀번호 모달창 띄우기 모달을 쓰기위해 import 해주기 isModalVisible은 모달이 켜고 꺼지기 myPassword는 비밀번호 입력을 위한 변수 모달 창 켜기 끄기 변수 html 써... CodeCampTILCodeCamp 210927 코드캠프 17,18일차 프론트엔드를 공부 중 이지만 나중에 백엔드 개발자, 프로젝트 매니저분들과 원활한 커뮤니케이션을 백엔드의 기본을 알아야 한다고 하셨다! 그래서 JavaScript, postgreSQL, DBeaver, apollogrphql를 이용해서 간단한 백엔드를 만들어보았다. 📔 먼저 index.ts를 만들어서 postgreSQL과 연결하기 위한 코드를 작성해준다. DBeaver 를 실행시켜서 postg... CodeCampTILCodeCamp