분류 전체보기 (38) 썸네일형 리스트형 [React] Vanila JS vs React Js | JSX TAB 2022 2학기 학회활동 [팀 스터디] TIL 포스팅입니다. 작성자 : 38기_김민서 1. Vanila Js vs ReactJs 해당 강좌에서는 버튼을 눌렀을때 화면에 표출되는 숫자가 증가하는 단순한 예제로 두개를 비교해보았다. 먼저 Vanila JS의 코드이다 Total clicks: 0 Click me 한번에 보기위해 html파일안에 script 태그를 이용하여 JS 코드도 함께 합쳤다 코드의 큰 흐름을 보면 html 태그를 JS에서 querySelector나 getElementBy(id,class,등등)으로 요소를 가져와서(=선언해서) 이를 함수에서 다뤄주는 형식이다. 또한 html의 내용을 변경해주고 싶다면 이또한 앞서 선언해준 변수의 요소들(위의 코드의 경우 innerText)로 값을 변.. [웹 FE 스터디] React : 수정 ~ 삭제 기능 TAB 2022 2학기 학회활동 [팀 스터디] TIL 포스팅입니다. 작성자 : 40기_박지민 ref. 생활코딩 [React] 수정 (업데이트) 기능 ▶ 원시 데이터 타입 string, number, boolean, bigint, undefined, symbol, null ▶ 범 객체 object, array ▶ 객체 값의 수정 newValue = {...value} → value값 복제한 새로운 데이터가 newValue의 값이 됨. newValue 변경 후 setValue(newValue) → 컴포넌트 재실행 * 배열의 경우 {...value} 대신 [...value] 사용 ▶ 수정 시의 주의점 오리지널 데이터 변경 시 기존 데이터와 변경된 데이터가 같을 경우 컴포넌트는 다시 랜더링되지 않는다. cons.. [웹 FE 스터디] React : Creat~Delete TAB 2022 2학기 학회활동 [팀 스터디] TIL 포스팅입니다. 작성자 : 40기_강한림 작성 참고 및 강의 : 생활코딩 - WEB - React 지난 강의에서 이어지는 내용입니다. 9. 수정기능 (Update) Update = creat + read Creat아래에 Update 할 수 있는 링크를 추가한다. (ul - li 태그를 사용한다.) ------------------------ 수업에 들어가기 앞서 여러 자잘한 기능들을 추가합니다 ----------------------- Update가 상세보기 페이지로 들어갔을때만 보이게 하자. let contextControl = null; mode가 read 일때 나타나야하므로 if (mode === 'READ') { // 기존의 코드들// conte.. [웹 FE 스터디] 리액트 시작하기(2) - JSX, elements, props TAB 2022 2학기 학회활동 [팀 스터디] TIL 포스팅입니다. 작성자 : 38기_김민서 JSX란? react에서는 jsx라는 문법을 사용하는데, 풀네임은 a syntax extension to Javascript 이다. 어떻게 확장이 됐는지 간략히 나타내면 Javascript + XML/HTML 라고 볼수있다. const first_react = Hello 위의 코드가 jsx문법을 사용한 사례라고 볼수있다. js와 html코드가 같이 있는모습이다. 이렇게 jsx로 작성된 코드는 아래와같이 js코드로 변환이된다 React.createElement 함수의 매개변수형태로 일일히 넣어줘야하는것을 태그형태로 직관적으로 쉽게 작성할수있는것이다+0+ react에서는 이렇게 정의해준 element들의 정보를 받고.. [웹 FE 스터디] JSX, Rendering Elements, Components, Props TAB 2022 2학기 학회활동 [팀 스터디] TIL 포스팅입니다. 작성자 : 38기_서다원 ref : 인프런 강의 [소플의 처음 만난 리액트(React)] JSX란? A syntax extension to JavaScript 자바스크립트의 확장 문법 리액트로 프로젝트 개발할때 사용됨. 공식적인 자바스크립트 문법은 아님. 어떻게 확장한걸까? JavaScript + XML / HTML JSX 의 예시 코드 JSX는 하나의 파일에 자바스크립트와 HTML을 동시에 작성하여 편리함. 자바스크립트에서 HTML 을 작성하듯이 하기때문에 가독성이 높다. const element = Hello, world!; JSX 를 쓰는 이유? 생산성과 가독성이 높아짐 JSX의 장점 1. 간결한 코드 JSX는 createEleme.. [웹 FE 스터디] React : 이벤트 ~ 생성 기능 TAB 2022 2학기 학회활동 [팀 스터디] TIL 포스팅입니다. 작성자 : 40기_박지민 ref. 생활코딩 [React] Event ▶ html과 react의 표현 차이 (ex) onclick html : onclick = "~" react : onClick = { } ▶ function(event){ } 태그 클릭 시 페이지 리로드가 일어나지 않도록 이벤트 객체를 첫 번째 파라미터로 주입 이벤트 객체에는 해당 이벤트 상황을 제어할 수 있는 여러 정보와 기능이 들어가 있다. (event) => 로 축약가능 {} 내에는 함수 호출 후 실행될 내용을 입력. ▶ event.preventDefault(); 해당 코드를 포함한 태그가 동작하는 기본동작을 방지 클릭해도 리로드가 일어나지 않게 한다. *butto.. [웹 FE 스터디] React TAB 2022 2학기 학회활동 [팀 스터디] TIL 포스팅입니다. 작성자 : 40기_강한림 작성 참고 및 강의 : 생활코딩 - WEB - React 6. 이벤트 - onclick ="" : 버튼을 클릭했을때 ""내에 입력한 요소를 실행/작동한다. ▣ react로 위와 같은 결과(버튼을 눌렀을 때, hi 경고창이 뜨게 한다.)를 만들어 보자. 은 function()과 같다. - onChangeMode에 id값이 파라미터로 필요할 때 - event는 객체 - event.target.id : target은 이벤트를 유발시킨 태그를 가르킨다. (이경우는 ) : event.target.id는 target의 id값을 가져온다. 7. state 입력 : prop return : 새로운 ui prop : 컴포넌트를 .. [웹 FE 스터디] 리액트 시작하기 TAB 2022 2학기 학회활동 [팀 스터디] TIL 포스팅입니다. 작성자 : 38기_서다원 ref : 인프런 강의 [소플의 처음 만난 리액트(React)] HTML 마크업 언어의 한 종류 웹사이트의 뼈대를 구성하기 위해 사용하는 마크업 언어 흔히 태그(Tag) 를 이용해서 쓰임. 예시 ) body 태그에 실제 웹사이트에서 보이는 콘텐츠가 들어간다. SPA Single Page Application 의 줄임말. 하나의 페이지로 웹사이트를 관리하는 것 리액트가 이에 해당함. html 파일은 하나만 있고, 동적으로 body 태그 내에 content를 바꿔넣음. CSS 디자인을 적용할 수 있음 Javascript 프로그래밍 언어의 한 종류 정식 명칭은 ECMAScript 스크립트 언어의 한 종류 -> 런타임에.. [웹 FE 스터디] 웹 기초부터 React 시작하기 TAB 2022 2학기 학회활동 [팀 스터디] TIL 포스팅입니다. 작성자 : 38기_김민서 해당 포스팅은 인프런 [처음 만난 리액트] 강의를 기반으로 작성하였습니다. 웹기초; html부터 Javascript까지 html이란? 웹페이지는 html이라는 언어로 그려지게된다 hyper text markup languange의 줄임말로 웹사이트의 뼈대를 구성하기 위해 사용하는 마크업 언어가 정의이다. html의 구성 죄다 태그단위로 구성되어있다. 크게 태그로 구성되어있고 그안에서는 head와 body태그로 구성된다! head에서는 제목이나 meta태그(주로 utf-8이나 웹사이트 설정?이 들어가는것같다)가 들어가고 body는 화면에 그려줄 내용및 script태그로 js기능을 포함하기도한다. 화면에 어떻게 그려.. [TIL]Flutter 개발하기(Navigator,Drawer,ListView) TAB 2021 겨울방학 학회활동 [슬기로운 코딩생활] 4주차 TIL입니다. 작성자 : 38기_김민서 노마드코더 챌린지를 완강해서 이번 모각코 시간에는 flutter를 활용해서 개발하던 앱에 기능을 추가해보았다. 이번시간에는 drawer, navigator를 중점적으로 구현해보았다. 참고강의:코딩셰프 + 개인적으로 플러터를 사용하면서 오류가 좀 많이 난편이라 블로그에 따로 적어두었다 https://kimwest00.tistory.com/23 0. 최종 구현 목표 1. drawer를 사용해서 메뉴바 구성하기 2. navigator를 이용해서 페이지 이동하기 3. ListView를 이용해서 정보담기 1. drawer 사용하기 drawer는 해석그대로 메뉴바, 즉 서랍기능을 수행하는 위젯이다. drawer는 .. 이전 1 2 3 4 다음
